From 0f207c808c967c727c390e773d8bb707635b2b89 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 9 Aug 2018 14:35:18 +0200 Subject: [PATCH 01/17] Remove machine control buttons from vnc_lite The vnc_lite example is intended to be minimal and these buttons are only useful in special cases. --- vnc_lite.html | 37 +------------------------------------ 1 file changed, 1 insertion(+), 36 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index e5ab3c2a..7b884009 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -5,7 +5,7 @@ - - - - - - - - - - From e7c1074b65ee81ffca1895e41b9480d9170f8c6d Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Wed, 15 Aug 2018 09:15:46 +0200 Subject: [PATCH 03/17] Get rid of icons for vnc_lite Icons aren't required and we want to get rid of the 'app/' dependency. --- vnc_lite.html | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 08724545..3dcd7b96 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -22,26 +22,6 @@ Remove this if you use the .htaccess --> - - - - - - - - - - - - - - - - - - From e0d4e5a1c0fec254933f850c2a50fc2808b97d3d Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Wed, 15 Aug 2018 09:55:52 +0200 Subject: [PATCH 04/17] Move css rules for vnc_lite to the html Easier to get an overview if it's all in one file. --- app/styles/lite.css | 63 --------------------------------------------- vnc_lite.html | 57 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 65 deletions(-) delete mode 100644 app/styles/lite.css diff --git a/app/styles/lite.css b/app/styles/lite.css deleted file mode 100644 index 13e11c7e..00000000 --- a/app/styles/lite.css +++ /dev/null @@ -1,63 +0,0 @@ -/* - * noVNC auto CSS - * Copyright (C) 2012 Joel Martin - * Copyright (C) 2017 Samuel Mannehed for Cendio AB - * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) - * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). - */ - -body { - margin:0; - background-color:#313131; - border-bottom-right-radius: 800px 600px; - height:100%; - display: flex; - flex-direction: column; -} - -html { - background-color:#494949; - height:100%; -} - -#noVNC_status_bar { - width: 100%; - display:flex; - justify-content: space-between; -} - -#noVNC_status { - color: #fff; - font: bold 12px Helvetica; - margin: auto; -} - -.noVNC_status_normal { - background: linear-gradient(#b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); -} - -.noVNC_status_error { - background: linear-gradient(#c83737 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); -} - -.noVNC_status_warn { - background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); -} - -.noNVC_shown { - display: inline; -} -.noVNC_hidden { - display: none; -} - -#noVNC_left_dummy_elem { - flex: 1; -} - -#noVNC_buttons { - padding: 1px; - flex: 1; - display: flex; - justify-content: flex-end; -} diff --git a/vnc_lite.html b/vnc_lite.html index 3dcd7b96..7f1b9065 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -22,8 +22,61 @@ Remove this if you use the .htaccess --> - - + From de79ae92e5f6be6219c90d054ce4bc7f587d04a8 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Wed, 15 Aug 2018 09:18:43 +0200 Subject: [PATCH 05/17] Remove unneccessary code and bling from vnc_lite Unused code, variables and unnecessary styles. The host/port check would only have an effect if someone explicitly set them as empty in the query string. The different colors of the status bar are not necessary, nor is the styling of the background. --- vnc_lite.html | 53 ++++++++++----------------------------------------- 1 file changed, 10 insertions(+), 43 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 7f1b9065..d3d33fc7 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -26,21 +26,21 @@ body { margin: 0; - background-color: #313131; - border-bottom-right-radius: 800px 600px; + background-color: dimgrey; height: 100%; display: flex; flex-direction: column; } html { - background-color: #494949; height: 100%; } #noVNC_status_bar { + background-color: #6e84a3; width: 100%; display: flex; justify-content: space-between; + border-bottom: 1px outset; } #noVNC_status { color: #ffffff; @@ -48,23 +48,6 @@ margin: auto; } - .noVNC_status_normal { - background: linear-gradient(#b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); - } - .noVNC_status_error { - background: linear-gradient(#c83737 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); - } - .noVNC_status_warn { - background: linear-gradient(#b4b41e 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); - } - - .noNVC_shown { - display: inline; - } - .noVNC_hidden { - display: none; - } - #noVNC_left_dummy_elem { flex: 1; } @@ -106,15 +89,12 @@ desktopName = e.detail.name; } function credentials(e) { - var html; - var form = document.createElement('form'); form.innerHTML = ''; form.innerHTML += ''; form.onsubmit = setPassword; // bypass status() because it sets text content - document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_warn"); document.getElementById('noVNC_status').innerHTML = ''; document.getElementById('noVNC_status').appendChild(form); document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: '; @@ -127,16 +107,7 @@ rfb.sendCtrlAltDel(); return false; } - function status(text, level) { - switch (level) { - case 'normal': - case 'warn': - case 'error': - break; - default: - level = "warn"; - } - document.getElementById('noVNC_status_bar').className = "noVNC_status_" + level; + function status(text) { document.getElementById('noVNC_status').textContent = text; } @@ -144,18 +115,18 @@ document.getElementById('sendCtrlAltDelButton').disabled = false; if (WebUtil.getConfigVar('encrypt', (window.location.protocol === "https:"))) { - status("Connected (encrypted) to " + desktopName, "normal"); + status("Connected (encrypted) to " + desktopName); } else { - status("Connected (unencrypted) to " + desktopName, "normal"); + status("Connected (unencrypted) to " + desktopName); } } function disconnected(e) { document.getElementById('sendCtrlAltDelButton').disabled = true; if (e.detail.clean) { - status("Disconnected", "normal"); + status("Disconnected"); } else { - status("Something went wrong, connection is closed", "error"); + status("Something went wrong, connection is closed"); } } @@ -193,11 +164,7 @@ (function() { - status("Connecting", "normal"); - - if ((!host) || (!port)) { - status('Must specify host and port in URL', 'error'); - } + status("Connecting"); var url; @@ -235,7 +202,7 @@
Loading
+ id="sendCtrlAltDelButton">
From 27dff4a0a2d57323211a8d28caf2da447255ab35 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Wed, 15 Aug 2018 09:19:30 +0200 Subject: [PATCH 06/17] Simplify connected() function --- vnc_lite.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index d3d33fc7..806a8d82 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -113,12 +113,7 @@ function connected(e) { document.getElementById('sendCtrlAltDelButton').disabled = false; - if (WebUtil.getConfigVar('encrypt', - (window.location.protocol === "https:"))) { - status("Connected (encrypted) to " + desktopName); - } else { - status("Connected (unencrypted) to " + desktopName); - } + status("Connected to " + desktopName); } function disconnected(e) { From 8c2866df3619e49d629b5f98c20d27a7c72d102a Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Wed, 15 Aug 2018 09:43:24 +0200 Subject: [PATCH 07/17] Add code comments to vnc_lite --- vnc_lite.html | 46 ++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 806a8d82..3b18f629 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -4,6 +4,9 @@ + + From 6517c498b9c93e805ead992cc4e5bafa18193fb3 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 16 Aug 2018 11:23:11 +0200 Subject: [PATCH 09/17] Remove support for the fragment and WebUtil dep The only remaining use we had of WebUtil was getConfigVar(). Let's get rid of that dependency and use our own, query-string-only and richly commented version of that function. It's easier for people to get an overview of vnc_lite if it's all in one file. This commit removes support for the fragment, parameters can only be passed using the query string from now on. --- vnc_lite.html | 39 ++++++++++++++++++++++++++++----------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index fcb3e7c3..828c5c81 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -14,8 +14,6 @@ Connect parameters are provided in query string: http://example.com/?host=HOST&port=PORT&scale=true - or the fragment: - http://example.com/#host=HOST&port=PORT&scale=true --> noVNC @@ -82,8 +80,6 @@ From 25551b6b406a9d2b3164a4f02b0b2325bb0833ac Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 16 Aug 2018 11:34:17 +0200 Subject: [PATCH 10/17] Use let and const instead of var in vnc_lite The rest of noVNC has been converted already. This allows us to remove the extra scope that was created for the VNC connection. --- vnc_lite.html | 66 +++++++++++++++++++++++++-------------------------- 1 file changed, 32 insertions(+), 34 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 828c5c81..a01e33d6 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -72,7 +72,7 @@ From c756665e81ff486869848875f2639cc423a10251 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 16 Aug 2018 11:38:35 +0200 Subject: [PATCH 11/17] Rename functions in vnc_lite Give them obvious names to make the code easier to understand. --- vnc_lite.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index a01e33d6..a8d5e260 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -94,7 +94,7 @@ // When this function is called, the server requires // credentials to authenticate - function credentials(e) { + function credentialsAreRequired(e) { // Let's create a password input const form = document.createElement('form'); form.innerHTML = ''; @@ -128,13 +128,13 @@ // When this function is called we have // successfully connected to a server - function connected(e) { + function connectedToServer(e) { document.getElementById('sendCtrlAltDelButton').disabled = false; status("Connected to " + desktopName); } // This function is called when we are disconnected - function disconnected(e) { + function disconnectedFromServer(e) { document.getElementById('sendCtrlAltDelButton').disabled = true; if (e.detail.clean) { status("Disconnected"); @@ -197,9 +197,9 @@ { credentials: { password: password } }); // Add listeners to important events from the RFB module - rfb.addEventListener("connect", connected); - rfb.addEventListener("disconnect", disconnected); - rfb.addEventListener("credentialsrequired", credentials); + rfb.addEventListener("connect", connectedToServer); + rfb.addEventListener("disconnect", disconnectedFromServer); + rfb.addEventListener("credentialsrequired", credentialsAreRequired); rfb.addEventListener("desktopname", updateDesktopName); // Set parameters that can be changed on an active connection From 26d51e490e16b6ab0cdd0b67e97e8b00070a3e8e Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 16 Aug 2018 11:52:32 +0200 Subject: [PATCH 12/17] Order vnc_lite functions --- vnc_lite.html | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index a8d5e260..4ba49329 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -86,10 +86,21 @@ let rfb; let desktopName; - // When this function is called we have received - // a desktop name from the server - function updateDesktopName(e) { - desktopName = e.detail.name; + // When this function is called we have + // successfully connected to a server + function connectedToServer(e) { + document.getElementById('sendCtrlAltDelButton').disabled = false; + status("Connected to " + desktopName); + } + + // This function is called when we are disconnected + function disconnectedFromServer(e) { + document.getElementById('sendCtrlAltDelButton').disabled = true; + if (e.detail.clean) { + status("Disconnected"); + } else { + status("Something went wrong, connection is closed"); + } } // When this function is called, the server requires @@ -108,6 +119,12 @@ document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: '; } + // When this function is called we have received + // a desktop name from the server + function updateDesktopName(e) { + desktopName = e.detail.name; + } + // Send the credentials from the input element function setPassword() { rfb.sendCredentials({ password: document.getElementById('password_input').value }); @@ -121,28 +138,12 @@ rfb.sendCtrlAltDel(); return false; } + // Show a status text in the top bar function status(text) { document.getElementById('noVNC_status').textContent = text; } - // When this function is called we have - // successfully connected to a server - function connectedToServer(e) { - document.getElementById('sendCtrlAltDelButton').disabled = false; - status("Connected to " + desktopName); - } - - // This function is called when we are disconnected - function disconnectedFromServer(e) { - document.getElementById('sendCtrlAltDelButton').disabled = true; - if (e.detail.clean) { - status("Disconnected"); - } else { - status("Something went wrong, connection is closed"); - } - } - // This function extracts the value of one variable from the // query string. If the variable isn't defined in the URL // it returns the default value instead. From 5271e30049b931d301c9cac228a2c20f5b9dd16b Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Thu, 16 Aug 2018 12:23:54 +0200 Subject: [PATCH 13/17] Use a simple prompt for passwords in vnc_lite It's not password-masked, but it allows for a lot simpler code. --- vnc_lite.html | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 4ba49329..71f28d95 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -106,17 +106,8 @@ // When this function is called, the server requires // credentials to authenticate function credentialsAreRequired(e) { - // Let's create a password input - const form = document.createElement('form'); - form.innerHTML = ''; - form.innerHTML += ''; - form.onsubmit = setPassword; - - // Bypass status() because it sets text content - // which doesn't allow adding elements - document.getElementById('noVNC_status').innerHTML = ''; - document.getElementById('noVNC_status').appendChild(form); - document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: '; + const password = prompt("Password Required:"); + rfb.sendCredentials({ password: password }); } // When this function is called we have received @@ -125,12 +116,6 @@ desktopName = e.detail.name; } - // Send the credentials from the input element - function setPassword() { - rfb.sendCredentials({ password: document.getElementById('password_input').value }); - return false; - } - // Since most operating systems will catch Ctrl+Alt+Del // before they get a chance to be intercepted by the browser, // we provide a way to emulate this key sequence. From 011e4bff34c7d1a0540b388ec262308018ca57fe Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Tue, 21 Aug 2018 11:24:08 +0200 Subject: [PATCH 14/17] Create our own button for CtrlAltDel in vnc_lite In order to have better control of the layout and to make the code easier to follow. Using input type button or buttons will imply a lot of built in styling that differs from browser to browser. --- vnc_lite.html | 35 ++++++++++++----------------------- 1 file changed, 12 insertions(+), 23 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 71f28d95..88e10797 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -38,26 +38,21 @@ #noVNC_status_bar { background-color: #6e84a3; - width: 100%; - display: flex; - justify-content: space-between; + color: white; + font: bold 12px Helvetica; + padding: 6px 5px 4px 5px; border-bottom: 1px outset; } #noVNC_status { - color: #ffffff; - font: bold 12px Helvetica; - margin: auto; + text-align: center; } - - #noVNC_left_dummy_elem { - flex: 1; - } - - #noVNC_buttons { - padding: 1px; - flex: 1; - display: flex; - justify-content: flex-end; + #sendCtrlAltDelButton { + position: fixed; + top: 0px; + right: 0px; + border: 1px outset; + padding: 5px 5px 4px 5px; + cursor: pointer; } @@ -89,13 +84,11 @@ // When this function is called we have // successfully connected to a server function connectedToServer(e) { - document.getElementById('sendCtrlAltDelButton').disabled = false; status("Connected to " + desktopName); } // This function is called when we are disconnected function disconnectedFromServer(e) { - document.getElementById('sendCtrlAltDelButton').disabled = true; if (e.detail.clean) { status("Disconnected"); } else { @@ -196,12 +189,8 @@
-
Loading
-
- -
+
Send CtrlAltDel
From 8613f6f4ae0f048bdf13490b9a476641872a4035 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Tue, 21 Aug 2018 11:29:05 +0200 Subject: [PATCH 15/17] Simplify element names in vnc_lite --- vnc_lite.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 88e10797..2398bea2 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -36,14 +36,14 @@ height: 100%; } - #noVNC_status_bar { + #top_bar { background-color: #6e84a3; color: white; font: bold 12px Helvetica; padding: 6px 5px 4px 5px; border-bottom: 1px outset; } - #noVNC_status { + #status { text-align: center; } #sendCtrlAltDelButton { @@ -119,7 +119,7 @@ // Show a status text in the top bar function status(text) { - document.getElementById('noVNC_status').textContent = text; + document.getElementById('status').textContent = text; } // This function extracts the value of one variable from the @@ -188,9 +188,9 @@ -
-
Loading
-
Send CtrlAltDel
-
+
+
Loading
+
Send CtrlAltDel
+
From 1c945f812b1e4db4bba9b57fd2ddbc3c8235f45d Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Tue, 21 Aug 2018 11:29:39 +0200 Subject: [PATCH 16/17] Add a screen element for vnc_lite.html Makes it clearer where the remote screen will be created. --- vnc_lite.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/vnc_lite.html b/vnc_lite.html index 2398bea2..898187a8 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -55,6 +55,11 @@ cursor: pointer; } + #screen { + flex: 1; /* fill remaining space */ + overflow: hidden; + } + @@ -172,7 +177,7 @@ url += '/' + path; // Creating a new RFB object will start a new connection - rfb = new RFB(document.body, url, + rfb = new RFB(document.getElementById('screen'), url, { credentials: { password: password } }); // Add listeners to important events from the RFB module @@ -192,5 +197,8 @@
Loading
Send CtrlAltDel
+
+ +
From e20f0ee9b6b6c44b763a7a05bcbd6de081c8f8c7 Mon Sep 17 00:00:00 2001 From: Samuel Mannehed Date: Tue, 28 Aug 2018 10:34:00 +0200 Subject: [PATCH 17/17] Limit line length to 80 in vnc_lite --- vnc_lite.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/vnc_lite.html b/vnc_lite.html index 898187a8..dd1c4d88 100644 --- a/vnc_lite.html +++ b/vnc_lite.html @@ -19,8 +19,8 @@ - +