【得捷电子Follow me第2期】氛围灯

鲜de芒果

【得捷电子Follow me第2期】氛围灯 [复制链接]

<i class="pstatus"> 本帖最后由 鲜de芒果 于 2023-10-10 14:20 编辑 </i>

# 一、项目介绍
基于Adafruit ESP32-S3 TFT Feather 开发板制作的一个氛围灯，通过两种连网方式来进行远程控制氛围灯。
1. 配置了网络的情况下，通过 Adafruit IO 的控制面板可以远程控制氛围灯的开关，与颜色显示。
2. 在未配置网格的情况下，通过连上开发板的热点。打开浏览器访问开发板的HTTP服务页面控制氛围灯的颜色显示与开关。

项目通过使用Adafruit ESP32-S3 TFT Feather开发板的 WiFi、GPIO控制、HttpServer、MQTT连接，按键监控及以Neopixel LED控制等功能来实现一个远程氛围灯的控制。
该项目通过 CircuitPython 编码代码实现相应功能。

# 二、功能说明与代码片段 
### 任务1: 控制屏幕显示中文（必做任务）
完成屏幕的控制，并且能显示中文。项目主题是氛围灯，因此屏幕不是作为主要展示，这里仅实现了任务要求的功能。
```python
# 获取显示设备对象并设置亮度和旋转
display = board.DISPLAY
board.DISPLAY.brightness = 0.35# 设置显示屏亮度为0.35
board.DISPLAY.rotation = 0# 设置显示屏旋转为0度

# 加载自定义字体文件
font = bitmap_font.load_font("fonts/unifont-12.pcf")

"""
刷新显示
"""
def refresh_display(color):
  # 创建显示组和文本标签
  text_group = displayio.Group()
  # 标题
  lbl_title = label.Label(font, text="ESP32 - 氛围灯", color=color)# 创建文本标签对象
  lbl_title.x = 2# 设置文本的X坐标
  lbl_title.y = 18# 设置文本的Y坐标
  lbl_title.line_spacing = 1# 设置文本行间距
  lbl_title.scale = 2# 设置文本放大倍数
  text_group.append(lbl_title)# 将文本标签添加到显示组中

# WIFI模式
  lbl_wifi_type = label.Label(font, text=f"WIFI模式: { "AP" if os.getenv("wifi_ssid") is None else "STA" }", color=color)# 创建文本标签对象
  lbl_wifi_type.x = 2# 设置文本的X坐标
  lbl_wifi_type.y = 44# 设置文本的Y坐标
  lbl_wifi_type.line_spacing = 1# 设置文本行间距
  lbl_wifi_type.scale = 1# 设置文本放大倍数
  text_group.append(lbl_wifi_type)# 将文本标签添加到显示组中

# 显示IP地址
  lbl_ip = label.Label(font, text=f'IP地址: { wifi.radio.ipv4_address_ap if os.getenv("wifi_ssid") is None else wifi.radio.ipv4_address }', color=color)# 创建文本标签对象
  lbl_ip.x = 2# 设置文本的X坐标
  lbl_ip.y = 64# 设置文本的Y坐标
  lbl_ip.line_spacing = 1# 设置文本行间距
  lbl_ip.scale = 1# 设置文本放大倍数
  text_group.append(lbl_ip)# 将文本标签添加到显示组中

# 显示颜色值
  lbl_color = label.Label(font, text=f'显示颜色: {color}', color=color)# 创建文本标签对象
  lbl_color.x = 2# 设置文本的X坐标
  lbl_color.y = 84# 设置文本的Y坐标
  lbl_color.line_spacing = 1# 设置文本行间距
  lbl_color.scale = 1# 设置文本放大倍数
  text_group.append(lbl_color)# 将文本标签添加到显示组中

display.show(text_group)# 在显示设备上显示文本
```

### 任务2：网络功能使用（必做任务）
完成网络功能的使用，能够创建热点和连接到WiFi。

