首先简要介绍一下这个项目:
这个项目的开源主要包括硬件,固件和软件两部分,外壳后面如果做了也会开源出来。该项目主要是参考了以下教学视频。
链接:桌面小屏幕实战教学
其中硬件部分改动不大,主要是把USB驱动改成了TypeC + CP2102,其他部分没有太大改动。
软件部分全部是自主编写,这部分与上面视频中的开源代码完全不同,各位可以作为参考。
说明:做这个项目主要是为了把我这段时间学的东西整合到一起,项目本身的难度并不大,适合新手入门。
项目开源仓库:https://github.com/Jozen-Lee/Desk_Screen
1. 项目简介
软件版本
PlatformIO:6.1.5
SquareLine Studio: 1.1.1
Visual Studio:2022
嘉立创EDA:专业版1.9.23
固件版本
lvgl:8.3.4
主要外设
ESP32-S:带有ESP32主控 + 蓝牙 + WIFI
ePaper:1.54寸黑白墨水屏,采用SPI通信
ft6336:触摸屏,采用I2C通信
蜂鸣器:PWM驱动
USB:TypeC + CP2102
物料清单
这里只给出核心的部件,电阻电容二极管这些可参考PCB原理图中的具体型号。
外设类别型号数量购买链接主控模块ESP32-S1ESP32-S模组WiFi+蓝牙ESP32串口转WiFi模块PCB开放板电子纸触摸屏GDEY0154D67-T031电子纸触摸屏USB芯片CP2102-GMR1CP2102-GMR锂电池充电管理模块TP405611A锂电池充电IC线性稳压器AMS1117-3.31正 Vin=18V Vout=3.3V 1A 60dB@(120Hz)蜂鸣器MLT-50201MLT-5020TypeC接插件TYPEC-324-BCP241Type-C 母座 卧贴轻触开关TS24CA2蓝牙耳机轻触开关锂电池3.7V3010301蓝牙耳机电池小体积大容量
建议TypeC改为以下的封装,比较便宜好焊,PCB图做简单修改即可。
KH-TYPE-C-16P
2. 硬件部分
这部分对应开源仓库中的Hardware,整体电路比较简单,这里只提一些关键点。
自动下载电路
CP2102是可以设计自动下载电路的,原理图如下:(参考稚晖君的开源项目)
本项目虽然使用了CP2102,但当时设计的时候没考虑到这个,所以是采用了手动下载的方式。
下载时需要拉低GPIO0再按复位键进行下载。(右方的两个按键)
屏幕接插口
这个属于是设计上的失误,当时买的外设是墨水屏+触摸屏一体化模块,但是两个接插件的相对位置存在误差,导致连接的时候触摸屏FPC线需要弯曲。
其余可优化的细节
- 缩小PCB尺寸(当前的尺寸明显是过大的)
- 添加锁紧开关(因为是锂电池供电,没有开关的话每次只能通过拔电池来断电,很麻烦)
- 添加电源指示灯(板子上目前只有锂电池充放电指示灯)
- 优化供电电路(目前USB的5V供电只拿来给锂电池充电,所以只插USB不接电池板子是无法正常工作的)
3. 固件部分
这部分对应开源仓库中的Firmware,开发平台选用的是vscode + PlatformIO。
项目中涉及到了很多外设的驱动库,原则上是尽量选用Platform平台上有的开源库,因为移植和使用都比较简单。不过也要考虑适配性,开源库不是万能的,大部分时候都需要根据使用的外设提供的demo,来修改开源库的参数或者源码。
首先介绍一下使用到的库和相关的配置。
epd_libraries
官方链接:https://github.com/Bodmer/EPD_Libraries
我使用的是其中的epd1in54库,对应了我所使用墨水屏的尺寸。
我根据官方demo修改了库中的刷屏源码。不修改的话,显示的图像会很模糊。
ft6336
这部分使用的是Platform Libraries中的htcw_ft6336库
主要修改的部分是GPIO口的配置和初始化的配置。
关键点:虽然pins_arduino.h中有I2C和SPI的引脚配置,但我们完全是可以根据我们的需求进行修改的,ESP32芯片也是支持的。
/* init code */boolinitialize(){if(!m_initialized){/* Device Reset */gpio_set_level((gpio_num_t)pin_res,0);vTaskDelay(50/ portTICK_PERIOD_MS);gpio_set_level((gpio_num_t)pin_res,1);vTaskDelay(100/ portTICK_PERIOD_MS);/* Init I2C */
m_i2c.begin(33,32,10000);vTaskDelay(100/ portTICK_PERIOD_MS);device_gpio_config();/* Set normal mode */uint8_t w_data=0;reg(REG_DEVICE_MODE, w_data);/* set touch availd value to 22, smaller to more sensitive */
w_data=22;reg(REG_THRESHHOLD, w_data);/* set active period 12 - 14 */
w_data=14;reg(REG_TOUCHRATE_ACTIVE, w_data);/* Set interrupt mode */
w_data =0;reg(REG_INTERRUPT_MODE, w_data);
m_initialized=true;}returntrue;}
lvgl
这里引入lvgl主要是方便UI的开发以及链接显示屏与触摸屏的数据,库的相关配置可以参考我之前的博客:【LVGL学习笔记】(四)PlatformIO + LVGL8.3配置
因为墨水屏无法像LCD那样子不断刷新数据,所以在配置的时候,需要修改屏幕缓存更新的逻辑。
我采用的逻辑如下:
- 根据lvgl的数据刷新主控内部的缓存空间
- 每次屏幕被按下的时候,将主控的缓存一次性发过去给墨水屏的RAM并刷新显示。
/* 这里只给出核心部分代码,其余的源码请参考开源仓库中的代码 */uint8_t img_buf[MY_DISP_HOR_RES * MY_DISP_VER_RES /8];
Paint paint(img_buf, MY_DISP_HOR_RES, MY_DISP_VER_RES);staticvoiddisp_flush(lv_disp_drv_t * disp_drv,const lv_area_t * area, lv_color_t * color_p){uint32_t w =(area->x2 - area->x1 +1);uint32_t h =(area->y2 - area->y1 +1);for(int i = area->y1; i <= area->y2; i ++){for(int j = area->x1; j <= area->x2; j ++){if(color_p[(j-area->x1)+(i-area->y1)*w].full ==0xffff) paint.DrawPixel(j, i, UNCOLORED);else paint.DrawPixel(j, i, COLORED);}}lv_disp_flush_ready(disp_drv);}voidDisplay::refresh(void){
epd.SetFrameMemory(paint.GetImage());
epd.DisplayFrame();}
lvgl的图片与字体
lvgl官方提供了相关的网址,可以便捷地使用。
图片转换:Online Image Converter
字库生成;Online Font Converter
字库的相关配置可以参考这篇博客:lvgl界面库支持汉字显示
- 在设计UI的时候,使用的字体类别尽量少,因为每启用一类字体,都需要引入一个字库,需要比较多的内存。
- lvgl中带有中文的支持,字库类别是LV_FONT_SIMSUN_16_CJK,但是其中只有少量的中文字符,所以最好还是自己生成汉字字库。
BluetoothSerial&Wifi
ESP32-S内置有天线,可以支持蓝牙和WiFi通信。两者共用一根天线,但通信协议不同,所以两者是可以支持共存的,但不可以同时使用。详细的说明可以参考官方手册中的说明:RF共存
因为本项目相对简单,所以我没有配置共存相关的东西。因此,在二次开发的时候要注意,项目中的蓝牙和wifi的库都可以正常使用,但是使用前都需要将另一方关闭,否则程序会崩溃。
/* 蓝牙驱动核心代码 */voidBluetooth_Event(esp_spp_cb_event_t event, esp_spp_cb_param_t* param){/* the first event is from master, the second event is from slave */if(event == ESP_SPP_OPEN_EVT || event == ESP_SPP_SRV_OPEN_EVT){
Serial.write("bluetooth connection successful!\r\n");}elseif(event == ESP_SPP_CLOSE_EVT){
Serial.write("bluetooth disconnect successful!\r\n");}elseif(event == ESP_SPP_DATA_IND_EVT){uint16_t len =0;memset(rx_buff,'\0', BLUETOOTH_MAX_LEN);while(SerialBT.available()){if(len < BLUETOOTH_MAX_LEN){
rx_buff[len]=char(SerialBT.read());
len++;}}
update_flag =true;
rx_len = len;
Serial.println(rx_buff);}elseif(event == ESP_SPP_WRITE_EVT){}}voidBluetooth::init(void){/* Register callback function */
SerialBT.register_callback(Bluetooth_Event);/* Start bluetooth */stop();}voidBluetooth::start(void){if(BLT_MASTER_MODE){
SerialBT.begin("ESP32_MASTER",true);
SerialBT.connect(address);}else{
SerialBT.begin("ESP32_SLAVE");}}voidBluetooth::stop(void){ SerialBT.end();}
/* WiFi驱动核心代码 */voidNetwork::init(String ssid, String password){/* enable wifi scan */#if0
Serial.println("scan start");int n = WiFi.scanNetworks();
Serial.println("scan done");if(n ==0){
Serial.println("no networks found");}else{
Serial.print(n);
Serial.println(" networks found");for(int i =0; i < n;++i){
Serial.print(i +1);
Serial.print(": ");
Serial.print(WiFi.SSID(i));
Serial.print(" (");
Serial.print(WiFi.RSSI(i));
Serial.print(")");
Serial.println((WiFi.encryptionType(i)== WIFI_AUTH_OPEN)?" ":"*");delay(10);}}
Serial.println("");#endif
Serial.print("Connecting: ");
Serial.print(ssid.c_str());
Serial.print(" @");
Serial.println(password.c_str());
WiFi.begin(ssid.c_str(), password.c_str());while(WiFi.status()!= WL_CONNECTED){delay(500);
Serial.print(".");}
Serial.println("");
Serial.println("WiFi connected!");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());/* config world time */configWorldTime();}
ledc
EPS32有基础的PWM驱动库,也有ledc,mcpwm等经过了二次封装的PWM驱动库。
官方的本意是提供更便捷的驱动API,ledc用了LED灯光亮度的控制,mcpwm用于电机驱动。但是我们完全可以用这些库来控制其他需要PWM信号进行驱动的外设。本项目用其来驱动无源蜂鸣器。
无源蜂鸣器没有正负极之分,所以蜂鸣器的发生效果只受PWM的频率影响,不受占空比影响。因此我们将占空比设置为定值即可。
该项目使用蜂鸣器实现了音乐播放/暂停,切换等操作。
voidmusic_timer_cb(void* arg){if(*_tune && music_playing){if(*_tune !=-1)ledcWriteTone(BEEP_PWM_CHANNEL,*_tune);
_tune++;esp_timer_start_once(music_timer, BASIC_BEAT_TIME *1000*(*_beat));
_beat++;}elseif(!*_tune && loop_flag){
_tune = _tune_record;
_beat = _beat_record;
music_playing =true;esp_timer_start_once(music_timer,10);// Serial.println("music loop!");}else{
music_playing =false;ledcWrite(BEEP_PWM_CHANNEL,0);// Serial.println("music pause!");}}voidBeep::init(void){/* Set freq and resolution to default value */ledcSetup(BEEP_PWM_CHANNEL,4000,8);ledcAttachPin(BEEP_PIN, BEEP_PWM_CHANNEL);stop();/* register music timer */
esp_timer_create_args_t music_timer_args ={.callback =&music_timer_cb,.arg =NULL,.name ="music_timer"};
esp_err_t err =esp_timer_create(&music_timer_args,&music_timer);}
ArduinoJson
因为EPS32可以联网,而联网访问各个网址,得到的信息一般都是json格式,所以需要该库来对信息进行解码操作。该库主要应用在了以下的获取天气信息的函数中。
获取天气信息
采用的是心知天气提供的API接口。
该API有免费版可以供用户使用,详情可以参考官方网址:心知天气
API返回的数据格式
{“results”:[{“location”:{“id”:“W7YGK0CKZKF9”,“name”:“茂名”,
“country”:“CN”,“path”:“茂名,茂名,广东,中国”,
“timezone”:“Asia/Shanghai”,“timezone_offset”:“+08:00”},
“now”:{“text”:“晴”,“code”:“0”,“temperature”:“21”},“last_update”:“2022-12-26T13:40:11+08:00”}]}
核心代码
/**
* @brief get the information of your city refer to ip
*
* @param country
* @param province
* @param city
* @param weather
* @param temp
*/boolNetwork::getCityinfo(String& country, String& province, String& city, String& weather, String& temp){
HTTPClient http;
DynamicJsonDocument doc(1024);/* Compose url */
String url_xinzhi =composeZXaddress("ip");
http.begin(url_xinzhi);int httpGet = http.GET();if(httpGet >0){if(httpGet == HTTP_CODE_OK){
String json = http.getString();deserializeJson(doc, json);
String loc = doc["results"][0]["location"]["path"].as<String>();
String loc_split[4];stringSplit(loc_split, loc,',');
city = loc_split[1];
province = loc_split[2];
country = loc_split[3];
weather = doc["results"][0]["now"]["text"].as<String>();
temp = doc["results"][0]["now"]["temperature"].as<String>();returntrue;}else{
Serial.printf("ERROR!");returnfalse;}}else{
Serial.printf("ERROR!");returnfalse;}}
String Network::composeZXaddress(String city){
String url_xinzhi ="https://api.seniverse.com/v3/weather/now.json?key=";
url_xinzhi += XINZHI_KEY;
url_xinzhi +="&location=";
url_xinzhi += city;
url_xinzhi +="&language=zh-Hans&unit=c";return url_xinzhi;}voidNetwork::stringSplit(String* dst, String message,char flag){int flag_position;uint8_t num =0;/* Split String */do{
flag_position = message.indexOf(flag);if(flag_position !=-1){
dst[num++]= message.substring(0, flag_position);
message = message.substring(flag_position +1, message.length());}else{
dst[num]= message;}}while(flag_position >=0);}
获取时间
ESP32提供了非常便捷的API接口供我们使用,并且我们只需要联网获取一次世界时间,ESP32就会调用内部的RTC时钟来自动更新时间,我们只需读取即可。
核心代码
#defineNTP1"ntp1.aliyun.com"#defineNTP2"ntp2.aliyun.com"#defineNTP3"ntp3.aliyun.com"/**
* @brief Config World time
*
*/voidNetwork::configWorldTime(){structtm timeinfo;if(!getLocalTime(&timeinfo)){configTime(8*3600,0, NTP1, NTP2, NTP3);return;}/* format output: 2021-10-24 23:00:44 Sunday */
Serial.println(&timeinfo,"%F %T %A");}
FreeRTOS
不同于STM32需要从外部引入FreeRTOS,EPS32的FreeRTOS库是内部库,可以直接引入头文件进行调用。运用FreeRTOS可以很好地构建代码框架,本项目的架构如下:
因为PlatformIO的编译环境比较使用小体量的ESP32代码工程,所以我没有像STM32那样构建比较复杂的文件层级,只是将外设变量的定义,FreeRTOS的任务和变量创建用新的文件进行了封装,而不是全部堆砌在main中。
值得一提的是,ESP32中有两个核,所以它提供了新的FreeRTOS任务创建API:xTaskCreatePinnedToCore,它的最后一个参数可以为0或1,用于设置任务在哪个核上跑。
/* main.cpp */voidsetup(){System_Resource_Init();}
TickType_t _xTicksToWait =pdMS_TO_TICKS(10000);
String country, province, city, weather, temp;
String loc;voidloop(){lv_task_handler();delay(20);}
/* SystemConfig.cpp */voidSystem_Resource_Init(void){/* RTOS resources Init */
MusicCmd_Port =xQueueCreate(4,sizeof(int8_t));/* Begin Serial */
Serial.begin(115200);/* Init beep */
beep.init();/* Init screen */
screen.init();/* Init blt */
blt.init();/* Init lvgl input device */lv_port_indev_init();/* connect network */
String ssid ="TP-LINK_1CC0";// line-1 for WiFi ssid
String password ="woaiwojia012668";// line-2 for WiFi password#if1
wifi.init(ssid, password);/* Change to your BiliBili UID */// Serial.println(wifi.getBilibiliFans("472453800"));#endif/* Init ui */ui_init();/* Init system task */System_Tasks_Init();}voidSystem_Tasks_Init(void){Service_Devices_Init();Service_Interaction_Init();}/* Service_Device.cpp *//**
* @brief Initialization of device management service
*
*/voidService_Devices_Init(void){xTaskCreatePinnedToCore(Device_Beep,"Dev.Beep",2000,NULL,1,&Beep_Handle,0);xTaskCreatePinnedToCore(Device_Screen,"Dev.Screen",10000,NULL,1,&Screen_Handle,0);xTaskCreatePinnedToCore(Device_Touchpad,"Dev.Touchpad",10000,NULL,1,&Touchpad_Handle,0);}/* Service_Interaction .cpp *//**
* @brief Initialization of interaction relative task
*
*/voidService_Interaction_Init(void){xTaskCreatePinnedToCore(Interact_updateInfo,"Interact.updateInfo",10000,NULL,3,&updateInfo_Handle,1);xTaskCreatePinnedToCore(Interact_updateTime,"Interact.updateTime",2000,NULL,1,&updateTime_Handle,1);}
4. 软件部分
这里给出UI设计可能会用到的网站:
个人的LOGO设计:免费LOGO设计模板在线制作
矢量图标:阿里巴巴矢量图标库
图像二值化:图片二值化
SquareLine Studio
SquareLine Studio是lvgl官方推荐的UI设计软件,可以实现所见即所得。
详细的配置说明可以参考我之前的博客:【LVGL学习笔记】(五)使用SquareLine Studio设计UI
SquareLine Studio中有lvgl各种常见的控件,并且可以很方便地配置控件参数。
同时,它还可以为控件添加事件以及动画效果。
因为本项目用的是墨水屏,不可以频繁刷屏,所以各种动画效果我都设置为NONE。如果是LCD屏,搭配动画效果可以实现很酷炫的效果。
使用SquareLine Studio设计的界面如下
LvglSimulator(Visual Studio)
LvglSimulator是lvgl的模拟器,可以大大节约开发的时间。需要注意的是,上面提到的SquareLine Studio也具有一个播放模式,在这个模式下,也是可以模拟界面的变化。LvglSimulator与之的区别是可以验证业务层的代码逻辑,并且添加一些界面的细节(因为部分控件SquareLine Studio中是没有的,需要使用lvgl相关的API函数进行绘制)
LvglSimulator的配置可以参考我的博客:【LVGL学习笔记】(一)环境搭建
lvgl的控件使用可以参考我的博客:【LVGL学习笔记】(三)控件使用
效果展示
版权归原作者 煜个头头 所有, 如有侵权,请联系我们删除。