add device search

src/kiri/init.js

@@ -52,6 +52,7 @@
     let currentDevice = null,
         deviceURL = null,
         deviceTexture = null,
+        deviceFilter = null,
         deviceImage = null,
         selectedTool = null,
         editTools = null,
@@ -950,6 +951,10 @@
             }
             dedup[device] = device;
             let loc = isLocalDevice(device);
+            // if filter set, use
+            if (!loc && deviceFilter && device.toLowerCase().indexOf(deviceFilter) < 0) {
+                return;
+            }
             if (incr === 0) {
                 first = device;
             }
@@ -1399,6 +1404,10 @@
                 help:           $('acct-help'),
                 export:         $('acct-export')
             },
+            dev: {
+                search:         $('dev-search'),
+                filter:         $('dev-filter')
+            },
 
             fps:                $('fps'),
             load:               $('load-file'),
@@ -1950,6 +1959,30 @@
             if (!ev.buttons) API.event.emit('slider.unlabel');
         };
 
+        UI.dev.search.onclick = () => {
+            let style = UI.dev.filter.style;
+            if (style.display === 'flex') {
+                style.display = '';
+                deviceFilter = null;
+                updateDeviceList();
+            } else {
+                style.display = 'flex';
+                UI.dev.filter.focus();
+                deviceFilter = UI.dev.filter.value;
+                updateDeviceList();
+            }
+        };
+
+        UI.dev.filter.onkeyup = (ev) => {
+            deviceFilter = UI.dev.filter.value;
+            updateDeviceList();
+        };
+
+        UI.dev.filter.onclick = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+
         API.event.on('slider.unlabel', (values) => {
         });
 

web/kiri/index.css

@@ -676,6 +676,22 @@ th, tr, td, label {
 #mod-setup .header.sub {
     padding-top: 10px;
 }
+#dev-search {
+    position: absolute;
+    font-size: 10px;
+    right: 3px;
+}
+#dev-search:hover {
+    color: #00f;
+}
+#dev-filter {
+    transform: translateY(-7px);
+    text-align: center;
+    position: absolute;
+    display: none;
+    padding: 1px;
+    right: 150%;
+}
 #mod-setup .left {
     width: 180px;
     padding-right: 10px;

web/kiri/index.html

@@ -259,7 +259,13 @@
                                 <th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
                             </tr></table>
                         </div>
-                        <label class="header sub">standard devices</label>
+                        <div class="header sub f-col j-center">
+                            <label>standard devices</label>
+                            <div id="dev-search">
+                                <i class="fas fa-search"></i>
+                                <input id="dev-filter" />
+                            </div>
+                        </div>
                         <div class="f-col mh0 mh35 j-center a-stretch">
                             <div id="device-list" class="devlist f-col overy"></div>
                         </div>