创建热点: 默认热点的配置信息存储于 _settings.toml_ 文件中。当配置文件中的WIFI信息不存在时，通过读取配置文件中的热点信息创建热点并启动 Http Server。
```python
# 
default_ap_ssid = os.getenv("default_ap_ssid")
default_ap_psk = os.getenv("default_ap_psk")
# 启动AP
wifi.radio.start_ap(ssid=default_ap_ssid, password=default_ap_psk)

...

# 创建并启动 HttpServer
pool = socketpool.SocketPool(wifi.radio)
server = Server(pool, "/www/static", debug=True)

### Http Server 路由配置 ###
"""
首页
"""
@server.route("/", GET)
def base(request: Request):
  
  r = request.query_params.get("r") or 0
  g = request.query_params.get("g") or 0
  b = request.query_params.get("b") or 0
  print("base request: ", request, r, g, b)

if c.is_off() and r == 0 and g == 0 and b == 0:
  print("nothing to do!")
  else:
  show_color = (int(r), int(g), int(b))
  pixel.fill(show_color)
  rainbow_cycle(0)  # 显示彩虹色环效果
  color_chase(show_color, 0)

return FileResponse(request, "index.html", "/www")

'''
启动 Http Server
''' 
async def start_server():
  # server.serve_forever(str(wifi.radio.ipv4_address_ap))
  server.start(str(wifi.radio.ipv4_address_ap))
  while True:
  try:
    server.poll()
    await asyncio.sleep_ms(10)
  except OSError as error:
    print(error)
    continue
```

连接到WiFi：WIF配置信息存储于 _settings.toml_ 文件中。通过读取配置文件中的WIFI信息进行连接。
```python
wifi_ssid = os.getenv("wifi_ssid")
wifi_pass = os.getenv("wifi_pass")

if wifi_ssid is None: # 启动AP使用html控制颜色
  # init wifi ap
else:
  # 连接WIFI 使用 Adafruit IO 远程控制
  connect_wifi(wifi_ssid, wifi_pass)

...

'''
连接WiFi
'''
def connect_wifi(ssid, psk):
  print('connect to AP ...')
  retries = 10
  for i in range(retries):
  try:
    print(f'connect {i} ...')
    wifi.radio.connect(ssid, psk)
    time.sleep(1)
    break
  except Exception as e:
    print(f'Exception when connect: {e}')

print('start DHCP ...')
  wifi.radio.start_dhcp()
  time.sleep(1)
  print('IP:', wifi.radio.ipv4_address)
  print('GW:', wifi.radio.ipv4_gateway)
  print('DNS:', wifi.radio.ipv4_dns)
```

### 任务3：控制WS2812B（必做任务）
使用按键控制板载 Neopixel LED 的显示和颜色切换。实现思路，板载两个按键。可以使用的只有 BOOT 键，因此考虑使用监控 BOOT 键的 **短按** 和 **长按** 分别实现不同的功能。短按切换 **LED** 颜色，长按关闭 **LED**。

按键监听，这里使用 keypad 库来实现按钮的监控，不用自己处理按键防抖动。十分友好且易于使用。
```python
'''
监听按键
'''
async def monitor_boot_buttons(boot_pin, color):
  pressed_timestamp = 0
  with keypad.Keys(
  (boot_pin,), value_when_pressed=False, pull=True
  ) as keys:
  while True:
    key_event = keys.events.get()
    if key_event and key_event.pressed: # 按下事件
      if key_event.key_number == 0:
      pressed_timestamp = key_event.timestamp
      color.increment()
      print(pressed_timestamp, "color index is now", color.value)
    
    if key_event and key_event.released: # 松开事件
      if key_event.key_number == 0:
      print(key_event.timestamp, "released timestamp")
      # 长按关闭
      if (key_event.timestamp - pressed_timestamp) > 1000:
        color.off()
      # 切换颜色
      change_leds_color(color.get_color())
      change_circle_leds_color(color.get_color())
    # 让出时间片给其它任务执行
    await asyncio.sleep_ms(1)
```

Neopixel LED 控制使用 Neopixel 库来进行驱动。
```python
# 初始化
pixel = neopixel.NeoPixel(neopixel_pin, 1)
pixel.brightness = default_brightness

...

'''
修改板载 Neopixel LED 灯显示颜色
'''
def change_leds_color(show_color):
  pixel.fill(show_color)
```

### 任务4：从下方5个分任务中选择1个感兴趣的完成即可（必做任务）
#### ■分任务2：WS2812B效果控制
完成一个Neopixel(12灯珠或以上)控制器，通过按键和屏幕切换展示效果。

该任务的实现比较简单，完成了 **任务3** 也就相当于完成了该任务。多灯珠控制只是初始化时灯珠的数量不一致即可驱动，但如果想要实现多灯珠显示的特效则需要算法来实现。
```python
# 初始化
# 环形 Neopixel LED 灯板灯珠数量
num_pixels = 16
# 16 串 Neopixel LED 灯环初始化
pixels = neopixel.NeoPixel(circle_pin, num_pixels, brightness=default_brightness, auto_write=False)

...

# 控制
for i in range(num_pixels):
  pixels<i> = color # 遍历设置每个灯珠的颜色
pixels.show() # 初始化时 auto_write=False 需要调用该函数才会驱动。

...

# 追逐效果
def color_chase(color, wait):
  for i in range(num_pixels):
  pixels<i> = color
  time.sleep(wait)
  pixels.show()
  time.sleep(0.1)

...

# 彩虹环效果
def rainbow_cycle(wait):
  for j in range(255):
  for i in range(num_pixels):
    rc_index = (i * 256 // num_pixels) + j
    pixels<i> = colorwheel(rc_index & 255)
  pixels.show()
  time.sleep(wait)
```

### 任务5：通过网络控制WS2812B（可选任务，非必做）
结合123，在手机上通过网络控制板载 Neopixel LED 的显示和颜色切换，屏幕同步显示状态。
该项功能的实现可通过两种网络途径来进行控制。当有网络连接时，使用MQTT通过互联网进行控制。当没有网络时，启动AP和HttpServer，手机连接至开发板的AP使用浏览器访问控制页面来进行控制。

