[Digi-Key Follow me Episode 2] Hands-on experience with Adafruit ESP32-S3 TFT Feather

eew_nagvq9

[Digi-Key Follow me Episode 2] Hands-on experience with Adafruit ESP32-S3 TFT Feather [Copy link]

 

# 【DigiKey Electronics Follow me Issue 2】Hands-on Experience with Adafruit ESP32-S3 TFT Feather ## //Content 1: 3-5 minute short video// [Task video link](https://training.eeworld.com.cn/video/38262 "Task video") ## //Content 2: Task/Project Summary Report// ### Project Introduction I accidentally saw the Follow me task cashback activity initiated by DigiKey and EEWORLD while surfing the Internet some time ago, so I came up with the following. I placed an order in August and finally received the development board in October. I can't wait to experience this development board **Adafruit ESP32-S3 TFT Feather** made by Adafruit. After unboxing and holding it in my hand, I couldn't help but admire the exquisiteness of this development board. The small size can accommodate a 1.14-inch IPS color screen, NeoPixel and LED supporting RGB, SMD buttons, TYPE-C interface, STEMMA QT interface, battery interface, and even sufficient expansion IO. Thanks to the powerful functions of ESP32-S3, **Adafruit ESP32-S3 TFT Feather** not only has a dual-core 240MHz main frequency and 512KB built-in SRAM, but also supports 2.4GHzWiFi and Bluetooth 5 (LE) and native USB, which can meet the needs of different scenarios. Since I am engaged in embedded software development, I usually use C/C++ for development. Seeing that the development board also supports CircuitPython development, why not use CircuitPython to experience **Adafruit ESP32-S3 TFT Feather** this time! <ignore_js_op> <img style="cursor:pointer;" id="aimg_751435" aid="751435" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233531z57qnqooslhq7q7n.png" file="data/attachment/forum/202311/09/233531z57qnqooslhq7q7n.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751435_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>e54df83d-8d45-4c9a-86fd-f8657e488e34.png</strong> <em class="xg1">(807.1 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751435" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751435&handlekey=savephoto_751435">save to album</a> </p> <p class="xg1 y">2023-11-9 23:35 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_751441" aid="751441" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233725vtkktkrqi9kj8eh9.png" file="data/attachment/forum/202311/09/233725vtkktkrqi9kj8eh9.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751441_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>a19c4b09-73ab-48fa-97e1-dd686bfc4a1e.png</strong> <em class="xg1">(573.28 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751441" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751441&handlekey=savephoto_751441">save to album</a> </p> <p class="xg1 y">2023-11-9 23:37 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_751442" aid="751442" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233732tqhztq63nzqhqznq.png" file="data/attachment/forum/202311/09/233732tqhztq63nzqhqznq.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751442_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>02c0d8c0-3b62-4d3d-bed4-9494f60b541d.png</strong> <em class="xg1">(748.59 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751442" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751442&handlekey=savephoto_751442">save to album</a> </p> <p class="xg1 y">2023-11-9 23:37 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ### Task 1: Control the screen to display Chinese > Task content: Complete the control of the screen and display Chinese > > Matching device: Adafruit ESP32-S3 TFT Feather According to the task content, we can roughly decompose the task into the following two sub-functions: 1. Realize the display screen; 2. Realize the Chinese font display; After splitting the tasks, you can start to implement them. ##### 1. Realize the display screen driver The first function is to realize the display screen driver on the development board. According to the screen driver chip (st7789) and resolution (240*135) of the development board, we find the corresponding display example provided in the CircuitPython official library (the directory address is as follows). Let me say this here. In many cases, the official library is a very good way for us to learn about development board hardware and even programming languages. In addition, the official library provided by Adafruit also provides a lot of detailed examples for us to refer to. Many of the subsequent task function implementations refer to the examples in the official library. > Official library example: .\adafruit-circuitpython-bundle-8.x-mpy-20231003\examples\st7789_240x135_simpletest.py # Release any resources currently in use for the displays displayio.release_displays() spi = board.SPI() tft_cs = board.D5 tft_dc = board.D6 display_bus = displayio.FourWire(spi, command=tft_dc, chip_select=tft_cs) display = ST7789( display_bus, rotation=270, width=240, height=135, rowstart=40, colstart=53 ) It is not difficult to see from the example that to realize the screen driver, the CS and DC pins of the screen need to be configured. At this time, we need to look up the official document [Adafruit Learning System](https://learn.adafruit.com/assets/114106) and find the identifiers corresponding to the CS and DC pins of the development board screen as follows. > CS=TFT_CS > > DC=TFT_DC Therefore, we modify the code in the above example slightly: # Release any resources currently in use for the displays displayio.release_displays() spi = board.SPI() tft_cs = board.TFT_CS tft_dc = board.TFT_DC display_bus = displayio.FourWire(spi, command=tft_dc, chip_select=tft_cs) display = ST7789( display_bus, rotation=270, width=240, height=135, rowstart=40, colstart=53 ) After saving and resetting the development board, you can see that the English "Hello World!" is displayed on the screen, and the screen driver is implemented. <ignore_js_op> <img style="cursor:pointer;" id="aimg_751443" aid="751443" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233816ratzf5insltalfan.jpg" file="data/attachment/forum/202311/09/233816ratzf5insltalfan.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751443_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2975.JPG</strong> <em class="xg1">(1.07 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751443" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751443&handlekey=savephoto_751443">save to album</a> </p> <p class="xg1 y">2023-11-9 23:38 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ##### 2. Implement Chinese font display. Let's go to the second function: Chinese font display. > Here we need to add some knowledge points. When a computer displays text, it needs to render the text and then turn the text into pictures to display. Different rendering methods for text are what we call fonts. It can be seen that different fonts are actually a set of different rendering "formulas" for text. In daily computers, fonts are usually rendered according to the "formula" when they need to be displayed and displayed on the screen. This rendering "formula" is usually called a vector font. It can be seen that using the "formula" rendering inevitably requires a series of calculations; in embedded systems, we usually don't want the display font to take up too much of the already tight computing resources, so engineers advance the font rendering process to before the code runs. This pre-rendered font is called a bitmap font. After supplementing the knowledge, let's go back to the Chinese font display function. Obviously, we need to make a Chinese bitmap font to make the display screen display Chinese. Here I still refer to the [official document](https://learn.adafruit.com/custom-fonts-for-pyportal-circuitpython-display/bitmap_font-library) First, choose your favorite font and use [FontForge]([FontForge Open Source Font Editor](https://fontforge.org/en-US/)) to create a bitmap font library. Here I use "三极智黑体" to create the font library "SJzhiheiti-22.# Draw a label text = "Hello, World!" text_area = label.Label(font, text=text, color=TEXT_COLOR) After saving, reset the development board, and you can see the Chinese "Hello, World!" displayed on the screen. <ignore_js_op> <img style="cursor:pointer;" id="aimg_751444" aid="751444" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233846jeebim0qrxegfbxe.jpg" file="data/attachment/forum/202311/09/233846jeebim0qrxegfbxe.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751444_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2976.JPG</strong> <em class="xg1">(1.32 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751444" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751444&handlekey=savephoto_751444">save to album</a> </p> <p class="xg1 y">2023-11-9 23:38 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> Here you can see that the Chinese characters are too large, and part of them have been pressed onto the border. At this time, we adjust the scaling ratio: …… # First set some parameters used for shapes and text BORDER = 20 FONTSCALE = 2 #Adjust the scaling ratio to 2 BACKGROUND_COLOR = 0x00FF00 # Bright Green FOREGROUND_COLOR = 0xAA0088 # Purple TEXT_COLOR = 0xFFFF00 …… <ignore_js_op> <img style="cursor:pointer;" id="aimg_751445" aid="751445" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/233852ctlk50hz22lhxp0h.jpg" file="data/attachment/forum/202311/09/233852ctlk50hz22lhxp0h.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751445_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2977.JPG</strong> <em class="xg1">(1.28 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751445" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751445&handlekey=savephoto_751445">save to album</a> </p> <p class="xg1 y">2023-11-9 23:38 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> Re-run and find that the font is displayed perfectly. So far, we have completed all the contents of Task 1. ### Task 2: Use of network functions > Task content: Complete the use of network functions, be able to create hotspots and connect to WiFi > > Matching device: Adafruit ESP32-S3 TFT Feather According to the task content, it is not difficult to decompose the task into the following 2 sub-functions: 1. Realize the function of connecting to WiFi; 2. Realize the function of creating a WiFi hotspot; In order to more intuitively verify the network function after connecting to WiFi/creating a WiFi hotspot, I added a third sub-function here: realize a simple HTTP service. ##### 1. Realize a simple HTTP service Before realizing the task content, we first realize the HTTP service; in this way, we can access the HTTP service of the development board through the browser after connecting to WiFi/connecting to a WiFi hotspot to verify its network function. Here, we still find the HTTP service example provided in the corresponding CircuitPython official library according to the functions we need to implement (the directory address is as follows). Thanks to the powerful functions of the official library, we can implement the functions we need with just a few lines of code. > Official library example: .\adafruit-circuitpython-bundle-8.x-mpy-20231003\examples\httpserver_simpletest_auto.py pool = socketpool.SocketPool(wifi.radio) #Here is the network exit for establishing a socket server = Server(pool, "/static", debug=True) @server.route("/") def base(request: Request): """ Serve a default static plain text message. """ return Response(request, "Hello from the CircuitPython HTTP Server!") server.serve_forever(str(wifi.radio.ipv4_address)) #Here is the address of the http service bound##### 2. Implement the WiFi connection function Above we implemented a simple HTTP service, it's time to implement the WiFi connection function to verify it. The reference here is the [official API documentation](https://docs.circuitpython.org/en/8.2.x/shared-bindings/wifi/index.html) According to the official API documentation, connecting to WiFi also only takes a few lines of code: #setup station wifi.radio.start_station() wifi.radio.connect(ssid="WiFi name to be connected", password="WiFi password to be connected") #Note that it can only connect to 2.4G band WiFi wifi.radio.start_dhcp() After saving, reset the development board. You can see that the development board obtains an IP address after connecting to WiFi: > Started development server on http://192.168.123.158:80 <ignore_js_op> <img style="cursor:pointer;" id="aimg_751446" aid="751446" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234004f4t5txilozirpgrt.jpg" file="data/attachment/forum/202311/09/234004f4t5txilozirpgrt.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751446_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2978.JPG</strong> <em class="xg1">(1.42 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751446" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751446&handlekey=savephoto_751446">save to album</a> </p> <p class="xg1 y">2023-11-9 23:40 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> At this time, use a computer or mobile browser to access the IP: 192.168.123.158. The browser displays: > Hello from the CircuitPython HTTP Server! <ignore_js_op> <img id="aimg_751447" style="cursor:pointer;" aid="751447" src="static/image/common/none.gif" zoomfile="data/attachment/forum/202311/09/234029r24t2ydy6373syns.png" file="data/attachment/forum/202311/09/234029r24t2ydy6373syns.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="608" id="aimg_751447" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751447_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>屏幕截图 2023-11-07 224341.png</strong> <em class="xg1">(9.81 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751447" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751447&handlekey=savephoto_751447">save to album</a> </p> <p class="xg1 y">2023-11-9 23:40 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> At the same time, REPL outputs request and response information: > 192.168.123.196 -- "GET /" 538 -- "200 OK" 125 -- 25ms At this point, we have completed the function of connecting to WiFi and completed the verification of HTTP service. ##### 3. Implement the function of creating WiFi hotspot With the above preparation, the idea of creating WiFi hotspot is obvious. Similarly, the [official API documentation](https://docs.circuitpython.org/en/8.2.x/shared-bindings/wifi/index.html) also mentions the interface required to create WiFi hotspot. According to the official API documentation, creating a WiFi hotspot only requires modifying a few lines of code: # setup ap wifi.radio.start_ap(ssid="CircuitPython", password="") wifi.radio.set_ipv4_address_ap(ipv4=ipaddress.ip_address("192.168.1.1"), netmask=ipaddress.ip_address("255.255.255.0"), gateway=ipaddress.ip_address("192.168.1.1")) wifi.radio.start_dhcp_ap() …… server.serve_forever(str(wifi.radio.ipv4_address_ap)) After saving, reset the development board, and you can see the IP address bound to the HTTP service: > Started development server on http://192.168.1.1:80 <ignore_js_op> <img style="cursor:pointer;" id="aimg_751448" aid="751448" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234055poi09i99one0sf04.jpg" file="data/attachment/forum/202311/09/234055poi09i99one0sf04.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751448_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2998.JPG</strong> <em class="xg1">(1.85 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751448" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751448&handlekey=savephoto_751448">save to album</a> </p> <p class="xg1 y">2023-11-9 23:40 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> At this time, use a computer or mobile phone to connect to the development board's WiFi hotspot "CircuitPython", and use a browser to access the IP: 192.168.1.1. The browser displays: > Hello from the CircuitPython HTTP Server! <ignore_js_op> <img style="cursor:pointer;" id="aimg_751449" aid="751449" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234105i856y7zo9o7595v8.png" file="data/attachment/forum/202311/09/234105i856y7zo9o7595v8.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751449_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2996.PNG</strong> <em class="xg1">(61.67 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751449" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751449&handlekey=savephoto_751449">save to album</a> </p> <p class="xg1 y">2023-11-9 23:41 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_751450" aid="751450" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234113efob53fk05i5ib5w.png" file="data/attachment/forum/202311/09/234113efob53fk05i5ib5w.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751450_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2997.PNG</strong> <em class="xg1">(125.78 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751450" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751450&handlekey=savephoto_751450">save to album</a> </p> <p class="xg1 y">2023-11-9 23:41 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> At the same time, REPL outputs request response information: > 192.168.1.2 -- "GET /" 387 -- "200 OK" 125 -- 23ms At this point, we have completed the function of creating a WiFi hotspot and completed all the contents of Task 2. ### Task 3: Control WS2812B > Task content: Use buttons to control the display and color switching of the onboard Neopixel LED> > Matching device: Adafruit ESP32-S3 TFT Feather According to the task content, the task can be decomposed into the following 3 sub-functions: 1. Realize the onboard Neopixel LED display; 2. Realize button press detection; 3. Realize the logic of button control Neopixel LED color switching; Sub-functions 1 and 2 of this task can be found in the [official introductory tutorial](http://edm.eeworld.com.cn/dk_adafruit_esp32_s3_tft_feather_en.pdf), I will mark the corresponding chapters in different sub-function code blocks, and the specific principles will not be repeated. To be honest, if this task is taken as task 1, it may be more conducive to beginners to get started with this development board. In fact, I also started to get familiar with this development board from this task. Let's follow the introductory tutorial to get started! : ##### 1. Implement onboard Neopixel LED display > Reference section: NeoPixel LED （Page 137） Here is the official tutorial that implements the different RGB colors of the Neopixel LED to light up and display in turn: pixel = neopixel.NeoPixel(board.NEOPIXEL, 1) pixel.brightness = 0.3 while True: pixel.fill((255, 0, 0)) time.sleep(0.5) pixel.fill((0, 255, 0)) time.sleep(0.5) pixel.fill((0, 0, 255)) time.sleep(0.5) ##### 2. Implement button press detection > Reference section: Digital Input （Page 128） Here is the official tutorial that implements the button to light up the onboard LED (the LED here is not the Neopixel LED in the task): led = digitalio.DigitalInOut(board.LED) led.direction = digitalio.Direction.OUTPUT button = digitalio.DigitalInOut(board.BUTTON) button.switch_to_input(pull=digitalio.Pull.UP) while True: if not button.value: led.value = True else: led.value = False ##### 3. Implement the logic of key control of Neopixel LED color switching Now we can combine sub-functions 1 and 2, plus our control logic, we can implement key control of Neopixel LED color switching: button = digitalio.DigitalInOut(board.BUTTON) button.switch_to_input(pull=digitalio.Pull.UP) pixel = neopixel.NeoPixel(board.NEOPIXEL, 1) pixel.brightness = 0.5 counter = 0 rgb_list = [0x000000, 0xFF0000, 0x00FF00, 0x0000FF, 0x00FFFF, 0xFF00FF, 0xFFFF00, 0xFFFFFF] #Here the different RGB colors of the LED are definedwhile True: if not button.value: counter += 1 if counter>=len(rgb_list): counter = 0 pixel.fill((rgb_list[counter]>>16, rgb_list[counter]>>8, rgb_list[counter]&0xFF)) #Here the corresponding RGB color is set to the LEDtime.sleep(0.2) <ignore_js_op> <img style="cursor:pointer;" id="aimg_751451" aid="751451" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234155anv00gewii3vcv1s.jpg" file="data/attachment/forum/202311/09/234155anv00gewii3vcv1s.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751451_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2988(1).JPG</strong> <em class="xg1">(1.16 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751451" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751451&handlekey=savephoto_751451">save to album</a> </p> <p class="xg1 y">2023-11-9 23:41 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_751452" aid="751452" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234208jcceaeaplja0ayes.jpg" file="data/attachment/forum/202311/09/234208jcceaeaplja0ayes.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751452_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_2989(1).JPG</strong> <em class="xg1">(986.94 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751452" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751452&handlekey=savephoto_751452">save to album</a> </p> <p class="xg1 y">2023-11-9 23:42 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> So far, we have completed all the contents of Task 3. ### Task 4: Calendar & Clock > Task content: Complete a perpetual calendar clock that can be updated via the Internet and display local weather information > > Recommended device: Adafruit ESP32-S3 TFT Feather In Task 4, I chose Subtask 1. Although the task content is more complicated than the above, we can still break it down into the following 5 sub-functions: 1. Realize WiFi connection to the Internet; 2. Get the current time information; 3. Get the current weather information; 4. Realize local clock timing; 5. Realize screen display of time and weather information; Now let's start the last task! ##### 1. Realize WiFi connection to the Internet The function of connecting to WiFi has actually been implemented in **Task 2: Use of network functions**, so I will bring it out again here: #setup station wifi.radio.start_station() wifi.radio.connect(ssid="WiFi name to be connected", password="WiFi password to be connected") wifi.radio.start_dhcp() pool = socketpool.SocketPool(wifi.radio) In this way, our development board has the ability to connect to the Internet. ##### 2.There are two main methods for obtaining the current time information from the Internet: one is to synchronize the time through the ntp service; the other is to obtain it through network requests. In order to keep in sync with sub-function 3, we use the second method, which is to obtain the time through the HTTP request server API. The free time API [Adafruit IO - Time Power-Up] (https://io.adafruit.com/services/time) provided by AdafruitIO is used here. You can make a request after a simple email registration. Referring to the examples given in the official library, it is not difficult to write the HTTP request code: > Official library example: .\adafruit-circuitpython-bundle-8.x-mpy-20231003\examples\json_stream_simpletest.py #request datetime aio_username = "AdafruitIO account username" aio_key = "AdafruitIO account key" url_get_time = 'http://io.adafruit.com/api/v2/%s/integrations/time/struct?x-aio-key=%s' %(aio_username, aio_key) requests = adafruit_requests.Session(pool) response = requests.get(url_get_time) After filling in the correct username and key, we use the browser to test the API, and you can see that the data returned is in json format: > {"year":2023,"mon":11,"mday":7,"hour":21,"min":14,"sec":3,"wday":2,"yday":311,"isdst":0} At this time, we continue to refer to the examples given in the official library to see how to parse json data: jobj = json_stream.load(response.iter_content(32)) print('%d-%d-%d %d:%d:%d' %(jobj["year"],jobj["mon"],jobj["mday"],jobj["hour"],jobj["min"],jobj["sec"])) ##### 3. Get the current weather information After realizing the time information acquisition, we follow the same approach to get the current weather information. AdafruitIO also provides a weather API, but it is a pity that you have to pay to use it; so I used the free weather API provided by Xinzhi Weather [Xinzhi Weather (seniverse.com)](https://www.seniverse.com/). Here you can still make a request by simply registering with an email address. Refer to the method of getting time above. Here we get the weather conditions in Guangzhou in English: #request weather seniverse_private_key = "心知天气的private_key" url_get_weather = 'http://api.seniverse.com/v3/weather/now.json?key=%s&location=guangzhou&language=en' %(seniverse_private_key) requests = adafruit_requests.Session(pool) response = requests.get(url_get_weather) jobj = json_stream.load(response.iter_content(32)) for result in jobj["results"]: now_weather = result["now"] weather = now_weather["text"] temp = now_weather["temperature"] print('%s %s' %(weather,temp)) ##### 4. Implement local clock timing After obtaining the time information from the Internet, we need to synchronize it to the local clock so that the local clock can be calibrated to the time we set and continue timing. In this way, when we want to get the current time later, we can read it directly from the local clock, thus avoiding the need to make network requests every time we get the time. Here we need to introduce a hardware concept, the RTC real-time clock. Simply put, RTC is a timer that can run independently of the CPU. With it, we can time even when the CPU is not running. Similarly, we can also find examples of using RTC in the official library: > Official library example: .\adafruit-circuitpython-bundle-8.x-mpy-20231003\example\ntp_set_rtc.py It is not difficult to see that using RTC only requires a few simple lines of code. At the same time, we can combine the time information obtained in sub-function 2 to complete the setting and calibration of the RTC clock: #setup rtc rtc = rtc.RTC() requests = adafruit_requests.Session(pool) response = requests.get(url_get_time) jobj = json_stream.load(response.iter_content(32)) rtc.datetime = time.struct_time((jobj["year"], jobj["mon"], jobj["mday"], jobj["hour"], jobj["min"], jobj["sec"] , 0, -1, -1)) print(rtc.datetime) ##### 5. Display time and weather information on the screen Similarly, we already know how to display text on the screen in **Task 1: Control the screen to display Chinese**. Just make a slight modification and add the text of time and weather. Here I add the interface refresh code of time, date and weather in the main loop. The time is refreshed once per second, and the date and weather are refreshed once per minute: counter = 0 while True: txt1 = '%2.2d:%2.2d:%2.2d' %(rtc.datetime.tm_hour, rtc.datetime.tm_min, rtc.datetime.tm_sec) text_area1 = label.Label(terminalio.FONT, text=txt1, color=TEXT_COLOR) text_width1 = text_area1.bounding_box[2] * 3 text_group1 = displayio.Group(scale=3, x=(display.width-text_width1) // 2 , y=display.height // 2 - 10) text_group1.append(text_area1) # Subgroup for text scaling splash.append(text_group1 ) if not counter%60: txt2 = '%4.4d/%2.2d/%2.2d %s' %(rtc.datetime.tm_year, rtc.datetime.tm_mon, rtc.datetime.tm_mday, weather) text_area2 = label.Label(terminalio.FONT, text=txt2, color=TEXT_COLOR) text_width2 = text_area2.bounding_box[2] * 2 text_group2 = displayio.Group(scale=2, x=(display.width-text_width2) / / 2, y=display.height // 2 + 20) text_group2.append(text_area2) # Subgroup for text scaling splash.append(text_group2) counter += 1 time.sleep(1) splash.remove(text_group1) if not counter %60: splash.remove(text_group2) <ignore_js_op> <img style="cursor:pointer;" id="aimg_751453" aid="751453" src="static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="data/attachment/forum/202311/09/234239wz00nmswl6ausznw.png" file="data/attachment/forum/202311/09/234239wz00nmswl6ausznw.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_751453_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>屏幕截图 2023-11-09 231916.png</strong> <em class="xg1">(3.43 MB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_751453" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=751453&handlekey=savephoto_751453">save to album</a> </p> <p class="xg1 y">2023-11-9 23:42 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> At this point, we have completed all the tasks! ### Experience The documentation provided by Adafruit ESP32-S3 TFT Feather development board is quite complete, and the community resources are also very rich. There are not only various detailed tutorials, but also many interesting community projects for everyone to explore. Reference. At the same time, the functions of the CircuitPython official library are also very powerful. Many originally complex functions can be implemented with one or two lines of code, which is very friendly to makers. The only drawback is that, probably because it is a foreign developer, the documentation and The community is all in English, which is not very friendly to beginners; and the difficulty gradient of the tasks set for this event is not very reasonable. If Task 3 and Task 1 can be swapped, I believe it will be a better learning experience for beginners. # # //Content 3: Compilable and downloadable code// [Task code link](https://download.eeworld.com.cn/detail/eew_nagvq9/629836 "Task code")cn/detail/eew_nagvq9/629836 "Task Code")cn/detail/eew_nagvq9/629836 "Task Code")