add access to grid.local device list from inside kiri

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;
 }