NEW frontpage.html - request comments

[Hansbit]

I've updated the default frontpage.html page

Most important changes:
- The html is cleaned and structured. User settings are now only at end of script.
- All cells are numbered. If cell is not defined in user settings, the cell number appears on screen
- User can now easily set the label of the cell in the user settings (like 'Temperature Livingroom')
- User can now set optional alarm value. Of value of sensor above this value, the text will turn to RED.
- User can easily adjust the color of the text.
- If defined cell is a switch, the cell is clickable to switch that device.

Schermafbeelding 2014-12-29 om 14.11.16.png (63.74 KiB) Viewed 100891 times

How to install?
- copy attached frontpage.html to the Domoticz ditrectory (domoticz/www)
- Create a roomplan in Domoticz and add devices to that roomplan
- Adjust user settings in frontpage.html: the URL of your domoticz, the number of your roomplan and the devices to display
- If log-in for Domoticz is required, it best to add the IP of the device displaying the frontpage to the settings in Domiticz, so no login is required.
- Open in browser [your Domoticz IP]:8080/frontpage.html

Please send me your comments!
Hans

frontpage.html.tar.gz

(2.77 KiB) Downloaded 7485 times

[jannl]

PLaying with this sometime, but only get ?? in a cell if I get any.
Looking at he frontpage.html and the code it seems to be different in page.arry, but not sure

Edit: lamp switching works now, explanantion was not completely clear to me

Edit2: Scenes toegevoegd, maar dit door die hele riedel te kopieren en een extra pagearray aan te maken, kan dit evt. ook slimmer?

And btw, looks great so far

[dba59]

hi
i use domoticz on a raspberry and i get this error when i open your html page

inflating: __MACOSX/._frontpage.html

Code: Select all

Mac OS X  2u�SMLdSMULATTR����com.apple.TextEncoding�m%com.apple.metadata:kMDItemWhereFromsh?com.apple.quarantineutf-8;134217984bplist00�_>sftp://pi14.hekellaan.nl/home/hans/domoticz/www/frontpage.html Kq/0001;54a14d64;Cyberduck;EEBD982A-D864-4197-8969-2D561087BBAA

[Hansbit]

Hello dba59,

I uploaded a new file to the first posting. Please try this one, it is compressed with tar.

Hans

hi
i use domoticz on a raspberry and i get this error when i open your html page

Code: Select all

Mac OS X  2

[Hansbit]

Jan_nl,

What do you mean by page.arry? It should work fine with only one file (frontpage.html).

Please check if you see your devices with http://[YOURIP]:8080/json.htm?type=devices&plan=[ROOMPLANNUMBER] It should output the status from your devices in json format.

Hans

PLaying with this sometime, but only get ?? in a cell if I get any.
Looking at he frontpage.html and the code it seems to be different in page.arry, but not sure

Edit: lamp switching works now, explanantion was not completely clear to me

Edit2: Scenes toegevoegd, maar dit door die hele riedel te kopieren en een extra pagearray aan te maken, kan dit evt. ook slimmer?

And btw, looks great so far

[ThinkPad]

Awesome, will try this very soon!
Seems like something i can use perfectly for displaying on a cheap 7" Android tablet (Colorfly E708 Q1, €55 from Banggood.com) i bought recently.

Oh, and i think it is advisable to put a reference to Pieter from Bwired in your post Because it is his code that you are using

[pipari]

Hi,
I like the layout very much. But does not seem to get it working.
Edited the User veribles:
example:
$.roomplan=8; // define roomplan in Domoticz and create items below.
$.domoticzurl="http://192.168.1.243:8080";

'59', 'Temp', 'cell3', 'Temp Outside (ºC)', 'color:darkorange', '>25'],

This gives me nothing...

also tried:
$.domoticzurl="domoticz.pipari.nu:8080";

What do I miss?

See attached image

[ThinkPad]

I can't open the .tar.gz file. Please post it as a .zip, or upload the content of the HTML file somehwere (http://www.pastebin.com for example).
Edit: managed to get to the source of the HTML file and paste that in a empty 'frontpage.html' file i created. But please upload like .zip or post code somewhere

Some things:
- Celsius symbol not rendering in Chrome (on Windows and Android), use

Code: Select all

°C

instead
- I had to change 'localhost' to the IP of my Domoticz installation. Probably has something to do with password protection for external users.

I also don't like the font very much, but that is something i can easily change myself

[Hansbit]

Hi Pipari,

When you enter this URL in a browser, does it give any result?

http://192.168.1.243:8080/json.htm?type=devices&plan=8

Hans

$.roomplan=8; // define roomplan in Domoticz and create items below.
$.domoticzurl="http://192.168.1.243:8080";

'59', 'Temp', 'cell3', 'Temp Outside (ºC)', 'color:darkorange', '>25'],

This gives me nothing...

[Hansbit]

Thinkpad,

I've changed the Celsius symbol. Will upload new version in a few days in .zip. The (Google) font can be changed easily. Search for Orbitron in file.

Thanks for comments!
Hans

Some things:
- Celsius symbol not rendering in Chrome (on Windows and Android), use

Code: Select all

°C

instead
- I had to change 'localhost' to the IP of my Domoticz installation. Probably has something to do with password protection for external users.
I also don't like the font very much, but that is something i can easily change myself

