Android Question Get value from html page

mohdsaks

Member
Licensed User
Longtime User
hi
today i purchase this nice program i want to do project for my univ. using basic4android to talk with another device called arduino , with this device i can take room temperature and save it in html file i can reach it my question is

how i can get this value from html and used it in my app am new with VB also so any help please

and again thank you for this program ..
 

mohdsaks

Member
Licensed User
Longtime User
thank you for your fast replay
i have two way to make the code in the arduino device
- first one to create the html code in the main code with the c++ language

B4X:
#include <SPI.h>
#include <Ethernet.h> // Initialize the libraries.
#include <Servo.h>
Servo myservo;
 
byte mac[] = { 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 }; //I left the MAC address and IP address blank.
byte ip[] = { 000,000,000,000 };                    // You will want to fill these in with your MAC and IP address.
 
EthernetServer server(80); // Assigning the port forwarded number. It's almost always 80.
 
String readString; // We will be using strings to keep track of things.
int val;    // Using val as a variable for the PIR status.
int pir=3;
 
//////////////////////
 
void setup(){
 
  pinMode(2, OUTPUT);
  pinMode(pir, INPUT);
  Ethernet.begin(mac, ip);
  myservo.attach(9);
  myservo.write(45);
}
 
void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {                    // This is all where we start up the server and strings.
        char c = client.read();                   
        if (readString.length() < 100) {
          readString += c;
        }
        if (c == '\n') {
          Serial.println(readString);                      // And here we begin including the HTML
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<hmtl>");
client.println("<head>");
client.println("ARDUINO PAGE");
client.println("</head>");
client.println("<title>");
client.println("ARDUINO + ETHERNET Page");
client.println("</title>");
client.println("<body bgcolor=black>");
client.println("<font color=white>");
client.println("<meta http-equiv=\"refresh\" content=\"4\">"); // This is used to refresh the page so
client.println("<center>");                                      // we can see if there is Motion or not.
client.println("<b>");
client.println("Greetings! Here you will find a somewhat interactive page served up by my Arduino!");
client.println("</br>");
client.println("As well, you can interact with my Arduino! It's pretty basic, and you really can't see it,");
client.println("</br>");
client.println("but as you press a button, you turn on or off an LED or move a Servo! Have fun!");
client.println("</b>");
client.println("<p>");
client.println("<table border=0 width=200>");
client.println("<tr>");
client.println("<td align=center>");
client.println("<font color=white>");
client.println("The Temperature is:");
client.println("</td>");
client.println("</tr>");
client.println("<tr>");
client.println("<td align=center>");
client.println("<font color = turquoise size=10>");
int temp = (((5*analogRead(5)*100/1024)*1.8)+32);    // This replaces the 00 with a temperature in F.
client.println(temp);
client.println("* F");
client.println("</td>");
client.println("</tr>");
client.println("</table>");
client.println("<p>");
client.println("<FORM>");
client.println("<INPUT type=button value=LED1-ON onClick=window.location='/?lighton1\'>");
client.println("<INPUT type=button value=LED1-OFF onClick=window.location='/?lightoff1\'>");
client.println("</FORM>");  // Above and below you'll see that when we click on a button, it adds a little snippet
client.println("<FORM>");    // to the end of the URL. The Arduino watches for this and acts accordingly.
client.println("<INPUT type=button value=Servo-0 onClick=window.location='/?serv0\'>");
client.println("<INPUT type=button value=Servo-45 onClick=window.location='/?serv45\'>");
client.println("<INPUT type=button value=Servo-90 onClick=window.location='/?serv90\'>");
client.println("</FORM>");
client.print("<table border=1 width=200>");
client.print("<tr>");
client.print("<td align=center>");
client.print("<font color=white size=3>");
client.print("There is currently");
client.print("</td>");
client.print("</tr>");
client.print("<tr>");
client.print("<td align=center>");
client.print("<font color=white size=3>");  // And below we will print Motion if there is, and No Motion if there's not.
val = digitalRead(pir);
          if (val == HIGH){
          client.print("MOTION");
          }
        else {
          client.print("NO MOTION");
        }
client.print("</td>");
client.print("</tr>");
client.print("</table>");
client.println("</center>");
client.println("</font>");
client.println("</body>");
client.println("</html>");
          delay(1);
       
          if(readString.indexOf("?lighton") >0)    // these are the snippets the Arduino is watching for.
          {
            digitalWrite(2, HIGH);
          }
          else{
          if(readString.indexOf("?lightoff") >0)
          {
            digitalWrite(2, LOW);
          }
         
          else{
            if(readString.indexOf("?serv0") >0)
            {
              myservo.write(0);
            }
         
          else{
            if(readString.indexOf("?serv45") >0)
            {
              myservo.write(45);
            }
         
          else{
            if(readString.indexOf("?serv90") >0)
            {
              myservo.write(90);
            }
          }
          }
          }
          }
          readString="";
          client.stop();            // End of session.
 
        }
      }
    }
  }
 
}


as you can see let say i want the value of int temp = (((5*analogRead(5)*100/1024)*1.8)+32);
how i can get it


the 2nd way is the Arduino Inputs using Ajax with XML on the Arduino Web Server. thats mean i have 2 code one for the ardino code and this will send information using xml to the 2nd code html code

ardino code
B4X:
/*--------------------------------------------------------------
  Program:      eth_websrv_SD_Ajax_XML
 
  Description:  Arduino web server that serves up a web page
                that displays the status of two switches and
                one analog input.
                The web page is stored on the SD card.
                The web page contains JavaScript code that uses
                Ajax and XML to get the states of the switches
                and value of the analog input.
 
  Hardware:    Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16.
                Push button switches interfaced to pin 7 and 8
                of the Arduino. Potentiometer interfaced to A2
                analog input.
               
  Software:    Developed using Arduino 1.0.5 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
 
  References:  - WebServer example by David A. Mellis and
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - SD Card library documentation:
                  http://arduino.cc/en/Reference/SD
 
  Date:        27 March 2013
  Modified:    17 June 2013
                - removed the use of the String class
  Author:      W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/
 
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
 
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ  50
 
// 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
 
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.");
    pinMode(7, INPUT);        // switch is attached to Arduino pin 7
    pinMode(8, INPUT);        // switch is attached to Arduino pin 8
   
    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
                // 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();
                        // 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)
}
 
// send the XML file with switch statuses and analog value
void XML_response(EthernetClient cl)
{
    int analog_val;
   
    cl.print("<?xml version = \"1.0\" ?>");
    cl.print("<inputs>");
    cl.print("<button1>");
    if (digitalRead(7)) {
        cl.print("ON");
    }
    else {
        cl.print("OFF");
    }
    cl.print("</button1>");
    cl.print("<button2>");
    if (digitalRead(8)) {
        cl.print("ON");
    }
    else {
        cl.print("OFF");
    }
    cl.print("</button2>");
    // read analog pin A2
    analog_val = analogRead(2);
    cl.print("<analog1>");
    cl.print(analog_val);
    cl.print("</analog1>");
    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;
}

html code

HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page using Ajax with XML</title>
        <script>
        function GetArduinoInputs()
        {
            nocache = "&nocache=" + Math.random() * 1000000;
            var request = new XMLHttpRequest();
            request.onreadystatechange = function()
            {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        if (this.responseXML != null) {
                            // extract XML data from XML file (containing switch states and analog value)
                            document.getElementById("input1").innerHTML =
                                this.responseXML.getElementsByTagName('button1')[0].childNodes[0].nodeValue;
                            document.getElementById("input2").innerHTML =
                                this.responseXML.getElementsByTagName('button2')[0].childNodes[0].nodeValue;
                            document.getElementById("input3").innerHTML =
                                this.responseXML.getElementsByTagName('analog1')[0].childNodes[0].nodeValue;
                        }
                    }
                }
            }
            request.open("GET", "ajax_inputs" + nocache, true);
            request.send(null);
            setTimeout('GetArduinoInputs()', 1000);
        }
    </script>
    </head>
    <body onload="GetArduinoInputs()">
        <h1>Arduino Inputs from SD Card Web Page using Ajax with XML</h1>
        <p>Button 1 (pin 7): <span id="input1">...</span></p>
        <p>Button 2 (pin 8): <span id="input2">...</span></p>
        <p>Analog (A2): <span id="input3">...</span></p>
    </body>
</html>


hope you can help me
 
Upvote 0

mohdsaks

Member
Licensed User
Longtime User
hi and thank you again

for the first code i made the html and then i embedded with the arduino cod

first html
HTML:
<hmtl>
<head>
ARDUINO PAGE
</head>
<title>
ARDUINO + ETHERNET Page
</title>
<body bgcolor=black>
<font color=white>
<center>
<b>
Greetings! Here you will find a somewhat interactive page served up by my Arduino!
</br>
As well, you can interact with my Arduino! It's pretty basic, and you really can't see it,
</br>
but as you press a button, you turn on or off an LED or move a Servo! Have fun!
</b>
<p>
<table border=0 width=200>
<tr>
<td align=center>
<font color=white>
The Temperature is:
</td>
</tr>
<tr>
<td align=center>
<font color = turquoise size=10>
00
</td>
</tr>
</table>
<p>
<FORM>
<INPUT type=button value=LED1 ON onClick=window.location='/?lighton1\'>
<INPUT type=button value=LED1-OFF onClick=window.location='/?lightoff1\'>
</FORM>
<FORM>
<INPUT type=button value=Servo-0 onClick=window.location='/?servo0\'>
<INPUT type=button value=Servo 45 onClick=window.location='/?servo45\'>
<INPUT type=button value=Servo 90 onClick=window.location='/?servo90\'>
</FORM>
<table border=1 width=200>
<tr>
<td align=center>
<font color=white size=3>
There is currently
</td>
</tr>
<tr>
<td align=center>
<font color=white size=5>
NO MOTION
</td>
</tr>
</table>
</center>
</font>
</body>
</html>


the secound one as is
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title>Arduino SD Card Web Page using Ajax with XML</title>
        <script>
        function GetArduinoInputs()
        {
            nocache = "&nocache=" + Math.random() * 1000000;
            var request = new XMLHttpRequest();
            request.onreadystatechange = function()
            {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        if (this.responseXML != null) {
                            // extract XML data from XML file (containing switch states and analog value)
                            document.getElementById("input1").innerHTML =
                                this.responseXML.getElementsByTagName('button1')[0].childNodes[0].nodeValue;
                            document.getElementById("input2").innerHTML =
                                this.responseXML.getElementsByTagName('button2')[0].childNodes[0].nodeValue;
                            document.getElementById("input3").innerHTML =
                                this.responseXML.getElementsByTagName('analog1')[0].childNodes[0].nodeValue;
                        }
                    }
                }
            }
            request.open("GET", "ajax_inputs" + nocache, true);
            request.send(null);
            setTimeout('GetArduinoInputs()', 1000);
        }
    </script>
    </head>
    <body onload="GetArduinoInputs()">
        <h1>Arduino Inputs from SD Card Web Page using Ajax with XML</h1>
        <p>Button 1 (pin 7): <span id="input1">...</span></p>
        <p>Button 2 (pin 8): <span id="input2">...</span></p>
        <p>Analog (A2): <span id="input3">...</span></p>
    </body>
</html>


and sorry for my English its poor i know .
 
Upvote 0

warwound

Expert
Licensed User
Longtime User
I'd have thought it more logical for your b4a code to make the same request as the XMLHttpRequest - a request to 'ajax_inputs'.

Get the same XML that the XMLHttpRequest gets and process that XML instead of getting the webpage and parsing the HTML.

Note that if you use HttpUtils2 to get the webpage then the javascript inside the webpage will not get executed, the XMLHttpRequest will not be made and the webpage will not contain the values you are looking for.

Martin.
 
Upvote 0
Top