Trying to make my own HTML dashboard

Client tools or tools that can connect with Domoticz. Tools for Windows, iOS, Android, Linux etc.
Post Reply
hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Trying to make my own HTML dashboard

Post by hoeby » Monday 09 July 2018 21:14

I hope somebody can help me to get back on the road.
Trying to make my own HTML dashboard.
Not because it is easy, but i have a lot of fun doing it. But i can't get it to work propperly.
Hopefully somebody can say me what i am doing wrong, i just don't see it where it goes wrong

I added a picture Lamp_off.png which is my start picture.
When putting my cursor on it, the javascript is empty, which it needs to run.

Can somebody help me?

This is the IDX i am using for testing
Image

Code: Select all

<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">
 
<script language="JavaScript" type="text/JavaScript">
<!--
<!--
 
// var devicestodisplay =[90];
// var nod=0;
var domoticzurl="192.168.178.29";
var domoticzport="8080";

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

function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send($message);
// xmlhttp.open("GET", url, true);
// xmlhttp.send();

}
 
function updatedevice(idx,location,onimage,offimage){
 console.log("checking status of idx "+idx)
 var xmlhttp = new XMLHttpRequest();
 var url = "http://192.168.178.29: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;
 devicename = myArr.result[0].Name;
// 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>
 
 
<body>

<a href="javascript:;" onClick="toggle(90);"><img src="Lamp_off.png" width="125" height="125" hspace="5" vspace="5" border="0" id="000140AA"></a>

 
<audio id="scene" src="assets/sounds/beep2.mp3" preload="auto"></audio>
<div align="left" class="toplinks">
<a href="index.htm"><img border="0" src="home_off.png" width="100" height="100"></a>
<a href="lights.htm"><img border="0" src="lights_on.png" width="100" height="100"></a>
<a href="devices.htm"><span class="menutext">Devices</span></a>
<a href="audiotrial.htm"><span class="menutext">Audio</span></a>
<a href="climate.htm"><span class="menutext">Environment</span></a>
<a href="security.htm"><span class="menutext">Security</span></a>
<a href="activities.htm"><span class="menutext">Other screens</span></a></div>
<div id="notification" align="center" class="notificationpane" onClick="clearnotification(11);"></div>
<div id="devicesdiv"></div>
</body>
</html>
When i run it, i get to next errors;
Uncaught ReferenceError: url is not defined
at execute (lights.htm:38)
at toggle (lights.htm:33)
at HTMLAnchorElement.onclick (lights.htm:79)

At execute (lights.htm:38) = the bold text in the next part
function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.send();

At toggle (ligths.htm:33) = the bold text in the next part
function toggle(devicecode){
execute('PUT', 'http://192.168.178.29:8080/json.htm?typ ... cmd=Toggle', '');


At HTMLAnchorElement.onclick (lights.htm:79) = the bold text in the next part
<a href="javascript:;" onClick="toggle(90);"><img src="Lamp_off.png" width="125" height="125" hspace="5" vspace="5" border="0" id="000140AA"></a>

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Monday 09 July 2018 22:09

Got it running.

In the next code it wrote ID the code from domoticz. But it needed to be the name of the device

Code: Select all

<a href="javascript:;" onClick="toggle(90);"><img src="Lamp_off.png" width="125" height="125" hspace="5" vspace="5" border="0" id="000140AA"></a>
The next code works.
I can switch a button en get an updated picture in my ligths.htm page.
Basics works, now make i nice to watch

Code: Select all

<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">
 
<script language="JavaScript" type="text/JavaScript">
<!--
<!--
 
// var devicestodisplay =[90];
// var nod=0;
var domoticzurl="192.168.178.29";
var domoticzport="8080";

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

function execute($method,$url,$message){
xmlhttp=new XMLHttpRequest();
xmlhttp.open($method,$url,true)
xmlhttp.send($message);
// xmlhttp.open("GET", url, true);
// xmlhttp.send();

}
 
function updatedevice(idx,location,onimage,offimage){
 console.log("checking status of idx "+idx)
 var xmlhttp = new XMLHttpRequest();
 var url = "http://192.168.178.29: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;
 devicename = myArr.result[0].Name;
// 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();
}

//the following functions will run every second (due to the 1000 at the end).
window.setInterval(function(){
    updatedevice(90,'Slide-naar-page-2',"Lamp_on.png","Lamp_off.png");
    }, 1000);
  
//-->
</script>
 
 
<body>

<a href="javascript:;" onClick="toggle(90);"><img src="Lamp_off.png" width="125" height="125" hspace="5" vspace="5" border="0" id="Slide-naar-page-2"></a>

 
<audio id="scene" src="assets/sounds/beep2.mp3" preload="auto"></audio>
<div align="left" class="toplinks">
<a href="index.htm"><img border="0" src="home_off.png" width="100" height="100"></a>
<a href="lights.htm"><img border="0" src="lights_on.png" width="100" height="100"></a>
<a href="devices.htm"><span class="menutext">Devices</span></a>
<a href="audiotrial.htm"><span class="menutext">Audio</span></a>
<a href="climate.htm"><span class="menutext">Environment</span></a>
<a href="security.htm"><span class="menutext">Security</span></a>
<a href="activities.htm"><span class="menutext">Other screens</span></a></div>
<div id="notification" align="center" class="notificationpane" onClick="clearnotification(11);"></div>
<div id="devicesdiv"></div>
</body>
</html>

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Tuesday 10 July 2018 23:10

I went on whit my dashboard.
But again something i hope someone can help me

I want to change my background image whit the weather app
Made this code (IDX 96 = name: Darksky weather, type: rain, subtype: WWW) :

Code: Select all

function updateweather(){
 var url = "http://192.168.178.29:8080/json.htm?type=devices&rid=96";
 var forecast
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var myArr = JSON.parse(xmlhttp.responseText);
 forecast = myArr.result[0].ForecastStr;
 console.log("Forecast is "+forecast+".")

// myFunction(myArr);
 if (forecast == "Partly Cloudy") {
 document.getElementById("weatherindicator").src = "weatherback-partlycloudy.png";
 }
 if (forecast == "Sunny") {
 document.getElementById("weatherindicator").src = "weatherback-sunny.png";
 }                                                              
 if (forecast == "Rain") {
 document.getElementById("weatherindicator").src = "weatherback-rain.png";
 }              
 if (forecast == "Fog") {
 document.getElementById("weatherindicator").src = "weatherback-fog.png";
 }                              
 if (forecast == "Snow") {
 document.getElementById("weatherindicator").src = "weatherback-snow.png";
 }
 if (forecast == "Cloudy") {
 document.getElementById("weatherindicator").src = "weatherback-cloudy.png";
 }                                              
 }
 }
xmlhttp.open("GET", url, true);
xmlhttp.send();
setTimeout(updateweather,6000);

}
 
 //-->
