Updates mesh agents, minor server fixes.

public/scripts/agent-desktop-0.0.2.js

@@ -160,7 +160,6 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
 
     obj.ProcessScreenMsg = function (width, height) {
         if (obj.debugmode > 0) { console.log("ScreenSize: " + width + " x " + height); }
-        console.log("ScreenSize: " + width + " x " + height);
         obj.Canvas.setTransform(1, 0, 0, 1, 0, 0);
         obj.rotation = 0;
         obj.FirstDraw = true;
@@ -183,7 +182,7 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
         if (str.length < 4) return;
         var cmdmsg = null, X = 0, Y = 0, command = ReadShort(str, 0), cmdsize = ReadShort(str, 2);
         if ((cmdsize != str.length) && (obj.debugmode > 0)) { console.log(cmdsize, str.length, cmdsize == str.length); }
-        if (command >= 18) { if (command == 65) { console.error(str); alert(str); } else { console.error("Invalid KVM command " + command + " of size " + cmdsize); console.log("Invalid KVM data", str.length, str, rstr2hex(str)); return; } }
+        if ((command >= 18) && (command != 65)) { console.error("Invalid KVM command " + command + " of size " + cmdsize); console.log("Invalid KVM data", str.length, str, rstr2hex(str)); return; }
         if (cmdsize > str.length) { console.error("KVM invalid command size", cmdsize, str.length); return; }
         //meshOnDebug("KVM Command: " + command + " Len:" + cmdsize);
 
@@ -250,13 +249,17 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
                 //obj.Debug("Got KVM Message: " + str.substring(4, cmdsize));
                 if (obj.onMessage != null) obj.onMessage(str.substring(4, cmdsize), obj);
                 break;
+            case 65: // Alert
+                console.error(str.substring(4));
+                alert(str.substring(4));
+                break;
         }
         return cmdsize;
     }
 
     // Keyboard and Mouse I/O.
     obj.MouseButton = { "NONE": 0x00, "LEFT": 0x02, "RIGHT": 0x08, "MIDDLE": 0x20 };
-    obj.KeyAction = { "NONE": 0, "DOWN": 1, "UP": 2, "SCROLL": 3, "EXUP": 4, "EXDOWN": 5 };
+    obj.KeyAction = { "NONE": 0, "DOWN": 1, "UP": 2, "SCROLL": 3, "EXUP": 4, "EXDOWN": 5, "DBLCLICK": 6 };
     obj.InputType = { "KEY": 1, "MOUSE": 2, "CTRLALTDEL": 10, "TOUCH": 15 };
     obj.Alternate = 0;
 
@@ -433,9 +436,19 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
                 }
 
                 var MouseMsg = "";
-                if (Action == obj.KeyAction.SCROLL) MouseMsg = String.fromCharCode(0x00, obj.InputType.MOUSE, 0x00, 0x0C, 0x00, ((Action == obj.KeyAction.DOWN) ? Button : ((Button * 2) & 0xFF)), ((X / 256) & 0xFF), (X & 0xFF), ((Y / 256) & 0xFF), (Y & 0xFF), ((Delta / 256) & 0xFF), (Delta & 0xFF));
-                else MouseMsg = String.fromCharCode(0x00, obj.InputType.MOUSE, 0x00, 0x0A, 0x00, ((Action == obj.KeyAction.DOWN) ? Button : ((Button * 2) & 0xFF)), ((X / 256) & 0xFF), (X & 0xFF), ((Y / 256) & 0xFF), (Y & 0xFF));
-                if (obj.Action == obj.KeyAction.NONE) { if (obj.Alternate == 0 || obj.ipad) { obj.send(MouseMsg); obj.Alternate = 1; } else { obj.Alternate = 0; } } else { obj.send(MouseMsg); }
+                if (Action == obj.KeyAction.DBLCLICK) {
+                    MouseMsg = String.fromCharCode(0x00, obj.InputType.MOUSE, 0x00, 0x0A, 0x00, 0x88, ((X / 256) & 0xFF), (X & 0xFF), ((Y / 256) & 0xFF), (Y & 0xFF));
+                } else if (Action == obj.KeyAction.SCROLL) {
+                    MouseMsg = String.fromCharCode(0x00, obj.InputType.MOUSE, 0x00, 0x0C, 0x00, 0x00, ((X / 256) & 0xFF), (X & 0xFF), ((Y / 256) & 0xFF), (Y & 0xFF), ((Delta / 256) & 0xFF), (Delta & 0xFF));
+                } else {
+                    MouseMsg = String.fromCharCode(0x00, obj.InputType.MOUSE, 0x00, 0x0A, 0x00, ((Action == obj.KeyAction.DOWN) ? Button : ((Button * 2) & 0xFF)), ((X / 256) & 0xFF), (X & 0xFF), ((Y / 256) & 0xFF), (Y & 0xFF));
+                }
+
+                if (obj.Action == obj.KeyAction.NONE) {
+                    if (obj.Alternate == 0 || obj.ipad) { obj.send(MouseMsg); obj.Alternate = 1; } else { obj.Alternate = 0; }
+                } else {
+                    obj.send(MouseMsg);
+                }
             }
         }
     }
