FlatZ Frontpage

[mvveelen]

I'm having some troubles with the home page. I only get 1 donut chart which displays the temperature. When I hover over this donut chart, the text that shows up is text from another temperature donut chart that won't show up.
I checked everything and even started with a new settings file: no result.
I'm using 3 temperature/humidity sensors which are the same.

This is what I get:



When I hover over "TEMPERATUUR SLAAPKAMER", I get: "VOCHT WOONKAMER: 51%".

This is what the settings.js has:

Code: Select all

    //other devices

    ['8', 'Humidity', 'cell7', 'Vocht woonkamer', 'woonkamer', '#b2c831'],
    ['8', 'LastUpdate', 'cell70', 'Vocht woonkamer'],

    ['650', 'Temp', 'cell8', 'Temperatuur slaapkamer', 'slaapkamer', '#2980B9'],
    ['650', 'LastUpdate', 'cell80', 'Temperatuur slaapkamer'],

    ['92', 'Usage', 'cell9', 'Elektra (Watt)'],
    ['92', 'Data', 'cell29', 'Elektra'],
    ['92', 'CounterToday', 'cell39', 'Elektra'],
    ['92', 'LastUpdate', 'cell19', 'Elektra'],

    ['667', 'Temp', 'cell10', 'Temperatuur werkkamer', 'werkkamer', '#C0382B'],
    ['667', 'LastUpdate', 'cell100', 'Temperatuur werkkamer'],

    ['630', 'Data', 'cell11', 'Kodi Status'],
    ['597', 'Status', 'cell12', 'Toiletverlichting Status'],
    ['509', 'Status', 'cell13', 'Ventilatie', 'arrow'],
];

Edit:

I've found it. The 'divs' are hardcoded in frontpage.html and must not be changed:

Code: Select all

            <!-- DONUT CHART -->
-knip-
                    <div id="badkamer" style="height: 11.313em;width: 11.313em;margin: auto;"></div>
-knip-
            <!-- DONUT CHART -->
-knip-
                    <div id="woonkamer" style="height: 11.313em;width: 11.313em;margin: auto;"></div>
-knip-
            <!-- DONUT CHART -->
-knip-
                    <div id="buiten" style="height: 11.313em;width: 11.313em;margin: auto;"></div>
-knip-
            

[Btje]

What I see is that pies redraw al the time. Is this configurable?

[Btje]

Pitty that the pie's use java that wont run on a tablet. At least that is what I can find.

[johansson]

Anybody? Any pointers would be highly appreciated.

Spoiler: show

Great approach, looks great! I've been looking for a solution to gather the all main data into one dashboard, including e.g. switches, temperatures, traffic and train details etc; so far the best alternative I've found.

After several hours of fiddling with the dashboard, most of the external stuff (traffic, cameras and so on) are in place, but no Domoticz switches or temperatures. Cannot figure out what's wrong, maybe you guys could help out. For example, a switch from json:

Code: Select all

"AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 255,
         "CustomImage" : 0,
         "Data" : "Off",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 2,
         "HardwareName" : "RFXCom",
         "HardwareType" : "RFXCOM - RFXtrx433 USB 433.92MHz Transceiver",
         "HardwareTypeVal" : 1,
         "HaveDimmer" : true,
         "HaveGroupCmd" : true,
         "HaveTimeout" : false,
         "ID" : "0F7E8A2",
         "Image" : "Light",
         "IsSubDevice" : true,
         "LastUpdate" : "2016-10-04 13:08:46",
         "Level" : 0,
         "LevelInt" : 0,
         "MaxDimLevel" : 15,
         "Name" : "Block",
         "Notifications" : "false",
         "PlanID" : "0",
         "PlanIDs" : [ 0 ],
         "Protected" : false,
         "ShowNotifications" : true,
         "SignalLevel" : "-",
         "Status" : "Off",
         "StrParam1" : "",
         "StrParam2" : "",
         "SubType" : "AC",
         "SwitchType" : "On/Off",
         "SwitchTypeVal" : 0,
         "Timers" : "false",
         "Type" : "Lighting 2",
         "TypeImg" : "lightbulb",
         "Unit" : 1,
         "Used" : 1,
         "UsedByCamera" : false,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "13"

That inserted into the switches section in settings.js should be:

Code: Select all

    ['13', 'Data', 'cell1', 'Block', 'onbutton'],//onbutton = only push on

But nothing, I've tried all the options I could figure out with no luck.

Same goes with my thermometers:

Code: Select all

"AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 100,
         "CustomImage" : 0,
         "Data" : "8.3 C",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 2,
         "HardwareName" : "RFXCom",
         "HardwareType" : "RFXCOM - RFXtrx433 USB 433.92MHz Transceiver",
         "HardwareTypeVal" : 1,
         "HaveTimeout" : false,
         "ID" : "8800",
         "LastUpdate" : "2016-10-04 15:42:02",
         "Name" : "Outer_temp",
         "Notifications" : "false",
         "PlanID" : "0",
         "PlanIDs" : [ 0 ],
         "Protected" : false,
         "ShowNotifications" : true,
         "SignalLevel" : 7,
         "SubType" : "Viking 02811/02813, Proove TSS330",
         "Temp" : 8.300000000000001,
         "Timers" : "false",
         "Type" : "Temp",
         "TypeImg" : "temperature",
         "Unit" : 0,
         "Used" : 1,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "12"

That in other devices should look something like:

Code: Select all

      ['12', 'Temp', 'cell10', 'Ulkolampo', 'Ulko', '#C0382B'],

Again, nothing anywhere but don't know where's the problem.

Even the log page is empty, maybe there's an issue the Domoticz connection. Or something. Any advice would be highly appreciated.

[sorampage]

Hi all,

It's possible to add Blinds ??
I have some switches in my Domoticz for my blinds, I have 1 ID per Blinds, but 3 switches for one blind ... (Open,Stop,Close) PJ

If anyone has an idea ..

[satanasinc]

Hi!

Great work with FlatZ it is great thanks!

I have been trying to configure a in FlatZ a SetPoint for control my domoticz themostat without luck.

Someone has this function working on Flatz integrated with the domoticz popup?
Please explain the config process.

Greetings from spain!

[stavroshamster]

For the switch have you tried replacing 'onbutton' with 'button'?

Anybody? Any pointers would be highly appreciated.

Spoiler: show

Great approach, looks great! I've been looking for a solution to gather the all main data into one dashboard, including e.g. switches, temperatures, traffic and train details etc; so far the best alternative I've found.

After several hours of fiddling with the dashboard, most of the external stuff (traffic, cameras and so on) are in place, but no Domoticz switches or temperatures. Cannot figure out what's wrong, maybe you guys could help out. For example, a switch from json:

Code: Select all

"AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 255,
         "CustomImage" : 0,
         "Data" : "Off",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 2,
         "HardwareName" : "RFXCom",
         "HardwareType" : "RFXCOM - RFXtrx433 USB 433.92MHz Transceiver",
         "HardwareTypeVal" : 1,
         "HaveDimmer" : true,
         "HaveGroupCmd" : true,
         "HaveTimeout" : false,
         "ID" : "0F7E8A2",
         "Image" : "Light",
         "IsSubDevice" : true,
         "LastUpdate" : "2016-10-04 13:08:46",
         "Level" : 0,
         "LevelInt" : 0,
         "MaxDimLevel" : 15,
         "Name" : "Block",
         "Notifications" : "false",
         "PlanID" : "0",
         "PlanIDs" : [ 0 ],
         "Protected" : false,
         "ShowNotifications" : true,
         "SignalLevel" : "-",
         "Status" : "Off",
         "StrParam1" : "",
         "StrParam2" : "",
         "SubType" : "AC",
         "SwitchType" : "On/Off",
         "SwitchTypeVal" : 0,
         "Timers" : "false",
         "Type" : "Lighting 2",
         "TypeImg" : "lightbulb",
         "Unit" : 1,
         "Used" : 1,
         "UsedByCamera" : false,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "13"

That inserted into the switches section in settings.js should be:

Code: Select all

    ['13', 'Data', 'cell1', 'Block', 'onbutton'],//onbutton = only push on

But nothing, I've tried all the options I could figure out with no luck.

Same goes with my thermometers:

Code: Select all

"AddjMulti" : 1.0,
         "AddjMulti2" : 1.0,
         "AddjValue" : 0.0,
         "AddjValue2" : 0.0,
         "BatteryLevel" : 100,
         "CustomImage" : 0,
         "Data" : "8.3 C",
         "Description" : "",
         "Favorite" : 1,
         "HardwareID" : 2,
         "HardwareName" : "RFXCom",
         "HardwareType" : "RFXCOM - RFXtrx433 USB 433.92MHz Transceiver",
         "HardwareTypeVal" : 1,
         "HaveTimeout" : false,
         "ID" : "8800",
         "LastUpdate" : "2016-10-04 15:42:02",
         "Name" : "Outer_temp",
         "Notifications" : "false",
         "PlanID" : "0",
         "PlanIDs" : [ 0 ],
         "Protected" : false,
         "ShowNotifications" : true,
         "SignalLevel" : 7,
         "SubType" : "Viking 02811/02813, Proove TSS330",
         "Temp" : 8.300000000000001,
         "Timers" : "false",
         "Type" : "Temp",
         "TypeImg" : "temperature",
         "Unit" : 0,
         "Used" : 1,
         "XOffset" : "0",
         "YOffset" : "0",
         "idx" : "12"

