NEW frontpage.html - request comments

[bizziebis]

Wanna thank those who started this.
Had a old Samsung Galaxy Tab 7" eating dusk.
Last night i prepared it to run 24/7 with additional apps to beable to use Voice commands which is my next project to kill some time.
Today i made a wooden frame which only need some paint.
But here is my test setup...

Sorry if I missed it, but what software do you use?
I have a galaxy tab 7.0, and I cant seem to get the bar over and under away.
Over I have the battery and wifi symbols, and under I have the "back", "home" and "the other right one ".
I use chrome in the "home-screen-app version".

....

If you can miss some cents: https://play.google.com/store/apps/deta ... ri.hidebar

Works perfect with the frontpage added to homescreen with chrome browser. No bars at all.

[mvveelen]

Too bad I can't edit my posts anymore after a few minutes.....I just wanted to add a little thing :

Every cell has a description, but the cell where the time is displayed hasn't. So I changed the code in frontpage.js:

Find:

Code: Select all

var vdata=      currentTime();          // Get present time
var vdesc = '';

Change:

Code: Select all

var vdata=      currentTime();          // Get present time
var vdesc = 'Klok';

Or use something you like

[Atmosphere]

Hi All!

Thank you for all the work you have been doing!
It resulted in a great frontpage for my Domoticz system.
I've been following this forum for quiet some time now...
Time to give something back!

As I am the owner of an OpenTherm Gateway, just like jkimmel and floris74, I wanted to be able to set my Setpoint with the buttons used for dimming.
I own an opentherm Remeha Avanta in combination with an Remeha iSense thermostat.
It resulted in some hacking into the code already created but I managed to get it working the correct way.
Now you can adapt your setpoint from the couch! My thermostat gets changed from changing the setpoint...

My solution is integrated into the last release from 17 Feb by mvveelen.
Also I changed some hardcoded idx settings to look for the variable in the frontpage_settings.js. (Might be wise to keep idx nr's out of other files but settings.js)
For more overview I changed some of the folderpaths, so install the attached zip in the correct directories (under www)

During altering the code I broke the locked sign on protected switches, don't know how to fix that... Could anybody help?
Also it doesn't show the ajax box anymore to tell a device switched on....
Could somebody check this and possibly the correct functioning of the dimmers? (I don't own one yet, so can't test)

Hope we continue on creating the best frontpage ever!

Kind regards,
Atmosphere

p.s. Left the icon files out... file to big otherwise... directory changed from /icons to /images/monitor... paste them there from the mvveelen file!

@bbqkees

I created a virtual setpoint device, I now see I need to send another command for those devices.
/json.htm?type=command&param=udevice&idx=93&nvalue=0&svalue=21.5
But I can fix that this weekend.

Is this fixed already?

For now i created 2 virtual push buttons;
on, with 'aan actie' and 'uit actie'
http://192.168.1.56:1720/json.htm?type= ... value=17.5
off, with 'aan actie' and ´uit actie'
http://192.168.1.56:1720/json.htm?type= ... value=15.5

I haven't tried it since your last update with the thermostat, which didnt work.

bbqkees, did it all worked wel with building the house?
Floris

[mvveelen]

As for the 'lock-sign': check your .css files. You have to enter the right cell to display the image.

In my file:

Code: Select all

#cell11, #cell12 
{
	background-image: url('../icons/lock-closed.png');
	background-repeat: no-repeat;
	background-position:99% 2%;
}

For the pop-up when you click on a regular switch: I deleted that, because I didn't want it anymore. You can check the older files of jan_nl and search for the onClick functions in frontpage.js. The protected switches do have a pop-up, because I think that's just nice to let the user know that it shouldn't try to use that particular switch

The code WAS:

Code: Select all

                                                // create switchable value when item is switch
                                                switchclick='';
                                                if (vdata == 'Off' ) {
                                                        switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"';
                                                        alarmcss=';color:#E24E2A;';
                                                        vdata = txt_off;
                                                }
                                                if (vdata == 'On' ) {
                                                        switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
                                                        alarmcss=';color:#1B9772;';
                                                        vdata = txt_on;
                                                }

And I changed it to:

Code: Select all

	// create switchable value when item is switch
	switchclick='';
	
	if (vdata == 'Off' ) {
	switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"';
	alarmcss=';color:#E24E2A;';
	vdata = txt_off;
	}
	if (vdata == 'On' ) {
	switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
	alarmcss=';color:#1B9772;';
	vdata = txt_on;
	}

The code for the different switches in frontpage_settings.js is indeed something I'm going to do / use. It's easier for other users to use the code if that's fixed.

I'm not using Setpoint (don't even know what that is / does) at the moment, but it might be a good idea to explain what exactly is changed in the code to be able to use this. This would come in handy for other users who have a final version but still want to use that function without having to change all code again.

[Atmosphere]

Hi All!

Thank you for all the work you have been doing!
It resulted in a great frontpage for my Domoticz system.
I've been following this forum for quiet some time now...
Time to give something back!

As I am the owner of an OpenTherm Gateway, just like jkimmel and floris74, I wanted to be able to set my Setpoint with the buttons used for dimming.
I own an opentherm Remeha Avanta in combination with an Remeha iSense thermostat.
It resulted in some hacking into the code already created but I managed to get it working the correct way.
Now you can adapt your setpoint from the couch! My thermostat gets changed from changing the setpoint...

My solution is integrated into the last release from 17 Feb by mvveelen.
Also I changed some hardcoded idx settings to look for the variable in the frontpage_settings.js. (Might be wise to keep idx nr's out of other files but settings.js)
For more overview I changed some of the folderpaths, so install the attached zip in the correct directories (under www)

Could somebody check this and possibly the correct functioning of the dimmers? (I don't own one yet, so can't test)

Hope we continue on creating the best frontpage ever!

Download the new frontpage file from:HERE!

Short change overview for thermostat:
New variable to function Refreshdata in frontpage.js

Code: Select all

var viType=	item["Type"];						// What type is it

Changed Dimmer and added Thermostat in function refreshdata in frontpage.js

Code: Select all

//Dimmer
	if(viType == 'Dimmer' && vplusmin > 0) {
	if (vdata == txt_off) {
	var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\')"; style='+alarmcss+'>'+ vdata+'</span>';
	var plus = "<img src=images/monitor/up_off.png align=right onclick=ChangeStatus('plus',txt_off," + item.idx + ","+ vdimmercurrent+")>";
	var min = "<img src=images/monitor/down_off.png align=left onclick=ChangeStatus('min',txt_off," + item.idx + ","+ vdimmercurrent+")>"
	}
	else
	{
	var hlp = '<span onclick="SwitchToggle('+item.idx+',\'Off\')"; style='+alarmcss+'>'+ vdata+'</span>';
	var plus = "<img src=images/monitor/up.png align=right onclick=ChangeStatus('plus'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>";
	var min = "<img src=images/monitor/down.png align=left onclick=ChangeStatus('min'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>"
	}
	vdata = min.concat(hlp,plus);
	//console.log(vdata);
	}

	//Thermostat
	if(viType == 'Thermostat' && vplusmin > 0) {
	if (vdata == txt_off) {
	var hlp = '<span onclick="SwitchToggle('+idx_Thermostat+',\'On\')"; style='+alarmcss+'>'+ vdata+'</span>';
	var plus = "<img src=images/monitor/up_off.png align=right onclick=ChangeTherm('plus',txt_off," + idx_Thermostat + ","+ vdimmercurrent+")>";
	var min = "<img src=images/monitor/down_off.png align=left onclick=ChangeTherm('min',txt_off," + idx_Thermostat + ","+ vdimmercurrent+")>"
	}
	else
	{
	var hlp = '<span onclick="SwitchToggle('+idx_Thermostat+',\'Off\')"; style='+alarmcss+'>'+ vdata+'</span>';
	var plus = "<img src=images/monitor/up.png align=right onclick=ChangeTherm('plus'," +vplusmin+ "," + idx_Thermostat + ","+ vdata+")>";
	var min = "<img src=images/monitor/down.png align=left onclick=ChangeTherm('min'," +vplusmin+ "," + idx_Thermostat + ","+ vdata+")>"
	}
	vdata = min.concat(hlp,plus);
	//console.log(vdata);
	}

Added a new function under changestatus function at bottom of frontpage.js

Code: Select all

function ChangeTherm(dimtype,stepsize,idx,currentvalue)
	{
	 newvalue='';
	 thermmax=ThermostatMaxTemp;
	 //console.log(dimtype,stepsize,idx,currentvalue,thermmax)
	 if (dimtype == 'plus') { 
		if ((currentvalue + stepsize) > thermmax){
			 newvalue = thermmax;
		} else {
		 newvalue = currentvalue + stepsize;
		}
	}
	else if (dimtype == 'min'){ 
		 if (currentvalue < stepsize){
			 newvalue = 1;
		} else {
		 newvalue = currentvalue - stepsize;
		}
	}
	 $.ajax({
     url: "json.htm?type=command&param=udevice" + "&idx=" + idx + "&nvalue=0&svalue=" + newvalue,
     async: false, 
     dataType: 'json',
     success: function(){
     	console.log('SUCCES');
     },
     error: function(){
     	console.log('ERROR');
     }
 	});
 	RefreshData();
}

[floris74]

Hi atmosphere,
Looks like good news about the thermostat SetPoint. I hope that I can intergrade in an previous version of jan_nl. Otherwise I have to make a fresh start with the last one. I'm not an owner of the open therm, I just use an virtual thermostat, a temperature sensor and a relais switch for my CV(hot air), which works great for me. I'm also have a pellet stove which I'm prepairing to use with domoticz. Hope your version will work! Thanks for sharing!

Floris

[pvm]

Some info on the Skycons icons mentioned earlier in this thread. I use them in a different setting:

MenuBarOfHomeControl

MenuBar.JPG (19.83 KiB) Viewed 5971 times

My technical environment is also different, i run a web page on my synology nas. Ideas I'm working on are a domoticz page similar to this frontpage (thnx for all great ideas and examples!), a page displaying current playing song etc. of my audio system, page showing now playing etc. for media player (video), weather, news, ......
On to skycons.

I use PHP code to retrieve day/ night status and forecast from domoticz (day/night is virtual sensor switched by domoticz timers). When forecast is available I convert it to a forecast compatible with skycons:

Code: Select all

<?
	//Determine whether it is day or night
	$night = 0;
	$daynighturl = 'http://192.168.1.3:8080/json.htm?type=devices&rid=28';
	$daynightch = curl_init($daynighturl);
	curl_setopt($daynightch, CURLOPT_RETURNTRANSFER, true);
	$daynightresponse = curl_exec($daynightch);
	curl_close($daynightch);
	$daynightobjresult=json_decode($daynightresponse, true);
	if ($daynightobjresult['result'][0]['Status'] == "On")
	{
		$night=1;
	}
	
	//Get weather forecast
	$url = 'http://192.168.1.3:8080/json.htm?type=devices&rid=14';
	$ch = curl_init($url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$response = curl_exec($ch);
	curl_close($ch);
	
	$objresult=json_decode($response, true);
//	echo $objresult['result'][0]['Forecast'];
//	echo $objresult['result'][0]['ForecastStr']; 
	$result="clear-day";
	switch ($objresult['result'][0]['ForecastStr'])
	{
		case "Partly Cloudy":
			if ($night)
			{
				$result="partly-cloudy-night";
			}
			else
			{
				$result="partly-cloudy-day";
			}
			break;
		case "Cloudy":
			$result="cloudy";
			break;
		case "Sunny":
			if ($night)
			{
				$result="clear-night";
			}
			else
			{
				$result="clear-day";
			}
			break;
		case "Rain":
			$result="rain"; //snow
			break;
		case "Cloudy":
			$result="cloudy";
			break;
		default:
			break;
	}
	echo $result;

/*Available icons
        clear-day
        clear-night
        partly-cloudy-day
        partly-cloudy-night
        cloudy
        rain
        sleet
        snow
        wind
        fog
*/	
?>

in the header I include a js (which is directly downloaded from the skycons site (also attached to this post), activate a timer and have functions to update the icon;

Code: Select all

  <script src="js/skycons.js"></script>  
<script>
  window.setInterval(function(){UpdateWeather()}, 5000);
///////////////////////////////////////////////////////////////////////////////
// Weather related ////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////
//Global variable for Skycons
var skycons;

//This is executed upon page load
$(window).bind("load", function() {
	InitWeather();
});


function InitWeather()
{
	skycons = new Skycons({"color": "#474747"});
	// on Android, a nasty hack is needed: {"resizeClear": true}

	// you can add a canvas by it's ID...
	skycons.add("WeatherIcon", "rain");
	$("#WeatherIcon").data("activeicon", "rain");

	// if you're using the Forecast API, you can also supply
	// strings: "partly-cloudy-day" or "rain".

	// start animation!
	skycons.play();

	// you can also halt animation with skycons.pause()
	
	UpdateWeather();
}

function UpdateWeather()
{
	$.get("GetDomoticzInfo.php", function(data, status)
		{
			data = data.replace(/(\r\n|\n|\r)/gm,"");
			if ($("#WeatherIcon").data("activeicon") != data)
			{
				skycons.set("WeatherIcon", data); //Skycons.PARTLY_CLOUDY_NIGHT);
				$("#WeatherIcon").data("activeicon", data);
			}
		});

  // want to remove one altogether? no problem:
//	  skycons.remove("WeatherIcon");
}
</script>

In the code above I set a data field on the canvas actually used in the menubar. I do this to check wether the forecast changed or not. Updating to the same icon disturbs the animation

in the menubar:

Code: Select all

<div class="MenuItemRight">
	<canvas id="WeatherIcon" class="MenuItemContent" width="75" height="75" data-activeicon="">/canvas>
</div>

[floris74]

Hi All!

Thank you for all the work you have been doing!
It resulted in a great frontpage for my Domoticz system.
I've been following this forum for quiet some time now...
Time to give something back!

...

Hi, i tested it,but i'm sorry, it doesnt work, both the dimmer and the thermostat. It reads the actual setpoint, but it can't change the setpoint somehow( i did set format plusmin on 0.5). with the dimmer i only se the on/off button, wich does not react when i press the button (i did set the format plusmin on 0). and i copied the files to www dir. a regular button worked fine.


Floris

[floris74]

Hi All!

Thank you for all the work you have been doing!
It resulted in a great frontpage for my Domoticz system.
I've been following this forum for quiet some time now...
Time to give something back!

...

Hi, i tested it,but i'm sorry, it doesnt work, both the dimmer and the thermostat. It reads the actual setpoint, but it can't change the setpoint somehow( i did set format plusmin on 0.5). with the dimmer i only se the on/off button, wich does not react when i press the button (i did set the format plusmin on 0). and i copied the files to www dir. a regular button worked fine.


Floris

update; i changed
var idx_Thermostat = '96';
so now the thermostat is working. the dimmer not yet. i guess i have another problem... i have 2 thermostats..... any ideas?

Floris

[jesper]

Hi,
Is there some clever who knows how to write "Æ" , "Ø" and "Å" in the frontpage and not as image

[mvveelen]

Because the Skycons are a 'no-go' for including in this frontpage, I searched for other (subtle) moving weather icons and found some .svg icons. Once I've found them, I made them white (come to think of it, you can also make them grey, or make the sun yellow, ets.) and wanted to include them in the frontpage.
The problem I found, was that everything worked fine on my MBP, but once uploaded to the RPi, I only saw the plain text instead of the image. After several things I've tried, I finally found a way to include them: use iframe and rename the .svg in to .html files. And there you go ! It's working! I also changed the SUNRISE and SUNSET to animated .svg images.

A screenshot won't tell the whole story, so I also made a little movie you can find HERE

Once I've finished it, I'll share the code (and images).....IF there are people who want it.....

Schermafbeelding 2015-02-19 om 22.28.16.png (119.18 KiB) Viewed 5860 times

[Titanium87]

Hi,
Is there some clever who knows how to write "Æ" , "Ø" and "Å" in the frontpage and not as image

If you do this in dreamweaver it shows up as the right letter. If not, there are special codes you could use

[jesper]

okay i will try

[BigDog]

mvveelen i am very interested in your frontpage

have tested some from all you guys and its very nice to display on a tab (wall mounted )
easy to adjust and easy for the wife

thanks all

Greetz Bob

[mvveelen]

Exactly: easy for the wife

Well, I think it's doing what it is supposed to do, so feel free to test it with me. To all users: please give me feedback, OK?

I've deleted all unnecessary icons, therefor it also could be added to this post.

frontpage-climacons.zip

(222.13 KiB) Downloaded 310 times

Oh, and could people make a photo of their (wallmounted) display ? That would be nice to see. A little showcase you might say

[SwordFish]

Verry nice done mvveelen.
When i got time i'll try it out.
Question, is it possible to remove the up and down buttons for the dimmer and replace them with a slider?
If so, can someone point me in the right direction

[simply]

+1 on the slider instead of +/- buttons!

suggest make the "package" compatible with being placed in a subdirectory of www, easier to create different frontpages for different tablets/screens/whatever.
just need to modify some paths in the css-files and functions in frontpage.js.

this I changed in the frontpage.js

Code: Select all

        //url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
        url: $.domoticzurl+"/json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",

there seems to be two images missing in the zip-files. and offline.jpg and overlay.png !?

Ps.
perhaps keep variable-names, comments etc in english?
it's all in the details
ds.

[mvveelen]

Ah, the overlay images is indeed missing. I'll post the other images in a short while. They are in the images folder.

I'll check what variables are in Dutch, I thought I had everything in English...
The slider is difficult, at least I never managed to get something like a slider working.

About the subdirectory....well, people can do that themselves, there is no need (for me) to have multiple frontpage versions.


Edit:


Well, here it is.

I haven't changed the IsDonker (=just an IsDark variable) and the word 'Klok'. People will know what this is or does. I did add an English explanation of the words that are now in Dutch.
Also I included all necessary icons and images, and you can also find the previous images I used in the icons folder.

Enjoy and let me know what you think of it

DOWNLOADLINK

[simply]

I think it was only the name of the switch IsDonker that was not in english!

Of course not everybody needs multiple frontpage views, but at least the functions in the frontpage.js should be consistent and use the same URL for access to the domoticz server.
And we get a bonus of it working in both the www folder or in a sub directory.

The RefreshData function use the complete URL in the code:

Code: Select all

 var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";

and ie. works as is, both in the root of the www folder and a sub directory....

but the other functions use a relative URL in the code:

Code: Select all

url:  "json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",

and does not work in a sub directory.

Simplest fix is to just add a "/" in front of "json.htm...."

Code: Select all

url:  "/json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",

but perhaps the complete URL as I wrote in the previos post is more correct/consistent.

On another note, I get an error in Chrome/Devconsole when clicking on buttons:

Code: Select all

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.

and reading a bit about it, I found this:

Developers must not pass false for the async argument when the JavaScript global environment is a document environment.

I changed the

Code: Select all

async: false,

to

Code: Select all

async: true,

and Presto! - No error!
Unknown to me if the affects anything else in the frontpage, but I'll poke around and check the console for further errors.

//a

[Siewert308SW]

Exactly: easy for the wife

Well, I think it's doing what it is supposed to do, so feel free to test it with me. To all users: please give me feedback, OK?

I've deleted all unnecessary icons, therefor it also could be added to this post.

The attachment frontpage-climacons.zip is no longer available

Oh, and could people make a photo of their (wallmounted) display ? That would be nice to see. A little showcase you might say

Posted mine earlier but wasn't satisfied with it.
The wooden frame prevented me to use the powerbutton incase i needed to reboot or in very dark light conditions the motion detection does not work.
There for i created a different wallmount.

I used a old phone car mount.
Removed the swivel section other wise the tablet would stick 10cm out of the wall.
Drilled a hole into the mount section to be able to screw it to the wall.
Put some very strong 3M sticky tape on the back of the tablet to stick on the slider for the wall mount.

Only thing which is annoying me at the moment is the charging cable.
Hate to see cables
The cable is guided true the wall where the Thermostat cable goes true.
Behind the wall is the cellar with cupboard and there for the power supply.