Exercises 2: Hop
      Manuel Serrano Inria Sophia-Antipolis Méditerranée Manuel.Serrano@inria.fr http://www.inria.fr/indes/Manuel.Serrano
      Hop, first steps
      Define a Hop service building a web page printing a number, incremented each time called.
      JavaScript, client-side DOM
      1. Write a Hop service that accepts one argument. It builds a web page displaying that argument. When the mouse is over a letter, that letter is displayed upcased.
      Hop, a first multi-tier program
      Define a service named game which implements the mysterious number game. The user must discover a random number in at most ten attempts.
      1. Write a first version where the user is trusted and then the response sent to the client.
      2. Write a second version where the response is never sent to the client.
      Hop widgets
      1. Define a simple Web file browser.
        run
      2. Sort the files lexicographically and hide the files starting with the character ..
        run
      3. Create a new tag called <BROWSER> that builds a file browser. The attribute :path specifies the initial path.
        run
        The form define-tag defines new elements. Example:

        function BROWSER( attrs, body ) { <DIV> { attrs ...} }

      Image filtering

      In this example, we are going to create a simple image filter. We will map the colors of a given remote image to a set of three colors.

      run
      images?q=tbn:ANd9GcRUADxj_7NEl8RAFNM-s6x3Wgp1QIg81QHRMVeOuMHBklr1JWddmQ

      When an image is displayed in a canvas JavaScript lets programs access the data of the displayed images and it also lets programs create dynamically new images. There is, however, one restriction, the image must be located on same the server as the one that delivers the program.

      1. Download an image, a create a Hop service that returns it, with the correct mime type.
      2. Define a simple Hop service called image that creates a simple web page containing two canvases called src and dst.
      3. When the document is loaded, draw the image in the canvas source. This can be done with an expression such as:

        var src = document.getElementById( 'src' ); var ctx = src.getContext( '2d' ); var img = new Image(); // add a listener called when the image is loaded img.onload = function( e ) { // resize the canvas to fix the image actual dimension src.width = img.width; src.height = img.height; // draw the image the canvas ctx.drawImage( img, 0, ); } // start downloading the url img.src = url;

      4. The pixels of the displayed image can be obtained with:

        ctx1.getImageData( 0, 0, img.width img.height )

        This returns a struct with two fields:
        • length: the number of pixels.
        • data: a linear array of integers organized as follows: pixel[0]r, pixel[0]g, pixel[0]b, pixel[0]a, pixel[1]r, pixel[1]g, pixel[1]b, pixel[1]a, ...
        Copy that array into a new one, and draw in the second canvas with:

        ctx2.putImageData(copyImageArray( ctx1))

      5. Create a range function that from the 3 values red, green, blue, returns an integer in the range 0..2.
      6. Use the range function to modify the array integers you are creating for the second canvas.
      7. Make the first canvas invisible.
      HOP home pageHopTeX