NEW frontpage.html - request comments

[jannl]

@mvveelen, where did you get the wheather icons?

[mvveelen]

@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

[jannl]

thx

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

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

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

[mbliek]

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

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

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

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.

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.

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

[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

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

[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

A teaser for now:

http://youtu.be/J3Xp_Ee115c

[jannl]

Nice. The swiping is very nice. Please post your code.

[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

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

[Heisenberg]

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

A teaser for now:

http://youtu.be/J3Xp_Ee115c

Nice! I like the popups very much. Please share your code with us.

[jannl]

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

[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

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

[jannl]

frontpage.zip

(32.73 KiB) Downloaded 745 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.