Texbox

[Kris9660 Profiel Privébericht]

Dag,
ik ben gestart meteen voorbeeld code waarmee je met een webpagina analoge waarden binnen leest een waar met drukknoppen uitgangen aanstuurt.
Het is een webpagina met ajax inputs.
Graag zou ik er een textbox aan de webpagina aan toe voegen.
en de inhoud dat in die textbox geschreven wordt weergeven in serieel print.

Kan iemand me helpen om dit tot een goed einde te brengen.

ik heb al wat zitten proberen maar zonder deftig resultaat.
alle hints zijn welkom

mijn textbox noemt LED4

Code: Alles selecteren

 
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ   60

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 0, 20); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80
File webFile;               // the web page file on the SD card
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0;              // index into HTTP_req buffer
boolean LED_state[4] = {0}; // stores the states of the LEDs

void setup()
{
    // disable Ethernet chip
    pinMode(10, OUTPUT);
    digitalWrite(10, HIGH);
   
    Serial.begin(9600);       // for debugging
   
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    }
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    }
    Serial.println("SUCCESS - Found index.htm file.");
    // switches on pins 2, 3 and 5
    pinMode(2, INPUT);
    pinMode(3, INPUT);
    pinMode(5, INPUT);
    // LEDs
    pinMode(6, OUTPUT);
    pinMode(7, OUTPUT);
    pinMode(8, OUTPUT);
    pinMode(9, OUTPUT);
   
   
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
   
}

void loop()
{
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c = client.read(); // read 1 byte (character) from client
                // limit the size of the stored received HTTP request
                // buffer first part of HTTP request in HTTP_req array (string)
                // leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
                if (req_index < (REQ_BUF_SZ - 1)) {
                    HTTP_req[req_index] = c;          // save HTTP request character
                    req_index++;
                }
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    // remainder of header follows below, depending on if
                    // web page or XML page is requested
                    // Ajax request - send XML file
                    if (StrContains(HTTP_req, "ajax_inputs")) {
                        // send rest of HTTP header
                        client.println("Content-Type: text/xml");
                        client.println("Connection: keep-alive");
                        client.println();
                        SetLEDs();
                        // send XML file containing input states
                        XML_response(client);
                    }
                    else {  // web page request
                        // send rest of HTTP header
                        client.println("Content-Type: text/html");
                        client.println("Connection: keep-alive");
                        client.println();
                        // send web page
                        webFile = SD.open("index.htm");        // open web page file
                        if (webFile) {
                            while(webFile.available()) {
                                client.write(webFile.read()); // send web page to client
                            }
                            webFile.close();
                        }
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    // reset buffer index and all buffer elements to 0
                    req_index = 0;
                    StrClear(HTTP_req, REQ_BUF_SZ);
                    break;
                }
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                }
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)
   
    boolean currentLineIsBlank = false;

}



// checks if received HTTP request is switching on/off LEDs
// also saves the state of the LEDs
void SetLEDs(void)
{

   // int test_val;            // stores value read from analog inputs
   // test_val = StrContains(HTTP_req);
    //Serial.println(StrContains(HTTP_req));
   //Serial.println(test_val);
   // Serial.print(HTTP_req);
   
    // LED 1 (pin 6)
    if (StrContains(HTTP_req, "LED1=1")) {
        LED_state[0] = 1;  // save LED state
        digitalWrite(6, HIGH);
         Serial.println("led1on");
       
    }
    else if (StrContains(HTTP_req, "LED1=0")) {
        LED_state[0] = 0;  // save LED state
        digitalWrite(6, LOW);
        Serial.println("led1off");
    }
    // LED 2 (pin 7)
    if (StrContains(HTTP_req, "LED2=1")) {
        LED_state[1] = 1;  // save LED state
        digitalWrite(7, HIGH);
         Serial.println("led2on");
    }
    else if (StrContains(HTTP_req, "LED2=0")) {
        LED_state[1] = 0;  // save LED state
        digitalWrite(7, LOW);
        Serial.println("led2off");
    }
    // LED 3 (pin 8)
    if (StrContains(HTTP_req, "LED3=1")) {
        LED_state[2] = 1;  // save LED state
        digitalWrite(8, HIGH);
        Serial.println("led3on");
       
    }
    else if (StrContains(HTTP_req, "LED3=0")) {
        LED_state[2] = 0;  // save LED state
        digitalWrite(8, LOW);
         Serial.println("led3off");
    }
    // LED 4 (pin 9)
    if (StrContains(HTTP_req, "LED4=aan")) {
        LED_state[3] = 1;  // save LED state
        digitalWrite(9, HIGH);
         Serial.println("led4on");
    }
    else if (StrContains(HTTP_req, "LED4=uit")) {
        LED_state[3] = 0;  // save LED state
        digitalWrite(9, LOW);
        Serial.println("led4off");
 
    }

}

