This article just shows the code that accompanies the next in the multi-part series explaining how I created my (reasonably popular!) HTML front end.
The icon I used can be downloaded from Flaticon.com but remember to download two versions, one you should rename dehumidifier-on.png and one dehumidifier-off.png
Here’s the code.
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<head>
<title>Home Control</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="iphone-icon.png"/>
<link rel="icon" sizes="196x196" href="logo.png">
<link rel="icon" sizes="192x192" href="logo192.png">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<link href="https://fonts.googleapis.com/css?family=Baloo|Comfortaa" rel="stylesheet">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript">
var domoticzurl="192.168.1.163"
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function speak(textToSpeak) {
// Create a new instance of SpeechSynthesisUtterance
var newUtterance = new SpeechSynthesisUtterance();
// Set the text
newUtterance.text = textToSpeak;
// Add this text to the utterance queue
window.speechSynthesis.speak(newUtterance);
}
function switchon(devicecode){
execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=On', '');
}
function switchoff(devicecode){
execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Off', '');
}
function toggle(devicecode){
execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Toggle', '');
}
function dim(devicecode,dimlevel){
execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command¶m=switchlight&idx='+devicecode+'&switchcmd=Set%20Level&level='+dimlevel, '');
}
function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send($message);
}
function toggleDiv(divId) {
$("#"+divId).toggle(100);
}
function hideDiv(divId) {
$("#"+divId).hide();
}
window.addEventListener("load", function(){
});;
function hideallDivs() {
hideDiv("lights");
hideDiv("devices");
}
//the following functions will run every second (due to the 1000 at the end).
window.setInterval(function(){
updatedevice(36,'dehumidifier',"dehumidifier-on.png","dehumidifier-off.png");
}, 1000);
// the following function checks to see if the idx is "on" or "off" and updates the image accordingly
function updatedevice(idx,location,onimage,offimage){
console.log("checking status of idx "+idx);
var xmlhttp = new XMLHttpRequest();
var url = "http://"+domoticzurl+":8080/json.htm?type=devices&rid="+idx;
var onoff;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
onoff = myArr.result[0].Status;
// myFunction(myArr);
}
if (onoff == "On") {
document.getElementById(location).src = onimage;
}
if (onoff == "Off") {
document.getElementById(location).src = offimage;
}
if (onoff == "Open") {
document.getElementById(location).src = onimage;
}
if (onoff == "Closed") {
document.getElementById(location).src = offimage;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</head>
<body>
<a href="javascript:;" onclick="toggleDiv('lights');"><span class="navtitle">Lights</span></a>
<div id="lights" class="navlights">
Desk Lamp
<a href="javascript:;" onclick="dim(594,16);toggleDiv('lights');"><span class="buttontext">Max</span></a>
<a href="javascript:;" onclick="dim(594,12);toggleDiv('lights');"><span class="buttontext">75%</span></a>
<a href="javascript:;" onclick="dim(594,8);toggleDiv('lights');"><span class="buttontext">50%</span></a>
<a href="javascript:;" onclick="dim(594,4);toggleDiv('lights');"><span class="buttontext">25%</span></a>
<a href="javascript:;" onclick="switchoff(594);toggleDiv('lights');"><span class="buttontext">Off</span></a>
<hr width="90%" style="dashed" color="#FFFFFF" size="2">
Ceiling Lamp
<a href="javascript:;" onclick="dim(81,100);toggleDiv('lights');"><span class="buttontext">Max</span></a>
<a href="javascript:;" onclick="dim(81,75);toggleDiv('lights');"><span class="buttontext">75%</span></a>
<a href="javascript:;" onclick="dim(81,50);toggleDiv('lights');"><span class="buttontext">50%</span></a>
<a href="javascript:;" onclick="dim(81,25);toggleDiv('lights');"><span class="buttontext">25%</span></a>
<a href="javascript:;" onclick="switchoff(81);toggleDiv('lights');"><span class="buttontext">Off</span></a></div>
<a href="javascript:;" onclick="toggleDiv('devices');"><span class="navtitle">Devices</span></a>
<div id="devices" class="navlights">
Dehumidifier
<a href="javascript:;" onclick="toggle(36);"><img id="dehumidifier" src="dehumidifier-off.png"></a></div>
</body>
And here are the 2 css sheets you need (I don’t know why I have done this yet but these will be useful when we start looking at device orientation.
Portrait.css
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color:#000000;
}
div.navlights {
display:block;
text-align:center;
position:relative;
width: 100vw;
margin:0vw;
background-color:#CCCCCC;
font-family: 'Comfortaa', cursive;
font-size:6vw;
font-color:#000000;
}
span.buttontext {
background-color: #ffffff;
color: #75099b;
font-size:6vw;
display: inline-block;
padding: 3px 10px;
margin: 1vw;
font-weight: bold;
border-radius: 5px;
}
span.toggletext {
background-color: #FF66CC;
color:#ffffff;
font-size:6vw;
display: inline-block;
padding: 3px 10px;
margin: 1vw;
font-weight: bold;
border-radius: 5px;
}
span.navtitle {
color: #FFFFFF;
font-size:5vw;
display: inline-block;
margin: 3vw;
font-family: 'Baloo',cursive;
font-weight: normal;
}
landscape.css
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color:#000000;
}
div.navlights {
display:block;
text-align:center;
position:relative;
width: 100vw;
margin:0vw;
background-color:#CCCCCC;
font-family: 'Comfortaa', cursive;
font-size:40px;
font-color:#000000;
}
span.buttontext {
background-color: #ffffff;
color: #75099b;
font-size:36px;
display: inline-block;
padding: 3px 10px;
margin: 5px;
font-weight: bold;
border-radius: 5px;
}
span.toggletext {
background-color: #FF66CC;
color:#ffffff;
font-size:36px;
display: inline-block;
padding: 3px 10px;
margin: 5px;
font-weight: bold;
border-radius: 5px;
}
span.navtitle {
color: #FFFFFF;
font-size:50px;
display: inline-block;
margin: 5px;
font-family: 'Baloo',cursive;
font-weight: normal;
}
Fabulous Home Automation 