Durchführen von "shell_exec" durch Anklick von Switch Button (Checkbox), wie?

  • Hallo Zusammen,
    vor ein Paar Tagen hab ich folgendes Quelltext benutzt, um z.B GPIO17 anzusteuern, und es funktioniert super, leider sieht solches "Submit bzw. Form Button" nicht so schön aus.
    [code=php]<p>GPIO 17 schalten:</p>
    <form method="get" action="gpio-test.php">
    <input type="submit" value="Licht ein" name="Lichtein17">
    <input type="submit" value="Licht aus" name="Lichtaus17">
    </form>

    <?php
    trim(@shell_exec("/usr/local/bin/gpio -g mode 17 out"));
    if(isset($_GET['Lichtein17'])){
    trim(@shell_exec("/usr/local/bin/gpio -g write 17 1"));
    echo "Licht17 ist an";
    }
    else if(isset($_GET['Lichtaus17'])){
    trim(@shell_exec("/usr/local/bin/gpio -g write 17 0"));
    echo "Licht17 ist aus";
    }
    ?>[/php]


    Gerade habe ich ein Apple Style Switch Button (checkbox) mit folgenden CSS/HTML Quellcode gemacht:
    preview-260.png

    [code=php] .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
    display: none;
    }
    .onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
    }
    .onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
    }
    .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #62B53C; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
    }
    .onoffswitch-switch {
    display: block; width: 20px; margin: 5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    }

    body {
    background-color: rgba(231,155,47,1);
    background-image: url(Pictures/bg.jpg);
    }
    body,td,th {
    font-size: 24px;
    color: rgba(77,77,77,1);
    }


    .onoffswitch1 { position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .
    .
    .
    <p>GPIO17 schalten:
    <div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
    </label>
    </div>[/php]


    Meine Frage ist: wie kann ich "shell_exec" durch Anklick von diesem Switch Button durchführen?

    Also durch Anklick vom Maus wenn das Switch Button grün und "ON" ist, wird "trim(@shell_exec("/usr/local/bin/gpio -g mode 17 out"))" und "trim(@shell_exec("/usr/local/bin/gpio -g write 17 1"));" durchgeführt,
    wenn das Switch Button grau und "OFF" ist, werden dann "trim(@shell_exec("/usr/local/bin/gpio -g mode 17 out"))" und "trim(@shell_exec("/usr/local/bin/gpio -g write 17 0"));" durchgeführt.


    Danke vielmals!

    Grüße
    Lee

    Einmal editiert, zuletzt von Boyington (17. Juli 2015 um 11:59)

  • Durchführen von "shell_exec" durch Anklick von Switch Button (Checkbox), wie?? Schau mal ob du hier fündig wirst!

  • Da Checkboxes erst mit einem Formular abgeschickt werden, ist dein Problem, dass die Information dass es geändert wurde, garnicht beim Server ankommt. Das kannst du mit Hilfe von Ajax lösen.
    Man mus dazu sagen, Ajax in seiner Reinform ist ziemlich fummelig, ich würde dir jQuery dazu empfehlen.


  • Da Checkboxes erst mit einem Formular abgeschickt werden, ist dein Problem, dass die Information dass es geändert wurde, garnicht beim Server ankommt. Das kannst du mit Hilfe von Ajax lösen.
    Man mus dazu sagen, Ajax in seiner Reinform ist ziemlich fummelig, ich würde dir jQuery dazu empfehlen.

    danke dafür! Ich bin Anfänger und habe gar keine Ahnung von Ajax und jQuery, gibt es andere Möglichkeit, mit PHP/HTML zu realisieren?

  • Mit checkboxen? Nein.
    HTML sendet immer nur Daten an den Server, wenn eine Seite aufgerufen wird, das geschieht bei Links und bei Formularen.
    PHP kann nur mit an den Server gesendeten Daten arbeiten.
    Alles was darüber hinaus geht, muss mit JavaScript und ähnlichen Technologien gemacht werden.
    Also entweder Ajax (Das ist eine spezielle Technik mit JavaScript) oder die Button-Variante. Wobei du mit viel Zeit/Geduld/Frustrationstoleranz sicherlich die Buttons genauso aussehen lassen kannst, wie die checkbox die du jetzt verwendest. Dafür musst du aber ziemlich fit in CSS sein... Ich könnte das nicht!

    Wie gesagt, bei der Ajax-Variante gibt es jQuery als JavaScript-Bibliothek, welche dir viel Fummelei abnehmen kann, aber wenn du von JS noch garkeine Ahnung hast, ist es nicht ratsam eine Bibliothek dafür zu verwenden.

  • Hm wieso immer gleich so kompliziert - AJAX oder jQuery?

    Aber zunächst mal ist "trim(@shell_exec("/usr/local/bin/gpio -g mode 17 out"))" blöd... Scheint copy&pasted worden zu sein :s Also shell_exec(); Ansich finde ich schon blöd - aber dann auch stumpf bei jedem Seitenaufruf den GPIO erneut zu setzen, obwohl der zuvor ggf schon gesetzt wurde, ist ebenfalls blöd :fies:

    Nutz mal die Forumsuche nach: sudo webscript
    Dort findest du einige Beispiele bezüglich des besseren exec();

    Desweiteren findest du über die Forumsuche nach: gpio.php
    ..ein Script von mir (beitrag#20) um zum einen auf den extra Befehl 'gpio' zu verzichten, aber auch um zu prüfen ob der GPIO ggf bereits initialisiert wurde..


    Und zu deinem eigentlichen Anliegen: Javascript Eventhandler onClick

Jetzt mitmachen!

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