动态手机网站怎么做的,人社局网站建设方案,wordpress 自动ping,做房地产用什么网站好文章目录 一 实现思路1 项目简介1.1 项目效果1.2 实现方式 2 项目构成2.1 软硬件环境2.2 完整流程总结#xff08;重点整合#xff09;(1) 功能逻辑图(2) 接线(3) 使用esp8266控制TFT屏(4)TFT_espI库配置方法(5) TFT_esp库常用代码详解(6)TFT屏显示图片(7) TFT屏显示汉字(8) … 文章目录 一 实现思路1 项目简介1.1 项目效果1.2 实现方式 2 项目构成2.1 软硬件环境2.2 完整流程总结重点整合(1) 功能逻辑图(2) 接线(3) 使用esp8266控制TFT屏(4)TFT_espI库配置方法(5) TFT_esp库常用代码详解(6)TFT屏显示图片(7) TFT屏显示汉字(8) wif联网与HTTP获取时间 3 代码实现3.1 不同UI界面3.2 UI切换方法3.3 LooP函数中的内容与优先级3.4 随时间滚动的计划事项3.5 天问代码 二 展示1 图片2 视频3 下载3.1 项目下载3.2 arduino esp8266开发板离线包3.3 processin下载3.4 天问BLOCK下载 一 实现思路 摘要esp8266wifi,HTTP通信TFT_espI库使用语音交互系统从0开始自定义UI界面防低帧不爆刷 1 项目简介 功能与实现思路 1.1 项目效果
集成了ESP8266开发板语音识别模块TFT显示屏和小喇叭实现了一个语音交互系统拥有图标菜单和4个交互界面。完全使用语音口令操作效率很高。有以下基础功能
(1) 计划管理 这是最主要的功能可以在TFT屏幕上查看每天、每周和每月的计划安排随时随地的查看下一步要做的事情不再需要翻阅复杂的计划表。其中存入了周月日的具体计划esp8266会联网获取时间到时间了自动更新下一步计划内容且仅在发生变化时更新屏幕不会爆刷形成低帧率。.看一眼便知道当前时间段应该做什么事
(2) 提醒功能 目前设置了五个固定时间点提醒喝水通过蜂鸣器的振动提示。任何固定时间需要提醒的事件都可以加在里面形成一个提醒清单。
(3) 打卡功能 这一功能是为了帮助自己每天高效做一件事每天坚持一个最重要的习惯可以设置打卡内容。
(4) 特殊功能 这里暂时显示一些重要的事件比如生日纪念日或节气或从网络获取一些信息预留后续开发
本项目最大的特点是设计了一个UI框架把一个TFT屏幕划分为4个界面去利用。不论是直接使用它的计划功能还是用于修改都很方便。之所以不用手机app是因为容易分散注意力嵌入式产品的一大有点就是功能性强不掺杂娱乐事项。
1.2 实现方式
(1) esp8266中 编写主程序即界面框架和功能实现4个UI界面内容划分在不同的模块中编写主函数中仅设计界面交互方与初始化必备信息并且把wifi与HTTP功能也单独划分主函数逻辑清晰所有修改接在各自模块中进行。并连接蜂鸣器提醒事件时会触发蜂鸣器发声。
2) 天问block中 在这里我们主要使用其控制引脚电平的功能听到说某个 UI界面的名称通过喇叭说出回复语并控制对应引脚电平发生变化。 这是一个集成好的模块使用简便并且官方软件是图形化积木编程可以随时查看c代码不过积木封装的不太行容易遇到各种稀奇古怪的bug。该语音模块主要使用方式为听到固定语音指令后使用预设好的声音说出预设好的回复词。或是听到指令控制引脚电平发生改变。该模块本身也可以接入其它简单模块诸如oled,tft,温湿度数码管超声波等等但bug仍比较多debug还得翻看积木的c代码只建议简单使用。最大优点仍然在其快捷的语音交互上 (3) 交互原理 天问asr_pro模块检测到说出了指令——asr_pro引脚电平变化GPIO output——连接esp82266与asr_pro引脚——esp8266检测到引脚电平变化GPIO Iutput——切换UI界面/执行其它功能
本质是通过引脚电平信号变化串联二者功能但对电平稳定要求较高否则容易波动。之所以只做4个UI界面是因为esp8266引脚不不够了连接TFT就占据了5个个。也可以考虑使用RXTX进行通讯 2 项目构成 软硬件环境代码逻辑结构与事项项目中会遇到的所有问题与解决方案 2.1 软硬件环境
(1) 软件环境 上传程序arduino天问block 图片转c数组lcd-image-converter底部项目文件链接含此软件 字体编辑processing
(2) 所需硬件 esp8266cp2102电机扩展板 天问语音识别模块:ASR_PRO TFTst7735_RGB128*160——8引脚 小喇叭蜂鸣器 2.2 完整流程总结重点整合 从0开始搭建项目中遇到的所有问题 (1) 功能逻辑图 (2) 接线
TFTesp8266SCLd5SDAd7RSTd4DCd3CSd8BLK背光可不接V3.3v即可GG
esp8266天问语音模块D0A5D6A6D1A2D2A3Tx蜂鸣器IO
天问语音模块接线5v55v 3.3v容易带不动因为有喇叭GG (3) 使用esp8266控制TFT屏
一般我们从淘宝买的屏幕模块会自带stm32的测试程序或是arduino UNO板的测试样例和库但这二者前者空间较小存不了几个图后者没有wifi功能一般也不会送esp8266或者32的库和案例。
所以如何使用esp8266控制tft就是个问题解决这个问题我们可以使用一个arduino中可以直接下载的库TFT_espI只需要预先修改User_Setup.h中的一些参数根据自己屏幕的 驱动如st7735型号分辨率等等参数取消掉一些注释即可使用。 (4)TFT_espI库配置方法
设置好参数和引脚才可以驱动tft屏打开库文件中的User_Setup.h需要修改以下内容
必要设置 step1:44-65行找到自己tft的驱动型号取消那一行的注释 如我的 #define ST7735_DRIVER step276-77行根据自己的屏幕型号选择RGB 或 BGR取消其中一行的注释 step3: 85-89行根据屏幕的宽和高型号取消注释对应代码 如128*160#define TFT_WIDTH 128 #define TFT_HEIGHT 160 step4:在112行以下找到自己开发板的型号与引脚分布设置SPI与引脚的连接 esp8266 :167行以下esp32: 209行以下 白屏问题如TFTST7735128*160仍需要在102-111行间找到对应分辨率的一行取消注释因为不是同一批制造的 其余型号如有问题需自己查找驱动部分代码注释查看解决 如碰到屏幕反色将116或117其中一行取消注释 其余设置
310-321 为库自带字体一般不需改动359-372 为SPI频率和触摸屏相关参数 有问题多看英文注释翻译解释 注意esp8266在arduino中的引脚以GPIO数字编号为,不是DX (5) TFT_esp库常用代码详解
1 基本功能
TFT_eSPI tft TFT_eSPI(); //初始化tft对象
tft.init();
tft.setRotation(0); //屏幕旋转0123: 0 90 180 270
tft.fillScreen(TFT_BLACK);//清屏
tft.setSwapBytes(true);//不加容易颜色异常
tft.pushImage(0,0,128,160,test2);//背景图
tft.loadFont(HGY316); //加载自定义中文字体设置字体大小对加载的字体无效2 字体设置
tft.setCursor(0,0); //改字体显示位置
tft.setCursor(0,0,a); //第三参数选择自带字体样式a124678
tft.setTextSize(1); //设置文本显示的大小对中文字体无效
tft.setTextFont(1); //选择库自带字体:1,2, 4, 6, 7, 8
tft.setTextColor(TFT_GREEN, TFT_BLACK);//字体颜色字体背景色
tft.println(周一); //输出中文或字符串,draw没有自动换行tft.drawChar(#, 100, 64, 2); //输出字符字符,x,y,大小字符或ascii码都可以
tft.drawNumber(num, 0, 100, 4); //输出数字
tft.drawString(zifucahun, 0, 80, 2);//上传字符串坐标大小3 常见字体颜色代码
#define TFT_BLACK 0x0000 /* 0, 0, 0 */
#define TFT_NAVY 0x000F /* 0, 0, 128 */
#define TFT_DARKGREEN 0x03E0 /* 0, 128, 0 */
#define TFT_DARKCYAN 0x03EF /* 0, 128, 128 */
#define TFT_MAROON 0x7800 /* 128, 0, 0 */
#define TFT_PURPLE 0x780F /* 128, 0, 128 */
#define TFT_OLIVE 0x7BE0 /* 128, 128, 0 */
#define TFT_LIGHTGREY 0xD69A /* 211, 211, 211 */
#define TFT_DARKGREY 0x7BEF /* 128, 128, 128 */
#define TFT_BLUE 0x001F /* 0, 0, 255 */
#define TFT_GREEN 0x07E0 /* 0, 255, 0 */
#define TFT_CYAN 0x07FF /* 0, 255, 255 */
#define TFT_RED 0xF800 /* 255, 0, 0 */
#define TFT_MAGENTA 0xF81F /* 255, 0, 255 */
#define TFT_YELLOW 0xFFE0 /* 255, 255, 0 */
#define TFT_WHITE 0xFFFF /* 255, 255, 255 */
#define TFT_ORANGE 0xFDA0 /* 255, 180, 0 */
#define TFT_GREENYELLOW 0xB7E0 /* 180, 255, 0 */
#define TFT_PINK 0xFE19 /* 255, 192, 203 */
#define TFT_BROWN 0x9A60 /* 150, 75, 0 */
#define TFT_GOLD 0xFEA0 /* 255, 215, 0 */
#define TFT_SILVER 0xC618 /* 192, 192, 192 */
#define TFT_SKYBLUE 0x867D /* 135, 206, 235 */
#define TFT_VIOLET 0x915C /* 180, 46, 226 */(6)TFT屏显示图片
1 想要显示图片需要将图片转化为c数组然后存入头文件中调用显示
显示图片函数为
tft.pushImage(0,0,128,160,test2);//x1,y1--x2,y22 值得一提tft屏幕的坐标系与旋转问题 3 把图片转化为数组步骤使用lcd-image-converter 1 准备好分辨率图可以使用window画图软件 2 导入图片 3 设置参数 4 保存数组 头文件格式 #pragma once
#includepgmspace.hconst uint8_t name[] PROGMEM { //name可自己设置//放生成的代码
}
4 本项目中计划内容的坐标分配 (7) TFT屏显示汉字 1 c/user/windows/fonts/想用的字体.ttf或网上下 移动到TFT_espI库/tools/Creat_Smooth_Font/Creat_Font/data目录下 2 下载processing软件打开TFT_eSPI\Tools\Create_Smooth_Font\的 Create_font.pde 进行编辑 -130行改为自己的ttf字体文件名 -132行选中后缀ttf解注释 -140行设置字体大小使用中文库在arduino中不可修改只有在里可修改 3 准备好项目中使用的所有汉字使用网页在线转换汉字转Unicode编码 然后可以在记事本中把所有的\u替换为 ,\0x 删除开头的逗号 4 在Create_font.pde -330行下把上一步的汉字Unicode编码粘贴到specificUnicodes数组中去 5 点击precessing 运行按钮弹窗会显示所有生成的汉字和其余字符 6 成功后回到TFT_eSPI\Tools\Create_Smooth_Font\Create_font\FontFiles目录 把生成对的 字体名.h 头文件粘贴到项目文件夹中然后引用头文件就可以显示中文。 tft.print(内容) 函数输出即可该步可直接搜b站教程如何使用TFT_espI库在tft屏上显示汉字 注只有生成好的汉字才能够在TFT屏上显示否则乱码 (8) wif联网与HTTP获取时间 事先注意上传代码前一定查看清楚自己的模块到底是什么型号 若是CP2102则对应NodeMCU板载ESP-12E ( 4MB Flash) WIFI模组 在arduino中一旦选择错误wif功能基本报废且波特率也对不上 cp2102:应设115200,若设为9600烧录代码会很慢 1 给出cp2102的arduino工具参数图 2 wifi连接基本操作 led灯显示是否连接成功闪烁表示正在连接长亮表示连接成功
#include ESP8266WiFi.h
const char *ssid ....;
const char *pass ....;int led14; //wifi连接指示灯D5连接led
void setup() {Serial.begin(115200);WiFi.mode(WIFI_STA); //使用STA模式用8266去连接wifiWiFi.begin(ssid, pass);//等待wifi连接结果while (WiFi.status()!WL_CONNECTED) {bool isdigitalRead(led);//巧妙反转指示灯digitalWrite(led, !is);Serial.println(....);delay(500);}digitalWrite(led, 1);//成功常亮Serial.println(WiFi 已连接);Serial.println(IP地址为:);Serial.println(WiFi.localIP());}3 HTTP获取网络时间 使用网址为http://quan.suning.com/getSysTime.do 显示格式为{sysTime2:2024-12-20 07:59:14,sysTime1:20241220075914}
#include ESP8266HTTPClient.h
HTTPClient http;
String GetURLhttp://quan.suning.com/getSysTime.do; //获取链接
String res;//回应
void setup() {//需提前连接wifiSerial.begin(115200)//http连接http.setTimeout(5000);//预启动连接不加也行http.begin(GetURL);//网址
}
void loop() {//连接int httpCode http.GET();//一个数值表示连接情况if(httpCode0){Serial.printf([HTTP] GET... code: %d\n, httpCode);if (httpCode HTTP_CODE_OK){ //是否是一个成功的请求//读取响应内容res http.getString();//得到固定内容Serial.println(res);//可使用substring(a,b)--显示s[a]~s[b-1]的字符串内容截取时间delay(300);}}else{Serial.println(HTTP Get ERROR);} http.end();//关闭连接
}4 因为没有周几的情况故本项目使用zeller公式根据年月日计算出周几 注意 实测定时器内置定时器Tricker库法 -若开机只获取一次时间然后采用tricker定时器库每几秒联网更新一次时间 这样容易反复重启可能tricker要求调用函数精简而网络获取不稳定需要1-2s 或是其它的冲突问题开发板容易无限重启最后仍采用在loop中重复获网络时间的方案 3 代码实现 代码模块功能介绍与注意事项 3.1 不同UI界面
项目共有5个界面可想而知人如果全把代码写在主程序修改非常不遍故根据功能将不同的界面写入不同的.c和.h文件由主函数统一调用主函数只负责调用写的方法每个UI的美化与内容设计都在各自模块中中进行见下头文件方法
(1) 计划内容与wifi_HTTP 头文件
/*
1 计划界面设计月日周 计划设计函数
2 功能接口函数便于修改
3 wifihttp获取网络时间
*/
//日期结构体
typedef struct {int year;int mon;//月int day;//日int wk;//周int h;//小时 0-24int m;//分 0-60int s;//秒0-60
}DateTypedef;//tft屏上显示月日周 计划信息
void Get_monthPlan(DateTypedef x);//显示月初事项
void Get_weekPlan(DateTypedef x);//显示周信息
void Get_dayPlan(DateTypedef x);//显示日计划
void Get_bottomtime();//显示底部时间数据//网络功能
void WiFiHTTP_init();
void Update_http();//并更新时间数值(2) 提醒 与 UI界面头文件
/*
1 功能U1-4界面设计
2 提醒事件设计如喝水日期提醒
*///弹出提醒函数可扩展类似功能
void Remind_water(DateTypedef x);//每日定时喝水弹出几s//仅查看UI界面函数
void Remind_menu();//UI1
void Remind_warn();//UI2
void Remind_habit(DateTypedef x); //UI3
void Remind_special(DateTypedef x);//UI43.2 UI切换方法
功能逻辑为天问语音模块检测到口令后给对应引脚一个高电平正常为低所以在loop中检测对应引脚变化即可。使用UI表示每个界面的编号0-40为计划界面在swith的default分支1234分别对应菜单提醒打卡特殊。
值得注意的是Loop中不要放刷新屏幕数否则会爆刷屏幕帧率会极端低效果很差。而这里采用了标记法记录上一次屏幕UI编号和本次编号只有两次编号不同的时候说明进行了界面切换此时才刷新屏幕然后及时更新两个标记就可以吗大大减少刷新次数增加稳定性。 void loop() {Get_freshUI();//更新UI编号,显示不同界面switch (UI){case 1: //U1菜单Remind_menu();UI0;break;case 2: //U2提醒Remind_warn();UI0;break;case 3: //U3打卡Remind_habit(wifi_date);UI0;break;case 4: //U4特殊Remind_special(wifi_date);UI0;break;default: //计划界面Get_dayPlan(wifi_date);Get_weekPlan(wifi_date); Get_monthPlan(wifi_date);Get_bottomtime();//多久更新一次UI0;//默认为计划界面}
}
//获取当前口令下的UI编号
int tem0;//标记上一次UI界面的编号牌
void Get_freshUI(){//不同的口令在语音模块设置对应引脚电平为高//esp8266读取到高电平信号,更新界面UI值显示不同界面if(digitalRead(u1_pin)HIGH)UI1;if(digitalRead(u2_pin)HIGH)UI2;if(digitalRead(u3_pin)HIGH)UI3;if(digitalRead(u4_pin)HIGH)UI4;if(tem!UI){tft.fillScreen(TFT_BLACK);//清屏temUI; //仅在切换不同界面时更新一次防低帧爆闪}
}3.3 LooP函数中的内容与优先级
(1) 网络更新需要放在这里获取网络时间应立即对本地结构体时间尽心修改 (2) 像闹钟纪念日喝水这种固定时间的时间需要弹出立刻提醒的应放在界面切换之上时间到立刻弹出一段时间然后自动退出即可。 (3) 更新界面编号的函数应随时检测引脚电平变化确定口令的有效性
void loop() {Update_http();//从网上获取与更新本地时间Get_freshUI();//更新UI编号,显示不同界面digitalWrite(u5_pin,HIGH);//我的蜂鸣器低电平触发Remind_water(wifi_date);//提醒喝水所有弹出提醒事件都是高优先级不在swith中switch (UI){case 1: //U1菜单Remind_menu();UI0;break;case 2: //U2提醒Remind_warn();UI0;break;case 3: //U3打卡Remind_habit(wifi_date);UI0;break;case 4: //U4特殊Remind_special(wifi_date);UI0;break;default: //计划界面Get_dayPlan(wifi_date);Get_weekPlan(wifi_date); Get_monthPlan(wifi_date);Get_bottomtime();//多久更新一次UI0;//默认为计划界面}//测试快速模拟 时分秒查看计划// wifi_date.m;// if(wifi_date.s60){ wifi_date.s0; wifi_date.m;}// if(wifi_date.m60){ wifi_date.m0; wifi_date.h;}// if(wifi_date.h24){ wifi_date.h0; wifi_date.wk; wifi_date.day;}// if(wifi_date.wk8) { wifi_date.wk1; }
}3.4 随时间滚动的计划事项
(1) 首先我们的时间结构体存取的是整数值 而非简单的截取显示一段字符串所以对于网络获取的数据应对字符串进行准换保留为整型数据
String s;
s[i]-0 可得到数字字符代表的整数值
然后通过十进制计算出具体值保留即可乘以若干10(2)涉及时间区间需要判断一个时间是否在某个区间内用反向判断更简单
typedef struct {int year;int mon;//月int day;//日int wk;//周int h;//小时 0-24int m;//分 0-60int s;//秒0-60
}DateTypedef;
//判断当前时间是否在[m1:n1]~[m2:n2]之间,含区间端点
int Set_section(DateTypedef x,int m1,int n1,int m2,int n2){if(x.hm1||x.hm2) return 0; //小时超界 else if(x.hm1x.mn1) return 0; //不到区间左端点 else if(x.hm2x.mn2) return 0; //超过区间右端点else{return 1; }
}(3)最后一个问题 每一步计划的更新应该是在某一秒到达计划时间后更新一次而不是反复的刷新屏幕那样会降低帧率效果极差同上我们依旧使用标记法这次是对所有的计划事件编号两个标记本次时间与上次事件万能的flag 如不刷新屏幕会有字体重叠显现出现 /*
周计划显示
*/
int int wk_s1,wk_n0; //st上一次计划编号now本次计划编号
void Get_weekPlan(DateTypedef x){tft.setTextColor(TFT_GREEN);switch (x.wk){case 1:wk_n1;locadt(0,60,周一); //封装的显示函数坐标与内容一起设置简化代码locadt(0,80,今日内务);locadt(0,100,耳鼻,清灰,耳机);break;case 2:wk_n2;locadt(0,60,周二);locadt(0,80,今日内务);locadt(0,100,洗澡,大扫除);break;case 3:default:locadt(0,100,ERROR!);}if(wk_s!wk_n){ //同理防爆刷tft.fillRect(0, 60, 128, 120, TFT_BLACK);//部分刷新屏幕wk_swk_n;}
}3.5 天问代码
仅需要注意语音标识ID不会自懂更新 重点内容便是上述部分还有数不清对的小功能便不再详细描述项目文件链接中包含全部的程序,开源供大家学习交流。 项目难度不大代码和结构半小时就编好了但各种模块的坑真的是一个接一个在此综合的整合一下所有问题希望对需要的人有所帮助节省时间。硬件学习并不是件很难的事只不过麻烦而已请不要丧失你的信心加油各位 二 展示
1 图片 2 视频 ✨太一·庚辰✨赛博少女助手esp8266TFT语音识别 3 下载
3.1 项目下载
项目完整文件
3.2 arduino esp8266开发板离线包
esp826632开发板包
3.3 processin下载
processing官网
3.4 天问BLOCK下载
天问官网
