1 files changed, 31 insertions(+), 0 deletions(-)

M frontend/src/views/Home.vue

@@ 29,6 29,26 @@
     <button @click="apiPress('back')">back</button>
     <button @click="apiPress('home')">home</button>
   </div>
+  <div>
+    <img src="/roku-remote.png" alt="Roku remote" usemap="#rokumap"/>
+    <map name="rokumap">
+      <area shape="rect" coords="124,34,175,86" title="Power" @click="apiPress('power')"/>
+      <area shape="rect" coords="40,138,139,187" title="Back" @click="apiPress('back')"/>
+      <area shape="rect" coords="161,138,260,187" title="Home" @click="apiPress('home')"/>
+      <area shape="rect" coords="112,286,186,356" title="OK" @click="apiPress('select')"/>
+      <area shape="rect" coords="49,286,111,356" title="Left" @click="apiPress('left')"/>
+      <area shape="rect" coords="187,286,254,356" title="Right" @click="apiPress('right')"/>
+      <area shape="rect" coords="112,219,186,285" title="Up" @click="apiPress('up')"/>
+      <area shape="rect" coords="112,357,186,425" title="Down" @click="apiPress('down')"/>
+      <area shape="rect" coords="36,519,82,588" title="Reverse" @click="apiPress('reverse')"/>
+      <area shape="rect" coords="101,519,200,588" title="Play/Pause" @click="apiPress('play')"/>
+      <area shape="rect" coords="218,519,260,588" title="Forward" @click="apiPress('forward')"/>
+      <area shape="rect" coords="39,460,110,502" title="Replay" @click="apiPress('replay')"/>
+      <area shape="rect" coords="125,460,176,502" title="Search/Voice" @click="apiPress('search')"/>
+      <area shape="rect" coords="196,460,260,502" title="Info" @click="apiPress('info')"/>
+      <area shape="rect" coords="284,409,306,457" title="Mute" @click="apiPress('mute')"/>
+    </map>
+  </div>
 </div>
 </template>
 


@@ 70,3 90,14 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+img {
+  margin: 2rem;
+}
+map {
+  area {
+    cursor: pointer;
+  }
+}
+</style>