NEW frontpage.html - request comments

[domoticzfanman]

All coding and pages can be found in my Dutch Forum including instructions in Dutch.

https://contactkring.nl/phpbb

[Mozart]

All coding and pages can be found in my Dutch Forum including instructions in Dutch.

https://contactkring.nl/phpbb

Thanks!

[iTDB]

frontpage.html is not displayed correctly from domoticz.

2020-05-07 12_53_44.png (2.54 KiB) Viewed 6288 times

Domoticzurl = hostname:8080
* html on windows pc everything is shown.
* html on domoticz is not shown (see above)
On Raspberry via vnc viewer in browser:
* html is not shown (see above)
* http://mydomoticz:8080/json.htm?type=devices&plan=0 the browser shows data

Anyone have an idea what's going wrong?

[domoticzfanman]

Have you tried your own ip of the raspberry and is the idx set correctly ?

[iTDB]

Found it. There was an error in the html file. Copied to Windows desktop and was also wrong view.
Now he is doing well.

2020-05-08 16_55_04.png (25.71 KiB) Viewed 6265 times

[barts2108]

To all frontpage desingers...

I just started to discover the frontpage following the original frontpage.html and because I "have the need for speed" I set the refresh interval to 1 seconds. Surprisingly my browser memory usage sky rocket to over 10GB

I have done some quick debugging, and found that the refreshTimer is started BEFORE the getJSON() has recevied its reply. Of course that leads to a race condition in both memory usage and CPU load. Below the snippets of the RefreshData() inside the frontpage.html

