NEW frontpage.html - request comments

[Firemen112]

Did anyone integrate a color selector for HUE of other RGB/RGBW dimmers in this frontpage?

[teha]

I use a picture of the camera on the frontpage and when I click on the picture it opens the live stream in a popup. For the live stream the stream of Domoticz is used.
This is the code I am using in frontpage.html for the popup:

Code: Select all

<div id="popup_camera"><img src="http://ip:port/camsnapshot.jpg?idx=2&t=" onClick="lightbox_close('camera');" width="640" height="480" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 100)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='bigcamera' /></div>

Idx 2 is the idx of the camera.
Maybe this can help you?

Basically this did the trick indeed.

Hi guys,

Have been wrestling with this frontpage for quite a few days now. I'm almost there I guess...
I can't seem to get my Foscam working. I followed all the steps, including the one above. But I don't see a snapshot of the camera in the frontpage.
I have used this:

Code: Select all

src="http://192.168.1.153:8084/camsnapshot.jpg?idx=1&t="  onClick="lightbox_close('camera2');" width="720px" height="480px" onload='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 15000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' class='' /></div>
<div id="fade"></div>

But when I do, I get a blank frame in the cell (the one with the torn paper; missing picture kind-a-thing). The strange thing is, when I enter the URL directly in my browers, a perfect snapshot is downloaded to my PC.
This URL:

Code: Select all

http://192.168.1.153:8084/camsnapshot.jpg?idx=1&t=

When I click the frame, the popup appears, but with the snapshot, no streaming video.... What am I missing here?? Driving me nuts...

so I manage to get the foscam working with the following in frontpage.html

<div id="popup_camera"><img src="http://192.168.200.195:88/cgi-bin/CGIPr ... setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 1000)' onerror='setTimeout(function() {src = src.substring(0, (src.lastIndexOf("t=")+2))+(new Date()).getTime()}, 5000)' alt='' onClick="lightbox_close('camera');" width="640" height="480" /></div>

this code is for the popup

<div id="ls_cell3"></div><div id="cell3">
<img src="http://192.168.200.195:88/cgi-bin/CGIPr ... d=password" onClick="lightbox_open('camera', 25400);" width="200px" class='camera' /></div>

and this is for display in the normal frame

hope it will work for you too

[teha]

thanks!

That indeed did the trick for me! Thanks!

Next (and last) hurdle for me is the combination of zwave and kaku dimmers. I've used the last frontpage jannl posted in this thread. Kaku dimmers work like a charm. I can dim from 1 to 100%.

Zwave dimmers start somewhere around 19, and go back to 1 no matter which button I push. Once on "1" they are not changing value anymore.
Someone some clever thoughts about that maybe?

I have a zwave Fibaro dimmer and use the following in the frontpage_setting.js file

['202','Level', 'cell12', 'TV Rum Tak','0','5'],

works like i charm

I use the same format for my PhilipsHue devices and all are good

[teha]

I use the version from g3rard on github

think the 5 is the inc/dec in percent for the dimming

[cever]

Hi All,