// send the XML file with analog values, switch status
//  and LED status
void XML_response(EthernetClient cl)
{
    int analog_val;            // stores value read from analog inputs
    int count;                 // used by 'for' loops
    int sw_arr[] = {2, 3, 5};  // pins interfaced to switches
   
    cl.print("<?xml version = \"1.0\" ?>");
    cl.print("<inputs>");
    // read analog inputs
    for (count = 2; count <= 5; count++) { // A2 to A5
        analog_val = analogRead(count);
        cl.print("<analog>");
        cl.print(analog_val);
        cl.println("</analog>");
    }
    // read switches
    for (count = 0; count < 3; count++) {
        cl.print("<switch>");
        if (digitalRead(sw_arr[count])) {
            cl.print("ON");
        }
        else {
            cl.print("OFF");
        }
        cl.println("</switch>");
    }
    // checkbox LED states
    // LED1
    cl.print("<LED>");
    if (LED_state[0]) {
        cl.print("checked");
        Serial.println("check");
       
    }
    else {
        cl.print("unchecked");
    }
    cl.println("</LED>");
    // LED2
    cl.print("<LED>");
    if (LED_state[1]) {
        cl.print("checked");
        Serial.println("check");
    }
    else {
        cl.print("unchecked");
    }
     cl.println("</LED>");
    // button LED states
    // LED3
    cl.print("<LED>");
    if (LED_state[2]) {
        cl.print("on");
        Serial.println("check");
    }
    else {
        cl.print("off");
    }
    cl.println("</LED>");
    // LED4
    cl.print("<LED>");
    if (LED_state[3]) {
        cl.print("on");
        Serial.println("check");
    }
    else {
        cl.print("off");
    }
 
   
    cl.print("</inputs>");
}

// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
    for (int i = 0; i < length; i++) {
        str[i] = 0;
    }
}

// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
    char found = 0;
    char index = 0;
    char len;

    len = strlen(str);
   
    if (strlen(sfind) > len) {
        return 0;
    }
    while (index < len) {
        if (str[index] == sfind[found]) {
            found++;
            if (strlen(sfind) == found) {
                return 1;
            }
        }
        else {
            found = 0;
        }
        index++;
    }

    return 0;
} 

//webpagina

