add access to grid.local device list from inside kiri

js/kiri.js

@@ -2092,17 +2092,13 @@ self.kiri.license = exports.LICENSE;
     }
 
     function modalShowing() {
-        var showing = false;
-        ["modal","catalog","devices","tools"].forEach(function(dialog) {
-            var state = UI[dialog].style.display
-            showing = showing || state !== 'none';
-        });
+        var showing = $('modal').style.display !== 'none';
         return showing || UC.isPopped();
     }
 
     function showModal(which) {
         UI.modal.style.display = 'block';
-        ["print","help"].forEach(function(modal) {
+        ["print","help","local"].forEach(function(modal) {
             UI[modal].style.display = (modal === which ? 'block' : 'none');
         });
     }
@@ -2267,6 +2263,37 @@ self.kiri.license = exports.LICENSE;
         });
     }
 
+    function showLocal() {
+        $('local-close').onclick = hideModal;
+        showModal('local');
+        fetch("/api/grid_local")
+            .then(r => r.json())
+            .then(j => {
+                let bind = [];
+                let html = ['<table>'];
+                html.push(`<thead><tr><th>device</th><th>type</th><th>status</th><th></th></tr></thead>`);
+                html.push(`<tbody>`);
+                for (let k in j) {
+                    let r = j[k].stat;
+                    bind.push({uuid: r.device.uuid, host: r.device.addr[0], post: r.device.port});
+                    html.push(`<tr>`);
+                    html.push(`<td>${r.device.name}</td>`);
+                    html.push(`<td>${r.device.mode}</td>`);
+                    html.push(`<td>${r.state}</td>`);
+                    html.push(`<td><button id="${r.device.uuid}">admin</button></td>`);
+                    html.push(`</tr>`);
+                }
+                html.push(`</tbody>`);
+                html.push(`</table>`);
+                $('local-dev').innerHTML = html.join('');
+                bind.forEach(rec => {
+                    $(rec.uuid).onclick = () => {
+                        window.open(`http://${rec.host}:${rec.port||4080}/`);
+                    };
+                });
+            });
+    }
+
     function takeFocus(el) {
         DOC.activeElement.blur();
         el = [ el || DOC.body, UI.ctrlLeft, UI.container, UI.assets, UI.control, UI.modeFDM, UI.reverseZoom, UI.viewModelOpacity, DOC.body ];
@@ -2412,6 +2439,7 @@ self.kiri.license = exports.LICENSE;
             control: control,
             modal: $('modal'),
             print: $('print'),
+            local: $('local'),
             help: $('help'),
 
             alert: {
@@ -2514,7 +2542,10 @@ self.kiri.license = exports.LICENSE;
                     UC.newButton("Devices", showDevices, {modes:FDM_CAM})
                 ],[
                     UI.setupTools =
-                    UC.newButton('Tools',   showTools, {modes:CAM}),
+                    UC.newButton("Tools",   showTools, {modes:CAM})
+                ],[
+                    UI.localButton =
+                    UC.newButton("Local",   showLocal, {modes:FDM_CAM})
                 ],[
                     UI.helpButton =
                     UC.newButton("Help",    showHelp)
@@ -2748,6 +2779,24 @@ self.kiri.license = exports.LICENSE;
             showSlices();
         }
 
+        function inputHasFocus() {
+            var active = DOC.activeElement;
+            return active && (active.nodeName === "INPUT" || active.nodeName === "TEXTAREA");
+        }
+
+        function textAreaHasFocus() {
+            var active = DOC.activeElement;
+            return active && active.nodeName === "TEXTAREA";
+        }
+
+        function inputSize() {
+            return parseInt(DOC.activeElement.size);
+        }
+
+        function cca(c) {
+            return c.charCodeAt(0);
+        }
+
         function keyUpHandler(evt) {
             switch (evt.keyCode) {
                 // escape
@@ -2767,20 +2816,6 @@ self.kiri.license = exports.LICENSE;
             return false;
         }
 
-        function inputHasFocus() {
-            var active = DOC.activeElement;
-            return active && (active.nodeName === "INPUT" || active.nodeName === "TEXTAREA");
-        }
-
-        function textAreaHasFocus() {
-            var active = DOC.activeElement;
-            return active && active.nodeName === "TEXTAREA";
-        }
-
-        function inputSize() {
-            return parseInt(DOC.activeElement.size);
-        }
-
         function keyDownHandler(evt) {
             if (modalShowing()) return false;
             var move = evt.altKey ? 5 : 0,
@@ -2852,10 +2887,6 @@ self.kiri.license = exports.LICENSE;
             }
         }
 
-        function cca(c) {
-            return c.charCodeAt(0);
-        }
-
         function keyHandler(evt) {
             var handled = true,
                 style, sel, i, m, bb,
@@ -2949,6 +2980,9 @@ self.kiri.license = exports.LICENSE;
                 case cca('o'): // tools
                     showTools();
                     break;
+                case cca('c'): // local devices
+                    showLocal();
+                    break;
                 case cca('v'): // toggle single slice view mode
                     UI.layerRange.checked = !UI.layerRange.checked;
                     showSlices();

web/kiri/help-kiri.html

@@ -1,4 +1,4 @@
-<button id="help-close">X</button>
+<button id="help-close" class="modal-x">X</button>
 
 <center><b>Quick Start</b></center>
 

web/kiri/index.html

@@ -44,6 +44,13 @@
         <div id="help"></div>
         <!-- changeable print dialog -->
         <div id="print"></div>
+        <!-- local devices dialog -->
+        <div id="local" class="dialog">
+            <button id="local-close" class="modal-x">X</button>
+            <center><b><u>Grid.Local Devices</u></b></center>
+            <br>
+            <div id="local-dev" class="flow-col"></div>
+        </div>
         <!-- hidden file input loader -->
         <input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
     </div>
@@ -97,7 +104,7 @@
     </div>
     <!-- CAM tools dialog -->
     <div id="tools" class="dialog">
-        <div id="tools-body" class="flow-col">
+            <div id="tools-body" class="flow-col">
             <div id="tool-labels" class="flow-row">
                 <label>tools</label>
                 <label>details</label>

web/kiri/output-gcode.html

@@ -1,4 +1,4 @@
-<button id="print-close">X</button>
+<button id="print-close" class="modal-x">X</button>
 
 <span id="print-title">output options</span>
 

web/kiri/output-laser.html

@@ -1,4 +1,4 @@
-<button id="print-close">X</button>
+<button id="print-close" class="modal-x">X</button>
 
 <span>output options</span>
 

web/kiri/style.css

@@ -120,6 +120,43 @@ select {
     display: none;
 }
 
+.modal-x {
+    position: absolute;
+    z-index: 200;
+    right: 3px;
+    top: 3px;
+}
+
+/** LOCAL DIALOG */
+
+#local {
+    position: fixed;
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+    text-align: center;
+    top: 50px;
+    left: 50%;
+    color: black;
+    border: 10px solid #ddd;
+    border-radius: 10px;
+    background-color: rgba(255,255,255,0.9);
+    padding: 10px;
+}
+#local-dev table {
+    border-color: separate;
+    border-spacing: 0;
+}
+#local-dev td,th {
+    padding: 5px !important;
+}
+#local-dev thead th {
+    width: 100%;
+    border-bottom: 1px solid #888;
+}
+#local-dev tbody tr:hover {
+    background-color: #eee;
+}
+
 /** PRINT DIALOG */
 
 #print {
@@ -138,12 +175,6 @@ select {
 #print button {
     font-weight: bold;
 }
-#print-close {
-    position: absolute;
-    z-index: 200;
-    right: 3px;
-    top: 3px;
-}
 #print > div {
     border: 1px solid #aaa;
     border-radius: 3px;
@@ -254,12 +285,6 @@ select {
     background-color: rgba(255,255,255,0.9);
     padding: 10px;
 }
-#help-close {
-    position: absolute;
-    z-index: 200;
-    right: 3px;
-    top: 3px;
-}
 #help a {
     color: #68d;
 }