Problem mit PHP Toggle Button

jbaben · Aug 8th 2018

Hallo,

ich benötige für meine Anwendung (Raspberry Pi Webserver) einen sogenannten Toggle-Button um einen GPIO mit nur einem Button (Ein/Aus) schalten zu können.

Gefunden habe ich diesen Beispiel-Code:

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Toggle Button</title>
    </head>
    <body>
        <form method="post" action="toggle_button.php">
        <input type="submit" name="Update" value="<?php echo isset($_POST['Update']) ? 'Aus' : 'Ein'; ?> ">
        </form>
    </body>
</html>

Display More

Leider funktioniert dieser Code beim ersten betätigen des Button und es fehlt auch der Befehl zum steuern des GPIO.

Wäre dankbar für einen Hinweis.

MfG

Juergen B.

noisefloor · Aug 8th 2018

Hallo,

warum machst du das nicht über JavaScript/AJAX? 1. spartst du dir den Roundtrip der kompletten Seite, weil die nicht bei jedem Knopfdruck neu geladen werden muss, 2. bist du wesentlich flexibler, was die Implementierung der Server-Seite angeht.

Gruß, noisefloor

jbaben · Aug 12th 2018

Hallo,

vielen Dank für den Hinweis auf JavaScript/AJAX werde ich gerne berücksichtigen.

Allerdings bräuchte ich für den Anfang eine kleine Hilfestellung für die Steuerung eines GPIO-Pin mit JavaScript/AJAX.

Meine jetzige Lösung mit dem PHP-Code Datei "geyser.php":

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- disable caching if possible -->
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">            
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<!-- CSS to style the on/off buttons -->
<!-- Feel free to change the background-color and font-size attributes to fit your preferences -->
<style type="text/css">
  .button_on {
  backface-visibility: hidden;
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  background: #63b10c;
  border-radius: 10px;
  border: 0px solid #21c65b;
  border-width: 0px 0px 0px 0px;
  padding: 10px 20px 10px 20px;
  box-shadow: 10px 010px 00px 00px #91a298,0px 1px 3px rgba(0%,0%,0%,0.3);
    color: #131512;
  font-size: 16px;
  font-family: Arial;
  text-align:center;
  vertical-align:middle;
  font-weight: 900;
  font-style: italic;
  text-shadow: 0px -1px 0px rgba(0%,0%,0%,0.4)
  }
  .button_on > div {
    color: #999;
  font-size: 10px;
  font-family: Helvetica Neue;
  font-weight: initial;
  font-style: normal;
  text-align: center;
  margin: 0px 0px 0px 0px
  }
  .button_on > i {
    font-size: 1em;
  border-radius: 0px;
  border: 0px solid transparent;
  border-width: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  position: static
  }
  .button_on > .ld {
    font-size: initial
  }

  .button_off {
  background: #91a298;
  box-shadow: 10px 010px 00px 00px #63b10c,0px 1px 3px rgba(0%,0%,0%,0.3);
</style>
                    
<!-- direct the browser elsewhere for the favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script>function jn(text) {return confirm(text);}</script>
<title>Geyser Renosterkop R13</title>
</head>
<body>
<h2>Control Unit Geyser</h2><br>
<div id="nav"><a href="indexphp.php">Home</a></div>
<?PHP
$GPIO_GEYSER = 21;    // GPIO21 (LED Red)

function status_gpio() {
        $gpio_pin = $GLOBALS['GPIO_GEYSER'];
        $status = trim(@shell_exec("cat /sys/class/gpio/gpio$gpio_pin/value"));
        return $status;
    }
$val_gpio = status_gpio();
if(isset($_POST['status']) AND $val_gpio == '0') {
        shell_exec("/usr/local/bin/gpio -g write $GPIO_GEYSER 1");
    } else {
        shell_exec("/usr/local/bin/gpio -g write $GPIO_GEYSER 0");
    }
$val_gpio = status_gpio();
if ($val_gpio == '0') {
    echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"10\">";
        echo "<caption align=\"top\"></caption>";
        echo "<tr valign=\"top\">";
    echo "<td><form action=\"\" method=\"post\">";
    echo "<p><input type=\"submit\" class=\"button_on\" name=\"status\" value=\"GEYSER ON\" /></td>";
    echo "<td><img src=\"LED_off_1_60.png\" alt=\"LED_off_GPIO\"></p>"; 
    echo "</form></td></tr></table>";
} else {
    echo "<table border=\"0\" cellspacing=\"0\" cellpadding=\"10\">";
        echo "<caption align=\"top\"></caption>";
        echo "<tr valign=\"top\">";
    echo "<td><form action=\"\" method=\"post\">";
    echo "<p><input type=\"submit\" class=\"button_on button_off\" name=\"status\" value=\"GEYSER OFF\" /></td>";
    echo "<td><img src=\"LED_on_3_60.png\" alt=\"LED_on_GPIO\"></p>";
    echo "</form></td></tr></table>";
}     
?>
</body>
</html>

Display More

Mit einem Button "GEYSER ON/GEYSER OFF" kann ich nun den entsprechenden GPIO ansteuern. Die benötigten Einstellungen für den GPIO werden mit einem Start-Skript erledigt.

MfG

Juergen B.

Problem mit PHP Toggle Button

Tags

Users Viewing This Thread