NEW frontpage.html - request comments

Ewaldharmsen · Post by **Ewaldharmsen** » Monday 20 March 2017 18:38

Sure, here are all the files I changed from G3rards design

Frontpage.zip: (24.25 KiB) Downloaded 1163 times

Trigun · Post by **Trigun** » Monday 20 March 2017 20:13

Ewaldharmsen wrote:Sure, here are all the files I changed from G3rards designFrontpage.zip

Great! I assume just changes all the IDX's in the frontpage_setting files will do the trick?

Trigun · Post by **Trigun** » Monday 20 March 2017 20:14

Trigun wrote:
Ewaldharmsen wrote:Sure, here are all the files I changed from G3rards designFrontpage.zip
Great! I assume just changes all the IDX's in the frontpage_setting files will do the trick?
PS. the temp in you "woonkamer" seems a bit high though

Xavier82 · Post by **Xavier82** » Tuesday 28 March 2017 16:23

Hi all,

Finally I managed to get some modifications for my FrontPage.
All files can be found at: https://github.com/Xavier82/Frontpage.

The screenshots from my FrontPage, based on G3rards FrontPage, can be found at the repository.
Page 1

: frontpage screenshot page1.png (373.15 KiB) Viewed 11108 times

Page 2

: frontpage screenshot page2.png (371.88 KiB) Viewed 11108 times

Thank you G3rard for sharing your FrontPage.

Modifications done:
FrontPage day CSS page 1:
Enlarged 2nd row cell 2 and cell 5--> result 3 inputfields
Enlarged cell 3 and 25 to match first row height

Cell20 contains LUA script which determines when trashcans are emptied by the community.
Shows type of trash to be emptied based on time schedule (weekly and by time)

FrontPage day CSS page 2:
Enlarged 2nd row cell 2_2 and cell 2_5--> result 3 inputfields
Enlarged cell 2_3 and 2_25 match first row height
Enlarged complete 5th row. Now each cells has 6 inputfield--> Result added functions/control for my Onkyo Receiver

LUA script for "Afval" and icons for "Afval"(Garbage) can be found in the repository.
LUA script for controlling Onkyo Receiver and icons for "Onkyo receiver" can be found in the repository.

FrontPage.html:
Added cells within DIV

FrontPage.JS:
Added commands to change text to icon for "Afval" and "Onkyo receiver" (Radio)

FrontPage_settings.js
Added IDX for Onkyo
Added multiple cells which are created in CSS to assign new inputfields.

This is my first post so hope this all works

Feel free to use!

westd001 · Post by **westd001** » Monday 03 April 2017 23:07

racquemis made a great slider to control RGBW bulbs but I want to make the slider larger so you can control it better, see the picture.
I spent a few hours to change the html, js or css code but had no luck, I don't have the knowledge where the lenght of the slider is defined in the code

thanks in advance
JJ

: Slider in frontpage.PNG (265.3 KiB) Viewed 11023 times

pwhooftman · Post by **pwhooftman** » Monday 05 June 2017 20:15

Just thought i'd share my frontpage.

The information about the next garbage pickup is grabbed from the (dutch) afvalwijzer.nl site.
And i think switches which state On or Off in big letter are not informative enough. So i swap the vdata and desc element, and make the button text yellow when on and grey when off.

I have loads of more switches and utilities, but i like a clean page, so i only show the info which interest me most.

ubfssF · Post by **ubfssF** » Tuesday 13 June 2017 21:11

pwhooftman wrote:Just thought i'd share my frontpage.

The information about the next garbage pickup is grabbed from the (dutch) afvalwijzer.nl site.
And i think switches which state On or Off in big letter are not informative enough. So i swap the vdata and desc element, and make the button text yellow when on and grey when off.

I have loads of more switches and utilities, but i like a clean page, so i only show the info which interest me most.

Nice. Not only the Algrabridge, but when garbage is collected. Could you please share the code for that?

Derik · Post by **Derik** » Tuesday 13 June 2017 21:26

nice to try this extra because a finally got my wall mounted tablet...

Is there perhaps someone that have the calendar working in this board?
The gmail or a other ical option??

pwhooftman · Post by **pwhooftman** » Tuesday 13 June 2017 22:47

ubfssF wrote: Nice. Not only the Algrabridge, but when garbage is collected. Could you please share the code for that?

My code is still a bit messy, so here is the whole lot.

look for "afval" in the code to find the relevant bits for the garbage info.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>

<style type "text/css">
<!--
/* @group Blink */
.blink {
	-webkit-animation: blink .75s linear infinite;
	-moz-animation: blink .75s linear infinite;
	-ms-animation: blink .75s linear infinite;
	-o-animation: blink .75s linear infinite;
	 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
/* @end */
-->
</style>

<meta charset="utf-8">
<title>Domoticz Monitor</title> 
 <meta name="apple-mobile-web-app-capable" content="yes" />
                <meta name="mobile-web-app-capable" content="yes" />
				<meta http-equiv="refresh" content="6000">
				<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
				<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
                <meta name="apple-mobile-web-app-status-bar-style" content="black" />
				<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
				<meta charset="utf-8" />
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <link rel="shortcut icon" href="/favicon.ico" />
	            <link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


	blink("#Voordeur", 10, 500);

<style>
body,html{
    height: 100%;
    margin: 0;
    padding: 0;
	background-color: black;
}

html, body, #map-canvas {
		float: left;
		height: 288px;
        width: 365px;
		margin: 2;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
        padding: 2
}
	  
div#cnt {
	width: 1260px;
	height: 100%;
    margin: 0 auto;
    text-align: center;
}

.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    margin-right: -.25em;
    height: 100%; 
}

.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

img{
	border:1px solid #;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

a, a:visited { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: #003366; }

#frame {
	float: left;
	margin: 0px;
	padding: 0px 4px 4px 4px;
}

#afval-div
{
    width    : 299px;
    height   : 58px;
	zoom     : 2.5;
    overflow : hidden;
    position : relative;
	padding: 1
	border:1px solid #;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
		margin-top: 0px;

}

#afval-iframe
{
    position : absolute;
    top      : -76px;
    left     : -190px;
    width    : 500px;
    height   : 500px;
		border-radius: 5px;

}

#desc_GasVandaag, #desc_WoonkamerTemp, #desc_ElektraGekocht, #desc_BuitenVocht,
#desc_ElektraVerkocht, #desc_BuitenTemp, #desc_HuidigVerbruik, #desc_CVKetel,
#desc_BuitenlampVoor, #desc_BuitenlampAchter, #desc_Vijverlamp, #desc_Vijverpomp, #desc_Badkamer, #desc_CVBoiler,
#desc_Woonkamerscene, #desc_StaandeLampHal, #desc_Voordeur, #desc_Zon_vandaag, #desc_Watergeven {
	font-family: Arimo;
	font-weight: bold;
	color: #ABACB0; //kleur van item beschrijving
	font-size: 5px;
	margin-top: -29px;
	padding: 5px;

}

