【得捷电子Follow me第4期】项目总结报告

ID.LODA

【得捷电子Follow me第4期】项目总结报告 [复制链接]

# 项目介绍
本次项目使用核心板 W5500-EVB-Pico，学习了网络相关的知识，熟悉了网络开发基础 API 的使用，配合 LCD 扩展版和按键控制器扩展板，使用 circuitpython 开发完成如下任务：

1. 入门任务：开发环境搭建，BLINK，驱动液晶显示器进行显示（没有则串口HelloWorld）

1. 基础任务一：完成主控板W5500初始化(静态IP配置)，并能使用局域网电脑ping通，同时W5500可以ping通互联网站点；通过抓包软件(Wireshark、Sniffer等)抓取本地PC的ping报文，展示并分析。

1. 基础任务二：主控板建立TCPIP或UDP服务器，局域网PC使用TCPIP或UDP客户端进行连接并发送数据，主控板接收到数据后，送液晶屏显示(没有则通过串口打印显示)；通过抓包软件抓取交互报文，展示并分析。(TCP和UDP二选一，或者全都操作)

1. 进阶任务：从NTP服务器(注意数据交互格式的解析)同步时间，获取时间送显示屏(串口)显示。

1. 终极任务: 使用外部存储器，组建简易FTP文件服务器，并能正常上传下载文件。

## 功能实现
1. 驱动 W5500 网络控制器，并连接 NTP 服务器进行网络授时，实现简易 TCP 服务器及 FTP 服务器
1. 驱动 SD 卡，导入 LCD 显示的字体和背景图片，并为 FTP 服务器提供文件存储空间
1. 驱动 LCD 显示本地时间，网络相关参数及调试信息
1. 驱动按键控制器，进行服务器的切换

<ignore_js_op>

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

</p>

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

</ignore_js_op>

