Eigenes Fhem Frontend

[kellhogs]

Hallo, erstmal möchte ich hiermit meinen Respekt aussprechen für diese außerordentlich zolle Projekt!

Ich bin seit einigen Tagen dabei mir fhem anzuschauen und möchte demnächst anfangen dieses einzurichten mit den ersten Automatisierungsaufgaben.
Das erste was mir natürlich aufgefallen ist ist das nicht ganz so "schöne" frontend von fhem. Und da ich im moment dabei bin php zu lernen dachte ich mir
möchte ich gleich mal Probieren ein eigenes frontend zu basteln.

Nun zu dem Problem:

Ich habe mich jetzt seit mehreren stunden sowohl im web als auch im Forum umgeschaut nach Informationen wie ich den den fhem Server von meinem eigenen Frontend nun am besten anspreche
habe aber leider noch nichts gefunden. Ich habe wohl gesehen das es dies schon sehr oft gemacht wurden und da waren auch ganz hübsche Frontends bei .... aber ich möchte mich nun mal selber dran probieren

Nun die frage:

Wie setze ich das am besten um?

Gibt es eine API die ich ansprechen kann um ab zu fragen was für Lampen es gibt und in welchem zustand sich diese befinden bzw diesen zu setzen?
Oder gibt es da irgendeinen anderen weg.

Ich entschuldige mich jetzt schon mal falls ich einfach zu blind war den richtigen post/Wiki Eintrag zu finden,

Ich bedanke mich schon mal im voraus für jede Antwort!

MfG Fabian Posenau

[betateilchen]

Gibt es eine API die ich ansprechen kann um ab zu fragen was für Lampen es gibt und in welchem zustand sich diese befinden

Gib mal in der fhem-Befehlszeile ein: jsonlist2

Das Setzen von Zuständen funktioniert grundsätzlich per http-Request oder per telnet.

[marvin78]

Zusätzlich gibt es fronthem als Websocket-Schnittstelle. Vielleicht schaust du dir aber auch die alternativen Frontends an, die es schon gibt. Zu nennen sind da TabletUI und SmartVisu aber auch Floorplan.

[betateilchen]

fromthem

hat Dir da die Autokorrektur dazwischengefunkt?

[marvin78]

Danke. Korrigiert

[Thorsten Pferdekaemper]

Hi,
also ich persönlich würde da das TabletUI hernehmen und das ganze per PHP ausgeben. Z.B. ist hier meine Routine, um mir eine Übersicht über die Batteriestände und "Activity" Readings hübsch anzuzeigen:

Code Auswählen Erweitern


<li data-row="5" data-col="2" data-sizex="5" data-sizey="3">
<header>BATTERIEN</header>


<?php

$devsBattery = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20battery&XHR=1');
$devsBatteryLevel = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20batteryLevel&XHR=1');
$devsBatVoltage = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20batVoltage&XHR=1');
$devsActivity = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20Activity&XHR=1');

$devices = [];

foreach(explode( "\n", $devsBattery ) as $line) {
  $words = preg_split('/\s+/', $line);
  if(count($words) >= 4) {
$devices[$words[0]]["battery"] = $words[3]; 
  }
};

 foreach(explode( "\n", $devsBatteryLevel ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["batteryLevel"] = $words[3]; 
   }
 };
 
 foreach(explode( "\n", $devsBatVoltage ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["batVoltage"] = $words[3]; 
   }
 };
 
 foreach(explode( "\n", $devsActivity ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["Activity"] = $words[3]; 
   }
 };


