mein Dashboard (eigene Website zur Bedienung)

Antworten
wobix
Beiträge: 115
Registriert: Mo 4. Sep 2017, 10:49

Mi 15. Mai 2019, 12:56

Hallo Freunde der smarten Steuerung,

ich möchte euch hier von meinem Weg zu einem eigenen Dashboard erzählen.
Ich erstelle diesen Thread absichtlich schon früher und nicht erst wenn alles fertig ist, da ich gerne mit euch zusammen daran arbeiten möchte, dass wir alle ein schönes Dashboard bekommen.
Ich möchte hier vor allem denjenigen helfen, die wie ich Probleme mit der erste Hürde von Html und php haben.
Also, los gehts:

Da mir das Webinterface vom Lightmanager nicht so besonders zusagt und ich mir eine übersichtlichere Bedienung wünsche, habe ich mich umgesehen, was es denn so für Möglichkeiten gibt.

Als erstes bin ich auf das Dashboard von Sebi gestoßen (https://www.schlaue-huette.de/wandtable ... ashboards/)
So etwas wollte ich auch haben.
Also... was brauche ich dafür...
Html... marginal vorhanden (Grundverständnis+copy/paste)
Php... schon mal was mit copy/paste gemacht.
CSS... viel Google und copy/paste.
javascript.... joa hab ich schon Mal gehört.

Beste Voraussetzungen... NICHT!

Also habe ich mich nach Alternative umgesehen, als brauchbare Alternative erschien mir Imperihome.
Imperihome auf mein iPhone geladen und ein bisschen mit der kostenlosen Variante rumprobiert.
Irgendwie wollte ich aber mehr als das was Imperihome kann, es war mir nicht individuell genug.
Somit habe ich dies auch wieder verworfen und gedacht, hm dann muss das Webinterface vom Lightmanager wohl reichen.

Es gingen viele Wochen ins Land in denen ich mich nicht weiter damit beschäftigt habe.
Was mich aber immer mehr störte, war dass wenn ich das Webinterface des Lightmanagers geöffnet habe, dies ein paar Sekunden brauchte, bis es geladen war.
Es fühlte sich so an, als ob der Webserver im Lightmanager erst mal anspringen muss, bis er mir die Website ausgibt.
Um mal kurz das Licht einzuschalten 2-3 Sekunden zu warten nervt schon gewaltig.

Also doch wieder zurück zum Thema Dashboard.
Und so kam es dazu, dass ich mich immer mehr mit dem Thema Html sowie php etc. auseinander gesetzt habe.
Da ich sehr gut im copy/paste bin dachte ich, es wird sicherlich irgendwo Code rumfliegen, den ich benutzen kann.
Tja und genau da ist das größte Problem:..... diesen Code gibt es nicht. (darum dieser Thread)

Also musste ich mir alles häppchenweise zusammen suchen.
Um dieses für andere leichter zu machen will ich hier meinen Fortschritt dokumentieren und anderen dabei helfen ihr Dashboard als Website zum Laufen zu bringen.
Es wird natürlich ein Webserver mit php benötigt, auf dem diese Website läuft, dafür benutze ich meine Synology DS916.
Und ihr benötigt die jquery.js um Javascript ausführen zu können, diese habe ich einfach ins Hauptverzeichnis der Webseite gelegt.
Zusätzlich nutze ich den von Microsoft kostenlosen HTML Editor "Expression Web 4", bestimmt gibt es besser Alternativen, ich komme damit aber gut klar.

Als Disclaimer sei gesagt, wie oben beschrieben bin ich kein Programmier Profi und kenne mich nur mit Bruchstücken aus, bestimmt sind Teile meines Codes anders besser lösbar oder sogar unnötig, für mich funktioniert es aber sehr gut, bin für Verbesserungsvorschläge aber offen.

Es wird verschiedene Versionen geben, für Smartphones und Tablets, die Smartphone Version ist mir aber aktuell wichtiger, deshalb wird alles erst mal darauf ausprobiert und später auf das Tablet portiert.
Bevor ich in weiteren Teilen anfange den Code zu posten und die Funktion zu erklären will ich aber erst Mal mein Dashboard zeigen:

Um die Funktionen der Website überhaupt testen zu können habe ich eine Tabelle angelegt in die ich einfach Bilder mit all meinen Funktionen abgelegt habe, ohne besonders auf die Optik zu achten, es ging nur darum alles zu testen.
Die benötigten Befehle bekommt ihr aus der config.xml
Wie das funktioniert ist im jbmedia faq gut erklärt: https://www.jbmedia.eu/faq/
Die Wetterdaten bekommt ihr aus der weather.json
Wie das funktioniert hat Sebi sehr gut erklärt: https://www.schlaue-huette.de/lightmana ... rarbeiten/
Mit Markerzuständen habe ich mich noch nicht beschäftigt, funktioniert aber über die params.json

Und... es funktioniert... und zwar viel besser als ich es mir vorgestellt habe, nur die beiden oberen Scenen irgendwie noch nicht (erste Reihe um das gesamte EG die Rolladen runter zu fahren)

dash0.JPG
dash0.JPG (91.1 KiB) 2561 mal betrachtet


Anbei mein verwendeter Code:

Code: Alles auswählen

<!DOCTYPE html>
<html>
  <head>
    <link rel="apple-touch-icon" href="web_images/apple-icon.png">
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0.9, maximum-scale=0.9">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
<?php
$request1 = file_get_contents("http://192.168.2.6/weather.json");
$request2 = file_get_contents("http://192.168.2.6/params.json");
$json1 = json_decode($request1, true);
$json2 = json_decode($request2, true);
?>

function lmcontrol(ctlcmd)
{				
	$.ajax({
    url: "http://192.168.2.6/control",
    data: ctlcmd,
    type: "POST"
	});			
}
</script> </head>
  <body style="  text-align: center;   background-image: url(&quot;web_images/bg.jpg&quot;);">
    <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td style="background-color: #cccccc;"> <img src="web_images/icons8-eg-80.png"

              alt=""></td>
          <td>
		  <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('scene=1');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('scene=2');"

              alt=""><br>
          </td>
          <td> <br>
          </td>
          <td><a href="index.php"><img src="web_images/icons8-zuhause-80.png"

                alt=""></a></td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> <img src="web_images/icons8-wohnzimmer-80.png"

              alt=""></td>
          <td> &nbsp;<img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA2,acmd,0,seq,4,smk,0,1&amp;id=8');lmcontrol('cmd=up,typ,rom,did,AAAAAAA3,acmd,0,seq,4,smk,1,1&amp;id=9');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA2,acmd,2,seq,4,smk,0,0&amp;id=8');lmcontrol('cmd=down,typ,rom,did,AAAAAAA3,acmd,2,seq,4,smk,1,0&amp;id=9');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-stopp-80.png" onclick="lmcontrol('cmd=stop,typ,rom,did,AAAAAAA2,acmd,1,seq,4,smk,0,0&amp;id=8');lmcontrol('cmd=stop,typ,rom,did,AAAAAAA3,acmd,1,seq,4,smk,1,0&amp;id=9');"

              alt=""><br>
          </td>
          <td>
		  <img src="web_images/icons8-synchronisieren-80.png" onclick="location.reload()"

              alt=""></td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> <img src="web_images/icons8-esszimmer-80.png"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA4,acmd,0,seq,4,smk,2,1&amp;id=10');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA4,acmd,2,seq,4,smk,2,0&amp;id=10');"

              alt=""></td>
          <td><img src="web_images/icons8-jalousie-stopp-80.png" onclick="lmcontrol('cmd=stop,typ,rom,did,AAAAAAA4,acmd,1,seq,4,smk,2,0&amp;id=10');"

              alt=""></td>
          <td> <br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;">  
		  <img src="web_images/icons8-kochtopf-80.png"

              alt="" height="62" width="62"><br><?php
			echo $json1['channel0']['temperature'] . '&deg;C';
				?>
				</td>
          <td> <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA4,acmd,0,seq,4,smk,2,1&amp;id=10');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA1,acmd,2,seq,4,smk,3,0&amp;id=7');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-stopp-80.png" onclick="lmcontrol('cmd=stop,typ,rom,did,AAAAAAA1,acmd,1,seq,4,smk,3,0&amp;id=7');"

              alt=""></td>
          <td><br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> 
	
				<img src="web_images/icons8-og-80.png"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA5,acmd,0,seq,4,smk,4,1&amp;id=11');lmcontrol('cmd=up,typ,rom,did,AAAAAAA6,acmd,0,seq,4,smk,5,1&amp;id=12');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA5,acmd,2,seq,4,smk,4,0&amp;id=11');lmcontrol('cmd=down,typ,rom,did,AAAAAAA6,acmd,2,seq,4,smk,5,0&amp;id=12');"

              alt=""></td>
          <td> &nbsp;</td>
          <td> <br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> 
		  <img src="web_images/icons8-bett-80.png"

              alt="" height="80" width="80"></td>
          <td> <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA5,acmd,0,seq,4,smk,4,1&amp;id=11');lmcontrol('cmd=up,typ,rom,did,AAAAAAA6,acmd,0,seq,4,smk,5,1&amp;id=12');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA5,acmd,2,seq,4,smk,4,0&amp;id=11');lmcontrol('cmd=down,typ,rom,did,AAAAAAA6,acmd,2,seq,4,smk,5,0&amp;id=12');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-stopp-80.png" onclick="lmcontrol('cmd=stop,typ,rom,did,AAAAAAA5,acmd,1,seq,4,smk,4,0&amp;id=11');lmcontrol('cmd=stop,typ,rom,did,AAAAAAA6,acmd,1,seq,4,smk,5,0&amp;id=12');"

              alt=""></td>
          <td><br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> <img src="web_images/icons8-kinder-80.png"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-hoch-80.png" onclick="lmcontrol('cmd=up,typ,rom,did,AAAAAAA7,acmd,0,seq,4,smk,6,1&amp;id=13');lmcontrol('cmd=up,typ,rom,did,AAAAAAA8,acmd,0,seq,4,smk,7,1&amp;id=14');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-runter-80.png" onclick="lmcontrol('cmd=down,typ,rom,did,AAAAAAA7,acmd,2,seq,4,smk,6,0&amp;id=13');lmcontrol('cmd=down,typ,rom,did,AAAAAAA8,acmd,2,seq,4,smk,7,0&amp;id=14');"

              alt=""></td>
          <td> <img src="web_images/icons8-jalousie-stopp-80.png" onclick="lmcontrol('cmd=stop,typ,rom,did,AAAAAAA7,acmd,1,seq,4,smk,6,0&amp;id=13');lmcontrol('cmd=stop,typ,rom,did,AAAAAAA8,acmd,1,seq,4,smk,7,0&amp;id=14');"

              alt=""> </td>
          <td> <br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> <img src="web_images/icons8-treppe-80.png"

              alt=""> </td>
          <td><img src="web_images/icons8-keller-80.png" onclick="lmcontrol('cmd=on,typ,it,did,3974500,aid,23,acmd,1,seq,6,smk,13,1&amp;id=23');"

              alt=""></td>
          <td><img src="web_images/icons8-keller-80-filled.png" onclick="lmcontrol('cmd=off,typ,it,did,3974500,aid,23,acmd,0,seq,6,smk,13,0&amp;id=23');"

              alt=""></td>
          <td><br>
          </td>
          <td><br>
          </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> <a href="kino.php">
		  <img src="web_images/icons8-filmrolle-80.png"

                alt="" height="62" width="62"></a>
                <br><?php
			echo $json1['channel6']['temperature'] . '&deg;C';
			echo " | ";
			echo $json1['channel6']['humidity'] . '%';
			?>
			</td>
          <td> <img src="web_images/icons8-led-diode-80.png" onclick="lmcontrol('cmd=on,typ%2Ctcp%2Curi%2C192.168.2.108%3A5577%2Cdta%2C71%2023%200F%20A3&amp;id=28');"

              alt=""> </td>
          <td><img src="web_images/icons8-led-diode-80-filled.png" onclick="lmcontrol('cmd=off,typ%2Ctcp%2Curi%2C192.168.2.108%3A5577%2Cdta%2C71%2024%200F%20A4&amp;id=28');"

              alt=""> </td>
          <td><img src="web_images/icons8-ventilator-80.png" onclick="lmcontrol('cmd=on,typ,it,did,974500,aid,18,acmd,1,seq,6,smk,9,1&amp;id=18');"

              alt=""> </td>
          <td> <img src="web_images/icons8-ventilator-80-aus.png" onclick="lmcontrol('cmd=off,typ,it,did,974500,aid,18,acmd,0,seq,6,smk,9,0&amp;id=18');"

              alt=""> </td>
        </tr>
        <tr>
          <td style="background-color: #cccccc;"> 
		  <img alt="" height="70" src="web_images/icons8-laubbaum-80.png" width="70"></td>
          <td> 
		  <img height="80" src="web_images/icons8-sonnenschirm-80.png" width="80"></td>
          <td>
		  <img height="80" src="web_images/icons8-sonnenschirm-80-nacht.png" width="80"></td>
          <td>
		  <img height="80" src="web_images/icons8-haustuerlicht-80.png" width="80"></td>
          <td> 
		  <img height="80" src="web_images/icons8-haustuerlicht-80-aus.png" width="80"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Anschließend habe ich mich daran gemacht eine Struktur in mein Dashboard zu bringen.
