Mein Dashboard

[Sammy M]

Hallo Dos.

Bin auf Umwegen zufällig auf Deiner Seite mit dem Dashboard gelandet. Sau stark. Genau so wie ich mir das vorstelle. Leider probiere ich schon die ganze Zeit und kome nicht so recht voran. Meine Kenntnisse bzgl. HTML und Java sind nur marginal und try and error klapt auch nicht so recht.
Meine Bitte wäre nun ein ganz einfaches Beispiel für eine HTML Seite mit einem Button der eine Szene ausführt und evtl. einem Button der den Zustand eines Markers anzeigt.
Dies wenn möglich als Step by Step Anweisung.
Ich hoffe, dass ich dann anhand dieser Beispiele weiter Aufbauen kann.
Für eine Antwort wäre ich sehr sehr dankbar.

Gruß
Sammy M

[Christoph]

Hallo @Dos,

ich bin gerade über diesen Post gestoßen und ich muss schon sagen, HUT AB !!
Dein Dashboard gefällt mir sehr gut, leider bin ich programmiertechnisch nicht wirklich begabt, dennoch würde ich gerne nur einzelne meiner Schalter und Lichter auf einem eigenen Dashboard darstellen und steuerbar machen.
Da ich wirklich ein kompletter DAU bin auf diesem Gebiet hätte ich auch gerne einen sehr "basic" Wink mit dem Betonpfeiler wie ich meine Aktoren auslesen und auf einer eigenen Seite darstellen kann. Bis dato bin ich immer wieder daran gescheitert die richtigen Befehle hinter einen Button zu legen ... es hat sich nie etwas getan.
Vielleicht kannst Du mir soweit helfen, dass der Cent fällt und ich mich dann alleine weiter richtig beschäftigen kann.

Danke

LG
Christoph

[paule26]

Hi Christoph, binzwar nicht @Dos aber ich versuchs mal.

die richtigen Befehle

Meinst Du damit die http-Requests an den Air?
Wenn ja , ist das jetzt richtig einfach geworden durch die neue Funktion im airStudio:
Optionen/Zeige HTTP Request beim testen, dann suchst Du dir den gewünschten Aktor aus und drückst auf Testen.
Somit kannst Du ganz einfach mit dem Browser testen ob es geht.
In den FAQ's steht alles nochmal genauer, auch mit Szenen.

Bei den Buttons kommt es ja drauf an wie Du das programmiert hast Java, php, HTML, dementsprechend ist die Syntax ja immer anders

[Laserlap]

Meine Bitte wäre nun ein ganz einfaches Beispiel für eine HTML Seite mit einem Button der eine Szene ausführt und evtl. einem Button der den Zustand eines Markers anzeigt.
Dies wenn möglich als Step by Step Anweisung.
Ich hoffe, dass ich dann anhand dieser Beispiele weiter Aufbauen kann.

Javascript/PHP Lösung:

Code: Alles auswählen

<?php
$response = $_GET['response'];
$status = $_GET['status'];
$variant = $_GET['variant'];
echo "Status: $response";
?>

<script>
    var status = "<?php echo $status ?>";
    if ( status === 'done' || status === '' ) { 
             status = 'open';
             response = 'open';
             url = "http://192.168.0.232/wordpress/javascript/?" + "response=" + response + "&status=" + status;
             document.location.href = url;
    }

    function execute(variant) {   
       var status = "<?php echo $status ?>";
       if ( typeof variant === 'undefined' ) {
          //get variant parameter from php
          var variant = "<?php echo $variant ?>";
       }
       if ( status === 'done' ) {
             //load page in ready state
       }
       else {     
          //Smarthome Steuerung
          var data = 'data';
          var xhr = new XMLHttpRequest();
          var response = 'open';

          switch(variant) {
              case 'light_on':
                    var url = "http://192.168.0.4:91/control?scene=26&user=******&pass=******";
                    break;
              case 'light_off':
                    var url = "http://192.168.0.4:91/control?scene=27&user=******&pass=******";
                    break;
              default:
                    var url = ""
          }
          
          if ( url != '' ) {
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
              if ( xhr.status === 200 || xhr.status === 0 ) {
                  response = 'OK';
                  status = 'done'
              } else {
                  response = 'ERROR';
                  status = 'done'
              }
              console.log(xhr.responseText); 
              url = "http://192.168.0.232/wordpress/javascript/?" + "response=" + response + "&status=" + status;
              document.location.href = url;
            };
            xhr.send(data);
         }
      }
    }   
</script>

<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="background-color: #FFFF00;">
     <form method="post" action="javascript:execute('light_on')" > 
        <p align="center" style="text-align:center"> 
           <input type="submit" name="licht_an_js" value="Light On JS">
        </p>
      </form>
    </td>
    
    <td style="background-color: #191970;">
      <form method="post" action="javascript:execute('light_off')" > 
        <p align="center" style="text-align:center"> 
           <input type="submit" name="licht_aus_js" value="Light Off JS">
         </p>
       </form>
    </td>
  </tr>
