ubuntuusers.de

Schönen guten morgen ☺

In meinem Wahlfach Elektrotechnik bin ich dabei mit einem Freund unser Examensprojekt zu machen. Wir wollen ein Model eines Smart Homes bauen. Unsere Idee ist verschiedene Geräte (3 Glühbirnen, 2 Motoren und einen RFID-Scanner) über die GPIO's eines Raspberry Pi zu steuern. Den ganzen Technischen Kram haben wir größtenteils schon zum laufen bekommen. Manuel über das Terminal können wir die GPIO's ein/aus schalten. Wir möchten aber gerne das die über eine Website machbar ist. Unsere idee hierfür war das wir einen Daemon schreiben der den inhalt von Dateien ausließt und dementsprechend die GPIO's schaltet. Klappt auch wunderbar.

Nun der Teil der nicht klappt. Wir möchten die Werte in den Dateien von einer Website aus verändern, per knopfdruck sozusagen. Zudem soll sich (nach möglichkeit) auch der Text der Buttons entsprechend ändern (on/off).

Wir dachten das dies einfach mit PHP zu bewältigen wäre, ist es aber nicht. Javascript? Jaein. Wir haben damit das switchen des Buttonlabes geschafft, mehr aber nicht. Wenn ich AJAX richtig verstanden habe ist das ne Sprache den vom Benutzer zum Server sprechen kann, ist das richtig? Naja, ich hätte gerne Ideen/Anregungen wie man nun von einer Website den Wert der Dateien ändern kann. Vllt hat jemand ja mit sowas schon erfahrungen?

Ich hoffe ich hab nicht zu sehr um den heißen Brei herum geredet :/

Mit freundlichen Grüßen

Red Phoenix

das müsste shcon mit php gehen ... ich würde auf dem Raspberry Pi einen Webserver einrichten, auf den man dann zugereifen kann. Man sollte nur alles schön absichern, das man da nicht einfach so drauf zugreifen kann. Damit sollte man auch auf die entsprechenden Dateien zugreifen können und deren Werte ändern. Die Rechte müssen vielleicht noch angepast werden, sodass PHP auch Schreibrechte hat.

Zu AJAX würde ich nur verlieren wollen, dass es sich dabei sehrwohl um JavaScript handelt: Wikipediaeintrag. Das muss trotzdem mit einer Art Serverseitigem Scriptung kombiniert werden, also wieder PHP.

Vielleicht wäre eine Beschreibung, was mit PHP genau nicht funktioniert hat hilfreich?

Also, (ich hab ja weiter geforscht ^^) du hast wohl schon recht, ein Teil muss in php geschrieben sein. Eben der Teil der die Werte der Dateien ändert. Aber wie rufe ich dieses phpscript über einen Button? :/ Alles was ich bis jetzt gelesen hab hieß: "Das geht nicht". Das phpscript was den inhalt ändert läuft theoretisch auch schon. Aber halt nur wenn die Seite aktualisiert wird.

Was nicht funktieniert hat ist eben das phpscript per button zu rufen und das Label des Buttons zu ändern.

Webserver läuft natürlich schon auf dem Pi ☺

ich würde mal folgenden Ansatz verfolgen:

Eine index.php mit Javascript, beinhaltet deinen Botton und eben ein wenig Layout. Das Javascript sollte über AJAX eine PHP-Datei aufrufen, die eben deinen Dateiinhalt ändert und einen Wert als Erfolgsmeldung, oder eine Fehlermeldung zurückgibt. Dieses Wikibook könnte dir beim coden helfen. Abhängig vom Rückgabewert werden bestimmte JS Funktionen ausgeführt. In Kombination mit JQuery und CSS könnte man die Erscheinung und den Inhalt des Bottons ändern. In einer Variablen sollte der Aktuelle Status, also Ein-/Ausgeschaltet gespeichert werden. Der sollte auch beim ersten Aufrufen der index.php gecheckt werden, dass man der Schalter auf ausschalten seht, wenn das System läuft und auf andersherum.

Wenn noch fragen sind, dann schieiß los 😀