#GasVandaag, #WoonkamerTemp, #ElektraGekocht, #BuitenVocht, #ElektraVerkocht, 
#BuitenTemp, #HuidigVerbruik, #CVKetel, #BuitenlampVoor, #BuitenlampAchter, #Vijverlamp, #Vijverpomp,
#Badkamer, #CVBoiler, #Woonkamerscene, #StaandeLampHal, #Voordeur, #Zon_vandaag, #Watergeven {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	width: 222px;
	padding: 10px;
	border: 1px solid #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #070707;
	height: 128px;
	line-height: 90px; 		
	font-size: 60px;
	color: white; //Kleur waardes van cellen

}

#CVKetel, #BuitenlampVoor, #BuitenlampAchter, #Vijverlamp, #Vijverpomp,
#CVBoiler, #Woonkamerscene, #StaandeLampHal, #Watergeven, #Voordeur{
 	font-size: 42px;

}
#Woonkamerscene, #Watergeven, #Voordeur{
 	font-size: 37px;

}



#WoonkamerTemp {
	width: 725px;
	padding: 10px;
	line-height: 90px;
	font-size: 100px;	
	color: darkorange;
}


}
#Buienradar {
	width: 725px;
	height: 285px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}




#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 75px;
    margin-left: -150px;
    margin-top: -100px;                 
    padding: 10px;
    border: 2px solid red;
    background: #333;
    z-index:1002;
    overflow:visible;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 25px;
	color: white;
	line-height: 75px;
	text-align: center;	
	-webkit-border-radius: 15px 15px 15px 15px;
	border-radius: 15px 15px 15px 15px;	
}

.camera {
  background: url(offline.jpg) no-repeat;
  background-size: 290px 216px;
  width: 290px;
  height: 240px;
}

</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

setInterval(initialize, 120000);
	function initialize() {
	  var myLatlng = new google.maps.LatLng(51.92,4.58);
	  var mapOptions = {
		zoom: 13,
		center: myLatlng,
	    panControl: false,
		zoomControl: false,
		scaleControl: false,
		streetViewControl: false,
        overviewMapControl: false, 
		disableDefaultUI: true
	  }

	  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	  var trafficLayer = new google.maps.TrafficLayer();
	  trafficLayer.setMap(map);
	
	}

	google.maps.event.addDomListener(window, 'load', initialize);


	
	</script>

</head>
<body>

<div id="cnt"  class="v-wrap">
	<div class="v-box">
		<div id="frame"><div id="BuitenTemp">--</div><div id="desc_BuitenTemp">BuitenTemp</div></div>
		<div id="frame"><div id="WoonkamerTemp">--</div><div id="desc_WoonkamerTemp">WoonkamerTemp</div></div>
		<div id="frame"><div id="ElektraGekocht">--</div><div id="desc_ElektraGekocht">ElektraGekocht</div></div>
		<div id="frame"><div id="BuitenVocht">--</div><div id="desc_BuitenVocht">BuitenVocht</div>
						<div id="GasVandaag">--</div><div id="desc_GasVandaag">GasVandaag</div></div>
		<div id="frame"><div id="Buienradar"><div id="map-canvas"  ></div>
						<a href="http://www.buienradar.nl" target="_blank"><img border="0" src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=380&h=289"></a></div></div>
		<div id="frame"><div id="ElektraVerkocht">--</div><div id="desc_ElektraVerkocht">ElektraVerkocht</div>
						<div id="HuidigVerbruik">--</div><div id="desc_HuidigVerbruik">HuidigVerbruik</div></div>
		<div id="frame"><div id="CVKetel">--</div><div id="desc_CVKetel">CVKetel</div></div>
<!--		<div id="frame"><div id="BuitenlampVoor">--</div><div id="desc_BuitenlampVoor">BuitenlampVoor</div></div>
		<div id="frame"><div id="BuitenlampAchter">--</div><div id="desc_BuitenlampAchter">BuitenlampAchter</div></div>
		<div id="frame"><div id="Vijverpomp">--</div><div id="desc_Vijverpomp">Vijverpomp</div></div>
-->
		<div id="frame"><div id="afval-div">--<iframe src="http://www.mijnafvalwijzer.nl/nl/****postcode****/*****huisnummer****/" id="afval-iframe" scrolling="no"></iframe></div></div>
		<div id="frame"><div id="Badkamer">--</div><div id="desc_Badkamer">Badkamer</div></div>
		<div id="frame"><div id="CVBoiler">--</div><div id="desc_CVBoiler">CVBoiler</div></div>
		<div id="frame"><div id="Watergeven">--</div><div id="desc_Watergeven">Watergeven</div></div>
		<div id="frame"><div id="Woonkamerscene">---</div><div id="desc_Woonkamerscene">Woonkamerscene</div></div>
		<div id="frame"><blink><div id="Voordeur">--</div></blink><div id="desc_Voordeur">Voordeur</div></div>
		<div id="frame"><div id="Zon_vandaag">--</div><div id="desc_Zon_vandaag">Zon_vandaag</div></div>
	</div>
</div>


<div id="light">Schakelaar is beveiligd</div>
<div id="fade" onClick="lightbox_close();"></div> 

<script type="text/javascript" charset="utf-8">
function lightbox_open(id, timeout, txt)
	{
	window.scrollTo(0,1);
	if (typeof txt != 'undefined') {
		$('#popup_'+id).html('<div>'+txt+'</div>'); }
	$('#popup_'+id).fadeIn('fast');
	$('#fade').fadeIn('fast');
	return setTimeout(function() {
	lightbox_close(id);
	}, timeout);
	}
<!-- Close popup -->
function lightbox_close(id)
	{
	$('#popup_'+id).fadeOut('fast');
	$('#fade').fadeOut('fast');
	}

