NEW frontpage.html - request comments

[Robertn]

Hello,

Can someone tell me how I can get the information of my P1 meter (slimmemeter) in the frontpage. Can you tell me stap by stap.
I have made visual IDX, but stil I can not display the information in the frontpage.
I don't have programming experiance, so tell me the simpel way.

I want to see what I use and what i'm deliver.

And if there is a way to make simple graphics what will be great.

Tanks in advanced.

Robert

[steef27]

Hi,

I would like to display the server time, sunset en sunrise time on my frontpage. Can someone explain how this is possible?

Thanks in advance!

Steef

[BarryT]

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

Could you share the total package?

Really nice work!

[Fainted]

Hi guys great work you all did, is there any possibility this frontpage could be implemented in domoticz as an standard feature, for me as a dummy it seems complicated to get this working as you all have done.

[BarryT]

Hi guys great work you all did, is there any possibility this frontpage could be implemented in domoticz as an standard feature, for me as a dummy it seems complicated to get this working as you all have done.

I think it is not possible to get a layout like this implemented in domoticz..
Every cell (idx) is different on every system, so you must edit the idx/switches/etc to your ones

[havnegata]

Anybody know what happened here? I have had a working frontpage, but now I was excluding and including some units and moving from Windows to Raspberry PI. It's a dimmer in cell 8 and a on/off module in cell 13

[racquemis]

Could you share the total package?

Really nice work!

Has been some time since i made the changes to the css.
I'll see if i can look up the changes i made to fit the 1280x800 tablet.
If you're interested int he spotify stuff, i can't share it yet since it's not very user friendly.
Currently working on a Windows service that can act as a bridge between domoticz and spotify

[BarryT]

Could you share the total package?

Really nice work!

Has been some time since i made the changes to the css.
I'll see if i can look up the changes i made to fit the 1280x800 tablet.
If you're interested int he spotify stuff, i can't share it yet since it's not very user friendly.
Currently working on a Windows service that can act as a bridge between domoticz and spotify

Okay..
I dont need the spotify and other stuff so far, as i can include it myself..
Just wanted to have the layout you made, it looks nice

[racquemis]

Okay, the css, js and image files are included in the rar file below:
http://ul.to/fgilturd

I've scaled it to better fit my 10 inch tablet (115% zoom). If things look weird play with the div#cnt and #popup_camera in the day and night css files

[curious]

I would like to add a second camera in cell2_3.

My first canera is in cell3 and its works fine so I copied the code and only change the idx. Do I have to change some more ?
In cell2_3 message "webcam offline" is shown.

Code of cell3 :

Code: Select all

<div id="frame">
	<div id="ls_cell3"></div>
	<div id="cell3"><img src="http://10.0.0.12:8080/camsnapshot.jpg?idx=1&t="  onClick="lightbox_open('camera', 25400);" width="200px" class='camera' /></div>
	<div id="bcell3"></div>
	<div id="desc_cell3">Camera kamer</div>
</div>

code of cell2_3

Code: Select all

<div id="frame">
	<div id="ls_cell2_3"></div>
	<div id="cell2_3"><img src="http://10.0.0.12:8080/camsnapshot.jpg?idx=193&t="  onClick="lightbox_open('camera', 25400);" width="200px" class='camera' /></div>
	
	<div id="desc_cell2_3">Camera voordeur</div>
</div>

changing the "onclick"-part will be done later.


Edit: Solved. I found that the idx should not be the idx of the camera, but the idx of the snapshot

[franzelare]

I have next to the camera feed also a cell with an image of the last time the doorbel rang.. at that moment a snapshot is taken.

I can show the doorbell image on the frontpage and if you click it, it nicely expands like with the camera.
only the image is not refreshed every time, it seems to stay in the brouwser cash...
is there anyone who knows a trick how to get the image refreshed on a frequent base?

[racquemis]

Instead of using a comma to separate two lines in the text dummy try using the http break tag

So write your text like this:

Code: Select all

this text has a <br>linebreak in it

The webpage will parse it as html and breakup the line, this works for Domoticz interface, could work for the frontpage. Can't test it myself atm, does it work? does it stretch the cell vertically?

[racquemis]

Untested but if the only comma in the string is the separator you can paste in this line

Code: Select all

position_text = string.gsub(position_text, ',', '<br>')

right under the line:

Code: Select all

position_text = string.gsub(position, ', Netherlands', '') .. ' (' .. (math.floor(distance*10+0.5)/10) .. ' km)'

[racquemis]

I have next to the camera feed also a cell with an image of the last time the doorbel rang.. at that moment a snapshot is taken.

I can show the doorbell image on the frontpage and if you click it, it nicely expands like with the camera.
only the image is not refreshed every time, it seems to stay in the brouwser cash...
is there anyone who knows a trick how to get the image refreshed on a frequent base?