I've been working with Domoticz for a couple of months now without any problem, so I tried to experiment with this great 'frontpage.html'.
Everything excepts my z-wave dimmers are working ( 26 Somfy RTS blinds, S0 Meters, kaku's, ...)
These are my findings :
- If the z-wave dimmer is on, the correct value is displayed in the frontpage
- Whenever I press '+' or '-' the value and the light changes to '20'
- If I press the '+' button, then I see this in the log : 2016-06-17 07:52:11.134 OpenZWave: Domoticz has send a Switch command!, Level: 15, NodeID: 2 (0x02)
- If I press the '-' button, then I see this in the log : 2016-06-17 08:19:08.425 OpenZWave: Domoticz has send a Switch command!, Level: 17, NodeID: 2 (0x02)
- Changing the dimmer values in the 'regular' dashboard gives me this :
- 2016-06-17 08:20:38.836 OpenZWave: Domoticz has send a Switch command!, Level: 27, NodeID: 2 (0x02)
- 2016-06-17 08:20:39.566 OpenZWave: Domoticz has send a Switch command!, Level: 40, NodeID: 2 (0x02)
- 2016-06-17 08:20:42.005 OpenZWave: Domoticz has send a Switch command!, Level: 75, NodeID: 2 (0x02)
- Switching on or off works fine ...
- My dimmers are Qubino DIN rail dimmers
So I'm a bit puzzled, do you have any suggestions ?

Many thanks,
Chris

[racquemis]

Great FrontPage,
This is what i currently have setup:

Made some changes to the css files to better fit 10 inch tablets (1280x800) and added support for Selector switches

Here the code for the selector switches if anyone is interested
Just add the following above the text "//Blinds" in the FrontPage.js file

Code: Select all

	//Selector Switches
	if(vtype == 'Selector') {
		vdata= item['Level']; //added to show setpoint in stead on or off

		var lvlnames = item['LevelNames'].split("|"); 
		var lvlindex;
		if (item['Level'] =='0'){
			lvlindex = 0;
		}
		else{
			var temp = item['Level'] + "";
			lvlindex = temp.slice(0, -1);
		}
		var LevelName = lvlnames[lvlindex];
		var hlp = '<span style='+vattr+'>'+ LevelName+'</span>';
		var vplusmin05 = '10'; //added to set setpoint with 10 steps
		var plus = "<img src=icons/up2.png align=right vspace=12 width=30 onclick=BlindChangeStatus('plus'," +vdata+ "," + item.idx + ")>";
		var min = "<img src=icons/down3.png align=left vspace=12 width=30 onclick=BlindChangeStatus('min'," +vdata+ "," + item.idx + ")>";
		//console.log(vdata);
		vdata = min.concat(hlp,plus);
	}

Then in FrontPage-settings.js use something like this:

Code: Select all

['148','Selector',	'cell13',	'Spotify Playlist','0','5'],

[Purejet]

I've added the frontpage.html and all other files inside the root www folder.
But it keeps reloading and won't get an connection with my domtoticz. I've changed the url on several methods, but won't work.
It keeps saying: Uncaught SyntaxError: Invalid or unexpected token inside Chrome.

Anyone know what i can do to solve this?

[teha]

I'm switching over to the frontpage from G3rard, works great.
Now I would like to use some images for my PIR's in a couple of cells.

I have no coding skills whatsoever, so I'm looking at the rest of the script and try to accomplish something

I have added this lines to frontpage.js:

Code: Select all

	//replace pir with icon
	if (item.idx == idx_pirspeelkamer && vdata == txt_on){
		vdata=new String(vdata).replace( txt_on, "<img src=icons/motion48-on.png");
	}
	if (item.idx == idx_pirspeelkamer && vdata == txt_off){
		vdata=new String(vdata).replace( txt_off, "<img src=icons/motion48-off.png");
	}

and this line to frontpage_settings.js (at the top, amongst the other 'special items')

Code: Select all

var idx_pirspeelkamer = '258';

And changed this line in the user-settings of frontpage_settings.js:

Code: Select all

['258','Status',		'cell2_7',	'Motion speelkamer','0','4'],

Now the text in the cell has vanished, but there is now image. I only see a litte box where the image should be....And yes, the icons are placed in the icons-folder

Can someone figure out my mistake here?

Try replacing txt_on with "On" and txt_off with "Off", the value for vdata must be what you find when

http://yourIP:8080/json.htm?type=devices&rid=XX

where XX is your device number

and result for the "Data" section in the returnvalue

look at the idx_sunstate section of the code, hope this will help you in the right direction

[G3rard]

Great FrontPage,
This is what i currently have setup:
Made some changes to the css files to better fit 10 inch tablets (1280x800) and added support for Selector switches

Here the code for the selector switches if anyone is interested
Just add the following above the text "//Blinds" in the FrontPage.js file

Code: Select all

	//Selector Switches
	if(vtype == 'Selector') {
		vdata= item['Level']; //added to show setpoint in stead on or off

		var lvlnames = item['LevelNames'].split("|"); 
		var lvlindex;
		if (item['Level'] =='0'){
			lvlindex = 0;
		}
		else{
			var temp = item['Level'] + "";
			lvlindex = temp.slice(0, -1);
		}
		var LevelName = lvlnames[lvlindex];
		var hlp = '<span style='+vattr+'>'+ LevelName+'</span>';
		var vplusmin05 = '10'; //added to set setpoint with 10 steps
		var plus = "<img src=icons/up2.png align=right vspace=12 width=30 onclick=BlindChangeStatus('plus'," +vdata+ "," + item.idx + ")>";
		var min = "<img src=icons/down3.png align=left vspace=12 width=30 onclick=BlindChangeStatus('min'," +vdata+ "," + item.idx + ")>";
		//console.log(vdata);
		vdata = min.concat(hlp,plus);
	}

Then in FrontPage-settings.js use something like this:

Code: Select all

['148','Selector',	'cell13',	'Spotify Playlist','0','5'],

Thanks for the Selector switch code.
I changed it a bit so when you click on the text it switches on to level 10 and plus and min buttons are not shown when switch is off.
Also added a check to see if max level is reached, then clicking the plus button won't do anything.
And clicking on the On text switches it off.

Code: Select all

//Selector Switches
	if(vtype == 'Selector') {
		vdata = item['Level']; //get current level
		var lvlnames = item['LevelNames'].split("|"); //get all levels
		var countlevels = item['LevelNames'].split("|").length-1; //count the number of levels
		var lvlindex;
		if (item['Level'] == '0'){
			lvlindex = 0;
		}
		else {
			var temp = item['Level'] + "";
			lvlindex = temp.slice(0, -1);
		}
		var LevelName = lvlnames[lvlindex];
		if (LevelName == 'Off') {
			LevelName = txt_off;
		}
		if(lvlindex == 0) { //switch is off
			//allow button to switch on
			var hlp = '<span onclick="BlindChangeStatus(\'plus\', '+vdata+', '+item.idx+');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+LevelName+'</span>';
			var plus = ""; //no up when switch is off
			var min = ""; //no down when switch is off
		}
		else { //switch is on
			if (lvlindex == countlevels) { //max level, don't allow plus button to go to next level which isn't there
				var plus = "<img src=icons/up.png align=right vspace=12 width=30>";
			}
			else {
				var plus = "<img src=icons/up.png align=right vspace=12 width=30 onclick=BlindChangeStatus('plus'," +vdata+ "," + item.idx + ")>";
			}
			var min = "<img src=icons/down.png align=left vspace=12 width=30 onclick=BlindChangeStatus('min'," +vdata+ "," + item.idx + ")>";
			//allow button to switch off
			var hlp = '<span onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+LevelName+'</span>';
		}
		//console.log(vdata);
		vdata = min.concat(hlp,plus);
	}

[Robertn]

Hallo I have two question

How can I support the nest thermostat so I can set the temperature, with a “+” and “-“ button.

And 1 have a P1 smart meter.
In domoticz I can see my gas use per day.
In the FrontPage I only see the total use of my gas. How do i get the day used information?

BTW I love this frontpage

Thanks in advanced Robert

[peterz010]

Hello,

I'm not able to open the updated frontpage.html from the internet. When i visit the webpage i just see the standard layout with the cell numbers and buienradar but not anything i changed. On my local network it works like a charm!
What can it be? The Domoticz port is open so i don't think its a port problem.

Thnx,

Peter

[Robertn]

Hallo I have two question

How can I support the nest thermostat so I can set the temperature, with a “+” and “-“ button.

And 1 have a P1 smart meter.
In domoticz I can see my gas use per day.
In the FrontPage I only see the total use of my gas. How do i get the day used information?

BTW I love this frontpage

Thanks in advanced Robert

For total amount of gas you have to use the input from "Data" or "Counter", for the day consumption you have to use "CounterToday". See the difference in the idx-output from my P1 gasmeter

Thanks The gas meter works well.

Robert

[G3rard]

Maybe the idx of idx_firespeelkamer is already present in frontpage_settings for another item.
Probably for an item with usage looking at the kwh?

[jannl]

The png is present in the icons directory?
Access rights of the png are correct?

[Firemen112]

Did anyone integrate a color selector for HUE of other RGB/RGBW dimmers in this frontpage?

[franzelare]

I have been looking for the same, tried with a few color buttons on a page but removed again because i didn't like it

[Nautilus]

Hi,

what is the best / safest way to merge the files from ../www/frontpage to ../www so that I will not break anything on the normal ui (my os is raspbian wheezy, more specifically the version coming with the domoticz image for RPi where the frontpage files were ready in ../www/frontpage directory - I assume they are more or less the same as in the github repo as well)?

Is there anything that would be replaced in the current ../www/css / js / images etc. directories or those are all "unique" files when compare to these? Will normal Domoticz updates affect the content of these directories?

[jannl]

Basically they are all unique files. Frontpage file do not exist in a clean installation. To be sure, first make a backup of your www directory incl. subdirectorys.

[Nautilus]

Basically they are all unique files. Frontpage file do not exist in a clean installation. To be sure, first make a backup of your www directory incl. subdirectorys.

Thanks for the info! And just to be sure, they (frontpage files when moved into ../www directory) do not get removed in an update either?

[jannl]

No. Not untill now. I make a daile backup of the www and scripts directory