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: 25
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: 25
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: 25
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: 25
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?

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest