Go Down

Topic: Button auf Webseite soll digitalen Port schalten. Hilfe (Read 4027 times) previous topic - next topic

Tobias93

Hallo,

ich möchte durch Drücken eines Buttons auf einem Webserver einen digitalen Port des Arduinos schalten. Ich habe ein Ethernetshield und einen Arduino Uno miteinander verbunden. Folgenden Sketch habe ich soweit angepasst, nur verstehe ich nicht wie ich eine Aktion bei drücken des Buttons (z.B. digitalen Port schalten) erreichen kann:

Quote

#include <SPI.h>
#include <Ethernet.h>
byte MACAddress[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED}; // MACAdresse
byte IPAddress[] = {192, 168, 178, 59};                    // IP-Adresse
int const HTTPPORT = 80;                                  // HTTP-Port 80 (Standardport)
String barColor[] = {"FFB90F", "FFB90F", "00ffff", "ffff00", "ff00ff", "550055"}; // RGB-Farben für Color-Bars
#define HTML_TOP "<html>\n<head><title>Türschloss Web-Server</title></head>\n<body>"
#define HTML_BOTTOM "</body>\n</html>"
EthernetServer myServer(HTTPPORT); // Web-Server auf angegebenen Port starten
void setup(){
  Ethernet.begin(MACAddress, IPAddress); // Ethernet initialisieren
  myServer.begin(); // Server starten
}

void loop(){
  EthernetClient myClient = myServer.available();
  if(myClient){
    myClient.println("HTTP/1.1 200 OK");
    myClient.println("Content-Type: text/html");
    myClient.println();
    myClient.println(HTML_TOP); // HTML-Top
        showValuesAnalog(myClient); // HTML-Content
    showValuesDigital(myClient);
    myClient.println(HTML_BOTTOM); // HTML-Bottom
  }
  delay(1); // Kurze Pause für Web-Browser
 
  myClient.print("<input type=button value='tuer oeffnen' onclick='hier muss doch die Aktion drin stehen oder???' />");
 
/* myClient.print("<button type=button>tuer oeffnen<onklick=>KLICKOK</button>");*/
  myClient.stop(); // Client-Verbindung schließen
 
}

void showValuesAnalog(EthernetClient &myClient){
  for(int i = 0; i < 6; i++){
    myClient.print("Analog Pin ");
    myClient.print(i);
    myClient.print(": ");
    myClient.print(analogRead(i));
    myClient.print("<div style=\"height: 50px; background-color: #");
    myClient.print(barColor);
    myClient.print("; width:");
    myClient.print(analogRead(i));
    myClient.println("px; border: 20px solid;\"></div>");
  }
}
 
void showValuesDigital(EthernetClient &myClient){
  for(int i = 2; i < 6; i++){
    myClient.print("Digital Pin ");
    myClient.print(i);
    myClient.print(": ");
    myClient.print(digitalRead(i));
    myClient.print("<div style=\"height: 50px; background-color: #");
    myClient.print(barColor);
    myClient.print("; width:");
    myClient.print(digitalRead(i)*100);
    myClient.println("px; border: 2px solid;\"></div>");
  }
}




Kann mir jemand weiter helfen ?

Gruß,

Tobi
Nobody is perfect but - impossible is nothing

bytzmaster

Ich glaube da fehlt noch der Eintrag für die Subnetzmaske.
Ggf noch den Gatewayserver falls du übers internet drauf zugreifen willst.

Trib

Na klar können wir das, aber warum das Rad neu erfinden?  :)
Die Suchfunktion spuckt z.B. folgende Links aus:
   
Arduino Werte an Server übertragen
Webserver einen Korrekturwert übermitteln
WebServer mit Html-Seiten von der SD Karte
Wie kann man den Arduino am einfachsten über eine Oberfläche steuern???
Pin-Steuerung aus Webseite
uvm.

Je nach Anwendungszweck kannst du dort die beste Lösung herauspicken :)
Dein Ansatz gibt nur die Entsprechenden Stati der Pins aus und eine Steuerung ist noch garnicht implementiert.

Gruß,
trib

circuit99

Zum methodischen vorgehen:

Der Client (Browser) sendet eine anfrage an den Arduino. Der Antwortet mit einer html-Seite auf der etwas angeklickt oder eingegeben werden kann. Das geschieht über den <form></form>-Tag in html.
(http://de.selfhtml.org/html/formulare/definieren.htm). Dann gibt es einen Button der das Formular absendet <input type="button">. Die Daten werden dann als "Anhang" an die URL mitgesendet. Die musst du dann mit dem Arduino auslesen und entsprechend darauf reagieren.

Tobias93

Hy,

@ Trib: Ich finde da ich neu in der Materie bin noch keinen Ansatz für die Implementierung einer Steuerung. Kannst du mir helfen hierbei einen Ansatz zu finden?

Der Arduino soll nicht über das Internet erreicht werden, nur über LAN.

Danke schonmal für die Rückmeldungen,

Tobi
Nobody is perfect but - impossible is nothing

Trib


@ Trib: Ich finde da ich neu in der Materie bin noch keinen Ansatz für die Implementierung einer Steuerung. Kannst du mir helfen hierbei einen Ansatz zu finden?


Hi Tobias93,

wie circuit99 bereits schreibt, liegen die Grundlagen in HTML. Man definiert ein Formular, welches Daten per POST oder GET versenden kann. Damit baust du dir also den Button zum schalten und hinterlegst diesem einen Wert, um welchen Pin es sich handelt.
Der Trick besteht nun darin, dass dieses Formular dynamsich von Deinem Arduino erstellt wird und z.b. bei aktivierten Digitalpin einen Button mit "Aus" und bei deaktiviertem Pin mit "An" ausgibt.
Dein angefügtes Script zeigt zwar den Zustand der PINS, beinhaltet aber kein Formular zur Steuerung.
An dieser Stelle nochmal der Verweis zu circuit99´s Link.

Der nächste Punkt wäre dann im Arduino auf dieses WebFormular zu reagieren.
Dazu muss man den String auslesen, der an den Client übermittelt wird und entsprechend die Pins an oder aus schalten.

Der letzte von mir gepostete Link enthält eigentlich alle nötigen Informationen und auch fertigen Code.
Funkschalter in Webserver einbinden

Gruß
trib

COOL

#6
Nov 26, 2012, 06:58 pm Last Edit: Nov 27, 2012, 11:07 am by COOL Reason: 1
Hallo Tobi,

hilft dir das weiter ? Du kannst das Script mit bei dir einbinden und kannst dann über Buttons etwas schalten (z.B. Türöffner). Das geschieht entweder durch Betätigung des Buttons, oder wenn du am Link
/?T=1 mit dranhängst - für OFFEN oder /?T=0  für ZU.
Du kannst es so ausprobieren. Viel Pass beim Werkeln.

Gruß Gerd

Code: [Select]
#include <SPI.h>
#include <Ethernet.h>
#include <Server.h>
#include <Client.h>
#include <Udp.h>
byte MACAddress[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED}; // MACAdresse
byte IPAddress[] = {192, 168, 178, 59};  // IP-Adresse
EthernetServer server(80);
#define HTML_TOP "<html>\n<head><title>Türschloss Web-Server</title></head>\n<body>"
#define HTML_BOTTOM "</body>\n</html>"
int TuerPin = 4;  // Tür pin
String readString = String(30);
boolean TUERON = false; //status flag
//EthernetServer myServer(HTTPPORT); // Web-Server auf angegebenen Port starten
void setup(){
  Ethernet.begin(MACAddress, IPAddress); // Ethernet initialisieren
  //Set pin 4 to output
  pinMode(TuerPin, OUTPUT);

}

void loop(){
EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
   if (client.available()) {
    char c = client.read();
     //read char by char HTTP request
    if (readString.length() < 100)
      {         
        readString += c;
      }           
        Serial.print(c);
         
        if (c == '\n') {

          if (readString.indexOf("?") <0)
          {

          }
          else
         
        if(readString.indexOf("T=1") >0)
           {
             //Türöffner ON
             digitalWrite(TuerPin, HIGH);    //Tür auf
             TUERON = true;
           }
           else{
             //Tüeröffner  OFF
             digitalWrite(TuerPin, LOW);    //Tür zu
             TUERON = false;             
           }
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          //Hintergrund festlegen
          client.print("<body style=background-color:white>");
          client.println("<hr />");         
          if (TUERON)
          client.println("<form method=get name=TUER><input type=checkbox name=T value=1 CHECKED>Tueroeffner<br><input type=submit value=submit></form>");
          else
          client.println("<form method=get name=TUER><input type=checkbox name=T value=1>Tueroeffner<br><input type=submit value=submit></form>");     
          client.println("<br />");     
          client.print("<font size='5'>TUER AUF/ZU ");
          if (TUERON)
              client.println("<font color='blue' size='5'>ist AUF");
          else
              client.println("<font color='red' size='5'>ist ZU");     
          client.println("<hr />");
          client.println("</body></html>");
          readString="";
          client.stop();
            }
          }
        }
      }
}
       

COOL

#7
Nov 27, 2012, 11:03 am Last Edit: Nov 28, 2012, 04:24 pm by COOL Reason: 1
Hallo Tobi,

ich habe mal das Beispiel auf deine Webpage angepasst. Ich schätze, dass du es so für dich ändern kannst.

Gruß Gerd

Code: [Select]
#include <SPI.h>
#include <Ethernet.h>
byte MACAddress[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED}; // MACAdresse
byte IPAddress[] = {192, 168, 178, 59};                    // IP-Adresse
int const HTTPPORT = 80;                                  // HTTP-Port 80 (Standardport)

#define HTML_BOTTOM "</body>\n</html>"
String readString = String(30);
boolean TUERON = false;
int TuerPin = 4;  // Tür pin
EthernetServer myServer(HTTPPORT); // Web-Server auf angegebenen Port starten

void setup(){
  Ethernet.begin(MACAddress, IPAddress); // Ethernet initialisieren
  pinMode(TuerPin, OUTPUT);
  myServer.begin(); // Server starten
}

void loop(){
  EthernetClient myClient = myServer.available();
  if (myClient) {
    while (myClient.connected()) {
   if (myClient.available()) {
    char c = myClient.read();
    if (readString.length() < 100)
      {         
        readString += c;
      }           
        Serial.print(c);
         
        if (c == '\n') {

          if (readString.indexOf("?") <0)
          {

          }
          else
         
        if(readString.indexOf("T=1") >0)
           {
             //Türöffner ON
             digitalWrite(TuerPin, HIGH);    //Tür auf
             TUERON = true;
           }
           else{
             //Tüeröffner  OFF
             digitalWrite(TuerPin, LOW);    //Tür zu
             TUERON = false;             
           }
          myClient.println("HTTP/1.1 200 OK");
          myClient.println("Content-Type: text/html");
          myClient.println();               
          myClient.print("<body style=background-color:white>");
          myClient.println("<font color='red'><h1>Tuerschloss Web-Server</font></h1>");
          //alle 30sec wird ein automatischer Refresh gemacht
          myClient.println("<meta http-equiv='refresh' content='30'>");
          myClient.println("<hr />");
          myClient.println("<hr />");
           
  for(int i = 0; i < 6; i++){
    myClient.print("Analog Pin ");
    myClient.print(i);
    myClient.print(": ");
    myClient.print(analogRead(i));
    myClient.print("<div style=\"height: 40px; background-color: #FFB90F");
    myClient.print("; width:");
    myClient.print(analogRead(i));
    myClient.println("px; border: 1px solid;\"></div>");
  }
 
    for(int i = 2; i < 6; i++){
    myClient.print("Digital Pin ");
    myClient.print(i);
    myClient.print(": ");
    myClient.print(digitalRead(i));
    myClient.print("<div style=\"height: 40px; background-color: #ff00ff");
    myClient.print("; width:");
    myClient.print(digitalRead(i)*100);
    myClient.println("px; border: 1px solid;\"></div>");
   
  }

  delay(1); // Kurze Pause für Web-Browser
 
          myClient.print("<hr />");         
          if (TUERON)
  myClient.print("<form method=get name=TUER><input type=checkbox name=T value=1 CHECKED>Tueroeffner<br><input type=submit value=submit></form>");
          else
  myClient.print("<form method=get name=TUER><input type=checkbox name=T value=1>Tueroeffner<br><input type=submit value=submit></form>");     
                 myClient.print("<br />");     
                   myClient.print("<font size='5'>TUER  ");
          if (TUERON)
              myClient.print("<font color='blue' size='5'>ist AUF");
          else
              myClient.print("<font color='red' size='5'>ist ZU");
              readString="";
  TUERON = false; //Zusatz, sonst ist Schalten im Firefox nicht möglich !
  myClient.stop(); // Client-Verbindung schließen
 
        }
       }
    }
  }
}



Habe noch einen Nachtrag gemacht - alle 30 sec werden automatisch die Werte angepasst.

Tobias93

Hallo Gerd,

tausend Dank für den Code das ist genau das was ich gebraucht habe, es funktioniert einwandfrei !!


Vielen Dank für die Bemühungen,

Tobi
Nobody is perfect but - impossible is nothing

mkl0815

Kleine Ergänzung, auch wenn es funktioniert. Die Meta-Tags gehören in den Header, nicht in den Body einer HTML-Datei.
Siehe hier: http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=refresh
Auch wenn es in den meisten Browsern funktioniert, ist es nicht gerantiert, das es immer klappt.

COOL

@mkl0815,

du bist wohl nicht glücklich, wenn du nicht deinen Kommentar dazu geben kannst. Ich kann dich aber beruhigen, wir haben hier keinen Bereich, der als "head" festgelegt wurde
und auch eine Suchmaschine, die sich vielleicht für Meta-Tags interessieren könnte, gibt es hier auch nicht.
Browser machen sich generell nichts daraus, ggf wird es nicht im Cache übernommen, aber wir wollen ja nun auch keinen HTML-Wettbewerb gewinnen.

Gruß Gerd

MaFu

Das "Refresh" Tag ist ja wohl schon für den Browser relevant (sonst könnte man es ja gleich weglassen  ;)).
Und somit kann es schon passieren, dass es mit einem Browser nicht funktioniert weil der es im Header erwartet und ihn der Eintrag im Body nicht mehr interessiert. Natürlich ist es ggw. kein Problem, es kann aber ev. irgendwann zu einem Problem werden. Und wenn man es gleich richtig macht, lässt sich das vermeiden.
Und bloß weil jemand einen gutgemeinten Hinweis gibt, muss man nicht pampig werden.
_______
Manfred

Tobias93

hey jungs,

keine Streiterreien in meinem Topic :-)

Wie würde der geänderte Code aussehen?

Lg,

Tobi
Nobody is perfect but - impossible is nothing

COOL

#13
Nov 27, 2012, 05:03 pm Last Edit: Nov 27, 2012, 05:06 pm by COOL Reason: 1
@MaFu,
ich bitte doch um eine gemässigte Wortwahl. Hier ist niemand "pampig"
Es gibt hier schon ein paar eigenartige Verhaltensformen, die ich nicht teilen kann. Sich nicht am Tread zu beteiligen ist eine Sache,  aber später noch seinen Senf dazu geben, wie es noch perfekter sein könnte, ist etwas anderes.
Sicherlich gibt es bei den meisten Hinweisen oder Hilfen andere und sicherlich auch bessere Wege und Möglichkeiten, aber was soll das. Brauch ihr das, um euch selbst auf die Schulter zu klopfen.
Deine Aussage ist genau so nichts sagend und blöd zugleich
Quote
Natürlich ist es ggw. kein Problem, es kann aber ev. irgendwann zu einem Problem werden[/quote]

Was ist das denn für eine Aussage. Ich schätze, wenn jemand mit einem Ergebnis zufrieden ist, dass man dann nicht mit dem "Besserwisser-Buch" hinterher schmeissen sollte, was und wie man etwas noch perfekter machen könnte.

Tobias93

noch ein kleiner Anhang,

mir ist aufgefallen das wenn ich den Arduino vom USB Port trenne, er also keine Spannung bekommt sind die Webserver Daten weg. Ich habe in anderen Topics gelesen das man dagegen mit einer SD Karte steuern kann. Ich habe auch gesehen das mein Ethernetshield einen solchen slot hat. Kann man das machen das man das Programm auf der SD Karte ablegt und somit auch wenn mal Stromausfall war, das man dann nicht extra das Programm wider neu einspielen muss?


Grüße,

Tobi
Nobody is perfect but - impossible is nothing

Go Up