function RefreshData()
{
	clearInterval($.refreshTimer);
	var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
	$.getJSON(jurl,
	{
		format: "json"
	},
	function(data) {
		if (typeof data.result != 'undefined') {
			$.each(data.result, function(i,item){
				for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
					if( $.PageArray[ii][0] === item.idx ) {		// Domoticz idx number
						var vtype=	$.PageArray[ii][1]; 		// Domotitcz type (like Temp, Humidity)
						var vlabel=	$.PageArray[ii][2];			// cell number from HTML layout
						var vdesc=	$.PageArray[ii][3];			// description 
						var vattr=	$.PageArray[ii][4];			// extra css attributes
						var valarm=	$.PageArray[ii][5]; 		// alarm value to turn text to red
						var vdata=	item[vtype];				// current value
						if (typeof vdata == 'undefined') {
							vdata="??";
						} else {
							// remove too much text
							vdata=new String(vdata).split("Watt",1)[0];
							vdata=new String(vdata).split("kWh",1)[0];
							vdata=new String(vdata).split("m3",1)[0];
							vdata=new String(vdata).split(" Level:",1)[0];
							vdata=new String(vdata).replace("Set","On");
							vdata=new String(vdata).replace("true","protected");
							
							//If IDX matches '1' (RAM usage) or '5' (CPU usage), then strip off the '%' and round the numbers
							//if(item.idx == '1' || item.idx == '5'){
							//vdata=new String(vdata).split("%",1)[0];
							//vdata=Math.round(vdata);
							//}	
						
						}
						//If IDX matches '98' (Electricity today) or '99' (Gas today) or '262' (Zonne Energie), then round the numbers with 1 decimal
						if(item.idx == '98' || item.idx == '99' || item.idx == '262' ){
							vdata=new String(vdata).split("kWh",1)[0];
							vdata=new String(vdata).split("m3",1)[0];
							vdata=Math.round(vdata * 10) / 10;
							//vdata=String(vdata).concat(" w");
						}
						//If IDX matches '380' (Water) covert m3 to liters
						if(item.idx == '380'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=Math.round(vdata * 1000);
						}
						//If IDX matches '29' or '37'(Temp woonkamer) add celcius
						if(item.idx == '29' || item.idx == '37'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' &deg' + 'C';
						}
						//If IDX matches '99' (gas today) add m3
						if(item.idx == '99'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' m' + '&sup3';
						}
						//If IDX matches '9' (buiten vochtigheid) add %
						if(item.idx == '9'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' ' + '&#37';
						}
						// create switchable value when item is switch
					//	switchclick='';
					//	if (vdata == 'Off' ) {
					//		switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
					//	}
					//	if (vdata == 'On' ) {
					//		switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
					//	}
						
						
						
						
					var switch_on_timeout = '100';
		var switch_off_timeout = '100';
		var txt_switch_on = '\'Inschakelen\'';
		var txt_switch_off = '\'Uitschakelen\'';
						
							// 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+')"';

	}
	if (vdata == 'On') {
		switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
    }
						
						
						
						
						
						
						// if alarm threshold is defined, make value red 
						//alarmcss='';
						//if (typeof valarm != 'undefined') {
						//	if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
						//		alarmcss=';color:red;';
						//	}
						//}

						// if switch is on, make green, if off, make red. Apply background when switch is not protected.
						alarmcss='';
								if (item.Protected == true) {
									if (vdata == 'On') {
										alarmcss=';color:#27d8a3;';
										vdata = 'Aan';
									}
									if (vdata == 'Off') {
										alarmcss=';color:darkorange;';
										vdata = 'Uit';
									}
									if(item.idx == '43'){
										if (vdata == 'Aan') {
											alarmcss=';color:#27d8a3;';
											vdata = 'Open';
										}
										if (vdata == 'Uit') {
											alarmcss=';color:darkorange;';
											vdata = 'Dicht';
										}
									}
								} else 
								{

									if(item.idx == '43') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;';
												vdata= '<span class="tab blink">Voordeur</span>';
												vdesc = 'Open';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;';
												vdata= 'Voordeur';
												vdesc = 'Dicht';
											}
									  }
									  
									if(item.idx == '67') {
											if (vdata == 'On') {
												alarmcss=';color:red;';
												vdata= 'CV Ketel';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:blue;';
												vdata= 'CV Ketel';
												vdesc = 'Uit';
											}
									  }

									if(item.idx == '23') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Vijverlamp';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Vijverlamp';
												vdesc = 'Uit';
											}
									  }
									 
									 if(item.idx == '22') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Vijverpomp';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Vijverpomp';
												vdesc = 'Uit';
											}
									  }
									  
									if(item.idx == '73') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Watergeven';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Watergeven';
												vdesc = 'Uit';
											}
									  }  
									  
									if(item.idx == '4') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Aan (voordeur)';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Uit (voordeur)';
											}
									  }

									if(item.idx == '15') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Aan (achterdeur)';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Uit (achterdeur)';
											}
									  }								  
		
									if(item.idx == '19') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Lamp Hal';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Lamp Hal';
												vdesc = 'Uit';
											}
									  }
									  

									  if(item.idx == '68') {
											if (vdata == 'On') {
												alarmcss=';color:red;';
												vdata= 'CV Boiler';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:blue;';
												vdata= 'CV Boiler';
												vdesc = 'Uit';
											}
									  }

								}
							
							
						// if extra css attributes. Make switch not switchable when it is protected.
						if (typeof vattr == 'undefined') {
							if (item.Protected == true) {
									$('#'+vlabel).html('<div onClick="lightbox_open();" style='+alarmcss+'>'+vdata+'</div>');
							} else { 
									$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
							}
						} 
						if (item.Protected == true) {
							$('#'+vlabel).html( '<div onClick="lightbox_open();" style='+vattr+alarmcss+'>'+vdata+'</div>');
						} else {
							$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
						}
						
						$('#desc_'+vlabel).html(vdesc);
					}
				}
			});
		}
	});
	
	var jurl=$.domoticzurl+"/json.htm?type=scenes&plan="+$.roomplan+"&jsoncallback=?";
    $.getJSON(jurl,
    {
		format: "json"
    },
	function(data) {
	if (typeof data.result != 'undefined') {
		$.each(data.result, function(i,item){
		for( var ii = 0, len = $.PageArray_Scenes.length; ii < len; ii++ ) {
		if( $.PageArray_Scenes[ii][0] === item.idx ) {	// Domoticz idx number
			var vtype=      $.PageArray_Scenes[ii][1];		// Domotitcz type (like Temp, Humidity)
			var vlabel=     $.PageArray_Scenes[ii][2];		// cell number from HTML layout
			var vdesc=      $.PageArray_Scenes[ii][3];		// description
			var lastseen= 	$.PageArray_Scenes[ii][4];		// Display lastseen or not
			var vattr=    $.PageArray_Scenes[ii][5];		// extra css attributes
			var valarm=     $.PageArray_Scenes[ii][6];		// alarm value to turn text to red
			var vdata=      item[vtype];					// current value
			var vls= 		item["LastUpdate"];				// Last Seen
		
		
		if (typeof vdata == 'undefined') {
			vdata="?!";
		}
		else {
			//remove too much text
		//	vdata=new String(vdata).split("Watt",1)[0];
		//	vdata=new String(vdata).split("kWh",1)[0];
			vdate=new String(vls).split(" ",2)[0];
		}
	
		var dateString = item["LastUpdate"];	// 'Last Seen' string used to convert into a nicer date/time 
		var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
		var dateArray = reggie.exec(dateString);
		var dateObject = new Date(
			(+dateArray[1]),
			(+dateArray[2])-1, // Careful, month starts at 0!
			(+dateArray[3]),
			(+dateArray[4]),
			(+dateArray[5]),
			(+dateArray[6])
		);
		var convStringDate = dateObject.toString ( 'd MMM' );		// the part of the 'Last Seen' that creates the DATE, original dd-MM-yyyy
		var convStringDate = convStringDate.replace('Mar', 'Mrt'); 	// replace some months to NL abbrev
		var convStringDate = convStringDate.replace('May', 'Mei'); 	// replace some months to NL abbrev
		var convStringDate = convStringDate.replace('Oct', 'Okt'); 	// replace some months to NL abbrev
		var convStringTime = dateObject.toString ( 'HH:mm' );		// the part of the 'Last Seen' that creates the TIME
		
		//Added by GZ used for last seen to only show day if <> today
		var thisday = new Date();
		var dd = thisday.getDate().toString();
		var mm = thisday.getMonth()+1;
		var yyyy = thisday.getFullYear();
		if (dd<10) {
			dd='0'+dd
		}
		if (mm<10) {
			mm='0'+mm
		}
		var thisday = yyyy+"-"+mm+"-"+dd;
		//End
		
		//Check wether we want to add the last seen to the block
		if (lastseen == '1') {
			if (thisday == vdate) {
				$('#ls_'+vlabel).html(convStringTime) 						// Show only the time if last change date = today
			}
			else {
				$('#ls_'+vlabel).html(convStringTime+' | '+convStringDate)	// Change this 'Last Seen' into something you like
			}
		}
		if (lastseen == '2') {
			$('#ls_'+vlabel).html(convStringTime)						// Show only the time
		}
		
		// create switchable value when item is scene
		switchclick='';
		alarmcss='';
		var switch_on_timeout = '100';
		var switch_off_timeout = '100';
		var txt_switch_on = '\'Inschakelen\'';
		var txt_switch_off = '\'Uitschakelen\'';
		if (vdata == 'Off'  ) {
			switchclick = 'onclick="SceneToggle('+item.idx+', \'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"';
			alarmcss=';color:grey;background-color:#171717';
			vdata= 'Woonkamer';
			vdesc = 'Uit';
		}
		if (vdata == 'On'  || vdata == 'Mixed') {
			switchclick = 'onclick="SceneToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
			alarmcss=';color:yellow;background-color:#171717';
			vdata= 'Woonkamer';
			vdesc = 'Aan';
		}
		
		// if alarm threshold is defined, make value red
		if (typeof valarm != 'undefined') {
			alarmcss='';
		if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
			alarmcss=';color:red;';
		}
		}

		// if extra css attributes
		if (typeof vattr == 'undefined') {
			$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
		}
		else {
			$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
		}
		$('#desc_'+vlabel).html(vdesc);
		}
		}
		});
	}
}
);	

	$.refreshTimer = setInterval(RefreshData, 4000);
}




