Icons on floorplans

[BartSr]

Floorplans always show device data together with the relevant icon.
Is there a workaround to show the data only?

[waltervl]

There is as far as I know no setting for this.

[BartSr]

Thanks Walter, I know there's no setting. For that I asked about a workaround.

[waltervl]

Workaround would be to change the javascript or css of the floorplan page. You could ask AI to hide the icons.

[BartSr]

Thanks Walter. Where to find javascript or css of the floorplan?

[waltervl]

This is the js script www/js/domoticzdevices.js

I dont know what css is loaded here.
Be aware your changes will be removed when you update Domoticz.

[BartSr]

Is there somewhere docu about this subject as I never used it before.

[waltervl]

No, best for this is to ask AI like copilot, chatgpt or similar in context of this javascript file to do the functional changes you would like to do.

[BartSr]

Walter,
Where is this supposed to be?
Note that I am running domoticz in docker.

www/js/domoticzdevices.js

In map www no such files

[waltervl]

You have to look in the container

[zicht]

I have done this without altering the native domoticz, as that would be overwritten on updates !

Domoticz has the possibility to use your own HTML templates.
There i placed an image of my floor plan.
With a script and some smart css i put the things on an overlay, only the things that matter to me, like :
Temp & Co2 per room if available.
movement : color changes on the floorplan if movent is now, recent, somewhat less recent, or off + time of last movement --> red = now, orange= recent, purple is less recent, green = none of the before.
smoke detectors : the part of the floorplan becomes red when one is triggered.
Doors opening status : by changing color (red is open, green is closed)

Thats all i realy use on floorplan view (see it as a security page)
On the bottom is a clickable link to a camera view, a custom weather (current+ prediction) & indoor climate on the same page, a custom , and a custom dash page ( all of them also on a template)

My custom dash page shows some relevant current values like upcomming appointmenst in the next few hours, indoor outdoor temp, energy status, who is in home, travel times to/from work, news headlines, amber alerts, P2000 relevant alerts (GRIP in the neighbourhood) etc etc. Most of it is hidden and only shows when somethings is "not normal.". I even have some status of important switches in the room & possibility to "set" them on my own dash ( just 3 switches, the rest is mostly automated)

from each page is a link to the other page, so i basicaly never use the native domoticz view. I''ll only use the domoticz views for debugging.
Below the HTML of my dash. If you load that its totaly empty, but i populate the .txt files with scripts running in domoticz. All my 4 custom pages work the same, just loading txt files create by domoticz time&event scripts. From this example you get the idea. It took some time but is really usefull

Dashboard :

Code: Select all

<br>
<br>
<img  id="warning"  src="http://192.168.0.xxx:xxx/warning.jpg" hidden style="z-index: 1" onclick="normalImg(this)" onerror="hideImg(this)" /> 
<script>function createCookie(e,t,n){let i;if(n){let e=new Date;e.setTime(e.getTime()+60*n*1e3),i="; expires="+e.toGMTString()}else i="";document.cookie=escape(e)+"="+escape(t)+i+"; path=/"}function readcookie(e){var t;return(t=new RegExp("(?:^|; )"+encodeURIComponent(e)+"=([^;]*)").exec(document.cookie))?t[1]:null}function normalImg(e){e.style.display="inline",e.style.width="5%",e.style.height="10%",e.style.position="fixed",e.style.top="50px",e.style.left="100px",createCookie("Dz_05","true","5")}function hideImg(e){e.style.display="none",e.style.width="1px%",e.style.height="1px",e.style.position="fixed",e.style.top="-50px",e.style.left="-50px",createCookie("Dz_05","false","0")}setInterval((function(){var e=document.getElementById("warning");e.style.display="inline",null==readcookie("Dz_05")&&(e.style.width="50%",e.style.height="80%",e.style.position="fixed",e.style.top="50px",e.style.left="25%"),e.src="http://192.168.0.200:9099/warning.jpg?rand="+Math.random()}),10e3),window.addEventListener("load",(function(){hideImg(document.getElementById("warning"))}));</script>
<center>
<table id="mijntop" width='98%'>
<tr><td width='90%' " align="center"><font size="+1" color="#6495ED">
<div id="placeholder"> </div>
 <tr><td width='90%' style="background-color:#202040" align="center"><font size="+1" color="#6495ED">
  <div id="top"> </div>
 </font></td></tr></font>
</td></tr>
</table>

