diff options
Diffstat (limited to 'resources/index.html')
| -rw-r--r-- | resources/index.html | 181 |
1 files changed, 171 insertions, 10 deletions
diff --git a/resources/index.html b/resources/index.html index e33ac9a..cbf0a75 100644 --- a/resources/index.html +++ b/resources/index.html @@ -2,11 +2,12 @@ <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> - <title>vlc</title> + <link rel="manifest" href="ir.webmanifest"> + <link rel="icon" href="ir.png"> + <title>IR</title> <script> "use strict" - - function vlcCall(method,path,args) { + function call(method,path,args) { args ||= {}; let url=new URL(path,location.href); for (let a in args) { @@ -19,11 +20,15 @@ } function vlcCommand(command,args) { - vlcCall('post',command,args); + call('post',`vlc/${command}`,args); } + function irCommand(thing,arg) { + call('post',`ir/${thing}/${arg}`); + } + async function updateView() { - const status = (await (await vlcCall('get','status')).json()).status; + const status = (await (await call('get','vlc/status')).json()).status; const currentPos = document.querySelector('#current-pos'); if (status.state != 'playing') { @@ -47,12 +52,168 @@ } }) </script> + <style> + body { font-size: 12vw } + * { font-size: inherit } + + div.thing { + padding: 0.2em 0.1em 0.2em 0.1em; + margin-top: 0.5em; + margin-bottom: 1em; + border: solid 0.05em black; + border-radius: 0.5em; + position: relative; + } + div.thing label { + font-size: 0.8em; + line-height: 0.5em; + position: absolute; + top: -0.5em; + left: 1em; + background-color: white; + } + div.thing table { + width: 100%; + table-layout: fixed; + } + td button { + border-radius: 0.5em; + width: calc(100% - 0.2em); + margin: 0.1em; + } + + .power { color: white } + .power.on { background-color: green } + .power.off { background-color: red } + + .volume { background-color: lightblue } + .input { background-color: darkorange } + .control { background-color: black; color: white; filter: grayscale(100%) } + .bd-red { background-color: red } + .bd-yellow { background-color: yellow } + .bd-blue { background-color: blue; color: white } + </style> </head> <body> - <button onclick="vlcCommand('play')">play</button> - <button onclick="vlcCommand('pause')">pause</button> - <button onclick="vlcCommand('stop')">stop</button> - <button onclick="updateView()">update</button> - <input type="range" id="current-pos"> + <div class="thing"> + <label>Vlc</label> + <table> + <tr> + <td><button onclick="irCommand('start','hdmi3')" class="power on">start</button></td> + <td><button onclick="irCommand('stop','hdmi')" class="power off">stop</button></td> + </tr> + </table> + <details> + <summary>controls</summary> + <button onclick="vlcCommand('play')">play</button> + <button onclick="vlcCommand('pause')">pause</button> + <button onclick="vlcCommand('stop')">stop</button> + <button onclick="updateView()">update</button> + <input type="range" id="current-pos"> + </details> + </div> + <div class="thing"> + <label>Laptop</label> + <table> + <tr> + <td><button onclick="irCommand('start','hdmi1')" class="power on">start</button></td> + <td><button onclick="irCommand('stop','hdmi')" class="power off">stop</button></td> + </tr> + </table> + </div> + <div class="thing"> + <label>Bluray</label> + <table> + <tr> + <td><button onclick="irCommand('start','bluray')" class="power on">start</button></td> + <td><button onclick="irCommand('stop','bluray')" class="power off">stop</button></td> + </tr> + </table> + <details> + <summary>controls</summary> + <table> + <tr> + <td><button onclick="irCommand('bluray','ejectcd')" class="input">⏏</button></td> + <td> </td> + <td><button onclick="irCommand('bluray','power')" class="power on">ON</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','yellow')" class="bd-yellow">a</button></td> + <td><button onclick="irCommand('bluray','blue')" class="bd-blue">b</button></td> + <td><button onclick="irCommand('bluray','red')" class="bd-red">c</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','menu')" class="control">🔝</button></td> + <td><button onclick="irCommand('bluray','up')" class="control">↑</button></td> + <td><button onclick="irCommand('bluray','context_menu')" class="control">⎙</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','left')" class="control">←</button></td> + <td><button onclick="irCommand('bluray','ok')" class="control">ok</button></td> + <td><button onclick="irCommand('bluray','right')" class="control">→</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','back')" class="control">🔙</button></td> + <td><button onclick="irCommand('bluray','down')" class="control">↓</button></td> + <td><button onclick="irCommand('bluray','option')" class="control">opt</button></td> + </tr> + <tr> + <td colspan="3"><button onclick="irCommand('bluray','home')" class="control">home</button></td> + </tr> + + <tr> + <td><button onclick="irCommand('bluray','previous')" class="control">⏪</button></td> + <td><button onclick="irCommand('bluray','play')" class="control">▶</button></td> + <td><button onclick="irCommand('bluray','next')" class="control">⏩</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','review')" class="control">⏮</button></td> + <td><button onclick="irCommand('bluray','pause')" class="control">⏸</button></td> + <td><button onclick="irCommand('bluray','fastforward')" class="control">⏭</button></td> + </tr> + <tr> + <td><button onclick="irCommand('bluray','subtitle')" class="control">sub</button></td> + <td><button onclick="irCommand('bluray','stop')" class="control">⏹</button></td> + <td><button onclick="irCommand('bluray','audio')" class="control">aud</button></td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><button onclick="irCommand('bluray','displaytoggle')" class="control">disp</button></td> + </tr> + </table> + </details> + </div> + <div class="thing"> + <label>Amp</label> + <table> + <tr> + <td><button onclick="irCommand('amplifier','power')" class="power on">ON</button></td> + <td><button onclick="irCommand('amplifier','power')" class="power off">OFF</button></td> + <td><button onclick="irCommand('amplifier','volumeup')" class="volume">↑</button></td> + </tr> + <tr> + <td> </td> + <td> </td> + <td><button onclick="irCommand('amplifier','volumedown')" class="volume">↓</button></td> + </tr> + <tr> + <td><button onclick="irCommand('amplifier','hdmi1')" class="input">Lap</button></td> + <td><button onclick="irCommand('amplifier','hdmi2')" class="input">BD</button></td> + <td><button onclick="irCommand('amplifier','hdmi3')" class="input">NAS</button></td> + </tr> + </table> + </div> + + <div class="thing"> + <label>Projector</label> + <table> + <tr> + <td><button onclick="irCommand('projector','power')" class="power on">ON</button></td> + <td><button onclick="irCommand('projector','suspend')" class="power off">OFF</button></td> + </tr> + </table> + </div> + </body> </html> |