Difference between revisions of "Microduino ENC Network (5)"

From Microduino Wiki
Jump to: navigation, search
(Created page with "{{Language | Microduino ENC网络(五)}} {| style="width: 800px;" |- | ==Objective== This tutorial will show you how to make Microduino act like a web server, so you can a...")
 
 
Line 16: Line 16:
  
 
==World Wide Web==
 
==World Wide Web==
Amongs the network services, the most used one is surely the web service: everytime you “surf” on a website, the program you use (named browser) connects to the web server hosting that site using HTTP protocol and gets the content (pages, images, videos…) to show.
+
Among the network services, the most used one is surely the web service: every time you "surf" on a website, the program you use (named browser) connects to the web server hosting that site using HTTP protocol and gets the content (pages, images, videos…) to show.
  
 
Web pages are composed using a markup language named HTML; this language uses tags to describe page content.
 
Web pages are composed using a markup language named HTML; this language uses tags to describe page content.
Line 22: Line 22:
 
The main advantages in using HTTP to talk with Arduino on a network connection are:
 
The main advantages in using HTTP to talk with Arduino on a network connection are:
  
*You don’t need to develop a dedicated client, you can use a common internet browser (Internet Explorer, Firefox…);
+
*You don't need to develop a dedicated client, you can use a common internet browser (Internet Explorer, Firefox…);
*HTTP protocol is textual, you can easily manage it with Arduino’s string functions;
+
*HTTP protocol is textual, you can easily manage it with Arduino's string functions;
 
*HTML language is also textual, you can easily create pages -also dynamic ones- with Arduino.
 
*HTML language is also textual, you can easily create pages -also dynamic ones- with Arduino.
  
Line 42: Line 42:
 
==Debug==
 
==Debug==
  
Step 1:Download the EtherCard library and copy to your libraries fold of IDE, then restart IDE.
+
Step 1: Download the EtherCard library and copy to your libraries fold of IDE, then restart IDE.
 
https://github.com/jcw/ethercard
 
https://github.com/jcw/ethercard
  
