Retro/pcjs
Watch
1
0
Fork
You've already forked pcjs
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A machine's screen can now be used to display initialization (diagnostic) messages, up until the Computer component is ready to power/start the CPU, at which point control of the screen reverts to the Video component

Browse source
This commit is contained in:
Jeff Parsons 2017-06-28 16:24:33 -07:00 • committed by Jeff Parsons
commit ea82dfec93
35 changed files with 6152 additions and 5539 deletions
Download patch file Download diff file Expand all files Collapse all files

60
modules/pcx86/lib/video.js
View file

@ -6699,21 +6699,21 @@ class Video extends Component {
*/
static init()
{
var aeVideo = Component.getElementsByClass(document, PCX86.APPCLASS, "video");
for (var iVideo = 0; iVideo < aeVideo.length; iVideo++) {
var eVideo = aeVideo[iVideo];
var parmsVideo = Component.getComponentParms(eVideo);
var aElement = Component.getElementsByClass(document, PCX86.APPCLASS, "video");
for (var iVideo = 0; iVideo < aElement.length; iVideo++) {
var element = aElement[iVideo];
var parmsVideo = Component.getComponentParms(element);
var eCanvas = /** @type {HTMLCanvasElement} */ (document.createElement("canvas"));
if (eCanvas === undefined || !eCanvas.getContext) {
eVideo.innerHTML = "<br/>Missing &lt;canvas&gt; support. Please try a newer web browser.";
var canvas = /** @type {HTMLCanvasElement} */ (document.createElement("canvas"));
if (canvas === undefined || !canvas.getContext) {
element.innerHTML = "<br/>Missing &lt;canvas&gt; support. Please try a newer web browser.";
return;
}
eCanvas.setAttribute("class", "pcjs-canvas");
eCanvas.setAttribute("width", parmsVideo['screenWidth']);
eCanvas.setAttribute("height", parmsVideo['screenHeight']);
eCanvas.style.backgroundColor = parmsVideo['screenColor'];
canvas.setAttribute("class", "pcjs-canvas");
canvas.setAttribute("width", parmsVideo['screenWidth']);
canvas.setAttribute("height", parmsVideo['screenHeight']);
canvas.style.backgroundColor = parmsVideo['screenColor'];
/*
* The "contenteditable" attribute on a canvas element NOTICEABLY slows down canvas drawing on
@ -6721,7 +6721,7 @@ class Video extends Component {
* up; click on the canvas, and drawing slows down). So the "transparent textarea hack" that we
* once employed as only a work-around for Android devices is now our default.
*
* eCanvas.setAttribute("contenteditable", "true");
* canvas.setAttribute("contenteditable", "true");
*
* HACK: A canvas style of "auto" provides for excellent responsive canvas scaling in EVERY browser
* except IE9/IE10, so I recalculate the appropriate CSS height every time the parent DIV is resized;
@ -6730,14 +6730,14 @@ class Video extends Component {
* The other reason it's good to keep this particular hack limited to IE9/IE10 is that most other
* browsers don't actually support an 'onresize' handler on anything but the window object.
*/
eCanvas.style.height = "auto";
canvas.style.height = "auto";
if (Web.getUserAgent().indexOf("MSIE") >= 0) {
eVideo.onresize = function(eParent, eChild, cx, cy) {
element.onresize = function(eParent, eChild, cx, cy) {
return function onResizeVideo() {
eChild.style.height = (((eParent.clientWidth * cy) / cx) | 0) + "px";
};
}(eVideo, eCanvas, parmsVideo['screenWidth'], parmsVideo['screenHeight']);
eVideo.onresize(null);
}(element, canvas, parmsVideo['screenWidth'], parmsVideo['screenHeight']);
element.onresize(null);
}
/*
* The following is a related hack that allows the user to force the screen to use a particular aspect
@ -6767,10 +6767,10 @@ class Video extends Component {
*/
eChild.style.height = ((eParent.clientWidth / aspectRatio)|0) + "px";
};
}(eVideo, eCanvas, aspect));
}(element, canvas, aspect));
window['onresize']();
}
eVideo.appendChild(eCanvas);
element.appendChild(canvas);
/*
* HACK: Android-based browsers, like the Silk (Amazon) browser and Chrome for Android, don't honor the
@ -6793,14 +6793,14 @@ class Video extends Component {
* clearly see the overlaid semi-transparent input field, but none of the input characters were passed along,
* with the exception of the "Go" (Enter) key.
*
* var eInput = document.createElement("input");
* eInput.setAttribute("type", "password");
* eInput.setAttribute("style", "position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5");
* eVideo.appendChild(eInput);
* var input = document.createElement("input");
* input.setAttribute("type", "password");
* input.setAttribute("style", "position:absolute; left:0; top:0; width:100%; height:100%; opacity:0.5");
* element.appendChild(input);
*
* See this Chromium issue for more information: https://code.google.com/p/chromium/issues/detail?id=118639
*/
var eTextArea = /** @type {HTMLTextAreaElement} */ (document.createElement("textarea"));
var textarea = /** @type {HTMLTextAreaElement} */ (document.createElement("textarea"));
/*
* As noted in keyboard.js, the keyboard on an iOS device tends to pop up with the SHIFT key depressed,
@ -6808,8 +6808,8 @@ class Video extends Component {
* these "auto" attributes will help.
*/
if (Web.isUserAgent("iOS")) {
eTextArea.setAttribute("autocapitalize", "off");
eTextArea.setAttribute("autocorrect", "off");
textarea.setAttribute("autocapitalize", "off");
textarea.setAttribute("autocorrect", "off");
/*
* One of the problems on iOS devices is that after a soft-key control is clicked, we need to give
* focus back to the above textarea, usually by calling cmp.updateFocus(), but in doing so, iOS may
@ -6818,21 +6818,21 @@ class Video extends Component {
* Googling reveals that another way to prevent those jarring unintentional zooms is to simply set the
* font-size of the text control to 16px. So that's what we do.
*/
eTextArea.style.fontSize = "16px";
textarea.style.fontSize = "16px";
}
eVideo.appendChild(eTextArea);
element.appendChild(textarea);
/*
* Now we can create the Video object, record it, and wire it up to the associated document elements.
*/
var eContext = /** @type {CanvasRenderingContext2D} */ (eCanvas.getContext("2d"));
var video = new Video(parmsVideo, eCanvas, eContext, eTextArea /* || eInput */, eVideo);
var context = /** @type {CanvasRenderingContext2D} */ (canvas.getContext("2d"));
var video = new Video(parmsVideo, canvas, context, textarea /* || input */, element);
/*
* Bind any video-specific controls (eg, the Refresh button). There are no essential controls, however;
* even the "Refresh" button is just a diagnostic tool, to ensure that the screen contents are up-to-date.
*/
Component.bindComponentControls(video, eVideo, PCX86.APPCLASS);
Component.bindComponentControls(video, element, PCX86.APPCLASS);
}
}
}