Das wikibook sieht sehr vielversprechend aus ☺ Danke ☺ Ich werde erstmal ein bisschen lesen und testen und mich dann sicherlich später nochmal melden ☺

Bis hierhin schonmal vielen vielen Dank! Der Button Wechselt jetzt sein Label und die Datei wird auch manipuliert ☺ Jetzt habe ich noch das Problem von dem du bereits gesprochen hast, dass das System bereits läuft ich die Seite aktualisiere und der Button steh auf "Einschalten".

Hast du für hierfür vllt einen kleinen Gedankenstubser wie ich das lösen könnte oder wonach ich googlen muss? Ich hab nämlich irgendwie keine Idee wie ich das kurz und bündig formulieren soll.

Da die Buttonlabel in dem JS stehen kann ich ja schlecht erst was mit php abfragen und dann dort einfügen, oder doch? O.o

Red Phoenix schrieb:

Da die Buttonlabel in dem JS stehen kann ich ja schlecht erst was mit php abfragen und dann dort einfügen, oder doch? O.o

Genau so würde ich es machen. Wenn du die Seite aufrufst über die index.php würde ich dort schon den Status per PHP abfragen und ein einer Variable im JS übergeben:

<html>
<head>
<title>Hier Steht dein Title</title>
<script type="text/javascript">
currentStatus = <?php echo getStatus(); ?>;

.
.
.

function setBotton(status){
   # Hier wir die Schalter umformatiert 
}
</script>
</head>
<body>
Hier ist irgendwo der Botton unformatiert.
</body>
</html>

Der Gedankenstubser hilft hoffentlich. die Funktion setBotton muss nach dem laden noch aufgerufen werden mit 'currentStatus' als Argument.

Hab Ihr eine Webpräsentation von eurem Pojekt? Das klingt doch sehr interessant, das könnten auch andere vielleicht brauchen.

Sorry, irgendwie steh ich gerade voll aufm Schlauch. Ich versteh überhaupt nicht wie ich die festen Werte "Light On" und "Light Off" durch Variablen im JS ersetzten soll. Und dann ist mir aufgefallen das der Button nicht im JS ist sondern ganz regulär in HTML. Kannst du den Gedankenstubser vllt ein wenig erweitern? ☺

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
<head>
<title>Smart Home</title>

<script type="text/javascript">
  function togglelight(){
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }
 
   myAjax.onreadystatechange=function(){
    if (myAjax.readyState==4 && myAjax.status==200){
     document.getElementById("output").innerHTML=myAjax.responseText;
    }
   };
 
   myAjax.open("GET","togglelight.php",true);
   myAjax.send();
   
   var elem = document.getElementById("light_1");
   if (elem.value=="Light Off") elem.value = "Light On";
   else elem.value = "Light Off";
  }
 </script>
 
</head>
<body>

<input type="button" value="Light On" onClick="togglelight()" id="light_1"><br>
<p>Light is:</p><div style="width:400px; border: 1px black solid;" id="output">off</div>

</body>
</html>

Nein, wir haben für dieses Projekt keine Internetpräsenz.

Hi,

vorweg, verstehe ich das richtig:

1. Bei Klick auf den Button ändert sich schon der Wert in deiner Datei und der Button wechselt das Label

2. Du möchtest nun haben, dass die Seite wenn ich neu lade den aktuellen Wert aus der Datei lädt und den Button entsprechend belegt?

Wenn dem so ist, 2 Ansätze:

a) Packe deine HTML-Seite (mit dem Button und dem JavaScript) in eine PHP-Datei um. Dazu musst du zuerstmal eigentlich nur die Dateiendung auf .php ändern (PHP-Dateien dürfen ja auch HMTL-Code enthalten). Das wäre dann z.B. "index.php", die du im Browser aufrufst und die dir die Oberfläche baut. Mal ganz grob skizziert anhand deines HTML-Codes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php
// Datei laden und auswerten ...
$buttonLabel = "Light on"; // oder eben "Light off", je nach Dateiinhalt
?>

<!DOCTYPE html>
<html>
<head>
<title>Smart Home</title>

<script type="text/javascript">
  ...
 </script>
 
</head>
<body>

<input type="button" value="<?php echo $buttonLabel; ?>" onClick="togglelight()" id="light_1"><br>
<p>Light is:</p><div style="width:400px; border: 1px black solid;" id="output">off</div>

</body>
</html>

Im ersten PHP-Block: Datei auslesen und Variablen setzen. Unten in Zeile 38 dann die Variable an der richtigen Stelle ausgeben. Ist jetzt nicht so elegant gemacht, aber dürfte funktionieren.

b) Du lädst den aktuellen Wert aus der Datei auch per AJAX nach, und zwar immer dann, wenn die Seite geladen wurde. Dazu könntest du eine Datei ähnlich zu "togglelight.php" machen (z.B. "getlight.php" oder sowas), die einfach "Light on" oder "Light off" ausgibt.

Jetzt im JavaScript-Code noch eine weitere Funktion "getlight" spendieren, die per AJAX die neue Datei abfragt und den Text auf den Button schreibt, z.B. so:

1

document.getElementById('light_01').value = 'Light on';

Die musst du jetzt noch automatisch ausführen lassen, wenn die Seite lädt. Dazu ändere einfach den <body>-Tag wie folgt ab:

1

<body onload="getlight();">

Ich glaube Möglichkeit a kommt dem nahe, was Ruudsy vorgeschlagen hat (bzw. ist die gleiche Grundidee). Hoffe das hilft weiter?

Grüße

Hallo,

Wenn ich AJAX richtig verstanden habe ist das ne Sprache den vom Benutzer zum Server sprechen kann, ist das richtig?

Nein, AJAX ist keine Sprache. AJAX steht (übersetzt) für "Asynchrones Javascript und XML" und stellt eine Möglichkeit dar, asynchron Daten (im XML-Format) zwischen Server und Client auszutauschen.

Ansonsten, zum Problem:

Gibt es denn eine PHP-API für die GPIO-Pins? Ohne kommst du ja nicht dran... Ansonsten ist Python ja bekanntlich die empfohlene Entwicklersprache für den Pi. Es gibt auch eine ziemlich gut Doku für die Python GPIO-API. Eine Webanwendung mit Python bauen ist auch kein Problem, dafür gibt's z.B. Mikroframeworks wie Bottle oder Flask, bei denen du mit ein paar Zeilen Code eine Anwendung hast. Und ein (einfacher) Server ist auch an Bord, also keine Notwendigkeit von Apache & Co.

AJAX (und Javascript) brauchst du dann auch nicht, dass ganze lässt sich dann recht einfach mit eine paar statischen Webseiten, welche Formularbutton zum An- und Ausschalten enthalten, umsetzen ☺

Bei Fragen → fragen ☺

Gruß, noisefloor

@noisefloor

Okay, AJAX ist keine Sprache. Wie soll ich mir das denn vorstellen? Als zusatz zu Java Script? Eine Art Erweiterung? Danke für den Tip mit den Mikroframeworks. Aber wir haben uns für den "normalen" Webserver entschieden weil wir halt nurnoch die Buttons zum laufen bringen mussten.

@mandrake1988

Zeile (1-4 und) 18 in deinem Code war genau das was ich gebraucht habe! ☺ Danke ☺

@Ruudsy

Auch danke an dich natürlich, ohne deinen Link zum Wikibook wäre das hier wohl nicht so schnell vorran gekommen ☺

So jetzt an alle! 😀

Der blöde Button verrichtet jetzt seine Arbeit wie er soll ☺ Ändert den Inhalt der Datei auf dem Server und verändert dementsprechend sein Label ☺

Für die die sich ihn angucken wollen hier der unkommentierte Code.

index.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?php
$state_file="/var/www/php/light";
$state = file_get_contents($state_file);
$state=ucfirst($state);
$light_button = "Light ".$state;
?>
<!DOCTYPE html>
<html>
<head>
<title>Smart Home</title>