</table>

<?php
if ($variant != '') {
  //echo $variant;
  ?>
  <form method='post' action='javascript:execute(<?php $variant ?>)' name='myAutoSubmitForm'>
     <script>document.myAutoSubmitForm.submit();</script> 
  </form>

<?php  
}
?>

Marker auslesen und andere Varianten:

Code: Alles auswählen

<?php


$request1 = file_get_contents("http://192.168.0.4:91/weather.json?user=********&pass=********");
$request2 = file_get_contents("http://192.168.0.4:91/params.json?user=********&pass=********");
$json1 = json_decode($request1, true);
$json2 = json_decode($request2, true);
 
echo 'Werte eines Oregon Scientific Sensors auf Kanal 2:<br>';
echo $json1['channel2']['temperature'] . '°C';
echo " | ";
echo $json1['channel2']['humidity'] . '%<br><br>';
 
echo 'Markerzustände aus der params.json:<br>';
echo $json2['marker state'];

$markerzeile = $json2['marker state'];

$marker1 = substr($markerzeile, 0, -31); // 1. Marker
$marker2 = substr($markerzeile, 1, -30); // 2. Marker
 
echo $marker1;
echo $marker2;


$url = 'http://192.168.0.4:91/control?cmd=typ,it,did,974500,aid,2,acmd,0,seq,6,smk,45,0&user=********&pass=********';
$ch = curl_init($url);

curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);
curl_close($ch);

?>


<form method="post" action="javascript:light_on()" > 
<input type="submit" name="licht_an_js" value="Light On JS">
</form>

<form method="post" action="http://192.168.0.4:91/control?user=********&pass=********&cmd=typ,mka,did,5,acmd,1">
<input type="submit" name="marker006_on" value="Marker 6 ein">
</form>

<form method="post" action="http://192.168.0.4:91/control?cmd=typ,mka,did,5,acmd,2&user=********&pass=********">
<input type="submit" name="marker006_off" value="Marker 6 aus">
</form>

<form method="post" action="http://192.168.0.4:91/control?cmd=typ,mka,did,5,acmd,3&user=********&pass=********">
<input type="submit" name="marker006_toggle" value="Marker 6 toggle">
</form>



<form method="post" action="http://192.168.0.4:91/control?cmd=typ,it,did,974500,aid,2,acmd,1,seq,6,smk,45,1&user=********&pass=********">
<input type="submit" name="licht_an" value="Licht an">
</form>

<form method="post" action="http://192.168.0.4:91/control?cmd=typ,it,did,974500,aid,2,acmd,0,seq,6,smk,45,0&user=********&pass=********">
<input type="submit" name="licht_aus" value="Licht aus">
</form>

<form method="post" onSubmit="window.open('http://192.168.0.4:91/control?cmd=typ,it,did,974500,aid,2,acmd,1,seq,6,smk,45,1&user=********&pass=********')">
<input type="submit" name="licht_an_nw" value="Licht an (new window)">
</form>

<form method="post" onSubmit="window.open('http://192.168.0.4:91/control?cmd=typ,it,did,974500,aid,2,acmd,0,seq,6,smk,45,0&user=********&pass=********')">
<input type="submit" name="licht_aus_nw" value="Licht aus (new window)">
</form>

<form method="post" action="http://192.168.0.4:91/control?user=********&pass=********&scene=26">
<input type="submit" name="scene_026" value="Licht an (Scene 26)">
</form>

<form method="post" action="http://192.168.0.4:91/control?user=********&pass=********&scene=27">
<input type="submit" name="scene_027" value="Licht aus (Scene 27)">
</form>


<?php
?>

http://192.168.0.232/wordpress/javascript -->Website auf meine Synlogy NAS + Wordpress PHP AddOn
http://192.168.0.4:91 -->Lightmanager über Portweiterleitung, da dieses sich einen eine Sub-Netzwerk befindet

Marker setzen funktioniert bei mir leider nicht. Weder über Light Manager Studio noch per HTTP Request

[paule26]

Marker setzen funktioniert bei mir leider nicht. Weder über Light Manager Studio noch per HTTP Request

Das ist im AirStudio falsch ...
http://192.168.0.4:91/control?cmd=typ,smk,1,1 (Marker 2 EIN)

[Laserlap]

Das ist im AirStudio falsch ...
http://192.168.0.4:91/control?cmd=typ,smk,1,1 (Marker 2 EIN)

Vielen Dank, funktioniert super

wie würde die toogle Funktion aufgerufen werden?
http://192.168.0.4:91/control?cmd=typ,smk,1,3 funktioniert leider nicht

[rtwl]

Mit der 0 oder der 2 ganz am Ende

[Laserlap]

Danke Logisch

Javascript/PHP Lösung:

Kleine Ergänzung noch zum Coding:
http://192.168.0.232/wordpress/javascript/ -->"/javascript/" ist die PHP Seite auf dem das ganze Coding hinterlegt ist und diese muss entsprechende angepasst werden (Zeile 13 und 55), damit nach der Ausführung wieder die gleiche Seite geladen wird

Und eine Funktion kann auch direkt per URL aufgerufen werden:
http://192.168.0.232/wordpress/javascri ... t=light_on


Kopieren der Markerstände in eine Datenbank (MariaDB auf der NAS)

Code: Alles auswählen

<?php
$mysqli = new mysqli("http://192.168.0.232", "**user**", "**password**", "**database**");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* change db to smarthome db */
$mysqli->select_db("smarthome");


$request1 = file_get_contents("http://192.168.0.4:91/weather.json?user=********&pass=**********");
$request2 = file_get_contents("http://192.168.0.4:91/params.json?user=*********&pass=**********");
$json1 = json_decode($request1, true);
$json2 = json_decode($request2, true);
 
echo 'Werte eines Oregon Scientific Sensors auf Kanal 2:<br>';
echo $json1['channel2']['temperature'] . '°C';
echo " | ";
echo $json1['channel2']['humidity'] . '%<br><br>';
 
//get Marker states into array
$markerzeile = $json2['marker state'];
for ($i = 0 ; $i < 64; $i++){ 
   $marker[$i] = substr($markerzeile, $i, 1);
   echo $marker[$i];
}
echo " = Markerzeile Array</br>";
echo $markerzeile . " = Markerzeile Original</br>"; 


//get MAC-Address of Lightmanger
$mac_address = $json2['mac addr'];

echo "</br>";
for ($i = 0 ; $i < 64; $i++){ 
   //get other names
   $lightmanager_name = "LM_$mac_address";
   $marker_name = str_pad($i + 1, 3, 0, STR_PAD_LEFT);
 
   //get marker text value
   if ( $marker[$i] === '0') {
      $value = "FALSE";
   }
   else {
      $value = "TRUE";
   }
   
   //update database
   if ($result = $mysqli->query("INSERT INTO marker (source, marker_id, value) VALUES ('$lightmanager_name', '$marker_name', '$value')")) {   
       echo "Marker " . $marker_name . ":</br> $marker[$i] (ins-$i)</br>";
   } else {
           if ($result = $mysqli->query("UPDATE marker SET value = '$value' WHERE source = '$lightmanager_name' AND marker_ID = '$marker_name'")) {
           echo "Marker " . $marker_name . ":</br> $marker[$i] (upd-$i)</br>"; 
       } else {
            printf("Insert and Update failed");
       }
   }
}

$mysqli->close();


?>

Markerausgabe:

Code: Alles auswählen

<?php
$mysqli = new mysqli("http://192.168.0.232", "**user**", "**password**", "**database**");

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* change db to world db */
$mysqli->select_db("smarthome");


echo "<table><tr><td>Source</td><td>Marker</td><td>Value</td><tr>";
$i = 0;
if ($result = $mysqli->query("SELECT * FROM marker")) {
    
    echo "Returned rows are: " . $result -> num_rows."</br>";
    while ($row = mysqli_fetch_row($result)) {
      print("<td>".$row[0]."</td>");
      $table[$i][0] = $row[0];
      print("<td>".$row[1]."</td>");
      $table[$i][1] = $row[1];
      print("<td>".$row[2]."</td></tr>");
      $table[$i][2] = $row[2];
      $i = $i + 1;
    }   

    $result->close();
}

echo "</table>";

$mysqli->close();

echo "Tableline 52 (Marker 53):" . $table[52][0] . " - " . $table[52][1] . $table[52][2];

echo "<script type='text/javascript'>setTimeout(function () { location.reload(true); }, 5000);</script>";

?>

[wireless-dj]

Hallo,

Ich muss diesen Beitrag mal aus der Versenkung holen.

Ich habe bereits einen selbst gebastelten „Home Info Screen“, der mir bislang die Energiezuszände im
Haus anzeigt. Solaranlage, Stromverbrauch, E-Auto laden, usw. Das hab ich mit html und PHP hin gefrickelt,
und läuft soweit gut.

Diesen Screen möchte ich nun um ein paar Schaltflächen erweitern, für einige wichtige Lampen.
Diese werden bei mir über http-Requests geschaltet.

Ich verzweifele gerade daran, diese Requests vernünftig und funktional auf Buttons zu legen.
Letztendlich wird so ein Button ja mit <form> gesendet. Das ist bei mir aber ungünstig.

Hat Jemand eine Quick and Dirty Lösung - möglichst kurz - in Form eines Codeschnipsel, wie man
a) einen http Reuest z.B. „onclick“ absetzen kann, ohne dass danach die ganze Seite neu geladen wird, oder
b) eine Idee, wie ich einzelne Teile der Weboberfläche vom LMAir in die vorhandene Seite mit einbinden kann?

Danke & Gruß,

Volker