NEW frontpage.html - request comments

[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

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

[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

[ThinkPad]

Thanks, but already got it solved by using a solution someone else made. See my code: http://pastebin.com/4gCp13aJ

[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

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

[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

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

[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

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

[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

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

[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>');
								}
						}

[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

[Heisenberg]

@bizzibis, could your post your frontpage.html? I also would like to monitor my ip camera's. Thnx

[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 10945 times

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

[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

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

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