ere’s the HTML and CSS you’ll need if you want to follow my guide over on my YouTube channel on how to create a custom user interface using HTML for Domoticz.
I’ve been asked many times for the code for my HTML interface and others have asked how to develop their own, so this step by step guide should help you to build a great looking interface that you can be proud of, and your family can use with ease.
In the index.htm file, when copied into a text editor, change the line:
var domoticzurl="192.168.1.163"
to the address of your Domoticz system.
Go to the Domoticz folder, then to the www folder, then create a folder called whatever you want your creation to be called. I’ve called the folder fab for now.
Copy the three files into the folder. Once complete, the Domoticz HTML server will serve up the page to whomever requests it.
Try it out by opening any browser and typing in
addressofyourdomoticzsystem:port/yourfoldername/index.htm
In my case this would be
192.168.1.200:8080/fab/index.htm
If all is well you should see your masterpiece! Have a go at changing the names and idx codes of the devices and re-uploading and testing again.
As this HTML code sends HTTP requests, your browser may ask if you want to enable content. This has happened on my desktop version of Google Chrome a few times.
There is some code at the top of the index.htm page that tells your browser that if you’re using a smartphone to open this page, you can save it to your homescreen. The next time you open it, there will be no address bar and it will look like a web app.
save this text as 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(){
hideallDivs();
});;
function hideallDivs() {
hideDiv("lights");
hideDiv("devices");
}
</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="switchon(29);toggleDiv('devices');"><span class="buttontext">On</span></a>
<a href="javascript:;" onclick="switchoff(29);toggleDiv('devices');"><span class="buttontext">Off</span></a>
<a href="javascript:;" onclick="toggleDiv('devices');"><span class="toggletext">Auto</span></a></div>
</body>
Save this text as 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;
}
And finally save this as 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;
}
Domoticz is a small-footprint program that you can install on pretty much any computer, but if you want to connect to your devices via radio waves, to send on/off/dim signals, and receive temperature or movement sensor data, you’ll need to buy a separate piece of hardware. I bought an 
Then, the exciting part. When you type in the Pi’s network address (eg 192.168.1.34) and add on the port number (the default of the Pi when Domoticz is first installed is 8080), you’ll see an unpopulated screen with no devices. Adding devices is done in quite an innovative way: devices that send information routinely, like temperature sensors for example, appear in the ‘unused devices’ tab and with a few clicks they can be added to your dashboard. Adding other hardware that uses network commands, such as the Philips Hue Bridge, is done via the Hardware Setup page.
Fabulous Home Automation 