Hausautomation- GUI

International Deutsch
1

Hallo,

bin nun auch beim Thema "Hausautomation" angekommen und konnte via "Arduino Kochbuch" bereits auch eine Weboberfläche erzeugen. Da praktisch keine HTML-Kenntnisse vorhanden sind, tue ich mich bereits bei der Erstellung einer rudimentären GUI extremst schwer.

Ich möchte an dieser Stelle mal fragen, ob es hier schonmal etwas in dieser Richtung gab, weil ich das Rad eigentlich nicht neu erfinden möchte.

Es geht im Wesentlichen lediglich um die Erstellung einer GUI mit ein paar Buttons, Text und ein paar leuchtenden Feldern, die mir im Browser dann "Zustände" anzeigen.

Die Forensuche half mir bei meiner Suche jedenfalls leider nicht weiter. :confused:

Gruß Chris

2

Chris72622:
Es geht im Wesentlichen lediglich um die Erstellung einer GUI mit ein paar Buttons, Text und ein paar leuchtenden Feldern, die mir im Browser dann "Zustände" anzeigen.

Die Forensuche half mir bei meiner Suche jedenfalls leider nicht weiter. :confused:

Also der Arduino sollein Ethernet Shield aufgesteckt haben und als "Webserver" laufen, und Du möchtest mit einem Gerät in Deinem lokalen Heimnetzwerk per "Webbrowser" darauf zugreifen und Dir "Zustände" anzeigen lassen und ändern können?

Was für "Zustände" sind das?

Reine Schaltzustände wie ON und OFF bzw. EIN und AUS, zwischen denen Du umschalten möchtest? Oder noch etwas anderes als Schaltzustände?

3

Hi Jurs,

ja, hab einen Mega mit nem Ethernetshield und dieser zeigt mir über das lokale Netzwerk (das reicht mir) bereits eine Testprojekt an.

Mir reichen lediglich "einfache" Schaltzustände, wie Du sie eben beschrieben hast.

Gruß Chris

4

hi,

ein anfang ist hier:

http://forum.arduino.cc/index.php?topic=443513.msg3054091#msg3054091

muß mal, wenn ich wieder in der firma bin, auch was an die oberfläche zurückliefern lassen zur anzeige von zuständen. ich hab' da nicht weitergemacht, weil ich inzwischen bei raspberry mit node-server gelandet bin:

http://playground.arduino.cc/PmWiki/Haustechnik-Eisebaer

ich wollte mir selbst was basteln, aber es gibt auch fertige ansätze, die einige hier verwenden. ist halt nicht meins...

gruß stefan

5

Wow- das sieht ja richtig schick aus! :smiley:

Werd mich mal reinlesen. Danke für den Link.

Gruß Chris

6

Chris72622:
Mir reichen lediglich "einfache" Schaltzustände, wie Du sie eben beschrieben hast.

OK, und wie viele AN/AUS Zustände sollen es sein? reichen 10 Stück?

Und wie genau willst Du die Zustände steuern?

Reicht es, den jeweiligen Schaltzustand AN/AUS auf einem "Button" oder "Leuchtfeld" anzuzeigen, und wenn man draufklickt, dann wird ein "Change-Befehl" an den Webserver gesendet, damit der Schaltzustand wechsel? Also voin AUS auf EIN bzw. umgekehrt?

Oder sollen explizit auch zusätzliche Buttons/Leuchtfelder für EIN und AUS angezeigt werden, und wenn man da draufklickt, soll EIN oder AUS geschaltet werden?

Also im Prinzip die Frage, wieviele Buttons/Leuchtfelder möchtest Du zu jedem Schaltkanal angezeigt bekommen?

