NEW frontpage.html - request comments

[trekker25]

I have a different question. I see people using the CounterToday type to get the current usage of power/gas. But do i need to define a switch for this??

I saw this is already answered on Tweakers by Thinkpad. The utilities can be used on frontpage as well.
Example from Thinkpad:

Code: Select all

['6','CounterToday',            'cell4',        'Elektra vandaag (kWh)','1','0'],
['7','CounterToday',            'cell5',        'Gas vandaag (m<sup>3</sup>)','1','0'],

yup found out about it!

Am i correct that on the second panel there is a small layout error?

the bottom row and the row above that have a little larger space between, and this makes the layout go off screen (scrolling). //FIXED this, put some characters in the wrong place!


Anyone found out how to put a 3 hour weather prediction of Buienradar on the Frontpage? Prefer that above the 1 hour animation.

[ThinkPad]

G3rard,
Super bedankt nu werkt het.

http://i60.tinypic.com/30a8kef.jpg

Echt mooi!
Na heel wat gepuzzel nu dan toch met jouw hulp werkend.
Het schakelen werkt ook prima nu!

Groet
Juan

Nice that you got it working.

Next time please post in English, this is an English orientated forum, see forum rules
And you can make your screenshots smaller by using the 'Snipping Tool' in Windows ('Knipprogramma' in Dutch versions of Windows).

[JuanUil]

sorry for the Dutch in the post.
normally I post in englisch,
maybe i was a bit overenthousiast by the fact that I finally got it working.
Grtz. Juan

[trekker25]

For anyone who wants a direct link to the Sonos App from the Frontpage (android tablet required!) use this code:

Code: Select all

['0','Link',            'cell20',                       '<a href="intent://scan/#Intent;scheme=sonos;package=com.sonos.acr;end"><img src="sonos.png"></a>'],

[trekker25]

http://pastebin.com/GpUvApEL

What I also changed:
* Add grey background when item is a switch and not protected
* Protected switches are not switchable
* Popup when pressing a protected switch
* Frontpage is now a webapp when you save it to homescreen on Android/IOS
* Support for webcam image
* Offline image when webcam is not reachable
* Buienradar as image also possible

So if someone want's to add it to their page, feel free to check the code.

frontpage.jpg

bizziebis, is your method of a continuos snapshot reading also possible for a Popup? (for an enlarged view)?

EDIT i already realised the snapshot taking is kinda heavy for my RPi, better trying if i can get a stream url directly from my Foscam!

I have added a IsDark switch and adjusted the correct idx :
var idx_SunState = '113';
var idx_IsDonker = '113'; <!-- for day night css -->

but still only the night css is showing. What am i missing.
Can i easily what this variable
var IsNight = 'No';
during execution of the webpage in the console? Don't see any error logs in the console

EDIT even when i use this code:

Code: Select all

	// change CSS file, depending on sunset and sunrise using virtual switch named IsDonker and set the var IsNight 
	if(item.idx == idx_IsDonker && vdata == 'Off'){
		document.getElementById('dark-styles').disabled  = true;				// day
		IsNight = 'No';
	}
	if(item.idx == idx_IsDonker && vdata == 'On'){
		document.getElementById('dark-styles').disabled  = false;				// night
		IsNight = 'No';
	}

or i make isNight 'Yes" in both if statements, doesn't make any difference?

[trekker25]

G3rard, do you run the Frontpage.html directly on a RPi and have PHP enabled for it?

Problem is: i'm running the frontpage.html on port 8080 on the RPI, but as PHP was not activated on it, I was running the Sonos commands from my Qnap NAS.

But if you want to use the Sonos Volumes options, i needed to do something "clever"

url: "http://172.16.0.3/sonos/index.php?zone=" + idx + "&action=VolumeDown", //172.16.0.3 is my NAS.

Problem is that the chrome browser on Android doesn't allow this:

you get a "Allow-Control-Allow-Origin: *" error. On Chrome for Windows this can be fixed with an add-on but this doesn't exist for Chrome Android.

What would be the best way:

- run frontpage.html from my Qnap apache server?
- enable php/apache on the RPi?

[G3rard]

Best way is to run the frontpage on your NAS. I am doing that as well.
It also prevents that you loose frontpage files and settings when upgrading Domoticz (at least on Synology the www folder is completely removed when you upgrade).

[ThinkPad]

Best way is to run the frontpage on your NAS. I am doing that as well.
It also prevents that you loose frontpage files and settings when upgrading Domoticz (at least on Synology the www folder is completely removed when you upgrade).

