INFO: Dieses Forum nutzt Cookies...
Cookies sind für den Betrieb des Forums unverzichtbar. Mit der Nutzung des Forums erklärst Du dich damit einverstanden, dass wir Cookies verwenden.

Es wird in jedem Fall ein Cookie gesetzt um diesen Hinweis nicht mehr zu erhalten. Desweiteren setzen wir Google Adsense und Google Analytics ein.

Antwort schreiben 
 
Themabewertung:
  • 0 Bewertungen - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Daten an Webserver
05.09.2014, 08:10
Beitrag #1
Daten an Webserver
Hallo zusammen,

ich bin gerade am herumexperiementieren mit einem Arduino und Webserver.
Ich bevorzuge die Variante mit der SD Karte, wie in diesem Tutorial (http://fluuux.de/2013/03/arduino-als-web...te-laden/)
Das ganze läuft auch soweit. Nur würde ich gerne String-Variablen an eine bestimmte Position auf der HTML Seite übergeben. Nach einiger rum suchen im Netz bin ich nur auf die Lösung über php-Dateien gekommen. Diese benötigen dann wieder einen Server, der php unterstütz. Gibts vielleicht hierfür eine andere Lösung das ich in meinem HTML code eine Variable deklariere und das diese dann den String aus liest, was ich vom Arduino sende??

Gruß
Steffen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
05.09.2014, 15:28 (Dieser Beitrag wurde zuletzt bearbeitet: 09.09.2014 04:55 von Corvus.)
Beitrag #2
RE: Daten an Webserver
Habe den Beispiel-Code mal etwas modifiziert,
Zitat:#if ARDUINO > 18
#include <SPI.h> // Für Arduino Version größer als 0018
#endif
#include <Ethernet.h>
#include <TextFinder.h>
#include <SD.h>
 
byte mac[] = { 0x5A, 0xA2, 0xDA, 0x0D, 0x56, 0x7A }; // MAC-Adresse des Ethernet-Shield
byte ip[] = { 192, 168, 2, 102 }; // IP zum aufrufen des Webservers
byte sdPin = 4; // Pin der SD-Karte
 
char aString[] = "Inhalt der Variable $a";
char bString[] = "Inhalt der Variable $b";
char cString[] = "Inhalt der Variable $c";

 
EthernetServer server(80); // Server port
 
File webFile;
 
void setup()
{  
  Ethernet.begin(mac, ip); // Client starten
  server.begin(); // Server starten
  Serial.begin(9600);
  Serial.println("ARDUINO - STEUERUNG");
 
  Serial.println("Initialisiere SD-Karte...");
  if (!SD.begin(sdPin))
  {
    Serial.println(" - Initialisierung der SD-Karte fehlgeschlagen!");
    return;
  }
  Serial.println(" - SD-Karte erfolgreich initialisiert.");
 
  if (!SD.exists("index.htm"))
  {
    Serial.println(" - Datei (index.htm) wurde nicht gefunden!");
    return;
  }
  Serial.println(" - Datei (index.htm) wurde gefunden.");
 
  Serial.println();
  Serial.println("Verbraucher schalten");
}
 
void loop()
{
  EthernetClient client = server.available(); // Auf Anfrage warten
 
  if(client)
  {
    /*****************************************
      Ausgänge über das Webformular steuern  *
    *****************************************/
    TextFinder finder(client);
 
    if(finder.find("GET"))
    {
      while(finder.findUntil("pin", "\n\r"))
      {
        char typ = client.read();
        int pin = finder.getValue();
        int val = finder.getValue();
 
        if(typ == 'D')
        {
          pinMode(pin, OUTPUT);
          digitalWrite(pin, val);
          Serial.print(" - D"+String(pin));
        }
        else if(typ == 'A')
        {
          analogWrite(pin, val);
          Serial.print(" - A"+String(pin));
        }
        else Serial.print(" - Falscher Typ");
 
        if(val==1) Serial.println(" ein"); else Serial.println(" aus");
      }
    }
 
    /************************
      Webformular anzeigen  *
    ************************/
    boolean current_line_is_blank = true; // eine HTTP-Anfrage endet mit einer Leerzeile und einer neuen Zeile
 
    while (client.connected())
    {
      if (client.available()) // Wenn Daten vom Server empfangen werden
      {
        char c = client.read(); // empfangene Zeichen einlesen
        if (c == '\n' && current_line_is_blank) // wenn neue Zeile und Leerzeile empfangen
        { // Standard HTTP Header senden
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println();
 
          // Website von SD-Karte laden
          webFile = SD.open("index.htm"); // Website laden
          if (webFile)
          {
            while(webFile.available())
            { 
              byte c = webFile.read();
              if ( c == '$' )
              {
                c = webFile.read();
                switch ©
                {
                  case '$':
                    client.write('$');
                    break;
                  case 'a':
                    for (int i = 0; i < sizeof(aString) - 1; i++)
                    {
                      client.write(aString[i]);
                    }
                    break;
                  case 'b':
                    for (int i = 0; i < sizeof(bString) - 1; i++)
                    {
                      client.write(bString[i]);
                    }
                    break;
                  case 'c':
                    for (int i = 0; i < sizeof(cString) - 1; i++)
                    {
                      client.write(cString[i]);
                    }
                    break;
                  default:
                    Serial.print("Undefinierte Variable: $");
                    Serial.println©;
                }
                  
              }  
              else
              {
                client.write©; // Website an Client schicken
              }
            }
            webFile.close();
          }
          break;
        }
        if (c == '\n')
        {
          current_line_is_blank = true;
        } 
        else if (c != '\r')
        {
          current_line_is_blank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }
}
Dabei wird das Dollarzeichen ("$") als Escape-Character benutzt. Soll ein Dollarzeichen in der index.htm nicht substituiert werden, so muss es in dieser doppelt geschrieben werden("$$"). Schreibt man bsw. die Zeichenfolge "$a" in die index.htm werden sie vom Webserver durch den Inhalt von aString ersetzt.
(Der Code ist ungetestet und optimierungsbedürftig, aber das Prinzip sollte ersichtlich sein.)

gruß lorenz
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
05.09.2014, 16:34
Beitrag #3
RE: Daten an Webserver
Hallo Lorenz,

super es hat funktioniert. Nur hab ich in der Case Abfrage bei dem Befehl vom client.print die hochgestellten Striche in der Klammer rausgenommen, damit es ging.
So langsam versteh ich den HTML Schei** Big GrinBig GrinBig Grin

Ich habe mal mit if abfragen im html code rumgespielt. Da muss man ja ne Funktion machen. Aber irgendwie geht das nicht. Das man z.b. die Variable auf 1 oder 0 abträgt und dann dementsprechend "an" oder "aus" schreibt.
Hat hierfür vielleicht jemand noch eine Idee??

Hier habe ich den funktionierenden Arduino code, welchen Lorenz angepasst hat mit der Änderung von mir damit es geht.

Code:
#if ARDUINO > 18
#include <SPI.h> // Für Arduino Version größer als 0018
#endif
#include <Ethernet.h>
#include <TextFinder.h>
#include <SD.h>

byte mac[] = { 0x5A, 0xA2, 0xDA, 0x0D, 0x56, 0x7A }; // MAC-Adresse des Ethernet-Shield
byte ip[]  = { 192, 168, 2, 102 };                   // IP zum aufrufen des Webservers
byte sdPin = 4;                                      // Pin der SD-Karte

char aString[] = "Inhalt der Variable $a";  //"Inhalt der Variable $a";
char bString[] = "Inhalt der Variable $b";
char cString[] = "Inhalt der Variable $c";


EthernetServer server(80);                           // Server port

File webFile;

void setup()
{  
  Ethernet.begin(mac, ip); // Client starten
  server.begin();          // Server starten
  Serial.begin(9600);
  Serial.println("ARDUINO - STEUERUNG");

  Serial.println("Initialisiere SD-Karte...");
  if (!SD.begin(sdPin))
  {
    Serial.println(" - Initialisierung der SD-Karte fehlgeschlagen!");
    return;
  }
  Serial.println(" - SD-Karte erfolgreich initialisiert.");

  if (!SD.exists("index.htm"))
  {
    Serial.println(" - Datei (index.htm) wurde nicht gefunden!");
    return;
  }
  Serial.println(" - Datei (index.htm) wurde gefunden.");

  Serial.println();
  Serial.println("Verbraucher schalten");
}

void loop()
{
  EthernetClient client = server.available(); // Auf Anfrage warten

  if(client)
  {
    /*****************************************
      Ausgänge über das Webformular steuern  *
    *****************************************/
    TextFinder finder(client);

    if(finder.find("GET"))
    {
      while(finder.findUntil("pin", "\n\r"))
      {
        char typ = client.read();
        int  pin = finder.getValue();
        int  val = finder.getValue();

        if(typ == 'D')
        {
          pinMode(pin, OUTPUT);
          digitalWrite(pin, val);
          Serial.print(" - D"+String(pin));
        }
        else if(typ == 'A')
        {
          analogWrite(pin, val);
          Serial.print(" - A"+String(pin));
        }
        else Serial.print(" - Falscher Typ");

        if(val==1) Serial.println(" ein"); else Serial.println(" aus");
      }
    }

    /************************
      Webformular anzeigen  *
    ************************/
    boolean current_line_is_blank = true;       // eine HTTP-Anfrage endet mit einer Leerzeile und einer neuen Zeile

    while (client.connected())
    {
      if (client.available())                   // Wenn Daten vom Server empfangen werden
      {
        char c = client.read();                 // empfangene Zeichen einlesen
        if (c == '\n' && current_line_is_blank) // wenn neue Zeile und Leerzeile empfangen
        { // Standard HTTP Header senden
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");
          client.println();

          // Website von SD-Karte laden
          webFile = SD.open("index.htm");  // Website laden
          if (webFile)
          {
            while(webFile.available())
            {
              byte c = webFile.read();
              if ( c == '$' )                 // [/color]
              {
                c = webFile.read();
                switch (c)
                {
                  case '$':
                    client.write('$');
                    break;
                  case 'a':
                    for (int i = 0; i < sizeof(aString) - 1; i++)
                    {
                      client.write(aString[i]);
                    }
                    break;  
                  case 'b':
                    for (int i = 0; i < sizeof(bString) - 1; i++)
                    {
                      client.write(bString[i]);
                    }
                    break;
                  case 'c':
                    for (int i = 0; i < sizeof(cString) - 1; i++)
                    {
                      client.write(cString[i]);
                    }
                    break;
                  default:
                    Serial.print("Undefinierte Variable: $");
                    Serial.println(c);
                }
                  
              }  
              else
              {
                client.write(c); // Website an Client schicken
              }
            }
            webFile.close();
          }
          break;
        }
        if (c == '\n')
        {
          current_line_is_blank = true;
        }
        else if (c != '\r')
        {
          current_line_is_blank = false;
        }
      }
    }
    delay(1);
    client.stop();
  }
}

und hier mal mein html code zum Testen
Code:
<!DOCTYPE html>
<head>
<style type="text/css">

#Hintergrund{
position:relative;
left: -7px;
top: -7px;
width: auto;
height: 950px;
border-radius: 0px;
background-color: rgb(81,81,81);
}

#RahmenVariable1{
position:relative;
left: 100px;
top: 250px;
height: 40px;
width: 500px;
border-bottom-color:rgb(0,0,0);
border-width:2px;
border-style:solid;
border-radius: 0px;
background-color: rgb(230,230,230);
}


.TFeldVariable1 {
position: absolute;
left: 10px;
top: 7px;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
font-style:normal;
color: rgb(255, 0, 0);
}



</style>
</head>


<body>

<div id="Hintergrund">  <!-- Rufe Hintergrund bild auf in diesem Fall ein rechteck über das die Hintergrundfarbe angepasst werden kann-->
           
    <div id="RahmenVariable1">
              <div class="TFeldVariable1">$a</div>
     </div>
    
        
</div>
</body>
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
05.09.2014, 22:11
Beitrag #4
RE: Daten an Webserver
Hallo Steffen,
freut mich, dass es funktioniert.
(05.09.2014 16:34)Xtremefly schrieb:  Ich habe mal mit if abfragen im html code rumgespielt. Da muss man ja ne Funktion machen. Aber irgendwie geht das nicht. Das man z.b. die Variable auf 1 oder 0 abträgt und dann dementsprechend "an" oder "aus" schreibt.
Hat hierfür vielleicht jemand noch eine Idee??
Hier verstehe ich leider nicht nicht was du meinst/vorhast. Magst du dasnochmal erläutern?

gruß lorenz
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
06.09.2014, 17:05
Beitrag #5
RE: Daten an Webserver
Hallo Lorenz,

im Prinzip das ich die Variable "A" im HTML abfrage und dann ne Aktion ausführe.
Also im Prinzip so im html code.

if VariableA = AN{
mache irgendwas, z.b link eines Bild, oder Farbe von einem Feld ändern.
}

Gruß
Steffen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
06.09.2014, 17:37 (Dieser Beitrag wurde zuletzt bearbeitet: 07.09.2014 22:27 von Corvus.)
Beitrag #6
RE: Daten an Webserver
(06.09.2014 17:05)Xtremefly schrieb:  Hallo Lorenz,

im Prinzip das ich die Variable "A" im HTML abfrage und dann ne Aktion ausführe.
Also im Prinzip so im html code.

if VariableA = AN{
mache irgendwas, z.b link eines Bild, oder Farbe von einem Feld ändern.
}

Gruß
Steffen

Da verstehe ich jetzt nicht warum der Browser die Variable interpretieren und verarbeiten soll. Pack doch einfach den Bild-Link in eine Variable und liefere die Seite gleich mit dem entsprechenden Link aus.
Beispiel:
Code:
bString = (digital.read(sensorPin))?"/images/an.jpg>":"/images/aus.jpg";

im HTML dann z.B.:
Code:
<img src="$b">

Aber wenn du in aString 1 oder 0 stehen hast, kannst du es natürlich auch mit javascript erledigen:
Code:
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function Bild() {
  var Status = $a;
  document.write((Status) ? '<img src="/images/an.jpg">' : '<img src="/images/aus.jpg">' );
}
Bild();
</script>
</body>
</html>
Das entbehrt meinem Verständhnis nach jedoch, wie schon gesagt, jeglicher Sinnhaftigkeit.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
09.09.2014, 08:03
Beitrag #7
RE: Daten an Webserver
Ok vielen Dank für deine Hilfe Lorenz, so kann man viel lernen.
Kenn mich mit dem HTML noch nicht so richtig aus und lass mich gerne eines besseren belehren Wink Ich werde heute oder morgen mal das Testen, dass ich den entsprechenden link in die Variable packe.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
10.09.2014, 11:29
Beitrag #8
RE: Daten an Webserver
Also ich mache bei mir die Bildumschaltung mithilfe von dem Beispiel.
Code:
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function Bild() {
  var Status = $a;
  document.write((Status) ? '<img src="/images/an.jpg">' : '<img src="/images/aus.jpg">' );
}
Bild();

so funktioniert es super.
Jetzt muss ich mal noch nachsauen ob man einzelene Variablen aktualisieren lassen kann ohne die komplette Seite zu aktualisieren.

Gruß
Steffen
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
Antwort schreiben 


Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  Daten Visualisieren MeisterQ 12 574 01.12.2016 19:36
Letzter Beitrag: MeisterQ
  Data Logger Daten auf SD Card schreiben Crichton 12 310 22.11.2016 18:32
Letzter Beitrag: Crichton
  ESP8266 ESP12-E Webserver-Frage Claus_M 8 261 14.11.2016 22:02
Letzter Beitrag: Claus_M
  I2C Daten übertragen Gandalf 3 216 04.11.2016 13:20
Letzter Beitrag: hotsystems
  Daten über USB verarbeiten Felix91 10 325 12.10.2016 13:00
Letzter Beitrag: Tommy56
  Webserver + Bild als Hintergrund ?! Marc2014 8 246 11.10.2016 21:39
Letzter Beitrag: Bitklopfer
  Can-Bus Shield ok, aber keine Daten Clubsport 38 1.540 01.09.2016 14:17
Letzter Beitrag: Clubsport
  ESP8266 Webserver Programmieren HDT 11 774 23.08.2016 13:28
Letzter Beitrag: HDT
  Hilfe gesucht. Webserver Statsiche und Dynamische HTMl Seite b3ta 11 453 22.08.2016 08:07
Letzter Beitrag: b3ta
  Daten an mysql diode1990 24 1.308 31.07.2016 10:29
Letzter Beitrag: Gandalf

Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste