1 Introduction

The Web is just a static text and image display platform. With the continuous development and popularization of technology, the Web has gradually evolved into a multimedia platform integrating text, images, audio, video and other media, and has begun to support dynamic content and Interactivity.

 W5100S/W5500 is an embedded Ethernet controller integrating a full hardware TCP/IP protocol stack. It is also an industrial-grade Ethernet control chip. This tutorial will introduce the basic principles, usage steps, application examples and precautions of W5100S/W5500 Ethernet DHCP application to help readers better master this technology.

2 Protocol Introduction

2 .1 What is the Web?

Web (World Wide Web) is the global wide area network, also known as the World Wide Web. It is a global, dynamically interactive, cross-platform distributed graphical information system based on hypertext and HTTP. A network service built on the Internet that provides a graphical, easy-to-access and intuitive interface for viewers to find and browse information on the Internet. The documents and hyperlinks organize the information nodes on the Internet into an interconnected network structure.

2.2 Advantages of the Web

The characteristics of the Web mainly include the following aspects:

Graphical and easy to navigate: Web pages can contain colorful graphics and text, allowing users to obtain information more intuitively. At the same time, the Web is also easy to navigate, and users can jump between different pages through hyperlinks.

Platform-independent: The Web is implemented through a browser and has nothing to do with operating systems, hardware platforms, etc., allowing anyone to access the Web on any device.

Distributed: Information on the Web can be distributed on different servers, and users can access different sites through browsers to obtain information. This distributed structure allows the Web to store and process large amounts of information.

Dynamic and real-time: The website can update information at any time, and users can obtain the latest information in real time through the browser.

Interactivity: The Web supports interaction between users and servers. Users can submit information through forms, comments, etc., and the server can return corresponding information according to user needs.

2.3 Principles of Web data interaction

In daily applications, most of the static information seen on web pages is either video or audio files. But in the Internet of Things, a common requirement is that Web data can change. at present. The most commonly used HTML1.1 only defines a request and response before disconnecting. Intuitively, if the browser is not refreshed, the data of the web page will not change.

As web pages require more and more rich content, static content described by plain text HTML can no longer meet the needs. As a result, based on HTML markup extensions, the language running in the browser began to be embedded in web pages. java-script is a scripting language that implements programming in the form of small program segments. Its basic structural form is very similar to C, C++, VB, and DELPHI, but it does not require compilation, but gradually gives comments during the running process of the program.

JSON is used below, which is a lightweight data exchange format that is very suitable for interaction between the server and javascript. In the JSON program, a new HTTP request is sent to the server to request the required data information; after getting the reply, the script on the web page updates the data display without refreshing the web page.

2.4 Web application scenarios

The application scenarios of the Web are very wide. The following are some common application scenarios:

E-commerce: The Web makes e-commerce possible. Through websites and online stores, merchants can sell products and services to consumers around the world. Consumers can browse and purchase goods online, and merchants can manage inventory and orders.

Social media: Social media websites are one of the most popular applications on the Web. Users can share and exchange information, post photos and videos, participate in discussions and vote, etc. on these platforms.

Online learning: The Web makes online learning possible. Users can find and browse various learning resources online, such as online courses, e-books, tutorials, etc.

Online entertainment: The Web provides a large number of online entertainment resources, such as music, movies, games, animations, etc. Users can watch movies, listen to music, play games, read e-books, etc. online.

Internet of Things: Internet of Things technology can connect physical devices to the Internet, allowing users to remotely control and manage these devices through the Web, such as smart homes, smart health, etc.

Remote work: The Web makes remote work possible. Users can access the company's internal network and resources through the Internet from anywhere, such as online office systems, video conferencing, etc.

Online News: Online news websites provide real-time news reports and information updates, and users can view the latest news and current affairs online.

Search engine: Search engine is one of the most commonly used tools on the Web. Users can use search engines to find and search information, such as web pages, pictures, videos, etc.

3 WIZnet Ethernet chip

WIZnet mainstream hardware protocol stack Ethernet chip parameter comparison

W5100S/W6100 supports 8-bit data bus interface, and the network transmission speed will be better than W5500.

W6100 supports IPv6 and is compatible with W5100S hardware. If users who already use W5100S need to support IPv6, they can be Pin to Pin compatible.

W5500 has more Sockets and send and receive buffers than W5100S.

4 HTTP Network Settings Example Overview and Usage

4.1 Flowchart

The running block diagram of the program is as follows:

4.2 Core preparation work

Software

Visual Studio Code

WIZnet UartTool

Hardware

W5100SIO module + RP2040 Raspberry Pi Pico development board or WIZnet W5100S-EVB-Pico development board

Micro USB interface data cable

TTL to USB

cable

4.3 Connection method

Connect the USB port of the PC through the data cable (mainly used for burning programs, but can also be used as a virtual serial port)

Convert TTL serial port to USB and connect the default pin of UART0:

RP2040 GPIO0 (UART0 TX) <----> USB_TTL_RX

RP2040 GPIO1 (UART0 RX) <----> USB_TTL_TX

When wiring using module connection RP2040

RP2040 GPIO16 <----> W5100S MISO

RP2040 GPIO17 <----> W5100S CS

RP2040 GPIO18 <----> W5100S SCK

RP2040 GPIO19 <----> W5100S MOSI

RP2040 GPIO20 <----> W5100S RST

Connect the P

4.4 Main code overview

We are using the official ioLibrary_Driver library of WIZnet. The library supports rich protocols and is easy to operate. The chip integrates the TCP/IP protocol stack on the hardware. The library also encapsulates the protocols above the TCP/IP layer. We only need to simply call the corresponding function to complete the application of the protocol. .

Step 1: Add the corresponding .h file to the webio.c file.

Step 2: Define the macros required for DHCP configuration and the macros for the HTTP sever's maximum connection socket.

Step 3: Configure network information, turn on DHCP mode, and define HTTP sever socket table.

Step 4: Write a timer callback processing function for the DHCP 1 second tick timer processing function.

Step 5: The main function first defines a timer structure parameter to trigger the timer callback function, initializes the serial port and SPI, then writes the network configuration parameters of W5100S, initializes DHCP and starts DHCP to obtain the IP. Print the obtained IP. When the number of acquisitions exceeds the maximum number of acquisitions, use the static IP. After initializing the HTTP server, start setting up the server display interface. Set up the parameter display of the development board, the picture and the light switch, and pass in the socket number to the main loop. Execute the loopback test function to wait for the client to connect.

#include <stdio.h>
#include "pico/stdlib.h"
#include "pico/binary_info.h"
#include "hardware/spi.h"
​
#include "wizchip_conf.h"
#include "bsp_spi.h"
#include "dhcp.h"       // Use dhcp
#include "socket.h"     // Use socket
#include "httpServer.h" // Use http
#include "webpage.h"    //Web Source Code
​
#define SOCKET_ID 0                      // Socket number
#define ETHERNET_BUF_MAX_SIZE (1024 * 2) // Send and receive cache size
#define DHCP_RETRY_COUNT 5               // DHCP retry times
#define MAX_HTTPSOCK 3                   // MAX HTTP SOCKET
​
/**
 * @brief   Timer callback processing function, used for dhcp timing processing
 * @param   repeating :Timer structure
 * @return  bool
 */
bool repeating_timer_callback(struct repeating_timer *t);
​
/**
 * @brief   Initialization of chip network information
 * @param   conf_info :Static configuration information
 * @return  none
 */
void network_init(wiz_NetInfo *conf_info);
​
/**
 * @brief   chip restart
 * @param   none
 * @return  none
 */
void chip_restart(void);
/* Network information to be configured. */
wiz_NetInfo net_info = {
    .mac = {0x00, 0x44, 0x55, 0x66, 0xed, 0x2e}, // Configured MAC address
    .ip = {192, 168, 1, 10},                     // Configured IP address
    .sn = {255, 255, 255, 0},                    // Configured subnet mask
    .gw = {192, 168, 1, 1},                      // Configured gateway
    .dns = {8, 8, 8, 8},                         // Configured domain address
    .dhcp = NETINFO_DHCP};                       // Configured dhcp model,NETINFO_DHCP:use dhcp; NETINFO_STATIC: use static ip.