Just what i did today. Before i always had my frontpage residing in the Domoticz folder and sometimes i lost stuff (images and such) after a Domoticz upgrade. But now i safely have it in /volume1/web/frontpage/

By the way, i just found out that with Firefox debug tools (press F12) you can see how much each component needs to load. I thought i had stripped out Buienradar (i find it annoying, the moving picture in the corner of my eye while watching TV), but Firefox showed that something was still being loaded from buienradar.nl, which took 100mSec. Now completely stripped out.
By looking at that chart (tab 'Network') you can optimize loading time of a webpage, very useful.

*note to self: don't forget to include /volume1/web/frontpage/ in backupscript

[G3rard]

I have added a IsDark switch and adjusted the correct idx :
var idx_SunState = '113';
var idx_IsDonker = '113'; <!-- for day night css -->

but still only the night css is showing. What am i missing.
Can i easily what this variable
var IsNight = 'No';
during execution of the webpage in the console? Don't see any error logs in the console

EDIT even when i use this code:

Code: Select all

	// change CSS file, depending on sunset and sunrise using virtual switch named IsDonker and set the var IsNight 
	if(item.idx == idx_IsDonker && vdata == 'Off'){
		document.getElementById('dark-styles').disabled  = true;				// day
		IsNight = 'No';
	}
	if(item.idx == idx_IsDonker && vdata == 'On'){
		document.getElementById('dark-styles').disabled  = false;				// night
		IsNight = 'No';
	}

or i make isNight 'Yes" in both if statements, doesn't make any difference?

You have to make a blockly for the IsDonker switch, see http://www.domoticz.com/forum/viewtopic ... 120#p36615.
That way the light theme will be used during daytime and otherwise the night theme will be used.

[trekker25]

I have added a IsDark switch and adjusted the correct idx :
var idx_SunState = '113';
var idx_IsDonker = '113'; <!-- for day night css -->

but still only the night css is showing. What am i missing.
Can i easily what this variable
var IsNight = 'No';
during execution of the webpage in the console? Don't see any error logs in the console

EDIT even when i use this code:

Code: Select all

	// change CSS file, depending on sunset and sunrise using virtual switch named IsDonker and set the var IsNight 
	if(item.idx == idx_IsDonker && vdata == 'Off'){
		document.getElementById('dark-styles').disabled  = true;				// day
		IsNight = 'No';
	}
	if(item.idx == idx_IsDonker && vdata == 'On'){
		document.getElementById('dark-styles').disabled  = false;				// night
		IsNight = 'No';
	}

or i make isNight 'Yes" in both if statements, doesn't make any difference?

You have to make a blockly for the IsDonker switch, see http://www.domoticz.com/forum/viewtopic ... 120#p36615.
That way the light theme will be used during daytime and otherwise the night theme will be used.

does it need to be done with a blockly? according to Thinkpad could also be done with a virtual switch with timer on sunset/sunrise.

but will do more testing/experimenting

[ThinkPad]

The Blockly is better, because timers only trigger once. If Domoticz was not running at that moment, the switch will flip the next day at it's earliest.
The Blockly will work always, even if Domoticz has been off for the whole day and you turn it on in the evening.

[bierlaagh]

To be honest I have several questions.

I'll start with the first 2

1. I use the frontage posted by @G3rard and it works fine.

But I would like to make a small adjustment to de big cells(3 and 25)

3 is the forecast and 25 is buienradar.
The forecast makes its own title (ie cloudy or sunny) I would like to see those texts the same color as my other cells (darker title, like cell 1 KAMER)

Knipsel.JPG (120.62 KiB) Viewed 3213 times

I cannot find where to adjust it (css?, js)
can anyone point me to the right direction?

The other question:
In de frontpage_settings.js there is a piece of script which fire a pop up when the doorbell is pressed.
But whatever I do. (Change ON to GROUP ON) I don't get a pop up.

I checked my browser and pop-ups are allowed

Hope someone can help

[G3rard]

You can adjust this in the css files. Add #bottom_cell3 and #bottom_cell25 in the 2 css files around line 110.

For the doorbell. I have just added some code in my frontpage.js for this.

Code: Select all

if (item.idx == idx_doorbell && vdata == doorbell_status) {
		lightbox_open('camera', 15400);
		vdata=new String(vdata).replace( "On", "Tringgg");
}

Put the values for idx_doorbell and doorbell_status in the frontpage_settings.js file.

[bierlaagh]

You can adjust this in the css files. Add #bottom_cell3 and #bottom_cell25 in the 2 css files around line 110.

For the doorbell. I have just added some code in my frontpage.js for this.

Code: Select all

if (item.idx == idx_doorbell && vdata == doorbell_status) {
		lightbox_open('camera', 15400);
		vdata=new String(vdata).replace( "On", "Tringgg");
}

Put the values for idx_doorbell and doorbell_status in the frontpage_settings.js file.

Thank you G3rard, you.ve pointed me to the right direction.
i previously added that to my CSS, but looking further i did not put the DIV ID bottom_cell3 in the FrontPage.html, therefore it did not work.

The doorbell is (unfortunately) still not working.
this is what i have in my FrontPage.js:

Code: Select all

if (item.idx == idx_doorbell && vdata == doorbell_status) {
      lightbox_open('camera', 15400);
      vdata=new String(vdata).replace( "On", "Tringgg");
}

like you mentioned
this is what i have in my FrontPage_settings.js:

Code: Select all

<!-- This triggers the camera PopUp when the doorbell is pressed -->
<!-- Text could be 'On', 'Group On' or 'Chime' -->
var doorbell_status = 'on';
var doorbel_idx = '21';
var doorbel_cmd = "lightbox_open('camera1', 15400);"

and this is what domoticz tells me when my doorbell is pressed...

Knipsel_db.JPG (12.86 KiB) Viewed 3146 times

is there something i did not see (i dubble checked if popups are enabled, and they are)

[G3rard]

In frontpage_settings you have doorbel_idx, change that to idx_doorbell and it should work.

Indeed the divs need to be there in the html file.

[trekker25]

For anyone that has a Foscam HD camera that doesn't offer a mjpeg stream directly: (for example my FI9853EP)

http://foscam.us/forum/how-to-fetch-sna ... t4328.html

Code: Select all

Fetching MJPEG stream by URL

There are two steps needed to fetch the MJPEG URL stream.

Step 1: Set one of the streams to MJPEG.

As the current chipset on HD camerasonly supports two H.264 streams (Mainstream and Substream), we need to set one of the streams to an MJPEG stream, as the chipset does not support three streams. After we set one of the streams to an MJPEG stream, we can fetch the videostream using an HTTP URL.

Here is an example URL on how to set one stream to an MJPEG stream:

http://ip address:port/cgi-bin/CGIProxy.fcgi?cmd=setSubStreamFormat&format=1&usr=admin&pwd= 

Here “1” sets an MJPEG stream, if we don't want to set the MJPEG stream, we would set the number to “0”, “0” sets an H.264 stream.

When inputting this URL and pushing "Enter" in your browser, it will return the following result:

<CGI_Result>
<result>0</result>
</CGI_Result>

Step 2: After setting the MJPEG stream, it can be fetched using an HTTP URL.

See the example HTTP URL you would use to fetch the MJPEG videostream. Note that this differs from older MJPEG cameras like the FI8910W, but the videostream result is the same.

http://ip address:port/cgi-bin/CGIStream.cgi?cmd=GetMJStream&usr=admin&pwd=xxx

Simply replace the IP address, port, username, and password into the above URL to access your camera's MJPEG stream.

[jompie]

Hi,
I also use the frontpage. I was able to add the current and total electricity usage and Gas meter usage from my smart meter. However, I also want to add the costs to the frontpage. How can I do this? I already used and changed the vdata for adding kWH or Watt. ?

I used this part of code:

Code: Select all

if(item.idx == '83'){			// Adds Watt after current electricity usage
		//vdata=new String(vdata).replace( vdata,vdata + "%");
		if (vdata == vtotal) {
		//vdata = Math.round(cur_elec_cost / 100* vdata);
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> kWh</sup>";
		} else {
		vdata = vdata+"<sup style=\'font-size:50%;vertical-align:top;position:relative;bottom:-0.2em;\'> Watt</sup>";
		}}

Hope someone can help.

[JuanUil]

Hi all,

I have a question concerning weather underground.
I want to display wind velocity and direction on the frontpage.
But these figures come all together in 1 idx see below
How can I seperate them?



Thanx in advance
Juan

[bierlaagh]

Hi all,

I have a question concerning weather underground.
I want to display wind velocity and direction on the frontpage.
But these figures come all together in 1 idx see below
How can I seperate them?



Thanx in advance
Juan

Juan
you can easaly find it in the Wiki

http://www.domoticz.com/wiki/Virtual_weather_devices

Knipsel.JPG (15.58 KiB) Viewed 2953 times

and if you use the FrontPage from G3rard, than the script will change the English phrase to Dutch.

Knipsel2.JPG (25.86 KiB) Viewed 2954 times

[JuanUil]

Thanx!
That's what I needed!