The website

Page 5 of 5

To reduce the risks, the program sends a very small website, about 450-500 characters (depending on the devices):

HTML5 Code:
<!DOCTYPE html>
  <head>
    <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>
  </head>
  <body>
    <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
    </div>
  </body>
  <script src="https://2muchtime.org/projects/ha/ha.js"></script>
</html>

Above the website as will be server by the Arduino to your browser.

The website has dependencies to three files: jQuery, a CSS file and a JavaScript file. All will be served from another server.

The JavaScript file is used for the next purposes:

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:

Download the Javascript file (zip)

Download the CSS file (zip)

Domotica at home - The website

The website

Index of this article

Add comment

QRZ

Independant

QTH