That in other devices should look something like:

Code: Select all

      ['12', 'Temp', 'cell10', 'Ulkolampo', 'Ulko', '#C0382B'],

Again, nothing anywhere but don't know where's the problem.

Even the log page is empty, maybe there's an issue the Domoticz connection. Or something. Any advice would be highly appreciated.

[stavroshamster]

I have managed to hack in a thermostat SetPoint adjustment function into the frontpage.html file by modifying a 'dash-unit' div as follows:

Code: Select all

<div class="dash-unit">
		    <dtitle id="desc_cell54"></dtitle>
                    <hr>
		    
                    <div class="info-user">
                        <span aria-hidden="true" class="info-user"></span>
                    	</div>
				<br/>
				<div style="text-align:center"><div class="btnnew" style="font-size:20px; margin-right: 5px" id="tempup">UP</div><div class="btnnew" style="font-size:20px" id="tempupone">+1</div></div> 
				</br>
                    		<div style="text-align:center;font-size: 60px" id="insert"></div>
				</br>
		    		<div style="text-align:center"><div class="btnnew" style="font-size:20px; margin-right: 5px"  id="tempdown">DOWN</div><div class="btnnew" style="font-size:20px" id="tempdownone">-1</div></div>
                    	</div>
            	</div>

Then there is some JavaScript code to read the SetPoint and pass it to the 'insert' div, noting that the '11' here is the position of the thermostat in the resulting JSON information:

Code: Select all

<script>

	$.ajax({
		url: 'http://<DOMOTICZ URL & PORT>/json.htm?type=devices&jsoncallback=?',
		async: false,
		dataType: 'json',
		success: function(data){}
	});
	var myjson = data.result[11];
        var res = myjson.Data;
	var value = parseFloat(res);
                
	pass = value.toString();
	document.getElementById("insert").innerHTML = pass;

</script>

For each button, I have some further script which modifies the SetPoint value by first reading it using the JSON API, and then sending a new value (noting that the '9' in the URL here is the idx number of my thermostat) e.g.:

Code: Select all

<script>
	document.getElementById("tempup").onclick = function() {myFunction1()}
	
	
	function myFunction1() {
		
		          
		$.ajax({
			url: 'http://<DOMOTICZ URL & PORT>/json.htm?type=devices&jsoncallback=?',
			async: false,
			dataType: 'json',
			success: function(data){
			var n = noty({
						text: 'Setpoint adjusted - please wait for update',
						type: 'success'
					});
				}
		});
		
		
		var myjson = data.result[11];
                var res = myjson.Data;
		var value = parseFloat(res);
                value = value + 0.5;
		pass = value.toString();
		document.getElementById("insert").innerHTML = pass;	
  			
		var jurl = 'http://<DOMOTICZ URL & PORT>/json.htm?type=command&param=udevice&idx=9&nvalue=0&svalue=' + pass;
		$.ajax({
			url: jurl,
			async: true,
			dataType: 'json',
			success: function(){
			
			}
		});
	
	

        }
</script>

For other buttons you just modify the function name, the 'id' and the amount you modify the 'value' variable by whatever amount you want to adjust by.

The visual result is:

example.png (4.37 KiB) Viewed 5826 times

It's worth stating that I am very inexperienced with both javascript and HTML so there are certainly likely to be many improvements that could be made to make it more efficient! However, I thought I would share anyway!

[johansson]

For the switch have you tried replacing 'onbutton' with 'button'?

Oh my - it worked! Don't know what I dis, but to my surprise the switch along the logs etc appeared. Hallelujah, now I'm not gonna touch it anymore Thanks.

Tried that, no luck though.

Could this be authorisation related issue: nothing Domoticz -related is showing (logs, switches, even Raspberry memory usage), but both internal and external webcams are displayed correctly, as well as traffic, news feeds...

Thanks for the tip, anyhow,

[satanasinc]

Spoiler: show

I have managed to hack in a thermostat SetPoint adjustment function into the frontpage.html file by modifying a 'dash-unit' div as follows:

Code: Select all

<div class="dash-unit">
		    <dtitle id="desc_cell54"></dtitle>
                    <hr>
		    
                    <div class="info-user">
                        <span aria-hidden="true" class="info-user"></span>
                    	</div>
				<br/>
				<div style="text-align:center"><div class="btnnew" style="font-size:20px; margin-right: 5px" id="tempup">UP</div><div class="btnnew" style="font-size:20px" id="tempupone">+1</div></div> 
				</br>
                    		<div style="text-align:center;font-size: 60px" id="insert"></div>
				</br>
		    		<div style="text-align:center"><div class="btnnew" style="font-size:20px; margin-right: 5px"  id="tempdown">DOWN</div><div class="btnnew" style="font-size:20px" id="tempdownone">-1</div></div>
                    	</div>
            	</div>

