Metainformationen zur Seite
Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
|
computer:raspberrypi:projekte:blinken [2013/08/03 07:38] ristigl |
computer:raspberrypi:projekte:blinken [2018/03/16 21:11] (aktuell) |
||
|---|---|---|---|
| Zeile 4: | Zeile 4: | ||
| Eine kurze php-Datei (an.php) steuert und schaltet GPIO 23 an: | Eine kurze php-Datei (an.php) steuert und schaltet GPIO 23 an: | ||
| - | <code> | + | <code php> |
| <?php | <?php | ||
| $val = trim(@shell_exec("/usr/local/bin/gpio -g mode 23 out")); | $val = trim(@shell_exec("/usr/local/bin/gpio -g mode 23 out")); | ||
| Zeile 11: | Zeile 11: | ||
| </code> | </code> | ||
| Eine weitere kurze php-Datei (aus.php) schaltet GPIO 23 aus: | Eine weitere kurze php-Datei (aus.php) schaltet GPIO 23 aus: | ||
| - | <code> | + | <code php> |
| <?php | <?php | ||
| $val = trim(@shell_exec("/usr/local/bin/gpio -g mode 23 out")); | $val = trim(@shell_exec("/usr/local/bin/gpio -g mode 23 out")); | ||
| Zeile 26: | Zeile 26: | ||
| Dazu müsste man fürs anschalten **IP-Adresse/an.php** und fürs ausschalten **IP-Adresse/aus.php** aufrufen. | Dazu müsste man fürs anschalten **IP-Adresse/an.php** und fürs ausschalten **IP-Adresse/aus.php** aufrufen. | ||
| - | Da ein solches ansteuern über Internet zwar funktioniert aber lästig ist, lässt sich das ganze auch grafisch programmieren: (jQuery-Bibliothek herrunterladen siehe auch: [[computer:raspberrypi:projekte:matrix|Matrix]]) | + | Da ein solches Ansteuern über Internet zwar funktioniert aber lästig ist, lässt sich das ganze auch grafisch programmieren. |
| + | Zur Vereinfachung nutzen wir jQuery (jQuery-Bibliothek herrunterladen siehe auch: [[computer:raspberrypi:projekte:matrix|Matrix]]) | ||
| - | <code> | + | Das Programm nutzt die beiden vorherigen: |
| + | |||
| + | <code html> | ||
| <!DOCTYPE html> | <!DOCTYPE html> | ||
| <html> | <html> | ||
| <head> | <head> | ||
| <meta charset=utf-8 /> | <meta charset=utf-8 /> | ||
| - | <meta name="viewport" content="width=device-width"> | ||
| <script src="jquery.min.js"></script> | <script src="jquery.min.js"></script> | ||
| <style> | <style> | ||
| + | /* Gestaltung der LED */ | ||
| #a { position:absolute; padding:30px; background-color:lightgrey; border-radius:100px; } | #a { position:absolute; padding:30px; background-color:lightgrey; border-radius:100px; } | ||
| + | /* zusätzliche Gestaltung der LED im Zustand "an" */ | ||
| #a.an { background-color:yellow; } | #a.an { background-color:yellow; } | ||
| - | </style> | + | </style> |
| <script> | <script> | ||
| $(document).ready(function(){ | $(document).ready(function(){ | ||
| $("#a").click(function(){ | $("#a").click(function(){ | ||
| + | // Umschalten der "LED" | ||
| $(this).toggleClass("an"); | $(this).toggleClass("an"); | ||
| if ($(this).hasClass("an")) { | if ($(this).hasClass("an")) { | ||
| + | // Aufruf der Seite an.php | ||
| $.post("an.php",{},function(){}); | $.post("an.php",{},function(){}); | ||
| } else { | } else { | ||
| + | // Aufruf der Seite aus.php | ||
| $.post("aus.php",{},function(){}); | $.post("aus.php",{},function(){}); | ||
| } | } | ||
| Zeile 58: | Zeile 65: | ||
| </code> | </code> | ||
| + | Man kann JQuery auch direkt online beziehen: <code html> <script src="jquery.min.js"></script></code> durch <code html><script src="http://code.jquery.com/jquery-latest.js"></script></code> ersetzen. Dadurch muss man die Library nicht downloaden. | ||