[ThinkPad]

I already succeeded Changed it to some other Google font

Some other points:
- Do you know how to get my today's gas consumption in the page? I have my Domoticz connected to my smart meter (P1).
'CounterToday' is working for electrics, but not for gas (item is not shown then). How do i know what type my device is? Which JSON command can i run to determine?
- And it also seems it can't get the status of a protected switch? I have a switch that controls a GPIO pin. I already have made it unprotected, but still not visible.
- And i have a dimmer, but that one messes up the layout:
(my eettafel (cell 12) is a dimmer)
- And how can i give the words 'on' and 'off' different colors? I would like to have 'On' in green, and 'Off' orange... But can't find how to do it. It looks like the words are directly used from the JSON.

I now have this:

Code: Select all

						if (typeof vdata == 'undefined') {
							vdata="??";
						} else {
							// remove too much text
							vdata=new String(vdata).split("Watt",1)[0];
							vdata=new String(vdata).split("kWh",1)[0];

											if (vdata == 'On') {
							vdata='<font color=\'blue\'>On</font>';	
						}
								if (vdata == 'Off') {
							vdata='<font color=\'green\'>Off</font>';	
						}	

						}

The texts for On and Off do have different colors (blue and green) now, but now i can't click them anymore. I have the feeling i am very close, but can't get it working

[ThinkPad]

I got it I modified (or better: left out) parts of the alarmcss, and put in my own code.



Switch is now green when on, and orange when off. The protected/virtual switches are now also suddenly working (something wrong with the original alarmcss code).
Gasmeter was also 'CounterToday'.

Code can be found here:
http://pastebin.com/4gCp13aJ

Things i am still not happy about:
- The dimmer level that is shown huge... For me on/off would be fine, i almost don't change the level, and otherwise would be possible from Domoticz, to keep this interface neat and tidy (no unneccasary dim sliders)
- Protected switches can now be clicked on, and changed from off to on or vice versa > not what you want.... Maybe implement an extra check so a switch cannot be controlled if it is protected? (protected yes/no should already be in JSON data).

[jannl]

@hansbit: pagearray is the array used for the switches etc.

I now see I type some in Dutch

I think this will make me look for a 7" tablet for wall mounting.

First I will have a look at the changes thinkpad made, because I also like that font better.

And see if the scene adaption can be made better compared to just copying all the code.

[Heisenberg]

Looks nice but is it possible to constantly have the tablet screen on ( in case of build in to cabinet door in the kitchen or wall mount)?
And how to modify it to dark and light interface?

[ThinkPad]

I use this tablet: Banggood.com: Colorfly E708 Q1 Quad Core A31S 7 Inch IPS Android 4.2 Tablet. A while ago it was 55 euros (free shipping). But took a month to arrive

And for dark and light interface, this: https://stackoverflow.com/questions/435 ... javascript could be something nice. Maybe together with pulling sunrise/sunset times from Domoticz.

I am looking for something to automatically turn the screen of the tablet off if a scene in Domoticz is activated (scene 'Sleeping'). Maybe something with 'Tasker' app. But i don't have much time this period to look at it. But just posting my ideas here, for someone else to pick it up maybe

[bbqkees]

What about wrapping these panels in a slider?
Should not be that much work I think.

With a tablet you could swipe between panels.

You can use something like:
http://liquidslider.com/

[jannl]

Created something to display/use a link. Not sure if I am goinf to use it, but anyway, below is how I did it.

Add this to the uservariables:

Code: Select all

['0','Link',            'cell22',                       '<a href="http://www.nu.nl" target="_blank">NU.nl</a>'],
 

And this after the last } of the if statement that looks like : if ( $.PageArray[ii][0] === item.idx )

Code: Select all

else if ( $.PageArray[ii][0] === '0' ) { //Special nummer, link in cell (test)
   var vlabel=     $.PageArray[ii][2];             // cell number from HTML layout
   var vdata=      $.PageArray[ii][3];             // description (link in this case
   var vdesc = '';

   $('#'+vlabel).html( '<div>'+vdata+'</div>');
   $('#desc_'+vlabel).html(vdesc);

[ThinkPad]

Good idea!

Also useful for going quickly to Buienradar for example (just before leaving home).

jan_nl, do you have any idea how to implement buttons for a dimmer?
Like the temp control here: http://www.bwired.nl/dash/ipad.asp but then for a dimmer..

[jannl]

hm, I am going to need them as well in the near future

I see bwired hardcoded almost everything.
With the plus/min and the ChangeStatus function something should be possible I guess. I added a SceneToggle function to the original frontpage.html because the command is different.
I never did much with java(script), so if anyone has more knowledge......please help.

BTW, you ever looked at bwired.nl

[pipari]

Hi,
Yes the json request gives me the right result... Maybe I missed something. Will give it a new try tomorrow.

Best Regards

Hi Pipari,

When you enter this URL in a browser, does it give any result?

http://192.168.1.243:8080/json.htm?type=devices&plan=8

Hans

$.roomplan=8; // define roomplan in Domoticz and create items below.
$.domoticzurl="http://192.168.1.243:8080";

'59', 'Temp', 'cell3', 'Temp Outside (ºC)', 'color:darkorange', '>25'],

This gives me nothing...