<table width='98%' id="mijntext">
<tr>
<td id='ll' width='20%' style="background-color:#202040; text-align:center; vertical-align:top;">
 <div id="left"></div>
 <div id="ramen"></div>
 <div id="vliegt"></div>
 <div id="pollen"></div>
</td>
<td id='mm' width='60%' align="center" height="325" >
 <div id="clock">.</div>
 <div id="mijndialg"></div>
 <div id="inputdialg"></div>
 <div id="afval"></div>
 <div id="weer"></div>
 <div id="reis"></div>
 <div id="boxp2"></div>
 <div id="amber"></div>
</td>

<td id='rr' width='20%' style="background-color:#202040; text-align:center; vertical-align:top;">
 <div id="aanwezig"></div>
 <div id="motion"></div>
 <div id="bezoekswitch" style="display: inline"></div>
 <div id="lichtautoswitch" style="display: inline"></div>
 <div id="wrap">
 <style>
#wrap { width: 98%; padding: 0; border: 0px red; overflow: hidden; position : relative ; left : 5px; }
#secframe { position : relative ; left : -20px; }
</style>
 <div id="secpanel"></div>
</td>
</tr>
</table>

<table id="mijnbottem" width='98%'>
<tr><td width='90%' " align="center"><font size="+1" color="#6495ED">
<div id="placeholder"> </div>
 <tr><td width='90%' style="background-color:#202040" align="center"><font size="+1" color="#6495ED">
  <div id="news"> </div>
 </font></td></tr></font>
</td></tr>
</table>
</center>
<center><div class="linkje"><a href="http://192.168.0.xxx:xxxx/#/Custom/beveiliging"><b><font color="gray">Beveiliging</font></b></a>&nbsp&nbsp&nbsp<a href="http://192.168.0.xxx:xxxx/#/Custom/cameras"><b><font color="gray">Camera's</font></b></a>&nbsp&nbsp&nbsp&nbsp&nbsp<a href="http://192.168.0.xxx:xxxx/#/Custom/Weer"><b><font color="gray">Weer</font></b></a></div></center>


<script type="text/javascript">
    $(document).ready(function(){
       window.scrollTo(0,0);
	   refreshTable1();
	   refreshTable2();
    });
	$( window ).on( "orientationchange", function( event ) {
		location.reload();
		refreshTable1();
		refreshTable2();
    });
	
    function refreshTable1(){
	    var currentTime = new Date();
		var hours = currentTime.getHours();
		var minutes = currentTime.getMinutes();
		var seconds = currentTime.getSeconds();
		hours = (hours < 10 ? "0" : "") + hours;
		minutes = (minutes < 10 ? "0" : "") + minutes;
		var currentTimeString = hours + ":" + minutes  ;
		console.log(currentTimeString);
		document.getElementById("clock").innerHTML = '<FONT color="Gray" size="+5">'+currentTimeString+'</font>';  
        $('#mijndialg').load('/templates/dialogbox2.txt', function(){
		        const timerId = setTimeout(refreshTable1, 30000);
             });
		$.ajax('/templates/secpanel.txt', {
			type: 'HEAD',
			success: function(d,r,xhr) {
			fileSize = xhr.getResponseHeader('Content-Length');
				if (fileSize<10) {  
				  $("#aanwezig" ).load( "/templates/dialogboxp.txt" );
				  $("#motion" ).load( "/templates/mount/temp/motion.txt" );
				  document.getElementById("secpanel").innerHTML=""; 
				} else {
				  document.getElementById("aanwezig").innerHTML=""; 
				  document.getElementById("motion").innerHTML=""; 
				  $("#secpanel" ).load( "/templates/secpanel.txt" );
				}
			}
		 });	
		var d = new Date(); 
	    breedte=screen.availWidth;
		hoogte=screen.availHeight;
		if (breedte>hoogte) { 
  		  $("#vliegt" ).load( "/templates/dialogboxvliegt.txt" );
		  $("#pollen" ).load( "/templates/dialogboxpollen.txt" );
		} 
	}
	
	function refreshTable2(){
		var d = new Date(); 
	    breedte=screen.availWidth;
		hoogte=screen.availHeight;

        $('#mijndialg').load('/templates/dialogbox2.txt', function(){
		        const timerId = setTimeout(refreshTable2, 300000);
             });
		$("#afval" ).load( "/templates/dialogboxa.txt" );
		$("#weer" ).load( "/templates/dialogboxw.txt" );
		$("#reis" ).load( "/templates/dialogboxr.txt" );
		$("#top" ).load( "/templates/dialogboxtop.txt" );
		$("#inputdialg" ).load( "/templates/dialogboxI.txt" );
		$("#bezoekswitch" ).load( "/templates/dialogboxB_sw.txt" );
		$("#lichtautoswitch" ).load( "/templates/dialogboxL_sw.txt" );

 		if (breedte>hoogte) { 
  		  $("#news" ).load( "/templates/dialogboxn.txt" );
		  $("#amber" ).load( "/templates/dialogboxamber.txt" );
		  $("#left" ).load( "/templates/dialogboxleft.txt" );  
		  $("#ramen" ).load( "/templates/dialogboxraam.txt" );
		  $("#ll").show();
          $("#rr").show();
		} else { 
 		  $("#news" ).load( "/templates/dialogboxn.txt" );
		  $("#amber" ).load( "/templates/dialogboxamber.txt" );
		  $("#left" ).load( "/templates/dialogboxleft.txt" );  
		  $("#ramen" ).load( "/templates/dialogboxraam.txt" );
		  $("#ll").hide();
          $("#rr").hide();
		  $("#boxp2" ).load( "/templates/dialogboxp.txt" );        
		}
    }
	
//	const timer2Id=setTimeout(function(){location.reload(true);}, 3600000);
	
</script>

floor plan :

Code: Select all

<div class="yourDiv"></div>

<!--<img src="/templates/floorplan.jpg" width="800">-->
<style>
.txt {
  position: absolute;
  left: 855px;
  top: 200px;
  height: 45px;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
  font-size: 20px;
  opacity: 1;
  z-index: 4;
  }
.armed_state1 {
  position: absolute;
  left: 855px;
  top: 170px;
  height: 15px;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
  background-color: green;
  font-size: 11px;
  opacity: 1;
  z-index: 4;
  }
.armed_state2 {
  position: absolute;
  left: 855px;
  top: 170px;
  height: 15px;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
  background-color: yellow;
  font-size: 11px;
  opacity: 1;
  z-index: 4;
  }
.armed_state3 {
  position: absolute;
  left: 855px;
  top: 170px;
  height: 15px;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
  background-color: orange;
  font-size: 11px;
  opacity: 1;
  z-index: 4;
  }
.timer {
  position: absolute;
  left: 40px;
  top: 103px;
  height: 490px;
  width: 820px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1;
  z-index: -1;
  }
.Alarm {
  position: absolute;
  left: 40px;
  top: 103px;
  height: 490px;
  width: 820px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1;
  z-index: -1;
  }
.ImageM {
  position: absolute;
  left: 50px;
  top: 113px;
  height: 470px;
  width: 800px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: blue;
  opacity: 1;
  }
.cam {
  position: absolute;
  left: 855px;
  top: 113px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  }
.ces {
  position: absolute;
  left: 5px;
  top: 113px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  }
.Hal1 {
  position: absolute;
  left: 215px;
  top: 385px;
  height: 40px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Hal2 {
  position: absolute;
  left: 215px;
  top: 385px;
  height: 40px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Hal3 {
  position: absolute;
  left: 215px;
  top: 385px;
  height: 40px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Hal4 {
  position: absolute;
  left: 215px;
  top: 385px;
  height: 40px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Hal5 {
  position: absolute;
  left: 215px;
  top: 385px;
  height: 40px;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Wc1 {
  position: absolute;
  left: 195px;
  top: 350px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Wc2 {
  position: absolute;
  left: 195px;
  top: 350px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Wc3 {
  position: absolute;
  left: 195px;
  top: 350px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Wc4 {
  position: absolute;
  left: 195px;
  top: 350px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1;
  }
.Wc5 {
  position: absolute;
  left: 195px;
  top: 350px;
  height: 30px;
  width: 30px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Woonkamer11 {
  position: absolute;
  left: 270px;
  top: 315px;
  height: 110px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Woonkamer12 {
  position: absolute;
  left: 270px;
  top: 315px;
  height: 110px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Woonkamer13 {
  position: absolute;
  left: 270px;
  top: 315px;
  height: 110px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Woonkamer14 {
  position: absolute;
  left: 270px;
  top: 315px;
  height: 110px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Woonkamer15 {
  position: absolute;
  left: 270px;
  top: 315px;
  height: 110px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Woonkamer21 {
  position: absolute;
  left: 195px;
  top: 455px;
  height: 110px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Woonkamer22 {
  position: absolute;
  left: 195px;
  top: 455px;
  height: 110px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  } 
.Woonkamer23 {
  position: absolute;
  left: 195px;
  top: 455px;
  height: 110px;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }    
.Woonkamer24 {
  position: absolute;
  left: 195px;
  top: 455px;
  height: 110px;
  width: 150px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }
.Woonkamer25 {
  position: absolute;
  left: 195px;
  top: 455px;
  height: 110px;
  width: 150px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Keuken1 {
  position: absolute;
  left: 195px;
  top: 230px;
  height: 70px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Keuken2 {
  position: absolute;
  left: 195px;
  top: 230px;
  height: 70px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Keuken3 {
  position: absolute;
  left: 195px;
  top: 230px;
  height: 70px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Keuken4 {
  position: absolute;
  left: 195px;
  top: 230px;
  height: 70px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Keuken5 {
  position: absolute;
  left: 195px;
  top: 230px;
  height: 70px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Werkkamer11 {
  position: absolute;
  left: 140px;
  top:  150px;
  height: 50px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Werkkamer12 {
  position: absolute;
  left: 140px;
  top:  150px;
  height: 50px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Werkkamer13 {
  position: absolute;
  left: 140px;
  top:  150px;
  height: 50px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Werkkamer14 {
  position: absolute;
  left: 140px;
  top:  150px;
  height: 50px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Werkkamer15 {
  position: absolute;
  left: 140px;
  top:  150px;
  height: 50px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Werkkamer21 {
  position: absolute;
  left: 70px;
  top:  150px;
  height: 50px;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Werkkamer22 {
  position: absolute;
  left: 70px;
  top:  150px;
  height: 50px;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Werkkamer23 {
  position: absolute;
  left: 70px;
  top:  150px;
  height: 50px;
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Werkkamer24 {
  position: absolute;
  left: 70px;
  top:  150px;
  height: 50px;
  width: 60px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }
.Werkkamer25 {
  position: absolute;
  left: 70px;
  top:  150px;
  height: 50px;
  width: 60px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Garage11 {
  position: absolute;
  left: 70px;
  top:  250px;
  height: 70px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Garage12 {
  position: absolute;
  left: 105px;
  top: 250px;
  height: 70px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Garage13 {
  position: absolute;
  left: 105px;
  top: 250px;
  height: 70px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Garage14 {
  position: absolute;
  left: 105px;
  top: 250px;
  height: 70px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Garage15 {
  position: absolute;
  left: 105px;
  top: 250px;
  height: 70px;
  width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Garage21 {
  position: absolute;
  left: 70px;
  top: 280px;
  height: 70px;
  width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Garage22 {
  position: absolute;
  left: 70px;
  top: 280px;
  height: 70px;
  width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Garage23 {
  position: absolute;
  left: 70px;
  top: 280px;
  height: 70px;
  width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Garage24 {
  position: absolute;
  left: 70px;
  top: 280px;
  height: 70px;
  width: 55px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }
.Garage25 {
  position: absolute;
  left: 70px;
  top: 280px;
  height: 70px;
  width: 55px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Buiten1 {
  position: absolute;
  left: 275px;
  top:  130px;
  height: 70px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Buiten2 {
  position: absolute;
  left: 275px;
  top:  130px;
  height: 70px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  } 
.Buiten3 {
  position: absolute;
  left: 275px;
  top:  130px;
  height: 70px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }  
.Buiten4 {
  position: absolute;
  left: 275px;
  top:  130px;
  height: 70px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  } 
.Buiten5 {
  position: absolute;
  left: 275px;
  top:  130px;
  height: 70px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  } 
.Overloop11 {
  position: absolute;
  left: 420px;
  top: 370px;
  height: 40px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Overloop12 {
  position: absolute;
  left: 420px;
  top: 370px;
  height: 40px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Overloop13 {
  position: absolute;
  left: 420px;
  top: 370px;
  height: 40px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }   
.Overloop14 {
  position: absolute;
  left: 420px;
  top: 370px;
  height: 40px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }  
.Overloop15 {
  position: absolute;
  left: 420px;
  top: 370px;
  height: 40px;
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }  
.Overloop21 {
  position: absolute;
  left: 645px;
  top: 370px;
  height: 65px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: Red;
  opacity: 1
  }  
.Overloop22 {
  position: absolute;
  left: 645px;
  top: 370px;
  height: 65px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  } 
.Overloop23 {
  position: absolute;
  left: 645px;
  top: 370px;
  height: 65px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  } 
.Overloop24 {
  position: absolute;
  left: 645px;
  top: 370px;
  height: 65px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }  
.Overloop25 {
  position: absolute;
  left: 645px;
  top: 370px;
  height: 65px;
  width: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }  
.Achter1 {
  position: absolute;
  left: 495px;
  top: 300px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Achter2 {
  position: absolute;
  left: 495px;
  top: 300px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }  
.Achter3 {
  position: absolute;
  left: 495px;
  top: 300px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }   
.Achter4 {
  position: absolute;
  left: 495px;
  top: 300px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }  
.Achter5 {
  position: absolute;
  left: 495px;
  top: 300px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }  
.Voor1 {
  position: absolute;
  left: 420px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Voor2 {
  position: absolute;
  left: 420px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }    
.Voor3 {
  position: absolute;
  left: 420px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }    
.Voor4 {
  position: absolute;
  left: 420px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }    
.Voor5 {
  position: absolute;
  left: 420px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }    
.Badkamer1 {
  position: absolute;
  left: 500px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }    
.Badkamer2 {
  position: absolute;
  left: 500px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }    
.Badkamer3 {
  position: absolute;
  left: 500px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }      
.Badkamer4 {
  position: absolute;
  left: 500px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }      
.Badkamer5 {
  position: absolute;
  left: 500px;
  top: 415px;
  height: 60px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }      
.Zolder1 {
  position: absolute;
  left: 695px;
  top: 370px;
  height: 70px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }  
.Zolder2 {
  position: absolute;
  left: 695px;
  top: 370px;
  height: 70px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }  
.Zolder3 {
  position: absolute;
  left: 695px;
  top: 370px;
  height: 70px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }    
.Zolder4 {
  position: absolute;
  left: 695px;
  top: 370px;
  height: 70px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }  
.Zolder5 {
  position: absolute;
  left: 695px;
  top: 370px;
  height: 70px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }  
.Trap11 {
  position: absolute;
  left: 230px;
  top: 330px;
  height: 50px;
  width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }    
.Trap12 {
  position: absolute;
  left: 230px;
  top: 330px;
  height: 50px;
  width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }    
.Trap13 {
  position: absolute;
  left: 230px;
  top: 330px;
  height: 50px;
  width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }    
.Trap14 {
  position: absolute;
  left: 230px;
  top: 330px;
  height: 50px;
  width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }    
.Trap15 {
  position: absolute;
  left: 230px;
  top: 330px;
  height: 50px;
  width: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }    
.Trap21 {
  position: absolute;
  left: 420px;
  top: 330px;
  height: 35px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Trap22 {
  position: absolute;
  left: 420px;
  top: 330px;
  height: 35px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Trap23 {
  position: absolute;
  left: 420px;
  top: 330px;
  height: 35px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Trap24 {
  position: absolute;
  left: 420px;
  top: 330px;
  height: 35px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Trap25 {
  position: absolute;
  left: 420px;
  top: 330px;
  height: 35px;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Trap31 {
  position: absolute;
  left: 645px;
  top: 330px;
  height: 35px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Trap32 {
  position: absolute;
  left: 645px;
  top: 330px;
  height: 35px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }  
.Trap33 {
  position: absolute;
  left: 645px;
  top: 330px;
  height: 35px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }  
.Trap34 {
  position: absolute;
  left: 645px;
  top: 330px;
  height: 35px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }  
.Trap35 {
  position: absolute;
  left: 645px;
  top: 330px;
  height: 35px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }  
.Voordeur1 {
  position: absolute;
  left: 181px;
  top: 384px;
  height: 40px;
  width: 12px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 1
  }
.Voordeur2 {
  position: absolute;
  left: 181px;
  top: 384px;
  height: 40px;
  width: 12px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 1
  }
.Voordeur3 {
  position: absolute;
  left: 181px;
  top: 384px;
  height: 40px;
  width: 12px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 1
  }
.Voordeur4 {
  position: absolute;
  left: 181px;
  top: 384px;
  height: 40px;
  width: 12px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 1
  }
.Voordeur5 {
  position: absolute;
  left: 181px;
  top: 384px;
  height: 40px;
  width: 12px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Achterdeur1 {
  position: absolute;
  left: 180px;
  top:  128px;
  height: 12px;
  width: 75px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Achterdeur2 {
  position: absolute;
  left: 180px;
  top:  128px;
  height: 12px;
  width: 75px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Achterdeur3 {
  position: absolute;
  left: 180px;
  top:  128px;
  height: 12px;
  width: 75px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Achterdeur4 {
  position: absolute;
  left: 180px;
  top:  128px;
  height: 12px;
  width: 75px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Achterdeur5 {
  position: absolute;
  left: 180px;
  top:  128px;
  height: 12px;
  width: 75px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Tussendeur1 {
  position: absolute;
  left: 135px;
  top:  225px;
  height: 12px;
  width: 40px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Tussendeur2 {
  position: absolute;
  left: 135px;
  top:  225px;
  height: 12px;
  width: 40px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Tussendeur3 {
  position: absolute;
  left: 135px;
  top:  225px;
  height: 12px;
  width: 40px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Tussendeur4 {
  position: absolute;
  left: 135px;
  top:  225px;
  height: 12px;
  width: 40px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Tussendeur5 {
  position: absolute;
  left: 135px;
  top:  225px;
  height: 12px;
  width: 40px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Roldeur1 {
  position: absolute;
  left: 75px;
  top: 376px;
  height: 12px;
  width: 95px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.Roldeur2 {
  position: absolute;
  left: 75px;
  top: 376px;
  height: 12px;
  width: 95px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Roldeur3 {
  position: absolute;
  left: 75px;
  top: 376px;
  height: 12px;
  width: 95px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.Roldeur4 {
  position: absolute;
  left: 75px;
  top: 376px;
  height: 12px;
  width: 95px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.Roldeur5 {
  position: absolute;
  left: 75px;
  top: 376px;
  height: 12px;
  width: 95px;
  border-style: double;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.BuitenC11 {
  position: absolute;
  left: 68px;
  top:  114px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.BuitenC12 {
  position: absolute;
  left: 68px;
  top:  114px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.BuitenC13 {
  position: absolute;
  left: 68px;
  top:  114px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.BuitenC14 {
  position: absolute;
  left: 68px;
  top:  114px;
  height: 12px;
  width: 105px;
  color: black;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }
.BuitenC15 {
  position: absolute;
  left: 68px;
  top:  114px;
  height: 12px;
  width: 105px;
  color: black;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.BuitenM11 {
  position: absolute;
  left: 68px;
  top:  100px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.BuitenM12 {
  position: absolute;
  left: 68px;
  top:  100px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.BuitenM13 {
  position: absolute;
  left: 68px;
  top:  100px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.BuitenM14 {
  position: absolute;
  left: 68px;
  top:  100px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.BuitenM15 {
  position: absolute;
  left: 68px;
  top:  100px;
  height: 12px;
  width: 105px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.BuitenC21 {
  position: absolute;
  left: 275px;
  top:  114px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.BuitenC22 {
  position: absolute;
  left: 275px;
  top:  114px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.BuitenC23 {
  position: absolute;
  left: 275px;
  top:  114px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.BuitenC24 {
  position: absolute;
  left: 275px;
  top:  114px;
  height: 12px;
  width: 95px;
  color: black;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }
.BuitenC25 {
  position: absolute;
  left: 275px;
  top:  114px;
  height: 12px;
  width: 95px;
  color: black;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.BuitenM21 {
  position: absolute;
  left: 275px;
  top:  100px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  }
.BuitenM22 {
  position: absolute;
  left: 275px;
  top:  100px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.BuitenM23 {
  position: absolute;
  left: 275px;
  top:  100px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }
.BuitenM24 {
  position: absolute;
  left: 275px;
  top:  100px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  }
.BuitenM25 {
  position: absolute;
  left: 275px;
  top:  100px;
  height: 12px;
  width: 95px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Front1 {
  position: absolute;
  left: 70px;
  top:  395px;
  height: 90px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  } 
.Front2 {
  position: absolute;
  left: 70px;
  top:  395px;
  height: 90px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  } 
.Front3 {
  position: absolute;
  left: 70px;
  top:  395px;
  height: 90px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  } 
.Front4 {
  position: absolute;
  left: 70px;
  top:  395px;
  height: 90px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: green;
  opacity: 1
  } 
.Front5 {
  position: absolute;
  left: 70px;
  top:  395px;
  height: 90px;
  width: 105px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  } 
.Buitenlmp1 {
  position: absolute;
  left: 105px;
  top:  420px;
  border: 2px;
  height: 60px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: red;
  opacity: 1
  border-style: dashed; border-color: white;   
 }   
.Buitenlmp2 {
  position: absolute;
  left: 105px;
  top:  420px;
  border: 2px;
  height: 60px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  border-style: dashed; border-color: white;   
 }   
.Buitenlmp3 {
  position: absolute;
  left: 105px;
  top:  420px;
  border: 2px;
  height: 60px;
  width: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  border-style: dashed; border-color: white;   
  }   
.Buitenlmp4 {
  position: absolute;
  left: 105px;
  top:  420px;
  border: 2px;
  height: 60px;
  width: 65px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  border-style: dashed; border-color: white;   
  }
.Buitenlmp5 {
  position: absolute;
  left: 105px;
  top:  420px;
  border: 2px;
  height: 60px;
  width: 65px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.Camlap1 {
  position: absolute;
  left: 645px;
  top: 440px;
  height: 45px;
  width: 40px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: Red;
  opacity: 1
  }
.Camlap2 {
  position: absolute;
  left: 645px;
  top: 440px;
  height: 45px;
  width: 40px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  background-color: orange;
  opacity: 1
  }
.Camlap3 {
  position: absolute;
  left: 645px;
  top: 440px;
  height: 45px;
  width: 40px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: purple;
  opacity: 1
  }      
.Camlap4 {
  position: absolute;
  left: 645px;
  top: 440px;
  height: 45px;
  width: 40px;
  font-size: 11px;
  overflow: hidden;
  color: black;
  text-overflow: ellipsis;
  background-color: lightgreen;
  opacity: 1
  }    
.Camlap5 {
  position: absolute;
  left: 645px;
  top: 440px;
  height: 45px;
  width: 40px;
  font-size: 11px;
  overflow: hidden;
  color: black;
  text-overflow: ellipsis;
  opacity: 1;
  border-style: dashed; border-color: white;   background-color: SteelBlue;
  }
.fire1 {
  position: absolute;
  left: 190px;
  top: 385px;
  height: 60px;
  width: 60px;
  overflow: hidden;
  color: black;
  opacity: 1;
  }
.fire2 {
  position: absolute;
  left: 105px;
  top: 275px;
  height: 60px;
  width: 60px;
  overflow: hidden;
  color: black;
  opacity: 1;
  }
.fire3 {
  position: absolute;
  left: 425px;
  top: 365px;
  height: 60px;
  width: 60px;
  overflow: hidden;
  color: black;
  opacity: 1;
  }  
.fire4 {
  position: absolute;
  left: 645px;
  top: 365px;
  height: 60px;
  width: 60px;
  overflow: hidden;
  color: black;
  opacity: 1;
  z-index: 6;
  }
.alarm {
  position: absolute;
  left: 405px;
  top: 120px;
  height: 70px;
  width: 350px;
  overflow: hidden;
  color: red;
  background-color: yellow;
  text-align: center;
  opacity: 1;
  z-index: 3;
  } 
.armed {
  position: absolute;
  left: 555px;
  top: 140px;
  height: 70px;
  width: 350px;
  overflow: hidden;
  color: black;
  text-align: center;
  opacity: 50;
  z-index: 0;
  }           
.normal {
  position: absolute;
  left: 330px;
  top: 140px;
  height: 70px;
  width: 350px;
  overflow: hidden;
  color: black;
  text-align: center;
  opacity: 50;
  z-index: 0;
  }
.linkje {
  position: absolute;
  left: 335px;
  top: 550px;
  height: 15px;
  width: 350px;
  overflow: hidden;
  text-align: center;
  opacity: 50;
  z-index: 10;
  }    
.txt_CO_ben {
  position: absolute;
  left: 280px;
  top: 245px; /* adjust for each sensor */
  height: 45px;
  width: 200px;
  font-size: 10px;
  color: black;
  z-index: 4;
  }
.txt_CO_zol {
  position: absolute;
  left: 730px;
  top: 315px; /* adjust for each sensor */
  height: 45px;
  width: 200px;
  font-size: 10px;
  color: black;
  z-index: 4;
  }
</style>

<script>
	$(document).ready(function() {
        window.scrollTo(0,0);
        myTimer = setInterval('refreshPage()', 100);
    });

    function refreshPage() { 
	   $('#yourDiv').load('/templates/mount/temp/beveiliging.txt', function(){
           window.clearTimeout(myTimer);
		   myTimer = setTimeout(refreshPage(), 1000);
        });
    };
	
</script>
<div id="yourDiv"></div>

<div class="ces"><a href="http://192.168.0.xxx:xxx/security.html"><img src="http://192.168.0.xxx:xxx/images/security48.png"></img></a></div>
<center><div class="linkje"><a href="http://192.168.0.xxx:xxxx/#/Custom/dialoog"><b><font color="gray">Dialoog</font></b></a>&nbsp<a href="http://192.168.0.xxx:xxxx/#/Custom/cameras"><b><font color="gray">Camera's</font></b></a>&nbsp<a href="http://192.168.0.xxx:xxxx/#/Custom/Weer"><b><font color="gray">Weer</font></b></a></div></center>

Typical txt file without movement for my floorplan (this file wil constantlly change based on whats going on) :

Code: Select all

<div class="ImageM"><img src="/templates/floorplan.jpg" width="800"></div><div class="Hal4"></div><div class="Wc4"></div><div class="Woonkamer14"></div><div class="Woonkamer24"></div><div class="Keuken4"></div><div class="Werkkamer14"></div><div class="Werkkamer24"></div><div class="Garage14"></div><div class="Garage24"></div><div class="Buiten4"></div><div class="Overloop14"></div><div class="Overloop24"></div><div class="Achter4"></div><div class="Voor4"></div><div class="Badkamer4"></div><div class="Zolder4"></div><div class="Trap14"></div><div class="Trap24"></div><div class="Trap34"></div><div class="Voordeur4"></div><div class="Achterdeur4"></div><div class="Tussendeur4"></div><div class="Roldeur4"></div><div class="BuitenC14"></div><div class="BuitenM14"></div><div class="BuitenC24"></div><div class="BuitenM24"></div><div class="Front4"></div><div class="Buitenlmp4"></div><div class="Camlap4"></div><div class="normal" id="normal"><br><b><h2>Geen alarm of brand</h2></b></div><div class="armed" id="armed home" hidden><br><b><h2>Security: Armed Home</h1></b></div><div class="armed" id="armed away" hidden><br><b><h2>Security: Armed Away</h1></b></div><div class="alarm" id="alarm" hidden><br><b><h1>!! ALARM !!</h1></b></div><div class="alarm" id="brand" hidden><br><b><h1>!! BRAND !!</h1></b></div><div class="fire1"><img style="border: 5px solid red;" src="http://192.168.0.200:8080/images/Fireplace48_Off.png" id="hal" hidden></img></div><div class="fire2"><img style="border: 5px solid red;" src="http://192.168.0.200:8080/images/Fireplace48_Off.png" id="garage" hidden></img></div><div class="fire3"><img style="border: 5px solid red;" src="http://192.168.0.200:8080/images/Fireplace48_Off.png" id="overloop" hidden></img></div><div class="fire4"><img style="border: 5px solid red;" src="http://192.168.0.200:8080/images/Fireplace48_Off.png" id="zolder" hidden></img></div>

One big caution if you are on an SD card !!! It can wear out your sd due to many writes. I am on SSD,

[BartSr]

Thanks very much for your extensive explanation of your floorplans. I think it's exactly what I'm looking for. As this is pretty new for me I'm going to give it a try to get the desired views. For sure I will come back with some questions.
How to start to get 'something' activated. I guess startup dasboard, if so, how. I presume floorplan is 'called' by dahboard.
I gues txt file is constantly updated with dynamic data, am I right that this file constantly is renewed?
As you see I'm a real starter in this field.

[zicht]

How to start to get 'something' activated. I guess startup dasboard, if so, how. I presume floorplan is 'called' by dahboard.
I gues txt file is constantly updated with dynamic data, am I right that this file constantly is renewed?

start with reading : https://wiki.domoticz.com/Domoticz_API/JSON_URL%27s
you can open an url with json to domoticz. This way you can create any link with an action in domoticz

Yes the text file is update frequently, but not on every event. I use different timings for different things and always in a conservative way.
example : garbage is display but only update once a day. But i have also energy but it makes no sense updating it every tick, so i update every 15 minute. Your imagination is the limit, but be aware that everything takes time, if you spend to much time domoticz eventualy will get slow.

(If you have it enabled in settings) you get an tab with your own pages in the top row as soon as you make an html file in the template directory
read here https://wiki.domoticz.com/Custom_menu

good luck inventing/building what you like..
There is a lot of info on the wiki and for sure you will need some trial and error.

[BartSr]

Hi Zicht,
I copied your code to a wordfile for easy find.
I am trying to understand the code which in principle is not that difficult allthough I don't understand every HTML code part (for now).
If you don't mind a have a few questions.
- I am running in docker (official domoticz container); where to put the pictures? Inside the docker using the LInux command:

docker exec -it domoticz /bin/sh

- I can't figure out yet how data from domoticz goes into the HTML 'overlay'(maybe wrong naming but this my first try)
Do we need a scriptt running in Domoticz every xx minutes to transfer data?

- Is dashboard a main 'page' to be initiated first and from there pages like 'floorplan' you gave an example off?

This ofcourse are beginners issues. I always learnt best from examples such as yours in this case.

Thanks for your help.
Bart