From 535a6503a19496f3618b080c9153ae52c5751e28 Mon Sep 17 00:00:00 2001
From: siinus <pearu@siinus.com>
Date: Fri, 12 Jun 2020 00:50:23 +0300
Subject: [PATCH 1/2] Replace bg.png with equivalent rgba value

---
 www/bg.png     | Bin 914 -> 0 bytes
 www/index.html |   3 ++-
 2 files changed, 2 insertions(+), 1 deletion(-)
 delete mode 100644 www/bg.png

diff --git a/www/bg.png b/www/bg.png
deleted file mode 100644
index 2dbe77e7a07a95473845a20bb13bbd95c3952bc3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 914
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6&6<n8Xl@E-&h>|H(?D8gCb
z5n0T@z%2yAjF;}#{Q(NHmw5WRvR`K67B)7qW0>=Xfq_}x)5S5QV$RzuhKvjfJO>OM
z-jpcuO3L_(e0eo*=I(|ipRE~w9A{8CGm1t-VC03s8^(EinLq7$mS7FcJq(_%elF{r
G5}E+8-xiJl

diff --git a/www/index.html b/www/index.html
index afb14a8..eea0a28 100644
--- a/www/index.html
+++ b/www/index.html
@@ -126,7 +126,8 @@
                 position: fixed;
                 width: 100%;
                 height: 100%;
-                background-image: url("loader.gif"), url("bg.png");
+                background-image: url("loader.gif");
+                background-color: rgba(102, 102, 102, 0.75);
                 background-position: center center, top;
                 background-repeat: no-repeat, repeat;
                 top: 0;

From 719a2d3c3ff5e5a245f882376d43ca8b92d08398 Mon Sep 17 00:00:00 2001
From: siinus <pearu@siinus.com>
Date: Fri, 12 Jun 2020 02:30:48 +0300
Subject: [PATCH 2/2] Remove unnecessary jQuery dependency, change radios to
 simple buttons

---
 www/index.html | 74 ++++++++++++++++++++++----------------------------
 1 file changed, 32 insertions(+), 42 deletions(-)

diff --git a/www/index.html b/www/index.html
index eea0a28..5f97e26 100644
--- a/www/index.html
+++ b/www/index.html
@@ -60,10 +60,6 @@
                 user-select: none;          /* Likely future */
             }
 
-            .radio-toolbar input[type="radio"] {
-              display: none;
-            }
-
             .radio-toolbar input[type="button"] {
               display: none;
             }
@@ -99,17 +95,6 @@
                 border: 2px solid #af4c4c;
             }
 
-            .radio-toolbar input[type="radio"]:checked+label {
-              background-color: #4CAF50;
-              color: white;
-            }
-
-            .radio-toolbar input[type="radio"]:checked+label.red {
-              background-color: #af4c4c;
-              color: white;
-              border: 2px solid #af4c4c;
-            }
-
             .button1:hover {
                 background-color: #4CAF50;
                 color: white;
@@ -135,28 +120,24 @@
             }
         </style>
 
-        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-
         <script>
-            $(function()
+            function show_loading(visible)
             {
+                document.getElementById('loading').style.visibility = visible ? 'visible' : 'hidden';
+            }
 
-                $(".radio-toolbar input[type=radio]").change(function()
-                {
-                    $("#loading").css("visibility", "visible");
-
-                    $.post("/projektor/status", {mode: $(this).val()}, function(data)
-                    {
-                        $("#loading").css("visibility", "hidden");
-                    });
-                });
-                 $(".radio-toolbar input[type=button]").click(function()
-                {
-                    $.post("/projektor/status", {mode: $(this).val()}, function(data)
-                    {
-                    });
-                });
-            });
+            function send_mode(value)
+            {
+                show_loading(true);
+                var http = new XMLHttpRequest();
+                http.open('POST', '/projektor/status', true);
+                http.onreadystatechange = function() {
+                    if (http.readyState == 4 && http.status == 200) {
+                        show_loading(false);
+                    }
+                }
+                http.send('mode=' + value);
+            }
         </script>
     </head>
 
@@ -169,20 +150,20 @@
         <h2 class="title">Projektori juhtimine</h2>
 
         <div class="radio-toolbar">
-            <input type="radio" id="radio1" name="radios" value="off" class="red">
-            <label for="radio1" class="red">OFF</label>
+            <input type="button" id="power1" name="power" value="off">
+            <label for="power1" class="red">OFF</label>
 
-            <input type="radio" id="radio2" name="radios" value="on">
-            <label for="radio2">ON</label>
+            <input type="button" id="power2" name="power" value="on">
+            <label for="power2">ON</label>
         </div>
         <h2 class="title">Sisendi juhtimine</h2>
 
         <div class="radio-toolbar">
 
-            <input type="radio" id="r2" name="receiver" value="viido">
+            <input type="button" id="r2" name="receiver" value="viido">
             <label class="rbnt" for="r2">Viido</label>
 
-            <input type="radio" id="r3" name="receiver" value="steam">
+            <input type="button" id="r3" name="receiver" value="steam">
             <label class="rbnt" for="r3">Steam</label>
 
             <input type="button" id="v1" name="receiver" value="volumeup">
@@ -191,10 +172,10 @@
         </div>
         <br>
         <div class="radio-toolbar">
-            <input type="radio" id="r4" name="receiver" value="hdmi">
+            <input type="button" id="r4" name="receiver" value="hdmi">
             <label class="rbnt" for="r4">HDMI</label>
 
-            <input type="radio" id="r5" name="receiver" value="aux">
+            <input type="button" id="r5" name="receiver" value="aux">
             <label class="rbnt" for="r5">AUX</label>
 
             <input type="button" id="v2" name="receiver" value="volumedown">
@@ -208,5 +189,14 @@ pavucontrol &
         </code>
 
         <div id="loading"></div>
+        <script type="text/javascript">
+                var modebuttons = document.querySelectorAll('.radio-toolbar input');
+                for (var i = 0; i < modebuttons.length; i++)
+                {
+                    modebuttons[i].addEventListener('click', function(event) {
+                        send_mode(event.target.value);
+                    });
+                }
+        </script>
     </body>
 </html>