//Switch state off a scene/group
function SceneToggle(idx, switchcmd)
	{
	$.ajax({
	//url: $.domoticzurl+"/json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
	url: $.domoticzurl+"/json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd,
	async: false,
	dataType: 'json',
	success: function(){
	console.log('SUCCES');
	},
	error: function(){
	console.log('ERROR');
	}
	});
	RefreshData();
	}

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



// ############################################################################################################
// #### vvvvv   USER VALUES below vvvvv   #######
// ############################################################################################################

$(document).ready(function() {
	$.roomplan=4;   	// define roomplan in Domoticz and create items below.
	$.domoticzurl="http://10.0.0.180:8095";
	//format: idx, value, label, description, [override css], [alarm value]
	$.PageArray = [
		['99',	'CounterToday',		'GasVandaag',		'Gas Vandaag'],
		['29',  'Temp',				'WoonkamerTemp',	'Woonkamer'],
		['98',	'CounterToday',		'ElektraGekocht',	'Electra Gekocht (kWh)'],
		['67',	'Status',			'CVKetel',			'CV Ketel'],
		['98', 'CounterDelivToday',	'ElektraVerkocht',	'Electra Verkocht (kWh)'],
		['68',	'Status',			'CVBoiler',			'CV Boiler'],

		['98',	'Usage',			'HuidigVerbruik',	'Huidig Verbruik (W)'],
		['262',	'Usage',			'Badkamer',			'Zon Huidig (W)'],
		['262',	'CounterToday',		'Zon_vandaag',		'Zon Vandaag (kWh)'],		
		
		['37', 'Temp',				'BuitenTemp',		'Buitentemperatuur'],
		['4',	'Status',			'BuitenlampVoor',	'Buitenlamp voordeur'],
		['15',	'Status',			'BuitenlampAchter',	'Buitenlamp achterdeur'],
		['23',	'Status',			'Vijverlamp',		'Vijverlamp'],
		['22',	'Status',			'Vijverpomp',		'Vijverpomp'],
	//	['387',	'Temp',				'Badkamer',			'Badkamer (&deg;C)'],
		['73',	'Status',			'Watergeven',		'Watergeven'],	
		['9', 'Humidity',			'BuitenVocht',		'Buiten vochtigheid'],
		['278',	'Status',			'StaandeLampWoonkamer',	'Staande lamp woonkamer'],
		['19',	'Status',			'StaandeLampHal',	'Staande lamp hal'],
		['43',	'Status',			'Voordeur',			'Voordeur'],
	//	['504',	'Temp',				'Zon_vandaag',		'Zon_vandaag (&deg;C)'],
		
		];
	$.PageArray_Scenes = [
		['1',	'Status',		'Woonkamerscene',	'Woonkamerscene','1','0'],
		];

// ###########################################################################################################
// #### ^^^^^   USER VALUES above ^^^^^   #######
// ############################################################################################################


    RefreshData();


});  


</script>

</body>
</html>

Derik · Post by **Derik** » Tuesday 13 June 2017 23:04

mmm
Dombo start
make a room plan with idx 13 [ named dash floorplan and a floorplan dash ]
Set there 3 devices
Will try t see them with json:
http://192.168.5.70:8080/json.htm?type=devices&plan=13

only see no devices.....

Where do i go wrong?

ubfssF · Post by **ubfssF** » Saturday 17 June 2017 23:01

pwhooftman wrote:

ubfssF wrote: Nice. Not only the Algrabridge, but when garbage is collected. Could you please share the code for that?

My code is still a bit messy, so here is the whole lot.

look for "afval" in the code to find the relevant bits for the garbage info.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>

<style type "text/css">
<!--
/* @group Blink */
.blink {
	-webkit-animation: blink .75s linear infinite;
	-moz-animation: blink .75s linear infinite;
	-ms-animation: blink .75s linear infinite;
	-o-animation: blink .75s linear infinite;
	 animation: blink .75s linear infinite;
}
@-webkit-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-moz-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@-o-keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 1; }
	50.01% { opacity: 0; }
	100% { opacity: 0; }
}
/* @end */
-->
</style>

<meta charset="utf-8">
<title>Domoticz Monitor</title> 
 <meta name="apple-mobile-web-app-capable" content="yes" />
                <meta name="mobile-web-app-capable" content="yes" />
				<meta http-equiv="refresh" content="6000">
				<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
				<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
                <meta name="apple-mobile-web-app-status-bar-style" content="black" />
				<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
				<meta charset="utf-8" />
                <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <link rel="shortcut icon" href="/favicon.ico" />
	            <link rel="apple-touch-icon" href="images/touch-icon-iphone.png">
<link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


	blink("#Voordeur", 10, 500);

<style>
body,html{
    height: 100%;
    margin: 0;
    padding: 0;
	background-color: black;
}

html, body, #map-canvas {
		float: left;
		height: 288px;
        width: 365px;
		margin: 2;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
        padding: 2
}
	  
