Page 55 of 66

Re: NEW frontpage.html - request comments

Posted: Friday 04 November 2016 9:41
by 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

Re: NEW frontpage.html - request comments

Posted: Friday 04 November 2016 10:09
by gmccarthy
Thanks - that did the trick! I wasn't using the G3rard version.

Re: NEW frontpage.html - request comments

Posted: Friday 04 November 2016 13:05
by 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;
}

Re: NEW frontpage.html - request comments

Posted: Saturday 05 November 2016 14:14
by marcelonline
marcelonline wrote: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

Re: RE: Re: NEW frontpage.html - request comments

Posted: Saturday 05 November 2016 14:50
by stlaha2007
marcelonline wrote:
marcelonline wrote: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

Re: NEW frontpage.html - request comments

Posted: Monday 07 November 2016 17:55
by yentrangkorea
Thanks - that did the trick! I wasn't using the G3rard version.

Re: RE: Re: NEW frontpage.html - request comments

Posted: Monday 07 November 2016 20:20
by stlaha2007
yentrangkorea wrote:Thanks - that did the trick! I wasn't using the G3rard version.
Wandering what trick you mean and from who....

Re: NEW frontpage.html - request comments

Posted: Saturday 12 November 2016 9:19
by 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?

Re: NEW frontpage.html - request comments

Posted: Saturday 12 November 2016 21:57
by Arkie
I'm trying to modify G3rard's frontpage for my own use, without the knowhow :lol:
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

Re: NEW frontpage.html - request comments

Posted: Sunday 13 November 2016 23:57
by 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

Re: NEW frontpage.html - request comments

Posted: Monday 14 November 2016 11:20
by 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

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 6:53
by racquemis
Teunissm wrote: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
rgbw.PNG (36.5 KiB) Viewed 3150 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.

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 10:00
by Teunissm
racquemis wrote:
Teunissm wrote: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?

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 11:19
by 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
rgbw chrome.PNG (136.62 KiB) Viewed 3098 times
Visuals on Edge Browser
rgbw edge.PNG
rgbw edge.PNG (75.17 KiB) Viewed 3098 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

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 17:05
by 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

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 19:07
by 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.

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 20:17
by Teunissm
Indeed, the missing code was the problem. Got it working now and it works perfect.
Thanks for this piece of work.

Marcel

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 22:35
by 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!

Re: NEW frontpage.html - request comments

Posted: Sunday 20 November 2016 22:57
by 12345caravan
Only for the milight controller? Or is this working for milight through rflink also? Would be nice!
Confirmed: working with rflink too! :D

Re: NEW frontpage.html - request comments

Posted: Monday 21 November 2016 6:50
by racquemis
If if the device type is dimmer and you can control rgb values from domoticz it should work.