GPIO-Ports beim anklicken einer eingebetteten jpg-Datei schalten

  • Hallo zusammen,
    ich hoffe, ich habe die richtige Rubrik gewählt.

    Ich möchte auf einem Raspberry Pi eine Datei erstellen, mit der ich diverse Relais schalten kann (über die GPIO-Ports).
    Dank diverser Anleitungen die ich gelesen habe, ist der Raspberry Pi entsprechend konfiguriert und hat einen Webserver (Apache2).
    Auch WiringPi ist installiert.
    Das schalten der Relais funktioniert auch grundsätzlich. Soweit ist alles ok.
    ABER:
    Ich möchte, dass das ganze aus einer HTML-Datei (alternativ auch aus einer PHP-Datei) passiert, die Buttons (jpg-Dateien) enthält, die ich selbst mit PowerPoint erstellt und als jpg-Datei in die HTML/PHP eingefügt habe. Nun möchte ich, dass beim anklicken des Buttons (jpg-Datei) ein PHP-Befehl gesendet wird, der mir einen GPIO-Port des Raspberry Pi einschaltet. Ein weiterer Button soll ausschalten.
    Die grundsätzliche Befehle zum schalten der Ports kenne ich und die funktionieren auch. Was ich nicht hinbekomme ist die Verknüpfung mit einer eigenen jpg-Datei. Ich habe keine Ahnung, wie das funktioniert.

    Ich kriege es nicht hin, diesen Befehl mit meiner Image-Datei zu verknüpfen. Ich dachte, das würde so funktionieren, wie bei HTML beim Aufruf eines Links, aber dem ist wohl nicht so.
    Meine Frage: Ist es überhaupt möglich, einen solchen Befehl über das anklicken einer Image-Datei auszulösen und wenn "ja", wie geht das?

    WICHTIG: Ich habe schon etliche Foren/Beiträge gegoogelt, bin aber immer nur auf die Möglichkeit getroffen, das so zu lösen:

    <HTML>
    <HEAD>
    <TITLE>externe Befehlsausführung mit "exec"</TITLE>
    </HEAD>
    <BODY>
    <?PHP
    $lampe1on = exec ("./lpic 1 on", $test);
    $lampe2on = exec ("./lpic 2 on", $test);
    $lampe1off = exec (" ./lpic 1 off", $test);
    $lampe2off = exec (" ./lpic 2 off", $test);
    ?>
    <?PHP
    $lampe1off = exec (" ./lpic 1 off", $test);
    ?>
    <form action="<?=htmlentities($_SERVER['PHP_SELF'])?>" method="post">
    <input type="submit" name="$lampe1on" value="Lampe1on">
    <input type="submit" name="$lampe2on" value="Lampe2on">
    <input type="submit" name="$lampe1off" value="Lampe1off">
    <input type="submit" name="$lampe2off" value="Lampe2off">
    </form>
    </HTML>

    Das funktioniert zwar, sieht aber nicht schön aus.

    Ich möchte mir eigene, schönere Buttons kreieren und die nutzen.

    Hat jemand einen Tipp?
    Vielen Dank!

  • GPIO-Ports beim anklicken einer eingebetteten jpg-Datei schalten? Schau mal ob du hier fündig wirst!

  • Hallo Aiki,

    dein Code (bitte bearbeite deinen Post und bette den Code in die dafür vorgesehenen Code Tags des Editors ein) funktioniert? Das kann ich mir nicht wirklich vorstellen. Du hast zwar eine Form und Buttons aber wo wird denn das, was über POST übergeben wird, ausgewertet? Ich kann es in deinem Code nicht finden - oder hast du was vergessen?

    Davon unabhängig kannst du doch mit CSS schöne Buttons basteln und nutzen.

  • Html Datei mit Grafik und a href Link auf PHP Datei erstelllen.
    php Code:

    PHP
    <?php
    shell_exec ("/pfad/schaltegpio.sh);
    header ('Location: http://serverIP/deinewebseitemitbuttons.html?success=true');
    ?>


    header gibt ab das nach Aufruf der PHP datei zurück auf deine Webseite geleitet werden soll)

    dann die bash schreiben: (schaltegpio.sh)

    Bash
    #!/bin/bash
    
    
    gpio mode 25 out
    gpio write 25 0
    sleep 0.2
    gpio write 25 1

    Hier wird für 0,2 s der GPIO Port geschaltet als Beispiel.

    Berechtigungen auf beide Dateien vergeben (www-data braucht Zugriffs und Ausführrechte dafür)
    und dann sollte das gehen. Einige mögen shell_exec nicht, liefert aber auf simpler Basis gute Ergebnisse. Auf hosted Servern ist shell_exec nicht mehr aktiviert standardmäßig. Auf dem Raspberry und Apache2 geht es aber gut bei mir.

    Einmal editiert, zuletzt von 4zap (24. Dezember 2016 um 16:51)

  • Das geht jetzt aber ziemlich an der eigentlichen Fragestellung vorbei.

    Es ging um Buttons mit .jpg Grafik. Da hilft die CSS Property 'background-image' schon eher weiter, einzubinden in den Input Button mit

    Code
    class="meineCssKlasse"

    und im Stylesheet

    Code
    .meineCssKlasse {
        background-image: url("meineDatei.jpg");
    }

    Davon unabhängig muss ein POST Request zunächst validiert und dann auch abgefragt werden - wie in meinem ersten Beitrag bereits erwähnt. Das fehlt in dem vorgestellten Code leider komplett. Also irgendwas wie

    Code
    if($POST['lampe1'] == 'on') {
        mach was
    } elseif($POST['lampe1'] == 'off') {
        mach was anderes
    }

    Einmal editiert, zuletzt von doing (24. Dezember 2016 um 17:17)

  • Ich würde Abstand von der von 4zap gezeigten shell_exec und 'gpio' Sache nehmen und es lieber so machen wie hier beschrieben:

    FAQ => Nützliche Links / Linksammlung => [Python] Webserver, Websocket und ein bisschen AJAX

    FAQ => Nützliche Links / Linksammlung => PHP: Anleitung zum schalten von GPIO
    FAQ => Nützliche Links / Linksammlung => Befehle über PHP mit root Rechten ausführen (sudo webscript)

    Insbesondere bezüglich GPIO ist die 1.Anleitung eigentlich der bessere Weg. Was gegen 'shell_exec' spricht findest du im letzten Link (und "Auf hosted Servern ist shell_exec nicht mehr aktiviert standardmäßig." hat auch gute Gründe)

  • Hallo zusammen,
    vielleicht habe ich mich falsch ausgedrückt.

    Die Datei, die ich gepostet habe, ist nicht original die, die ich nutze. Ich habe sie nur zugefügt, damit Ihr seht, welche Buttons ich NICHT haben möchte.
    Die Datei die ich momentan zu Testzwecken habe, ist die unten angehängte Datei PHP1.php. Darin gibt es gar keine Buttons. Es werden nur Texte angezeigt, die beim Aktivieren den jeweiligen Befehl ausführen.
    Wenn ich vorher die Befehle:
    sudo echo "25" > /sys/class/gpio/Export
    und
    sudo echo "out" > /sys/class/gpio/gpio25/direction
    eingebe (ich weiß, das muss ich irgendwie noch so bauen, dass das immer automatisch beim Neustart ausgeführt wird - soweit bin ich aber noch nicht), dann funktioniert diese Datei und schaltet mir ein Relais an GPIO25 ein und aus.
    Ich möchte aber, dass das ganze optisch schöner aussieht und zwar ungefähr so, wie in dem Screenshot von meiner HTML-Seite (angehängte Datei "Startpage.jpg).
    Beim aktivieren der Buttons, soll dann der jeweilige Befehl ausgeführt werden.
    Meine Frage bezieht sich nun darauf, wie ich die Datei PHP1.php so umbaue, dass nicht der geschriebene Text, sondern die Buttons angezeigt werden (z.B. Button GPIO25_ein.jpg).

    Vielen Dank für Eure Hilfe!

  • Das hatte ich dir bereits geschrieben. Du kannst dir deine Buttons mit CSS so bauen wie du sie haben möchtest - inkl. Rand, runden Ecken, Farbverlauf oder Hintergrundbild, sich ändernder Farbe bei mouseover und / oder click Event etc.

  • Dein allgemeines Problem ist dass bei jedem "Befehl" die komplette Seite neu geladen wird - das php Script also erneut ausgeführt wird. Kann man so machen ja, ist aber m.E. ein unschöner Weg.

    Jedesmal wenn ich dieses "$val = trim(@shell_exec(" kram lese krieg ich nen Würgereiz.... Warum? Siehe "webscript" Link in Beitrag#5

    Wenn du unbedingt PHP verwenden willst und GPIO's nur ein/aus schalten möchtest, solltest du dir den 2.Link in Beitrag#5 anschauen. Ein Umweg über ein bash Script oder Konsolen Befehl ('gpio') ist unnötig und auch langsamer.

    Ich würde Dir aber auch empfehlen nicht ein "GPIO 25 ein" und noch mal ein "GPIO 25 aus" Bild usw zu erstellen sondern nur ein allgemeines Bild für Ein und eines für Aus anzulegen, den Text legst du dann auf das Bild. Allerdings ist selbst das keine schöne Lösung, bau dir die Klickflächen lieber komplett über CSS und verzichte auf extra Bilddateien!

    Warum du nun aber nicht einfach ein Bild über <img einbindest und darum dann halt ein Hyperlink erzeugst, finde ich ebenfalls komisch :s

    [code=php]
    <html>
    <head>
    <style>
    .bild {
    width: 100px;
    height: 50px;
    }
    </style>
    </head>
    <body>
    <a href="?on=25"><img class="bild" src="GPIO25_ein.jpg" /></a><br/>
    </body>
    </html>
    [/php]

  • Ok, ich würde das überhaupt ganz anders lösen: Mittels ioBroker, und vis-Adapter zur Visualiesierung sowie rpi2-Adapter um die GPIO's anzusprechen!

    Damit können komplette Steuerzentralen für Anzeige oder Automatisierung inklusive Web-Interface (aber auch Android-App) aufgebaut werden.

    Anbei ein Test der verscheidene Widgets zeigt und was man so Ohne HTML-Programmierung alles damit machen kann.

    Frank

    Nach 35 Jahren im IT business hab ich mit Raspi mal selbst zum Programmieren begonnen...
    Habe auch einen 3D-Drucker, eine CNC-Fräse und etwas Elektronik-Bastelei als Hobby

    Einmal editiert, zuletzt von fjoke (25. Dezember 2016 um 14:54)

  • Hallo zusammen und vielen Dank für Eure Tipps.
    Es hat mir sehr weiter geholfen.
    Sorry, wenn ich mich etwas doof anstelle, aber ich bin kein Profi und bastle mich in die Materie.
    Daher kann ich mit manch einem Profitipp auch leider nicht umgehen, weil mir dazu Kenntnisse fehlen. Daher frage ich oft noch einmal nach. Aber mit viel lesen, jede Menge experimentieren und manch dummer Frage werde ich jeden Tag schlauer.
    Bis jetzt habe ich noch alles irgendwie realisiert bekommen. Manchmal sicherlich nicht so, wie es ein Profi machen würde, aber doch so, dass es funktioniert.
    Später merkt man dann manchmal, dass es besser geht und hat dann auch das nötige Know-how um es zu realisieren. Das ist mir in der kurzen Zeit, die ich mich jetzt mit dem Raspi beschäftige (ca. 4 Wochen) auch schon passiert.
    Auf jeden Fall funktioniert es jetzt. Die angehängte Datei läuft bei mir, ist im Heimnetz über die Eingabe der IP erreichbar und führt die Befehle aus.

    Allerdings habe ich noch ein Problem:
    Ich muss die Freigabe der GPIO´s nach einer Netztrennung jedes mal neu vornehmen.
    Befehle:
    sudo echo 25 >/sys/class/gpio/Export
    sudo echo out >/sys/class/gpio/gpio25/direction

    Ich habe mal gelesen, dass man das auch automatisieren und in eine Startdatei schreiben kann. Allerdings finde ich die Seite dazu nicht mehr.
    Habt Ihr noch einen Tipp?

  • Wieso liest du denn nicht mal die 2. Anleitung aus Beitrag#5 ? :-/ Ich rede mir den Mund fusselig und erwähne das nun zum 3.mal...

    [code=php]
    <html>
    <head>
    <style>
    .bild {
    border: 0px solid;
    width: 148px;
    height: 80px;
    }
    </style>
    </head>
    <body>
    <?php

    $GPIOs = "24,25";

    foreach (explode(",", $GPIOs) AS $pin) {
    if (!file_exists("/sys/class/gpio/gpio".$pin)) {
    $handle = @fopen("/sys/class/gpio/export", 'a');
    @fwrite($handle, $pin);
    @fclose($handle);
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/direction", 'a');
    @fwrite($handle, "out");
    @fclose($handle);
    }
    }

    function einschalten($pin) {
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/value", 'a');
    @fwrite($handle, "1");
    @fclose($handle);
    }

    function ausschalten($pin) {
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/value", 'a');
    @fwrite($handle, "0");
    @fclose($handle);
    }


    if (!empty($_GET)) {
    foreach ($_GET AS $arg => $var) {
    if ($arg == "EIN") {
    einschalten($var);
    } else if ($arg == "AUS") {
    ausschalten($var);
    }
    }
    }
    ?>


    <a href="?AUS=25"><img class="bild" src="Button GPIO25_aus.jpg"></a></span><br/>
    <a href="?EIN=25"><img class="bild" src="Button GPIO25_ein.jpg"></a></span><br/>

    <a href="?AUS=24"><img class="bild" src="Button GPIO24_aus.jpg"></a></span><br/>
    <a href="?EIN=24"><img class="bild" src="Button GPIO24_ein.jpg"></a></span><br/>
    </body>
    </html>
    [/php]
    Die nächste Verbesserung wäre nur den jeweils zutreffenden Button anzuzeigen:
    [code=php]
    <html>
    <head>
    <style>
    .bild {
    border: 0px solid;
    width: 148px;
    height: 80px;
    }
    </style>
    </head>
    <body>
    <?php

    $GPIOs = "24,25";

    foreach (explode(",", $GPIOs) AS $pin) {
    if (!file_exists("/sys/class/gpio/gpio".$pin)) {
    $handle = @fopen("/sys/class/gpio/export", 'a');
    @fwrite($handle, $pin);
    @fclose($handle);
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/direction", 'a');
    @fwrite($handle, "out");
    @fclose($handle);
    }
    }

    function einschalten($pin) {
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/value", 'a');
    @fwrite($handle, "1");
    @fclose($handle);
    }

    function ausschalten($pin) {
    $handle = @fopen("/sys/class/gpio/gpio".$pin."/value", 'a');
    @fwrite($handle, "0");
    @fclose($handle);
    }

    function status($pin) {
    global $Direction,$Value;
    if (file_exists("/sys/class/gpio/gpio".$pin)) {
    $Direction = trim(file_get_contents("/sys/class/gpio/gpio".$pin."/direction"));
    $Value = trim(file_get_contents("/sys/class/gpio/gpio".$pin."/value"));
    return $Value;
    } else {
    return false;
    }
    }


    if (!empty($_GET)) {
    foreach ($_GET AS $arg => $var) {
    if ($arg == "EIN") {
    einschalten($var);
    } else if ($arg == "AUS") {
    ausschalten($var);
    }
    }
    }


    foreach (explode(",", $GPIOs) AS $pin) {
    if (status($pin) == 1) {
    echo "<a href='?AUS=".$pin."'><img class='bild' src='Button GPIO".$pin."_aus.jpg'></a></span><br/>\n";
    } else {
    echo "<a href='?EIN=".$pin."'><img class='bild' src='Button GPIO".$pin."_ein.jpg'></a></span><br/>\n";
    }
    }
    ?>
    </body>
    </html>
    [/php]


    PS: Du solltest Leerzeichen in Dateinamen vermeiden.

  • "Wieso liest du denn nicht mal die 2. Anleitung aus Beitrag#5 ? Icon_skeptisch Ich rede mir den Mund fusselig und erwähne das nun zum 3.mal..."

    Das habe ich gerade gemacht und -wem sag ich das?- es funktioniert!!!
    Vielen Dank für die Geduld, auch wenn der Mund dabei fusselig wurde!
    Also nochmal: DANKE!

    Einmal editiert, zuletzt von Aiki (26. Dezember 2016 um 15:41)

Jetzt mitmachen!

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