Yes i do, use javascript. the key to having the image refresh every time is to have a different URL each time you refresh. The easiest way to accomplish this is to append a parameter to the url which will have a unique number (CurrentTime) each time it is called.

I have done this already for 'BuienRadar'
Added the following function to FrontPage.html (i appended &time="+ new Date().getTime(); )

Code: Select all

function updateBuienRadar() {
	document.getElementById("buienradar_popup").src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=640&h=480&time="+ new Date().getTime(); 
	document.getElementById("buienradar25").src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256&time="+  new Date().getTime(); 
}

and added the following line in the $(document).ready function

Code: Select all

setInterval(updateBuienRadar,90000);

This updates the buienradar image every 15 minutes

You can apply the same thing to your URL.

[racquemis]

You caan fix it with some css work. Either inline with the text or in the css file of the frontpage
Can you give me an exact example of the text in your textdummy? I'll see what i can do tomorrow evening.

[franzelare]

I have next to the camera feed also a cell with an image of the last time the doorbel rang.. at that moment a snapshot is taken.

I can show the doorbell image on the frontpage and if you click it, it nicely expands like with the camera.
only the image is not refreshed every time, it seems to stay in the brouwser cash...
is there anyone who knows a trick how to get the image refreshed on a frequent base?

Yes i do, use javascript. the key to having the image refresh every time is to have a different URL each time you refresh. The easiest way to accomplish this is to append a parameter to the url which will have a unique number (CurrentTime) each time it is called.

I have done this already for 'BuienRadar'
Added the following function to FrontPage.html (i appended &time="+ new Date().getTime(); )

Code: Select all

function updateBuienRadar() {
	document.getElementById("buienradar_popup").src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=640&h=480&time="+ new Date().getTime(); 
	document.getElementById("buienradar25").src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256&time="+  new Date().getTime(); 
}

and added the following line in the $(document).ready function

Code: Select all

setInterval(updateBuienRadar,90000);code]
This updates the buienradar image every 15 minutes

You can apply the same thing to your URL.[/quote]

thanks! will try this when I get back home from traveling!

[racquemis]

Lukev,

I think i got what you want.

Edit the following line and add it to your frontpage_settings.js

Code: Select all

['151','Data',		'cell2_6',	'Locatie [Jasper]','1','0','font-size:small;line-height:100%;position:relative;top:6px;text-transform:none'],

The result:


If you have a very long street name it will still overflow. i'll look into a solution. But for now this will do.

[Moppersmurf]

Just started working on my frontpage for a couple of days. But can't find something.
I have a smart meter and solar panels. I know the variables Usage and Countertoday for used electricity. But what are the variables for the return and counter return kwh?
And is there a list somewhere with all the available variables?

[Moppersmurf]

Thanks, that works great. I can see all the smart meter variables but have a question.

"AddjMulti" : 1.0,
"AddjMulti2" : 1.0,
"AddjValue" : 0.0,
"AddjValue2" : 0.0,
"BatteryLevel" : 255,
"Counter" : "14958.137",
"CounterDeliv" : "3183.792",
"CounterDelivToday" : "1.135 kWh",
"CounterToday" : "6.791 kWh",
"Usage" : "10 Watt",
"UsageDeliv" : "0 Watt",

When using "Usage" it shows the complete value in Frontpage: 10 Watt
But when using "CounterDelivToday" it only shows 1.135. Same for Countertoday, only 6.791
I don't see the kWh which would make it look beter.

Any Ideas what is wrong?
My Settings are:
['15','Usage', 'cell2', 'Electra verbruik','0','0'],
['18','Temp', 'cell2a', 'Garage','1','0'],
['18','Humidity', 'cell2b', 'Garage','0','0'],
['0','Data', 'cell3', 'Camera garage','0','0'],
['0','Desc', 'cell4', 'Buitentemp','0','0'],
['121','Temp', 'cell4a', 'Tuin','1','0'], //Lastseen only from cell_a possible
['121','Humidity', 'cell4b', 'Tuin','0','0'],
['15','CounterDelivToday', 'cell6', 'Zonnepanelen terug','0','0'],

frontpage.jpg (34.64 KiB) Viewed 2759 times

Could it be that it just won't fit? How can I change the font size only for this Cell? No, just tried it, still no kWh.

[racquemis]

In the file frontpage.js search for the text "// Thermostat"
And add the following code above it:

Code: Select all

if(vtype == 'CounterDelivToday' || vtype == 'CounterToday'){
	vdata = vdata + " kWh";
}

Also try setting idx_Usage1 tot the idx of the device. It will change the usage text from "10 WATT" to "10 W" for a cleaner look.