Hallo liebe Community,
mit plan ist es GPIO Pins über ein Webinterface zu steuern. Wie die entsprechende php Befehle sind, weiß ich schon
PHP
<?php
//Pin als Ausgang definieren
$val = trim(@shell_exec("/usr/local/bin/gpio -g mode 2 out"));
if(isset($_GET['led'])) {
//LED ein
if($_GET['led'] == 'ein') {
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 2 1"));
}
//LED aus
elseif($_GET['led'] == 'aus') {
$val = trim(@shell_exec("/usr/local/bin/gpio -g write 2 0"));
}
}
?>
[/php]
Nun will ich aber nicht zwei Buttons haben die mit an und aus beschriftet sind, sondern einen Toggle button oder auch flipswitcher genannt. Dafür habe ich auch schon ein script von proto.io. Nun habe ich alles eingefügt weiß nur nicht wie ich dem Toggle button eine Aktion zuweise. Also wenn er auf on ist, dass er den php code zum aktiveren des Pins ausführt und wenn er off steht den zum deaktiveren des GPIO Pins. Könnt ihr mir da weiter helfen?
Hier der HTML-Code von dem Toggle button
[code]
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" tabindex="1">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Alles anzeigen
Und hier der CSS-Code
Code
/*Flipswitch ON/OFF*/
.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: #278DEF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
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;
}
/*Flipswitch ON/OFF end*/
Alles anzeigen