## 演示视频
[演示视频](https://training.eeworld.com.cn/video/39302 "演示视频")

# 任务/项目总结报告

本次活动，使用的硬件为：

1. 控制器：[W5500-EVB-Pico](https://www.digikey.cn/zh/products/detail/wiznet/W5500-EVB-PICO/16515824 "W5500-EVB-Pico")
  W5500-EVB-Pico 是基于 Raspberry Pi RP2040 和完全硬连线 TCP/IP控制器 W5500 的微控制器评估板，其工作原理与Raspberry Pi Pico 板基本相同，但通过 W5500 增加了以太网。具体介绍参考 [wiki](https://docs.wiznet.io/Product/iEthernet/W5500/w5500-evb-pico)

![w5500-evb-pico](https://docs.wiznet.io/assets/images/w5500-evb-pico-pinout-fe942a8c8d6e9d591c0ae8bc7312d592.png)

1. 显示屏：[DFR0664 2.0 320x240 IPS TFT LCD Display with MicroSD Card (Breakout)](https://www.digikey.cn/zh/products/detail/dfrobot/DFR0664/13166503)
  具体介绍参考 [wiki](https://wiki.dfrobot.com.cn/_SKU_DFR0664_2.0_240x320_LCD)

![DFR0664](https://img.dfrobot.com.cn/wiki/none/bbc55593d232a10fced56ab97637f646.jpg)

1. 键盘控制器：[MINI I2C GAMEPAD WITH SEESAW](https://www.digikey.cn/zh/products/detail/adafruit-industries-llc/5743/20370632)
  具体介绍参考 [wiki](https://learn.adafruit.com/gamepad-qt)

![gamepad-qt](https://cdn-learn.adafruit.com/assets/assets/000/122/121/medium800/adafruit_products_GPQT_top.jpg?1687817547)

## 入门任务：开发环境搭建，BLINK，驱动液晶显示器进行显示（没有则串口HelloWorld）
开发语言选择的是 circuit python，具体资料可以前往 adafruit 的 [circuit python 官网](https://learn.adafruit.com/welcome-to-circuitpython) 学习

### circuit python 安装
1. 前往 [circuit python 板卡中心](https://circuitpython.org/downloads) 找到控制板 [W5500-EVB-PICO](https://circuitpython.org/board/wiznet_w5500_evb_pico/)，下载对应的 UF2 固件

1. 按下 BOOT 按键不松手，上电模块之后松手即可进入下载模式

1. 打开电脑新增的驱动器，将上一步下载的 UF2 固件复制进 U 盘，指示灯应再次闪烁，启动将消失，并且您的计算机上将显示一个名为 CIRCUITPY 的新驱动器，此时已成功安装或更新 CircuitPython！

1. 打开新的驱动器，编辑 code.py 文件进行编程

1. circuit python 的库文件可以在 [libraries 官网](https://circuitpython.org/libraries) 找到，本节任务使用了 SPI 总线，LCD 显示器及 SD 卡，需要导入如下库文件进新的驱动器的 lib 目录

``` bash
adafruit_bus_device/
adafruit_display_text/
adafruit_bitmap_font/
adafruit_imageload/
adafruit_sdcard.mpy
adafruit_st7789.mpy
```

circuitpython 驱动 st7789 LCD 的参考资料 https://learn.adafruit.com/2-0-inch-320-x-240-color-ips-tft-display
驱动 sd 卡的参考资料 https://learn.adafruit.com/micropython-hardware-sd-cards

### 任务代码
```python
# SPDX-FileCopyrightText: 2024 id.loda
# SPDX-License-Identifier: MIT

import board
import busio
import digitalio
import displayio
import sdcardio
import storage
import terminalio
import time

# Starting in CircuitPython 9.x fourwire will be a seperate internal library
# rather than a component of the displayio library
try:
  from fourwire import FourWire
except ImportError:
  from displayio import FourWire
from adafruit_display_text import label
from adafruit_st7789 import ST7789
from adafruit_bitmap_font import bitmap_font
import adafruit_imageload

# SPI1 for tft
SPI1_SCK = board.GP10
SPI1_TX = board.GP11
SPI1_RX = board.GP12

# tft lcd io
TFT_CSn = board.GP13
TFT_RSTn = board.GP14
TFT_DC = board.GP15

# sdcard io
SD_CSn = board.GP9

led = digitalio.DigitalInOut(board.LED)
led.direction = digitalio.Direction.OUTPUT

# Release any resources currently in use for the displays
displayio.release_displays()
spi1_bus = busio.SPI(SPI1_SCK, MOSI=SPI1_TX, MISO=SPI1_RX)

display_bus = FourWire(spi1_bus, command=TFT_DC, chip_select=TFT_CSn, reset=TFT_RSTn)
display = ST7789(display_bus, width=320, height=240, rotation=90)

sdcard = sdcardio.SDCard(spi1_bus, SD_CSn)
vfs = storage.VfsFat(sdcard)
storage.mount(vfs, "/sd")

# Make the display context
splash = displayio.Group()
display.root_group = splash

color_bitmap = displayio.Bitmap(320, 240, 1)
color_palette = displayio.Palette(1)
color_palette[0] = 0x000000 # 0xF8F8FF# Ghost White

bg_sprite = displayio.TileGrid(color_bitmap, pixel_shader=color_palette, x=0, y=0)
splash.append(bg_sprite)
# 160 * 29
with open("/sd/resources/pic/dk.bmp", "rb") as f:
  digikey_bitmap, digikey_palette = adafruit_imageload.load(f, bitmap=displayio.Bitmap, palette=displayio.Palette)
digikey_sprite = displayio.TileGrid(digikey_bitmap, pixel_shader=digikey_palette, x=0, y=34)
splash.append(digikey_sprite)

# 160 * 56
with open("/sd/resources/pic/ee.bmp", "rb") as f:
  eeworld_bitmap, eeworld_palette = adafruit_imageload.load(f, bitmap=displayio.Bitmap, palette=displayio.Palette)
eeworld_sprite = displayio.TileGrid(eeworld_bitmap, pixel_shader=eeworld_palette, x=160, y=20)
splash.append(eeworld_sprite)

# Set text, font, and color
font = bitmap_font.load_font("/sd/resources/font/opposans_m_12.pcf")
# Create the text label
lable_area_fw = label.Label(
  font, x=10, y=120, text="Follow me 第四期!", scale=2, color=0xF8F8FF # 0x191970
)
lable_area_id = label.Label(
  font, x=20, y=160, text="ID.LODA", scale=2, color=(0, 191, 255)
)
splash.append(lable_area_fw)
splash.append(lable_area_id)

while True:
  time.sleep(0.5)
  led.value = not led.value
```

### 任务效果
从 SD 卡导入字体库和背景图片，并通过 LCD 进行显示

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_789164_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>chapter1_1.JPG</strong> <em class="xg1">(2.33 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_789164" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=789164&handlekey=savephoto_789164">保存到相册</a>

</p>

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

</ignore_js_op>

## 基础任务一：完成主控板W5500初始化(静态IP配置)，并能使用局域网电脑ping通，同时W5500可以ping通互联网站点；通过抓包软件(Wireshark、Sniffer等)抓取本地PC的ping报文，展示并分析。

### 实现步骤

1. 完成该任务需要导入 Wiznet5K 系列的库文件 `adafruit_wiznet5k/`, 参考文档 https://learn.adafruit.com/ethernet-for-circuitpython

1. 安装 wireshake 抓包工具

1. 程序运行之后，启动wireshake 抓取板卡 ip

1. windows 端打开控制台 ping 板卡

### 任务代码

```python
# SPDX-FileCopyrightText: 2024 id.loda
# SPDX-License-Identifier: MIT

import board
import busio
import digitalio
import displayio
import sdcardio
import storage
import terminalio
import time
# Starting in CircuitPython 9.x fourwire will be a seperate internal library
# rather than a component of the displayio library
try:
  from fourwire import FourWire
except ImportError:
  from displayio import FourWire
from adafruit_display_text import label
from adafruit_st7789 import ST7789
from adafruit_bitmap_font import bitmap_font
import adafruit_imageload

from adafruit_wiznet5k.adafruit_wiznet5k import WIZNET5K

# SPI0 for w5x00
SPI0_SCK = board.GP18
SPI0_TX = board.GP19
SPI0_RX = board.GP16
SPI0_CSn = board.GP17

## w5x00 reset
W5x00_RSTn = board.GP20

# SPI1 for tft
SPI1_SCK = board.GP10
SPI1_TX = board.GP11
SPI1_RX = board.GP12

# tft lcd io
TFT_CSn = board.GP13
TFT_RSTn = board.GP14
TFT_DC = board.GP15

# sdcard io
SD_CSn = board.GP9

led = digitalio.DigitalInOut(board.LED)
led.direction = digitalio.Direction.OUTPUT

# Release any resources currently in use for the displays
displayio.release_displays()
spi1_bus = busio.SPI(SPI1_SCK, MOSI=SPI1_TX, MISO=SPI1_RX)

display_bus = FourWire(spi1_bus, command=TFT_DC, chip_select=TFT_CSn, reset=TFT_RSTn)
display = ST7789(display_bus, width=320, height=240, rotation=90)

sdcard = sdcardio.SDCard(spi1_bus, SD_CSn)
vfs = storage.VfsFat(sdcard)
storage.mount(vfs, "/sd")

# Make the display context
splash = displayio.Group()
display.root_group = splash

color_bitmap = displayio.Bitmap(320, 240, 1)
color_palette = displayio.Palette(1)
color_palette[0] = 0x000000 # 0xF8F8FF# Ghost White

bg_sprite = displayio.TileGrid(color_bitmap, pixel_shader=color_palette, x=0, y=0)
splash.append(bg_sprite)
# 180 * 125
with open("/sd/resources/pic/test_image.png", "rb") as f:
  blinka_bitmap, blinka_palette = adafruit_imageload.load(f, bitmap=displayio.Bitmap, palette=displayio.Palette)
blinka_sprite = displayio.TileGrid(blinka_bitmap, pixel_shader=blinka_palette, x=140, y=115)
splash.append(blinka_sprite)

text_group = displayio.Group(scale=1, x=10, y=10)
text_area = label.Label(terminalio.FONT, text="", color=0xFFFF00)
text_group.append(text_area) # Subgroup for text scaling
splash.append(text_group)

# code handler
eth_rst = digitalio.DigitalInOut(W5x00_RSTn)
eth_rst.direction = digitalio.Direction.OUTPUT
eth_cs = digitalio.DigitalInOut(SPI0_CSn)
spi0_bus = busio.SPI(SPI0_SCK, MOSI=SPI0_TX, MISO=SPI0_RX)

# Reset W5500 first
eth_rst.value = False
time.sleep(1)
eth_rst.value = True

# Initialize ethernet interface with DHCP
# eth = WIZNET5K(spi_bus, cs)
# Initialize ethernet interface without DHCP
eth = WIZNET5K(spi0_bus, eth_cs, is_dhcp=False)

# Setup your network configuration below
IP_ADDRESS = (192, 168, 0, 3) #(10, 38, 180, 221)
SUBNET_MASK = (255, 255, 255, 0) # (255, 255, 254, 0)
GATEWAY_ADDRESS = (192, 168, 0, 1) # (10, 38, 180, 1)
DNS_SERVER = (211, 136, 150, 66) # (10, 38, 116, 23)
# IP_ADDRESS = (10, 38, 180, 221)
# SUBNET_MASK = (255, 255, 254, 0)
# GATEWAY_ADDRESS = (10, 38, 180, 1)
# DNS_SERVER = (10, 38, 116, 23)
eth.ifconfig = (IP_ADDRESS, SUBNET_MASK, GATEWAY_ADDRESS, DNS_SERVER)

ifconfig = eth.ifconfig
text_area.text = text_area.text + "mac addr: {}\n".format(eth.pretty_mac(eth.mac_address))
text_area.text = text_area.text + "ip4 addr: {}\n".format(eth.pretty_ip(ifconfig[0]))
text_area.text = text_area.text + "subnet addr: {}\n".format(eth.pretty_ip(ifconfig[1]))
text_area.text = text_area.text + "gateway addr: {}\n".format(eth.pretty_ip(ifconfig[2]))
text_area.text = text_area.text + "dns addr: {}\n".format(eth.pretty_ip(ifconfig[3]))
domain_address = eth.get_host_by_name("eeworld.com.cn")
text_area.text = text_area.text + "eeworld addr: {}\n".format(eth.pretty_ip(domain_address))
domain_address = eth.get_host_by_name("digikey.cn")
text_area.text = text_area.text + "digikey addr: {}\n".format(eth.pretty_ip(domain_address))
domain_address = eth.get_host_by_name("adafruit.com")
text_area.text = text_area.text + "adafruit addr: {}\n".format(eth.pretty_ip(domain_address))
print(text_area.text)

while True:
  time.sleep(0.5)
  led.value = not led.value

print("Done!")
```

### 任务效果
驱动 W5500 控制器完成网络的初始化，并配置 ip、gateway、subnet、dns 等参数

- 显示界面

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_789165_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>chapter2_1.JPG</strong> <em class="xg1">(2.39 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_789165" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=789165&handlekey=savephoto_789165">保存到相册</a>

</p>

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

</ignore_js_op>

- ping 包流程

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_789177_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>chapter2_3.png</strong> <em class="xg1">(96.09 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_789177" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=789177&handlekey=savephoto_789177">保存到相册</a>

</p>

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

</ignore_js_op>

- ping 包解析

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_789176_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>chapter2_2.png</strong> <em class="xg1">(156.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_789176" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=789176&handlekey=savephoto_789176">保存到相册</a>

</p>

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

</ignore_js_op>

## 基础任务二：主控板建立TCPIP或UDP服务器，局域网PC使用TCPIP或UDP客户端进行连接并发送数据，主控板接收到数据后，送液晶屏显示(没有则通过串口打印显示)；通过抓包软件抓取交互报文，展示并分析。(TCP和UDP二选一，或者全都操作)

### 实现步骤
1. 基于上一节任务的基础，完成 TCP Server 的代码搭建
1. 打开 wireshake 进行抓包
1. 打开网络调试工具，建立 tcp 连接，并通讯

### 任务代码
```python
# SPDX-FileCopyrightText: 2024 id.loda
# SPDX-License-Identifier: MIT

import board
import busio
import digitalio
import displayio
import sdcardio
import storage
import terminalio
import time
# Starting in CircuitPython 9.x fourwire will be a seperate internal library
# rather than a component of the displayio library
try:
  from fourwire import FourWire
except ImportError:
  from displayio import FourWire
from adafruit_display_text import label
from adafruit_st7789 import ST7789
from adafruit_bitmap_font import bitmap_font
import adafruit_imageload

from adafruit_wiznet5k.adafruit_wiznet5k import WIZNET5K
import adafruit_wiznet5k.adafruit_wiznet5k_socket as socket

# SPI0 for w5x00
SPI0_SCK = board.GP18
SPI0_TX = board.GP19
SPI0_RX = board.GP16
SPI0_CSn = board.GP17

# w5x00 reset
W5x00_RSTn = board.GP20