ESP32-CAM GPIO LED 控制 - uPython

ESP32-CAM 内建有两个发光二极管(light-emitting diode, 以下简称 LED)外设，分别是接在通用型之输入输出 (General-purpose input/output, 以下简称 GPIO) 4, 33，一个是闪光灯 LED，一个是红灯 LED，以下透过网页的方式来对这两个外设装置进行控制。
将 gpio.py 与 gpio.html 上传到 ESP32-CAM

gpio.py

import machine
from microdot import Microdot, redirect, send_file

app = Microdot()

@app.route('/', methods=['GET', 'POST'])
def index(request):
    form_cookie = None
    message_cookie = None
    if request.method == 'POST':
        form_cookie = '{pin},{pull}'.format(pin=request.form['pin'],
                                            pull=request.form['pull'])
        if 'write' in request.form:
            pull = None
            if request.form['pull'] == 'pullup':
                pull = machine.Pin.PULL_UP
            elif request.form['pull'] == 'pulldown':
                pull = machine.Pin.PULL_DOWN
            pin = machine.Pin(int(request.form['pin']), machine.Pin.IN, pull)
            message_cookie = 'Input pin {pin} is {state}.'.format(
                pin=request.form['pin'],
                state='high' if pin.value() else 'low')
        else:
            pin = machine.Pin(int(request.form['pin']), machine.Pin.OUT)
            value = 0 if 'set-low' in request.form else 1
            pin.value(value)
            message_cookie = 'Output pin {pin} is now {state}.'.format(
                pin=request.form['pin'],
                state='high' if value else 'low')
        response = redirect('/')
    else:
        if 'message' not in request.cookies:
            message_cookie = 'Select a pin and an operation below.'
        response = send_file('gpio.html')
    if form_cookie:
        response.set_cookie('form', form_cookie)
    if message_cookie:
        response.set_cookie('message', message_cookie)
    return response

app.run(debug=True)

gpio.html

<!DOCTYPE html>
<html>
    <head>
        <title>Microdot GPIO Example</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
            .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
                outline: none; -webkit-transition: .2s; transition: opacity .2s;}
            .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
            .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
      </style>
    <script>
            function getCookie(name) {
                var value = "; " + document.cookie;
                var parts = value.split("; " + name + "=");
                if (parts.length == 2)
                    return parts.pop().split(";").shift();
            }
            function showMessage() {
                document.getElementById('message').innerHTML = getCookie('message');
            }
            function onLoad() {
                showMessage();
                var form = getCookie('form');
                if (form) {
                    form = form.split(',')
                    //document.getElementById('pin').selectedIndex = parseInt(form[0]);
                    document.getElementById(form[1]).checked = true;
                }
            }
        </script>
    </head>
    <body onload="onLoad();">
        <div class="container">
            <h1>Microdot GPIO Example</h1>
            <div class="alert alert-primary" role="alert" id="message">
            </div>
            <form method="POST" action="">
                <p>
                    GPIO Pin:
                    <select name="pin" id="pin">
                        <option>4</option>
                        <option>33</option>
                        <option>13</option>
                        <option>14</option>
                        <option>15</option>
                        <option>16</option>
                    </select>
                </p>
                <div>
                    <p>
                        <input type="radio" name="pull" value="pullup" id="pullup">
                        <label for="pullup">Pull-Up</label>&nbsp;&nbsp;
                        <input type="radio" name="pull" value="pulldown" id="pulldown">
                        <label for="pulldown">Pull-Down</label>&nbsp;&nbsp;
                        <input type="radio" name="pull" value="pullnone" id="pullnone" checked>
                        <label for="pullnone">None</label>
                        <br>
                        <input type="range" name="pwmSlider" id="pwmSlider" min="0" max="255" value="5" step="1" class="slider">
                        <input type="submit" class="btn btn-outline-dark" name="write" value="Write">
                    </p>
                </div>
                <div>
                    <p>
                        <input type="submit" class="btn btn-outline-dark" name="set-low" value="Set Low">
                        <input type="submit" class="btn btn-outline-dark" name="set-high" value="Set high">
                    </p>
                </div>
            </form>
        </div>
    </body>
</html>

运行结果如下图所示，先启动 ESP32-CAM 的 1. WiFi 连线，接著2. 运行 gpio.py，当 3. 下方的 Shell 出现 Starting … 时，表示 Web 服务器已经启动，打开电脑的浏览器，输入 ESP32-CAM Web 服务器的位址，4. 选择 GPIO Pin: 4，单击 Set high 键，就可以发现闪光灯 LED 会打开。

在这里插入图片描述
图 1. 透过 Web 控制 ESP32-CAM 的 LED

参考资料

microdot, https://github.com/miguelgrinberg/microdot
A Simple Microdot Web Server, https://microdot.readthedocs.io/en/latest/

ESP32-CAM GPIO LED 控制 - uPython

ESP32-CAM GPIO LED 控制 - uPython

参考资料

猜你喜欢