~pistos/remoteku

911237cbf55bc198f5ab3d76677f32a315e15007 — Pistos 1 year, 5 months ago e1fa162
Add click map to remote control image
1 files changed, 31 insertions(+), 0 deletions(-)

M frontend/src/views/Home.vue
M frontend/src/views/Home.vue => frontend/src/views/Home.vue +31 -0
@@ 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>