-einen ("Change")
-zwei("EIN", "AUS")
-oder drei ("EIN", "AUS", CHANGE")

Eine Zeitschaltuhren-Funktion wird vorerst nicht benötigt, oder, also zeitgesteuertes EIN-/Ausschalten, wobei Du die Schaltzeiten über die Weboberfläche einstellen kannst?

Sag mal was dazu und vielleicht auch, ob es schon Beispie-Bezeichnungen für die Schaltkanäle gibt, oder würde es reichen, wenn die Schaltkanäle einfach nur in der Art "Relais-1, Relais-2, Relais-3, Relais-4 und so weiter durchnumeriert sind?

Da halbwegs vollständige und effizient programmierte Beispielprogramme für sowas, die auf Arduino mitEthernet shieldhield laufen, sowohl hier im Forum und auch im Internet Mangelware sind, könnte ich mich ggf. mal dran versuchen, etwas in die Richtung zu machen.

7

Also,

mein momentaner Zustand sieht so aus, dass ich mir mit nem RFID-Reader + Promini an der Haustür, nem Mega mit Ethernetshield im Keller und PIR-Sensoren eine funktionierende Alarmanlage gebaut habe.

Nach dem Kauf von drei 433MHz schaltbaren Steckdosen kam jetzt der Wunsch auf, diese mit dem Smartphone steuern zu können.

In ferner Zukunft könnte ich mir dann die Implementierung von Wetterdaten (Tchibo-Wetterstation-Thread) und andere Schweinereien wie z.B. eine Uhrzeitanzeige vorstellen. Zeitschaltuhrfunktionalitäten wären natülich dann auch naheliegend.

Egal wie es läuft, will auf jeden Fall auf der Arduinoplattform bleiben.

Zusammengefasst ist das, was ich momentan erreichen möchte Folgendes:

  1. Ich möchte diesee drei schaltbaren Steckdosen sehen und schalten (im Optimalfall wären das zwei runde "Auswahlknöpfe", von denen pro Steckdose dann jeweils eines gehighlightet wäre. Einer für "Aus" und Einer für "An".

  2. Ich möchte den Zustand der Alarmanlage sehen und schalten können. Das wären dann ebenfalls zwei runde "Auswahlknöpfe".

  3. Das Ganze sollte (falls möglich) mit dem Smartphone halbwegs komfortabel zu bedienen sein, so dass nach Aufruf der Seite nicht erst mit zwei Fingern gezoomt werden muss.

Gruß Chris

PS: Gern schick ich Dir mal den Code zum drüberfliegen.

8

Mahlzeit & Frohes Neues!

Mir war der Zugriff immer zu langsam. Und irgendwann wächst so eine Seite, um doch etwas komfortabler zu werden.
Daher empfehle ich Dir, gleich von Anfang an eine Trennung zwischen der HTML-Seite und den Daten vorzunehmen.

Die Seite kannst Du auf einen X-beliebigen Speicher ablegen. Ein JavaScript sendet dann ein POST oder GET an das Ethernet-Shield und kann den Wert anzeigen.
So ist auch die Schaltung von der Webseite gewährleistet.

Den Code müsste ich noch irgendwo rumfliegen haben...
Eine frühe Version habe ich gerade hier nochmal wiedergefunden: Funkschalter in Webserver

Da habe ich dann auch irgendwann für meinen LED-Tisch eine Farbauswahl gebaut. Vielleicht hilft es Dir ja weiter: Color Picker

PS.: Die Lösung vom Eisbären ist natürlich deutlich schicker!

9

Schaue mal hier openHAB ist ach noch eine schöne auf dem Arduino lauffähige HMI siehe hier:
>KLICK1<
>KLICK2<

Gruß
DerDani

10

Chris72622:
3. Das Ganze sollte (falls möglich) mit dem Smartphone halbwegs komfortabel zu bedienen sein, so dass nach Aufruf der Seite nicht erst mit zwei Fingern gezoomt werden muss.

OK, muss ich mal schauen. Das mit den runden Schaltflächen in Button-Form werde ich wohl nicht hinbekommen, sondern im Endeffekt kann ich eckige Schaltflächen machen und werde mich dann eher darauf konzentrieren, dass das HTML-GUI auf einem Desktop-Browser am PC weitgehend identisch zu dem aussieht und dasselbe look-and-feel aufkommt wie wenn man das GUI auf einem Smartphone im Browser aufruft.

Also aus Deinem letzten Posting schließe ich, dass es erstmal weniger als 10 Schaltkanäle sind, und dass Du am Webserver-Arduino NICHT DIREKT irgendwelche Ausgänge HIGH und LOW schalten möchtest, sondern dass Du vielmehr Schaltfunktionen aufrufen möchtest, die dann den eigentlichen Schaltvorgang (Funkbefehl) auslösen.

Wie möchtest Du mit Stromausfällen und Power-Down Zeiten am Webserver umgehen? Funksteckdosen liefern ja keine Rückmeldung und es läßt sich nicht abfragen wie sie zuletzt geschaltet worden sind.

Ich schlage daher mal vor;

Bei jedem Schaltvorgang ruft der Webserver nicht nur eine Schaltfunktion auf, sondern er merkt sich zusätzlich an einer Speicherstelle im EEPROM, welcher Schaltbefehl auf einem bestimmten Schaltkanalals letztes gesendet wurde. Und beim Programmstart (nach einem Power-On oder Reset) liest der Webserver diese "letzte Schaltstellung" aus dem EEPROM aus, und sendet genau die Befehle wieder, um diese selbe letzte Schaltstellung wieder herzustellen. Wäre das gut so?

Kann ein paar Tage dauern, bis ich Dir etwas Code vorzeigen kann, also behalte diesen Thread im Auge.

11

jurs:
OK, muss ich mal schauen. Das mit den runden Schaltflächen in Button-Form werde ich wohl nicht hinbekommen, sondern im Endeffekt kann ich eckige Schaltflächen machen und werde mich dann eher darauf konzentrieren, dass das HTML-GUI auf einem Desktop-Browser am PC weitgehend identisch zu dem aussieht und dasselbe look-and-feel aufkommt wie wenn man das GUI auf einem Smartphone im Browser aufruft.

Das ist weitaus wichtig, absolut.

jurs:
Also aus Deinem letzten Posting schließe ich, dass es erstmal weniger als 10 Schaltkanäle sind, und dass Du am Webserver-Arduino NICHT DIREKT irgendwelche Ausgänge HIGH und LOW schalten möchtest, sondern dass Du vielmehr Schaltfunktionen aufrufen möchtest, die dann den eigentlichen Schaltvorgang (Funkbefehl) auslösen.

Ich mach das immer so, dass ich globale Variablen bei entsprechendem Eingang (UDP-Befehl, Tastendruck,..) sich verändern lasse und diese dann im weiteren Verlauf des Sketches wiederum abfrage.

jurs:
Wie möchtest Du mit Stromausfällen und Power-Down Zeiten am Webserver umgehen?

Vor meiner Hausautomation/Alarmanlage hängt eine USV. Sollte der Strom dann tatsächlich mal länger ausbleiben würde ich davon ausgehen, dass man ohnehin die GUI erneut aufrufen muss.

EEPROM-Funktionalitäten würde ich jetzt nicht unbedingt in den Vordergrund stellen, aber wie wir ja alle wissen führen viele Weg nach Rom.

Vielen Dank bereits jetzt für die umfangreichen Gedanken, die Du Dir gemacht hast.

Gruß Chris

12

Viele Wege führen nach Rom, richtig.
Hatte hier auch schon einige Threads zu dem Thema geöffnet, meistens mit Modbus RTU Protokoll.
Da gäbe es einmal das openHAB und einmal FHEM, beides läuft wunderbar mit Arduino.
Für beides brauchst du ein Server wie zB den Raspberry.
Wenn es ohne Raspberry laufen soll, würde ich eher zu den ESP8266 greifen.
Welches Protokoll soll eingesetzt werden? Wie willst du das ganze verkabeln?

http://www.mikrocontroller.net/articles/Evaluations-Platine_für_Heimautomatisierung

13

Guten Morgen,

hab beim nächtlichen Surfen gestern noch was Schickes entdeckt. Sind zwar zwei böse Delays drin, aber vielleicht bekommt man die halbwegs geschickt raus.

Gruß Chris

14

Die beiden delay von 1 bzw. 2 ms tun erst mal nicht weh, da dort sowieso die Verbindung zum Client abgebaut wird. Du willst ja keinen Server für tausende von Usern bauen.
Die ganzen konstanten Texte würde ich noch mit dem F-Macro in den Progmem verlagern.

Gruß Tommy

15

Chris72622:
Guten Morgen,

hab beim nächtlichen Surfen gestern noch was Schickes entdeckt. Sind zwar zwei böse Delays drin, aber vielleicht bekommt man die halbwegs geschickt raus.

Bis auf das delay(500) sind die delays gar nicht so böse. Aber mit dem Code wie er ihn gepostet hat, bekommt er am ehesten noch deswegen Probleme, weil er Pn2 doppelt verwendet hat.

Einerseits soll Relais-1 an Pin2 geschaltet werden, dazu schreibt er
rel1 = 2,

Und andererseits soll ein DHT22 Temperatursensor am selben Pin laufen, dazu schreibt er
#define DHTPIN 2

Das ist ja wohl Idiotenkram, Pin2 am Arduino für zwei verschiedene Dinge verwenden zu wollen!

Ansonsten habe ich schon dümmere Arduino-Webserver-Programme gesehen, vom Prinzip her ist das gar nicht so schlecht.

Aber das Konzept hat seine Grenzen.

Brauchst Du auch ein GUI über HTTP und HTML und ein Text-UI über Serial gleichzeitig, so wie es in dem Beispielprogramm zu sehen ist?

Oder reicht Dir ein reines GUI über HTTP/HTML aus und eine zusätzliche Steuerung über Serial ist irrelevant?

Und brauchst Du im GUI noch zwei zusätzliche Buttons für die Funktionen "Alles an" und §Alles aus"?

Bei dem von Dir verlinkten Beispielprogramm sehe ich zwar im GUI keine "Alles an" und "Alles aus" Buttons, aber im Text-UT hat er offenbar Textbefehle für diese zwei Funktionen vorgesehen.

Brauchst Du in Deinem GUI sowas? Oder reicht es, zu jedem Schaltkanal dien aktuellen Schaltzustand anzuzeigen und jedenKanal einzeln umschalten (toggeln) zu können?

16

jurs:
Brauchst Du auch ein GUI über HTTP und HTML und ein Text-UI über Serial gleichzeitig, so wie es in dem Beispielprogramm zu sehen ist?

Oder reicht Dir ein reines GUI über HTTP/HTML aus und eine zusätzliche Steuerung über Serial ist irrelevant?

GUI via HTTP/HTML reicht.

jurs:
Und brauchst Du im GUI noch zwei zusätzliche Buttons für die Funktionen "Alles an" und §Alles aus"?

Nein.

jurs:
..reicht es, zu jedem Schaltkanal dien aktuellen Schaltzustand anzuzeigen und jedenKanal einzeln umschalten (toggeln) zu können?

Ja. Das Schalten eines "Schaltkanals" würde bei mir beispielsweise dann folgendermaßen aussehen:

(Boolean) lightUG = 1;

Im weiteren Verlauf des Sketches würde diese Variable dann halt die entsprechende "Aktion" auslösen.

Gruß Chris

17

Hi,

hab mich jetzt soweit durchgebissen und habe was den HTML-Code angeht nur noch ein einziges Problem.

Ich würde gerne im folgenden Beispiel eine Leerzeile zwischen den einzelnen Optionen haben, weiss aber nicht wie.

Egal wo ich client.print("
"); einfügen, wird das Ergebnis nicht so, wie ich es mir vorstellen würde. Vielleicht ist das auch der falsche Ansatz.

void printHtmlButtons(EthernetClient client)  //print the html buttons to switch on/off channels
{
  client.println(""); //Start to create the html table
  //client.println("<p>");
  client.println("<FORM>");
  client.println("<table border=\"0\" align=\"center\">");

  //Start printing button by button
  for (int var = 0; var < outputQuantity; var++)
  {
    //set command for all on/off
    allOn += "H";
    allOff += "L";

    //Print begining of row
    client.print("<tr>\n");

    //Prints the button Text
    client.print("<td><h4>");
    client.print(buttonText[var]);
    client.print("</h4></td>\n");

    //Prints the ON Buttons
    client.print("<td>");
    client.print("<INPUT TYPE=\"button\" VALUE=\" an ");
    client.print("\" onClick=\"parent.location='/?H");
    client.print(var);
    client.print("'\"></td>\n");

    //Prints the OFF Buttons
    client.print("<td>");
    client.print("<INPUT TYPE=\"button\" VALUE=\"aus");
    client.print("\" onClick=\"parent.location='/?L");
    client.print(var);
    client.print("'\"></td>\n");

    //Print first part of the Circles or the LEDs

    if (outputStatus[var] == true )                                                          //If Output is ON
    {
      client.print(" <td><div class='green-circle'><div class='glare'></div></div></td>\n"); //Print html for ON LED
    }
    else                                                                                     //If Output is Off
    {
      client.print(" <td><div class='black-circle'><div class='glare'></div></div></td>\n"); //Print html for OFF LED
    }
    client.print("</tr>\n");  //Print end of row
  }
  client.println("</table>"); // Closing the table and form
  client.println("</FORM>");
}

640×1136 95 KB

Gruß Chris

18

Chris72622:
Hi,

Ich würde gerne im folgenden Beispiel eine Leerzeile zwischen den einzelnen Optionen haben, weiss aber nicht wie.

Egal wo ich client.print("
"); einfügen, wird das Ergebnis nicht so, wie ich es mir vorstellen würde. Vielleicht ist das auch der falsche Ansatz.

Also
als "Line Break" ist schon richtig, aber mit einem einzelnen
entsteht natürlich nur ein Zeilenumbruch in die nächste Zeile. Wenn Du einen Zeilenumbruch UND eine Leerzeile möchtest, brauchst Du natürlich zweimal
hintereinander.

Zum Beispiel in der for-Schleife am Beginn jeder Zeile.

Statt:
//Print begining of row
client.print("\n");
probiere eventuell mal:
//Print begining of row
client.print("

!");

Vielleicht hilft's.

Ansonsten füge die Leerzeile vielleicht in den Table Details ( mit ein, oder mache eine komplette Table Row mit leeren Table Details Tags.

In meinen alten Codes habe ich eventuell auch noch was brauchbares gefunden, ich glaube, da habe ich mich sogar vom selben Code inspirieren lassen. Sieht bei mir aber optisch anders aus und ist auch anders angeordnet.. Und es gibt in meinem Code keine Buttons für an und aus bei mir, sondern es wird in einem rot oder grün umrandeten Leuchtfeld der aktuelle Status AN oder AUS klar angezeigt und daneben ist ein Button "Umschalten".

Ich muß nur noch mal an der Initialisierung arbeiten.

Momenten ist es bei mir so: Bei Reset des Controllers wird nach dem Neustart "alles AUS"" angesteuert. Das könnte man natürlich auch ändern in "alles in den zuletzt vor dem Reeset geschalteten Zustand schalten".

19

Du befindest Dich in einer Tabelle, da bringt
nichts.
Du musst die Tabellenzeilen höher machen.
z.B.:

client.println("<tr style=\"height:25px\">");

Wenn Du ein css drin hast, geht das dort natürlich eleganter.

Gruß Tommy

20

Ich danke Euch. Werd berichten. :wink:

Gruß Chris