Add Magic Remote directional navigation and OK activation

app/app.js

@@ -26,3 +26,5 @@ call('status',display);setInterval(function(){if(!pending.length)call('status',d
 document.getElementById('start').focus();
 
 document.getElementById('autostart').onclick=function(){var button=this;var enabled=button.getAttribute('aria-checked')!=='true';button.disabled=true;call('autostart',function(r){button.disabled=false;if(r.returnValue===false)document.getElementById('error').textContent=r.errorText;else call('status',display);},{enabled:enabled});};
+
+setupRemoteNavigation(['start','stop','refresh','autostart'].map(function(id){return document.getElementById(id);}),document,window);

app/appinfo.json

@@ -1 +1 @@
-{"id": "org.webosbrew.histogramhyperion", "version": "0.6.2", "vendor": "Local development", "type": "web", "main": "index.html", "title": "HyperDRM", "icon": "icon.png", "resolution": "1920x1080", "disableBackHistoryAPI": true, "largeIcon": "large-icon.png", "appDescription": "Ambient lighting for webOS and Hyperion", "sourceUrl": "https://gitea.adnau.de/matze19999/HyperDRM"}
+{"id": "org.webosbrew.histogramhyperion", "version": "0.6.3", "vendor": "Local development", "type": "web", "main": "index.html", "title": "HyperDRM", "icon": "icon.png", "resolution": "1920x1080", "disableBackHistoryAPI": true, "largeIcon": "large-icon.png", "appDescription": "Ambient lighting for webOS and Hyperion", "sourceUrl": "https://gitea.adnau.de/matze19999/HyperDRM"}

app/index.html

@@ -1,8 +1,8 @@
 <!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>HyperDRM</title>
 <style>body{background:#101827;color:#f1f5ff;font:28px sans-serif;margin:70px;max-width:1400px}h1{font-size:52px;display:flex;align-items:center;gap:24px}h1 img{border-radius:20px}button{font:inherit;padding:20px 32px;margin:12px 12px 12px 0;background:#223654;color:white;border:2px solid #739be0;border-radius:12px}button:focus{outline:5px solid #66ddff}#regions{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:64px;height:64px;border:1px solid #abc}p{line-height:1.5}#error{color:#ffbc99}small{color:#c0cbe0}</style>
 <h1><img src="logo.png" alt="" width="104" height="104">HyperDRM</h1><p>Ambient lighting for webOS and Hyperion.</p><p id="status">Checking service &hellip;</p><p id="error" role="alert"></p>
-<button id="start">Start</button><button id="stop">Stop</button><button id="refresh">Refresh status</button>
-<button id="autostart" role="switch" aria-checked="false">Autostart: Off</button><p><small>Starts the service when the TV boots. Stop ends only the current session.</small></p>
+<div role="group" aria-label="Service controls"><button id="start">Start</button><button id="stop">Stop</button><button id="refresh">Refresh status</button>
+<button id="autostart" role="switch" aria-checked="false">Autostart: Off</button></div><p><small>Use the arrow buttons to select a control and OK to activate it.</small></p><p><small>Starts the service when the TV boots. Stop ends only the current session.</small></p>
 <p><small>127.0.0.1:19444 &middot; Priority 149 &middot; 10 updates per second</small></p>
 <div id="regions" aria-label="Histogram colors"></div><p><small>The Hyperion layout determines the number and positions of LEDs. Colors come from 16 LG histogram regions with interpolated edge colors. Restart the service after changing the LED layout.</small></p>
-<script src="app.js"></script></html>
+<script src="remote.js"></script><script src="app.js"></script></html>

app/remote.js

@@ -0,0 +1,30 @@
+/* Directional control for webOS remotes and standard keyboards. */
+function setupRemoteNavigation(buttons, doc, win) {
+ var lastFocused=buttons[0], enterDown=false;
+ buttons.forEach(function(button){
+  button.addEventListener('focus',function(){lastFocused=button;});
+  button.addEventListener('mouseenter',function(){if(!button.disabled)button.focus();});
+ });
+ doc.addEventListener('keydown',function(event){
+  var code=event.keyCode||event.which;
+  var direction=event.key==='ArrowLeft'||event.key==='ArrowUp'||code===37||code===38?-1:
+   event.key==='ArrowRight'||event.key==='ArrowDown'||code===39||code===40?1:0;
+  var enter=event.key==='Enter'||code===13;
+  if(!direction&&!enter)return;
+  event.preventDefault();
+  var enabled=buttons.filter(function(button){return !button.disabled;});
+  if(!enabled.length)return;
+  var focused=doc.activeElement,index=enabled.indexOf(focused);
+  if(direction){
+   if(index<0){index=enabled.indexOf(lastFocused);if(index<0)index=0;enabled[index].focus();}
+   else enabled[(index+direction+enabled.length)%enabled.length].focus();
+  }else{
+   if(enterDown||event.repeat)return;
+   enterDown=true;
+   if(index<0){index=enabled.indexOf(lastFocused);enabled[index<0?0:index].focus();}
+   else focused.click();
+  }
+ });
+ doc.addEventListener('keyup',function(event){if(event.key==='Enter'||event.keyCode===13||event.which===13)enterDown=false;});
+ win.addEventListener('blur',function(){enterDown=false;});
+}