#### Adafruit IO 控制
通过互联网控制的基础是能连上WIFI，并且注册一个 Adafruit IO 账号，创建对应的 Feeds。这里可以参考教程 [connecting-to-the-adafruit-io-mqtt-broker](https://learn.adafruit.com/mqtt-in-circuitpython/connecting-to-the-adafruit-io-mqtt-broker)。本项目中是通过配置文件进行配置，当配置文件中配置好WIFI信息和 Adafruit IO 账户信息时会自动连接wifi并通过MQTT客户端连接 Adafruit IO。然后手机访问 Adafruit IO 的 Dashboard 界面即可进行控制。代码片段如下：
```python
aio_username = os.getenv("IO_USERNAME")
aio_key = os.getenv("IO_KEY")
# 亮度控制
iuminance_feed = aio_username + "/feeds/fen-wei-deng.iuminance"
# 颜色控制
color_feed = aio_username + "/feeds/fen-wei-deng.color"

### MQTT事件 ###
'''
MQTT 连接成功
'''
def connected(client, userdata, flags, rc):
  print(f"Connected to Adafruit IO! Listening for topic changes on {iuminance_feed}, {color_feed}")
  client.subscribe(iuminance_feed)
  client.subscribe(color_feed)

'''
MQTT 连接断开
'''
def disconnected(client, userdata, rc):
  print("Disconnected from Adafruit IO!")

'''
接收到订阅主题消息
'''
def message(client, topic, message):
  print(f"New message on topic {topic}: {message}")
  if topic == iuminance_feed:
  # 改变亮度
  brightness = float(message) / 100.0
  print(f"synchronizing iuminance: {brightness}")
  pixel.brightness = brightness
  pixels.brightness = brightness
  pixels.show()
  elif topic == color_feed:
  # 改变颜色
  color = int(message[1:], 16)
  print(f"synchronizing color: {color}")
  change_leds_color(color)
  change_circle_leds_color(color)

### MQTT 连接配置 ###
pool = socketpool.SocketPool(wifi.radio)
ssl_context = ssl.create_default_context()
# 设置客户端参数
mqtt_client = MQTT.MQTT(
  broker="io.adafruit.com",
  port=1883,
  username=aio_username,
  password=aio_key,
  socket_pool=pool,
  ssl_context=ssl_context,
)

# 订阅事件
mqtt_client.on_connect = connected
mqtt_client.on_disconnect = disconnected
mqtt_client.on_message = message

# 连接 MQTT Broker
mqtt_client.connect()
```

#### AP 热点控制
当没有WIFI配置信息和 Adafruit IO 账号信息时，则启动 AP 和 Http Server。手机连上热点 SSID: Adafruit-ESP32-S3-TFT-Feather 后，使用手机浏览器访问开发板控制页面 http://192.168.4.1 来进行远程控制氛围灯。
> 热点名称可通过 _settings.toml_ 配置文件修改。

```python
# Http Server 初始化
pool = socketpool.SocketPool(wifi.radio)
server = Server(pool, "/www/static", debug=True)

### Http Server 路由配置 ###
"""
控制页
"""
@server.route("/", GET)
def base(request: Request):
  
  r = request.query_params.get("r") or 0
  g = request.query_params.get("g") or 0
  b = request.query_params.get("b") or 0
  print("base request: ", request, r, g, b)

if c.is_off() and r == 0 and g == 0 and b == 0:
  print("nothing to do!")
  else:
  show_color = (int(r), int(g), int(b))
  pixel.fill(show_color)
  rainbow_cycle(0)  # 显示彩虹色环效果
  color_chase(show_color, 0)

return FileResponse(request, "index.html", "/www")

'''
启动 Http Server
''' 
async def start_server():
  # server.serve_forever(str(wifi.radio.ipv4_address_ap))
  server.start(str(wifi.radio.ipv4_address_ap))
  while True:
  try:
    server.poll()
    await asyncio.sleep_ms(10)
  except OSError as error:
    print(error)
    continue

```
控制页面位于 _/www_ 目录下的 _index.html_，可通过修改来实现更复杂的控制功能。

# 三、功能展示及说明 
### 任务1: 控制屏幕显示中文（必做任务）
完成屏幕的控制，并且能显示中文。项目主题是氛围灯，因此屏幕不是作为主要展示，这里仅实现了任务要求的功能。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738667_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG164.jpeg</strong> <em class="xg1">(349.3 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738667" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738667&handlekey=savephoto_738667">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 任务2：网络功能使用（必做任务）
启动AP

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738678_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG174.jpeg</strong> <em class="xg1">(1.13 MB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738678" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738678&handlekey=savephoto_738678">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

连接WIFI

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738676_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG172.jpeg</strong> <em class="xg1">(1.18 MB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738676" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738676&handlekey=savephoto_738676">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 任务3：控制WS2812B（必做任务）

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738670_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG165.jpeg</strong> <em class="xg1">(292.69 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738670" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738670&handlekey=savephoto_738670">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738677_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG173.jpeg</strong> <em class="xg1">(1.22 MB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738677" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738677&handlekey=savephoto_738677">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 任务4：从下方5个分任务中选择1个感兴趣的完成即可（必做任务）
#### ■分任务2：WS2812B效果控制
通过 BOOT 键控制 16 颗 Neopixel 灯环的显示和颜色切换，同时在屏幕上显示当前显示的颜色值。

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738671_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG166.jpeg</strong> <em class="xg1">(251.01 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738671" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738671&handlekey=savephoto_738671">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738674_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG169.jpeg</strong> <em class="xg1">(242.98 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738674" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738674&handlekey=savephoto_738674">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

### 任务5：通过网络控制WS2812B（可选任务，非必做）
电脑端氛围灯控制界面

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738668" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738668&handlekey=savephoto_738668">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

手机端氛围灯控制界面

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738675_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG171.jpeg</strong> <em class="xg1">(206.86 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738675" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738675&handlekey=savephoto_738675">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

AP版控制界面

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738679_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG175.jpeg</strong> <em class="xg1">(99.15 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738679" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738679&handlekey=savephoto_738679">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

控制效果

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738672_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG167.jpeg</strong> <em class="xg1">(313.14 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738672" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738672&handlekey=savephoto_738672">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_738673_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>WechatIMG168.jpeg</strong> <em class="xg1">(309.41 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_738673" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=738673&handlekey=savephoto_738673">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

# 四、心得体会 
第一次参加 EEWorld 举办的活动, 心情很是激动。当看到该活动时，就很喜欢该设备。耐何下单时已经晚了一步，由于活动太火爆导致供不应求，好在最终10月中旬拿到开发板，到手时还有一个月左右的时间来熟悉开发板。心里有点慌，从0开始学习 CircuitPython。一点点摸索，在奋战了无数个夜晚之后，才完成了该项目。最后祝愿 EEWorld 越办越好!

# 五、参考资料
* http://edm.eeworld.com.cn/dk_adafruit_esp32_s3_tft_feather_en.pdf
* https://learn.adafruit.com/welcome-to-circuitpython/what-is-circuitpython
* https://learn.adafruit.com/mqtt-in-circuitpython/overview
* https://learn.adafruit.com/cooperative-multitasking-in-circuitpython-with-asyncio/overview
* https://github.com/adafruit/Adafruit_CircuitPython_HTTPServer/tree/ed41a3f6d189cc310e9d39bd3e3a1fd6ab210a86/examples

# 六、源码
https://download.eeworld.com.cn/detail/%E9%B2%9Cde%E8%8A%92%E6%9E%9C/629532

# 视频
https://training.eeworld.com.cn/course/68124

鲜de芒果 · 发表于2023-10-10 14:13