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