Flipswitch/Toggle nutzen um HTTP Links aufzurufen

L I V E Stammtisch ab 20:30 Uhr im Chat
  • Hallo Liebe pi-Gemeinde,

    ich hab leider in Sachen HTML/CSS einen richtigen Knoten im Kopf und komm hier nicht mehr weiter. Vielleicht kann mir einer der Guru´s ein wenig unter die Arme greifen?

    Ich stehe noch ganz am Anfang und versuche eine kleine Weboberfläche für die Steuerung von diversen Programmen zu realisieren. Bisher habe ich jeweils einen on-Button und einen seperaten off-Button erstellt um Funktionen per HTTP-Link (z.B. Steuerung homematic ccu2) auslösen zu können. Um das ganze optisch etwas aufzupeppen würde ich gern einen flipswitch/toogle dafür nutzen, damit dies mit einem Knopf geschieht und zudem der Status ersichtlich ist.

    Über die Website proto.io habe ich eine css erstellt und eine kleine HTML erzeugt. Hier der Inhalt der beiden Dateien:

    Der Flipswitch ansich funktioniert, ich hab aber keine Ahnung wie ich 1. die Links bei on/off integrieren kann zudem einen Live-Status realisieren kann? Mit Status meine ich, dass der aktive Status des Zustandes (on/off) direkt als richtiger Button beim öffnen der Seite angezeigt wird. Wäre jemand so lieb und kann mir hier Hilfe leisten??

    Danke und Grüße

    M.

    Einmal editiert, zuletzt von Micky (6. Januar 2018 um 16:25)

  • Hallo linusg,

    danke für deine Antwort. Mit Live-Status meine ich, dass wenn z.B. Handy1 den Toggle auf off setzt und dann Handy2 die Website öffnet, der Toggle beim Starten bereits auf off steht. Ich werde ca. 4-5 Toggle brauchen um die gewünschten Zustände schalten zu können. Die Programme rufen anschließend per wget die jeweiligen Links auf die homematic auf:

    Code
    http://192.11.11.11:8181/blabla.exe?Antwort=dom.GetObject('Alarm-deaktivieren').ProgramExecute()

    um damit die Programme/Variablen der homematic steuern zu können.

    Hilft das weiter?

    5 Mal editiert, zuletzt von Micky (6. Januar 2018 um 17:48)

  • Mhmm, kannst du mir mit einem konkreten Beispiel weiterhelfen? Momentan steht für die Website ein kleiner pi3 mit apache zur Verfügung. Später soll es auf meinen debianserver (microserver itx) umziehen. Die Website wird ausschließlich im internen LAN/WLAN zur Verfügung stehen.

    Einmal editiert, zuletzt von Micky (6. Januar 2018 um 17:55)

  • Ich verwende ausschließlich nginx und WebSockets eigentlich nur in Verbindung mit Webframeworks wie Flask oder bottle, außerdem noch socket.io mit einem C# MVC.Net Backend (IIS). Daher kann ich zum Apache nichts sagen, aber suche doch mal nach "Apache Websockets". Clientseitig ist mit dem entsprechenden HTML5 WebSocket API kein Problem, nur Serverseitig brauchst du eben ein Programm, was WebSocket Pakete vom einen Client entgegen nimmt und dann allen anderen mitteilt, das ein Toggle geändert wurde. Die müssen dann wiederum mit JS den Status anpassen.

  • Puh, da sind aber viele Böhmische Dörfer in einem Satz :D ... ob nginx oder apache wäre mir gleich, komme mit beiden zurecht. Habe mal etwas über das Thema WebSocket gegoggelt, klingt für mich aber eher nach ner Doktorarbeit... Alternativ muss ich doch wieder 2 seperate Buttons erstellen, welche beim klicken eine Zustandsbeschreibung in eine kleine Textdatei schreiben und deren Inhalt direkt neben den Buttons anzeigt. Nicht besonders schön, aber eher realisierbar. Habe leider im o.g. Bereich einfach zu wenig Knowhow. Einen Code lesen, verstehen und anpassen bekomme ich da noch eher hin, aber komplett neu erstellen leider nicht.

  • Nur Mut! Wenn du einfach nur Apache zum Ausliefern statischer Dateien verwendest, wäre der Wechsel zu einem Web (Micro)Framework wie Flask gar nicht schwer. Du könntest das immer noch mit Apache oder besser nginx betreiben, oder auf den eingebauten Server von Flask (Also der Dev-Server von Werkzeug, lass dich bitte nicht verwirren) setzen, bei einer Anwendung im Heimnetz mit nur einem oder wenigen Usern fällt ja nicht so viel Traffic an.

    klingt für mich aber eher nach ner Doktorarbeit...

    Wenn du das WebSocket Protokoll noch selbst implementieren willst, vielleicht :lol:

    Die Clientseitige JS Programmierung ist absolut überschaubar: neue WebSocket Instanz mit dem Endpunkt instanzieren, ein paar Event handler setzen, fäddisch...

    Serverseitig kommt es ganz auf die Bibliothek an, die du verwendest. Ist aber auch alles überschaubar.

    Alternativ muss ich doch wieder 2 seperate Buttons erstellen, welche beim klicken eine Zustandsbeschreibung in eine kleine Textdatei schreiben und deren Inhalt direkt neben den Buttons anzeigt. Nicht besonders schön, aber eher realisierbar.

    Nicht wirklich schön ist untertrieben, aber du musst immer noch den anderen Clients vom neuen Status erzählen, das läuft dann auf polling mit AJAX, SSE oder wieder WebSockets hinaus...

  • ach je.... hätt nicht gedacht, dass das so´n Drama wird ;( ich werd mich noch was einlesen, dann schauen wir mal weiter.. vorschnell aufgeben ist auch nicht meins, befürchte aber dass dieses Thema doch ne Nr zu groß ist.

  • Gut, tu das. Wie gesagt, ich denke es ist für dich machbar, auch wenn eine Synchronisation von UI-Zuständen in beinahe Echtzeit eben nichts ganz triviales ist ;)

    Hmpf und am Ende kommen einem dann noch die Browser in die Quere ... ;)

    Edit:

    Ergänzenderweise wäre es vielleicht auch erst einmal sinnvoll nach einer Vor-Variante zu schauen - oder?

    Also es scheint für dich viel Neuland zu geben, da wird die Entwicklung womöglich nicht allzu schnell von Statten gehen und ehrlicherweise gibt es auch sicherlich noch andere gute statische(-re) Ansätze, bspw. dass die Webseite selbst regelmäßig pollt oder dass der Server das Ändern eines Schalters vernünftig validiert und etwa durch eine "out of sync" Seite aus dem Browsercache dir nicht die Schaltung kaputt macht (bspw. wenn die Webseite wochenlang in einem Tab deines mobilen Browsers vor sich hin vegetiert).

    .NET-, Unity3D-, Web-Dev.
    Mikrocomputer-Hobbyist.

    Einmal editiert, zuletzt von Renão (9. Januar 2018 um 21:44)

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!