diff --git a/src/kiri/init.js b/src/kiri/init.js index 3b47b49b..acef6b84 100644 --- a/src/kiri/init.js +++ b/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) => { }); diff --git a/web/kiri/index.css b/web/kiri/index.css index 6da39e26..d47160b9 100644 --- a/web/kiri/index.css +++ b/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; diff --git a/web/kiri/index.html b/web/kiri/index.html index 8f91330e..1bd28760 100644 --- a/web/kiri/index.html +++ b/web/kiri/index.html @@ -259,7 +259,13 @@ - +
+ + +