前言：手里恰好有一个空余的ESP32。想着可以做一个RS485串口调试工具。

资源：esp32读取RS485串口小工具

功能

1.esp32在AP模式下，手机连接上esp32的wifi。
2.用手机浏览器实现在线调试RS485.

硬件要求

1.esp32，大概17块。(便宜点可以用esp8266代替，淘宝10块左右)
2.MAX485模块，大概2块左右。功能为ttl转RS485。优点便宜，2块左右。缺点是无法自动流控。可以选自动流控的模块，大概10块左右。
3.电源。可以用充电宝。
4.不要钱的信号线。
5.micro USB线（带有通讯功能）用于调试。

步骤

软件部分

1. 电脑下载安装好Thonny，官网下载源为github，十分缓慢。可以点此下载。电脑安装好CH340的驱动，点此下载。
   2.将固件刷成micropython。
   3.打开安装好的Thonny软件。点击运行——配置解释器——解释器。在界面中选择哪种解释器，micropython(esp32)。本次使用的是esp32.在端口选择esp32的com口。然后点击安装或者更新micropython。按要求下载，等待下载完成。
   4.在Tonny的视图，把文件勾选上。然后新建一个main.py文件。然后把程序输入：

import network
import socket
from machine import UART, Pin
import time
import gc
import json
# 全局变量
rs485_data = []
max_data_length = 1000
current_baudrate = 4800
display_format = "ascii"
uart_instance = None  # 全局UART实例
# 配置AP模式（开放网络）
def setup_ap():
    ap = network.WLAN(network.AP_IF)
    ap.active(True)
    # 创建开放网络，无需密码
    ap.config(essid='ESP32-RS485-Web', password='', authmode=0)
    ap.ifconfig(('192.168.4.1', '255.255.255.0', '192.168.4.1', '8.8.8.8'))

    while not ap.active():
        pass

    print('AP模式已启动 - 开放网络')
    print('网络名称: ESP32-RS485-Web')
    print('IP地址: 192.168.4.1')
    return ap
# 初始化RS485串口
def setup_rs485(baudrate=4800):
    global uart_instance
    # 如果已有实例，先关闭
    if uart_instance:
        try:
            uart_instance.deinit()
            time.sleep(0.1)
        except:
            pass

    # 创建新的UART实例
    uart_instance = UART(2, baudrate=baudrate, bits=8, parity=None, stop=1, rx=16, tx=17)
    print(f"RS485串口已初始化，波特率: {baudrate}")
    return uart_instance
# 读取RS485数据（增强稳定性）
def read_rs485_data(uart):
    global rs485_data
    try:
        if uart and uart.any():
            data = uart.read()
            if data:
                timestamp = time.ticks_ms()
                hex_data = data.hex()
                ascii_data = ''.join([chr(b) if 32 <= b < 127 else '.' for b in data])

                # 新数据插入到前面
                rs485_data.insert(0, {
                    'timestamp': timestamp,
                    'hex': hex_data,
                    'ascii': ascii_data,
                    'length': len(data)
                })

                # 限制数据列表长度
                if len(rs485_data) > max_data_length:
                    rs485_data = rs485_data[:max_data_length]

                print(f"收到RS485数据: {hex_data} (ASCII: {ascii_data})")
                return True
    except Exception as e:
        print(f"读取RS485数据错误: {e}")
        # 尝试重新初始化串口
        try:
            setup_rs485(current_baudrate)
        except:
            pass

    return False
# 发送数据到RS485
def send_rs485_data(uart, data_str, data_type='hex'):
    try:
        if not uart:
            return False, "串口未初始化"

        if data_type == 'hex':
            data_str = data_str.replace(' ', '').replace('\n', '').replace('\r', '')
            if len(data_str) % 2 != 0:
                return False, "十六进制数据长度必须为偶数"

            try:
                data_bytes = bytes.fromhex(data_str)
            except ValueError:
                return False, "无效的十六进制数据"

        elif data_type == 'ascii':
            data_bytes = data_str.encode('utf-8')
        else:
            return False, "未知的数据类型"

        uart.write(data_bytes)
        print(f"发送数据到RS485: {data_bytes.hex()}")
        return True, "数据发送成功"

    except Exception as e:
        return False, f"发送失败: {str(e)}"
# 生成数据表格HTML
def generate_data_table():
    global rs485_data, display_format

    data_rows = ""
    if not rs485_data:
        data_rows = "<tr><td colspan='4' style='text-align: center;'>暂无数据</td></tr>"
    else:
        for i, data in enumerate(rs485_data[:50]):
            time_str = f"{time.ticks_ms() - data['timestamp']}ms前"
            data_content = data['hex'] if display_format == "hex" else data['ascii']

            data_rows += f"""
            <tr>
                <td>{i+1}</td>
                <td>{time_str}</td>
                <td>{data_content}</td>
                <td>{data['length']}</td>
            </tr>
            """

    return data_rows
# 生成网页HTML
def generate_html(status_message=""):
    global rs485_data, current_baudrate, display_format

    html = f"""
    <!DOCTYPE html>
    <html>
    <head>
        <title>ESP32 RS485监控</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body {{ font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; }}
            .container {{ max-width: 1200px; margin: 0 auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }}
            h1 {{ color: #333; text-align: center; }}
            .section {{ margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }}
            table {{ width: 100%; border-collapse: collapse; margin: 10px 0; }}
            th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
            th {{ background-color: #f2f2f2; }}
            .form-group {{ margin: 10px 0; }}
            label {{ display: inline-block; width: 150px; }}
            input, select, textarea {{ padding: 5px; margin: 5px 0; }}
            button {{ background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }}
            button:hover {{ background-color: #45a049; }}
            .btn-danger {{ background-color: #f44336; }}
            .btn-danger:hover {{ background-color: #da190b; }}
            .status {{ padding: 10px; margin: 10px 0; border-radius: 4px; }}
            .success {{ background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }}
            .error {{ background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }}
            #data-table {{ max-height: 400px; overflow-y: auto; display: block; }}
            .new-data {{ background-color: #e8f5e8; transition: background-color 2s; }}
            .display-selector {{ margin-left: 20px; }}
            .connection-status {{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }}
            .connected {{ background-color: #4CAF50; }}
            .disconnected {{ background-color: #f44336; }}
        </style>
        <script>
            var currentDisplayFormat = '{display_format}';
            var isConnected = true;

            // 刷新数据表格
            function refreshData() {{
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {{
                    if (xhr.readyState === 4) {{
                        if (xhr.status === 200) {{
                            document.getElementById('data-body').innerHTML = xhr.responseText;
                            document.getElementById('data-count').innerText = document.getElementById('data-body').rows.length;

                            // 高亮新数据
                            var rows = document.getElementById('data-body').getElementsByTagName('tr');
                            if (rows.length > 0) {{
                                rows[0].classList.add('new-data');
                                setTimeout(function() {{
                                    if (rows.length > 0) {{
                                        rows[0].classList.remove('new-data');
                                    }}
                                }}, 2000);
                            }}
                            updateConnectionStatus(true);
                        }} else {{
                            updateConnectionStatus(false);
                        }}
                    }}
                }};
                xhr.open('GET', '/data?format=' + currentDisplayFormat, true);
                xhr.timeout = 5000;
                xhr.ontimeout = function() {{
                    updateConnectionStatus(false);
                }};
                xhr.send();
            }}

            // 更新连接状态显示
            function updateConnectionStatus(connected) {{
                isConnected = connected;
                var statusElement = document.getElementById('connection-status');
                var statusText = document.getElementById('connection-status-text');

                if (connected) {{
                    statusElement.className = 'connection-status connected';
                    statusText.innerText = '已连接';
                    statusText.style.color = '#4CAF50';
                }} else {{
                    statusElement.className = 'connection-status disconnected';
                    statusText.innerText = '连接中断';
                    statusText.style.color = '#f44336';
                }}
            }}

            // 切换显示格式
            function switchDisplayFormat() {{
                var formatSelect = document.getElementById('display-format');
                currentDisplayFormat = formatSelect.value;

                var header = document.getElementById('data-content-header');
                header.innerText = currentDisplayFormat === 'hex' ? '数据内容 (十六进制)' : '数据内容 (ASCII)';

                refreshData();
            }}

            // 修改波特率
            function updateBaudrate() {{
                var baudrate = document.getElementById('baudrate').value;
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/baudrate', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onload = function() {{
                    if (xhr.status === 200) {{
                        var response = JSON.parse(xhr.responseText);
                        if (response.success) {{
                            showStatus('波特率已修改为: ' + baudrate, 'success');
                            document.getElementById('current-baudrate').innerText = baudrate;
                            // 不刷新页面，继续正常数据更新
                            refreshData();
                        }} else {{
                            showStatus('波特率修改失败: ' + response.message, 'error');
                        }}
                    }} else {{
                        showStatus('网络错误，请检查连接', 'error');
                    }}
                }};
                xhr.onerror = function() {{
                    showStatus('网络错误，请检查连接', 'error');
                }};
                xhr.send('baudrate=' + baudrate);
                return false;
            }}

            // 显示状态消息
            function showStatus(message, type) {{
                var statusDiv = document.getElementById('status-message');
                statusDiv.innerHTML = '<div class="status ' + type + '">' + message + '</div>';
                setTimeout(function() {{
                    statusDiv.innerHTML = '';
                }}, 3000);
            }}

            // 设置定时器
            setInterval(refreshData, 1000);
            window.onload = refreshData;
        </script>
    </head>
    <body>
        <div class="container">
            <h1>ESP32 RS485监控界面</h1>
            <div id="status-message"></div>

            <!-- 接收数据 -->
            <div class="section">
                <h3>接收数据 (最近50条，新数据在前) 
                    <select id="display-format" class="display-selector" onchange="switchDisplayFormat()">
                        <option value="ascii" {'selected' if display_format == 'ascii' else ''}>ASCII</option>
                        <option value="hex" {'selected' if display_format == 'hex' else ''}>十六进制</option>
                    </select>
                    <span style="margin-left: 20px;">
                        <span id="connection-status" class="connection-status connected"></span>
                        <span id="connection-status-text" style="color: #4CAF50;">已连接</span>
                    </span>
                </h3>
                <div id="data-table">
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>时间</th>
                                <th id="data-content-header">数据内容 (ASCII)</th>
                                <th>长度</th>
                            </tr>
                        </thead>
                        <tbody id="data-body">
                            {generate_data_table()}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 系统状态 -->
            <div class="section">
                <h3>系统状态</h3>
                <p><strong>IP地址:</strong> 192.168.4.1</p>
                <p><strong>当前波特率:</strong> <span id="current-baudrate">{current_baudrate}</span> bps</p>
                <p><strong>数据条数:</strong> <span id="data-count">{len(rs485_data)}</span></p>
            </div>

            <!-- 串口配置 -->
            <div class="section">
                <h3>串口配置</h3>
                <form onsubmit="return updateBaudrate()">
                    <div class="form-group">
                        <label for="baudrate">波特率:</label>
                        <select id="baudrate" name="baudrate">
                            <option value="4800" {'selected' if current_baudrate == 4800 else ''}>4800</option>
                            <option value="9600" {'selected' if current_baudrate == 9600 else ''}>9600</option>
                            <option value="19200" {'selected' if current_baudrate == 19200 else ''}>19200</option>
                            <option value="38400" {'selected' if current_baudrate == 38400 else ''}>38400</option>
                            <option value="57600" {'selected' if current_baudrate == 57600 else ''}>57600</option>
                            <option value="115200" {'selected' if current_baudrate == 115200 else ''}>115200</option>
                        </select>
                        <button type="submit">应用波特率</button>
                    </div>
                </form>
            </div>

            <!-- 数据控制 -->
            <div class="section">
                <h3>数据控制</h3>
                <button type="button" class="btn-danger" onclick="clearData()">清除所有数据</button>
            </div>

            <!-- 发送数据 -->
            <div class="section">
                <h3>发送数据</h3>
                <form method="post" action="/send" onsubmit="return sendData()">
                    <div class="form-group">
                        <label for="data_type">数据类型:</label>
                        <select id="data_type" name="data_type">
                            <option value="hex">十六进制</option>
                            <option value="ascii">ASCII文本</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="send_data">发送数据:</label><br>
                        <textarea id="send_data" name="send_data" rows="3" cols="50" placeholder="输入要发送的数据..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit">发送数据</button>
                    </div>
                </form>
            </div>
        </div>
    </body>
    </html>
    """
    return html
# 处理HTTP请求
def handle_http_request(client_socket, uart):
    global rs485_data, current_baudrate, display_format

    try:
        request = client_socket.recv(1024).decode('utf-8')
        print("收到HTTP请求")

        request_line = request.split('\r\n')[0]
        method, path, _ = request_line.split(' ')

        response = ""
        content_type = "text/html"
        status_message = ""

        if method == 'GET' and path == '/':
            response = generate_html()

        elif method == 'GET' and path.startswith('/data'):
            if 'format=' in path:
                format_param = path.split('format=')[1].split('&')[0]
                display_format = format_param if format_param in ['hex', 'ascii'] else 'ascii'

            response = generate_data_table()
            content_type = "text/html"

        elif method == 'POST':
            if path == '/baudrate':
                content_length = 0
                for line in request.split('\r\n'):
                    if line.startswith('Content-Length:'):
                        content_length = int(line.split(':')[1].strip())
                        break

                if content_length > 0:
                    post_data = request.split('\r\n\r\n')[-1][:content_length]
                    params = {}
                    for pair in post_data.split('&'):
                        key, value = pair.split('=')
                        params[key] = value

                    new_baudrate = int(params.get('baudrate', '4800'))
                    try:
                        setup_rs485(new_baudrate)
                        current_baudrate = new_baudrate
                        print(f"波特率已修改为: {new_baudrate}")
                        # 返回JSON响应而不是重定向
                        response = json.dumps({"success": True, "message": "波特率修改成功"})
                        content_type = "application/json"
                    except Exception as e:
                        response = json.dumps({"success": False, "message": str(e)})
                        content_type = "application/json"

            elif path == '/send':
                content_length = 0
                for line in request.split('\r\n'):
                    if line.startswith('Content-Length:'):
                        content_length = int(line.split(':')[1].strip())
                        break

                if content_length > 0:
                    post_data = request.split('\r\n\r\n')[-1][:content_length]
                    params = {}
                    for pair in post_data.split('&'):
                        key, value = pair.split('=')
                        params[key] = value

                    data_type = params.get('data_type', 'hex')
                    send_data = params.get('send_data', '')

                    success, message = send_rs485_data(uart, send_data, data_type)
                    if success:
                        status_message = f"<div class='status success'>{message}</div>"
                    else:
                        status_message = f"<div class='status error'>{message}</div>"

            elif path == '/clear':
                rs485_data = []
                print("数据已清除")
                status_message = "<div class='status success'>数据已清除</div>"

            if content_type == "text/html":
                response = generate_html(status_message)

        # 发送HTTP响应
        http_response = f"""HTTP/1.1 200 OK
Content-Type: {content_type}; charset=utf-8
Connection: close
{response}"""

        client_socket.send(http_response.encode('utf-8'))

    except Exception as e:
        print("HTTP处理错误:", e)
    finally:
        client_socket.close()