div#cnt {
	width: 1260px;
	height: 100%;
    margin: 0 auto;
    text-align: center;
}

.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    margin-right: -.25em;
    height: 100%; 
}

.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

img{
	border:1px solid #;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

a, a:visited { text-decoration: none; color: #336699; }
a:hover { text-decoration: none; color: #003366; }

#frame {
	float: left;
	margin: 0px;
	padding: 0px 4px 4px 4px;
}

#afval-div
{
    width    : 299px;
    height   : 58px;
	zoom     : 2.5;
    overflow : hidden;
    position : relative;
	padding: 1
	border:1px solid #;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
		margin-top: 0px;

}

#afval-iframe
{
    position : absolute;
    top      : -76px;
    left     : -190px;
    width    : 500px;
    height   : 500px;
		border-radius: 5px;

}

#desc_GasVandaag, #desc_WoonkamerTemp, #desc_ElektraGekocht, #desc_BuitenVocht,
#desc_ElektraVerkocht, #desc_BuitenTemp, #desc_HuidigVerbruik, #desc_CVKetel,
#desc_BuitenlampVoor, #desc_BuitenlampAchter, #desc_Vijverlamp, #desc_Vijverpomp, #desc_Badkamer, #desc_CVBoiler,
#desc_Woonkamerscene, #desc_StaandeLampHal, #desc_Voordeur, #desc_Zon_vandaag, #desc_Watergeven {
	font-family: Arimo;
	font-weight: bold;
	color: #ABACB0; //kleur van item beschrijving
	font-size: 5px;
	margin-top: -29px;
	padding: 5px;

}

#GasVandaag, #WoonkamerTemp, #ElektraGekocht, #BuitenVocht, #ElektraVerkocht, 
#BuitenTemp, #HuidigVerbruik, #CVKetel, #BuitenlampVoor, #BuitenlampAchter, #Vijverlamp, #Vijverpomp,
#Badkamer, #CVBoiler, #Woonkamerscene, #StaandeLampHal, #Voordeur, #Zon_vandaag, #Watergeven {
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	width: 222px;
	padding: 10px;
	border: 1px solid #333;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #070707;
	height: 128px;
	line-height: 90px; 		
	font-size: 60px;
	color: white; //Kleur waardes van cellen

}

#CVKetel, #BuitenlampVoor, #BuitenlampAchter, #Vijverlamp, #Vijverpomp,
#CVBoiler, #Woonkamerscene, #StaandeLampHal, #Watergeven, #Voordeur{
 	font-size: 42px;

}
#Woonkamerscene, #Watergeven, #Voordeur{
 	font-size: 37px;

}



#WoonkamerTemp {
	width: 725px;
	padding: 10px;
	line-height: 90px;
	font-size: 100px;	
	color: darkorange;
}


}
#Buienradar {
	width: 725px;
	height: 285px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
}




#fade{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;
    filter: alpha(opacity=70);
}
#light{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 75px;
    margin-left: -150px;
    margin-top: -100px;                 
    padding: 10px;
    border: 2px solid red;
    background: #333;
    z-index:1002;
    overflow:visible;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 25px;
	color: white;
	line-height: 75px;
	text-align: center;	
	-webkit-border-radius: 15px 15px 15px 15px;
	border-radius: 15px 15px 15px 15px;	
}

.camera {
  background: url(offline.jpg) no-repeat;
  background-size: 290px 216px;
  width: 290px;
  height: 240px;
}

</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

setInterval(initialize, 120000);
	function initialize() {
	  var myLatlng = new google.maps.LatLng(51.92,4.58);
	  var mapOptions = {
		zoom: 13,
		center: myLatlng,
	    panControl: false,
		zoomControl: false,
		scaleControl: false,
		streetViewControl: false,
        overviewMapControl: false, 
		disableDefaultUI: true
	  }

	  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	  var trafficLayer = new google.maps.TrafficLayer();
	  trafficLayer.setMap(map);
	
	}

	google.maps.event.addDomListener(window, 'load', initialize);


	
	</script>

</head>
<body>

<div id="cnt"  class="v-wrap">
	<div class="v-box">
		<div id="frame"><div id="BuitenTemp">--</div><div id="desc_BuitenTemp">BuitenTemp</div></div>
		<div id="frame"><div id="WoonkamerTemp">--</div><div id="desc_WoonkamerTemp">WoonkamerTemp</div></div>
		<div id="frame"><div id="ElektraGekocht">--</div><div id="desc_ElektraGekocht">ElektraGekocht</div></div>
		<div id="frame"><div id="BuitenVocht">--</div><div id="desc_BuitenVocht">BuitenVocht</div>
						<div id="GasVandaag">--</div><div id="desc_GasVandaag">GasVandaag</div></div>
		<div id="frame"><div id="Buienradar"><div id="map-canvas"  ></div>
						<a href="http://www.buienradar.nl" target="_blank"><img border="0" src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=380&h=289"></a></div></div>
		<div id="frame"><div id="ElektraVerkocht">--</div><div id="desc_ElektraVerkocht">ElektraVerkocht</div>
						<div id="HuidigVerbruik">--</div><div id="desc_HuidigVerbruik">HuidigVerbruik</div></div>
		<div id="frame"><div id="CVKetel">--</div><div id="desc_CVKetel">CVKetel</div></div>
<!--		<div id="frame"><div id="BuitenlampVoor">--</div><div id="desc_BuitenlampVoor">BuitenlampVoor</div></div>
		<div id="frame"><div id="BuitenlampAchter">--</div><div id="desc_BuitenlampAchter">BuitenlampAchter</div></div>
		<div id="frame"><div id="Vijverpomp">--</div><div id="desc_Vijverpomp">Vijverpomp</div></div>
-->
		<div id="frame"><div id="afval-div">--<iframe src="http://www.mijnafvalwijzer.nl/nl/****postcode****/*****huisnummer****/" id="afval-iframe" scrolling="no"></iframe></div></div>
		<div id="frame"><div id="Badkamer">--</div><div id="desc_Badkamer">Badkamer</div></div>
		<div id="frame"><div id="CVBoiler">--</div><div id="desc_CVBoiler">CVBoiler</div></div>
		<div id="frame"><div id="Watergeven">--</div><div id="desc_Watergeven">Watergeven</div></div>
		<div id="frame"><div id="Woonkamerscene">---</div><div id="desc_Woonkamerscene">Woonkamerscene</div></div>
		<div id="frame"><blink><div id="Voordeur">--</div></blink><div id="desc_Voordeur">Voordeur</div></div>
		<div id="frame"><div id="Zon_vandaag">--</div><div id="desc_Zon_vandaag">Zon_vandaag</div></div>
	</div>
</div>


<div id="light">Schakelaar is beveiligd</div>
<div id="fade" onClick="lightbox_close();"></div> 

