Page 36 of 66
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 7:23
by trekker25
G3rard wrote:trekker25 wrote:
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.
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 9:03
by ThinkPad
JuanUil wrote: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).
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 12:00
by 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
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 14:17
by 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>'],
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 15:37
by trekker25
bizziebis wrote: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?
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 21:17
by 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?
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 21:39
by 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).
Re: NEW frontpage.html - request comments
Posted: Tuesday 18 August 2015 22:37
by ThinkPad
G3rard wrote: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
Re: NEW frontpage.html - request comments
Posted: Wednesday 19 August 2015 1:37
by G3rard
trekker25 wrote:
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.
Re: NEW frontpage.html - request comments
Posted: Wednesday 19 August 2015 9:33
by trekker25
G3rard wrote:trekker25 wrote:
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
Re: NEW frontpage.html - request comments
Posted: Wednesday 19 August 2015 9:53
by 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.
Re: NEW frontpage.html - request comments
Posted: Thursday 20 August 2015 0:08
by 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 3216 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
Re: NEW frontpage.html - request comments
Posted: Thursday 20 August 2015 22:25
by 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.
Re: NEW frontpage.html - request comments
Posted: Friday 21 August 2015 12:17
by bierlaagh
G3rard wrote: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 3149 times
is there something i did not see (i dubble checked if popups are enabled, and they are)
Re: NEW frontpage.html - request comments
Posted: Friday 21 August 2015 12:26
by 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.
Re: NEW frontpage.html - request comments
Posted: Saturday 22 August 2015 10:52
by 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.
Re: NEW frontpage.html - request comments
Posted: Wednesday 26 August 2015 22:34
by 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.
Re: NEW frontpage.html - request comments
Posted: Thursday 27 August 2015 22:08
by 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
Re: NEW frontpage.html - request comments
Posted: Thursday 27 August 2015 22:13
by bierlaagh
JuanUil wrote: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 2956 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 2957 times
Re: NEW frontpage.html - request comments
Posted: Thursday 27 August 2015 22:25
by JuanUil
Thanx!
That's what I needed!