NEW frontpage.html - request comments

[stlaha2007]

The latest from G3rard has a special Alarm cell no 23 bottomrow right.

In the js/frontpage_settings.js you need to specify thr correct idx no 24 as specified with your json device dump.

However, this cell needs the idx of the securitypanel.
Its a domoticz internal hardware/device.

Or you are not using the correct dummy-switchtype, as i don't have any securitydevices i cant tell you how the present themselfs.


Sent from my D6603 using Tapatalk

[gmccarthy]

Thanks - that did the trick! I wasn't using the G3rard version.

[stlaha2007]

Made a little adjustment to the Frontpage version of G3rard.

Ran into the problem that most percent and degrees Celsius where placed to high...

Saw that there was styling inte code in frontpages.js and no styling with css.

Corrected partially frontpage.js with this code

Code: Select all

	// set celsius, %, mm
	if(vtype == 'Temp' && vdata > -100){				// Adds the Celsius sign after temp
	//	vdata=new String(vdata).replace( vdata,vdata + "°C");
		vdata=vdata+"<sup id=\'supDegrees\'> &#176;C</sup>";
	}
	if(vtype == 'Humidity' && vdata > -100){			// Adds % after humidity
	//	vdata=new String(vdata).replace( vdata,vdata + "%");
		vdata=vdata+"<sup id=\'supHum\'> %</sup>";
	}
	if(vtype == 'Rain' && vdata > -100){
	//	vdata=new String(vdata).replace( vdata, vdata + " mm");		// Adds mm after rain
		vdata=vdata+"<sup id=\'supRain\'> mm</sup>";
	}
	if(item.idx == idx_CPUusage && vdata > -100){		// Adds % for CPU
		vdata=vdata+"<sup id=\'supCPUuse\'> %</sup>";
	}
	if(item.idx == idx_CPUmem && vdata > -100){			// Adds % for Memory
		vdata=vdata+"<sup id=\'supCPUmem\'> %</sup>";
	}
	if(item.idx == idx_HDDmem && vdata > -100){			// Adds % for Memory
		vdata=vdata+"<sup id=\'supHDDmem\'> %</sup>";
	}

and placed the styling into css/frontapage-day.css and night with between #cell22,cell2_22 and #all with this:

Code: Select all

#supDegrees {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-2.0em;
	/* color: lightgreen; */
}

#supHum {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-3.0em;
}

#supRain {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-0.6em;
}

#supCPUuse {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-0.5em;
}

#supCPUmem {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-0.5em;
}

#supHDDmem {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-0.5em;
}

#supLux {
	font-size: 40%;
	vertical-align: top;
	position: relative;
	bottom:-0.6em;
}

[marcelonline]

Hello people,

Is it possible to get sound from the iPad? For voice (Voicerss) and radio streams (buttons)?
In frontpage.

Kind regards,
Marcel of Dordrecht

Can anyone help me?


Verzonden vanaf mijn iPhone met Tapatalk

[stlaha2007]

Hello people,

Is it possible to get sound from the iPad? For voice (Voicerss) and radio streams (buttons)?
In frontpage.

Kind regards,
Marcel of Dordrecht

Can anyone help me?


Verzonden vanaf mijn iPhone met Tapatalk

I have seen your post earlier... Dont recall in this thread or elsewhere on the forum.

However, your question is quite cryptic. As I don't use iDevices. And where VoiceRSS or Radiostream will produce the sound.

And does it have todo with this FrontPage?

Would it be wise to look at the wiki first VoiceRSS/Text2Speech/Audio is available there as a starting point, and repost your question(s) in the right subforum?

Sent from my D6603 using Tapatalk

[yentrangkorea]

Thanks - that did the trick! I wasn't using the G3rard version.

[stlaha2007]

Thanks - that did the trick! I wasn't using the G3rard version.

Wandering what trick you mean and from who....

[lukev]

Hi all,

I am still struggeling with the 'buienradar' URL's in my frontpage. I'm using the ones in the github frontpage of G3rard, but the view in the frontpage cell AND in the popup go offline after a few seconds. Then I have to refresh the page and the views are back... for a few seconds.

Anyone got working URL's, or do I have some sort of other issue?

[Arkie]