<script type="text/javascript" charset="utf-8">
function lightbox_open(id, timeout, txt)
	{
	window.scrollTo(0,1);
	if (typeof txt != 'undefined') {
		$('#popup_'+id).html('<div>'+txt+'</div>'); }
	$('#popup_'+id).fadeIn('fast');
	$('#fade').fadeIn('fast');
	return setTimeout(function() {
	lightbox_close(id);
	}, timeout);
	}
<!-- Close popup -->
function lightbox_close(id)
	{
	$('#popup_'+id).fadeOut('fast');
	$('#fade').fadeOut('fast');
	}

function RefreshData()
{
	clearInterval($.refreshTimer);
	var jurl=$.domoticzurl+"/json.htm?type=devices&plan="+$.roomplan+"&jsoncallback=?";
	$.getJSON(jurl,
	{
		format: "json"
	},
	function(data) {
		if (typeof data.result != 'undefined') {
			$.each(data.result, function(i,item){
				for( var ii = 0, len = $.PageArray.length; ii < len; ii++ ) {
					if( $.PageArray[ii][0] === item.idx ) {		// Domoticz idx number
						var vtype=	$.PageArray[ii][1]; 		// Domotitcz type (like Temp, Humidity)
						var vlabel=	$.PageArray[ii][2];			// cell number from HTML layout
						var vdesc=	$.PageArray[ii][3];			// description 
						var vattr=	$.PageArray[ii][4];			// extra css attributes
						var valarm=	$.PageArray[ii][5]; 		// alarm value to turn text to red
						var vdata=	item[vtype];				// current value
						if (typeof vdata == 'undefined') {
							vdata="??";
						} else {
							// remove too much text
							vdata=new String(vdata).split("Watt",1)[0];
							vdata=new String(vdata).split("kWh",1)[0];
							vdata=new String(vdata).split("m3",1)[0];
							vdata=new String(vdata).split(" Level:",1)[0];
							vdata=new String(vdata).replace("Set","On");
							vdata=new String(vdata).replace("true","protected");
							
							//If IDX matches '1' (RAM usage) or '5' (CPU usage), then strip off the '%' and round the numbers
							//if(item.idx == '1' || item.idx == '5'){
							//vdata=new String(vdata).split("%",1)[0];
							//vdata=Math.round(vdata);
							//}	
						
						}
						//If IDX matches '98' (Electricity today) or '99' (Gas today) or '262' (Zonne Energie), then round the numbers with 1 decimal
						if(item.idx == '98' || item.idx == '99' || item.idx == '262' ){
							vdata=new String(vdata).split("kWh",1)[0];
							vdata=new String(vdata).split("m3",1)[0];
							vdata=Math.round(vdata * 10) / 10;
							//vdata=String(vdata).concat(" w");
						}
						//If IDX matches '380' (Water) covert m3 to liters
						if(item.idx == '380'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=Math.round(vdata * 1000);
						}
						//If IDX matches '29' or '37'(Temp woonkamer) add celcius
						if(item.idx == '29' || item.idx == '37'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' &deg' + 'C';
						}
						//If IDX matches '99' (gas today) add m3
						if(item.idx == '99'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' m' + '&sup3';
						}
						//If IDX matches '9' (buiten vochtigheid) add %
						if(item.idx == '9'){
							vdata=new String(vdata).split("m3",1)[0];
							vdata=vdata + ' ' + '&#37';
						}
						// create switchable value when item is switch
					//	switchclick='';
					//	if (vdata == 'Off' ) {
					//		switchclick = 'onclick="SwitchToggle('+item.idx+', \'On\');"';
					//	}
					//	if (vdata == 'On' ) {
					//		switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');"';
					//	}
						
						
						
						
					var switch_on_timeout = '100';
		var switch_off_timeout = '100';
		var txt_switch_on = '\'Inschakelen\'';
		var txt_switch_off = '\'Uitschakelen\'';
						
							// 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+')"';

	}
	if (vdata == 'On') {
		switchclick = 'onclick="SwitchToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
    }
						
						
						
						
						
						
						// if alarm threshold is defined, make value red 
						//alarmcss='';
						//if (typeof valarm != 'undefined') {
						//	if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
						//		alarmcss=';color:red;';
						//	}
						//}

						// if switch is on, make green, if off, make red. Apply background when switch is not protected.
						alarmcss='';
								if (item.Protected == true) {
									if (vdata == 'On') {
										alarmcss=';color:#27d8a3;';
										vdata = 'Aan';
									}
									if (vdata == 'Off') {
										alarmcss=';color:darkorange;';
										vdata = 'Uit';
									}
									if(item.idx == '43'){
										if (vdata == 'Aan') {
											alarmcss=';color:#27d8a3;';
											vdata = 'Open';
										}
										if (vdata == 'Uit') {
											alarmcss=';color:darkorange;';
											vdata = 'Dicht';
										}
									}
								} else 
								{

									if(item.idx == '43') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;';
												vdata= '<span class="tab blink">Voordeur</span>';
												vdesc = 'Open';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;';
												vdata= 'Voordeur';
												vdesc = 'Dicht';
											}
									  }
									  
									if(item.idx == '67') {
											if (vdata == 'On') {
												alarmcss=';color:red;';
												vdata= 'CV Ketel';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:blue;';
												vdata= 'CV Ketel';
												vdesc = 'Uit';
											}
									  }

									if(item.idx == '23') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Vijverlamp';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Vijverlamp';
												vdesc = 'Uit';
											}
									  }
									 
									 if(item.idx == '22') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Vijverpomp';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Vijverpomp';
												vdesc = 'Uit';
											}
									  }
									  
									if(item.idx == '73') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Watergeven';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Watergeven';
												vdesc = 'Uit';
											}
									  }  
									  
									if(item.idx == '4') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Aan (voordeur)';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Uit (voordeur)';
											}
									  }

									if(item.idx == '15') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Aan (achterdeur)';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Buitenlamp';
												vdesc = 'Uit (achterdeur)';
											}
									  }								  
		
									if(item.idx == '19') {
											if (vdata == 'On') {
												alarmcss=';color:yellow;background-color:#171717';
												vdata= 'Lamp Hal';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:grey;background-color:#171717';
												vdata= 'Lamp Hal';
												vdesc = 'Uit';
											}
									  }
									  

									  if(item.idx == '68') {
											if (vdata == 'On') {
												alarmcss=';color:red;';
												vdata= 'CV Boiler';
												vdesc = 'Aan';
											}
											if (vdata == 'Off') {
												alarmcss=';color:blue;';
												vdata= 'CV Boiler';
												vdesc = 'Uit';
											}
									  }

								}
							
							
						// if extra css attributes. Make switch not switchable when it is protected.
						if (typeof vattr == 'undefined') {
							if (item.Protected == true) {
									$('#'+vlabel).html('<div onClick="lightbox_open();" style='+alarmcss+'>'+vdata+'</div>');
							} else { 
									$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
							}
						} 
						if (item.Protected == true) {
							$('#'+vlabel).html( '<div onClick="lightbox_open();" style='+vattr+alarmcss+'>'+vdata+'</div>');
						} else {
							$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
						}
						
						$('#desc_'+vlabel).html(vdesc);
					}
				}
			});
		}
	});
	
	var jurl=$.domoticzurl+"/json.htm?type=scenes&plan="+$.roomplan+"&jsoncallback=?";
    $.getJSON(jurl,
    {
		format: "json"
    },
	function(data) {
	if (typeof data.result != 'undefined') {
		$.each(data.result, function(i,item){
		for( var ii = 0, len = $.PageArray_Scenes.length; ii < len; ii++ ) {
		if( $.PageArray_Scenes[ii][0] === item.idx ) {	// Domoticz idx number
			var vtype=      $.PageArray_Scenes[ii][1];		// Domotitcz type (like Temp, Humidity)
			var vlabel=     $.PageArray_Scenes[ii][2];		// cell number from HTML layout
			var vdesc=      $.PageArray_Scenes[ii][3];		// description
			var lastseen= 	$.PageArray_Scenes[ii][4];		// Display lastseen or not
			var vattr=    $.PageArray_Scenes[ii][5];		// extra css attributes
			var valarm=     $.PageArray_Scenes[ii][6];		// alarm value to turn text to red
			var vdata=      item[vtype];					// current value
			var vls= 		item["LastUpdate"];				// Last Seen
		
		
		if (typeof vdata == 'undefined') {
			vdata="?!";
		}
		else {
			//remove too much text
		//	vdata=new String(vdata).split("Watt",1)[0];
		//	vdata=new String(vdata).split("kWh",1)[0];
			vdate=new String(vls).split(" ",2)[0];
		}
	
		var dateString = item["LastUpdate"];	// 'Last Seen' string used to convert into a nicer date/time 
		var reggie = /(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
		var dateArray = reggie.exec(dateString);
		var dateObject = new Date(
			(+dateArray[1]),
			(+dateArray[2])-1, // Careful, month starts at 0!
			(+dateArray[3]),
			(+dateArray[4]),
			(+dateArray[5]),
			(+dateArray[6])
		);
		var convStringDate = dateObject.toString ( 'd MMM' );		// the part of the 'Last Seen' that creates the DATE, original dd-MM-yyyy
		var convStringDate = convStringDate.replace('Mar', 'Mrt'); 	// replace some months to NL abbrev
		var convStringDate = convStringDate.replace('May', 'Mei'); 	// replace some months to NL abbrev
		var convStringDate = convStringDate.replace('Oct', 'Okt'); 	// replace some months to NL abbrev
		var convStringTime = dateObject.toString ( 'HH:mm' );		// the part of the 'Last Seen' that creates the TIME
		
		//Added by GZ used for last seen to only show day if <> today
		var thisday = new Date();
		var dd = thisday.getDate().toString();
		var mm = thisday.getMonth()+1;
		var yyyy = thisday.getFullYear();
		if (dd<10) {
			dd='0'+dd
		}
		if (mm<10) {
			mm='0'+mm
		}
		var thisday = yyyy+"-"+mm+"-"+dd;
		//End
		
		//Check wether we want to add the last seen to the block
		if (lastseen == '1') {
			if (thisday == vdate) {
				$('#ls_'+vlabel).html(convStringTime) 						// Show only the time if last change date = today
			}
			else {
				$('#ls_'+vlabel).html(convStringTime+' | '+convStringDate)	// Change this 'Last Seen' into something you like
			}
		}
		if (lastseen == '2') {
			$('#ls_'+vlabel).html(convStringTime)						// Show only the time
		}
		
		// create switchable value when item is scene
		switchclick='';
		alarmcss='';
		var switch_on_timeout = '100';
		var switch_off_timeout = '100';
		var txt_switch_on = '\'Inschakelen\'';
		var txt_switch_off = '\'Uitschakelen\'';
		if (vdata == 'Off'  ) {
			switchclick = 'onclick="SceneToggle('+item.idx+', \'On\');lightbox_open(\'switch\', '+switch_on_timeout+', '+txt_switch_on+')"';
			alarmcss=';color:grey;background-color:#171717';
			vdata= 'Woonkamer';
			vdesc = 'Uit';
		}
		if (vdata == 'On'  || vdata == 'Mixed') {
			switchclick = 'onclick="SceneToggle('+item.idx+', \'Off\');lightbox_open(\'switch\', '+switch_off_timeout+', '+txt_switch_off+')"';
			alarmcss=';color:yellow;background-color:#171717';
			vdata= 'Woonkamer';
			vdesc = 'Aan';
		}
		
		// if alarm threshold is defined, make value red
		if (typeof valarm != 'undefined') {
			alarmcss='';
		if ( eval(vdata + valarm)) {  // note orig:  vdata > alarm
			alarmcss=';color:red;';
		}
		}

		// if extra css attributes
		if (typeof vattr == 'undefined') {
			$('#'+vlabel).html('<div '+switchclick+' style='+alarmcss+'>'+vdata+'</div>');
		}
		else {
			$('#'+vlabel).html( '<div '+switchclick+' style='+vattr+alarmcss+'>'+vdata+'</div>');
		}
		$('#desc_'+vlabel).html(vdesc);
		}
		}
		});
	}
}
);	

	$.refreshTimer = setInterval(RefreshData, 4000);
}




//Switch state off a scene/group
function SceneToggle(idx, switchcmd)
	{
	$.ajax({
	//url: $.domoticzurl+"/json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd + "&level=0",
	url: $.domoticzurl+"/json.htm?type=command&param=switchscene" + "&idx=" + idx + "&switchcmd=" + switchcmd,
	async: false,
	dataType: 'json',
	success: function(){
	console.log('SUCCES');
	},
	error: function(){
	console.log('ERROR');
	}
	});
	RefreshData();
	}

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



// ############################################################################################################
// #### vvvvv   USER VALUES below vvvvv   #######
// ############################################################################################################

$(document).ready(function() {
	$.roomplan=4;   	// define roomplan in Domoticz and create items below.
	$.domoticzurl="http://10.0.0.180:8095";
	//format: idx, value, label, description, [override css], [alarm value]
	$.PageArray = [
		['99',	'CounterToday',		'GasVandaag',		'Gas Vandaag'],
		['29',  'Temp',				'WoonkamerTemp',	'Woonkamer'],
		['98',	'CounterToday',		'ElektraGekocht',	'Electra Gekocht (kWh)'],
		['67',	'Status',			'CVKetel',			'CV Ketel'],
		['98', 'CounterDelivToday',	'ElektraVerkocht',	'Electra Verkocht (kWh)'],
		['68',	'Status',			'CVBoiler',			'CV Boiler'],

		['98',	'Usage',			'HuidigVerbruik',	'Huidig Verbruik (W)'],
		['262',	'Usage',			'Badkamer',			'Zon Huidig (W)'],
		['262',	'CounterToday',		'Zon_vandaag',		'Zon Vandaag (kWh)'],		
		
		['37', 'Temp',				'BuitenTemp',		'Buitentemperatuur'],
		['4',	'Status',			'BuitenlampVoor',	'Buitenlamp voordeur'],
		['15',	'Status',			'BuitenlampAchter',	'Buitenlamp achterdeur'],
		['23',	'Status',			'Vijverlamp',		'Vijverlamp'],
		['22',	'Status',			'Vijverpomp',		'Vijverpomp'],
	//	['387',	'Temp',				'Badkamer',			'Badkamer (&deg;C)'],
		['73',	'Status',			'Watergeven',		'Watergeven'],	
		['9', 'Humidity',			'BuitenVocht',		'Buiten vochtigheid'],
		['278',	'Status',			'StaandeLampWoonkamer',	'Staande lamp woonkamer'],
		['19',	'Status',			'StaandeLampHal',	'Staande lamp hal'],
		['43',	'Status',			'Voordeur',			'Voordeur'],
	//	['504',	'Temp',				'Zon_vandaag',		'Zon_vandaag (&deg;C)'],
		
		];
	$.PageArray_Scenes = [
		['1',	'Status',		'Woonkamerscene',	'Woonkamerscene','1','0'],
		];

// ###########################################################################################################
// #### ^^^^^   USER VALUES above ^^^^^   #######
// ############################################################################################################


    RefreshData();


});  


