NEW frontpage.html - request comments

[bbqkees]

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

How about this:

I changed the ValueChange function (from my last version) so that it now checks if it is either a Setpoint device or not.
If it is a Setpoint device, it will send a different json command.
Otherwise, it just does the regular dimming json command.

In the HTML change the button contents :

Code: Select all

<div class="minbutton"><input onclick="ValueChange('+item.idx+', '+vtype+', '+vdimmercurrent+', \'min\', '+vplusminus+', '+vdimmermax+');" type="submit" name="" value=""></div><span onclick="SwitchOff('+item.idx+')"; style='+alarmcss+'>'+vdata+'</span><div class="plusbutton"><input onclick="ValueChange('+item.idx+', '+vdimmercurrent+', \'plus\', '+vplusminus+', '+vdimmermax+');" type="submit" name="" value=""></div>

The only change above is the addition of

Code: Select all

 '+vtype+',

And the modified ValueChange function (not tested):

Code: Select all

function ValueChange(idx, type, currentvalue, dimtype, stepsize, dimmermax)
{
	 newvalue='';
	 if (dimtype == 'plus') { 
		if ((currentvalue + stepsize) > dimmermax){
			 newvalue = dimmermax;
		} else {
		 newvalue = currentvalue + stepsize;
		}
	}
	else if (dimtype == 'min'){ 
		 if (currentvalue < stepsize){
			 newvalue = 1;
		} else {
		 newvalue = currentvalue - stepsize;
		}
	}
	
	if (type == 'Setpoint') {
	$.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');
     }
 	});	
	}
	else {
	$.ajax({
     url: "json.htm?type=command&param=switchlight" + "&idx=" + idx + "&switchcmd=" + "Set%20Level" + "&level=" + newvalue,
     async: false, 
     dataType: 'json',
     success: function(){
     	console.log('SUCCES');
     },
     error: function(){
     	console.log('ERROR');
     }
 	});	
	}
 
 	RefreshData();
}

I do not know if it is 'Setpoint' or 'SetPoint'. If it is the latter, change it in the function above.

[mvveelen]

With some tweaking I have the following frontpage. Never done, but almost I think

[thorbj]

Hi, I have combined the design of @Dountill in this post: http://www.domoticz.com/forum/viewtopic ... =20#p30350, and the latest release from @jan_nl in this post: http://www.domoticz.com/forum/viewtopic ... 260#p33184, into the following rar-file:

http://tangeland.net/Domoticz/Frontpage ... -fresh.rar - Download from this link, because of the filesize is to large for the forum. The .rar includes all icons and images.

I have also added some changes myself, like the altered date-script from here: http://www.domoticz.com/forum/viewtopic ... 280#p33260
And I've changed the "if dark change color" function to display an image instead of a color. The images are included in the .rar file. These are day_s.jpg and night_s.jpg. These images are courtesy of https://unsplash.com/.

Files need to be copied into the corresponding folders under

Code: Select all

/domoticz/www

except from the file in the scripts folder. This needs to be under

Code: Select all

/domoticz/scripts

I think.

Here is a screenshot:


@Dountill and @jan_nl, I hope this is OK.

[SwordFish]

With some tweaking I have the following frontpage. Never done, but almost I think

Nice look.
Can you share the buttons please, they look nice.

[thorbj]

With some tweaking I have the following frontpage. Never done, but almost I think

Great look @mvveelen! May I ask how you got the degree symbol behind the temp, and the sun icon for sunrise/-set?

Thanks.

[mvveelen]

Can you share the buttons please, they look nice.

I packed everything in the following .zip file : LINK

Things to do:

- change colors for the day / night .css files (just slight changes)
- somehow manage to get the night-weatherforecast-images when it's after sunset (because a sun with clouds during the night is just.....weird)
- follow the code jan_nl brings and maybe implement parts of it in 'my' version.

With some tweaking I have the following frontpage. Never done, but almost I think

Great look @mvveelen! May I ask how you got the degree symbol behind the temp, and the sun icon for sunrise/-set?

Thanks.

I changed a piece of code in frontpage.js like this:

Code: Select all

	if(item.idx == '31' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}
	if(item.idx == '132' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}

