Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (5.23 KB)

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>Canvas Performance Test</title>
5
        <!--
6
        <script type='text/javascript' 
7
            src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
8
        -->
9
        <script src="../include/util.js"></script>
10
        <script src="../include/webutil.js"></script>
11
        <script src="../include/base64.js"></script>
12
        <script src="../include/canvas.js"></script>
13
        <script src="face.png.js"></script>
14
    </head>
15
    <body>
16
        Iterations: <input id='iterations' style='width:50' value="100">&nbsp;
17

    
18
        Width: <input id='width' style='width:50' value="640">&nbsp;
19
        Height: <input id='height' style='width:50' value="480">&nbsp;
20

    
21
        <input id='startButton' type='button' value='Do Performance Test'
22
            style='width:150px' onclick="begin();">&nbsp;
23

    
24
        <br><br>
25

    
26
        <b>Canvas</b> (should see three squares and two happy faces):<br>
27
        <canvas id="canvas" width="200" height="100"
28
                style="border-style: dotted; border-width: 1px;">
29
            Canvas not supported.
30
        </canvas>
31

    
32
        <br>
33
        Results:<br>
34
        <textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
35
    </body>
36

    
37
    <script>
38
        var msg_cnt = 0;
39
        var start_width = 300, start_height = 100;
40
        var iterations;
41

42
        function message(str) {
43
            console.log(str);
44
            cell = $D('messages');
45
            cell.innerHTML += msg_cnt + ": " + str + "\n";
46
            cell.scrollTop = cell.scrollHeight;
47
            msg_cnt += 1;
48
        }
49

50
        function test_functions () {
51
            var img, x, y, w, h, ctx = canvas.getContext();
52
            w = canvas.get_width();
53
            h = canvas.get_height();
54
            canvas.fillRect(0, 0, w, h, [240,240,240]);
55

56
            canvas.blitStringImage("data:image/png;base64," + face64, 150, 10);
57

58
            var himg = new Image();
59
            himg.onload = function () {
60
                ctx.drawImage(himg, 200, 40); };
61
            himg.src = "face.png";
62

63
            /* Test array image data */
64
            data = [];
65
            for (y=0; y< 50; y++) {
66
                for (x=0; x< 50; x++) {
67
                    data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
68
                    data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
69
                    data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
70
                    data[(y*50 + x)*4 + 3] = 255;
71
                }
72
            }
73
            canvas.blitImage(30, 10, 50, 50, data, 0);
74

75
            img = canvas.getTile(5,5,16,16,[0,128,128]);
76
            canvas.putTile(img);
77

78
            img = canvas.getTile(90,15,16,16,[0,0,0]);
79
            canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
80
            canvas.putTile(img);
81
        }
82

83
        function begin () {
84
            $D('startButton').value = "Running";
85
            $D('startButton').disabled = true;
86
            setTimeout(start_delayed, 250);
87
            iterations = $D('iterations').value;
88
        }
89

90
        function start_delayed () {
91
            var ret;
92

93
            ret = canvas.set_prefer_js(true);
94
            if (ret) {
95
                message("Running test: prefer Javascript ops");
96
                var time1 = run_test();
97
                message("prefer Javascript ops: " + time1 + "ms total, " +
98
                        (time1 / iterations) + "ms per frame");
99
            } else {
100
                message("Could not run: prefer Javascript ops");
101
            }
102

103
            canvas.set_prefer_js(false);
104
            message("Running test: prefer Canvas ops");
105
            var time2 = run_test();
106
            message("prefer Canvas ops: " + time2 + "ms total, " +
107
                    (time2 / iterations) + "ms per frame");
108

109
            if (Util.get_logging() !== 'debug') {
110
                canvas.resize(start_width, start_height, true);
111
                test_functions();
112
            }
113
            $D('startButton').disabled = false;
114
            $D('startButton').value = "Do Performance Test";
115
        }
116

117
        function run_test () {
118
            var width, height;
119
            width = $D('width').value;
120
            height = $D('height').value;
121
            canvas.resize(width, height);
122
            var color, start_time = (new Date()).getTime(), w, h;
123
            for (var i=0; i < iterations; i++) {
124
                color = [128, 128, (255 / iterations) * i, 0];
125
                for (var x=0; x < width; x = x + 16) {
126
                    for (var y=0; y < height; y = y + 16) {
127
                        w = Math.min(16, width - x);
128
                        h = Math.min(16, height - y);
129
                        var tile = canvas.getTile(x, y, w, h, color);
130
                        canvas.setSubTile(tile, 0, 0, w, h, color);
131
                        canvas.putTile(tile);
132
                    }
133
                }
134
            }
135
            var end_time = (new Date()).getTime();
136
            return (end_time - start_time);
137
        }
138

139
        window.onload = function() {
140
            message("in onload");
141
            $D('iterations').value = 10;
142
            canvas = new Canvas({'target' : $D('canvas')});
143
            canvas.resize(start_width, start_height, true);
144
            message("Canvas initialized");
145
            test_functions();
146
        }
147
    </script>
148
</html>