1/*
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2011 Joel Martin
4 * Licensed under LGPL-3 (see LICENSE.txt)
5 *
6 * See README.md for usage and integration instructions.
7 */
8
9/*jslint browser: true, white: false, bitwise: false */
10/*global Util, Base64, changeCursor */
11
12function Display(defaults) {
13"use strict";
14
15var that           = {},  // Public API methods
16    conf           = {},  // Configuration attributes
17
18    // Private Display namespace variables
19    c_ctx          = null,
20    c_forceCanvas  = false,
21
22    // Predefine function variables (jslint)
23    imageDataGet, rgbImageData, bgrxImageData, cmapImageData,
24    setFillColor, rescale,
25
26    // The full frame buffer (logical canvas) size
27    fb_width        = 0,
28    fb_height       = 0,
29    // The visible "physical canvas" viewport
30    viewport       = {'x': 0, 'y': 0, 'w' : 0, 'h' : 0 },
31    cleanRect      = {'x1': 0, 'y1': 0, 'x2': -1, 'y2': -1},
32
33    c_prevStyle    = "",
34    tile           = null,
35    tile16x16      = null,
36    tile_x         = 0,
37    tile_y         = 0;
38
39
40// Configuration attributes
41Util.conf_defaults(conf, that, defaults, [
42    ['target',      'wo', 'dom',  null, 'Canvas element for rendering'],
43    ['context',     'ro', 'raw',  null, 'Canvas 2D context for rendering (read-only)'],
44    ['logo',        'rw', 'raw',  null, 'Logo to display when cleared: {"width": width, "height": height, "data": data}'],
45    ['true_color',  'rw', 'bool', true, 'Use true-color pixel data'],
46    ['colourMap',   'rw', 'arr',  [], 'Colour map array (when not true-color)'],
47    ['scale',       'rw', 'float', 1.0, 'Display area scale factor 0.0 - 1.0'],
48    ['viewport',    'rw', 'bool', false, 'Use a viewport set with viewportChange()'],
49    ['width',       'rw', 'int', null, 'Display area width'],
50    ['height',      'rw', 'int', null, 'Display area height'],
51
52    ['render_mode', 'ro', 'str', '', 'Canvas rendering mode (read-only)'],
53
54    ['prefer_js',   'rw', 'str', null, 'Prefer Javascript over canvas methods'],
55    ['cursor_uri',  'rw', 'raw', null, 'Can we render cursor using data URI']
56    ]);
57
58// Override some specific getters/setters
59that.get_context = function () { return c_ctx; };
60
61that.set_scale = function(scale) { rescale(scale); };
62
63that.set_width = function (val) { that.resize(val, fb_height); };
64that.get_width = function() { return fb_width; };
65
66that.set_height = function (val) { that.resize(fb_width, val); };
67that.get_height = function() { return fb_height; };
68
69
70
71//
72// Private functions
73//
74
75// Create the public API interface
76function constructor() {
77    Util.Debug(">> Display.constructor");
78
79    var c, func, i, curDat, curSave,
80        has_imageData = false, UE = Util.Engine;
81
82    if (! conf.target) { throw("target must be set"); }
83
84    if (typeof conf.target === 'string') {
85        throw("target must be a DOM element");
86    }
87
88    c = conf.target;
89
90    if (! c.getContext) { throw("no getContext method"); }
91
92    if (! c_ctx) { c_ctx = c.getContext('2d'); }
93
94    Util.Debug("User Agent: " + navigator.userAgent);
95    if (UE.gecko) { Util.Debug("Browser: gecko " + UE.gecko); }
96    if (UE.webkit) { Util.Debug("Browser: webkit " + UE.webkit); }
97    if (UE.trident) { Util.Debug("Browser: trident " + UE.trident); }
98    if (UE.presto) { Util.Debug("Browser: presto " + UE.presto); }
99
100    that.clear();
101
102    // Check canvas features
103    if ('createImageData' in c_ctx) {
104        conf.render_mode = "canvas rendering";
105    } else {
106        throw("Canvas does not support createImageData");
107    }
108    if (conf.prefer_js === null) {
109        Util.Info("Prefering javascript operations");
110        conf.prefer_js = true;
111    }
112
113    // Initialize cached tile imageData
114    tile16x16 = c_ctx.createImageData(16, 16);
115
116    /*
117     * Determine browser support for setting the cursor via data URI
118     * scheme
119     */
120    curDat = [];
121    for (i=0; i < 8 * 8 * 4; i += 1) {
122        curDat.push(255);
123    }
124    try {
125        curSave = c.style.cursor;
126        changeCursor(conf.target, curDat, curDat, 2, 2, 8, 8);
127        if (c.style.cursor) {
128            if (conf.cursor_uri === null) {
129                conf.cursor_uri = true;
130            }
131            Util.Info("Data URI scheme cursor supported");
132        } else {
133            if (conf.cursor_uri === null) {
134                conf.cursor_uri = false;
135            }
136            Util.Warn("Data URI scheme cursor not supported");
137        }
138        c.style.cursor = curSave;
139    } catch (exc2) {
140        Util.Error("Data URI scheme cursor test exception: " + exc2);
141        conf.cursor_uri = false;
142    }
143
144    Util.Debug("<< Display.constructor");
145    return that ;
146}
147
148rescale = function(factor) {
149    var c, tp, x, y,
150        properties = ['transform', 'WebkitTransform', 'MozTransform', null];
151    c = conf.target;
152    tp = properties.shift();
153    while (tp) {
154        if (typeof c.style[tp] !== 'undefined') {
155            break;
156        }
157        tp = properties.shift();
158    }
159
160    if (tp === null) {
161        Util.Debug("No scaling support");
162        return;
163    }
164
165
166    if (typeof(factor) === "undefined") {
167        factor = conf.scale;
168    } else if (factor > 1.0) {
169        factor = 1.0;
170    } else if (factor < 0.1) {
171        factor = 0.1;
172    }
173
174    if (conf.scale === factor) {
175        //Util.Debug("Display already scaled to '" + factor + "'");
176        return;
177    }
178
179    conf.scale = factor;
180    x = c.width - c.width * factor;
181    y = c.height - c.height * factor;
182    c.style[tp] = "scale(" + conf.scale + ") translate(-" + x + "px, -" + y + "px)";
183};
184
185setFillColor = function(color) {
186    var bgr, newStyle;
187    if (conf.true_color) {
188        bgr = color;
189    } else {
190        bgr = conf.colourMap[color[0]];
191    }
192    newStyle = "rgb(" + bgr[2] + "," + bgr[1] + "," + bgr[0] + ")";
193    if (newStyle !== c_prevStyle) {
194        c_ctx.fillStyle = newStyle;
195        c_prevStyle = newStyle;
196    }
197};
198
199
200//
201// Public API interface functions
202//
203
204// Shift and/or resize the visible viewport
205that.viewportChange = function(deltaX, deltaY, width, height) {
206    var c = conf.target, v = viewport, cr = cleanRect,
207        saveImg = null, saveStyle, x1, y1, vx2, vy2, w, h;
208
209    if (!conf.viewport) {
210        Util.Debug("Setting viewport to full display region");
211        deltaX = -v.w; // Clamped later if out of bounds
212        deltaY = -v.h; // Clamped later if out of bounds
213        width = fb_width;
214        height = fb_height;
215    }
216
217    if (typeof(deltaX) === "undefined") { deltaX = 0; }
218    if (typeof(deltaY) === "undefined") { deltaY = 0; }
219    if (typeof(width) === "undefined") { width = v.w; }
220    if (typeof(height) === "undefined") { height = v.h; }
221
222    // Size change
223
224    if (width > fb_width) { width = fb_width; }
225    if (height > fb_height) { height = fb_height; }
226
227    if ((v.w !== width) || (v.h !== height)) {
228        // Change width
229        if ((width < v.w) && (cr.x2 > v.x + width -1)) {
230            cr.x2 = v.x + width - 1;
231        }
232        v.w = width;
233
234        // Change height
235        if ((height < v.h) && (cr.y2 > v.y + height -1)) {
236            cr.y2 = v.y + height - 1;
237        }
238        v.h = height;
239
240
241        if (v.w > 0 && v.h > 0 && c.width > 0 && c.height > 0) {
242            saveImg = c_ctx.getImageData(0, 0,
243                    (c.width < v.w) ? c.width : v.w,
244                    (c.height < v.h) ? c.height : v.h);
245        }
246
247        c.width = v.w;
248        c.height = v.h;
249
250        if (saveImg) {
251            c_ctx.putImageData(saveImg, 0, 0);
252        }
253    }
254
255    vx2 = v.x + v.w - 1;
256    vy2 = v.y + v.h - 1;
257
258
259    // Position change
260
261    if ((deltaX < 0) && ((v.x + deltaX) < 0)) {
262        deltaX = - v.x;
263    }
264    if ((vx2 + deltaX) >= fb_width) {
265        deltaX -= ((vx2 + deltaX) - fb_width + 1);
266    }
267
268    if ((v.y + deltaY) < 0) {
269        deltaY = - v.y;
270    }
271    if ((vy2 + deltaY) >= fb_height) {
272        deltaY -= ((vy2 + deltaY) - fb_height + 1);
273    }
274
275    if ((deltaX === 0) && (deltaY === 0)) {
276        //Util.Debug("skipping viewport change");
277        return;
278    }
279    Util.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
280
281    v.x += deltaX;
282    vx2 += deltaX;
283    v.y += deltaY;
284    vy2 += deltaY;
285
286    // Update the clean rectangle
287    if (v.x > cr.x1) {
288        cr.x1 = v.x;
289    }
290    if (vx2 < cr.x2) {
291        cr.x2 = vx2;
292    }
293    if (v.y > cr.y1) {
294        cr.y1 = v.y;
295    }
296    if (vy2 < cr.y2) {
297        cr.y2 = vy2;
298    }
299
300    if (deltaX < 0) {
301        // Shift viewport left, redraw left section
302        x1 = 0;
303        w = - deltaX;
304    } else {
305        // Shift viewport right, redraw right section
306        x1 = v.w - deltaX;
307        w = deltaX;
308    }
309    if (deltaY < 0) {
310        // Shift viewport up, redraw top section
311        y1 = 0;
312        h = - deltaY;
313    } else {
314        // Shift viewport down, redraw bottom section
315        y1 = v.h - deltaY;
316        h = deltaY;
317    }
318
319    // Copy the valid part of the viewport to the shifted location
320    saveStyle = c_ctx.fillStyle;
321    c_ctx.fillStyle = "rgb(255,255,255)";
322    if (deltaX !== 0) {
323        //that.copyImage(0, 0, -deltaX, 0, v.w, v.h);
324        //that.fillRect(x1, 0, w, v.h, [255,255,255]);
325        c_ctx.drawImage(c, 0, 0, v.w, v.h, -deltaX, 0, v.w, v.h);
326        c_ctx.fillRect(x1, 0, w, v.h);
327    }
328    if (deltaY !== 0) {
329        //that.copyImage(0, 0, 0, -deltaY, v.w, v.h);
330        //that.fillRect(0, y1, v.w, h, [255,255,255]);
331        c_ctx.drawImage(c, 0, 0, v.w, v.h, 0, -deltaY, v.w, v.h);
332        c_ctx.fillRect(0, y1, v.w, h);
333    }
334    c_ctx.fillStyle = saveStyle;
335};
336
337
338// Return a map of clean and dirty areas of the viewport and reset the
339// tracking of clean and dirty areas.
340//
341// Returns: {'cleanBox':   {'x': x, 'y': y, 'w': w, 'h': h},
342//           'dirtyBoxes': [{'x': x, 'y': y, 'w': w, 'h': h}, ...]}
343that.getCleanDirtyReset = function() {
344    var v = viewport, c = cleanRect, cleanBox, dirtyBoxes = [],
345        vx2 = v.x + v.w - 1, vy2 = v.y + v.h - 1;
346
347
348    // Copy the cleanRect
349    cleanBox = {'x': c.x1, 'y': c.y1,
350                'w': c.x2 - c.x1 + 1, 'h': c.y2 - c.y1 + 1};
351
352    if ((c.x1 >= c.x2) || (c.y1 >= c.y2)) {
353        // Whole viewport is dirty
354        dirtyBoxes.push({'x': v.x, 'y': v.y, 'w': v.w, 'h': v.h});
355    } else {
356        // Redraw dirty regions
357        if (v.x < c.x1) {
358            // left side dirty region
359            dirtyBoxes.push({'x': v.x, 'y': v.y,
360                             'w': c.x1 - v.x + 1, 'h': v.h});
361        }
362        if (vx2 > c.x2) {
363            // right side dirty region
364            dirtyBoxes.push({'x': c.x2 + 1, 'y': v.y,
365                             'w': vx2 - c.x2, 'h': v.h});
366        }
367        if (v.y < c.y1) {
368            // top/middle dirty region
369            dirtyBoxes.push({'x': c.x1, 'y': v.y,
370                             'w': c.x2 - c.x1 + 1, 'h': c.y1 - v.y});
371        }
372        if (vy2 > c.y2) {
373            // bottom/middle dirty region
374            dirtyBoxes.push({'x': c.x1, 'y': c.y2 + 1,
375                             'w': c.x2 - c.x1 + 1, 'h': vy2 - c.y2});
376        }
377    }
378
379    // Reset the cleanRect to the whole viewport
380    cleanRect = {'x1': v.x, 'y1': v.y,
381                 'x2': v.x + v.w - 1, 'y2': v.y + v.h - 1};
382
383    return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes};
384};
385
386// Translate viewport coordinates to absolute coordinates
387that.absX = function(x) {
388    return x + viewport.x;
389};
390that.absY = function(y) {
391    return y + viewport.y;
392};
393
394
395that.resize = function(width, height) {
396    c_prevStyle    = "";
397
398    fb_width = width;
399    fb_height = height;
400
401    rescale(conf.scale);
402    that.viewportChange();
403};
404
405that.clear = function() {
406
407    if (conf.logo) {
408        that.resize(conf.logo.width, conf.logo.height);
409        that.blitStringImage(conf.logo.data, 0, 0);
410    } else {
411        that.resize(640, 20);
412        c_ctx.clearRect(0, 0, viewport.w, viewport.h);
413    }
414
415    // No benefit over default ("source-over") in Chrome and firefox
416    //c_ctx.globalCompositeOperation = "copy";
417};
418
419that.fillRect = function(x, y, width, height, color) {
420    setFillColor(color);
421    c_ctx.fillRect(x - viewport.x, y - viewport.y, width, height);
422};
423
424that.copyImage = function(old_x, old_y, new_x, new_y, w, h) {
425    var x1 = old_x - viewport.x, y1 = old_y - viewport.y,
426        x2 = new_x - viewport.x, y2 = new_y  - viewport.y;
427    c_ctx.drawImage(conf.target, x1, y1, w, h, x2, y2, w, h);
428};
429
430
431// Start updating a tile
432that.startTile = function(x, y, width, height, color) {
433    var data, bgr, red, green, blue, i;
434    tile_x = x;
435    tile_y = y;
436    if ((width === 16) && (height === 16)) {
437        tile = tile16x16;
438    } else {
439        tile = c_ctx.createImageData(width, height);
440    }
441    data = tile.data;
442    if (conf.prefer_js) {
443        if (conf.true_color) {
444            bgr = color;
445        } else {
446            bgr = conf.colourMap[color[0]];
447        }
448        red = bgr[2];
449        green = bgr[1];
450        blue = bgr[0];
451        for (i = 0; i < (width * height * 4); i+=4) {
452            data[i    ] = red;
453            data[i + 1] = green;
454            data[i + 2] = blue;
455            data[i + 3] = 255;
456        }
457    } else {
458        that.fillRect(x, y, width, height, color);
459    }
460};
461
462// Update sub-rectangle of the current tile
463that.subTile = function(x, y, w, h, color) {
464    var data, p, bgr, red, green, blue, width, j, i, xend, yend;
465    if (conf.prefer_js) {
466        data = tile.data;
467        width = tile.width;
468        if (conf.true_color) {
469            bgr = color;
470        } else {
471            bgr = conf.colourMap[color[0]];
472        }
473        red = bgr[2];
474        green = bgr[1];
475        blue = bgr[0];
476        xend = x + w;
477        yend = y + h;
478        for (j = y; j < yend; j += 1) {
479            for (i = x; i < xend; i += 1) {
480                p = (i + (j * width) ) * 4;
481                data[p    ] = red;
482                data[p + 1] = green;
483                data[p + 2] = blue;
484                data[p + 3] = 255;
485            }
486        }
487    } else {
488        that.fillRect(tile_x + x, tile_y + y, w, h, color);
489    }
490};
491
492// Draw the current tile to the screen
493that.finishTile = function() {
494    if (conf.prefer_js) {
495        c_ctx.putImageData(tile, tile_x - viewport.x, tile_y - viewport.y);
496    }
497    // else: No-op, if not prefer_js then already done by setSubTile
498};
499
500rgbImageData = function(x, y, width, height, arr, offset) {
501    var img, i, j, data, v = viewport;
502    /*
503    if ((x - v.x >= v.w) || (y - v.y >= v.h) ||
504        (x - v.x + width < 0) || (y - v.y + height < 0)) {
505        // Skipping because outside of viewport
506        return;
507    }
508    */
509    img = c_ctx.createImageData(width, height);
510    data = img.data;
511    for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+3) {
512        data[i    ] = arr[j    ];
513        data[i + 1] = arr[j + 1];
514        data[i + 2] = arr[j + 2];
515        data[i + 3] = 255; // Set Alpha
516    }
517    c_ctx.putImageData(img, x - v.x, y - v.y);
518};
519
520bgrxImageData = function(x, y, width, height, arr, offset) {
521    var img, i, j, data, v = viewport;
522    /*
523    if ((x - v.x >= v.w) || (y - v.y >= v.h) ||
524        (x - v.x + width < 0) || (y - v.y + height < 0)) {
525        // Skipping because outside of viewport
526        return;
527    }
528    */
529    img = c_ctx.createImageData(width, height);
530    data = img.data;
531    for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) {
532        data[i    ] = arr[j + 2];
533        data[i + 1] = arr[j + 1];
534        data[i + 2] = arr[j    ];
535        data[i + 3] = 255; // Set Alpha
536    }
537    c_ctx.putImageData(img, x - v.x, y - v.y);
538};
539
540cmapImageData = function(x, y, width, height, arr, offset) {
541    var img, i, j, data, bgr, cmap;
542    img = c_ctx.createImageData(width, height);
543    data = img.data;
544    cmap = conf.colourMap;
545    for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) {
546        bgr = cmap[arr[j]];
547        data[i    ] = bgr[2];
548        data[i + 1] = bgr[1];
549        data[i + 2] = bgr[0];
550        data[i + 3] = 255; // Set Alpha
551    }
552    c_ctx.putImageData(img, x - viewport.x, y - viewport.y);
553};
554
555that.blitImage = function(x, y, width, height, arr, offset) {
556    if (conf.true_color) {
557        bgrxImageData(x, y, width, height, arr, offset);
558    } else {
559        cmapImageData(x, y, width, height, arr, offset);
560    }
561};
562
563that.blitRgbImage = function(x, y, width, height, arr, offset) {
564    if (conf.true_color) {
565        rgbImageData(x, y, width, height, arr, offset);
566    } else {
567        // prolly wrong...
568        cmapImageData(x, y, width, height, arr, offset);
569    }
570};
571
572that.blitStringImage = function(str, x, y) {
573    var img = new Image();
574    img.onload = function () {
575        c_ctx.drawImage(img, x - viewport.x, y - viewport.y);
576    };
577    img.src = str;
578};
579
580that.changeCursor = function(pixels, mask, hotx, hoty, w, h) {
581    if (conf.cursor_uri === false) {
582        Util.Warn("changeCursor called but no cursor data URI support");
583        return;
584    }
585
586    if (conf.true_color) {
587        changeCursor(conf.target, pixels, mask, hotx, hoty, w, h);
588    } else {
589        changeCursor(conf.target, pixels, mask, hotx, hoty, w, h, conf.colourMap);
590    }
591};
592
593that.defaultCursor = function() {
594    conf.target.style.cursor = "default";
595};
596
597return constructor();  // Return the public API interface
598
599}  // End of Display()
600
601
602/* Set CSS cursor property using data URI encoded cursor file */
603function changeCursor(target, pixels, mask, hotx, hoty, w, h, cmap) {
604    "use strict";
605    var cur = [], rgb, IHDRsz, RGBsz, ANDsz, XORsz, url, idx, alpha, x, y;
606    //Util.Debug(">> changeCursor, x: " + hotx + ", y: " + hoty + ", w: " + w + ", h: " + h);
607
608    // Push multi-byte little-endian values
609    cur.push16le = function (num) {
610        this.push((num     ) & 0xFF,
611                  (num >> 8) & 0xFF  );
612    };
613    cur.push32le = function (num) {
614        this.push((num      ) & 0xFF,
615                  (num >>  8) & 0xFF,
616                  (num >> 16) & 0xFF,
617                  (num >> 24) & 0xFF  );
618    };
619
620    IHDRsz = 40;
621    RGBsz = w * h * 4;
622    XORsz = Math.ceil( (w * h) / 8.0 );
623    ANDsz = Math.ceil( (w * h) / 8.0 );
624
625    // Main header
626    cur.push16le(0);      // 0: Reserved
627    cur.push16le(2);      // 2: .CUR type
628    cur.push16le(1);      // 4: Number of images, 1 for non-animated ico
629
630    // Cursor #1 header (ICONDIRENTRY)
631    cur.push(w);          // 6: width
632    cur.push(h);          // 7: height
633    cur.push(0);          // 8: colors, 0 -> true-color
634    cur.push(0);          // 9: reserved
635    cur.push16le(hotx);   // 10: hotspot x coordinate
636    cur.push16le(hoty);   // 12: hotspot y coordinate
637    cur.push32le(IHDRsz + RGBsz + XORsz + ANDsz);
638                          // 14: cursor data byte size
639    cur.push32le(22);     // 18: offset of cursor data in the file
640
641
642    // Cursor #1 InfoHeader (ICONIMAGE/BITMAPINFO)
643    cur.push32le(IHDRsz); // 22: Infoheader size
644    cur.push32le(w);      // 26: Cursor width
645    cur.push32le(h*2);    // 30: XOR+AND height
646    cur.push16le(1);      // 34: number of planes
647    cur.push16le(32);     // 36: bits per pixel
648    cur.push32le(0);      // 38: Type of compression
649
650    cur.push32le(XORsz + ANDsz); // 43: Size of Image
651                                 // Gimp leaves this as 0
652
653    cur.push32le(0);      // 46: reserved
654    cur.push32le(0);      // 50: reserved
655    cur.push32le(0);      // 54: reserved
656    cur.push32le(0);      // 58: reserved
657
658    // 62: color data (RGBQUAD icColors[])
659    for (y = h-1; y >= 0; y -= 1) {
660        for (x = 0; x < w; x += 1) {
661            idx = y * Math.ceil(w / 8) + Math.floor(x/8);
662            alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0;
663
664            if (cmap) {
665                idx = (w * y) + x;
666                rgb = cmap[pixels[idx]];
667                cur.push(rgb[2]);          // blue
668                cur.push(rgb[1]);          // green
669                cur.push(rgb[0]);          // red
670                cur.push(alpha);           // alpha
671            } else {
672                idx = ((w * y) + x) * 4;
673                cur.push(pixels[idx + 2]); // blue
674                cur.push(pixels[idx + 1]); // green
675                cur.push(pixels[idx    ]); // red
676                cur.push(alpha);           // alpha
677            }
678        }
679    }
680
681    // XOR/bitmask data (BYTE icXOR[])
682    // (ignored, just needs to be right size)
683    for (y = 0; y < h; y += 1) {
684        for (x = 0; x < Math.ceil(w / 8); x += 1) {
685            cur.push(0x00);
686        }
687    }
688
689    // AND/bitmask data (BYTE icAND[])
690    // (ignored, just needs to be right size)
691    for (y = 0; y < h; y += 1) {
692        for (x = 0; x < Math.ceil(w / 8); x += 1) {
693            cur.push(0x00);
694        }
695    }
696
697    url = "data:image/x-icon;base64," + Base64.encode(cur);
698    target.style.cursor = "url(" + url + ") " + hotx + " " + hoty + ", default";
699    //Util.Debug("<< changeCursor, cur.length: " + cur.length);
700}
701