WLAN Component

Please add any bug reports that require discussion here

Moderator: Benj

Forum rules
Only bug reports will be considered here. General questions should not be posted in this forum.
User avatar
Jordy101091
Posts: 519
Joined: Sat Jan 08, 2011 4:02 pm
Location: The Netherlands
Has thanked: 25 times
Been thanked: 188 times
Contact:

Re: WLAN Component - Solved

Post by Jordy101091 »

LeighM,

How do I Implement your method in my webpage:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="nl" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>PH Sensor</title>
<meta http-equiv="refresh" content="1"/>
<style type="text/css">
.auto-style1 {
	font-size: xx-large;
}
</style>
</head>


<body style="height: 353px">
<p class="auto-style1" style="height: 36px; width: 1450px; text-align: center">
Aquarium Automatics</p>
<div>
	<hr /></div>
<p>PH Sensor: %0</p>
<p>ORP Sensor: %1</p>
</body>


</html>
Instead of refreshing the whole webpage I just want the data of PH sensor and ORP sensor to be updated just like this video shows,

[/youtube]
Last edited by Jordy101091 on Sat Sep 07, 2013 11:19 pm, edited 1 time in total.
the will to learn, should not be stopped by any price

User avatar
LeighM
Matrix Staff
Posts: 2178
Joined: Tue Jan 17, 2012 10:07 am
Has thanked: 481 times
Been thanked: 699 times
Contact:

Re: WLAN Component

Post by LeighM »

If you were to use frames then you could use three separate webs pages, say, index.htm, head.htm and info.htm

The body of index.htm would have the frameset info

Code: Select all

<frameset rows="25%,*">
  <frame src="head.htm">
  <frame src="info.htm">
</frameset>
head.htm would contain your static header code, Aquarium Automatics

info.htm would contain the page that changes...

Code: Select all

<p>PH Sensor: %0</p>
<p>ORP Sensor: %1</p> 
only info.htm would need the META refresh tag, which I assume will work inside a frame, I've not tried it
(no need to use Javascript)

User avatar
Jordy101091
Posts: 519
Joined: Sat Jan 08, 2011 4:02 pm
Location: The Netherlands
Has thanked: 25 times
Been thanked: 188 times
Contact:

Re: WLAN Component

Post by Jordy101091 »

Hi LeighM,

Thanks for all your help,
Im now getting somewhere with my webpage, I hop in the near future I can show you what I have made so far.
But I need to learn a bit more about web design and coding :wink:

Now Im going to work on a update of my component :wink:

Anyway thank you for you help, and I hope I can ask you again if im stuck,

Regards Jordy
the will to learn, should not be stopped by any price

hyperion007
Posts: 528
Joined: Sat Dec 01, 2012 1:23 pm
Location: Sweden
Has thanked: 49 times
Been thanked: 101 times
Contact:

Re: WLAN Component

Post by hyperion007 »

Old thread but I thought I would post this here in case Jordy or anyone else might be looking for "real time" updates of graphs and charts without reloading the entire page:

http://www.pubnub.com/blog/create-real- ... and-d3-js/

User avatar
Nico595
Posts: 82
Joined: Mon Jan 23, 2012 6:46 pm
Location: Toulouse France
Has thanked: 12 times
Been thanked: 10 times
Contact:

Re: WLAN Component

Post by Nico595 »

Hi,

I found this Arduino Ajax code for refresh variable in html page.
I think we can take this code for create refresh function of all variable in our web page. But a function in Webserver Flowcode componant is may be necessary for create link beetwen variable.

[youtube]Nw5vUg8BWck[/youtube]
https://www.youtube.com/watch?v=Nw5vUg8 ... e=youtu.be
[youtube]ttH5Kal3FjM[/youtube]
https://www.youtube.com/watch?v=ttH5Kal3FjM
[youtube]kaExtOilfKA[/youtube]
https://www.youtube.com/watch?v=kaExtOilfKA


In the Arduino

Code: Select all

/*--------------------------------------------------------------
  Program:      eth_websrv_AJAX_switch_auto

  Description:  Arduino web server shows the state of a switch
                on a web page using AJAX. The state of the
                switch is updated automatically.
                Does not use the SD card.
  
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
  
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - Ethernet library documentation:
                  http://arduino.cc/en/Reference/Ethernet
                - Learning PHP, MySQL & JavaScript by
                  Robin Nixon, O'Reilly publishers

  Date:         13 February 2013
 
  Author:       W.A. Smith, http://startingelectronics.com
--------------------------------------------------------------*/

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(10, 0, 0, 20); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

String HTTP_req;            // stores the HTTP request

void setup()
{
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for diagnostics
    pinMode(3, INPUT);        // switch is attached to Arduino pin 3
}

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
                HTTP_req += c;  // save the HTTP request 1 char at a time
                // 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");
                    client.println("Content-Type: text/html");
                    client.println("Connection: keep-alive");
                    client.println();
                    // AJAX request for switch state
                    if (HTTP_req.indexOf("ajax_switch") > -1) {
                        // read switch state and send appropriate paragraph text
                        GetSwitchState(client);
                    }
                    else {  // HTTP request for web page
                        // send web page - contains JavaScript with AJAX calls
                        client.println("<!DOCTYPE html>");
                        client.println("<html>");
                        client.println("<head>");
                        client.println("<title>Arduino Web Page</title>");
                        client.println("<script>");
                        client.println("function GetSwitchState() {");
                        client.println("nocache = \"&nocache=\"\
                                                         + Math.random() * 1000000;");
                        client.println("var request = new XMLHttpRequest();");
                        client.println("request.onreadystatechange = function() {");
                        client.println("if (this.readyState == 4) {");
                        client.println("if (this.status == 200) {");
                        client.println("if (this.responseText != null) {");
                        client.println("document.getElementById(\"switch_txt\")\
.innerHTML = this.responseText;");
                        client.println("}}}}");
                        client.println(
                        "request.open(\"GET\", \"ajax_switch\" + nocache, true);");
                        client.println("request.send(null);");
                        client.println("setTimeout('GetSwitchState()', 1000);");
                        client.println("}");
                        client.println("</script>");
                        client.println("</head>");
                        client.println("<body onload=\"GetSwitchState()\">");
                        client.println("<h1>Arduino AJAX Switch Status</h1>");
                        client.println(
                        "<p id=\"switch_txt\">Switch state: Not requested...</p>");
                        client.println("</body>");
                        client.println("</html>");
                    }
                    // display received HTTP request on serial port
                    Serial.print(HTTP_req);
                    HTTP_req = "";            // finished with request, empty string
                    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 state of the switch to the web browser
void GetSwitchState(EthernetClient cl)
{
    if (digitalRead(3)) {
        cl.println("Switch state: ON");
    }
    else {
        cl.println("Switch state: OFF");
    }
}
In the Webpage
Image

Excellent tutorial by startingelectronics.com is here:
http://startingelectronics.com/tutorial ... sing-AJAX/

Post Reply