Web UI improvements, map fix.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meshcentral",
-  "version": "0.2.0-k",
+  "version": "0.2.0-m",
   "keywords": [
     "Remote Management",
     "Intel AMT",

views/default.handlebars

@@ -397,10 +397,10 @@
                             </td>
                         </tr>
                         <tr id=deskarea3>
-                            <td id=deskarea3x style=background:black;text-align:center;height:400px;position:relative>
+                            <td id=deskarea3x style="background:black;text-align:center;position:relative;overflow:hidden">
-                                <div id=DeskFocus style="color:transparent;border:3px dotted rgba(255,0,0,.2);position:absolute;border-radius:5px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></div>
+                                <div id=DeskFocus style="overflow:hidden;color:transparent;border:3px dotted rgba(255,0,0,.2);position:absolute;border-radius:5px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></div>
-                                <div id=DeskParent>
+                                <div id=DeskParent style="overflow:hidden">
-                                    <canvas id=Desk width=640 height=200 style="width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event) onmousewheel=dmousewheel(event)></canvas>
+                                    <canvas id=Desk width=640 height=480 style="overflow:hidden;width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event) onmousewheel=dmousewheel(event)></canvas>
                                 </div>
                                 <div id=DeskTools style="position:absolute;width:400px;height:100%;background-color:gray;top:0;right:0;border-left:2px solid lightgray;display:none">
                                     <a id=DeskToolsRefreshButton style="float:right;padding:3px;cursor:pointer" onclick="refreshDeskTools()">Refresh</a>
@@ -946,6 +946,7 @@
                 QV('page_leftbar', true);
             }
             drawDeviceTimeline();
+            deskAdjust();
             QV('body', true);
         }
 
@@ -1777,13 +1778,13 @@
                                 multiDesktop[id] = desktop;
                                 desktop = desktopNode = currentNode = null;
                                 // Setup a replacement desktop
-                                QH('DeskParent', '<canvas id="Desk" width="640" height="200" style="width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></canvas>');
+                                QH('DeskParent', '<canvas id="Desk" width="640" height="480" style="width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></canvas>');
                             } else {
                                 // This is a new device, create a canvas for it.
                                 var c = document.createElement('canvas');
                                 c.setAttribute('id', 'kvmid_' + shortid);
                                 c.setAttribute('width', 640);
-                                c.setAttribute('height', 200);
+                                c.setAttribute('height', 480);
                                 c.setAttribute('oncontextmenu', 'return false');
                                 c.setAttribute('style', 'background-color:black;width:' + vsize.x + 'px;height:' + vsize.y + 'px');
                                 c.setAttribute('onclick', 'toggleKvmDevice(\'' + id + '\')');
@@ -1797,6 +1798,7 @@
                         // If a device is no longer viewed, disconnect it.
                         if (multiDesktop[i].xxdelete == true) { multiDesktop[i].Stop(); delete multiDesktop[i]; }
                     }
+                    deskAdjust();
                 } else {
                     disconnectAllKvmFunction();
                     Q('autoConnectDesktopCheckbox').checked = false;
@@ -2611,7 +2613,7 @@
             }
             map_cm_nodemenu_items.forEach(function (item){
                 if (item.text == 'Zoom-in to extent' || item.text == 'Zoom-out to extent') { item.data = feature; }
-                else { item.data = feature.getId(); }
+                else { if (item != "-") { item.data = feature.getId(); } }
             });
             xxmap.contextmenu.extend(map_cm_nodemenu_items);
         }
@@ -3464,7 +3466,7 @@
                     delete multiDesktop[currentNode._id];
                 } else {
                     // Device is not already connected, just setup a blank canvas
-                    QH('DeskParent', '<canvas id=Desk width=640 height=200 style="width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></canvas>');
+                    QH('DeskParent', '<canvas id=Desk width=640 height=480 style="width:100%;-ms-touch-action:none;margin-left:0px" oncontextmenu="return false" onmousedown=dmousedown(event) onmouseup=dmouseup(event) onmousemove=dmousemove(event)></canvas>');
                     desktopNode = currentNode;
                 }
                 // Setup the mouse wheel
@@ -3473,6 +3475,7 @@
             }
             desktopNode = currentNode;
             updateDesktopButtons();
