]> git.proxmox.com Git - mirror_novnc.git/blob - core/display.js
projects / mirror_novnc.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
blame | history | raw | HEAD
Enable noVNC to become Browserifiable
[mirror_novnc.git] / core / display.js
1 /*
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2015 Samuel Mannehed for Cendio AB
5 * Licensed under MPL 2.0 (see LICENSE.txt)
6 *
7 * See README.md for usage and integration instructions.
8 */
9
10 /*jslint browser: true, white: false */
11 /*global Util, Base64, changeCursor */
12
13 /* [module]
14 * import Util from "./util";
15 * import Base64 from "./base64";
16 */
17
18 /* [module] export default */ function Display(defaults) {
19 this._drawCtx = null;
20 this._c_forceCanvas = false;
21
22 this._renderQ = []; // queue drawing actions for in-oder rendering
23
24 // the full frame buffer (logical canvas) size
25 this._fb_width = 0;
26 this._fb_height = 0;
27
28 // the size limit of the viewport (start disabled)
29 this._maxWidth = 0;
30 this._maxHeight = 0;
31
32 // the visible "physical canvas" viewport
33 this._viewportLoc = { 'x': 0, 'y': 0, 'w': 0, 'h': 0 };
34 this._cleanRect = { 'x1': 0, 'y1': 0, 'x2': -1, 'y2': -1 };
35
36 this._prevDrawStyle = "";
37 this._tile = null;
38 this._tile16x16 = null;
39 this._tile_x = 0;
40 this._tile_y = 0;
41
42 Util.set_defaults(this, defaults, {
43 'true_color': true,
44 'colourMap': [],
45 'scale': 1.0,
46 'viewport': false,
47 'render_mode': ''
48 });
49
50 Util.Debug(">> Display.constructor");
51
52 if (!this._target) {
53 throw new Error("Target must be set");
54 }
55
56 if (typeof this._target === 'string') {
57 throw new Error('target must be a DOM element');
58 }
59
60 if (!this._target.getContext) {
61 throw new Error("no getContext method");
62 }
63
64 if (!this._drawCtx) {
65 this._drawCtx = this._target.getContext('2d');
66 }
67
68 Util.Debug("User Agent: " + navigator.userAgent);
69 if (Util.Engine.gecko) { Util.Debug("Browser: gecko " + Util.Engine.gecko); }
70 if (Util.Engine.webkit) { Util.Debug("Browser: webkit " + Util.Engine.webkit); }
71 if (Util.Engine.trident) { Util.Debug("Browser: trident " + Util.Engine.trident); }
72 if (Util.Engine.presto) { Util.Debug("Browser: presto " + Util.Engine.presto); }
73
74 this.clear();
75
76 // Check canvas features
77 if ('createImageData' in this._drawCtx) {
78 this._render_mode = 'canvas rendering';
79 } else {
80 throw new Error("Canvas does not support createImageData");
81 }
82
83 if (this._prefer_js === null) {
84 Util.Info("Prefering javascript operations");
85 this._prefer_js = true;
86 }
87
88 // Determine browser support for setting the cursor via data URI scheme
89 if (this._cursor_uri || this._cursor_uri === null ||
90 this._cursor_uri === undefined) {
91 this._cursor_uri = Util.browserSupportsCursorURIs();
92 }
93
94 Util.Debug("<< Display.constructor");
95 };
96
97 (function () {
98 "use strict";
99
100 var SUPPORTS_IMAGEDATA_CONSTRUCTOR = false;
101 try {
102 new ImageData(new Uint8ClampedArray(4), 1, 1);
103 SUPPORTS_IMAGEDATA_CONSTRUCTOR = true;
104 } catch (ex) {
105 // ignore failure
106 }
107
108
109 Display.prototype = {
110 // Public methods
111 viewportChangePos: function (deltaX, deltaY) {
112 var vp = this._viewportLoc;
113 deltaX = Math.floor(deltaX);
114 deltaY = Math.floor(deltaY);
115
116 if (!this._viewport) {
117 deltaX = -vp.w; // clamped later of out of bounds
118 deltaY = -vp.h;
119 }
120
121 var vx2 = vp.x + vp.w - 1;
122 var vy2 = vp.y + vp.h - 1;
123
124 // Position change
125
126 if (deltaX < 0 && vp.x + deltaX < 0) {
127 deltaX = -vp.x;
128 }
129 if (vx2 + deltaX >= this._fb_width) {
130 deltaX -= vx2 + deltaX - this._fb_width + 1;
131 }
132
133 if (vp.y + deltaY < 0) {
134 deltaY = -vp.y;
135 }
136 if (vy2 + deltaY >= this._fb_height) {
137 deltaY -= (vy2 + deltaY - this._fb_height + 1);
138 }
139
140 if (deltaX === 0 && deltaY === 0) {
141 return;
142 }
143 Util.Debug("viewportChange deltaX: " + deltaX + ", deltaY: " + deltaY);
144
145 vp.x += deltaX;
146 vx2 += deltaX;
147 vp.y += deltaY;
148 vy2 += deltaY;
149
150 // Update the clean rectangle
151 var cr = this._cleanRect;
152 if (vp.x > cr.x1) {
153 cr.x1 = vp.x;
154 }
155 if (vx2 < cr.x2) {
156 cr.x2 = vx2;
157 }
158 if (vp.y > cr.y1) {
159 cr.y1 = vp.y;
160 }
161 if (vy2 < cr.y2) {
162 cr.y2 = vy2;
163 }
164
165 var x1, w;
166 if (deltaX < 0) {
167 // Shift viewport left, redraw left section
168 x1 = 0;
169 w = -deltaX;
170 } else {
171 // Shift viewport right, redraw right section
172 x1 = vp.w - deltaX;
173 w = deltaX;
174 }
175
176 var y1, h;
177 if (deltaY < 0) {
178 // Shift viewport up, redraw top section
179 y1 = 0;
180 h = -deltaY;
181 } else {
182 // Shift viewport down, redraw bottom section
183 y1 = vp.h - deltaY;
184 h = deltaY;
185 }
186
187 var saveStyle = this._drawCtx.fillStyle;
188 var canvas = this._target;
189 this._drawCtx.fillStyle = "rgb(255,255,255)";
190
191 // Due to this bug among others [1] we need to disable the image-smoothing to
192 // avoid getting a blur effect when panning.
193 //
194 // 1. https://bugzilla.mozilla.org/show_bug.cgi?id=1194719
195 //
196 // We need to set these every time since all properties are reset
197 // when the the size is changed
198 if (this._drawCtx.mozImageSmoothingEnabled) {
199 this._drawCtx.mozImageSmoothingEnabled = false;
200 } else if (this._drawCtx.webkitImageSmoothingEnabled) {
201 this._drawCtx.webkitImageSmoothingEnabled = false;
202 } else if (this._drawCtx.msImageSmoothingEnabled) {
203 this._drawCtx.msImageSmoothingEnabled = false;
204 } else if (this._drawCtx.imageSmoothingEnabled) {
205 this._drawCtx.imageSmoothingEnabled = false;
206 }
207
208 // Copy the valid part of the viewport to the shifted location
209 this._drawCtx.drawImage(canvas, 0, 0, vp.w, vp.h, -deltaX, -deltaY, vp.w, vp.h);
210
211 if (deltaX !== 0) {
212 this._drawCtx.fillRect(x1, 0, w, vp.h);
213 }
214 if (deltaY !== 0) {
215 this._drawCtx.fillRect(0, y1, vp.w, h);
216 }
217 this._drawCtx.fillStyle = saveStyle;
218 },
219
220 viewportChangeSize: function(width, height) {
221
222 if (typeof(width) === "undefined" || typeof(height) === "undefined") {
223
224 Util.Debug("Setting viewport to full display region");
225 width = this._fb_width;
226 height = this._fb_height;
227 }
228
229 var vp = this._viewportLoc;
230 if (vp.w !== width || vp.h !== height) {
231
232 if (this._viewport) {
233 if (this._maxWidth !== 0 && width > this._maxWidth) {
234 width = this._maxWidth;
235 }
236 if (this._maxHeight !== 0 && height > this._maxHeight) {
237 height = this._maxHeight;
238 }
239 }
240
241 var cr = this._cleanRect;
242
243 if (width < vp.w && cr.x2 > vp.x + width - 1) {
244 cr.x2 = vp.x + width - 1;
245 }
246 if (height < vp.h && cr.y2 > vp.y + height - 1) {
247 cr.y2 = vp.y + height - 1;
248 }
249
250 vp.w = width;
251 vp.h = height;
252
253 var canvas = this._target;
254 if (canvas.width !== width || canvas.height !== height) {
255
256 // We have to save the canvas data since changing the size will clear it
257 var saveImg = null;
258 if (vp.w > 0 && vp.h > 0 && canvas.width > 0 && canvas.height > 0) {
259 var img_width = canvas.width < vp.w ? canvas.width : vp.w;
260 var img_height = canvas.height < vp.h ? canvas.height : vp.h;
261 saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height);
262 }
263
264 if (canvas.width !== width) {
265 canvas.width = width;
266 canvas.style.width = width + 'px';
267 }
268 if (canvas.height !== height) {
269 canvas.height = height;
270 canvas.style.height = height + 'px';
271 }
272
273 if (saveImg) {
274 this._drawCtx.putImageData(saveImg, 0, 0);
275 }
276 }
277 }
278 },
279
280 // Return a map of clean and dirty areas of the viewport and reset the
281 // tracking of clean and dirty areas
282 //
283 // Returns: { 'cleanBox': { 'x': x, 'y': y, 'w': w, 'h': h},
284 // 'dirtyBoxes': [{ 'x': x, 'y': y, 'w': w, 'h': h }, ...] }
285 getCleanDirtyReset: function () {
286 var vp = this._viewportLoc;
287 var cr = this._cleanRect;
288
289 var cleanBox = { 'x': cr.x1, 'y': cr.y1,
290 'w': cr.x2 - cr.x1 + 1, 'h': cr.y2 - cr.y1 + 1 };
291
292 var dirtyBoxes = [];
293 if (cr.x1 >= cr.x2 || cr.y1 >= cr.y2) {
294 // Whole viewport is dirty
295 dirtyBoxes.push({ 'x': vp.x, 'y': vp.y, 'w': vp.w, 'h': vp.h });
296 } else {
297 // Redraw dirty regions
298 var vx2 = vp.x + vp.w - 1;
299 var vy2 = vp.y + vp.h - 1;
300
301 if (vp.x < cr.x1) {
302 // left side dirty region
303 dirtyBoxes.push({'x': vp.x, 'y': vp.y,
304 'w': cr.x1 - vp.x + 1, 'h': vp.h});
305 }
306 if (vx2 > cr.x2) {
307 // right side dirty region
308 dirtyBoxes.push({'x': cr.x2 + 1, 'y': vp.y,
309 'w': vx2 - cr.x2, 'h': vp.h});
310 }
311 if(vp.y < cr.y1) {
312 // top/middle dirty region
313 dirtyBoxes.push({'x': cr.x1, 'y': vp.y,
314 'w': cr.x2 - cr.x1 + 1, 'h': cr.y1 - vp.y});
315 }
316 if (vy2 > cr.y2) {
317 // bottom/middle dirty region
318 dirtyBoxes.push({'x': cr.x1, 'y': cr.y2 + 1,
319 'w': cr.x2 - cr.x1 + 1, 'h': vy2 - cr.y2});
320 }
321 }
322
323 this._cleanRect = {'x1': vp.x, 'y1': vp.y,
324 'x2': vp.x + vp.w - 1, 'y2': vp.y + vp.h - 1};
325
326 return {'cleanBox': cleanBox, 'dirtyBoxes': dirtyBoxes};
327 },
328
329 absX: function (x) {
330 return x + this._viewportLoc.x;
331 },
332
333 absY: function (y) {
334 return y + this._viewportLoc.y;
335 },
336
337 resize: function (width, height) {
338 this._prevDrawStyle = "";
339
340 this._fb_width = width;
341 this._fb_height = height;
342
343 this._rescale(this._scale);
344
345 this.viewportChangeSize();
346 },
347
348 clear: function () {
349 if (this._logo) {
350 this.resize(this._logo.width, this._logo.height);
351 this.blitStringImage(this._logo.data, 0, 0);
352 } else {
353 if (Util.Engine.trident === 6) {
354 // NB(directxman12): there's a bug in IE10 where we can fail to actually
355 // clear the canvas here because of the resize.
356 // Clearing the current viewport first fixes the issue
357 this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
358 }
359 this.resize(240, 20);
360 this._drawCtx.clearRect(0, 0, this._viewportLoc.w, this._viewportLoc.h);
361 }
362
363 this._renderQ = [];
364 },
365
366 fillRect: function (x, y, width, height, color, from_queue) {
367 if (this._renderQ.length !== 0 && !from_queue) {
368 this.renderQ_push({
369 'type': 'fill',
370 'x': x,
371 'y': y,
372 'width': width,
373 'height': height,
374 'color': color
375 });
376 } else {
377 this._setFillColor(color);
378 this._drawCtx.fillRect(x - this._viewportLoc.x, y - this._viewportLoc.y, width, height);
379 }
380 },
381
382 copyImage: function (old_x, old_y, new_x, new_y, w, h, from_queue) {
383 if (this._renderQ.length !== 0 && !from_queue) {
384 this.renderQ_push({
385 'type': 'copy',
386 'old_x': old_x,
387 'old_y': old_y,
388 'x': new_x,
389 'y': new_y,
390 'width': w,
391 'height': h,
392 });
393 } else {
394 var x1 = old_x - this._viewportLoc.x;
395 var y1 = old_y - this._viewportLoc.y;
396 var x2 = new_x - this._viewportLoc.x;
397 var y2 = new_y - this._viewportLoc.y;
398
399 this._drawCtx.drawImage(this._target, x1, y1, w, h, x2, y2, w, h);
400 }
401 },
402
403 // start updating a tile
404 startTile: function (x, y, width, height, color) {
405 this._tile_x = x;
406 this._tile_y = y;
407 if (width === 16 && height === 16) {
408 this._tile = this._tile16x16;
409 } else {
410 this._tile = this._drawCtx.createImageData(width, height);
411 }
412
413 if (this._prefer_js) {
414 var bgr;
415 if (this._true_color) {
416 bgr = color;
417 } else {
418 bgr = this._colourMap[color[0]];
419 }
420 var red = bgr[2];
421 var green = bgr[1];
422 var blue = bgr[0];
423
424 var data = this._tile.data;
425 for (var i = 0; i < width * height * 4; i += 4) {
426 data[i] = red;
427 data[i + 1] = green;
428 data[i + 2] = blue;
429 data[i + 3] = 255;
430 }
431 } else {
432 this.fillRect(x, y, width, height, color, true);
433 }
434 },
435
436 // update sub-rectangle of the current tile
437 subTile: function (x, y, w, h, color) {
438 if (this._prefer_js) {
439 var bgr;
440 if (this._true_color) {
441 bgr = color;
442 } else {
443 bgr = this._colourMap[color[0]];
444 }
445 var red = bgr[2];
446 var green = bgr[1];
447 var blue = bgr[0];
448 var xend = x + w;
449 var yend = y + h;
450
451 var data = this._tile.data;
452 var width = this._tile.width;
453 for (var j = y; j < yend; j++) {
454 for (var i = x; i < xend; i++) {
455 var p = (i + (j * width)) * 4;
456 data[p] = red;
457 data[p + 1] = green;
458 data[p + 2] = blue;
459 data[p + 3] = 255;
460 }
461 }
462 } else {
463 this.fillRect(this._tile_x + x, this._tile_y + y, w, h, color, true);
464 }
465 },
466
467 // draw the current tile to the screen
468 finishTile: function () {
469 if (this._prefer_js) {
470 this._drawCtx.putImageData(this._tile, this._tile_x - this._viewportLoc.x,
471 this._tile_y - this._viewportLoc.y);
472 }
473 // else: No-op -- already done by setSubTile
474 },
475
476 blitImage: function (x, y, width, height, arr, offset, from_queue) {
477 if (this._renderQ.length !== 0 && !from_queue) {
478 // NB(directxman12): it's technically more performant here to use preallocated arrays,
479 // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
480 // this probably isn't getting called *nearly* as much
481 var new_arr = new Uint8Array(width * height * 4);
482 new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
483 this.renderQ_push({
484 'type': 'blit',
485 'data': new_arr,
486 'x': x,
487 'y': y,
488 'width': width,
489 'height': height,
490 });
491 } else if (this._true_color) {
492 this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
493 } else {
494 this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
495 }
496 },
497
498 blitRgbImage: function (x, y , width, height, arr, offset, from_queue) {
499 if (this._renderQ.length !== 0 && !from_queue) {
500 // NB(directxman12): it's technically more performant here to use preallocated arrays,
501 // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
502 // this probably isn't getting called *nearly* as much
503 var new_arr = new Uint8Array(width * height * 3);
504 new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
505 this.renderQ_push({
506 'type': 'blitRgb',
507 'data': new_arr,
508 'x': x,
509 'y': y,
510 'width': width,
511 'height': height,
512 });
513 } else if (this._true_color) {
514 this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
515 } else {
516 // probably wrong?
517 this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
518 }
519 },
520
521 blitRgbxImage: function (x, y, width, height, arr, offset, from_queue) {
522 if (this._renderQ.length !== 0 && !from_queue) {
523 // NB(directxman12): it's technically more performant here to use preallocated arrays,
524 // but it's a lot of extra work for not a lot of payoff -- if we're using the render queue,
525 // this probably isn't getting called *nearly* as much
526 var new_arr = new Uint8Array(width * height * 4);
527 new_arr.set(new Uint8Array(arr.buffer, 0, new_arr.length));
528 this.renderQ_push({
529 'type': 'blitRgbx',
530 'data': new_arr,
531 'x': x,
532 'y': y,
533 'width': width,
534 'height': height,
535 });
536 } else {
537 this._rgbxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
538 }
539 },
540
541 blitStringImage: function (str, x, y) {
542 var img = new Image();
543 img.onload = function () {
544 this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
545 }.bind(this);
546 img.src = str;
547 return img; // for debugging purposes
548 },
549
550 // wrap ctx.drawImage but relative to viewport
551 drawImage: function (img, x, y) {
552 this._drawCtx.drawImage(img, x - this._viewportLoc.x, y - this._viewportLoc.y);
553 },
554
555 renderQ_push: function (action) {
556 this._renderQ.push(action);
557 if (this._renderQ.length === 1) {
558 // If this can be rendered immediately it will be, otherwise
559 // the scanner will start polling the queue (every
560 // requestAnimationFrame interval)
561 this._scan_renderQ();
562 }
563 },
564
565 changeCursor: function (pixels, mask, hotx, hoty, w, h) {
566 if (this._cursor_uri === false) {
567 Util.Warn("changeCursor called but no cursor data URI support");
568 return;
569 }
570
571 if (this._true_color) {
572 Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h);
573 } else {
574 Display.changeCursor(this._target, pixels, mask, hotx, hoty, w, h, this._colourMap);
575 }
576 },
577
578 defaultCursor: function () {
579 this._target.style.cursor = "default";
580 },
581
582 disableLocalCursor: function () {
583 this._target.style.cursor = "none";
584 },
585
586 clippingDisplay: function () {
587 var vp = this._viewportLoc;
588
589 var fbClip = this._fb_width > vp.w || this._fb_height > vp.h;
590 var limitedVp = this._maxWidth !== 0 && this._maxHeight !== 0;
591 var clipping = false;
592
593 if (limitedVp) {
594 clipping = vp.w > this._maxWidth || vp.h > this._maxHeight;
595 }
596
597 return fbClip || (limitedVp && clipping);
598 },
599
600 // Overridden getters/setters
601 get_context: function () {
602 return this._drawCtx;
603 },
604
605 set_scale: function (scale) {
606 this._rescale(scale);
607 },
608
609 set_width: function (w) {
610 this._fb_width = w;
611 },
612 get_width: function () {
613 return this._fb_width;
614 },
615
616 set_height: function (h) {
617 this._fb_height = h;
618 },
619 get_height: function () {
620 return this._fb_height;
621 },
622
623 autoscale: function (containerWidth, containerHeight, downscaleOnly) {
624 var targetAspectRatio = containerWidth / containerHeight;
625 var fbAspectRatio = this._fb_width / this._fb_height;
626
627 var scaleRatio;
628 if (fbAspectRatio >= targetAspectRatio) {
629 scaleRatio = containerWidth / this._fb_width;
630 } else {
631 scaleRatio = containerHeight / this._fb_height;
632 }
633
634 var targetW, targetH;
635 if (scaleRatio > 1.0 && downscaleOnly) {
636 targetW = this._fb_width;
637 targetH = this._fb_height;
638 scaleRatio = 1.0;
639 } else if (fbAspectRatio >= targetAspectRatio) {
640 targetW = containerWidth;
641 targetH = Math.round(containerWidth / fbAspectRatio);
642 } else {
643 targetW = Math.round(containerHeight * fbAspectRatio);
644 targetH = containerHeight;
645 }
646
647 // NB(directxman12): If you set the width directly, or set the
648 // style width to a number, the canvas is cleared.
649 // However, if you set the style width to a string
650 // ('NNNpx'), the canvas is scaled without clearing.
651 this._target.style.width = targetW + 'px';
652 this._target.style.height = targetH + 'px';
653
654 this._scale = scaleRatio;
655
656 return scaleRatio; // so that the mouse, etc scale can be set
657 },
658
659 // Private Methods
660 _rescale: function (factor) {
661 this._scale = factor;
662
663 var w;
664 var h;
665
666 if (this._viewport &&
667 this._maxWidth !== 0 && this._maxHeight !== 0) {
668 w = Math.min(this._fb_width, this._maxWidth);
669 h = Math.min(this._fb_height, this._maxHeight);
670 } else {
671 w = this._fb_width;
672 h = this._fb_height;
673 }
674
675 this._target.style.width = Math.round(factor * w) + 'px';
676 this._target.style.height = Math.round(factor * h) + 'px';
677 },
678
679 _setFillColor: function (color) {
680 var bgr;
681 if (this._true_color) {
682 bgr = color;
683 } else {
684 bgr = this._colourMap[color];
685 }
686
687 var newStyle = 'rgb(' + bgr[2] + ',' + bgr[1] + ',' + bgr[0] + ')';
688 if (newStyle !== this._prevDrawStyle) {
689 this._drawCtx.fillStyle = newStyle;
690 this._prevDrawStyle = newStyle;
691 }
692 },
693
694 _rgbImageData: function (x, y, vx, vy, width, height, arr, offset) {
695 var img = this._drawCtx.createImageData(width, height);
696 var data = img.data;
697 for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 3) {
698 data[i] = arr[j];
699 data[i + 1] = arr[j + 1];
700 data[i + 2] = arr[j + 2];
701 data[i + 3] = 255; // Alpha
702 }
703 this._drawCtx.putImageData(img, x - vx, y - vy);
704 },
705
706 _bgrxImageData: function (x, y, vx, vy, width, height, arr, offset) {
707 var img = this._drawCtx.createImageData(width, height);
708 var data = img.data;
709 for (var i = 0, j = offset; i < width * height * 4; i += 4, j += 4) {
710 data[i] = arr[j + 2];
711 data[i + 1] = arr[j + 1];
712 data[i + 2] = arr[j];
713 data[i + 3] = 255; // Alpha
714 }
715 this._drawCtx.putImageData(img, x - vx, y - vy);
716 },
717
718 _rgbxImageData: function (x, y, vx, vy, width, height, arr, offset) {
719 // NB(directxman12): arr must be an Type Array view
720 var img;
721 if (SUPPORTS_IMAGEDATA_CONSTRUCTOR) {
722 img = new ImageData(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4), width, height);
723 } else {
724 img = this._drawCtx.createImageData(width, height);
725 img.data.set(new Uint8ClampedArray(arr.buffer, arr.byteOffset, width * height * 4));
726 }
727 this._drawCtx.putImageData(img, x - vx, y - vy);
728 },
729
730 _cmapImageData: function (x, y, vx, vy, width, height, arr, offset) {
731 var img = this._drawCtx.createImageData(width, height);
732 var data = img.data;
733 var cmap = this._colourMap;
734 for (var i = 0, j = offset; i < width * height * 4; i += 4, j++) {
735 var bgr = cmap[arr[j]];
736 data[i] = bgr[2];
737 data[i + 1] = bgr[1];
738 data[i + 2] = bgr[0];
739 data[i + 3] = 255; // Alpha
740 }
741 this._drawCtx.putImageData(img, x - vx, y - vy);
742 },
743
744 _scan_renderQ: function () {
745 var ready = true;
746 while (ready && this._renderQ.length > 0) {
747 var a = this._renderQ[0];
748 switch (a.type) {
749 case 'copy':
750 this.copyImage(a.old_x, a.old_y, a.x, a.y, a.width, a.height, true);
751 break;
752 case 'fill':
753 this.fillRect(a.x, a.y, a.width, a.height, a.color, true);
754 break;
755 case 'blit':
756 this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, true);
757 break;
758 case 'blitRgb':
759 this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0, true);
760 break;
761 case 'blitRgbx':
762 this.blitRgbxImage(a.x, a.y, a.width, a.height, a.data, 0, true);
763 break;
764 case 'img':
765 if (a.img.complete) {
766 this.drawImage(a.img, a.x, a.y);
767 } else {
768 // We need to wait for this image to 'load'
769 // to keep things in-order
770 ready = false;
771 }
772 break;
773 }
774
775 if (ready) {
776 this._renderQ.shift();
777 }
778 }
779
780 if (this._renderQ.length > 0) {
781 requestAnimFrame(this._scan_renderQ.bind(this));
782 }
783 },
784 };
785
786 Util.make_properties(Display, [
787 ['target', 'wo', 'dom'], // Canvas element for rendering
788 ['context', 'ro', 'raw'], // Canvas 2D context for rendering (read-only)
789 ['logo', 'rw', 'raw'], // Logo to display when cleared: {"width": w, "height": h, "data": data}
790 ['true_color', 'rw', 'bool'], // Use true-color pixel data
791 ['colourMap', 'rw', 'arr'], // Colour map array (when not true-color)
792 ['scale', 'rw', 'float'], // Display area scale factor 0.0 - 1.0
793 ['viewport', 'rw', 'bool'], // Use viewport clipping
794 ['width', 'rw', 'int'], // Display area width
795 ['height', 'rw', 'int'], // Display area height
796 ['maxWidth', 'rw', 'int'], // Viewport max width (0 if disabled)
797 ['maxHeight', 'rw', 'int'], // Viewport max height (0 if disabled)
798
799 ['render_mode', 'ro', 'str'], // Canvas rendering mode (read-only)
800
801 ['prefer_js', 'rw', 'str'], // Prefer Javascript over canvas methods
802 ['cursor_uri', 'rw', 'raw'] // Can we render cursor using data URI
803 ]);
804
805 // Class Methods
806 Display.changeCursor = function (target, pixels, mask, hotx, hoty, w0, h0, cmap) {
807 var w = w0;
808 var h = h0;
809 if (h < w) {
810 h = w; // increase h to make it square
811 } else {
812 w = h; // increase w to make it square
813 }
814
815 var cur = [];
816
817 // Push multi-byte little-endian values
818 cur.push16le = function (num) {
819 this.push(num & 0xFF, (num >> 8) & 0xFF);
820 };
821 cur.push32le = function (num) {
822 this.push(num & 0xFF,
823 (num >> 8) & 0xFF,
824 (num >> 16) & 0xFF,
825 (num >> 24) & 0xFF);
826 };
827
828 var IHDRsz = 40;
829 var RGBsz = w * h * 4;
830 var XORsz = Math.ceil((w * h) / 8.0);
831 var ANDsz = Math.ceil((w * h) / 8.0);
832
833 cur.push16le(0); // 0: Reserved
834 cur.push16le(2); // 2: .CUR type
835 cur.push16le(1); // 4: Number of images, 1 for non-animated ico
836
837 // Cursor #1 header (ICONDIRENTRY)
838 cur.push(w); // 6: width
839 cur.push(h); // 7: height
840 cur.push(0); // 8: colors, 0 -> true-color
841 cur.push(0); // 9: reserved
842 cur.push16le(hotx); // 10: hotspot x coordinate
843 cur.push16le(hoty); // 12: hotspot y coordinate
844 cur.push32le(IHDRsz + RGBsz + XORsz + ANDsz);
845 // 14: cursor data byte size
846 cur.push32le(22); // 18: offset of cursor data in the file
847
848 // Cursor #1 InfoHeader (ICONIMAGE/BITMAPINFO)
849 cur.push32le(IHDRsz); // 22: InfoHeader size
850 cur.push32le(w); // 26: Cursor width
851 cur.push32le(h * 2); // 30: XOR+AND height
852 cur.push16le(1); // 34: number of planes
853 cur.push16le(32); // 36: bits per pixel
854 cur.push32le(0); // 38: Type of compression
855
856 cur.push32le(XORsz + ANDsz);
857 // 42: Size of Image
858 cur.push32le(0); // 46: reserved
859 cur.push32le(0); // 50: reserved
860 cur.push32le(0); // 54: reserved
861 cur.push32le(0); // 58: reserved
862
863 // 62: color data (RGBQUAD icColors[])
864 var y, x;
865 for (y = h - 1; y >= 0; y--) {
866 for (x = 0; x < w; x++) {
867 if (x >= w0 || y >= h0) {
868 cur.push(0); // blue
869 cur.push(0); // green
870 cur.push(0); // red
871 cur.push(0); // alpha
872 } else {
873 var idx = y * Math.ceil(w0 / 8) + Math.floor(x / 8);
874 var alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0;
875 if (cmap) {
876 idx = (w0 * y) + x;
877 var rgb = cmap[pixels[idx]];
878 cur.push(rgb[2]); // blue
879 cur.push(rgb[1]); // green
880 cur.push(rgb[0]); // red
881 cur.push(alpha); // alpha
882 } else {
883 idx = ((w0 * y) + x) * 4;
884 cur.push(pixels[idx + 2]); // blue
885 cur.push(pixels[idx + 1]); // green
886 cur.push(pixels[idx]); // red
887 cur.push(alpha); // alpha
888 }
889 }
890 }
891 }
892
893 // XOR/bitmask data (BYTE icXOR[])
894 // (ignored, just needs to be the right size)
895 for (y = 0; y < h; y++) {
896 for (x = 0; x < Math.ceil(w / 8); x++) {
897 cur.push(0);
898 }
899 }
900
901 // AND/bitmask data (BYTE icAND[])
902 // (ignored, just needs to be the right size)
903 for (y = 0; y < h; y++) {
904 for (x = 0; x < Math.ceil(w / 8); x++) {
905 cur.push(0);
906 }
907 }
908
909 var url = 'data:image/x-icon;base64,' + Base64.encode(cur);
910 target.style.cursor = 'url(' + url + ')' + hotx + ' ' + hoty + ', default';
911 };
912 })();
noVNC mirror