@@ -463,6 +476,7 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
     obj.xxMouseMove = function (e) { if (obj.State == 3) obj.SendMouseMsg(obj.KeyAction.NONE, e); if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
     obj.xxMouseUp = function (e) { if (obj.State == 3) obj.SendMouseMsg(obj.KeyAction.UP, e); if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
     obj.xxMouseDown = function (e) { if (obj.State == 3) obj.SendMouseMsg(obj.KeyAction.DOWN, e); if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
+    obj.xxMouseDblClick = function (e) { if (obj.State == 3) obj.SendMouseMsg(obj.KeyAction.DBLCLICK, e); if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
     obj.xxDOMMouseScroll = function (e) { if (obj.State == 3) { obj.SendMouseMsg(obj.KeyAction.SCROLL, e); return false; } return true; }
     obj.xxMouseWheel = function (e) { if (obj.State == 3) { obj.SendMouseMsg(obj.KeyAction.SCROLL, e); return false; } return true; }
     obj.xxKeyUp = function (e) { if (obj.State == 3) { obj.SendKeyMsg(obj.KeyAction.UP, e); } if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
@@ -481,6 +495,7 @@ var CreateAgentRemoteDesktop = function (canvasid, scrolldiv) {
     obj.handleKeyDown = function (e) { if (obj.stopInput == true || desktop.State != 3) return false; return obj.xxKeyDown(e); }
 
     // Mouse handlers
+    obj.mousedblclick = function (e) { if (obj.stopInput == true) return false; return obj.xxMouseDblClick(e); }
     obj.mousedown = function (e) { if (obj.stopInput == true) return false; return obj.xxMouseDown(e); }
     obj.mouseup = function (e) { if (obj.stopInput == true) return false; return obj.xxMouseUp(e); }
     obj.mousemove = function (e) { if (obj.stopInput == true) return false; return obj.xxMouseMove(e); }

public/scripts/amt-desktop-0.0.2.js

@@ -773,6 +773,7 @@ var CreateAmtRemoteDesktop = function (divid, scrolldiv) {
     obj.haltEvent = function (e) { if (e.preventDefault) e.preventDefault(); if (e.stopPropagation) e.stopPropagation(); return false; }
 
     // RFB "PointerEvent" and mouse handlers
+    obj.mousedblclick = function (e) { }
     obj.mousedown = function (e) { obj.buttonmask |= (1 << e.button); return obj.mousemove(e); }
     obj.mouseup = function (e) { obj.buttonmask &= (0xFFFF - (1 << e.button)); return obj.mousemove(e); }
     obj.mousemove = function (e) {

public/styles/style-morecss.css

@@ -0,0 +1,745 @@
+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;
+    width: 960px;
+    min-width: 960px;
+    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;
+    width: 960px;
+}
+
+#column_l {
+    position: relative;
+    float: left;
+    width: 930px;
+    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;
+}
+
+#masthead img {
+    float: left;
+}
+
+#masthead p {
+    font-size: 11px;
+    color: #fff;
+    margin: 10px 10px 0;
+}
+
+#footer a {
+    color: #fff;
+    text-decoration: underline;
+}
+
+    #footer a:hover {
+        color: #fff;
+        text-decoration: none;
+    }
+
+a {
+    color: #036;
+    text-decoration: underline;
+}
+
+.i1 {
+    background: url(../images/icons50.png) 0px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.i2 {
+    background: url(../images/icons50.png) -50px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.i3 {
+    background: url(../images/icons50.png) -100px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.i4 {
+    background: url(../images/icons50.png) -150px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.i5 {
+    background: url(../images/icons50.png) -200px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.i6 {
+    background: url(../images/icons50.png) -250px 0px;
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+    border: none;
+}
+
+.j1 {
+    background: url(../images/icons16.png) 0px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.j2 {
+    background: url(../images/icons16.png) -16px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.j3 {
+    background: url(../images/icons16.png) -32px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.j4 {
+    background: url(../images/icons16.png) -48px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.j5 {
+    background: url(../images/icons16.png) -64px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.j6 {
+    background: url(../images/icons16.png) -80px 0px;
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+}
+
+.lbbutton {
+    width:74px;
+    height:74px;
+    border-radius:5px;
+    background-color:white;
+    margin-left:8px;
+    margin-top:8px;
+    position:relative;
+    cursor:pointer;
+    opacity:0.5;
+}
+
+.lbbutton:hover {
+    opacity:1;
+}
+
+.lbbuttonsel {
+    opacity:0.9;
+}
+
+.lbbuttonsel2 {
+    width:82px;
+    border-radius:5px 0px 0px 5px;
+    opacity:1;
+}
+
+.lb1 {
+    background: url(../images/leftbar-62.jpg) -0px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.lb2 {
+    background: url(../images/leftbar-62.jpg) -75px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.lb3 {
+    background: url(../images/leftbar-62.jpg) -150px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.lb4 {
+    background: url(../images/leftbar-62.jpg) -225px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.lb5 {
+    background: url(../images/leftbar-62.jpg) -294px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.lb6 {
+    background: url(../images/leftbar-62.jpg) -360px 0px;
+    height: 62px;
+    width: 62px;
+    cursor: pointer;
+    border: none;
+}
+
+.m0  { background : url(../images/images16.png)  -32px 0px; height : 16px; width : 16px; border:none; float:left }
+.m1  { background : url(../images/images16.png)  -16px 0px; height : 16px; width : 16px; border:none; float:left }
+.m2  { background : url(../images/images16.png)  -96px 0px; height : 16px; width : 16px; border:none; float:left }
+.m3  { background : url(../images/images16.png) -112px 0px; height : 16px; width : 16px; border:none; float:left }
+.si0 { background : url(../images/icons16.png)     0px 0px; height : 16px; width : 16px; border:none; float:left }
+.si1 { background : url(../images/icons16.png)   -16px 0px; height : 16px; width : 16px; border:none; float:left }
+.si2 { background : url(../images/icons16.png)   -32px 0px; height : 16px; width : 16px; border:none; float:left }
+.si3 { background : url(../images/icons16.png)   -48px 0px; height : 16px; width : 16px; border:none; float:left }
+.si4 { background : url(../images/icons16.png)   -64px 0px; height : 16px; width : 16px; border:none; float:left }
+
+.mi { background : url(../images/meshicon50.png) 0px 0px; height: 50px; width: 50px; cursor:pointer; border:none }
+
+#floatframe {
+    position: fixed;
+    top: 200px;
+    height: 300px;
+    z-index: 200;
+    display: none;
+}
+
+.style1 {
+    text-align: center;
+}
+
+.style2 {
+    text-align: center;
+    background-color: #808080;
+    font-weight: bold;
+}
+
+.style3 {
+    text-align: center;
+    color: white;
+    background-color: #808080;
+    font-weight: bold;
+}
+
+.style3x {
+    text-align: center;
+    color: white;
+    background-color: #808080;
+    font-weight: bold;
+}
+
+    .style3x:hover {
+        background-color: #606060;
+    }
+
+.style3sel {
+    text-align: center;
+    color: white;
+    background-color: #003366;
+    font-weight: bold;
+}
+
+.style4 {
+    color: white;
+    text-decoration: none;
+}
+
+.style5 {
+    text-align: center;
+    background-color: #808080;
+    font-weight: normal;
+}
+
+.style6 {
+    text-align: center;
+    background-color: #D3D9D6;
+}
+
+.style7 {
+    font-size: large;
+    background-color: #FFFFFF;
+}
+
+.style10 {
+    background-color: #C9C9C9;
+}
+
+.style11 {
+    font-size: large;
+    background-color: #C9C9C9;
+}
+
+.style14 {
+    text-align: left;
+    background-color: #D3D9D6;
+}
+
+.auto-style1 {
+    text-align: right;
+    background-color: #D3D9D6;
+}
+
+
+.fileIcon1 {
+    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAPb49Y2Sj9LT2f///yH5BAEAAAMALAAAAAAQABAAAAImnI+py+1vhJwyUYAzHTL4D3qdlJWaIFJqmKod607sDKIiDUP63hQAOw==);
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+    float: left;
+    margin-top: 1px;
+}
+
+.fileIcon2 {
+    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAM2xV/Xur+XPgP///yH5BAEAAAMALAAAAAAQABAAAAJD3ISZIGHWUGihznesYDYATFVM+D2hJ4lgN1olxALAtAlmPCJvuMmJd6PJckDYwicrHhTD5o7plJmg0Uc0asNMkphHAQA7);
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+    float: left;
+    margin-top: 1px;
+}
+
+.fileIcon3 {
+    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAPb19IGBgbq6uv///yH5BAEAAAMALAAAAAAQABAAAAIy3ISpxgcPH2ouQgFEw1YmxnUXKEaaEZZnVWZk66JwzKpvuwZzwOgwb/C1gIOA8Yg8DgoAOw==);
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+    float: left;
+    margin-top: 1px;
+}
+
+.fileIcon4 {
+    background: url(../images/meshicon16.png);
+    height: 16px;
+    width: 16px;
+    cursor: pointer;
+    border: none;
+    float: left;
+    margin-top: 1px;
+}
+
+.filelist {
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    cursor: default;
+    -khtml-user-drag: element;
+    background-color: white;
+    clear: both;
+}
+
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.fsize {
+    float: right;
+    text-align: right;
+    width: 180px;
+}
+
+.g1 {
+    background-position: 0% 0%;
+    width: 14px;
+    height: 100%;
+    float: left;
+    /* fallback (Opera) */
+    /* Mozilla: */
+    /* Chrome, Safari:*/
+    background-image: linear-gradient(to right, #ffffff 0%, #c9c9c9 100%);
+    background-color: #c9c9c9;
+    background-repeat: repeat;
+    background-attachment: scroll;
+}
+
+.g1s {
+    background-image: linear-gradient(to right, #ffffff 0%, #b9b9b9 100%);
+}
+
+.g2 {
+    background-position: 0% 0%;
+    width: 14px;
+    height: 100%;
+    float: right;
+    /* fallback (Opera) */
+    /* Mozilla: */
+    /* Chrome, Safari:*/
+    background-image: linear-gradient(to right, #c9c9c9 0%, #ffffff 100%);
+    background-color: #c9c9c9;
+    background-repeat: repeat;
+    background-attachment: scroll;
+}
+
+.g2s {
+    background-image: linear-gradient(to right, #b9b9b9 0%, #ffffff 100%);
+}
+
+.h1 {
+    background-position: 0% 0%;
+    width: 14px;
+    height: 100%;
+    /* fallback (Opera) */
+    /* Mozilla: */
+    /* Chrome, Safari:*/
+    background-image: linear-gradient(to right, #ffffff 0%, #d3d9d6 100%);
+    background-color: #d3d9d6;
+    background-repeat: repeat;
+    background-attachment: scroll;
+}
+
+.h2 {
+    background-position: 0% 0%;
+    width: 14px;
+    height: 100%;
+    /* fallback (Opera) */
+    /* Mozilla: */
+    /* Chrome, Safari:*/
+    background-image: linear-gradient(to right, #d3d9d6 0%, #ffffff 100%);
+    background-color: #d3d9d6;
+    background-repeat: repeat;
+    background-attachment: scroll;
+}
+
+.e1 {
+    font-size: large;
+    margin-top: 4px;
+    margin-bottom: 3px;
+    overflow: hidden;
+    word-wrap: hyphenate;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 200px
+}
+
+.e2 {
+    float: left;
+    height: 100%;
+}
+
+.f1 { background-color: #c9c9c9; }
+.f1s { background-color: #b9b9b9; }
+
+.bar {
+    font-size: large;
+    background-color: #C9C9C9;
+    height: 24px;
+    float: left;
+    margin-bottom: 2px;
+}
+
+.bar2 {
+    font-size: large;
+    height: 24px;
+    float: left;
+    margin-bottom: 2px;
+}
+
+.bar18 {
+    font-size: large;
+    background-color: #C9C9C9;
+    height: 18px;
+    float: left;
+    margin-bottom: 2px;
+}
+
+.bar182 {
+    font-size: large;
+    height: 18px;
+    float: left;
+    margin-bottom: 2px;
+}
+
+.devHeaderx {
+    color: lightgray;
+}
+
+.DevSt {
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-bottom-color: #DDDDDD;
+}
+
+.contextMenu {
+    background: #F9F9F9;
+    box-shadow: 0 0 12px rgba( 0, 0, 0, .3 );
+    border: 1px solid #ccc;
+    /*border-radius: 4px;*/
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    list-style: none;
+    margin: 0;
+    padding: 5px;
+    min-width: 100px;
+    max-width: 150px;
+    z-index: 500;
+}
+
+.cmtext {
+    color: #444;
+    display: inline-block;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    text-decoration: none;
+    width: 85%;
+    cursor: default;
+    overflow: hidden;
+    position: relative;
+}
+
+    .cmtext:hover {
+        color: #f9f9f9;
+        background: #444;
+    }
+
+.gray {
+    /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");*/ /* Firefox 10+, Firefox on Android */
+    filter: gray; /* IE6-9 */
+    -webkit-filter: grayscale(100%) opacity(60%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
+}
+
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.notifiyBox {
+    position: absolute;
+    z-index:1000;
+    top: 50px;
+    right: 26px;
+    width: 300px;
+    text-align: left;
+    background-color: #F0ECCD;
+    border: 4px solid #666;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    -webkit-box-shadow: 2px 2px 4px #888;
+    -moz-box-shadow: 2px 2px 4px #888;
+    box-shadow: 2px 2px 4px #888;
+    max-height:200px;
+}
+
+.notifiyBox:before {
+  content: ' ';
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: 5px;
+  top: -30px;
+  border: 15px solid;
+  border-color: transparent #666 #666 transparent;
+}
+
+.notifiyBox:after {
+  content: ' ';
+  position: absolute;
+  width: 0;
+  height: 0;
+  right: 7px;
+  top: -24px;
+  border: 12px solid;
+  border-color: transparent #F0ECCD #F0ECCD transparent;
+}
+
+.notification {
+    width:100%;
+    min-height:30px;
+}
+
+.notification:hover {
+    background-color: #EFE8B6;
+}
+
+.deskToolsBar {
+    padding:3px;
+}
+
+.deskToolsBar:hover {
+    background-color: #EFE8B6;
+}
+
+.userTableHeader {
+    border-bottom: 1pt solid lightgray;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.viewSelector {
+    width:32px;
+    height:32px;
+    background-color:#DDD;
+    border-radius:3px;
+    float:left;
+    margin-left:5px;
+    cursor: pointer;
+    opacity: 0.3;
+}
+
+.viewSelectorSel {
+    background-color:#BBB;
+    opacity: 0.8;
+}
+
+    .viewSelector:hover {
+        opacity: 0.5;
+        background-color:#AAA;
+    }
+
+
+.viewSelector1 {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -0px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.viewSelector2 {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -28px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.viewSelector3 {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -56px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.viewSelector4 {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -84px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.viewSelector5 {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -112px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.backButtonEx {
+    margin-left:2px;
+    margin-top:2px;
+    background: url(../images/views.png) -140px 0px;
+    height: 28px;
+    width: 28px;
+}
+
+.backButton {
+    width:32px;
+    height:32px;
+    background-color:#DDD;
+    border-radius:3px;
+    float:left;
+    margin-right:5px;
+    cursor: pointer;
+    opacity: 0.3;
+}
+    .backButton:hover {
+        opacity: 0.5;
+        background-color:#AAA;
+    }
+
+.hoverButton {
+    opacity: 0.5;
+}
+
+    .hoverButton:hover {
+        opacity: 1;
+    }
+
+
+.devgrid-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
+}
+
+.devgrid-container > div {
+    
+}

views/default.handlebars

@@ -736,7 +736,7 @@
                     </tr>
                 </table>
             </div>
-            <div id=dialog style="z-index:1000;background-color:#EEE;box-shadow:0px 0px 15px #666;font-family:Arial,Helvetica,sans-serif;border-radius:5px;position:fixed;top:160px;width:400px;display:none">
+            <div id=dialog style="z-index:1000;background-color:#EEE;box-shadow:0px 0px 15px #666;font-family:Arial,Helvetica,sans-serif;border-radius:5px;position:fixed;top:160px;width:400px;left:calc((100% / 2) - 200px);display:none">
                 <div style="width:100%;background-color:#003366;color:#FFF;border-radius:5px 5px 0 0">
                     <div id=id_dialogclose style=float:right;padding:3px;margin-right:3px;cursor:pointer onclick=setDialogMode()>&#x2716;</div>
                     <div id=id_dialogtitle style=padding:5px></div>
@@ -1525,11 +1525,7 @@
                                 if (message.event.node.icon) { node.icon = message.event.node.icon; }
 
                                 // Web page update
-                                //onSortSelectChange(true);
-                                //drawNotifications();
-                                //updateMapMarkers();
-                                masterUpdate(2 | 8 | 16);
-
+                                masterUpdate(2 | 4 | 8 | 16);
                                 refreshDevice(node._id);
 
                                 if ((currentNode == node) && (xxdialogMode != null) && (xxdialogTag == '@xxmap')) { p10showNodeLocationDialog(); }
@@ -1549,7 +1545,6 @@
 
                                 // Web page update
                                 masterUpdate(4 | 16);
-
                                 refreshDevice(node._id);
                             }
                             break;
@@ -1790,6 +1785,11 @@
                 if ((oldviewmode < 3) && (view == 3)) { multiDesktopFilter = checkedNodeids; }
                 else if ((oldviewmode == 3) && (view < 3)) { checkedNodeids = multiDesktopFilter; }
 
+                // Compute the width of the device view.
+                var totalDeviceViewWidth = Q('column_l').clientWidth - 60;
+                var deviceBoxWidth = Math.floor(totalDeviceViewWidth / 301);
+                deviceBoxWidth = 301 + Math.floor((totalDeviceViewWidth - (deviceBoxWidth * 301)) / deviceBoxWidth);
+
                 // Go thru the list of nodes and display them
                 for (var i in nodes) {
                     if (nodes[i].v == false) continue;
@@ -1839,10 +1839,7 @@
                     var nodestate = NodeStateStr(nodes[i]);
                     if ((!nodes[i].conn) || (nodes[i].conn == 0)) { icon += ' gray'; }
                     if (view == 1) {
-                        var realw = Q('xdevices').clientWidth - 30;
-                        var xw = Math.floor(realw / 301);
-                        xw = 301 + Math.floor((realw - (xw * 301)) / xw);
-                        r += '<div id=devs onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=display:inline-block;width:' + xw + 'px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 style=width:' + (xw - 100) + 'px title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div>';
+                        r += '<div id=devs onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=display:inline-block;width:' + deviceBoxWidth + 'px;height:50px;padding-top:1px;padding-bottom:1px><div style=width:22px;height:50%;float:left;padding-top:12px><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div><div style=height:100%;cursor:pointer onclick=gotoDevice(\'' + nodes[i]._id + '\')><div class="i' + icon + '" style=width:50px;float:left></div><div style=height:100%><div class=g1></div><div class=e2><div class=e1 style=width:' + (deviceBoxWidth - 100) + 'px title="' + title + '">' + name + '</div><div>' + nodestate + '</div></div><div class=g2></div></div></div></div>';
                     } else if (view == 2) {
                         r += '<tr><td><div id=devs class=bar18 onmouseover=devMouseHover(this,1) onmouseout=devMouseHover(this,0) style=height:18px;width:100%;font-size:medium>';
                         r += '<div style=width:22px;float:left;background-color:white><input class="' + nodes[i].meshid + ' DeviceCheckbox" onclick=p1updateInfo() value=devid_' + nodes[i]._id + ' type=checkbox></div>';
@@ -4232,7 +4229,20 @@
             desktop.m.SetDisplay(display);
         }
 
-        function dmousedown(e) { if (!xxdialogMode && desktop != null && Q('DeskControl').checked) if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mousedown(e); desktop.m.sendKeepAlive(); } else { desktop.m.mousedown(e); } }
+        // Double click detection. This is important for MacOS.
+        var dblClickDetectArgs = { t:0, x:0, y:0 };
+        function dblClickDetect(e) {
+            if (e.buttons != 1) return;
+            var t = Date.now();
+            if (((t - dblClickDetectArgs.t) < 250) && (Math.abs(e.clientX - dblClickDetectArgs.x) < 2) && (Math.abs(e.clientY - dblClickDetectArgs.y) < 2)) {
+                if (!xxdialogMode && desktop != null && Q('DeskControl').checked) { if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mousedblclick(e); desktop.m.sendKeepAlive(); } else { desktop.m.mousedblclick(e); } }
+            }
+            dblClickDetectArgs.t = t;
+            dblClickDetectArgs.x = e.clientX;
+            dblClickDetectArgs.y = e.clientY;
+        }
+
+        function dmousedown(e) { if (!xxdialogMode && desktop != null && Q('DeskControl').checked) { if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mousedown(e); desktop.m.sendKeepAlive(); } else { desktop.m.mousedown(e); } } dblClickDetect(e); }
         function dmouseup(e) { if (!xxdialogMode && desktop != null && Q('DeskControl').checked) if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mouseup(e); desktop.m.sendKeepAlive(); } else { desktop.m.mouseup(e); } }
         function dmousemove(e) { if (!xxdialogMode && desktop != null && Q('DeskControl').checked) { if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mousemove(e); desktop.m.sendKeepAlive(); } else { desktop.m.mousemove(e); } } }
         function dmousewheel(e) { if (!xxdialogMode && desktop != null && Q('DeskControl').checked) { if ((webRtcDesktop != null) && (webRtcDesktop.softdesktop != null)) { webRtcDesktop.softdesktop.m.mousewheel(e); desktop.m.sendKeepAlive(); } else { if (desktop.m.mousewheel) { desktop.m.mousewheel(e); } } haltEvent(e); return true; } return false; }
@@ -6509,14 +6519,12 @@
         }
 
         function center() {
-            QS('dialog').left = ((((getDocWidth() - 400) / 2)) + "px");
             if (xxcurrentView == 11) { deskAdjust(); } //deskAdjust(); }
             else if (xxcurrentView == 10) { masterUpdate(256); }
             else if (xxcurrentView == 1) { masterUpdate(4); }
         }
         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 goBack() {
             if (xxdialogMode) return;
@@ -6616,7 +6624,7 @@
         function getItem(x, y, z) { for (var i in x) { if (x[i][y] == z) return x[i]; } return null; }
         function guidToStr(g) { return g.substring(6, 8) + g.substring(4, 6) + g.substring(2, 4) + g.substring(0, 2) + "-" + g.substring(10, 12) + g.substring(8, 10) + "-" + g.substring(14, 16) + g.substring(12, 14) + "-" + g.substring(16, 20) + "-" + g.substring(20); }
         function getUrlVars() { var j, hash, vars = [], hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for (var i = 0; i < hashes.length; i++) { j = hashes[i].indexOf('='); if (j > 0) { vars[hashes[i].substring(0, j)] = hashes[i].substring(j + 1, hashes[i].length); } } return vars; }
-        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 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 addHtmlValue(t, v) { return '<div style=height:20px><div style=float:right;width:220px><b>' + v + '</b></div><div>' + t + '</div></div>'; }
         function addHtmlValue(t, v) { return '<table><td style=width:120px>' + t + '<td><b>' + v + '</b></table>'; }
         function addHtmlValue2(t, v) { return '<div><div style=display:inline-block;float:right>' + v + '</div><div style=display:inline-block>' + t + '</div></div>'; }