Code: Select all

	
$.getJSON(jurl,
{
	format: "json"
},
function(data) {
	console.log("reply received");
	if (typeof data.result != 'undefined') {
		// Code left out because of not being trivial to the problem
	}
});
console.log("timer restarted)
$.refreshTimer = setInterval(RefreshData, 10000);

With the console.log you can see that the timer is restarted before the reply is received, making faster update times giving problems.
Below snippet shows .done, .fail and .always that can be used to execute code when the received reply is handled, a failure happend or when everything is complete.

Code: Select all

$.getJSON(jurl,
{
	format: "json"
},
function(data) {
	if (typeof data.result != 'undefined') {
		// Code left out because of not being trivial to the problem
	}
}).done(function(){;
	console.log("second success");
}).fail(function() {
	console.log( "error" );
}).always(function() {
    	console.log( "complete" );
	$.refreshTimer = setInterval(RefreshData, 10000);
});		

Furthermore there I think there is no need to get the length of the PageArray in the for loop where len is even in the global namespace.

Code: Select all

for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {

can be simply replaced with

Code: Select all

for( var ii = 0; ii < $.PageArray.length; ii++ ) {

or if you really like to use a len variable do like this:

Code: Select all

var len = $.PageArray.length;
for( var ii = 0; ii < len; ii++ ) {

Further optimization may be done by changing the for loop inside the $.each(). When you have 1000 indexes and 14 items in the PageArray, this will execute the forloop 1000 times. Regardless if an index is found in the PageArray, the forloop runs always over all items.
It might be better sort the PageArray, then loop all 14 items of the PageArray and find the data in the data.result.

$.each() { forloop PageArry } --> 1000 * 14 = 14000 iterations (always) before it is ready.
forloop PageArray { loop items } --> 1000 * 14 = 14000 iterations worst case. Worst case is only when all PageArray items have the idx of the last item in the $.each(), which normally won't be the case.

I will check if is better for performance to convert the received json data into an object and build a dictionary with it.

[barts2108]

The $.each() with the nested for loop could be replaced with something like this:

Code: Select all

$.each($.PageArray, function(i, item) {
	var vtype=item[1];
	var vlabel=item[2];
				
	var idxIndex = dataObject.map(function(x) { return x.idx; }).indexOf(item[0]);
	if (idxIndex != -1) {
		var vdata=dataObject[idxIndex][vtype];
	}

	var vstr = "";
	if (typeof vdata == 'undefined') {
		vstr="??";
	}
	else {
		vstr=vdata.toString().split(" ",1)[0];
	}
	$('#'+vlabel).html(vstr);
		
});

Note that I also changed the line (not creating a new string object)

Code: Select all

vdata=new String(vdata).split(" ",1)[0];

On my system I have only 91 entries in the data returned from the getJSON and I do not see much difference in performance. Receiving the data takes more time than handling it. However on systems that contain much more data in the JSON it may help to improve performance.

[barts2108]

Please all take a read on https://developer.mozilla.org/en-US/doc ... ributes/id

And take another look at the frontpage.html (the oringal file but also the newer updated ones)

Code: Select all

<div id="frame">
	<div id="cycb" style="font-size:40px;">--</div>
	<div id="label_lg">Temp Floorheat In</div>
</div>
<div id="frame">
	<div id="cyce" style="font-size:40px;">--</div>
	<div id="label_lg">Temp Floorheat Out</div>
</div>
<div id="frame">
	<div id="state" style="font-size:40px;">--</div>
	<div id="label_lg">Hvac State</div>
</div>
<div id="frame">
	<div id="tmpb" style="font-size:40px;">--</div>
	<div id="label_lg">Temp Hot Water</div>
</div>

All div's with id="frame" violate the html spec. It would be much better to use class="frame" and change the #frame css to .frame

[jvonzastrow]

What value format to use for LUX
//format: idx, value, label, description, [override css], [alarm value]
Is there somewhere a list of all supported value format to use. EX Temp, Status, Humidity...?

[dreamer76]

When I want to display a selector, I don't see a name.
It then indicates undifined and does not indicate a level name.
Does anyone know where I should look for this.

[Cdzn]

What`s a problem. Can`t see anything in simple html from first page.

this is in FP setting:

Spoiler: show

$(document).ready(function() {
$.roomplan=5; // define roomplan in Domoticz and create items below.
$.domoticzurl="localhost:8080";
//format: idx, value, label, description, [override css], [alarm value]
$.PageArray = [
['34', 'Temp', 'TEST', 'Woonkamer (ºC)', 'color:darkorange', '>25'],
['65', 'Temp', 'TEST', 'Woonkamer (ºC)', 'color:darkorange', '>25'],
['60', 'Temp', 'TEST', 'Woonkamer (ºC)', 'color:darkorange', '>25'],
['66', 'Temp', 'TEST', 'Woonkamer (ºC)', 'color:darkorange', '>25'];

Spoiler: show

Снимок экрана 2021-12-24 211241.jpg (187.25 KiB) Viewed 4893 times

asdad.jpg (113.72 KiB) Viewed 4893 times

[edwin1234]

Does someone know how to show just two
Devices in the screen?
Gas usage and electric usage so just two big blocks
Can someone please explain
Thanks

[pwhooftman]

SOLVED, replace
/json.htm?type=command&param=getdevices&plan="+$.roomplan+"&jsoncallback=?
with
/json.htm?type=devices&plan="+$.roomplan
in the html code

After upgrading from the november 2022 to the february 2024 version, none of the values are retrieved anymore. I tried enabling 'allow plain text auth over http', and my LAN ip address range is in the trusted networks. Also the json call to retrieve all devices in the designated roomplan still works when called from a browser, but the fornmtpage.html isnt working anymore and i don't understand where to look further.

[Filnet]

Hello

I try using custom.html. On my Macbook through Safari or Firefox, this page is visible but no parameters is updated. They are empty.
But using Safari on my iphone or ipad, the page is OK.
I don't understand why...

"http://192.168.-.--:8080/json.htm?type=command&param=getdevices&plan=9" show a correct JSON.

domoticz on RPI.

[waltervl]

Hello

I try using custom.html. On my Macbook through Safari or Firefox, this page is visible but no parameters is updated. They are empty.
But using Safari on my iphone or ipad, the page is OK.
I don't understand why...

"http://192.168.-.--:8080/json.htm?type=command&param=getdevices&plan=9" show a correct JSON.

domoticz on RPI.

Did you recently change the frontpage to get new API commands?
Then clear your browser cache. You can also try to connect with a browser session in private/incognito mode.

[Filnet]

thanks for your post.

Cleaning cache on Safari was the solution. (I thought I had doing this yesterday...)
But no action on firefox, parameters leaves empty. Not better with private connection.

[waltervl]

Then it still seems to be caching issue in Firefox. Clean better....

[Filnet]

I cleaned the cache several times...

I finally found the issue: Firefox had protect the access... Unprotect option for the IP of my domoticz does the job...

Thanks again for your quick help.

[brugje]

Hallo, I have a problem with my frontpage. I switched from open zwave to zwave-JS. Now my dummy sensors won't show on my frontpage.

If I put this code in at // remove too much text

Code: Select all

vdata=new String(vdata).split(" ",1)[0];

then it shows all my data of the dummy sensors but the value of my dimmer switches are gone and replaced by Set, and my date and time, only the date is showing not the time anymore

Who has a solution that I can try

Greetings Jan

[waltervl]

Hallo, I have a problem with my frontpage. I switched from open zwave to zwave-JS. Now my dummy sensors won't show on my frontpage.
......
Greetings Jan

That should not be related. I think you also updated Domoticz to a new version and new Domoticz version have gone through some API changes. See the warning in the wiki https://www.domoticz.com/wiki/Domoticz_ ... d_newer.29