Haussteuerung

Layout der Haussteuerung ohne interaktive Komponenten

by Norbert Wilms

HTML

<script src="https://www.wilmie.myhome-server.de/img/arrow_down.gif"></script>
<script src="https://www.wilmie.myhome-server.de/img/arrow_up.gif"></script>
<script src="https://www.wilmie.myhome-server.de/img/arrow_down_e.gif"></script>
<div id="haus" class="haus">
</div>

CSS

.haus {
		margin:3px auto;
		position: relative; 
		width: calc(100% - 6px);
		border: 2px solid #444444; 
		text-align: center;
}	
.room {
    position: relative; 
		width: 100%;
		background-color: #666666; 
		border: 3px solid #a80329;
		text-align: left;
}
.room_status {
    position: relative; 
		height: 40px;
		width: calc(100% - 60px);
		background-color: #666666; 
		border: 3px solid #a80329;
		text-align: left;
}
.room_label {
    position: relative; 
		height: 20px;
/*		width: calc(100% - 60px);
		background-color: #666666; 
		border: 3px solid #a80329; */
		text-align: left;
}
.room_switch {
    position: absolute; 
		height: 40px;
		right: 0px;
		top: 2px;
		width: 50px;
}
.room_dev {
    position: relative; 
		width: calc(100% - 6px);
    Display: none; 
}
.dev {
    position: relative; 
		width: 100%;
		background-color: #666666; 
		border: 3px solid #a80329;
		text-align: left;
/*		height: 100px; */
  /*  Display: none; */
}
.dev_label {
    position: relative; 
		width: 100%;
		background-color: #66ff66; 
		text-align: left;
}
.dev_status1, .dev_status2, .dev_status3, .dev_status4, .dev_status5 {
    position: absolute;
    top: 20px; 
		width: 20%;
		background-color: #1166ff; 
		text-align: center;  
}
.dev_status1 {
    left: 80%;
}
.dev_status2 {
    left: 60%;
}
.dev_status3 {
    left: 40%;
}
.dev_status4 {
    left: 20%;
}
.dev_status5 {
    left: 0%;
}
.dev_sw {
    position: relative; 
		width: 100%;
    height: 30px;
		background-color: #66ff66; 
		text-align: left;
}
.dev_sw_box0 {
		position: absolute; 
		top: 0px;
		left: 0px;
 		width: 10%; 
		height: 50px;
    padding: 0px;
 		text-align: center;
		background-color: #aaaaaa; 
}
.dev_sw_box1 {
		position: absolute; 
		top: 0px;
		left: 10%;
 		width: 30%; 
		height: 50px;
    padding: 0px;
 		text-align: center;
		background-color: #aaaaaa; 
}
.dev_sw_box2 {
		position: absolute; 
		top: 0px;
		left: 40%;
 		width: 30%; 
		height: 50px;
    padding: 0px;
		text-align:...

JavaScript

var arrow_up = "https://www.wilmie.myhome-server.de/img/arrow_up.gif";
var arrow_down = "https://www.wilmie.myhome-server.de/img/arrow_down.gif";
var getfhem = "https://www.wilmie.myhome-server.de/demo/getfhem.php";


function header_init(titel) {
  // Parameter:
  // titel = Die Ueberschrift in der ersten Zeile (zentriert)
  $("#haus").append("<div class='content_header' id='content_header'>");
  $("#content_header").append("<div class='content_header_head' id='content_header_head'>" + titel + "</div>");
}

function header_addLine(line_no, text_l, text_r) {
  // Parameter: 
  // line_no = Zeilennummer (nur fuer ID verwendet) muss unique sein!
  // text_l = linksbuendiger Text
  // text_r = rechtsbuendiger Text
  $("#content_header").append("<div class='content_header_line' id='content_header_line" + line_no + "'></div>");
  $("#content_header_line" + line_no).append("<div class='content_header_line_l' id='content_header_line_l" + line_no + "'>" + text_l + "</div>");
  $("#content_header_line" + line_no).append("<div class='content_header_line_r' id='content_header_line_r" + line_no + "'>" + text_r + "</div>");
}

function add_room(room_no, room_name) {
  $("#haus").append("<div class='room' id='room" + room_no + "'>");
  $("#room" + room_no).append("<div class='room_status' id='room" + room_no + "h'></div>");
  $("#room" + room_no).append("<div class='room_switch' id='room" + room_no + "s'></div>");
  $("#room" + room_no).append("<div class='room_dev' id='room" + room_no + "d'></div>");
  $("#room" + room_no + "s").append("<img id='room" + room_no + "i' src=" + arrow_up + " width='48' height='40' />");
  $("#room" + room_no + "h").append("<div class='room_label' id='room" + room_no + "hl'></div>");
  $("#room" + room_no + "h").append("<div class='dev_status1' id='room" + room_no + "hd1'></div>");
  $("#room" + room_no + "h").append("<div class='dev_status2' id='room" + room_no + "hd2'></div>");
  $("#room" + room_no + "h").append("<div class='dev_status3'...