Creating a custom HTML front end for Domoticz Part 1- YouTube companion article

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&param=switchlight&idx='+devicecode+'&switchcmd=On', '');
}

function switchoff(devicecode){
 execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command&param=switchlight&idx='+devicecode+'&switchcmd=Off', '');
}

function toggle(devicecode){
 execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command&param=switchlight&idx='+devicecode+'&switchcmd=Toggle', '');
}

function dim(devicecode,dimlevel){
 execute('PUT', 'http://' + domoticzurl + ':8080/json.htm?type=command&param=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;
}

13 thoughts on “Creating a custom HTML front end for Domoticz Part 1- YouTube companion article”

Léo Chaupitre says:

March 4, 2017 at 4:38 pm

looks like we are missing initial.css
thanks

LikeLike

1. fountside says:
  
  March 4, 2017 at 4:39 pm
  
  Sorry! When at the computer I will fix that. Thanks for letting me know.
  
  LikeLike
  
WallyBoy says:

March 6, 2017 at 5:31 pm

Great YouTube channel.. I’ve used Domoticz for a while but always wanted to start creating a custom interface.. I downloaded the example code and modified with great success.. Any chance you could send the full code and icons to allow me to use as a template.. Really looking forward to Part II :)…

LikeLike

1. fountside says:
  
  March 7, 2017 at 9:43 pm
  
  Hello and thanks for the great comment, I really appreciate it! I will try but you may need to send me a gmail account as other accounts seem to reject my 12MB zip file. If you have not received it soon please add another comment with your gmail address (I won’t share it). Thanks again, Harry
  
  LikeLike
  
  1. WallyBoy says:
    
    March 8, 2017 at 6:50 pm
    
    Harry.. Thanks for the file.. I’ll hopefully be able to use it as a template for mine.. I also see you posted Part II which i’m looking forward to watching later.. I’ve been using Domoticz for a while and over the last few weeks since my wife brought me an Amazon Dot for Xmas have linked Domoticz to the Amazon Dot which now enables me to use voice control very successfully using the Domoticz->HA-Bridge->Alexa interface.. It’s very easy to setup and works perfectly… The other thing i’ve done is to link Alexa to multi room speakers.. normally Alexa only works with one Bluetooth speaker.. I’d be happy to put something together to show how it’s done if you or anyone else is interested.. Thanks again for sending the files, Duncan
    
    LikeLiked by 1 person
  2. fountside says:
    
    March 8, 2017 at 8:04 pm
    
    Hi Duncan, yes I’d be very interested to see how you have achieved multiroom bluetooth using the Echo. Glad you are enjoying the videos… more to come!
    
    LikeLike
  3. vikasjee says:
    
    December 12, 2017 at 6:45 pm
    
    I would be greatly interested in your project. Please send me the complete set of files on my gmail. Looking forward…
    
    LikeLike
Aaron says:

March 16, 2017 at 4:41 am

Please send me a copy of the files needed. I tried using the templates in the blog, but it wouldn’t come up.

Love your work by the way… excellent!!!

LikeLike

1. fountside says:
  
  March 28, 2017 at 6:46 pm
  
  Thank you Aaron! I have forwarded the files to you so look out for them. Thanks again, Harry
  
  LikeLike
  
ravi says:

April 24, 2017 at 1:39 pm

Fantastic videos. Thanks for the VIdeos. I am using Domoticz for quite sometime now and sometimes thought of looking for a custom interface. Would it be possible for you to forward all the needed files to my mail id?. thanks again for the videos.. ravi

LikeLike

1. fountside says:
  
  June 8, 2017 at 7:15 pm
  
  Hi, thanks for your feedback, sorry for the delay, I have been away for a month but back now. I have sent the zip to you. If not in your inbox can you send me a gmail email address as the zip is quite large. Harry
  
  LikeLike
  
  1. ravi says:
    
    June 9, 2017 at 1:51 pm
    
    Hi Harry . Havent received the files in my inbox. its a gmail id.will it be possible for you to send them again to my mail? thanks… ravi
    
    LikeLike
Celi says:

April 3, 2018 at 3:08 pm

I would be greatly interested in your project. Please send me the complete set of files on my gmail. Looking forward

LikeLike