tests/cursor.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3   <head>
   4     <title>Cursor Change test</title>
   5     <meta charset="UTF-8">
   6     <!--
   7     <script type='text/javascript'
   8                     src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
   9     -->
  10     <script src="../include/util.js"></script>
  11     <script src="../include/webutil.js"></script>
  12     <script src="../include/base64.js"></script>
  13     <script src="../include/canvas.js"></script>
  14   </head>
  15   <body>
  16         <h1>Roll over the buttons to test cursors</h1>
  17         <br>
  18         <input id=button1 type="button" value="Cursor from file (smiley face)">
  19         <input id=button2 type="button" value="Data URI cursor (crosshair)">
  20
  21         <br>
  22         <br>
  23         <br>
  24         Debug:<br>
  25         <textarea id="debug" style="font-size: 9px;" cols=80 rows=25></textarea>
  26         <br>
  27         <br>
  28         <canvas id="testcanvas" width="100px" height="20px">
  29             Canvas not supported.
  30         </canvas>
  31
  32   </body>
  33
  34   <script>
  35     function debug(str) {
  36         console.log(str);
  37         cell = $D('debug');
  38         cell.innerHTML += str + "\n";
  39         cell.scrollTop = cell.scrollHeight;
  40     }
  41
  42     function makeCursor() {
  43         var arr = [], x, y, w = 32, h = 32, hx = 16, hy = 16;
  44
  45         var IHDRsz = 40;
  46         var ANDsz = w * h * 4;
  47         var XORsz = Math.ceil( (w * h) / 8.0 );
  48
  49         // Push multi-byte little-endian values
  50         arr.push16le = function (num) {
  51             this.push((num     ) & 0xFF,
  52                       (num >> 8) & 0xFF  );
  53         };
  54         arr.push32le = function (num) {
  55             this.push((num      ) & 0xFF,
  56                       (num >>  8) & 0xFF,
  57                       (num >> 16) & 0xFF,
  58                       (num >> 24) & 0xFF  );
  59         };
  60
  61         // Main header
  62         arr.push16le(0);      // Reserved
  63         arr.push16le(2);      // .CUR type
  64         arr.push16le(1);      // Number of images, 1 for non-animated arr
  65
  66         // Cursor #1
  67         arr.push(w);          // width
  68         arr.push(h);          // height
  69         arr.push(0);          // colors, 0 -> true-color
  70         arr.push(0);          // reserved
  71         arr.push16le(hx);     // hotspot x coordinate
  72         arr.push16le(hy);     // hotspot y coordinate
  73         arr.push32le(IHDRsz + XORsz + ANDsz); // cursor data byte size
  74         arr.push32le(22);     // offset of cursor data in the file
  75
  76         // Infoheader for Cursor #1
  77         arr.push32le(IHDRsz); // Infoheader size
  78         arr.push32le(w);      // Cursor width
  79         arr.push32le(h*2);    // XOR+AND height
  80         arr.push16le(1);      // number of planes
  81         arr.push16le(32);     // bits per pixel
  82         arr.push32le(0);      // type of compression
  83         arr.push32le(XORsz + ANDsz); // Size of Image
  84         arr.push32le(0);
  85         arr.push32le(0);
  86         arr.push32le(0);
  87         arr.push32le(0);
  88
  89         // XOR/color data
  90         for (y = h-1; y >= 0; y--) {
  91             for (x = 0; x < w; x++) {
  92                 //if ((x === hx) || (y === (h-hy-1))) {
  93                 if ((x === hx) || (y === hy)) {
  94                     arr.push(0xe0);  // blue
  95                     arr.push(0x00);  // green
  96                     arr.push(0x00);  // red
  97                     arr.push(0xff);  // alpha
  98                 } else {
  99                     arr.push(0x05);  // blue
 100                     arr.push(0xe6);  // green
 101                     arr.push(0x00);  // red
 102                     arr.push(0x80);  // alpha
 103                 }
 104             }
 105         }
 106
 107         // AND/bitmask data (seems to be ignored)
 108         for (y = 0; y < h; y++) {
 109             for (x = 0; x < Math.ceil(w / 8); x++) {
 110                 arr.push(0x00);
 111             }
 112         }
 113
 114         debug("cursor generated");
 115         return arr;
 116     }
 117
 118     window.onload = function() {
 119         debug("onload");
 120         var canvas, cross, cursor, cursor64;
 121
 122         canvas = new Canvas({'target' : $D("testcanvas")});
 123         debug("canvas indicates Data URI cursor support is: " + canvas.get_cursor_uri());
 124
 125         $D('button1').style.cursor="url(face.png), default";
 126
 127         cursor = makeCursor();
 128         cursor64 = Base64.encode(cursor);
 129         //debug("cursor: " + cursor.slice(0,100) + " (" + cursor.length + ")");
 130         //debug("cursor64: " + cursor64.slice(0,100) + " (" + cursor64.length + ")");
 131         $D('button2').style.cursor="url(data:image/x-icon;base64," + cursor64 + "), default";
 132
 133         debug("onload complete");
 134     }
 135   </script>