]> git.mdlowis.com Git - proto/atv.git/commitdiff
projects / proto / atv.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 515e65e)
added QR code SVG and revamped control page
authorMike Lowis <mike.lowis@gentex.com>
Wed, 21 Feb 2024 20:54:40 +0000 (15:54 -0500)
committerMike Lowis <mike.lowis@gentex.com>
Wed, 21 Feb 2024 20:54:40 +0000 (15:54 -0500)
atv/assets/control.html patch | blob | history
atv/assets/control.svg [new file with mode: 0644] patch | blob
atv/assets/index.html patch | blob | history
atv/assets/wifi.svg [new file with mode: 0644] patch | blob
atv/lib/atv/channel.rb patch | blob | history

diff --git a/atv/assets/control.html b/atv/assets/control.html
index a62a0477f56395611633a066a9675a62e370d3f0..c99b09d3538dd5f93036aa903ee25da005228f71 100644 (file)
--- a/atv/assets/control.html
+++ b/atv/assets/control.html
@@ -41,43 +41,110 @@
         flex-grow: 1;
         height: 4em;
     }
+
+    td {
+        border: 1px solid #000;
+        padding: 1em;
+    }
+
+    tr td:first-child {
+        width: 1%;
+        white-space: nowrap;
+    }
+
+    input {
+        margin: 0.5em;
+    }
+
+
+
+    article {
+        display: flex;
+        flex-flow: column;
+        height: 100%;
+        max-height: 100%;
+    }
+
+    article section {
+        //border: 1px dotted black;
+        flex: 0 1 auto;
+    }
+
+    .grow {
+        flex: 1 1 auto;
+        overflow: auto;
+    }
+
+    .shrink {
+        flex: 0 1 auto;
+    }
   </style>
 </head>
 <body>
 
-<div class="row">
-  <div class="label"><strong>Now Playing</strong></div>
-  <div class="item" id="currVid">Some File</div>
-</div>
-<div class="row">
-  <div class="label"><strong>Playing Next</strong></div>
-  <div class="item" id="nextVid">Some Other File</div>
-</div>
-<hr/>
-
-<div class="row">
-  <input type="button" value="Play" onclick="javscript:Client.play_pause()" id="playBtn"/>
-  <input type="button" value="Skip" onclick="javscript:Client.skip()"/>
-  <input type="button" value="Chan +" onclick="javscript:Client.chan_next()"/>
-  <input type="button" value="Chan -" onclick="javscript:Client.chan_prev()"/>
-  <input type="button" value="Enqueue" onclick="javscript:Client.enqueue()"/>
-</div>
+<article id="mainView" style="display: none">
+    <section>
+        <table style="width: 100%"><tbody>
+            <tr>
+              <td><strong>Now Playing</strong></td>
+              <td class="item" id="currVid">Some File</td>
+            </tr>
+            <tr>
+              <td><strong>Playing Next</strong></td>
+              <td class="item" id="nextVid">Some Other File</td>
+            </tr>
+        </tbody></table>
+    </section>
+
+    <section>
+        <div class="row">
+            <input type="button" value="Play" onclick="javscript:Client.play_pause()" id="playBtn"/>
+            <input type="button" value="Chan +" onclick="javscript:Client.chan_next()"/>
+            <input type="button" value="Chan -" onclick="javscript:Client.chan_prev()"/>
+            <input type="button" value="Enqueue" onclick="javscript:Client.enqueue()"/>
+        </div>
+    </section>
+
+    <section class="grow">
+        <div style="width: 100%; text-align: center"><h2>Queued Videos</h2></div>
+        <div id="queue" style="width: 100%; text-align: center;">The queue is currently empty</div>
+    </section>
+
+    <section><hr/>FOOTER</section>
+</article>
+
+<article id="browseView" style="display: flex">
+    <section>
+        <h1 style="text-align: center">Browse Media</h1>
+        <hr/>
+        <div>Breadcrumbs</div>
+        <hr/>
+    </section>
+
+    <section class="grow">
+        <div>contents here</div>
+    </section>
+
+    <section>
+        <hr/>
+        <div class="row"><input type="button" value="Cancel" onclick=""/></div>
+    </section>
+</article>
+
 <script type="text/javascript" src="client.js"></script>
