Add Home Assistant iframe

2023-08-25 01:09:38 +02:00
parent a1ce58a0f9
commit e1ae585070
2 changed files with 121 additions and 0 deletions
@@ -28,6 +28,14 @@ This script will only execute on browsers with `Silk` in their User Agent. To ex
 </script>
 ```

+### Home Assistant Dashboard
+
+Some people like to use this script to display their [Home Assistant](https://www.home-assistant.io/) dashboard on their Echo Show device. For this you can embed this script into your dashboard via
+the Webpage/iframe card. Just add a new Webpage card to your dashboard with the following url:
+
+```
+https://dagammla.gitlab.io/keep-silk-open/iframe.html
+```
 ---
 ## Test

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            * {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                background-color: transparent;
+                font-family: sans-serif;
+                font-size: 24px;
+                font-weight: bold;
+            }
+            #display {
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            #display div {
+                width: fit-content;
+                height: fit-content;
+                text-align: center;
+            }
+
+            [data-state=undecided]{
+                display: none;
+            }
+            [data-state=paused]{
+                background-color: brown;
+            }
+            [data-state=paused] div::after{
+                content: "Click to keep page open";
+            }
+            [data-state=playing]{
+                background-color: rgb(70, 199, 70);
+            }
+            [data-state=playing] div::after{
+                content: "Page will stay open";
+            }
+            
+        </style>
+    </head>
+    <body>
+        <div id="display" data-state="undecided">
+            <div></div>
+        </div>
+        <script>
+
+            // --
+
+            const nowMedia = () => `media.mp3?q=${Date.now()}`
+
+            const audio = document.createElement("audio")
+            audio.controls = false
+            audio.src = nowMedia()
+            audio.muted = true
+            audio.autoplay = true
+            document.body.appendChild(audio)
+
+            const listenEvents = ["keydown", "pointerdown", "click"]
+
+            const addAllListeners = (listener) => {
+                listenEvents.forEach(ev => {
+                    document.addEventListener(ev, listener)
+                });
+            }
+
+            const removeAllListeners = (listener) => {
+                listenEvents.forEach(ev => {
+                    document.removeEventListener(ev, listener)
+                });
+            }
+
+            const reload = () => {
+                audio.src = nowMedia()
+                audio.currentTime = 0
+                audio.play()
+            }
+
+            audio.onended = reload
+
+            const startMedia = () => {
+                reload()
+                audio.muted = false
+            }
+
+            audio.onplaying = () => removeAllListeners(startMedia)
+
+            addAllListeners(startMedia)
+
+            // --
+
+            const display = document.getElementById("display")
+
+            function checkAgain(){
+                window.setTimeout(() => {
+                    if (audio.paused){
+                        display.dataset.state = "paused"
+                        checkAgain()
+                    } else {
+                        display.dataset.state = "playing"
+                    }
+                }, 500);
+            }
+
+            checkAgain()
+
+        </script>
+    </body>
+</html>