To reduce the risks, the program sends a very small website, about 450-500 characters (depending on the devices):
- <!DOCTYPE html>
- <link href="https://2muchtime.org/projects/ha/ha.css" rel="stylesheet" />
- <script src="https://ajax/googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <div id="c" style="display:hidden">
- 2muchtime Domotica,*,Television,Moodlight,Light near window,TV light,*,Moodlight bed,Bedside table light,*,Desk light,Light at backside,
- General,Light above table,*,Front door
- <script src="https://2muchtime.org/projects/ha/ha.js"></script>
Above the website as will be server by the Arduino to your browser.
- It reads the value of the <DIV> tag, and separates that into a title, and all devices. A * is the separation character to go to the next tab. Finally it removes the content of the div.
- It builds up the entire website by adding the title, the tabs and a responsive square for every device with a power-on and power-off button.
- It contains all six images, which are actually SVG images.
- On a window resize, it will act responsive and recalculate the location of buttons.
- It handles the tab-navigation.
- It contains a little AJAX to send information (a button press) to the server without a page reload.
The files can be found here: