STM32入门教程：网页控制

CrMylive.

于 2024-08-20 10:19:07 发布

阅读量92

点赞数 2

文章标签： stm32 嵌入式硬件单片机

本文链接：https://blog.csdn.net/qq_34910341/article/details/141351092

版权

STM32是一款广泛应用于嵌入式系统开发的微控制器，具有高性能、低功耗和丰富的外设资源。在本教程中，我们将通过一个案例来介绍如何利用网页控制STM32的内容。

案例背景：假设我们希望通过网页来控制STM32的一个GPIO口的状态，即可以通过点击网页上的一个按钮来控制STM32上的一个LED灯的亮灭。我们需要实现以下功能：

搭建一个简单的网页界面，包含一个按钮和一个状态指示灯。
当点击按钮时，网页发送一个请求给STM32，要求改变LED灯的状态。
STM32接收到请求后，相应地改变GPIO口的状态，从而控制LED灯的亮灭。
STM32向网页发送响应，告知操作是否成功。

接下来，我们将逐步介绍如何实现这个功能。

步骤一：搭建网页界面我们可以使用HTML、CSS和JavaScript来构建网页界面。首先，创建一个HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>STM32 Web Control</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>STM32 Web Control</h1>
    <button id="led-button" onclick="toggleLed()">Toggle LED</button>
    <p id="led-status">LED Off</p>
    <script>
        function toggleLed() {
            $.ajax({
                url: "http://<STM32的IP地址>/toggle-led",
                method: "POST",
                success: function(response) {
                    $("#led-status").text(response);
                },
                error: function() {
                    $("#led-status").text("Error");
                }
            });
        }
    </script>
</body>
</html>

在上面的代码中，我们引入了jQuery库，用于发送HTTP请求。页面上有一个按钮和一个显示LED状态的段落。当按钮被点击时，会调用toggleLed()函数，该函数会发送一个POST请求到STM32的地址，并根据响应更新LED状态的显示。

步骤二：STM32的搭建接下来，我们需要搭建STM32的开发环境，并编写相应的代码来处理网页请求。假设我们使用STM32CubeIDE进行开发。

首先，创建一个新的STM32Cube项目，并选择适合你的STM32型号。

然后，在生成的代码框架中找到main.c文件，添加以下代码：

#include "main.h"
#include "lwip.h"
#include "lwip/api.h"
#include "string.h"

/* GPIO Pin Definitions */
#define LED_PIN GPIO_PIN_13
#define LED_GPIO_PORT GPIOC

/* Custom HTTP API Endpoint */
#define TOGGLE_LED_ENDPOINT "/toggle-led"

void toggle_led(void)
{
    HAL_GPIO_TogglePin(LED_GPIO_PORT, LED_PIN);
}

/* Custom HTTP Request Handler */
const char* handle_http_request(const char* request, int* response_length)
{
    if (strcmp(request, TOGGLE_LED_ENDPOINT) == 0)
    {
        toggle_led();
        return "LED Toggled";
    }
    
    return "Invalid Endpoint";
}

/* LWIP Callbacks */
void http_server_serve(struct netconn *conn)
{
    struct netbuf *inbuf;
    char *request;
    uint16_t request_length;
  
    if (netconn_recv(conn, &inbuf) == ERR_OK)
    {
        netbuf_data(inbuf, (void**)&request, &request_length);
    
        char* response = handle_http_request(request, &request_length);
        
        struct netconn *newconn;
        newconn = netconn_new(NETCONN_TCP);
        netconn_accept(conn, &newconn);
        
        char response_header[100];
        sprintf(response_header, "HTTP/1.1 200 OK\r\nContent-Length: %d\r\n\r\n", strlen(response));
      
        netconn_write(newconn, response_header, strlen(response_header), NETCONN_COPY);
        netconn_write(newconn, response, strlen(response), NETCONN_COPY);
        
        netconn_close(newconn);
        
        netbuf_delete(inbuf);
    }
}

void http_server_thread(void const * argument)
{
    struct netconn *conn, *newconn;
    err_t err;
    conn = netconn_new(NETCONN_TCP);
  
    if (conn != NULL)
    {
        err = netconn_bind(conn, IP_ADDR_ANY, 80);
      
        if (err == ERR_OK)
        {
            netconn_listen(conn);
            
            while (1)
            {
                err = netconn_accept(conn, &newconn);
                
                if (err == ERR_OK)
                {
                    http_server_serve(newconn);
                    netconn_delete(newconn);
                }
            }
        }
    }
}

int main(void)
{
    ...
    /* Initialize LWIP stack */
    lwip_init();
    
    /* Create HTTP server thread */
    sys_thread_new("HTTPServer", http_server_thread, NULL, DEFAULT_THREAD_STACKSIZE, osPriorityNormal);
  
    while (1)
    {
       ...
    }
}

在上述代码中，我们定义了LED的引脚和端口，并添加了一个toggle_led()函数来切换LED的状态。我们还定义了一个自定义的HTTP请求处理函数handle_http_request()，用于处理网页请求。在该函数中，我们根据请求的URL判断应该执行什么操作，并返回相应的响应。

此外，我们还实现了一个HTTP服务器的线程http_server_thread()，负责接收并处理来自网页的请求。当有一个请求到达时，服务器会调用http_server_serve()函数来处理请求，并返回响应。在这里，我们使用LWIP库来处理TCP连接和HTTP请求。

步骤三：编译和烧录代码完成STM32的代码编写后，我们需要编译并烧录到STM32的Flash存储器中。在STM32CubeIDE中，选择适当的目标设备，并点击“Build”按钮来编译代码。然后，将STM32通过JTAG或SWD接口连接到开发计算机，并点击“Debug”按钮来烧录代码到STM32。

步骤四：运行程序编译和烧录代码后，我们可以将STM32连接到电源，并通过网线将其连接到局域网中的路由器或交换机。

现在，打开一个Web浏览器，输入STM32的IP地址（在网页代码中设置）即可访问网页界面。点击"Toggle LED"按钮，即可通过网页控制STM32上的LED灯的亮灭。

通过以上步骤，我们成功实现了通过网页来控制STM32的功能。这个案例可以作为你进一步学习STM32的入门教程，并了解如何通过网络接口来控制STM32的内容。希望这个教程对你有所帮助！

CrMylive.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
STM32入门教程：网页控制

步骤三：编译和烧录代码完成STM32的代码编写后，我们需要编译并烧录到STM32的Flash存储器中。当按钮被点击时，会调用toggleLed()函数，该函数会发送一个POST请求到STM32的地址，并根据响应更新LED状态的显示。案例背景：假设我们希望通过网页来控制STM32的一个GPIO口的状态，即可以通过点击网页上的一个按钮来控制STM32上的一个LED灯的亮灭。步骤二：STM32的搭建接下来，我们需要搭建STM32的开发环境，并编写相应的代码来处理网页请求。，负责接收并处理来自网页的请求。
复制链接

扫一扫