Then there is some JavaScript code to read the SetPoint and pass it to the 'insert' div, noting that the '11' here is the position of the thermostat in the resulting JSON information:

Code: Select all

<script>

	$.ajax({
		url: 'http://<DOMOTICZ URL & PORT>/json.htm?type=devices&jsoncallback=?',
		async: false,
		dataType: 'json',
		success: function(data){}
	});
	var myjson = data.result[11];
        var res = myjson.Data;
	var value = parseFloat(res);
                
	pass = value.toString();
	document.getElementById("insert").innerHTML = pass;

</script>

For each button, I have some further script which modifies the SetPoint value by first reading it using the JSON API, and then sending a new value (noting that the '9' in the URL here is the idx number of my thermostat) e.g.:

Code: Select all

<script>
	document.getElementById("tempup").onclick = function() {myFunction1()}
	
	
	function myFunction1() {
		
		          
		$.ajax({
			url: 'http://<DOMOTICZ URL & PORT>/json.htm?type=devices&jsoncallback=?',
			async: false,
			dataType: 'json',
			success: function(data){
			var n = noty({
						text: 'Setpoint adjusted - please wait for update',
						type: 'success'
					});
				}
		});
		
		
		var myjson = data.result[11];
                var res = myjson.Data;
		var value = parseFloat(res);
                value = value + 0.5;
		pass = value.toString();
		document.getElementById("insert").innerHTML = pass;	
  			
		var jurl = 'http://<DOMOTICZ URL & PORT>/json.htm?type=command&param=udevice&idx=9&nvalue=0&svalue=' + pass;
		$.ajax({
			url: jurl,
			async: true,
			dataType: 'json',
			success: function(){
			
			}
		});
	
	

        }
</script>

For other buttons you just modify the function name, the 'id' and the amount you modify the 'value' variable by whatever amount you want to adjust by.

The visual result is:

example.png

It's worth stating that I am very inexperienced with both javascript and HTML so there are certainly likely to be many improvements that could be made to make it more efficient! However, I thought I would share anyway!

Hi!

stavroshamster i have been trying your code without luck. I modified de code in frontpage.html only. I this correct?
Can you post your frontpage.html as example.
Thank you in advanced.

Greetings from spain!

[sorampage]

Hi all,

It's possible to add Blinds ??
I have some switches in my Domoticz for my blinds, I have 1 ID per Blinds, but 3 switches for one blind ... (Open,Stop,Close) PJ

If anyone has an idea ..

Hi all,
Someone can help me ?

[DaWauZ]

does it work with mi lights rgb too, instead of hue?

[SwordFish]

I want to put 2 donut charts in one dash-unit for temp and Humidity. I have try several things but i cannot get it done. Is there someone that can help or has this already done?

[denisj]

Hi there
this frontpage is wonderfol

So I want to ask... can be this frontpage adapted to a tablet form please ?

Thanks in advance
Denis

[seblang]

Hi

I am new and i am trying to use this fabulous frontpanel but I nothing appear on it.
I have this kinf of error in Domoticz error log :

Error: Webserver: File '/FlatZ-Frontpage/undefined/json.htm': No such file or directory (2)

can some body help me?
thanks in advance
regards
sebastien

[Siewert308SW]

@galadril
Any change the frontpage is updated again?
As someone asked it a couple of months ago.
But the graphs aren't working any more for Youless devices (atleast) since something changed on the Domoticz side months ago.

[seblang]

Hi no feedback about this issue?

Error: Webserver: File '/FlatZ-Frontpage/undefined/json.htm': No such file or directory (2)

I have check in Chrome console and have always the same message see enclosed file

please help me
thanks

[jhenrikb]

Hello.
Kind of noob question here.
Is there any special way to unzip the files into the WWW folder on the raspberry pi? or does it work on a raspberry pi at all?
I have tried to install this frontpage, Dashticz, and many others without success.
Domoticz only show "domoticz offline" which I guess is the same as a white page people used to get.

I download the package on my comp, unzip it, change whatever Config or setting while I need to according to the guidance.
Add in my local Raspi3 IP and port.

but still I seem to get the offline thing.

Anyone know why?

I edit the files in windows and upload it through filezilla, then "sudo reboot".

sincerely
John

[denisj]

If I remember there is a unzip command on raspberry
try
unzip filename.zip

Denis

[Zahariac]

I am now busy getting everything to work. And I must say it is a great frontpage!

But I still have trouble with 2 things:

The news api doesn't work, tried serveral rss feeds

I do not see how I can setup the camera page to 4 camera's instead of 6. If I delete some of the div's it deletes the squares but still remains the same size. (hope that I made myself clear).