+            deskAdjust();
 
             // On some browsers like IE, we can't save screen shots. Hide the scheenshot/capture buttons.
             if (!Q('Desk')['toBlob']) { QV('deskSaveBtn', false); }
@@ -3653,6 +3656,7 @@
                 toggleFullScreen();
             }
             deskAdjust();
+            deskAdjust();
         }
 
         function deskToggleFocus() {
@@ -3679,10 +3683,11 @@
                 QS('Desk')['margin-top'] = x + 'px';
                 QS('Desk')['margin-bottom'] = x + 'px';
             } else {
+                var mw = 9999, mh = (Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - (webPageFullScreen?276:290));
+                if (desktop) { mw = (desktop.m.width / desktop.m.height) * mh; }
                 document.documentElement.style.overflow = 'auto';
-                QS('deskarea3x').height = (desktop)?'40px':'400px';
+                QS('Desk')['max-height'] = mh + 'px';
-                QS('Desk')['max-height'] = null;
+                QS('Desk')['max-width'] = mw + 'px';
-                QS('Desk')['max-width'] = null;
                 QS('Desk')['margin-top'] = '0';
                 QS('Desk')['margin-bottom'] = '0';
             }
@@ -5874,7 +5879,7 @@
             if (((b & 8) || x) && f) f(x, t);
         }
 
-        function center() { QS('dialog').left = ((((getDocWidth() - 400) / 2)) + "px"); deskAdjust(); drawDeviceTimeline(); }
+        function center() { QS('dialog').left = ((((getDocWidth() - 400) / 2)) + "px"); deskAdjust(); deskAdjust(); drawDeviceTimeline(); }
         function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
         function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
         function getDocWidth() { if (window.innerWidth) return window.innerWidth; if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientWidth != 0) return document.documentElement.clientWidth; return document.getElementsByTagName('body')[0].clientWidth; }

views/login.handlebars

@@ -6,7 +6,81 @@
     <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="format-detection" content="telephone=no" />
-    <link type="text/css" href="styles/style.css" media="screen" rel="stylesheet" title="CSS" />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            color: black;
+            font-size: 13px;
+            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
+            background-color: #d3d9d6;
+        }
+
+        #container {
+            background-color: #fff;
+            margin: 0 auto;
+            border-top: 0;
+            border-right: 1px solid #b7b7b7;
+            border-bottom: 0;
+            border-left: 1px solid #b7b7b7;
+            padding: 0;
+        }
+
+        #masthead {
+            width: auto;
+            margin: 0;
+            padding: 0;
+            overflow: auto;
+            text-align: right;
+            background-color: #036;
+        }
+
+        #column_l {
+            position: relative;
+            float: left;
+            margin: 0;
+            padding: 0 15px;
+            background-color: #fff;
+        }
+
+        #footer {
+            clear: both;
+            overflow: auto;
+            width: 100%;
+            text-align: center;
+            background-color: #113962;
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        .style3 {
+            text-align: center;
+            color: white;
+            background-color: #808080;
+            font-weight: bold;
+        }
+
+        #footer {
+            clear: both;
+            overflow: auto;
+            width: 100%;
+            text-align: center;
+            background-color: #113962;
+            padding-top: 5px;
+            padding-bottom: 5px;
+        }
+
+        #footer a {
+            color: #fff;
+            text-decoration: underline;
+        }
+
+            #footer a:hover {
+                color: #fff;
+                text-decoration: none;
+            }
+    </style>
     <script type="text/javascript" src="scripts/common-0.0.1.js"></script>
     <title>MeshCentral - Login</title>
 </head>
@@ -21,16 +95,19 @@
                 <strong><font style="font-size:14px;font-family:Arial,Helvetica,sans-serif">{{{title2}}}</font></strong>
             </div>
         </div>
-        <div id=page_content style="max-height:calc(100vh-138px)">
+        <div id=page_content style="max-height:calc(100vh-108px)">
+            <div id=topbar class="noselect style3" style="height:24px;position:relative">
+                <div title="Toggle full width" style="cursor:pointer;color:white;position:absolute;top:3px;right:6px" onclick="toggleFullScreen(1)">&harr;</div>
+            </div>
             <div id=column_l>
                 <h1>Welcome</h1>
                 <p>Connect to your home or office devices from anywhere in the world using MeshCentral, the remote monitoring and management web site. You will need to download and install a special management agent on your computers. Once installed, each mesh enabled computer will show up in the &quot;My Devices&quot; section of this web site and you will be able to monitor them, power them on and off and take control of them.</p>