</script>
 
 
<body>

<div id="weatherdisplay" align="left" class="weatherback"><img id="weatherindicator" src="" /></div>
<div id="notification" align="center" class="notificationpane" onClick="clearnotification(11);"></div>
<div id="devicesdiv"></div>
</body>
</html>
When running, i see the src is unknown

Code: Select all

<img id="weatherindicator" src=(unknown)
I don't get any errors.
But is the src unknown because the status of IDX can't be read by the programm?
Or do i have something wrong in my script?

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Friday 13 July 2018 21:05

Wanted to share my own dashboard. It is just a start, not perfect and not finished.
I am not a real programmer. Just a lot of google + trail and error. But it works and i am happy whit the first page.
On the other pages i have simple buttons. When the home page is ready, i will go one to the next page and change the grapics, so it also looks nice

This is the starting home screen. It is dynamic and change on some inputs, watch the next pictures for that.
Image

When there is a notification. it is possible to show it on the home screen.
Always the last notification is shown. When you did read it, click on it and it disapears. Until a new notification will pop-up
Image

When the weather forecast changes. Then also the background will change.
On the first pictures it was "partly cloudy". This on is "sunny". Just search for a nice picture in google and add it.
Image

For the first finish of the homepage i need to add the next thing:
- Top-left: actual time (and maybe date)
- Top-right: actual temperature inside and outside
- New index icons, i don't like there

Like said. I am not a programmer and need to search in google to get all this to work.
But like it a lot, to make my own dashboard.

What do you think about it?

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Monday 16 July 2018 16:50

Done a little work to my dashboard.

From the 3 wishes i needed to make, 2 are done.
Only the temperature needs to be added. But i first need to have a device which gives me temperature data :lol:
Added time, date, day and found new coloured icons. These icons are coloured when you are on that page, and are light blue when not on that page

From left to right i have the icons:
- Home --> home screen
- Light --> light devices
- dome camera --> camera views
- alarm --> smoke detectors or other alarm devices
- battery --> status of all batteries, connected to domoticz
- more --> my test page, here i write and modify the code, when it works i copy it to the place where it needs to be.
Image

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Sunday 22 July 2018 20:58

I am trying to make an image which response on a dimmer value

When using the "on" or "off" status, than it works.
But i am looking to change the image on the value 25% (just an example).
But i don't know which "word" to use in the code, to read out the value of the dimmer switch.
Tried the next words: Level, Value, Status, but whitout succes.
Does somebody know how to read out the dimmer percentage level?

Code: Select all