Für eine Steuerung über das Smartphone habe ich mich für 3 Spalten entschieden.
Die komischen Striche sind dort, weil ich den Screenshot aus Expression gemacht habe, beim Kino und der Küche stehen auch schon die Temperaturen dabei.
Bisher macht diese Seite nichts weiteres, als auf anderen Seiten zu verweisen, auf denen dann die Funktionen hinterlegt werden.
Aktuell sieht es so aus:

dash1.JPG
dash1.JPG (57.03 KiB) 2561 mal betrachtet
Icon made by Freepik from www.flaticon.com

Code: Alles auswählen

<!DOCTYPE html>
<html>
  <head>
    <link rel="apple-touch-icon" href="web_images/apple-icon.png">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta content="de" http-equiv="Content-Language">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0.9, maximum-scale=0.9">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
<?php
$request1 = file_get_contents("http://192.168.2.6/weather.json");
$request2 = file_get_contents("http://192.168.2.6/params.json");
$json1 = json_decode($request1, true);
$json2 = json_decode($request2, true);
?>

function lmcontrol(ctlcmd)
{				
	$.ajax({
    url: "http://192.168.2.6/control",
    data: ctlcmd,
    type: "POST"
	});			
}
</script> 
	<style type="text/css">
.bildmitbildunterschrift {
	width: 100%;
	position: relative;
}
.bildmitbildunterschrift span {
 /*   background-color: red; */
    position: absolute;

}
	.auto-style3 {
	border: 5px solid #333333;
}
	.auto-style7 {
	border: 5px solid #333333;
	background-color: #0000FF;
}
.auto-style8 {
	border: 5px solid #333333;
	background-color: #008080;
}
.auto-style9 {
	border: 5px solid #333333;
	background-color: #FF6600;
}
	.auto-style10 {
		border: 5px solid #333333;
		background-color: #FFFF00;
	}
	.auto-style11 {
		border: 5px solid #333333;
		background-color: #008000;
	}
	.auto-style12 {
		border: 5px solid #333333;
	background-color: #66FF66;
}
	.auto-style13 {
		border: 5px solid #333333;
		background-color: #FF3300;
	}
	.auto-style14 {
		border: 5px solid #333333;
		background-color: #CC00FF;
	}
	.auto-style15 {
		border: 5px solid #333333;
		background-color: #00FFCC;
	}
	.auto-style16 {
	border-width: 0px;
}
	</style>
  </head>
  <body style="  width: device-width; text-align: center;   background-image: url(&quot;web_images/bg.jpg&quot;);">
    <table style="width: 100%;" cellpadding="0" cellspacing="0" class="auto-style3">
      <tbody>
        <tr>
          <td class="auto-style8"> 
		  <a href="1eg.php"> 
		  <img alt="" src="web_images/icon-eg.png" width="100" class="auto-style16"></a></td>
          <td class="auto-style9">
	
				<a href="4og.php">
	
				<img alt="" src="web_images/icon-og.png" width="100" class="auto-style16"></a></td>
        </tr>
        <tr>
          <td class="auto-style10">  
	
		  <a href="2wz.php">  
	
		  <img alt="" src="web_images/icon-wz.png" width="100" class="auto-style16"></a></td>
          <td class="auto-style7"> 
		  <div class="bildmitbildunterschrift">
		  	<a href="3kueche.php">
		  <img alt="" src="web_images/icon-kueche.png" width="100" class="auto-style16"></a>
		  <span style=" left: 5%; bottom: 5%; width: 20px; height: 20px; font-weight: bold; color: #FFFFFF; font-size: 17px;"><?php
			echo $json1['channel0']['temperature'] . '&deg;C';
				?>
				</span>
				</div>
				</td>
        </tr>
        <tr>
          <td class="auto-style11"> 
		  <a href="5sz.php"> 
		  <img alt="" src="web_images/icon-sz.png" width="100" class="auto-style16"></a></td>
          <td class="auto-style12"> 
		  <a href="6kz.php"> 
		  <img alt="" src="web_images/icon-kz.png" width="100" class="auto-style16"></a></td>
        </tr>
        <tr>
          <td class="auto-style13">  
		  <div class="bildmitbildunterschrift">
		  	<a href="8kino.php">
		  <img alt="" src="web_images/icon-kino.png" width="80" class="auto-style16"></a>
		  <span style=" left: 5%; bottom: 25%; width: 20px; height: 20px; font-weight: bold; color: #FFFFFF; font-size: 17px;">
		  	<?php
			echo $json1['channel6']['temperature'] . '&deg;C';
			?>
			<br>
			<?php
			echo $json1['channel6']['humidity'] . '%';
			?>
				</span>
		 		</div>
		  		</td>
          <td class="auto-style14">
		  <a href="7treppe.php">
		  <img alt="" src="web_images/icon-treppe.png" width="100" class="auto-style16"></a></td>
        </tr>
        <tr>
          <td class="auto-style15">  
		  <a href="9aussen.php">  
		  <img alt="" src="web_images/icon-garten.png" width="100" class="auto-style16"></a></td>
          <td class="auto-style3">
		  <img src="web_images/icon-sync.png" onclick="location.reload()"

              alt="" width="50"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Mich hat es unheimlich viel Zeit gekostet dies zu erlernen und funktionieren in ein Stück Code zu pressen, ich hoffe dass ich damit vielen helfen kann, die das selbe Problem haben wie ich.

Im Umkehrschluss erwarte ich aber von denjenigen, hier ebenfalls ihren Code offenzulegen und neue Erkenntnisse mit mir/uns zu teilen.
Ich hoffe wir bekommen hier zusammen etwas tolles auf die Reihe.

Gruß Jan
Antworten