<script type="text/javascript">
  function togglelight(){
   if (window.XMLHttpRequest){
    myAjax = new XMLHttpRequest();
   }else{
    //Dieser Code wird als Fallback für den IE5 und IE6 benötigt, da diese die obrige Schreibweise nicht unterstützen.
    myAjax = new ActiveXObject("Microsoft.XMLHTTP");
   }
 
   myAjax.onreadystatechange=function(){
    if (myAjax.readyState==4 && myAjax.status==200){
     document.getElementById("output").innerHTML=myAjax.responseText;
    }
   };
 
   myAjax.open("GET","togglelight.php",true);
   myAjax.send();
   
   var elem = document.getElementById("light_1");
   if (elem.value=="Light Off") elem.value = "Light On";
   else elem.value = "Light Off";
  }
 </script>
 
</head>
<body>

<input type="button" value="<?php if($light_button=="Light Off\n") {echo "Light On";} else {echo "Light Off";} ?>" onClick="togglelight()" id="light_1"><br>

</body>
</html>

togglelight.php

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html>
<html>
<body>

<?php
$state_file="/var/www/php/light";
$state = file_get_contents($state_file);
if($state == "off\n") {
	$fh=fopen($state_file,"w+") or die("can't open file");
	fwrite($fh, "on\n");
	fclose($fh);
	}
else {
	$fh=fopen($state_file,"w+") or die("can't open file");
	fwrite($fh, "off\n");
	fclose($fh);
}
$state = file_get_contents($state_file);
echo $state;
?>

</body>
</html>

Hallo,

Wie soll ich mir das denn vorstellen? Als zusatz zu Java Script?

Nein, AJAX ist eine handvoll Javascript-Befehle. Kann JS ootb. Bei AJAX geht es darum, dass JS Daten im Hintergrund dynamisch nachlädt und dann auf der Webseite anzeigt. Du muss also nicht jedes Mal die Seite neu laden, sondern änderst Inhalt "in place".

Die wichtige Frage in meinem Post war aber:

Gibt es denn eine PHP-API für die GPIO-Pins?

Oder wie regelst du den Zugriff auf die Daten?

Gruß, noisefloor

Hallo noisefloor.
noisefloor schrieb:

[...] Die wichtige Frage in meinem Post war aber:

Gibt es denn eine PHP-API für die GPIO-Pins?

Oder wie regelst du den Zugriff auf die Daten? [...]

Wenn sich am ersten Beitrag nichts geändert hat -und ich den Quellecode aus togglelight.php richtig deute- lautet die Antwort:
Red Phoenix schrieb:

[...] Unsere idee hierfür war das wir einen Daemon schreiben der den inhalt von Dateien ausließt und dementsprechend die GPIO's schaltet. Klappt auch wunderbar. [...]

Gruß
Norman

Da ist man mal ein wenig Sport machen, ... oder auch ein wenig mehr, dann hat sich das Problem schon gelöst. Sehr schön!!!

Hallo,

NoKurth schrieb:

Hallo noisefloor.
noisefloor schrieb:

[...] Die wichtige Frage in meinem Post war aber:

Gibt es denn eine PHP-API für die GPIO-Pins?

Oder wie regelst du den Zugriff auf die Daten? [...]

Wenn sich am ersten Beitrag nichts geändert hat -und ich den Quellecode aus togglelight.php richtig deute- lautet die Antwort:
Red Phoenix schrieb:

[...] Unsere idee hierfür war das wir einen Daemon schreiben der den inhalt von Dateien ausließt und dementsprechend die GPIO's schaltet. Klappt auch wunderbar. [...]

Ok, dann gibt es scheinbar keine PHP-API 😉

@Red Phoenix: Ist die Webseite eigentlich nur Mittel zum Zweck, also um eure Arbeit "rund" zu machen? Hintergrund der Frage ist, dass du ab zwei (2) eingeloggten Benutzern eine potentielle Race-Condition mit dem aktuellen Konzept hast...

Beispiel: Nutzer A geht auf die Seite, sieht "Lampe aus" und geht sich einen Kaffee holen. In der Zeit geht Nutzer B auf die Seite und schaltet die Lampe an. Somit sieht Nutzer A, wenn er zurück ist, den falschen Status. Das könnte man umgehen, indem man in sehr kurzer Abständen die Seite aktualisiert - was aber unschön ist und unnötig Traffic erzeugt.

Oder es ist die egal 😉

Gruß, noisefloor