+
 <script>
 (()=>{
-    let items = []
+    let items = {}
     Client.connect((data)=>{
         console.log(data);
         if (cmd.cmd === "items")
         {
-            console.log("received items");
-            console.log(data);
             items = data["items"];
         }
         else if (cmd.cmd === "queue")
         {
-            console.log("received queue");
-            console.log(data);
+            showQueue(data.queue);
         }
         else
         {
@@ -88,9 +155,27 @@
     });
 
     Client.enqueue = ()=>{
-        console.log("enqueue");
-        Client.send("enqueue", { path: items[0]["path"] });
+//        console.log("enqueue");
+//        Client.send("enqueue", { path: items[0]["path"] });
+    };
+
+    const showQueueElement = (item) => {
+        const el = document.createElement("div");
+        el.innerText = item.path;
+        queue.appendChild(el);
+    }
+
+    const showQueue = (data)=>{
+        if (data.length > 0) {
+            queue.innerHTML = "";
+            for (const item of data) {
+                showQueueElement(item);
+            }
+        } else {
+            queue.innerHTML = "The queue is currently empty";
+        }
     };
+
 })();
 </script>
 </body>
diff --git a/atv/assets/control.svg b/atv/assets/control.svg
new file mode 100644 (file)
index 0000000..e7dae0a
--- /dev/null
+++ b/atv/assets/control.svg
@@ -0,0 +1,343 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!-- Created with qrencode 4.1.1 (https://fukuchi.org/works/qrencode/index.html) -->
+<svg width="3.49cm" height="3.49cm" viewBox="0 0 33 33" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+       <g id="QRcode">
+               <rect x="0" y="0" width="33" height="33" fill="#ffffff"/>
+               <g id="Pattern" transform="translate(4,4)">
+                       <rect x="0" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="24" width="1" height="1" fill="#000000"/>
+               </g>
+       </g>
+</svg>
diff --git a/atv/assets/index.html b/atv/assets/index.html
index 460dff1ea5d89527963c795f345ab0451a19d923..d65446b4e6d2f48c94aaa97eb7314b60a18a890d 100644 (file)
--- a/atv/assets/index.html
+++ b/atv/assets/index.html
@@ -13,12 +13,51 @@
       background-color: #000;
       overflow: hidden;
     }
+
+    .badge {
+        position: absolute;
+        bottom: 1em;
+        color: white;
+        font-family: sans-serif;
+    }
+    .badge span {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+
+    .leftBadge {
+        position: absolute;
+        bottom: 1em;
+        left: 1em;
+        color: white;
+        font-family: sans-serif;
+    }
+    .rightBadge {
+        position: absolute;
+        bottom: 1em;
+        right: 1em;
+        color: white;
+        font-family: sans-serif;
+    }
   </style>
 </head>
 <body>
+
 <video id="Video" width="100%" height="100%" src="" autoplay muted playsinline>
 </video>
 
+<div class="badge" style="left: 1em;">
+    <div><img src="./wifi.svg" width="64" height="64"></div>
+    <span>WIFI</span>
+</div>
+
+<div class="badge" style="right: 1em;">
+    <div><img src="./control.svg" width="64" height="64"></div>
+    <span>APP</span>
+</div>
+
 <script>
 let current = {};
 
diff --git a/atv/assets/wifi.svg b/atv/assets/wifi.svg
new file mode 100644 (file)
index 0000000..cb22d2a
--- /dev/null
+++ b/atv/assets/wifi.svg
@@ -0,0 +1,440 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<!-- Created with qrencode 4.1.1 (https://fukuchi.org/works/qrencode/index.html) -->
+<svg width="3.92cm" height="3.92cm" viewBox="0 0 37 37" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
+       <g id="QRcode">
+               <rect x="0" y="0" width="37" height="37" fill="#ffffff"/>
+               <g id="Pattern" transform="translate(4,4)">
+                       <rect x="0" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="0" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="1" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="2" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="3" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="4" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="5" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="6" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="7" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="8" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="9" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="10" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="11" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="12" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="13" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="14" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="15" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="16" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="17" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="18" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="19" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="7" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="20" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="21" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="22" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="23" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="11" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="24" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="23" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="25" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="26" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="9" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="13" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="15" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="17" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="18" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="20" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="24" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="25" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="26" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="28" y="27" width="1" height="1" fill="#000000"/>
+                       <rect x="0" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="1" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="2" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="3" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="4" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="5" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="6" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="8" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="10" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="12" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="14" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="16" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="19" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="21" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="22" y="28" width="1" height="1" fill="#000000"/>
+                       <rect x="27" y="28" width="1" height="1" fill="#000000"/>
+               </g>
+       </g>
+</svg>
diff --git a/atv/lib/atv/channel.rb b/atv/lib/atv/channel.rb
index ef618fffe4b0b9f7da26417e28de196daec06190..26b3ebd56139f2fc6a271e3b4824f4811420e1ff 100644 (file)
--- a/atv/lib/atv/channel.rb
+++ b/atv/lib/atv/channel.rb
@@ -47,7 +47,20 @@ module ATV
     end
 
     def items()
-      { "items" => @items }
+      tree = {}
+      @items.each do |item|
+        node = tree
+        path = item["path"].split("/")
+        path[0..-2].each do |folder|
+          node[folder] ||= {}
+          node = node[folder]
+        end
+        node[path.last] = item
+      end
+
+      pp tree
+
+      { "items" => tree }
     end
 
     def queue()
Unnamed repository; edit this file 'description' to name the repository.