echo "<table width='100%'><tr><td>"; 
echo "<table>\n";
$count = 0;
foreach($devices as $dev => $readings) {

  if($count == round(count($devices)/2)) {
    echo '</table>';
echo '</td>';
echo '<td>';
echo '<table>';
  }  
  $count++;
 
 echo "<tr>\n";
  echo "<td>\n";
  echo '<div data-type="label" class="left">'.$dev.'</div>';
  echo "</td>\n";  
  echo "<td>\n";
    if(isset($readings["batteryLevel"])){
    echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="batteryLevel"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_100 fa-rotate-90"]\'
    data-get-on=\'["0","2.1","2.4","2.7","3.0"]\'
    data-on-colors=\'["red","yellow","green","green","green"]\'>
</div>';
  } else if(isset($readings["batVoltage"])){
   echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="batVoltage"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_100 fa-rotate-90"]\'
    data-get-on=\'["0","2.1","2.4","2.7","3.0"]\'
    data-on-colors=\'["red","yellow","green","green","green"]\'></div>';
  } else if(isset($readings["battery"])){
echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="battery"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_75 fa-rotate-90"]\'
    data-states=\'["((?!ok).)*","ok"]\'
    data-on-colors=\'["red","green"]\'></div>';
  };
 echo "</td>\n";  
   echo "<td>\n";
  if(isset($readings["batteryLevel"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="batteryLevel" data-unit="V"></div>';
  };
   if(isset($readings["batVoltage"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="batVoltage" data-unit="V"></div>';
  };
  echo "</td>\n";  
 echo "<td style=\"padding-left:20px\">\n"; 
   if(isset($readings["Activity"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="Activity" data-colors=\'["red","green"]\' data-limits=\'["dead","alive"]\'></div>';
  };
 echo "</td>\n";  
 echo "</tr>\n";  
}
echo "</table>\n";
echo "</td></tr></table>\n"; 

?>

</li>

Das ganze sieht dann so aus wie im Bild.

Das ist meiner Meinung nach die schönere Übung, um PHP zu lernen.

Gruß,
   Thorsten

[betateilchen]

Ich bin seit einigen Tagen dabei mir fhem anzuschauen und möchte demnächst anfangen dieses einzurichten mit den ersten Automatisierungsaufgaben.

Muss man denn wirklich mit dem Kompliziertestem (einem eigenen Frontend) anfangen, bevor man die grundlegende Philosophie von fhem verstanden hat?

[justme1968]

oder anders formuliert: wenn das tatsächlich deine erste frage ist solltest du vielleicht noch mehr schauen und suchen wie es die anderen frontends machen.

überleg dir auch was genau dein frontend besser macht als eines der existierenden. wenn du wirklich in fhem einsteigen willst wirst du auch so genug dinge finden mit denen du deine zeit verbringen kannst um alles so zu machen wie du es dir vorstellst auch ohne eigenes frontend. und ohne das rad neu zu erfinden. nimm lieber dir räder und alles andere das es schon gibt und bau ein auto. oder wenigstens eine komponente die es noch nicht gibt.

aber wenn du trotzdem mit einem frontend anfangen willst: schau dir an was es schon gibt und wie es funktioniert. und  frontends kann man hier durchaus recht breit auffassen. das geht von fhemweb über tablett ui, frontem und allem was im
web browser läuft über alexa-fhem, homebridge-fhem und dem node websocket modul bis hin zur ganz neuen websocket version die jetzt in fhemweb integriert ist.

letzteres würde ich mir anschauen um status updates zu bekommen und das ganze mit jsonlist2 kombinieren um den initialen status beim starten zu bekommen.

[kellhogs]

Danke für die ganzen tollen antworten.

Zu erst mal ich weiß natürlich das es etwas gewagt ist mit sowas wie einem eigenem Frontend in dieses Thema ein zu steigen aber ich bin nun mal Experimentierfreudig 
Desweiteren habe ich leider noch nichts da das ich automatisieren könnte das kommt alles erst die nächsten Wochen wenn das nötige Kleingeld da ist. Der Pi  war schon vorher Vorhanden. 
Und bis Rest da ist muss ich mich ja mit was anderem beschäftigen  zumal nachdem was ich bis jetzt gesehen habe finde ich ist es nicht sehr schwer neue Geräte zu konfigurieren (kann natürlich auch anfängliche Naivität sein )

Gib mal in der fhem-Befehlszeile ein: jsonlist2

Das Setzen von Zuständen funktioniert grundsätzlich per http-Request oder per telnet.

Leider habe ich ehrlich gesagt keinen Plan wie das ganze mit http-Request oder telnet funktionieren soll ein passendes Tutorial wäre net 

Auf die Idee durch andere Frontends mal durch zu schauen hätte ich natürlich aus selber kommen können  trotzdem danke für den Tipp 

Und auch danke an Thorsten werde durch deinen Code mal durchschauen. 

Denke  das Thema hat sich dann hiermit erstmal erledigt und nochmal danke für die schnellen antworten! Melde mich nochmal falls ich Hilfe brauchen sollte.

MfG Fabian Posenau

[Thorsten Pferdekaemper]

Leider habe ich ehrlich gesagt keinen Plan wie das ganze mit http-Request oder telnet funktionieren soll ein passendes Tutorial wäre net 

Schau Dir mein Coding an, da werden im Prinzip auch nur FHEM-Kommandos per HTTP-Request abgesetzt. Bei mir sind es list-Kommandos, aber natürlich gehen auch set-Kommandos und alles andere. jsonlist2 ist auch einfach ein Kommando.
Gruß,
   Thorsten

[Steffen@Home]

Hallo Thorsten, wow das finde ich super!

Habe derzeit kein TabletUI installiert. Nun die Frage, kann man so etwas in der Art auch irgendwie in der Standard Oberfläche realisieren?
Danke und Gruß Steffen

Hi,
also ich persönlich würde da das TabletUI hernehmen und das ganze per PHP ausgeben. Z.B. ist hier meine Routine, um mir eine Übersicht über die Batteriestände und "Activity" Readings hübsch anzuzeigen:

Code Auswählen Erweitern


<li data-row="5" data-col="2" data-sizex="5" data-sizey="3">
<header>BATTERIEN</header>


<?php

$devsBattery = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20battery&XHR=1');
$devsBatteryLevel = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20batteryLevel&XHR=1');
$devsBatVoltage = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20batVoltage&XHR=1');
$devsActivity = file_get_contents('http://localhost:9046/fhem?cmd=list%20.*%20Activity&XHR=1');

$devices = [];

foreach(explode( "\n", $devsBattery ) as $line) {
  $words = preg_split('/\s+/', $line);
  if(count($words) >= 4) {
$devices[$words[0]]["battery"] = $words[3]; 
  }
};

 foreach(explode( "\n", $devsBatteryLevel ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["batteryLevel"] = $words[3]; 
   }
 };
 
 foreach(explode( "\n", $devsBatVoltage ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["batVoltage"] = $words[3]; 
   }
 };
 
 foreach(explode( "\n", $devsActivity ) as $line) {
   $words = preg_split('/\s+/', $line);
   if(count($words) >= 4) {
 $devices[$words[0]]["Activity"] = $words[3]; 
   }
 };


echo "<table width='100%'><tr><td>"; 
echo "<table>\n";
$count = 0;
foreach($devices as $dev => $readings) {

  if($count == round(count($devices)/2)) {
    echo '</table>';
echo '</td>';
echo '<td>';
echo '<table>';
  }  
  $count++;
 
 echo "<tr>\n";
  echo "<td>\n";
  echo '<div data-type="label" class="left">'.$dev.'</div>';
  echo "</td>\n";  
  echo "<td>\n";
    if(isset($readings["batteryLevel"])){
    echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="batteryLevel"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_100 fa-rotate-90"]\'
    data-get-on=\'["0","2.1","2.4","2.7","3.0"]\'
    data-on-colors=\'["red","yellow","green","green","green"]\'>
</div>';
  } else if(isset($readings["batVoltage"])){
   echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="batVoltage"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_100 fa-rotate-90"]\'
    data-get-on=\'["0","2.1","2.4","2.7","3.0"]\'
    data-on-colors=\'["red","yellow","green","green","green"]\'></div>';
  } else if(isset($readings["battery"])){
echo '<div style="margin-top:-30px;margin-bottom:-30px;margin-right:-10px" data-type="symbol" data-device="'.$dev.'" data-get="battery"
    data-icons=\'["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_75 fa-rotate-90"]\'
    data-states=\'["((?!ok).)*","ok"]\'
    data-on-colors=\'["red","green"]\'></div>';
  };
 echo "</td>\n";  
   echo "<td>\n";
  if(isset($readings["batteryLevel"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="batteryLevel" data-unit="V"></div>';
  };
   if(isset($readings["batVoltage"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="batVoltage" data-unit="V"></div>';
  };
  echo "</td>\n";  
 echo "<td style=\"padding-left:20px\">\n"; 
   if(isset($readings["Activity"])){
 echo '<div data-type="label" data-device="'.$dev.'" 
     data-get="Activity" data-colors=\'["red","green"]\' data-limits=\'["dead","alive"]\'></div>';
  };
 echo "</td>\n";  
 echo "</tr>\n";  
}
echo "</table>\n";
echo "</td></tr></table>\n"; 

?>

</li>

Das ganze sieht dann so aus wie im Bild.

Das ist meiner Meinung nach die schönere Übung, um PHP zu lernen.

Gruß,
   Thorsten

[justme1968]

wenn einspaltig reicht:  mit readingsGroup. beispiele im wiki.

gruss
  andre

[Thorsten Pferdekaemper]

Hallo Thorsten, wow das finde ich super!

Danke!

Habe derzeit kein TabletUI installiert. Nun die Frage, kann man so etwas in der Art auch irgendwie in der Standard Oberfläche realisieren?

Irgendwie bestimmt, siehe z.B. den vorherigen Beitrag...
Ansonsten habe ich irgendwie keinerlei Motivation, das in FHEMWEB zu machen.
Gruß,
   Thorsten

[Grinsekatze]

Naja, soo schlecht ist das FHEMWEB auch nicht. Zugegebenermaßen ist es zunächst im Urzustand recht antiquiert. Doch kann man da vieles anpassen:
Du kannst das Design wechseln (bei Bedarf auch mit eigenem CSS hinterlegen), Du kannst die Device-Namen der Optik anpassen (Stichwort alias), Du kannst den Devices Icons zuweisen, die ggf. auch farblich abweichen - auch je nach Zustand und Du kannst die Operatoren, die in der Übersicht ausführbar sind deinen Bedürfnissen anpassen (Namen ändern, Symbole benutzen, design verändern usw.).

Ich bin gerade nicht zu Hause, darum kein Screenshot. Doch habe ich bei mir zzt. das Design auf ios7 umgestellt, habe jedem Device im Raum einen eigenen sprechenden Namen gegeben (z.B. Deckenlampe - Stichwort alias), habe die Räume (und auch einige Devices), die ich nicht brauche für das Nutzer-Interface ausgeblendet (ich habe sowohl ein FHEMWEB für die Nutzer, als auch eines zur Administration). Die Devices haben passende Icons bekommen, ich kann auch ohne in die Detailansicht wechseln zu müssen alles per Knopfdruck schalten (dazu teils eigene Kommandos eingebettet, teils statt Dropdown-Listen Slider - z.B. für die Heizung - o.ä. verwendet). Zusätzlich symbolisieren bei mir nicht die gelb-grauen Standard-Lampen die Zustände, sondern ich habe auch diese Icons dem Design angepasst. Um am obigen Beispiel zu bleiben: Wenn die Batterie in der Batterieübersicht voll ist, dann wird ein grünes Symbol einer vollen Batterie angezeigt. Wenn sie leerer wird, wird auch die Batteriedarstellung die einer leereren Batterie. Wenn halb voll, dann färbt sich das Icon orange. Wenn die Batterie leer ist, dann wird das Icon einer leeren Batterie in rot angezeigt.

Das ist alles mit ein paar Attributen pro Device möglich.