NEW frontpage.html - request comments

Moderator: leecollings

ThinkPad
Posts: 890
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 »

Here is how it looks in real life: Image
I also can turn the screen on and off with Domoticz :D

More info: http://domoticz.com/forum/viewtopic.php?f=28&t=4733
I am not active on this forum anymore.
vanputten80
Posts: 11
Joined: Sunday 04 January 2015 16:04
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post 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.
dkoenders
Posts: 2
Joined: Monday 08 September 2014 20:41
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post 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
ThinkPad
Posts: 890
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 »

Thanks, but already got it solved by using a solution someone else made. See my code: http://pastebin.com/4gCp13aJ
I am not active on this forum anymore.
dba59
Posts: 9
Joined: Wednesday 20 November 2013 13:02
Target OS: Raspberry Pi / ODroid
Domoticz version: last
Location: lille fr
Contact:

Re: NEW frontpage.html - request comments

Post 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 :(
Attachments
frontpage.jpeg
frontpage.jpeg (80.19 KiB) Viewed 11365 times
User avatar
mvveelen
Posts: 678
Joined: Friday 31 October 2014 10:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by mvveelen »

Great work 8-)

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?
Attachments
Schermafbeelding 2015-01-05 om 08.14.05.png
Schermafbeelding 2015-01-05 om 08.14.05.png (79.94 KiB) Viewed 11341 times
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
Dountill
Posts: 10
Joined: Thursday 04 December 2014 16:30
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Dountill »

Image

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
User avatar
mvveelen
Posts: 678
Joined: Friday 31 October 2014 10:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post 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 :) ?
Attachments
Schermafbeelding 2015-01-06 om 09.04.58.png
Schermafbeelding 2015-01-06 om 09.04.58.png (65.68 KiB) Viewed 11248 times
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
User avatar
bizziebis
Posts: 182
Joined: Saturday 19 October 2013 14:00
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8805
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

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

Image
Slorf
Posts: 26
Joined: Friday 20 December 2013 11:55
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Voorburg
Contact:

Re: NEW frontpage.html - request comments

Post 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>
A lot of stuff :[-)

Orange PI
Evohome with HGI-80
SmartMeter USB Cable
Solar panels
RFLINK 433 MHz
AeonLabs usb z-wave plus
My Sensors ( Lan Gateway )
Wemos sensors
Arduino sensors
User avatar
mvveelen
Posts: 678
Joined: Friday 31 October 2014 10:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post 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 :)
Attachments
Schermafbeelding 2015-01-07 om 21.12.23.png
Schermafbeelding 2015-01-07 om 21.12.23.png (98.31 KiB) Viewed 11157 times
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
User avatar
mvveelen
Posts: 678
Joined: Friday 31 October 2014 10:22
Target OS: NAS (Synology & others)
Domoticz version: Beta
Location: Hoorn, The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post 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?
RPi3b+/RFXCOM rfxtrx433E/Shelly/Xiaomi Gateway/Philips HUE Lights/Atag Zone One/2 SunnyBoy inverters/AirconWithMe/P1 smartmeter/Domoticz latest Beta
User avatar
bizziebis
Posts: 182
Joined: Saturday 19 October 2013 14:00
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8805
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post 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>');
								}
						}
pipari
Posts: 19
Joined: Saturday 23 November 2013 21:51
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post 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
Heisenberg
Posts: 135
Joined: Monday 27 January 2014 14:12
Target OS: Raspberry Pi / ODroid
Domoticz version:
Location: Netherlands
Contact:

NEW frontpage.html - request comments

Post by Heisenberg »

@bizzibis, could your post your frontpage.html? I also would like to monitor my ip camera's. Thnx
Raspberry Pi Type B
Raspberry Pi Type B2
RFXCOMtrx433e
User avatar
bizziebis
Posts: 182
Joined: Saturday 19 October 2013 14:00
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8805
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post 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
frontpage.jpg (90.43 KiB) Viewed 10947 times
Attachments
offline.jpg
offline.jpg (18.95 KiB) Viewed 10947 times
ThinkPad
Posts: 890
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 »

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 :P )
The additions you made for protective switches are nice, looks really intuitive to me.
I am not active on this forum anymore.
User avatar
bizziebis
Posts: 182
Joined: Saturday 19 October 2013 14:00
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.8805
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

Post by bizziebis »

Sure it's based on yours, otherwise I would have started my own topic :D
This way everybody can keep on improving so we can build a complete page :)
SwordFish
Posts: 278
Joined: Sunday 14 December 2014 12:28
Target OS: Raspberry Pi / ODroid
Domoticz version: V4.11375
Contact:

Re: NEW frontpage.html - request comments

Post 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?
User avatar
remb0
Posts: 499
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

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

Who is online

Users browsing this forum: No registered users and 1 guest