Code: Alles selecteren

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino Ajax I/O</title>
        <script>
      strLED1 = "";
      strLED2 = "";
      strLED3 = "";
      strLED4 = "";
      
      var LED3_state = 0;
      var LED4_state = 0;

      function GetArduinoIO()
      {
         nocache = "&nocache=" + Math.random() * 1000000;
         var request = new XMLHttpRequest();           //variable var
         request.onreadystatechange = function()
         {
            if (this.readyState == 4) {
               if (this.status == 200) {
                  if (this.responseXML != null) {



                     // XML file received - contains analog values, switch values and LED states
                     // ontvangen XML file van Arduino
                     //-------------------------------



                     var count;
                     // get analog inputs  bytagname
                     var num_an = this.responseXML.getElementsByTagName('analog').length;
                     for (count = 0; count < num_an; count++) {
                        document.getElementsByClassName("analog")[count].innerHTML =
                           this.responseXML.getElementsByTagName('analog')[count].childNodes[0].nodeValue;
                     }
                     // get switch inputs   bytagname
                     var num_an = this.responseXML.getElementsByTagName('switch').length;
                     for (count = 0; count < num_an; count++) {
                        document.getElementsByClassName("switches")[count].innerHTML =
                           this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue;
                     }

                     //Feedback uitgangen
                     //------------------

                     // LED 1
                     if (this.responseXML.getElementsByTagName('LED')[0].childNodes[0].nodeValue === "checked") {
                        document.LED_form.LED1.checked = true;
                     }
                     else {
                        document.LED_form.LED1.checked = false;
                     }
                     // LED 2
                     if (this.responseXML.getElementsByTagName('LED')[1].childNodes[0].nodeValue === "checked") {
                        document.LED_form.LED2.checked = true;
                     }
                     else {
                        document.LED_form.LED2.checked = false;
                     }
                     // LED 3
                     if (this.responseXML.getElementsByTagName('LED')[2].childNodes[0].nodeValue === "on") {
                        document.getElementById("LED3").innerHTML = "LED 3 is ON (D8)";
                        LED3_state = 1;
                     }
                     else {
                        document.getElementById("LED3").innerHTML = "LED 3 is OFF (D8)";
                        LED3_state = 0;
                     }
                     // LED 4
                     //if (this.responseXML.getElementsByTagName('LED')[3].childNodes[0].nodeValue === "on") {
                     //   document.getElementById("LED4").innerHTML = "TEST 4 is ON (D9)";
                     //   LED4_state = 1;
                     //}
                     //else {
                     //   document.getElementById("LED4").innerHTML = "TEST 4 is OFF (D9)";
                     //   LED4_state = 0;
                     //}
                  }
               }
            }
         }
         // send HTTP GET request with LEDs to switch on/off if any
         //zenden http get request naar Arduino
         //-------------------------------------

         request.open("GET", "ajax_inputs" + strLED1 + strLED2 + strLED3 + strLED4  + nocache, true);
         request.send(null);
         setTimeout('GetArduinoIO()', 1000);
         strLED1 = "";
         strLED2 = "";
         strLED3 = "";
         strLED4 = "";
         
      }
      // service LEDs when checkbox checked/unchecked
      function GetCheck()
      {
         if (LED_form.LED1.checked) {
            strLED1 = "&LED1=1";
         }
         else {
            strLED1 = "&LED1=0";
         }
         if (LED_form.LED2.checked) {
            strLED2 = "&LED2=1";
         }
         else {
            strLED2 = "&LED2=0";
         }

      /*   if (LED_form.LED4.checked) {
            strLED4 = "&LED4=1";
         }
         else {
            strLED4 = "&LED4=0";
         }  */




      }
      function GetButton1()
      {
         if (LED3_state === 1) {
            LED3_state = 0;
            strLED3 = "&LED3=0";
         }
         else {
            LED3_state = 1;
            strLED3 = "&LED3=1";
         }
      }
      
   </script>
   <style>
      .IO_box {
         float: left;
         margin: 0 20px 20px 0;
         border: 1px solid blue;
         padding: 0 5px 0 5px;
         width: 120px;
      }
      h1 {
         font-size: 120%;
         color: blue;
         margin: 0 0 10px 0;
      }
      h2 {
         font-size: 85%;
         color: #5734E6;
         margin: 5px 0 5px 0;
      }
      p, form, button {
         font-size: 80%;
         color: #252525;
      }
      .small_text {
         font-size: 70%;
         color: #737373;
      }
   </style>
    </head>
    <body onload="GetArduinoIO()">
        <h1>Arduino Ajax I/O</h1><br />




        <div class="IO_box">
         <h2>Analog Inputs</h2>
         <p class="small_text">A0 used by Ethernet shield</p>
         <p class="small_text">A1 used by Ethernet shield</p>
         <p>A2: <span class="analog">...</span></p>
         <p>A3: <span class="analog">...</span></p>
         <p>A4: <span class="analog">...</span></p>
         <p>A5: <span class="analog">...</span></p>
      </div>
      <div class="IO_box">
         <h2>Switch Inputs</h2>
         <p class="small_text">D0: used by serial RX</p>
         <p class="small_text">D1: used by serial TX</p>
         <p>Switch 1 (D2): <span class="switches">...</span></p>
         <p>Switch 2 (D3): <span class="switches">...</span></p>
         <p class="small_text">D4: used by Ethernet shield</p>
         <p>Switch 3 (D5): <span class="switches">...</span></p>
      </div>
      <div class="IO_box">
         <h2>LEDs Using Checkboxes</h2>
         <form id="check_LEDs" name="LED_form">
            <input type="checkbox" name="LED1" value="0" onclick="GetCheck()" />LED 1 (D6)<br /><br />
            <input type="checkbox" name="LED2" value="0" onclick="GetCheck()" />LED 2 (D7)<br /><br />
            <h2>LED4</h2><br />
            <INPUT TYPE=TEXT NAME="LED4" VALUE='' SIZE='25' MAXLENGTH='50'><BR>
            <INPUT TYPE=SUBMIT NAME='submit' VALUE='enter!'>
            
         </form>
      </div>
      <div class="IO_box">
         <h2>LEDs Using Buttons</h2>
         <button type="button" id="LED3" onclick="GetButton1()">LED 3 is OFF (D8)</button><br /><br />
         

         <p class="small_text">D10 to D13 used by Ethernet shield</p>
      </div>

      


    </body>
