Tasterimpuls auf Webseite ausgeben

Heute ist Stammtischzeit:
Jeden Donnerstag 20:30 Uhr hier im Chat.
Wer Lust hat, kann sich gerne beteiligen. ;)
  • Hallo zusammen :)


    ich habe vor einen Taster an einen GPIO zu klemmen und dann bei einer Änderung soll eine Ausgabe auf einer Webseite erfolgen.

    Also genau soll es dann so aussehen:

    bei nicht gedrückten Taster soll ein Bild ausgegeben werden
    bei gedrückten Taster soll das alte Bild verschwinden und ein neues erscheinen

    Kann mir jemand helfen ? Bin schon am verzweifel... :X

    LG
    Michael

  • Ich bin mir nicht sicher ob der von dir gewählte Bereich, oder Weg, der richtige ist.

    Eine Webseite hat erst mal nichts mit Python zu tun - zumindest erwähnst du kein spezielles Python Module wie zB bottle.. Insofern wäre es also eigentlich der falsche Forum-Bereich den Du gewählt hast.

    Allerdings glaube ich denkst du zu kompliziert. Am einfachsten wärs wenn das gleiche Script welches du zum schalten des GPIO's verwendest, auch die Bilddatei austauscht. Also am besten nutzt du Interrupt im Python Script und deine Webseite refresht sich entweder regelmäßig und stetig vollständig oder zB nur einen iframe Bereich des Bildes.

  • Hallo,

    wie meigrafd schon schreibt: es spielen zwei Komponenten zusammen - die Serverseite (also dein Raspi) und die Clientseite (also ein Browser, der mit dem Raspi verbunden ist).

    Rein serverseitige Programmierung reicht _nicht_. Du musst mit der ausgelieferten Webseite dem Browser mitteilen, diese alle X Sekunden neu zu laden (unschön, aber geht), oder clientseitig direkt mit AJAX (oder Websockets) arbeiten.

    Insgesamt gibt's für deine Problemstellung also nicht eine Lösung, sondern viele.

    Frage: muss das ganze quasi in Echtzeit reagieren? Oder reicht es, wenn man den Knopf drückt und z.B. 5s später wird das Bild geändert?

    Und zeig' doch mal den Code, den du schon hast :)

    Gruß, noisefloor

  • Die Seite mit dem refresh-Tag zu aktualisieren wäre die einfachste, aber auch schlechteste Lösung. Ich nehme an, die Änderung soll beinahe in Echtzeit angezeigt werden, dann würde die ganze Seite ständig neu geladen werden müssen. Die Lösung würde ich verwerfen. Problematisch ist, dass Du eine Webseite die im Browser geladen ist nicht vom Server aus ändern kannst. Erst wenn durch den Browser eine Abfrage (Request) gemacht wird, wird eine Änderung erkannt. Dir bleibt eigentlich nur eine Möglichkeit und zwar ein Script in die Seite einfügen, was den Browser veranlasst z.B. alle 0,5 Sekunden einen Request an den Server zu senden und sich die entsprechenden Daten ( und nur diese, nicht die ganze Webseite) zu holen. Dazu kann man Javascript mit den Tools Jason und Ajax verwenden. Es gibt auch Frameworks, die den Umgang damit recht einfach machen. Mootools oder JQuery wären so was.

  • also das ganze solllte schon in echtzeit reagieren..
    hier mal den code den ich schon habe :


    <!doctype html>
    <html>
    <head>

    <?php
    if (isset($_POST['SCHRANKEAUF'])) {
    exec('sudo python /var/www/html/BSÖ.py');

    }
    ?>

    <?php
    if (isset($_POST['SCHRANKEZU'])) {
    exec('sudo python /var/www/html/BSS.py');

    }
    ?>

    <?php
    if (isset($_POST['SCHRANKEAUFZU'])) {
    exec('sudo python /var/www/html/BSSÖ.py');
    }
    ?>


    <?php
    if (isset($_POST['BELEUCHTUNGEIN'])) {
    exec('sudo python /var/www/html/BLAN.py');
    }
    ?>

    <?php
    if (isset($_POST['BELEUCHTUNGAUS'])) {
    exec('sudo python /var/www/html/BLAUS.py');
    }
    ?>


    <meta charset="utf-8">
    <title>EasyControl</title>
    <meta name="generator" content="WYSIWYG Web Builder 10 Trial Version - http://www.wysiwygwebbuilder.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="WebAppLogin.css" rel="stylesheet">
    <link href="Programm.css" rel="stylesheet">
    </head>


    <body>
    <form method="post">


    <a href="http://www.wysiwygwebbuilder.com" target="_blank"><img src="images/builtwithwwb10.png" alt="WYSIWYG Web Builder" style="position:absolute;left:395px;top:1135px;border-width:0;z-index:250"></a>
    <div id="wb_hummel">
    <img src="images/hummel-bauer.png" id="hummel" alt=""></div>
    <div id="wb_Line1">
    <img src="images/img0001.png" id="Line1" alt=""></div>
    <div id="wb_Line2">
    <img src="images/img0002.png" id="Line2" alt=""></div>
    <div id="wb_easy_controll">
    <span style="color:#FF0000;font-family:Verdana;font-size:64px;"><em>E</em></span><span style="color:#000000;font-family:Verdana;font-size:48px;"><em>asy</em></span><span style="color:#FF0000;font-family:Verdana;font-size:64px;"><em>C</em></span><span style="color:#000000;font-family:Verdana;font-size:48px;"><em>ontrol</em></span></div>
    <div id="wb_Webcam">
    <img src="http://192.168.88.45:8081" id="Webcam" alt=""></div>
    <div id="wb_Schranke_zu"><img src="images/img0004.png" id="Schranke_zu" alt=""></div>
    <div id="wb_Schranke_auf"><img src="images/img0003.png" id="Schranke_auf" alt=""></div>
    <div id="wb_Text2">
    <span style="color:#000000;font-family:Arial;font-size:27px;">Live-Bild</span></div>
    <div id="wb_Line3">
    <img src="images/img0006.png" id="Line3" alt=""></div>
    <div id="wb_bauer_logo">
    <img src="images/img0011.png" id="bauer_logo" alt=""></div>
    <div id="wb_Line4">
    <img src="images/img0007.png" id="Line4" alt=""></div>
    <div id="wb_Line5">
    <img src="images/img0008.png" id="Line5" alt=""></div>
    <div id="wb_Text4">
    <span style="color:#000000;font-family:Arial;font-size:27px;">Aktionen</span></div>
    <div id="wb_schranke_auf_zu">
    <img src="images/img0009.png" id="schranke_auf_zu" alt=""></div>
    <div id="wb_Line6">
    <img src="images/img0010.png" id="Line6" alt=""></div>
    <div id="wb_Text3">
    <span style="color:#000000;font-family:Arial;font-size:27px;">Sicherheitseinrichtungen</span></div>
    <div id="wb_Text5">
    <span style="color:#000000;font-family:Arial;font-size:27px;">Zustand</span></div>
    <div id="wb_Line7">
    <img src="images/img0012.png" id="Line7" alt=""></div>
    <div id="wb_Line8">
    <img src="images/img0013.png" id="Line8" alt=""></div>
    <div id="wb_mail">
    <img src="images/ffrivit.png" id="mail" alt=""></div>
    <div id="wb_shop">
    <img src="images/dfurhvuir.png" id="shop" alt=""></div>
    <div id="wb_facebook">
    <img src="images/bughbtri.png" id="facebook" alt=""></div>
    <div id="wb_Adresse">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Bauer Systemtechnik GmbH, Gewerbering 17, DE-84072 Au/Hallertau,<br>Tel. +49 (0) 8752 86 58 09-0, Fax +49 (0) 8752 9599</span></div>
    <div id="wb_Text7">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Blinkleuchte</span></div>
    <div id="wb_Line9">
    <img src="images/img0014.png" id="Line9" alt=""></div>
    <div id="wb_Text8">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Lichtschranke</span></div>
    <div id="wb_Line10">
    <img src="images/img0015.png" id="Line10" alt=""></div>
    <div id="wb_Text9">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Induktionsschleife</span></div>
    <div id="wb_Text6">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Lichtschranke</span></div>
    <div id="wb_Text10">
    <span style="color:#000000;font-family:Arial;font-size:19px;">Lichtschranke</span></div>
    <input type="submit" id="B_MAIL" name="" value="">
    <input type="submit" id="B_SHOP" onclick="window.location.href='https://www.torautomatik-shop.de/';return false;" name="" value="">
    <div id="wb_induktionsschleife_aus">
    <img src="images/induktion.%20aus.png" id="induktionsschleife_aus" alt=""></div>
    <div id="wb_induktionsschleife_ein">
    <img src="images/induktion.%20ein.png" id="induktionsschleife_ein" alt=""></div>
    <div id="wb_lichtschranke_aus">
    <img src="images/lichtschr.%20aus.png" id="lichtschranke_aus" alt=""></div>
    <div id="wb_lichtschranke_an">
    <img src="images/lchtschr.%20an.png" id="lichtschranke_an" alt=""></div>
    <div id="wb_blinkleuchte_aus">
    <img src="images/birne%20aus.png" id="blinkleuchte_aus" alt=""></div>
    <div id="wb_birne_an">
    <img src="images/birne%20an.png" id="birne_an" alt=""></div>


    <div id="wb_beleuchtung_ein">
    <img src="images/img0005.png" id="beleuchtung_ein" alt=""></div>
    <div id="wb_beleuchtung_aus">
    <img src="images/img0016.png" id="beleuchtung_aus" alt=""></div>
    <input type="submit" id="B_FACEBOOK" onclick="window.location.href='https://www.facebook.com/?_rdr=p';return false;" name="" value="">
    <input type="submit" id="B_SCHRANKE_AUF" name="SCHRANKEAUF" value="">
    <input type="submit" id="B_SCHRANKE_ZU" name="SCHRANKEZU" value="">
    <input type="submit" id="B_SCHRANKE_AUF_ZU" name="SCHRANKEAUFZU" value="">
    <input type="submit" id="B_BELEUCHTUNG_EIN" name="BELEUCHTUNGEIN" value="">
    <input type="submit" id="B_BELEUCHTUNG_AUS" name="BELEUCHTUNGAUS" value="">


    </form>
    </body>
    </html>


    also wenn der taster gedrückt ist soll das erste bild erscheinen und wenn der taster losgelassen wird soll das andere erscheinen

    <div id="wb_lichtschranke_aus">
    <img src="images/lichtschr.%20aus.png" id="lichtschranke_aus" alt=""></div>
    <div id="wb_lichtschranke_an">


    LG
    Michael Bauer
    <img src="images/lchtschr.%20an.png" id="lichtschranke_an" alt=""></div>

  • sorry :)

    hier nocheinmal :

    also wenn der taster gedrückt ist soll das erste bild erscheinen und wenn der taster losgelassen wird soll das andere erscheinen

    Code
    <div id="wb_lichtschranke_aus">
    <img src="images/lichtschr.%20aus.png" id="lichtschranke_aus" alt=""></div>
    <div id="wb_lichtschranke_an">
    <img src="images/lchtschr.%20an.png" id="lichtschranke_an" alt=""></div>


    LG
    Michael

  • Also erst mal: Ich gebe kein Support über PN. Du hast den Code hier bereits gepostet und für die Nachwelt sollte man es hier auch behandeln, nicht über PrivatNachricht.

    Umlaute sind generell eine schlechte Idee. Änder also am besten BSÖ.py in BSOE.py usw.
    Das nächste ist das du nicht für jede if Abfrage den PHP tag öffnen und danach wieder schließen musst sofern da drunter erneut PHP Code steht.
    Auch solltest du der Übersichtshalber Einrückungen verwenden und nicht so viele Leerzeilen zwischen den ganzen Sachen haben. Wo ein div anfängt, was zu diesem div gehört und wo dieses wieder aufhört lässt sich mit entsprechenden Einrückungen besser durchblicken als in dem jetzigen Zustand.
    Im <head> haben deine if Bedingungen aber eigentlich auch nichts zu suchen sondern gehören wenn dann in den Body.

    Du solltest dir auch unbedingt mal folgendes anschauen:
    FAQ --> Nützliche Links / Linksammlung --> [PHP] Anleitung zum schalten von GPIO
    Da gehts um Webseiten und da findest du auch ausführlich beschriebenen Beispielcode

    Achte auch darauf das du deine Bilddateien usw auch entsprechend ihrem Zweck benennst, sowas wie img0001 bis img0010 ist nicht wirklich übersichtlich. Leerzeichen solltest du in den Dateinamen auch tunlichst vermeiden. %20 ist ein Leerzeichen. Änder also sowas wie induktion.%20aus.png besser in induktion_aus.png

    Wie gesagt gäbe es mehrere Möglichkeiten.

    • Die ganze Seite neuladen (refresh / reload) und an entsprechender Stelle den aktuellen GPIO Zustand prüfen und dementsprechend die Bilddatei anzeigen.
    • Über das Python Script, welches deinen Taster behandelt, die Bilddatei entsprechend umbenennen und in der Webseite nur einen Teilbereich (div) mithilfe von AJAX bzw jQuery ständig aktualisieren.
    • Das gesamte Konstrukt nicht über einen Webserver wie apache2/nginx laufen lassen sondern direkt in dem Python Script deines Tasters mithilfe von zB bottle oder Flesk.

    ..um nur mal die gängigsten Möglichkeiten zu nennen..

    1. und 2. lässt sich auch kombinieren, also zB: Taster-Script benennt Datei um und ganze Seite wird unabhängig dessen stetig neu geladen.

  • Hallo,

    Zitat

    Das gesamte Konstrukt nicht über einen Webserver wie apache2/nginx laufen lassen sondern direkt in dem Python Script deines Tasters mithilfe von zB bottle oder Flask.


    Halte ich hier auch für sehr sinnvoll - zumal es hier den Code denke ich vereinfachen würde.

    Grundkonzept:
    - Webseite mit _beiden_ Bildern (also "auf" und "zu" oder wie auch immer ausliefern), ein Bild per JavaSCript ausblenden
    - serverseitig den Status des Tasters in eine Variable schreiben
    - den Status des Tasters über ein simple REST-API zur Verfügung stellen - z.B. eine Route im Python WSGI-Server http://meine_ip_was_auch_immer/button_state/. Die REST-API gibt ein JSON-Objekt wie z.B. {'state':true} zurück (wenn das jetzt kompliziert klingt - das sind 5 Zeilen Code mit Bottle)
    - clientseitig z.B. jede Sekunde über einen AJAX-Request den Status von der URL abholen und dann ggf. per JavaScript das Bild wechseln (wenn das jetzt kompliziert klingt - das sind vielleicht 10-15 Zeilen JavaScript Code, wenn man jQuery einsetzt

    Gruß, noisefloor

  • Das ist im Zeitalter von Websockets antiquiert. Mit Websockets erreichst du das ohne polling, und ohne spuerbare Latenzen - wie meigraf schon schrieb.

Jetzt mitmachen!

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