Button auf Webseite soll digitalen Port schalten. Hilfe

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:

#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 "\nTürschloss Web-Server\n"
#define HTML_BOTTOM "\n"
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("");

/* myClient.print("tuer oeffnen<onklick=>KLICKOK");*/
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;">");*
  • }*
    }

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;">");
    _
    * }*
    }
    [/quote]
    Kann mir jemand weiter helfen ?
    Gruß,
    Tobi

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

Na klar können wir das, aber warum das Rad neu erfinden? :slight_smile:
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 :slight_smile:
Dein Ansatz gibt nur die Entsprechenden Stati der Pins aus und eine Steuerung ist noch garnicht implementiert.

Gruß,
trib

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 -Tag in html.
(http://de.selfhtml.org/html/formulare/definieren.htm). Dann gibt es einen Button der das Formular absendet . Die Daten werden dann als "Anhang" an die URL mitgesendet. Die musst du dann mit dem Arduino auslesen und entsprechend darauf reagieren.

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

Tobias93:
@ 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

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

#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
<input type=submit value=submit></form>");
          else
          client.println("<form method=get name=TUER><input type=checkbox name=T value=1>Tueroeffner
<input type=submit value=submit></form>");      
          client.println("
");     
          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();
            }
          }
        }
      }
 }

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

#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
<input type=submit value=submit></form>");
          else
  myClient.print("<form method=get name=TUER><input type=checkbox name=T value=1>Tueroeffner
<input type=submit value=submit></form>");      
                 myClient.print("
");     
                   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.

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

Kleine Ergänzung, auch wenn es funktioniert. Die Meta-Tags gehören in den Header, nicht in den Body einer HTML-Datei.
Siehe hier: SELFHTML-Wiki
Auch wenn es in den meisten Browsern funktioniert, ist es nicht gerantiert, das es immer klappt.

@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

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.

hey jungs,

keine Streiterreien in meinem Topic :slight_smile:

Wie würde der geänderte Code aussehen?

Lg,

Tobi

@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

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.

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

das man dann nicht extra das Programm wider neu einspielen muss?

Muss man nicht.

er also keine Spannung bekommt sind die Webserver Daten weg

Welche Daten sind weg ???

Der webserver startet natürlich von vorn, wie beim Reset.
Dass ein Client connected war, und welchen Button du im Browser vorher gedrückt hattest, ist klar weg.

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

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.

Entschuldigung, aber DEINE Aussagen bestätigen ja wohl DEINE eigenartige Verhaltensformen. Ich wüßte nicht, das ich mich für meinen Kommentar rechtfertigen müßte, zumal dieser sich gar nicht auf Dich bezog.
Daher der Satz "Kleine Ergänzung" ... und eben nicht "... das ist falsch ..."
Es geht auch nicht darum etwas "noch perfekter" zu machen, sondern es eben "korrekt" zu machen. Gerade solche Ungenauigkeiten sind die schlimmsten Fehler die mach suchen kann. Weil es eben in 4 von 5 Browsern funktioniert, aber in genau einem nicht.

Zum Technischen: HTML ist eine Auszeichnugssprache und als solche klar definiert (www.w3.org). Die Struktur hat einen Sinn, und nur weil etwas "irgendwie" funktioniert, bedeutet das eben NICHT das man davon ausgehen kann das es immer so ist. Es geht dabei mehr ums Prinzip. Ich kann auch Bauteile außerhalb ihrer Spezifikation betreiben, das wird sicher auch irgendwie funktionieren, muss es aber eben nicht.
Erklär mal Deiner Werkstatt, das es Dein Auto noch nie interessiert hat, das die Ölwarnlampe geleuchtet hat, Du bist immer noch 1000km gefahren, ehe das Öl gewechselt / aufgefüllt wurde. Mal sehen was die dazu sagen, wenn die Karre eben doch verreckt. Und bitte jetzt keine Kommentare wie ein Browser sei kein Auto. Das weiss ich selbst.

Und bevor hier jetzt ein Flamewar ausbricht, das ist mein letzter Kommentar in diesem Thread. Wer ein Problem mit meinen Kommentaren hat, kann der gerne per IM klären.
Danke.

@ Michael

Welche Daten sind weg ???

Der webserver startet natürlich von vorn, wie beim Reset.
Dass ein Client connected war, und welchen Button du im Browser vorher gedrückt hattest, ist klar weg.

Wenn ich den Arduino von der Spannungsquelle trenne und danach wider mit Spannung versorge und im Browser die IP Adresse eingebe um die Oberfläche zu öffnen bekomme ich eine Fehlermeldung: "Webseite kann nicht geöffnet werden". Meine Frage ist wie man diesen Fehler verhindern kann.

Tobias93:
Wenn ich den Arduino von der Spannungsquelle trenne und danach wider mit Spannung versorge und im Browser die IP Adresse eingebe um die Oberfläche zu öffnen bekomme ich eine Fehlermeldung: "Webseite kann nicht geöffnet werden". Meine Frage ist wie man diesen Fehler verhindern kann.

Und den sketch neu aufspielen hilft ?! -- Das ist sicher nicht die vorgesehene Betriebsweise :wink:

Hilft denn statt dessen auch, den Reset-Taster zu drücken?
Dann, rate ich mal, braucht das Ethernet-Shield bei Spannungswiederkehr zu lange für eine Initialiserung ??
Ein kleines delay in setup vor Ethernet.begin() ???

Das Problem müssten aber andere auch schon mal gehabt haben ...

da das ganze jetzt soweit schonmal funktioniert steht nun die grafische Gestaltung an.

Ich dachte das ich auf dem Webserver eine kleine Grafik darstelle.

Fragen hierzu wären nun:

  1. Reicht der Speicherplatz hierzu aus (es ist keine externe Speicherkarte vorhanden)

1.1 Wie viel Speicher dürfte die Grafik maximal wegnehmen

  1. Wie binde ich eine Grafik in meinen Webserver ein (Webserver läuft nur lokal)

Kann mir hierzu jemand helfen?

Gruß,
Tobi