Refactor web interface. (#33)

Changed the font to Google Roboto. Fixed web interface issues. Improved jQuery/CSS.
CelliesProjects · Oct 5, 2019 · 44718f9 · 44718f9
1 parent cd27f23
commit 44718f9
Show file tree

Hide file tree

Showing 14 changed files with 6,811 additions and 7,415 deletions.
diff --git a/README.md b/README.md
@@ -38,10 +38,9 @@ Another feature is support for 3 Dallas DS18B20 temperature sensors, with temper
 - 50 timers per channel.
 - Password protected web interface to control the device. (default login is user:admin password:esp32)
 <br>See it in action at my [fish](https://vissen.wasietsmet.nl/) and my [salamanders](https://salamanders.wasietsmet.nl/) tank.
-- Automatic NTP timekeeping.
-- Timezone support.
+- SNTP timekeeping with timezone support.
 - OneWire DS18B20 sensor support and FFat storage with a 30 day temperature history.
-- I2C SSD1306 128x64 OLED support.
+- I<sup>2</sup>C SSD1306 128x64 OLED support.
 - SPI ILI9341 320x240 TFT with XPT2046 touchscreen support.
 - All device settings are saved in NVS.
 - Easily connect your controller to WiFi with the [ESP8266 SmartConfig Android app](https://play.google.com/store/apps/details?id=com.cmmakerclub.iot.esptouch&hl=nl).
@@ -59,7 +58,7 @@ Most libraries can be installed with the Arduino library Manager `Sketch > Inclu
 
 A few have to be downloaded from GitHub:
 
-- [OneWire](https://github.com/stickbreaker/OneWire) 2.3.3 - See [Known issues](#known-issues)
+- [OneWire](https://github.com/stickbreaker/OneWire) 2.3.3 - Use this library instead of the standard Arduino OneWire library. 
 - [AsyncTCP](https://github.com/me-no-dev/AsyncTCP) 1.0.3
 - [ESPAsyncWebServer](https://github.com/me-no-dev/ESPAsyncWebServer) 1.2.2
 - [MoonPhase](https://github.com/CelliesProjects/MoonPhase) 1.0.0

diff --git a/webif/channels.htm b/webif/channels.htm
@@ -1,7 +1,7 @@
 <!doctype HTML>
 <html lang="en">
 <head>
-<title>Channel setup</title>
+<title>&nbsp;</title>
 <meta charset="utf-8">
 <link rel="icon" href="data:;base64,iVBORw0KGgo="><!--prevent favicon requests-->
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">  <!-- https://fonts.google.com/specimen/Roboto?selection.family=Roboto -->
@@ -17,8 +17,11 @@
 body{
   opacity:0.4;
 }
-h3{
-  margin:10px;
+#menu{
+  overflow:inherit;
+}
+#hostName{
+  margin:0;
 }
 p{
   margin:0;
@@ -32,10 +35,6 @@
   text-decoration:none;
   margin:0 10px;
 }
-#hostName{
-  text-transform:uppercase;
-  margin:10px;
-}
 #lunarPhase{
   width:625px;
   margin:auto;
@@ -62,7 +61,7 @@
   box-shadow:0px 0px 13px 0px rgba(0,0,0,1);
   border-radius:15px;
   margin:10px 0;
-  padding:2px;
+  overflow:hidden;
 }
 .item{
   margin:10px auto;
@@ -108,40 +107,44 @@
   width:60px;
   margin:0 15px 0 30px;
 }
+.noselect{
+-webkit-touch-callout:none;/* iOS Safari */
+-webkit-user-select:none;/* Safari */
+-khtml-user-select:none;/* Konqueror HTML */
+-moz-user-select:none;/* Firefox */
+-ms-user-select:none;/* Internet Explorer/Edge */
+user-select:none;/* Non-prefixed version,currently supported by Chrome and Opera */
+}
 </style>
 <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
 </head>
-<body>
-<p class="shadowedBox" style="background-color:beige;"><a class="systemLink" href="/">HOME</a><a class="systemLink" href="channels">CHANNELS</a><a class="systemLink" href="setup">SETUP</a><a class="systemLink" href="editor">EDITOR</a> <a class="systemLink" href="logs">LOGS</a> <a class="systemLink" href="filemanager">FILE MANAGER</a></p>
-<div class="shadowedBox">
-  <h2 id="hostName">&nbsp;</h2>
-  <p class="infobar">Set up channels and nightlight</p>
-</div>
+<body class="noselect">
+<p id="menu" class="shadowedBox" style="background-color:beige;"><a class="systemLink" href="/">HOME</a><a class="systemLink" href="channels">CHANNELS</a><a class="systemLink" href="setup">SETUP</a><a class="systemLink" href="editor">EDITOR</a> <a class="systemLink" href="logs">LOGS</a> <a class="systemLink" href="filemanager">FILE MANAGER</a></p>
+<div class="shadowedBox"><h2 id="hostName">&nbsp;</h2><p>Channel and moon setup</p></div>
 <div class="shadowedBox"><p id="statusBox">&nbsp;</p></div>
 <div class="shadowedBox">
 <div id="lunarPhase"><p id="moonpercent" class="infobar">Loading moonphase...</p><img width="256px" height="256px" id="moonimg" src="https://aquacontrol.wasietsmet.nl/near_side_256x256x8/000.png"></div>
 <div id="copyright"><p>Lunar renders author: Jay Tanner</p><p><a href="http://creativecommons.org/licenses/by-sa/3.0/legalcode" target="_blank">Image license: Creative Commons 3.0</a>-<a href="http://www.neoprogrammics.com/lunar_phase_images/" target="_blank">Original image set</a></p></div>
-  <div class="item channelbar"><p class="itemName">0</p><input type="text" class="channelName" value=""><input type="color" class="colorPicker"><p class="itemName">FULL MOON</p><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue minimumPercent">0%</p></div>
-  <div class="item channelbar"><p class="itemName">1</p><input type="text" class="channelName" value=""><input type="color" class="colorPicker"><p class="itemName">FULL MOON</p><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue minimumPercent">0%</p></div>
-  <div class="item channelbar"><p class="itemName">2</p><input type="text" class="channelName" value=""><input type="color" class="colorPicker"><p class="itemName">FULL MOON</p><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue minimumPercent">0%</p></div>
-  <div class="item channelbar"><p class="itemName">3</p><input type="text" class="channelName" value=""><input type="color" class="colorPicker"><p class="itemName">FULL MOON</p><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue minimumPercent">0%</p></div>
-  <div class="item channelbar"><p class="itemName">4</p><input type="text" class="channelName" value=""><input type="color" class="colorPicker"><p class="itemName">FULL MOON</p><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue minimumPercent">0%</p></div>
+  <div class="item"><input type="text" class="channelName"><input type="color" class="colorPicker"><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue">0%</p></div>
+  <div class="item"><input type="text" class="channelName"><input type="color" class="colorPicker"><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue">0%</p></div>
+  <div class="item"><input type="text" class="channelName"><input type="color" class="colorPicker"><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue">0%</p></div>
+  <div class="item"><input type="text" class="channelName"><input type="color" class="colorPicker"><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue">0%</p></div>
+  <div class="item"><input type="text" class="channelName"><input type="color" class="colorPicker"><input type="range" class="minLevel" value="0" min="0" max="0.99" step="0.01"><p class="itemValue">0%</p></div>
 </div>
 <script>
 var loadAll=true; // with loadAll set to true, all get calls will be daisy-chained
 $(document).ready(function(){
   $.get("/api/getdevice?hostname=")
-  .done(function(data){$('#hostName').html(data);})
+  .done(function(data){$('#hostName').html(data);document.title=data+' channels';})
   .always(function(){getMoonLevels();})
 });
 function getMoonLevels(){
   $.get("/api/getdevice?moonlevels=")
   .done(function(data){
     var values=data.split("\n");
-    console.log( values );
     values.forEach(function(element,index){
       $('.minLevel').eq(index).val(parseFloat(element));
-      $('.minimumPercent').eq(index).html(element.trim()+"%");
+      $('.itemValue').eq(index).html(element.trim()+"%");
     });
   })
   .fail(function(data){console.log(data);})
@@ -181,7 +184,7 @@ <h2 id="hostName">&nbsp;</h2>
   $('#statusBox').html('&nbsp;');
 });
 $('.minLevel').on('input',function(){
-  $('.minimumPercent').eq($(this).index('.minLevel')).html($(this).val()+'%');
+  $('.itemValue').eq($(this).index('.minLevel')).html($(this).val()+'%');
 });
 $('.minLevel').on('change',function(){
   $.post("/api/setchannel",