-                <table style=width:100%>
+                <table id="centralTable" style=width:100%>
                     <tr>
-                        <td style=width:500px valign=top>
+                        <td id="welcomeimage" align="center">
-                            <img alt="" height=310 src=images/mainwelcome.png width=359 style="margin-left:70px" />
+                            <img alt="" height=310 src=images/mainwelcome.png width=359 />
                         </td>
-                        <td>
+                        <td align="center">
                             <div id=loginpanel style="background-color: #979797;border-radius:16px;width:300px;padding:16px;text-align:center;display:none">
                                 <form action="login" method=post>
                                     <div id=message1>
@@ -173,6 +250,10 @@
         var newAccountPass = parseInt('{{{newAccountPass}}}');
         var emailCheck = ('{{{emailcheck}}}' == 'true');
         var features = parseInt('{{{features}}}');
+        var webPageFullScreen = getstore('webPageFullScreen', true);
+        if (webPageFullScreen == 'false') { webPageFullScreen = false; }
+        if (webPageFullScreen == 'true') { webPageFullScreen = true; }
+        toggleFullScreen();
 
         function startup() {
             if ((features & 32) == 0) {
@@ -316,13 +397,58 @@
             if (((b & 8) || x) && f) f(x, t);
         }
 
-        function center() { QS('dialog').left = ((((getDocWidth() - 400) / 2)) + "px"); }
+        // Toggle the web page to full screen
+        function toggleFullScreen(toggle) {
+            if (toggle === 1) { webPageFullScreen = !webPageFullScreen; putstore('webPageFullScreen', webPageFullScreen); }
+            if (webPageFullScreen == false) {
+                QS('container').width = '960px';
+                QS('container')["min-width"] = '960px';
+                QS('container')['border-right'] = '1px solid #b7b7b7';
+                QS('container')['border-left'] = '1px solid #b7b7b7';
+                QS('container')['overflow'] = 'hidden';
+                QS('column_l').height = '';
+                QS('column_l').width = '930px';
+                QS('column_l')["overflow-y"] = '';
+                QS('column_l')["max-height"] = 'calc(100vh - 111px)';
+                QS('column_l')["min-width"] = '';
+                QS('masthead')["width"] = '960px';
+            } else {
+                QS('container').width = '100%';
+                QS('container')['min-width'] = '';
+                QS('container')['border-right'] = '0';
+                QS('container')['border-left'] = '0';
+                QS('container')['overflow'] = 'hidden';
+                QS('column_l').height = 'calc(100vh - 135px)';
+                QS('column_l').width = '';
+                QS('column_l')["overflow-y"] = 'auto';
+                QS('column_l')["max-height"] = 'calc(100vh - 111px)';
+                QS('column_l')["min-width"] = '';
+                QS('masthead')["width"] = '100%';
+            }
+            QV('body', true);
+            center();
+        }
+
+        function center() {
+            var w = getDocWidth();
+            QS('dialog').left = ((((w - 400) / 2)) + "px");
+            QV('welcomeimage', (webPageFullScreen == false) || (w > 800));
+            if (webPageFullScreen == false) {
+                QS('centralTable')['margin-top'] = '';
+            } else {
+                var h = (Q('column_l').clientHeight / 2) - 250;
+                if (h < 0) h = 0;
+                QS('centralTable')['margin-top'] = h + 'px';
+            }
+        }
         function messagebox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t, 1); }
         function statusbox(t, m) { QH('id_dialogMessage', m); setDialogMode(1, t); }
         function getDocWidth() { if (window.innerWidth) return window.innerWidth; if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientWidth != 0) return document.documentElement.clientWidth; return document.getElementsByTagName('body')[0].clientWidth; }
         function haltEvent(e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
         function haltReturn(e) { if (e.keyCode == 13) { haltEvent(e); } }
         function validateEmail(v) { var emailReg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; return emailReg.test(v); }
+        function putstore(name, val) { try { if (typeof (localStorage) === 'undefined') return; localStorage.setItem(name, val); } catch (e) { } }
+        function getstore(name, val) { try { if (typeof (localStorage) === 'undefined') return val; var v = localStorage.getItem(name); if ((v == null) || (v == null)) return val; return v; } catch (e) { return val; } }
 
     </script>
 </body>