idx 31 and idx are the temp sensors, and the > -100 is well....her in the Netherlands it's never below - 100 C and...well....it works.

For the sunrise / sunset, just check the code. It's pretty easy to do.

Edit:

Oh, and if you like this: ℃ .... you can use the following code instead of the ' ° ':

Code: Select all

℃

[ThinkPad]

Hi, I have combined the design of @Dountill in this post: http://www.domoticz.com/forum/viewtopic ... =20#p30350, and the latest release from @jan_nl in this post: http://www.domoticz.com/forum/viewtopic ... 260#p33184, into the following rar-file:
[...]

Looking really good! I really like the transparent background of the cells!

And because you used Dountill' version, it is also responsive i think?

I will have a look at your version when i have time, looks really good.

[thorbj]

Looking really good! I really like the transparent background of the cells!

And because you used Dountill' version, it is also responsive i think?

I will have a look at your version when i have time, looks really good.

Thank you @ThinkPad!
I may have broken the responsiveness while trying to get the two big cells at the top to fit right. Haven't had the chance to test this fully yet.

@mvveelen thank you, will try that

[ThinkPad]

Just try to resize your browser window, and look if the buttons all resize theirselves and stay visible on the screen (=responsive), or if the size of the page stays the same, and some button's aren't visible anymore (=not responsive)

[thorbj]

Just try to resize your browser window, and look if the buttons all resize theirselves and stay visible on the screen (=responsive), or if the size of the page stays the same, and some button's aren't visible anymore (=not responsive)

Yep, I broke responsiveness Have to look into that...

[jannl]

If you change the line with the link to http://www.anwb.nl with

Code: Select all

$('#'+vlabel).html( '<div style='+vattr+'><a href="http://maps.google.nl/maps?ll=51.1,6&t=m&z=10&layer=t" target="_blank">'+file_string+'</a></div>');

Google maps will be opened with traffic enabled. Please change 51.1,6 to whatever matches a place around your home. You can trye this url in your browser.

[floris74]

@bbqkees,

I do not know if it is 'Setpoint' or 'SetPoint'. If it is the latter, change it in the function above.

It's SetPoint, yes. I see that you have a solution for the thermostat, but i don't know how to implement it in Jan_nl his version. Maybe the versions can be merged, best of both worlds? , with all options from the others. Problem may be that there are getting to many options/functions comparing to the purpose of frontpage.html (keep it simple)

Floris

[thorbj]

I changed a piece of code in frontpage.js like this:

Code: Select all

	if(item.idx == '31' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}
	if(item.idx == '132' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}

idx 31 and idx are the temp sensors, and the > -100 is well....her in the Netherlands it's never below - 100 C and...well....it works.

For the sunrise / sunset, just check the code. It's pretty easy to do.

Edit:

Oh, and if you like this: ℃ .... you can use the following code instead of the ' ° ':

Code: Select all

℃

This worked great @mvveelen, however I have one slightly small problem. I use a multisensor to detect temp and humidity in my livingroom, and display this in two seperate cells. The temp and humidity sensor have the same idx, is it possible to display these values differently? Now I get the degree symbol behind both values.

[pwhooftman]

If you change the line with the link to http://www.anwb.nl with

Code: Select all

$('#'+vlabel).html( '<div style='+vattr+'><a href="http://maps.google.nl/maps?ll=51.1,6&t=m&z=10&layer=t" target="_blank">'+file_string+'</a></div>');

Google maps will be opened with traffic enabled. Please change 51.1,6 to whatever matches a place around your home. You can trye this url in your browser.

Thanks!
Does show traffic for me when trying http://maps.google.nl/maps?ll=51.1,6&t=m&z=10&layer=t in my browser.

update/correction: vary both numbers 51.1 and 6 to find your spot.

[thorbj]

No you don't. Take care, better use 0 instead of 29. And you now can use SunBoth, SunRise and SunSet as well.I had some stand issues when using an existing idx by accident.

I downloaded the icons from a link on this forum. I will post them here in several files today of tomorrow

@mvveelen: I understand the need for mods, however I don't really understand how. Comments in the code are present, more or less. But I will make it more clear with future changes

Thanks that works. But now i want to get sunsrise in one cell en sunset in another cell. I have now set idx '0' and value 'Sun'. when i put 'SunRise' in the value i get nothing? Is there something i have to change?

Use jan_nl's latest release from HERE.

[jannl]

I changed a piece of code in frontpage.js like this:

Code: Select all

	if(item.idx == '31' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}
	if(item.idx == '132' && vdata > -100){			// Adds the Celsius sign after the temperature
	vdata=new String(vdata).replace( vdata,vdata + "°");
	}

idx 31 and idx are the temp sensors, and the > -100 is well....her in the Netherlands it's never below - 100 C and...well....it works.

For the sunrise / sunset, just check the code. It's pretty easy to do.

Edit:

Oh, and if you like this: ℃ .... you can use the following code instead of the ' ° ':

Code: Select all

℃

This worked great @mvveelen, however I have one slightly small problem. I use a multisensor to detect temp and humidity in my livingroom, and display this in two seperate cells. The temp and humidity sensor have the same idx, is it possible to display these values differently? Now I get the degree symbol behind both values.

Add an additional check to the if statement, where you check for the status. I think something like (item.Status == 'Temp'), not sure about item.Status though

[thorbj]

This worked great @mvveelen, however I have one slightly small problem. I use a multisensor to detect temp and humidity in my livingroom, and display this in two seperate cells. The temp and humidity sensor have the same idx, is it possible to display these values differently? Now I get the degree symbol behind both values.

Add an additional check to the if statement, where you check for the status. I think something like (item.Status == 'Temp'), not sure about item.Status though[/quote]

Thanks @jan_nl, you mean like this?

Code: Select all

if(item.idx == '35' && vdata > -100 && item.Status == 'Temp'){			// Adds the Celsius sign after the temperature
vdata=new String(vdata).replace( vdata,vdata + "℃");
}

If so the Status may be wrong. Is there a documentation, or log or something like that where I can find the right command?

Thanks.

[jannl]

If so the Status may be wrong. Is there a documentation, or log or something like that where I can find the right command?

Thanks.

Check the json command to display the roomplan, In that way you can find the correct name. I think this is somewhere in the wiki

[thorbj]

Check the json command to display the roomplan, In that way you can find the correct name. I think this is somewhere in the wiki

Thanks for helping me @jan_nl
I found the command

Code: Select all

http://10.0.0.100:8080/json.htm?type=devices&plan=2

in the wiki to get the json of my roomplan. When accessing that link I get a lot of text data. I found the idx number of the sensor,and the following values:

Code: Select all

 { "AddjMulti" : 1.0, "AddjMulti2" : 1.0, "AddjValue" : 0.0, "AddjValue2" : 0.0, "BatteryLevel" : 99, "CustomImage" : 0, "Data" : "22.3 C, 27 %", "DewPoint" : "2.39", "Favorite" : 1, "HardwareID" : 3, "HardwareName" : "RaZberry", "HaveTimeout" : false, "Humidity" : 27, "HumidityStatus" : "Comfortable", "ID" : "0B01", "LastUpdate" : "2015-02-05 12:54:11", "Name" : "Temp og fukt sensor", "Notifications" : "false", "PlanID" : "2", "Protected" : false, "ShowNotifications" : true, "SignalLevel" : 12, "SubType" : "WTGR800", "Temp" : 22.30, "Timers" : "false", "Type" : "Temp + Humidity", "TypeImg" : "temperature", "Unit" : 0, "Used" : 1, "XOffset" : "0", "YOffset" : "0", "idx" : "35" 

Using this information, I have tried with item.Type == 'Temp', item.Type == 'WTGR800', item.Type == 'WTGR800:Temp', item.SubType == 'WTGR800', item.SubType == 'Temp' and item.SubType == 'WTGR800:Temp'.

The "item.SubType == 'WTGR800" gave me the degree symbol in both cells, just as I had without adding the item.SubType-part.

I suppose i need to use item.SubType , but I cant figure out in what way I sould format the values for this command.

[jannl]

oops, I think I pointed you in the wrong direction.
You need to compare the Status value in PageArray.
In the array the word Humidity or Temp can be found, in this way you can determine what is in which cell.

Sorry for the confusion.
Jan