# 主函数
def main():
    global current_baudrate, uart_instance

    # 设置AP模式（开放网络）
    ap = setup_ap()

    # 初始化RS485
    uart_instance = setup_rs485(current_baudrate)

    # 创建TCP服务器
    server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    server_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
    server_socket.bind(('0.0.0.0', 80))
    server_socket.listen(5)
    server_socket.settimeout(0.5)

    print("Web服务器已启动，端口: 80")
    print("打开浏览器访问: http://192.168.4.1")

    last_memory_clean = time.ticks_ms()

    while True:
        try:
            # 检查RS485数据
            if uart_instance:
                read_rs485_data(uart_instance)

            # 检查HTTP连接
            try:
                client_socket, addr = server_socket.accept()
                print("客户端连接来自:", addr)
                handle_http_request(client_socket, uart_instance)
            except socket.timeout:
                pass
            except OSError as e:
                if e.args[0] != 110:  # 忽略超时错误
                    raise

            # 定期清理内存
            if time.ticks_ms() - last_memory_clean > 30000:
                gc.collect()
                last_memory_clean = time.ticks_ms()

        except Exception as e:
            print("主循环错误:", e)
            time.sleep(1)
if __name__ == "__main__":
    main()

5.点击保存。在Tonny右下角点击micorpython(ESP32).COM7。在右键main.py，点击上传到 /。等待程序上传至esp32.至此软件部分结束。

硬件连接

1.esp32的16引脚接MAX485的R0引脚
2.esp32的17引脚接MAX485的D1引脚
3.其中MAX485的RE、DE引脚接GND
4.esp32的3.3V引脚接MAX485的VIN
5.esp32的GND接MAX485的GND。
6.用充电宝给esp32供电。
7.测试用的RS485的A线（正差分线）接MAX485的A端子。
8.测试用的RS485的B线（正负差分线）接MAX485的B端子。

使用教程

1.手机连接名为 ESP32-RS485-Web 的wifi。
2.浏览器输入192.168.4.1
3.网页如下：