NEW frontpage.html - request comments

Trigun
Posts: 187
Joined: Wednesday 30 November 2016 12:58
Target OS: Raspberry Pi
Domoticz version: 4.9700
Contact:

Re: NEW frontpage.html - request comments

Post by Trigun » Monday 20 March 2017 19:09

Hi Ewald, it looks amazing! Especially the responsive part! Is there a chance you can share your config? Cheers!!


Sent from my iPhone using Tapatalk

Ewaldharmsen
Posts: 46
Joined: Tuesday 07 February 2017 16:00
Target OS: Linux
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

Post by Ewaldharmsen » Monday 20 March 2017 19:38

Sure, here are all the files I changed from G3rards design
Frontpage.zip
(24.25 KiB) Downloaded 576 times

Trigun
Posts: 187
Joined: Wednesday 30 November 2016 12:58
Target OS: Raspberry Pi
Domoticz version: 4.9700
Contact:

Re: NEW frontpage.html - request comments

Post by Trigun » Monday 20 March 2017 21: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
Posts: 187
Joined: Wednesday 30 November 2016 12:58
Target OS: Raspberry Pi
Domoticz version: 4.9700
Contact:

Re: NEW frontpage.html - request comments

Post by Trigun » Monday 20 March 2017 21: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
Posts: 20
Joined: Tuesday 07 June 2016 22:09
Target OS: NAS (Synology & others)
Domoticz version: V3.8153
Location: Netherlands
Contact:

Re: NEW frontpage.html - request comments

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
frontpage screenshot page1.png (373.15 KiB) Viewed 4760 times

Page 2
frontpage screenshot page2.png
frontpage screenshot page2.png (371.88 KiB) Viewed 4760 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
Posts: 24
Joined: Friday 28 August 2015 21:41
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

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
Slider in frontpage.PNG (265.3 KiB) Viewed 4675 times

pwhooftman
Posts: 159
Joined: Monday 11 November 2013 19:04
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

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.

Image

I have loads of more switches and utilities, but i like a clean page, so i only show the info which interest me most.
Domoticz v 1.16xx
1X RFXtrx433 USB 433.92MHz Transceiver Firmware version: 71
1X Synology Nas DS412+ DSM 4.3 (2Gb RAM mod)

ubfssF
Posts: 45
Joined: Monday 02 November 2015 15:12
Target OS: Linux
Domoticz version: 2.2364
Location: Netherlands
Contact:

Re: NEW frontpage.html - request comments

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.

Image

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?

User avatar
Derik
Posts: 2175
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: NEW frontpage.html - request comments

Post by Derik » Tuesday 13 June 2017 21:26

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

Is there perhaps someone that have the calendar working in this board?
The gmail or a other ical option??
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups

pwhooftman
Posts: 159
Joined: Monday 11 November 2013 19:04
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: NEW frontpage.html - request comments

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>
Domoticz v 1.16xx
1X RFXtrx433 USB 433.92MHz Transceiver Firmware version: 71
1X Synology Nas DS412+ DSM 4.3 (2Gb RAM mod)

User avatar
Derik
Posts: 2175
Joined: Friday 18 October 2013 23:33
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Arnhem/Nijmegen Nederland
Contact:

Re: NEW frontpage.html - request comments

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?
Xu4: Beta Extreme antenna RFXcomE,WU Fi Ping ip P1 Gen5 PVOutput Harmony HUE SolarmanPv OTG Winddelen Alive ESP Buienradar MySensors WOL Winddelen counting RPi: Beta SMAspot RFlinkTest Domoticz ...Different backups

ubfssF
Posts: 45
Joined: Monday 02 November 2015 15:12
Target OS: Linux
Domoticz version: 2.2364
Location: Netherlands
Contact:

Re: NEW frontpage.html - request comments

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
Posts: 82
Joined: Monday 19 January 2015 15:35
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: NEW frontpage.html - request comments

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 :)
Raspberry 3
Aeon Labs Z-Wave Stick Series 2 - RFLink USB Gateway
Z-Wave switches
433 MHz Temperature + Humidity sensors
Philips Hue Lights
Mi-Light WiFi Bridge + RGBW Controllers

jeanclic
Posts: 98
Joined: Saturday 28 January 2017 12:32
Target OS: Raspberry Pi
Domoticz version: Beta
Location: France / Burgundy
Contact:

Re: NEW frontpage.html - request comments

Post by jeanclic » Tuesday 15 August 2017 18:14

G3rard wrote:
Friday 27 March 2015 1: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 !
RPI3B (Domoticz 4.9700 + ~60 scripts) + RFXtrx433E (fw1020) + Z-Stick Gen5 + MySensors / RPI2B+ (RasPlex)
x1 Eth. wired tablet
x8 T/H Oregon / x1 T/H Bresser
x7 heaters / x2 QUBINO "Flush 1 relay"
x10 plugs / x15 contacts
x4 fibaro / x1 PIR

mvrossum
Posts: 3
Joined: Wednesday 06 September 2017 22:55
Target OS: Raspberry Pi
Domoticz version: V3.8083+
Location: Almere
Contact:

Re: NEW frontpage.html - request comments

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
Fibaro HC2, Raspberry Pi en nogal wat z-wave spul.

JuanUil
Posts: 310
Joined: Friday 22 May 2015 12:21
Target OS: Raspberry Pi
Domoticz version: 2.xx
Location: Asten NB Nederland
Contact:

Re: NEW frontpage.html - request comments

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
Your mind is like a parachute,
It only works when it is opened!

User avatar
safi78
Posts: 460
Joined: Thursday 05 September 2013 15:39
Target OS: Linux
Domoticz version: LastBeta
Location: Alkmaar, NL
Contact:

Re: NEW frontpage.html - request comments

Post by safi78 » Thursday 07 September 2017 17:13

jeanclic wrote:
Tuesday 15 August 2017 18:14
G3rard wrote:
Friday 27 March 2015 1: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
I don't know if you noticed or not, but I'm an extremely arrogant man who tends to think all of his plans will work ...

https://safiweb.nl

homebridge, rfxcom, zwave, nest, applamp, hue, debian, apple, mysensors, netatmo, fibaro, synology, foscam, otherz

tillo
Posts: 40
Joined: Monday 01 May 2017 20:15
Target OS: Raspberry Pi
Domoticz version: 3.9030
Contact:

Re: NEW frontpage.html - request comments

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
Raspberry Pi 2 B - Raspbian Jessie + Domoticz + RFXtrxcom 433, House(dimmers, sockets, harmonyhub, Temp / Humidity Sensors, PIR, ESP8266)

User avatar
havnegata
Posts: 135
Joined: Wednesday 10 September 2014 11:05
Target OS: Raspberry Pi
Domoticz version: v3.6953
Location: Norway
Contact:

Re: NEW frontpage.html - request comments

Post by havnegata » Sunday 15 October 2017 19:06

G3rard wrote:
Wednesday 01 March 2017 0: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
Posts: 40
Joined: Monday 01 May 2017 20:15
Target OS: Raspberry Pi
Domoticz version: 3.9030
Contact:

Re: NEW frontpage.html - request comments

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.
Raspberry Pi 2 B - Raspbian Jessie + Domoticz + RFXtrxcom 433, House(dimmers, sockets, harmonyhub, Temp / Humidity Sensors, PIR, ESP8266)

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests