Statistics
| Branch: | Tag: | Revision:

one / src / sunstone / public / vendor / noVNC / tests / cursor.html @ 5fcb9de8

History | View | Annotate | Download (4.43 KB)

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>