Page 2 of 66
Re: NEW frontpage.html - request comments
Posted: Friday 02 January 2015 14:49
by ThinkPad
Here is how it looks in real life:
I also can turn the screen on and off with Domoticz
More info:
http://domoticz.com/forum/viewtopic.php?f=28&t=4733
Re: NEW frontpage.html - request comments
Posted: Sunday 04 January 2015 16:08
by vanputten80
Nice dashboard. Installed it and works perfectly. Keep up the good work.
Now I can buy 2 small tablets to hang on the wall at the ground floor and third floor.
Looking forward to see more of this.
Re: NEW frontpage.html - request comments
Posted: Sunday 04 January 2015 18:51
by dkoenders
Hi guys,
Thanks for your efforts, I think I am going to use this on a wall mounted device.
Regarding the Set Level bug, if you replace the code for coloring the buttons with code underneath, you wild no longer have the Set Level text anymore and the dimmer button is responding like any other switch button. You still can't change the dim level, but at least you can switch the light like a normal on/off switch.
Please let me know if this works also for you.
Code: Select all
// if alarm threshold is defined, make value red
//alarmcss='';
//if (typeof valarm != 'undefined') {
// if ( eval(vdata + valarm)) { // note orig: vdata > alarm
// alarmcss=';color:red;';
// }
//}
// if switch is on, make green, if off, make red
alarmcss='';
if (vdata == 'On') { // note orig: vdata > alarm
alarmcss=';color:#1B9772;';
vdata = 'Aan';
}
if (vdata == 'Off') { // note orig: vdata > alarm
alarmcss=';color:#E24E2A;';
vdata = 'Uit';
}
if (vdata.indexOf('Set Level') > -1 ) { // note orig: vdata > alarm
alarmcss=';color:#1B9772;';
vdata = 'Aan';
}
Regards,
Dennis
Re: NEW frontpage.html - request comments
Posted: Sunday 04 January 2015 19:09
by ThinkPad
Thanks, but already got it solved by using a solution someone else made. See my code:
http://pastebin.com/4gCp13aJ
Re: NEW frontpage.html - request comments
Posted: Sunday 04 January 2015 21:05
by dba59
hi
nice work,
it works fine for me. it will be better if it's possible to handle some button but i don't know javascript
Re: NEW frontpage.html - request comments
Posted: Monday 05 January 2015 8:21
by mvveelen
Great work
I've been fiddling with the code a bit and have this at the moment (see image). Instead of using words in the Forecast-cell (like: rain, snow, sun), I'd like to use the skycons (
http://darkskyapp.github.io/skycons/). But it isn't very easy to do. Maybe somebody can help me/us out here?
Oh, and one other question: how can I let the cells in this page turn from black to orange / light red / dark red / etc. when a certain value in a certain cell hits a certain level?
Re: NEW frontpage.html - request comments
Posted: Monday 05 January 2015 16:37
by Dountill
Hi guys, i think this is a very nice option for tablet users. I thought the design needed some quick fixes, so i spent a few hours editing some things. I used ThinkPad's code to start from.
What i did
- Tried to get it in the same theme as my
main-theme
- Responsive Design (scales on every screensize)
- Link back to DomoticZ (don't forget to change your IP)
How do i get it?
You can test the html file over here and
download it over here
Just paste the 2 files in your WWW folder. And visit
http://yourip:8080/frontpage.html
Want to make edits?
This version has a external CSS file for easier editing
Re: NEW frontpage.html - request comments
Posted: Tuesday 06 January 2015 9:11
by mvveelen
Hi,
I'm trying to get the skycons images in, but it doesn't seem to work. I made a completely stripped page, and added all code from the frontpage.html in bit by bit, and when I add the piece of code from 'RefreshData()' (etc) the skycons become invisible. The code can be found here:
http://pastebin.com/jxn6NW8V
The $ marks the place where I want the skycons (and you can find the $ in the code where the 'Cloudy' is being set to <canvas id..... etc.
I really hope somebody can help me out. Thanks in advance!
Or maybe some of these icons:
http://codepen.io/noahblon/details/lxukH could be used? I think this is even more difficult because of the CSS, but maybe someone can do this
?
Re: NEW frontpage.html - request comments
Posted: Wednesday 07 January 2015 6:54
by bizziebis
Is it possible to adjust the javascript inside the frontpage.html so it will allow switching lights on/off when the html is on a different server?
Now I get an autentication failure, even though the server ip is entered in domoticz as 'whitelisted'
I moved to a different server because the frontpage.html is reachable without logging in, and I have some webcam urls in it with plain text password..
Edit: I solved it by using domoticz camera url, so no action needed
Re: NEW frontpage.html - request comments
Posted: Wednesday 07 January 2015 17:53
by Slorf
HI Bizziebis
Could you post your code ?
I would like to get the buienradar forecast in there
See:
http://gratisweerdata.buienradar.nl/
The code would look like:
<IFRAME SRC="
http://gratisweerdata.buienradar.nl/wee ... x6344.html" NORESIZE SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=300 HEIGHT=190></IFRAME>
Re: NEW frontpage.html - request comments
Posted: Wednesday 07 January 2015 21:18
by mvveelen
I switched to static images (couldn't find nice animated images) and this is what I have so far. It needs some tweaking, but now it's starting to look like what I wanted.
Code:
frontpage.html ->
http://pastebin.com/RnvaayUS
frontpage.css ->
http://pastebin.com/wFA8R8jY
Edit:
Today I managed to get the background color to change when the sun sets and when the sun rises. It uses the virtual switch 'IsDark' that I use. And when the outdoor temperature gets below 0, the cell color of the outside temperature gets blue
Re: NEW frontpage.html - request comments
Posted: Thursday 08 January 2015 19:56
by mvveelen
Does anyone know how to add two buttons in one of the div's (a '+' and a '-')? And then, when you click on them, you adjust the dim-level of a specific light?
Re: NEW frontpage.html - request comments
Posted: Friday 09 January 2015 20:12
by bizziebis
@Slorf I just added two pictures in the div. They refresh every 0.5 sec. I didn't try iframes yet.
I changed the code so you cannot switch protected switches anymore.
change
Code: Select all
// if extra css attributes
if (typeof vattr == 'undefined') {
$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
} else {
$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
}
into
Code: Select all
// if extra css attributes
if (typeof vattr == 'undefined') {
if (item.Protected == true) {
$('#'+vlabel).html('<div style='+alarmcss+'>'+vdata+'</div>');
} else {
$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
}
} else {
if (item.Protected == true) {
$('#'+vlabel).html( '<div style='+vattr+alarmcss+'>'+vdata+'</div>');
} else {
$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
}
}
Re: NEW frontpage.html - request comments
Posted: Saturday 10 January 2015 15:58
by pipari
Hi!
Really love this "gui" !
Someone that have a RGBW or similiar?
My thought was a "colorpicker"... im sucks at this so if anyone having plans to implement something like that please let me know!
best regards
cristopher
NEW frontpage.html - request comments
Posted: Sunday 11 January 2015 23:19
by Heisenberg
@bizzibis, could your post your frontpage.html? I also would like to monitor my ip camera's. Thnx
Re: NEW frontpage.html - request comments
Posted: Monday 12 January 2015 8:55
by bizziebis
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 (90.43 KiB) Viewed 11140 times
Re: NEW frontpage.html - request comments
Posted: Monday 12 January 2015 9:07
by ThinkPad
Looking great, i think i sure can use bits of it (not everything, as much of your page is already based on mine haha, i recognize the colors and the font
)
The additions you made for protective switches are nice, looks really intuitive to me.
Re: NEW frontpage.html - request comments
Posted: Monday 12 January 2015 9:15
by bizziebis
Sure it's based on yours, otherwise I would have started my own topic
This way everybody can keep on improving so we can build a complete page
Re: NEW frontpage.html - request comments
Posted: Monday 12 January 2015 10:46
by SwordFish
Verry nice,
I use the layout from Dountill.
Is it possible to view the temp, wind etc from "
http://www.domoticz.com/wiki/Virtual_weather_devices" in cell 3?
Have someone already managed to get dimmers in the layout?
Re: NEW frontpage.html - request comments
Posted: Monday 12 January 2015 18:43
by remb0
Very nice! That's great about an opensource community: they share, and improve eachothers work.
I hope it will become easier in the future to make and page like this with widgets, like as in imperihome.
Where users will select
it's blocks, choose a style and define the content of a block. all saved in database.