NEW frontpage.html - request comments

Post Reply
Hansbit
Posts: 43
Joined: Monday 17 February 2014 16:10
Target OS: Raspberry Pi
Domoticz version:
Contact:

NEW frontpage.html - request comments

Post by Hansbit » Monday 29 December 2014 15:17

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
Schermafbeelding 2014-12-29 om 14.11.16.png (63.74 KiB) Viewed 57628 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 4271 times
Last edited by Hansbit on Tuesday 30 December 2014 11:34, edited 1 time in total.

User avatar
jannl
Posts: 862
Joined: Thursday 02 October 2014 6:36
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Geleen
Contact:

Re: NEW frontpage.html - request comments

Post by jannl » Monday 29 December 2014 18:50

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
Posts: 35
Joined: Wednesday 20 November 2013 14:02
Target OS: Raspberry Pi
Domoticz version: last
Location: lille fr
Contact:

Re: NEW frontpage.html - request comments

Post by dba59 » Monday 29 December 2014 20:02

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
Posts: 43
Joined: Monday 17 February 2014 16:10
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Hansbit » Tuesday 30 December 2014 11:36

Hello dba59,

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

Hans
dba59 wrote: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
Posts: 43
Joined: Monday 17 February 2014 16:10
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Hansbit » Tuesday 30 December 2014 11:43

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
jan_nl wrote: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

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Tuesday 30 December 2014 14:13

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 ;)
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

pipari
Posts: 58
Joined: Saturday 23 November 2013 22:51
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by pipari » Tuesday 30 December 2014 15:06

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
Attachments
Screen Shot 2014-12-30 at 14.05.16 .png
no output at all
Screen Shot 2014-12-30 at 14.05.16 .png (42.04 KiB) Viewed 57524 times

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Tuesday 30 December 2014 16:23

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 ;)
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

Hansbit
Posts: 43
Joined: Monday 17 February 2014 16:10
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Hansbit » Tuesday 30 December 2014 19:47

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
pipari wrote: $.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
Posts: 43
Joined: Monday 17 February 2014 16:10
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Hansbit » Tuesday 30 December 2014 19:54

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
ThinkPad wrote: 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 ;)

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Tuesday 30 December 2014 20:30

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:
Image (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 :x
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Wednesday 31 December 2014 0:47

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

Image

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).
Last edited by ThinkPad on Saturday 03 January 2015 16:33, edited 2 times in total.
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

User avatar
jannl
Posts: 862
Joined: Thursday 02 October 2014 6:36
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Geleen
Contact:

Re: NEW frontpage.html - request comments

Post by jannl » Wednesday 31 December 2014 10:06

@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
Posts: 286
Joined: Monday 27 January 2014 15:12
Target OS: Raspberry Pi
Domoticz version:
Location: Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by Heisenberg » Wednesday 31 December 2014 11:15

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?
Raspberry Pi Type B
Raspberry Pi Type B2
RFXCOMtrx433e

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Wednesday 31 December 2014 11:39

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 :P

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 ;)
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

User avatar
bbqkees
Posts: 416
Joined: Sunday 17 August 2014 21:01
Target OS: Raspberry Pi
Domoticz version: 3.5x
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by bbqkees » Wednesday 31 December 2014 14:42

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/
Intel NUC-> Philips Hue, Aeon Zwave stick V2, Qubino, Fibaro, Everspring, Philio, RFXCom, X10, Harmony Hub, Xiaomi Flora + Gateway, BS440. And P1 / Resol VBus / Nefit EMS bus / DHT21 / DS18B20 / Sonoff / I2C display, all via Arduino/ESP8266.

User avatar
jannl
Posts: 862
Joined: Thursday 02 October 2014 6:36
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Geleen
Contact:

Re: NEW frontpage.html - request comments

Post by jannl » Wednesday 31 December 2014 17:01

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);

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by ThinkPad » Wednesday 31 December 2014 19:14

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..
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

User avatar
jannl
Posts: 862
Joined: Thursday 02 October 2014 6:36
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Geleen
Contact:

Re: NEW frontpage.html - request comments

Post by jannl » Wednesday 31 December 2014 19:31

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
Posts: 58
Joined: Saturday 23 November 2013 22:51
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by pipari » Friday 02 January 2015 0:31

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

Best Regards

Hansbit wrote: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
pipari wrote: $.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...

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests