Domoticz

Open source Home Automation System
https://forum.domoticz.com/

NEW frontpage.html - request comments

https://forum.domoticz.com/viewtopic.php?t=4698

Page 4 of 66

Re: NEW frontpage.html - request comments

Posted: Wednesday 14 January 2015 20:24
by jannl
@mvveelen, where did you get the wheather icons?

Re: NEW frontpage.html - request comments

Posted: Wednesday 14 January 2015 21:03
by mvveelen
jan_nl wrote:@mvveelen, where did you get the wheather icons?
Here you go: http://www.fordesigner.com/maps/3160-0.htm

I combined a few myself to get a night-look and a day-look :D

Re: NEW frontpage.html - request comments

Posted: Wednesday 14 January 2015 21:51
by jannl
thx

Re: NEW frontpage.html - request comments

Posted: Thursday 15 January 2015 10:01
by Skorpion
First of all, Thanks to @Thinkpad and @bizziebis for the code that I use.

I have been trying to display the time, sunrise and sunset on the page, but without succes yet. :(

I found some code that I probably need to get it to work, but my knowledge of JSON etc. isn't that great yet. Maybe someone can help me out with this.

What I found:

JSON url to get time values:
http://ipaddress/json.htm?type=command& ... SunRiseSet

Code from LightsController.js

Code: Select all

	var sunRise="";
			var sunSet="";
			$.ajax({
				 url: "json.htm?type=command&param=getSunRiseSet",
				 async: false, 
				 dataType: 'json',
				 success: function(data) {
					if (typeof data.Sunrise != 'undefined') {
					  sunRise=data.Sunrise;
					  sunSet=data.Sunset;
					}
				 }
			});
		  
			var suntext='<div id="timesun" /><br>\n';
			htmlcontent+=suntext;
		  
			htmlcontent+=$('#edittimers').html();
			$('#lightcontent').html(GetBackbuttonHTMLTable('ShowLights')+htmlcontent);
			$('#lightcontent').i18n();
			$("#lightcontent #timerparamstable #rdate").hide();
			$("#lightcontent #timerparamstable #rnorm").show();

			$rootScope.RefreshTimeAndSun();
I don't know if this is of any use, but maybe this will get me/us close to the solution. :)

Re: NEW frontpage.html - request comments

Posted: Thursday 15 January 2015 10:59
by mvveelen
You're welcome :?

I've managed to switch the complete .css (file) when the sun sets or when the sun rises (based on a virtual switch). This gives me the possibility to work with shades of grey (for example) during the night instead of colors. I have 2 .css files (frontpage-day.css and frontpage-night.css) now.

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 4:50
by Skorpion
@ mvveelen,

Ik denk dat je inmiddels voorzien bent, maar deze geanimeerde weer icoontjes kwam ik tegen. Ook best leuk vind ik. :)

http://codepen.io/motorlatitude/pen/CyqDf



Wat betreft mijn eigen probleempje, die hierboven beschreven staat, heb ik denk ik de oplossing gevonden.

Translation:

I think you already have what you were searching for, but I came across these animated weather icons. I think they are pretty nice

http://codepen.io/motorlatitude/pen/CyqDf


About my problem, described above, I think I found a solution.

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 5:12
by mbliek
Skorpion wrote:@ mvveelen,

Ik denk dat je inmiddels voorzien bent, maar deze geanimeerde weer icoontjes kwam ik tegen. Ook best leuk vind ik. :)

http://codepen.io/motorlatitude/pen/CyqDf



Wat betreft mijn eigen probleempje, die hierboven beschreven staat, heb ik denk ik de oplossing gevonden.
Rewrite your post English please. This is an English forum.

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 5:55
by mvveelen
Thanks for the tip, I've seen them before but couldn't find a download link for these icons.....

edit: oh, wait! These images are build through css :) !

And why don't you share your solution with this community :) ?

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 15:40
by Skorpion
mbliek wrote:
Skorpion wrote:@ mvveelen,

Ik denk dat je inmiddels voorzien bent, maar deze geanimeerde weer icoontjes kwam ik tegen. Ook best leuk vind ik. :)

http://codepen.io/motorlatitude/pen/CyqDf



Wat betreft mijn eigen probleempje, die hierboven beschreven staat, heb ik denk ik de oplossing gevonden.
Rewrite your post English please. This is an English forum.
Sorry my bad.. I'm used to answer in Dutch when I see someone who is also Dutch haha. I translated my post.
mvveelen wrote:Thanks for the tip, I've seen them before but couldn't find a download link for these icons.....

edit: oh, wait! These images are build through css :) !

And why don't you share your solution with this community :) ?
Yes they are, CSS 3 in fact so it is very easy to implement these icons. :)

I will post the solution here if I got it working.

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 16:02
by Skorpion
For the ones who would like to display more content on their pages, I created a second page for the "Domoticz Dashboard". If you wish, you can easily edit the code to add even more pages.

I split the contents of the .html in separate files => 2 html files for page 1 & 2, 1 css file for style and 1 javascript file for scripting. I also edited the original Domoticz logo for a new "Domoticz Dashboard" favicon and iOS logo if you decide to install the dashboard as a WebApp. The WebApp is meant to use in landscape format. I tested the WebApp on iPad & iPhone and it works like a charm. :) I haven't been able to test on Android etc.

I hope you guys like this edit. :)

PS. Make sure you rename the DD favicon if you want to use this one. Otherwise the original favicon is replaced.

Image

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 16:08
by Heisenberg
Great work you guys!
I also like the EVOHOME interface. I was wondering if someone can edit the html to look like this. Of course with webcam and buienradar support :)

Image

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 17:08
by ThinkPad
Nice... this topic is really popular the last time. I like it that many people are fiddling around and creating & sharing nice things.

About the EvoHome interface... should be too hard for someone with CSS knowledge. Colors can be grabbed by using a tool like ColorPic (for Windows).

Re: NEW frontpage.html - request comments

Posted: Friday 16 January 2015 23:38
by bizziebis
I changed some stuff again. I think it's OK for me now ;)

* Camera popup when doorbel rings
* Popup with message when a switch is pressed. Feedback feels more natural.
* Second page with switches. NO second html page, just swipe to next page :D

A teaser for now:

http://youtu.be/J3Xp_Ee115c

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 8:33
by jannl
Nice. The swiping is very nice. Please post your code.

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 9:27
by leby
How nice would it be if it could be included in the standard package with a configuration page as companion where you could select switches etc free from your HW list like in the floorplan ;-)
Could even have a tab of its own if selected in as choose in "active menus" in the "application settings" page...

Know I ask for much, but I think a lot of users would appreciate it including me :lol:

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 9:33
by fmeijndert
@jan_nl Can you post your frontpage.html? I'm trying to include a scene and group button but can't get it working.....

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 9:46
by Heisenberg
bizziebis wrote:I changed some stuff again. I think it's OK for me now ;)

* Camera popup when doorbel rings
* Popup with message when a switch is pressed. Feedback feels more natural.
* Second page with switches. NO second html page, just swipe to next page :D

A teaser for now:

http://youtu.be/J3Xp_Ee115c
Nice! I like the popups very much. Please share your code with us.

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 11:18
by jannl
fmeijndert wrote:@jan_nl Can you post your frontpage.html? I'm trying to include a scene and group button but can't get it working.....
I am not at home right now, will post it later today or tomorrow.

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 12:11
by bizziebis
I made it a little bit easier to change some idx numers and txt. It's right above the "USER VALUES".

The whole layout size it's far from perfect.. Still have to clean it up.

I would like to add scene switching also in the future. I have a full page left for stuff like that :D

Edit: some mistakes corrected (16:45 17-01-15)

Re: NEW frontpage.html - request comments

Posted: Saturday 17 January 2015 16:53
by jannl
frontpage.zip
(32.73 KiB) Downloaded 748 times
In the zip my version.
Look for SceneToggle to see how I implemented this, I also added an additional pagearray, search for it in the html file.
I also added most of the swipe code.
All times are UTC+02:00
Page 4 of 66

Powered by phpBB® Forum Software © phpBB Limited