​
static uint8_t http_tx_ethernet_buf[ETHERNET_BUF_MAX_SIZE] = {
    0,
};
static uint8_t http_rx_ethernet_buf[ETHERNET_BUF_MAX_SIZE] = {
    0,
};
static uint8_t dhcp_ethernet_buf[ETHERNET_BUF_MAX_SIZE] = {
    0,
};
static uint8_t socknumlist[] = {1, 2, 3}; // http socknumlist
static uint8_t breakout_flag = 0;            // Define the DHCP acquisition flag
uint16_t LED_pin[10] = {
    25,
};
int main()
{
    int i;
    struct repeating_timer timer; // Define the timer structure
    wiz_NetInfo get_info;
    /* MCU init */
    stdio_init_all();     // Initialize the main control peripheral
    wizchip_initialize(); // Initialize the chip interface
    wizchip_setnetinfo(&net_info); // Configure once first
    
    /*dhcp init*/
    DHCP_init(SOCKET_ID, dhcp_ethernet_buf);                              // DHCP initialization
    add_repeating_timer_ms(1000, repeating_timer_callback, NULL, &timer); // Add DHCP 1s Tick Timer handler
​
    printf("wiznet chip http server example.\r\n");
    network_init(&net_info);              // Configuring Network Information
    print_network_information(&get_info); // Read back the configuration information and print it
​
    httpServer_init(http_tx_ethernet_buf, http_rx_ethernet_buf, MAX_HTTPSOCK, socknumlist); // HTTP Server initialization
    reg_httpServer_cbfunc(chip_restart, NULL);
    // GPIO initialization
    {
        gpio_init(LED_pin[0]);
        gpio_set_dir(LED_pin[0], GPIO_OUT);
    }
    // Index page and netinfo / base64 image demo
    {
    reg_httpServer_webContent((uint8_t *)"index.html", (uint8_t *)index_page);          // index.html       : Main page example
    reg_httpServer_webContent((uint8_t *)"netinfo.html", (uint8_t *)netinfo_page);      // netinfo.html     : Network information example page
    reg_httpServer_webContent((uint8_t *)"netinfo.js", (uint8_t *)w5x00web_netinfo_js); // netinfo.js       : JavaScript for Read Network configuration     (+ ajax.js)
    reg_httpServer_webContent((uint8_t *)"img.html", (uint8_t *)img_page);              // img.html         : Base64 Image data example page
​
    // Example #1
    reg_httpServer_webContent((uint8_t *)"dio.html", (uint8_t *)dio_page);      // dio.html         : Digital I/O control example page
    reg_httpServer_webContent((uint8_t *)"dio.js", (uint8_t *)w5x00web_dio_js); // dio.js           : JavaScript for digital I/O control    (+ ajax.js)
​
    // AJAX JavaScript functions
    reg_httpServer_webContent((uint8_t *)"ajax.js", (uint8_t *)w5x00web_ajax_js); // ajax.js            : JavaScript for AJAX request transfer
    }
    while (true)
    {
        for (i = 0; i < MAX_HTTPSOCK; i++)
        {
            httpServer_run(i);
        }
    }
}
​
void network_init(wiz_NetInfo *conf_info)
{
    int count = 0;
    uint8_t dhcp_retry = 0;
​
    if (conf_info->dhcp == NETINFO_DHCP)
    {
        while (true)
        {
            switch (DHCP_run()) // Do the DHCP client
            {
            case DHCP_IP_LEASED: // DHCP resolves the domain name successfully
            {
                if (breakout_flag == 0)
                {
                    printf("DHCP success\r\n");
                    getIPfromDHCP((*conf_info).ip);
                    getGWfromDHCP((*conf_info).gw);
                    getSNfromDHCP((*conf_info).sn);
                    getDNSfromDHCP((*conf_info).dns);
                    wizchip_setnetinfo(conf_info); // Configuring Network Information
                    close(SOCKET_ID);              // After dhcp close the socket, avoid errors in later use
                    breakout_flag = 1;
                }
                break;
            }
            case DHCP_FAILED:
            {
                printf(" DHCP failed \r\n");
                count++;
                if (count <= DHCP_RETRY_COUNT) // If the number of times is less than or equal to the maximum number of times, try again
                {
                    printf("DHCP timeout occurred and retry %d \r\n", count);
                }
                else if (count > DHCP_RETRY_COUNT) // If the number of times is greater than DHCP fails
                {
                    breakout_flag = 1; // if DHCP fail, use the static
                    DHCP_stop();       // Stop processing DHCP protocol
                    conf_info->dhcp = NETINFO_STATIC;
                    wizchip_setnetinfo(conf_info); // Configuring Network Information
                    break;
                }
                break;
            }
            }
            if (breakout_flag)
            {
                printf("config success\r\n");
                break;
            }
        }
    }
    else
    {
        wizchip_setnetinfo(conf_info); // Configuring Network Information
    }
}
​
bool repeating_timer_callback(struct repeating_timer *t)
{
    DHCP_time_handler(); // DHCP 1s Tick Timer handler
    httpServer_time_handler();
    return true;
}
​
void chip_restart(void)
{
    gpio_init(PIN_RST);
    gpio_set_dir(PIN_RST, GPIO_OUT);
​
    gpio_put(PIN_RST, 0);
    sleep_ms(1000);
​
    gpio_put(PIN_RST, 1);
    sleep_ms(1000);
}

4.5 Results demonstration

1. Open WIZ UartTool, fill in the parameters, and press the reset button to see the serial port printing the information obtained by DHCP. At this time, the light status is not on.

2. Open the browser and enter the IP obtained by the development board, and connect to the development board.

3. Enter the light control interface to control the light. You can see that the serial port will receive instructions from the PC and respond, and then the light will turn on.

5 Precautions

If we want to use WIZnet's W5500 to implement the example in this chapter, we only need to modify two places:

(1) Find the wizchip_conf.h header file under library/ioLibrary_Driver/Ethernet/ and modify the WIZCHIP macro definition to W5500.

(2) Find the CMakeLists.txt file under library and set COMPILE_SEL to ON. OFF is W5100S and ON is W5500.