I'm trying to modify G3rard's frontpage for my own use, without the knowhow
Is there a possibility of a popup for entering a password for the 'protected' fields?
(I noticed the popup of the camera isn't working either when the doorbell is pressed because of the protection)
And are there other widgets instead of buienradar, like the forecast or a widget to controle spotify? Maybe this is possible with a link, when spotify is already running at the background?

Regards

[Teunissm]

Hello,

I am modifying G3rard's frontpage by experimenting and searching on this forum and piece by piece i'm getting closer to the frontpage I like. I'm only wondering: is there somehow a possibility to ad RGB switches in this frontend? When i add such a switch as a "level" device I can control the light bij switching it on and of and dimming the light. But i also want to change the colors. Is that possible to create?

Marcel

[skalman77]

Anyone have an updated version of bizziebis design (posted the 5th of March 2015)? I really like the style with his CSS. I'm however missing the date, time function to put in a double cell.

Secondly i would like to sum all energy meeters i have and present them as a total energy consumption. Is that possible?

Hope someone can share an updated version where this is implemented. (Real newbie when it comes to programming, so therefore i ask for helt )

Here is where i downloaded the viewtopic.php?f=8&t=4698&p=36427#p36427

[racquemis]

Hello,

I am modifying G3rard's frontpage by experimenting and searching on this forum and piece by piece i'm getting closer to the frontpage I like. I'm only wondering: is there somehow a possibility to ad RGB switches in this frontend? When i add such a switch as a "level" device I can control the light bij switching it on and of and dimming the light. But i also want to change the colors. Is that possible to create?

Marcel

Something like this?

rgbw.PNG (36.5 KiB) Viewed 2954 times

I made this for my milight RGBW lights. Sliders can only be controlled from a touch device by pressing the position you want it to go. Sliding doesn't seem to work. But colors can still be selected pretty accurate. This also corrects for the shift in hue
Still have to find an accurate way to switch back to white. I'll share the code when done.

[Teunissm]

Hello,

I am modifying G3rard's frontpage by experimenting and searching on this forum and piece by piece i'm getting closer to the frontpage I like. I'm only wondering: is there somehow a possibility to ad RGB switches in this frontend? When i add such a switch as a "level" device I can control the light bij switching it on and of and dimming the light. But i also want to change the colors. Is that possible to create?

Marcel

Something like this?

rgbw.PNG

I made this for my milight RGBW lights. Sliders can only be controlled from a touch device by pressing the position you want it to go. Sliding doesn't seem to work. But colors can still be selected pretty accurate. This also corrects for the shift in hue
Still have to find an accurate way to switch back to white. I'll share the code when done.

This looks really Great i am looking forward to the code for this future. Is it also possible to post the code you have so far?

[racquemis]

HMTL Slider controls for RGBW lights (Mi-Light + Others)


I added a HTML5 slider control that allows you change brightness and hue.
Sliding the bar does not work correctly on touch devices, however by tapping the control at the desired position you can control your lights brightness and hue just fine.

Code has been tested on a 10 inch Tablet (Toshiba Encore 2 WT-10) on the chrome browser on a tweaked frontpage.
I give this code as-is, i can't garantuee that it will give you the same accuracy in color selection as i experience
Tweak the code yourself if you run into any problems. if the controls don't stay within their cell, tweak the inline css.

Brightness
Brightness can be controlled with a 1% interval in the range 0-100%

Hue
Hue can be controlled with a interval of 1 degree in the range 0-360
Milight has an offset in the hue of around 24. To correct for this set the plusmin parameter of your device to 100 in the FrontPage settings
Use 101 for other brands of lights if they don't exhibit the same problem

Return to white
To return your lights to white, press and hold on the brightness slider for two seconds.

Installation
In frontpage.js locate the dimmer if statement, search for

Code: Select all

//Dimmer
If (vtype == 'level' && item.SwitchType = 'Dimmer')

Replace the entire if statement with the one below:

Code: Select all

//Dimmer
	if(vtype == 'Level' && item.SwitchType == 'Dimmer') {
		if(vplusmin > 0 && vplusmin !=2 && vplusmin !=4) {
			if (vdata == txt_off) {
				if(vplusmin == 1) { //Normal dimmer
					var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
				} 
				if(vplusmin == 100) { //Normal dimmer
					var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
				} 
				if(vplusmin == 5) { //Set ZWave dimmer on certain value from frontpage_settings
					z_dimmer = '40';
					var hlp = '<span onclick="SwitchDimmer('+item.idx+', '+z_dimmer+');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
					//var hlp = '<span onclick="SwitchToggle('+item.idx+',\'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"; style='+alarmcss+'>'+ vdata+'</span>';
					//End ZWave dimmer
				}
				//var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ChangeStatus('plus',txt_off," + item.idx + ","+ vdimmercurrent+")>"; //align=right replaced by hspace and vspace
				//var min = "<img src=icons/down3.png align=left vspace=12 onclick=ChangeStatus('min',txt_off," + item.idx + ","+ vdimmercurrent+")>" //allign=left
				var plus = ""; //no buttons when switch is off
				var min = ""; //no buttons when switch is off
			}
			else if(vplusmin !=2 && vplusmin !=4) {
				if (item.MaxDimLevel == 100) {
						//For ZWave dimmer
						if(vplusmin == 5 && item.idx == idx_zdimmer) { //compare idx_zdimmer with z_whichdimmer if there are more zdimmers
							//vdata = z_dimmer;
							vdimmervalue = Math.round(vdimmervalue / 10)*10; //round to ten
							if(z_dimmer == '') {		//when starting the frontpage
								vdata = vdimmervalue;	//show current dim value
							} else if (z_dimmer != vdimmervalue) {						//when dimmer is changed
									vdata = z_dimmer;
									z_dimmer = vdimmervalue;
							} else {
								vdata = z_dimmer;
							}
							var hlp = '<span onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
							var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ZWaveDim('plus'," + vdata + "," + item.idx + ")>";
							var min = "<img src=icons/down3.png align=left vspace=12 onclick=ZWaveDim('min'," + vdata + "," + item.idx + ")>";
							//console.log(vdata + " | " + item.idx);
						}
                                                else if(vplusmin == 100) { //html5 slider bar for milight lights
							if (typeof hue_array[item.idx] == 'undefined'){
								hue_array[item.idx]=360
							}
							var hlp = '<div style="position:relative;z-index=1000;top:-4px;font-size:initial;line-height:initial"><input onmousedown="startCountToWhite(this.value,' + item.idx + ')" onmouseup="stopCountToWhite()" style="position:relative;top:4px" type="range" min="0" max="' + item.MaxDimLevel +'" value="'+ vdimmercurrent +'" step="2" onChange="ChangeStatus100(this.value,'+item.idx+')" /></div>';
							hlp = hlp + '<div style="position:relative;z-index=1000;top:-6px;font-size:initial;line-height:initial"><input style="position:relative;top:4px;-webkit-appearance: none;background: white;background: -webkit-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));height:5px" type="range" min="0" max="360" value="' + hue_array[item.idx] +'" step="1" onChange="ChangeHue(this.value,' + vdimmercurrent + ','+item.idx+',24)" /></div>';
				        		var plus = "";
				        		var min = "";
						}
						else if(vplusmin == 101) { //html5 slider bar for other lights
							if (typeof hue_array[item.idx] == 'undefined'){
								hue_array[item.idx]=360
							}
							var hlp = '<div style="position:relative;z-index=1000;top:-4px;font-size:initial;line-height:initial"><input onmousedown="startCountToWhite(this.value,' + item.idx + ')" onmouseup="stopCountToWhite()" style="position:relative;top:4px" type="range" min="0" max="' + item.MaxDimLevel +'" value="'+ vdimmercurrent +'" step="2" onChange="ChangeStatus100(this.value,'+item.idx+')" /></div>';
							hlp = hlp + '<div style="position:relative;z-index=1000;top:-6px;font-size:initial;line-height:initial"><input style="position:relative;top:4px;-webkit-appearance: none;background: white;background: -webkit-linear-gradient(left, hsl(0,100%,50%),hsl(60,100%, 50%), hsl(120,100%, 50%), hsl(180, 100%, 50%), hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));height:5px" type="range" min="0" max="360" value="' + hue_array[item.idx] +'" step="1" onChange="ChangeHue(this.value,' + vdimmercurrent + ','+item.idx+',0)" /></div>';
				        		var plus = "";
				        		var min = "";
						}
						else {
							//vdata = o_dimmer;
							vdimmervalue = Math.round(vdimmervalue / 10)*10; //round to ten
							vdata = vdimmervalue; //show current dim value
							var hlp = '<span onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
							var plus = "<img src=icons/up2.png align=right vspace=12 onclick=BlindChangeStatus('plus'," + vdata + "," + item.idx + ")>";
							var min = "<img src=icons/down3.png align=left vspace=12 onclick=BlindChangeStatus('min'," + vdata + "," + item.idx + ")>";
							//console.log(vdata + " | " + item.idx);
						}
					}
					
 					else {
						//vdata2 = vdimmervalue; //used for ChangeStatus
						//vdimmervalue = Math.round(vdimmervalue / 5)*5; //round to ten
						vdata = vdimmervalue; //show current dim value
						var hlp = '<span onclick="SwitchToggle('+item.idx+',\'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"; style='+alarmcss+'>'+ vdata+'</span>';
						var plus = "<img src=icons/up2.png align=right vspace=12 onclick=ChangeStatus('plus'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>"; //align=right replaced by hspace and vspace
						var min = "<img src=icons/down3.png align=left vspace=12 onclick=ChangeStatus('min'," + vdata + "," + item.idx + ","+ vdimmercurrent+")>" //align=left
					}
			}
		}
		vdata = min.concat(hlp,plus);
		//console.log(vdata);
	}

Next, locate the line

Code: Select all

<!-- Main Frontpage fuction -->

And add the following line above it

Code: Select all

var hue_array = [];

Next Add the following functions to the frontpage.js file, i added them below the SwitchDimmer function but the location does not matter as long as it's in the script.

Code: Select all

//Color Picker
function ChangeHue(hue,brightness,idx,offset){
   var newhue = parseInt(hue) + offset;
   if (newhue > 360){
      newhue=newhue-360;
   }
   $.ajax({
	url: $.domoticzurl+"/json.htm?type=command&param=setcolbrightnessvalue&idx=" + idx + "&hue=" + newhue.toString() + "&brightness=" + brightness + "&iswhite=false",
	async: false,
	dataType: 'json',
	success: function(){
	console.log('SUCCES');
	hue_array[idx]=hue
	},
	error: function(){
	console.log('ERROR');
	}
	});

}
// Disable
var count = 0;
var t;
var timer_exceeded = 1;
function timeToWhite(brightness,idx) {
   if (timer_exceeded == true){
      return;
   }
   if (count == 4){
      timer_exceeded=true;
      $.ajax({
	   url: $.domoticzurl+"/json.htm?type=command&param=setcolbrightnessvalue&idx=" + idx + "&hue=0&brightness=" + brightness + "&iswhite=true",
	   async: false,
	   dataType: 'json',
	   success: function(){
	   console.log('SUCCES');
	   hue_array[idx]=0
	   },
	   error: function(){
	   console.log('ERROR');
	   }
	   });
   }
   else{
      count = count + 1;
      t = setTimeout(function(){ timeToWhite(brightness,idx) }, 1000);
   }
}
function startCountToWhite(brightness,idx) {
   count = 0;
   timer_exceeded=false;
   timeToWhite(brightness,idx);
}
function stopCountToWhite() {
   timer_exceeded=1;
}


function ChangeStatus100(level,idx){
	$.ajax({
	url: $.domoticzurl+"/json.htm?type=command&param=switchlight&idx=" + idx + "&switchcmd=Set Level&level=" + level,
	async: false,
	dataType: 'json',
	success: function(){
	console.log('SUCCES');
	},
	error: function(){
	console.log('ERROR');
	}
	});
}

Visuals on Chrome Browser

rgbw chrome.PNG (136.62 KiB) Viewed 2902 times

Visuals on Edge Browser

rgbw edge.PNG (75.17 KiB) Viewed 2902 times

In frontpage_settings.js locate your RGBW control entry and change the plusmin parameter to 100 for milight or 101 for other lights e.g.

Code: Select all

	['98','Level',		'cell10',	'Lamp Zithoek','1','100'] 

If you can't get it to work, backup yout frontpage.js file and replace it with the one i've attached to this post

[Teunissm]

@racquemis,

I have added the code just as you said but in my frontpage the milight wich i see as dimmer when is use "vplusmin 1" in the settingstab dissapear when i change the "vplusmin" to 100 or 101?
Do you have any idea?

Marcel

[racquemis]

I've edited the post with the instructions to make it more foolproof, also i forget to add one line of code.
See if you can get it working now, if not use my frontpage.js i have attached to that post.

[Teunissm]

Indeed, the missing code was the problem. Got it working now and it works perfect.
Thanks for this piece of work.

Marcel

[lukev]

Awesome racquemis, works like a charm on my milight bulb and strips.
There seems to be a big lag now and then, but I can live with that!

[12345caravan]

Only for the milight controller? Or is this working for milight through rflink also? Would be nice!
Confirmed: working with rflink too!

[racquemis]

If if the device type is dimmer and you can control rgb values from domoticz it should work.