</script>

</body>
</html>

Thnx!

Mozart · Post by **Mozart** » Friday 14 July 2017 20:44

Update: I switched to Dashticz V2 and that works quiet well for me. I'll leave this question here, maybe someone else needs this as well.

I'm using the front page created boy G3rard and really like it. One thing that I would like to change is this part:

Code: Select all

 <!-- GZ check if browser is on Android, that will be my Nexus, then show different css to fit on the Nexus screen -->
    <script type="text/javascript">
        if (navigator.userAgent.match(/Linux/)) {
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-night_nexus.css" id="dark-styles">');
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-day_nexus.css" id="light-styles">');
        } else {
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-night.css" id="dark-styles">');
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-day.css" id="light-styles">');
        }
    </script>

I would like to replace this with just one document.write line that adds the correct css sheet based on a virtual switch that I have. Problem is, I'm not experienced enough to make this work and don't know if it's even possible.
I started experimenting with this updated code for selecting the correct CSS file:

Code: Select all

    <!-- GZ check if browser is on Android, that will be my Nexus, then show different css to fit on the Nexus screen -->
    <script type="text/javascript">
        if (navigator.userAgent.match(/Linux/) && IsNight == 'Yes') {
            console.log('Linux and IsNight');
            console.log('Value of IsNight: ',IsNight)
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-night_nexus.css" id="dark-styles">');
        } else if (navigator.userAgent.match(/Linux/) && IsNight == 'No') {
            console.log('Linux and IsNight is No');
            console.log('Value of IsNight: ',IsNight)
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-day_nexus.css" id="light-styles">');
        } else if (IsNight == 'Yes') {
            console.log('No Linux and IsNight is Yes');
            console.log('Value of IsNight: ',IsNight)
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-night.css" id="dark-styles">');
        } else {
            console.log('No Linux and IsNight is No');
            console.log('Value of IsNight: ',IsNight)
            document.write('<link rel="stylesheet" href="/fp3/css/frontpage-day.css" id="light-styles">');
        }
    </script>

The variable 'IsNight' is set in frontpage.js and depends on the value of a virtual switch. The code does not work, it always goes to the last else part. I added the console.log to help me understand what happens. The value of IsNight stays on 'No' even when I flip my virtual switch.
That makes me think that the code in frontpage.js is executed at a later time but I don't know when.
Is what I want possible? I don't like the fact that the page loads with a day css after dark. You can see the switch happing after dark. I want the right CSS without the switch

jeanclic · Post by **jeanclic** » Tuesday 15 August 2017 18:14

G3rard wrote: ↑Friday 27 March 2015 0:27 because the security panel of Domoticz can not be added to a floorplan.

Hello,

two years later, I wonder if anyone has found a workaround to have the Security Panel started via the floorplan for those that are using floorplan as main interface ?

thanks in advance !

mvrossum · Post by **mvrossum** » Thursday 07 September 2017 10:30

Too bad i saw this post only now....
I'v been messing around with client server webistes just to get (almost) exactely what pwhooftman posted.

Thanks for sharing.

Mike

JuanUil · Post by **JuanUil** » Thursday 07 September 2017 16:55

Hi Folks,

I have been using this fabulous frontpage for more then a year now.
I would like to play a sound on my two tablets which I use in my room.
For instance when a motion sensor is activated
Has anyone any idea how to do this?
I am not a great programmer...

grtz Jan

safi78 · Post by **safi78** » Thursday 07 September 2017 17:13

jeanclic wrote: ↑Tuesday 15 August 2017 18:14
G3rard wrote: ↑Friday 27 March 2015 0:27 because the security panel of Domoticz can not be added to a floorplan.
Hello,

two years later, I wonder if anyone has found a workaround to have the Security Panel started via the floorplan for those that are using floorplan as main interface ?

thanks in advance !

Hi guys,

I don't know if it helps, but I read a lot of stuff here about .ics and such. Maybe take a look at the code we used for the framb0ise dashboard viewtopic.php?f=8&t=17163 frontpage (or even Dasticz for that matter, we 'lended' some stuff from eachother here and there.

I did some basic work on the pop-up for the security panel that could be usefull for this project?

Not to steal your users here, trying to keep people from re-inventing the wheel

Better to work together right?

Kind regards,

Sander

tillo · Post by **tillo** » Saturday 07 October 2017 12:21

Hi, I am running G3rards frontpage on my tablet.

I have a slight problem with the web-cam, it is not updating the image fast enough, I can only get jpg still images out of my webcam but I would very much like to have frontpage refresh the image every 10s or so. How do I achieve it? Right now it seams to update the image every other minute or so. super slow refresh rate anyway!

Pls help

havnegata · Post by **havnegata** » Sunday 15 October 2017 19:06

G3rard wrote: ↑Tuesday 28 February 2017 23:19 @gielie,

I use this code to show a picture from the camera using Domoticz, where 5 is the idx of the camera in Domoticz.
Code: Select all
<img src="http://192.168.1.157:8084/camsnapshot.jpg?idx=5&t="  onClick="lightbox_open('camera1', 92400);" width="200px" class='camera' />

This is a bit embarrasing, but I have configured my cameras in Domoticz and that's working, but how do I find the IDX of them? They don't show up under "Devices" where I normally look for the IDX's. The only place I can see them is under the Cameras configuration page, and as far as I can see there are no IDX's there....

tillo · Post by **tillo** » Monday 16 October 2017 9:05

if you go to the settings->camera

You could configure the cameras in there, and the will each get a IDX number starting at 1.

BTW i think that IDX number could be a bit confusing, since most ppl start thinking of this as a device ID idx, same as a light switch. and it is not. it is more like a camere id. therefore it starts at 1, and thats allso why you cant find it in your normal IDX/device list.

havnegata · Post by **havnegata** » Monday 16 October 2017 17:03

Thanks, that is understandable!

NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Re: NEW frontpage.html - request comments

Who is online