Domoticz

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.

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

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

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

inflating: __MACOSX/._frontpage.html

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

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

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

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

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

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...

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

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

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

@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.

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?

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

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/

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: And this after the last } of the if statement that looks like : if ( $.PageArray[ii][0] === item.idx )

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..

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

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...