</html>




[shooter Profiel Privébericht]

kris je zult hopelijk wel begrijpen dat wij voorbeeldcode die je hebt opgehaald echt niet gaan zitten nakijken, je zult iets concreter moeten zijn en aangeven waar de problemen zitten, wij gaan echt niet wroeten in software die we zelf niet gebruiken.

[Kris9660 Profiel Privébericht]

wel , ik ben een beginnende en weet eigenlijk niet goed waar mijn probleem zich bevind.
Graag zou ik een werkend voorbeeldje willen toegestuurd krijgen.
een voorbeeldje waar men vanuit een textbox op een webpagina (gebruik makend met ajax inputs) iets schrijf en dit met een serieel print kan uitlezen.
Ik weet dat misschien iets te veel gevraagd is , maar als iemand zo'n voorbeeldje weet staan op het net mag hij het me altijd doorsturen.

Mijn probleem: is wanneer ik iets in mijn textbox schrijf ( voorbeeld test) en dit valideer dan krijg ik in mijn serieel print van (http req) zoiets gelijk
get /?LED4=test&submit = enter enz ....
Dus op mijn arduino ontvang ik wel degelijk iets maar hoe krijg ik nu enkel het woordje text op mijn serieel print?
Kan ik enkel de inhoud van string LED4 op mijn serieel print weergeven? Dit krijg ik niet voor elkaar.;-(

Ik hoop dat ik wat duidelijk ben in mijn uitleg
Toch alvast bedankt voor de intresse om me te helpen.

mvg,
Kris

[nicoverduin Profiel PrivéberichtWebsite]

Dus je krijgt het binnen. Dan is de rest toch gewwon zoeken naar het = teken en stoppen bij het & teken? Alles wat er tussen zit is de waarde?

[Kris9660 Profiel Privébericht]

akkoord deze pogingen heb ik geprobeerd te verwezelijken.
dit heb ik eens geprobeerd ,wanneer je kijkt naar LED1 van de originele sketch.

Code: Alles selecteren

  if (StrContains(HTTP_req, "LED1=1")) {
        LED_state[0] = 1;  // save LED state
        digitalWrite(6, HIGH);
         Serial.println("led1on");
         } //dit werkt --> LED1 komt van een drukknop op de webpagina.

//Als ik dit schrijf:
 if (StrContains(HTTP_req, "LED4=test")) {
                Serial.println("led4on");
}


//dit werkt niet --> LED4 komt van mijn textbox en toch komt "test" voor in mijn HTTP_req string ;-(

Kan mij iemand vertellen waarom dit laatste niet werkt -> ik krijg geen " led4on" op mijn serieel print.

mvg,
Kris

[nicoverduin Profiel PrivéberichtWebsite]

En als je net daarvoor een println doet van HTTP_req? wat krijg je dan?

[Kris9660 Profiel Privébericht]

Dag ,
wanneer ik juist daarvoo Serial.print(HTTP_req) doe ; dan krijg ik enkel een string (ajax in en outputs )met cijfers te zien .

De Get is verdwenen (get /?LED4=test&submit = enter enz ....)

Code: Alles selecteren


Serial.print(HTTP_req);

if (StrContains(HTTP_req, "LED4=test")) {
                Serial.println("led4on");
}