The website

responsive

 

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

HTML5 Code:
  1. <!DOCTYPE html>
  2. <head>
  3. <link href="http://2muchtime.org/projects/ha/ha.css" rel="stylesheet" />
  4. <script src="https://ajax/googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  5. </head>
  6. <body>
  7. <div id="c" style="display:hidden">
  8. 2muchtime Domotica,*,Television,Moodlight,Light near window,TV light,*,Moodlight bed,Bedside table light,*,Desk light,Light at backside,
  9. General,Light above table,*,Front door
  10. </div>
  11. </body>
  12. <script src="http://2muchtime.org/projects/ha/ha.js"></script>
  13. </html>
  14.  

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:

Dwnldicon Download the Javascript file (zip)

 

Dwnldicon Download the CSS file (zip)

Index of this article

Add comment


Security code
Refresh

Powered by Amazing-Templates.com 2014 - All Rights Reserved.