Messwerte als Variable in HTML Code einsetzten

Hallo Leute,

Ich brauche eure Hilfe, denn ich bin erst gerade in der Arduino Welt angekommen

Also

Ich habe ein Tutorial gesehen wie man im HTML Code auf einer SD Karte eine Variable hinzufügen kann. Diese Variable kann ich dann im Arduino Sketch belibig verändern.

Im Tutorial wurde nur beschrieben wie man Text und keine Messwerte als Variable benutzen kann.

#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[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // MAC-Adresse des Ethernet-Shield
byte ip[]  = { 192, 168, 1, 177 };                   // IP zum aufrufen des Webservers
byte sdPin = 4;                                      // Pin der SD-Karte

char aString[] = "test";                      //"Inhalt der Variable $a";

 FALLS ICH HIER EIN ANALOGREAD(A0) EINSETZTEN WILL, FUNKTIONIERT ES NICHT. ES FUNKTIONIERT NUR MIT TEXT

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 == '

LG )                // [/color]
            {
              c = webFile.read();
              switch (c)
              {
                case ’


LG:
                   client.write('

LG);
                  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();
}
}


LG

Willkommen!

Schau Dir mal den Beispielsketch an, wo Analogwerte ausgegeben werden. Hab grad nix zu kucken, an dem hab ich mich aber auch orientiert.

Und Code setz bitte in Code-Tags, liest sich besser.

Danke für die Antwort

Hab leider immernoch dasselbe Problem, wen ich ein Messwert einsetzten und hochladen will kommt folgende Fehlermeldung Arduino:

exit status 1
initializer fails to determine size of ‘aString’

Mit einem Text funktioniert es problemlos.

LG

Hallo, wenn der Wert "int" ist...

char AnalogerWert [5];

snprintf(AnalogerWert,sizeof(AnalogerWert),"%04d",eingelesener Wert);

char bString[] = AnalogerWert;

Bin mir aber nicht sicher. Gruß und Spaß Andreas

Hatt leider auch nicht funktioniert :(

Ist es den grundsätzlich möglich eine Arduino Variable wie zb.

int. sensorValue = analogRead(A1);

in einen htm Code einzubinden, damit dieser wert korrekt auf dem Webserver angezeigt wird?

LG

Toby4588:
Ist es den grundsätzlich möglich eine Arduino Variable wie zb.

int. sensorValue = analogRead(A1);

in einen htm Code einzubinden, damit dieser wert korrekt auf dem Webserver angezeigt wird?

LG

ja

SkobyMobil:
Bin mir aber nicht sicher.

Sieht gut aus. Testsketch:

char aString[] = "Analoger Wert: ";
char bString[10];
char cString[] = " Einheiten\n";

void setup()
{
  Serial.begin(9600);
  Serial.println("ARDUINO - STEUERUNG");
}

void loop()
{
  unsigned int wert = analogRead(A0);
  snprintf(bString, sizeof(bString), "%04d", wert);
  Serial.print(wert);
  Serial.print("  ");
  Serial.println(bString);
  delay(300);
}

Ausgabe:
1023 1023
975 0975
882 0882
768 0768
615 0615
496 0496
410 0410
355 0355
313 0313
272 0272
248 0248
232 0232
212 0212
149 0149
88 0088
64 0064
58 0058
59 0059

Ich kratz mich immer am Kopf weil offenbar keiner die funktionierenden Beispiele studiert.

Also kopier ich das für Dich nochmal raus:

/*
  Web Server
 
 A simple web server that shows the value of the analog input pins.
 using an Arduino Wiznet Ethernet shield. 
 
 Circuit:
 * Ethernet shield attached to pins 10, 11, 12, 13
 * Analog inputs attached to pins A0 through A5 (optional)
 
 created 18 Dec 2009
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe
 
 */

#include <SPI.h>
#include <Ethernet.h>

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192,168,1,177);

// Initialize the Ethernet server library
// with the IP address and port you want to use 
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
 // Open serial communications and wait for port to open:
  Serial.begin(9600);
   while (!Serial) {
    ; // wait for serial port to connect. Needed for Leonardo only
  }


  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
	  client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
          // output the value of each analog input pin
          for (int analogChannel = 0; analogChannel < 6; analogChannel++) {
            int sensorReading = analogRead(analogChannel);
            client.print("analog input ");
            client.print(analogChannel);
            client.print(" is ");
            client.print(sensorReading);
            client.println("
");       
          }
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } 
        else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disonnected");
  }
}

Vielleicht willst Du aber auch was anderes, dann formulier das bitte nochmal.

@klaus_ww

Ich habe eine Webseite in HTML und CSS auf einer SD Karte gespeichert, und nicht “durcheinandermischt” wie im Beispiels Sketch. In dieser HTM Datei welche sich auf der SD Karte befindet, will ich nun eine Variable einfügen welche ich im Arduino Sketch bennenen kann.

Arduino Sketch;

#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[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // MAC-Adresse des Ethernet-Shield
byte ip[]  = { 192, 168, 1, 177 };                   // IP zum aufrufen des Webservers
byte sdPin = 4;                                      // Pin der SD-Karte
 
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())
            {
              client.write(webFile.read()); // 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 der HTML CSS Code auf der SD:

<!DOCTYPE html>
<head>
<style type="text/css">

#Hintergrund{
position:relative;
left: -7px;
top: -7px;
width: auto;
height: 950px;
border-radius: 0px;
background-color: rgb(0,0,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">
           
    <div id="RahmenVariable1">
              <div class="TFeldVariable1">HIER VARIABLE EINFUEGEN</div>
     </div>
    
        
</div>
</body>

lies das file zeilenweise ein schau nach, ob in der Zeile eine Variable stehen muss wenn ja, ersetze den Platzhalter durch die Variable.

ElEspanol:
lies das file zeilenweise ein
schau nach, ob in der Zeile eine Variable stehen muss
wenn ja, ersetze den Platzhalter durch die Variable.

Ganz genau so. Da der Sketch in #0 das so macht, beziehe ich mich auf diesen!

Toby4588:
Und der HTML CSS Code auf der SD

Damit wir über dieselben Dinge reden: Das ist die Datei index.htm, die eine vollständige HTML-Datei ist, die nur um die variablen Werte ergänzt werden soll. Richtig?

Dann fehlen aber die Platzhalter $a $b $c in der Datei, beispielsweise so:

$a
$b
$c

Im Sketch dann:

char aString[] = "Analoger Wert: ";
char bString[5];
char cString[] = " Einheiten";
...
   unsigned int wert = analogRead(A0);
    snprintf(bString, sizeof(bString), "%04d", wert);
    // Website von SD-Karte laden

Die Anzeige im Browser sieht dann so aus:

Messwerte.png

Ich hoffe, das hilft Dir :slight_smile: