add multimedia keys

webdata/fn.js

@@ -32,6 +32,13 @@ const POINTER_BUTTON_LEFT = 0;
 const POINTER_BUTTON_RIGHT = 1;
 const POINTER_BUTTON_MIDDLE = 2;
 
+const KEY_VOLUME_MUTE = 0;
+const KEY_VOLUME_DOWN = 1;
+const KEY_VOLUME_UP = 2;
+const KEY_MEDIA_PLAY_PAUSE = 3;
+const KEY_MEDIA_PREV_TRACK = 4;
+const KEY_MEDIA_NEXT_TRACK = 5;
+
 var ws;
 var pad;
 var padlabel;
@@ -310,11 +317,13 @@ window.addEventListener("load", function() {
     var closed = document.getElementById("closed");
     pad = document.getElementById("pad");
     padlabel = document.getElementById("padlabel");
+    var keys = document.getElementById("keys");
     var keyboard = document.getElementById("keyboard");
     var fullscreenbutton = document.getElementById("fullscreenbutton");
     var text = document.getElementById("text");
     closed.style.display = "none";
     pad.style.display = "none";
+    keys.style.display = "none";
     keyboard.style.display = "none";
     text.value = "";
 
@@ -337,6 +346,8 @@ window.addEventListener("load", function() {
         if (history.state == "keyboard") {
             keyboard.style.display = "flex";
             text.focus();
+        } else if (history.state == "keys") {
+            keys.style.display = "flex";
         } else {
             pad.style.display = "flex";
         }
@@ -348,10 +359,17 @@ window.addEventListener("load", function() {
         }
         opening.style.display = "none";
         pad.style.display = "none";
+        keys.style.display = "none";
         keyboard.style.display = "none";
         closed.style.display = "flex";
     };
 
+    document.getElementById("keysbutton").addEventListener("click",
+        function(e) {
+            pad.style.display = "none";
+            keys.style.display = "flex";
+            history.pushState("keys", "");
+        });
     document.getElementById("keyboardbutton").addEventListener("click",
         function(e) {
             if (fullscreenElement()) {
@@ -372,6 +390,17 @@ window.addEventListener("load", function() {
             requestFullscreen(pad);
         }
     });
+    [{id: "prevtrackbutton", key: KEY_MEDIA_PREV_TRACK},
+     {id: "playpausebutton", key: KEY_MEDIA_PLAY_PAUSE},
+     {id: "nexttrackbutton", key: KEY_MEDIA_NEXT_TRACK},
+     {id: "volumedownbutton", key: KEY_VOLUME_DOWN},
+     {id: "volumemutebutton", key: KEY_VOLUME_MUTE},
+     {id: "volumeupbutton", key: KEY_VOLUME_UP}].forEach(function(o) {
+        document.getElementById(o.id).addEventListener("click",
+            function(e) {
+                ws.send("k" + o.key);
+            });
+     });
     document.getElementById("sendbutton").addEventListener("click",
         function(e) {
             if (text.value != "") {
@@ -381,8 +410,10 @@ window.addEventListener("load", function() {
             window.history.back();
         });
     window.onpopstate = function(event) {
-        if (keyboard.style.display == "flex") {
+        if (keyboard.style.display == "flex" ||
+                keys.style.display == "flex") {
             pad.style.display = "flex";
+            keys.style.display = "none";
             keyboard.style.display = "none";
         } else {
             window.history.back();

webdata/index.html

@@ -21,6 +21,9 @@
         <button class="icon" id="reloadbutton">↻</button>
     </div>
     <div id="pad">
+        <div class="buttons">
+            <button class="icon" id="keysbutton">☰</button>
+        </div>
         <p id="padlabel">Touchpad</p>
         <div class="buttons">
             <button class="icon" id="fullscreenbutton">⤢</button>
@@ -31,6 +34,18 @@
         <textarea id="text"></textarea>
         <button class="icon" id="sendbutton">➣</button>
     </div>
+    <div id="keys">
+        <div class="buttons">
+            <button class="icon" id="prevtrackbutton">⏮</button>
+            <button class="icon" id="playpausebutton">⏯</button>
+            <button class="icon" id="nexttrackbutton">⏭</button>
+        </div>
+        <div class="buttons">
+            <button class="icon" id="volumedownbutton">🔉</button>
+            <button class="icon" id="volumemutebutton">🔇</button>
+            <button class="icon" id="volumeupbutton">🔊</button>
+        </div>
+    </div>
 </body>
 
 </html>

webdata/main.css

@@ -2,6 +2,7 @@ html,
 body,
 #pad,
 #keyboard,
+#keys,
 #opening,
 #closed {
     width: 100%;
@@ -14,6 +15,7 @@ body {
 }
 
 #pad,
+#keys,
 #sendbutton,
 #opening,
 #closed {
@@ -22,21 +24,27 @@ body {
 }
 
 #opening,
-#closed {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 2em;
-    color: white;
-    word-wrap: break-word;
-    flex-direction: column;
-}
-
+#closed,
+#keys,
 #pad {
     display: flex;
     flex-direction: column;
 }
 
+#opening,
+#closed {
+    justify-content: center;
+    align-items: center;
+    font-size: 2em;
+    color: white;
+    word-wrap: break-word;
+}
+
+#keys {
+    justify-content: flex-end;
+    align-items: center;
+}
+
 #padlabel {
     color: gray;
     text-shadow:
@@ -59,10 +67,17 @@ body {
     }
 }
 
+#keysbutton,
 #fullscreenbutton,
 #keyboardbutton,
 #sendbutton,
-#reloadbutton {
+#reloadbutton,
+#prevtrackbutton,
+#playpausebutton,
+#nexttrackbutton,
+#volumedownbutton,
+#volumemutebutton,
+#volumeupbutton {
     background-color: transparent;
     border: 1px solid black;
     height: 1.5em;
@@ -77,12 +92,24 @@ body {
     border-bottom: none;
 }
 
-#fullscreenbutton {
+#keysbutton,
+#fullscreenbutton,
+#playpausebutton,
+#mutebutton {
     border-left: none;
 }
 
+#keysbutton {
+    border-top: none;
+}
+
+#playpausebutton,
+#mutebutton,
 #keyboardbutton {
     border-right: none;
+}
+
+#keyboardbutton {
     margin-left: auto;
 }
 
@@ -110,6 +137,27 @@ body {
     height: 100%;
 }
 
+#keys > .buttons {
+    margin-bottom: 0.5rem;
+}
+
+#keys > .buttons > button {
+    height: 6rem;
+    width: 8rem;
+}
+
+@media (max-width: 25rem) {
+    #keys > .buttons > button {
+        width: calc(0.33 * (100vw - 1rem));
+    }
+}
+
+@media (max-height: 13.5rem) {
+    #keys > .buttons > button {
+        height: calc(0.5 * (100vh - 1.5rem));
+    }
+}
+
 @media (max-aspect-ratio: 4/3) {
     #keyboard {
         flex-direction: column;