function updatedevice(idx,location,onimage,offimage){
 console.log("checking status of idx "+idx)
 var xmlhttp = new XMLHttpRequest();
 var url = "http://192.168.178.29:8080/json.htm?type=devices&rid="+idx;
 var Status
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 var myArr = JSON.parse(xmlhttp.responseText);
 Status = myArr.result[0].Status;
 devicename = myArr.result[0].Name;

  
// myFunction(myArr);

 }
 if (Status == "25"){
 document.getElementById(location).src = onimage;
 }
 }
xmlhttp.open("GET", url, true);
xmlhttp.send();
}

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Monday 30 July 2018 14:48

I am a little futher whit my dashboard.
Would like to share it, what do you think about it?
Not finished yet, but making progress.
I am looking for a nice background button, maybe somebody knows a nice one?
Than i can file the slides whit it. Most programming is done, when adding it is just a matter of copy/past and change the IDX number

From every slide i made a printscreen.
Posted it here and added text what it does

Slide 0:
This is the first page that the dashboard will show up whit.
The background is dynamic on forecast. It will change it background.
The inside and outside temperature are added. The time was already visible a few posts back
It is possible to slide to the other page, or push the picto in the bottom. Then it jumps to the slide you have chosen.
The blue notification is visible when a device whit string setup is active. When click on the notification, it will disappear until a new string is active.
Image

Slide 1:
This is my lights page. Not much to see.
The light that is visible works and gets automatically updated.
Making more lights is just copy/paste and change the IDX number
Image

Slide 2:
Here my blinds are posted.
It is possible to change the opening/closing status by pushing the buttons. These are prefix values.
Untill now a variable value is not possible.
Also opening/closing all blinds by one button click is possible
Image

Slide 3:
This will be the camera slider.
But i need a camera to set it up.
The idea is, when the front door is ringed, the dashboard automatically jumps to this page so the camera image is vissible.
Sorry, not much to see
Image

Slide 4:
This is my fire alarm page (could also be used as security page)
Every room in my house has a fire-detector. These will be connected.
When no alarm, the image will be blue. When alarm the image will be filled whit colour, so you can see which detector has given the alarm. Also there will be a .MP3 played whit a fire alarm sound. The fire-image is clickable, by doing this the image will go back to blue and the alarm sound will stop. The idea is that you have read which detector has given the alarm. When the alarm is active, it is not possible to go to an other slide, it will jump back untill the alarm is accepted
Image

Slide 5:
My battery status page.
All wireless devices whit a battery will get a battery image.
The images are updated for every procent it changes. From 10% it will turn red. Domoticz will send a empty battery notification.
Image

Slide 6:
This is my test and devices page.
For now it only hass the button "full screen"
Need to look if i want a full screen picto on each slider, or leave it like it is.
Image

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Wednesday 01 August 2018 15:04

Last days i went on whit the dashboard.
Like said, most of the work is to fill the CSS file and put everything on the right place.
Again i changed the buttons and background to something i like more.
On each page i added the full screen picto, the 4 arrows top right.

The "rookmelder test" is in off-mode (and in this test the smokedetector is offline for domoticz).
The "rookmelder zolder" is in alarm state. When click on it the red ring will change to grey/black (like the one next to it) and the flame will turn blue.

A printscreen of the security page
Image

hoeby
Posts: 41
Joined: Saturday 02 June 2018 11:05
Target OS: -
Domoticz version:
Contact:

Re: Trying to make my own HTML dashboard

Post by hoeby » Thursday 02 August 2018 9:07

Yesterday i finished my dashboard.
Everything works like i wanted it to work. Now need to fill domoticz with sensors/switches to add them in the dashboard. That's why there are offline images in the print-screens.
I noticed offset in the text. This is because i made the CSS for a tablet. Not a problem for me, because i only going to run it on a tablet and not on a PC or smartphone. On a tablet the text is line-out correctly.

This is my last post in this thread, because it is finished.
I also looked like there was not much of interest for the readers, i think.

Slide 1
Image

Slide 2
Image

Slide 3
Image

Slide 4
Image

Slide 5
Image

Slide 6
Image

Slide 7, this is my test page, now empty because i am finished for now
Image

magicduck
Posts: 9
Joined: Sunday 11 February 2018 14:25
Target OS: -
Domoticz version:
Location: Longwy, France
Contact:

Re: Trying to make my own HTML dashboard

Post by magicduck » Tuesday 18 September 2018 9:19

Nice work... Do you have a repo for your code ?

snellejellep
Posts: 116
Joined: Tuesday 16 May 2017 13:05
Target OS: Raspberry Pi
Domoticz version: 3.97xx
Location: The Neterlands
Contact:

Re: Trying to make my own HTML dashboard

Post by snellejellep » Tuesday 18 September 2018 17:54

where can i get the code?
raspberry pi | xiaomi gateway/vacuum | yeelight | philips hue | zwave |ubiquiti unifi | harmony

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest