Go Down

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

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.

Go Up