Step 2:Explain the program:
+
Step 2:  Explain the program:
I’m going to show you a simple program that prints on serial connection browser‘s requests and answers with a simple HTML page. This program is useful to understand how to use HTTP functions and also to find out which informations a browser sends within the request (you’ll learn how to use those informations in a coming post).
+
I'm going to show you a simple program that prints on serial connection browser's requests and answers with a simple HTML page. This program is useful to understand how to use HTTP functions and also to find out which information a browser sends within the request (you'll learn how to use those information in a coming post).
  
The complete sketch is available on GitHub’s repository, here is the most important code:
+
The complete sketch is available on GitHub's repository, here is the most important code:
  
 
   word len = ether.packetReceive();
 
   word len = ether.packetReceive();
Line 63: Line 63:
  
 
     BufferFiller bfill = ether.tcpOffset();
 
     BufferFiller bfill = ether.tcpOffset();
To store the response I’m going to send to client’s browser, I use a BufferFiller object. This object inherits from Print class and its constructor gets as parameter the ethernet’s buffer address (tcpOffset) where the response has to be saved.
+
To store the response I'm going to send to client's browser, I use a BufferFiller object. This object inherits from Print class and its constructor gets as parameter the ethernet's buffer address (tcpOffset) where the response has to be saved.
  
 
     bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n"
 
     bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n"
Line 73: Line 73:
 
At last, with httpServerReply() method, I send the response to the browser. This method needs, as a parameter, the number of characters to be sent. I can get the number of characters BufferFiller contains with its method position().
 
At last, with httpServerReply() method, I send the response to the browser. This method needs, as a parameter, the number of characters to be sent. I can get the number of characters BufferFiller contains with its method position().
  
Step 3:Compile the code and download it.
+
Step 3: Compile the code and download it.
  
 
Step 4: Check you ip address by the serial port. Input the Microduino's IP in browser...
 
Step 4: Check you ip address by the serial port. Input the Microduino's IP in browser...
Line 86: Line 86:
 
[[File:basicServerSerialCutImage.jpg|600px|center|thumb]]
 
[[File:basicServerSerialCutImage.jpg|600px|center|thumb]]
  
You may ask why the browser sent two requests, one for the page /(that is the site’s homepage) and one for the image favicon.ico. That is the icon some sites show next to their address; here’s for example the icon from DangerousPrototypes:
+
You may ask why the browser sent two requests, one for the page "/" (that is the site's homepage) and one for the image favicon.ico. That is the icon some sites show next to their address; here's for example the icon from DangerousPrototypes:
 
[[File:yeelinkfavicon.jpg|600px|center|thumb]]
 
[[File:yeelinkfavicon.jpg|600px|center|thumb]]
  

Latest revision as of 10:00, 12 September 2016

Language: English  • 中文

Objective

This tutorial will show you how to make Microduino act like a web server, so you can access it in your home network.

Equipment

  • Other equipment
    • USB cable

World Wide Web

Among the network services, the most used one is surely the web service: every time you "surf" on a website, the program you use (named browser) connects to the web server hosting that site using HTTP protocol and gets the content (pages, images, videos…) to show.

Web pages are composed using a markup language named HTML; this language uses tags to describe page content.

The main advantages in using HTTP to talk with Arduino on a network connection are:

  • You don't need to develop a dedicated client, you can use a common internet browser (Internet Explorer, Firefox…);
  • HTTP protocol is textual, you can easily manage it with Arduino's string functions;
  • HTML language is also textual, you can easily create pages -also dynamic ones- with Arduino.

Schematic

  • Microduino-ENC28J60
  • Microduino-RJ45
  • Microduino-Core
  • Microduino-FT232R

Stack all modules and then connect the ethernet cable, as follows:

MicroduinoENCShow.jpg

Program

Refer to ENCnetworkfive

Debug

Step 1: Download the EtherCard library and copy to your libraries fold of IDE, then restart IDE. https://github.com/jcw/ethercard

Step 2: Explain the program: I'm going to show you a simple program that prints on serial connection browser's requests and answers with a simple HTML page. This program is useful to understand how to use HTTP functions and also to find out which information a browser sends within the request (you'll learn how to use those information in a coming post).

The complete sketch is available on GitHub's repository, here is the most important code:

 word len = ether.packetReceive();
 word pos = ether.packetLoop(len);

In the loop I save in a variable the return value of packetLoop() method: this value is the position, within the rx buffer, where browser’s request starts.

 if(pos) {

   Serial.println("---------- NEW PACKET ----------");
   Serial.println((char *)Ethernet::buffer + pos);
   Serial.println("--------------------------------");
   Serial.println();

If pos is greater than zero, I really received a correct request and I can print it on serial port (buffer + pos is the position to start).

   BufferFiller bfill = ether.tcpOffset();

To store the response I'm going to send to client's browser, I use a BufferFiller object. This object inherits from Print class and its constructor gets as parameter the ethernet's buffer address (tcpOffset) where the response has to be saved.

   bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\n"
        "Content-Type: text/html\r\nPragma: no-cache\r\n\r\n"
"<html><body>

BasicServer Demo

</body></html>"));

With emit_p() method I can save data in the buffer: for this example I create a simple HTML page that shows BasicServer Demo text. To save RAM memory space, I use PSTR() macro that stores strings in the PROGRAM.

   ether.httpServerReply(bfill.position());

At last, with httpServerReply() method, I send the response to the browser. This method needs, as a parameter, the number of characters to be sent. I can get the number of characters BufferFiller contains with its method position().

Step 3: Compile the code and download it.

Step 4: Check you ip address by the serial port. Input the Microduino's IP in browser...

Result

the result should be like this:

BasicServerDemo.jpg

And on your serial monitor:

BasicServerSerialCutImage.jpg

You may ask why the browser sent two requests, one for the page "/" (that is the site's homepage) and one for the image favicon.ico. That is the icon some sites show next to their address; here's for example the icon from DangerousPrototypes:

Yeelinkfavicon.jpg

Video