陶晶驰串口屏使用

小白初始串口屏

为什么要用串口屏,让我们到陶晶驰的官网看看他怎么说

下面我来分享一下我的学习方法,

首先

为了有一个大概得了解我们要先知道这个串口屏能实现什么功能,所以我们可以先去百度或者哔站搜索一下用陶晶驰串口屏做的项目,就大概能了解这个东西可以干什么了---也可以再看一下这个视频【电赛】【小技巧】USARTHM(淘晶驰串口屏)介绍与简单使用_哔哩哔哩_bilibili

然后,这个串口屏他的官网资料还是非常多的,所以我可以直接学习他官网的资料

如果你看了我上面说的这个链接的视频,那么你应该已经下载好了 USART HMI 这个软件

第一次创建文件请看这篇博客:淘晶驰串口屏详细使用流程,创建工程教程_陶晶驰-CSDN博客

第一次进来界面大概是这个样

然后我们就可以研究一下左侧的这些控件的使用方法,建议搭配官网的文档说明(所有控件详解 --- 淘晶驰串口屏资料中心 1.1.0-2026-01-16 10:28:24 文档

然后就先自己研究一下这些控件(注意:新建的项目每次都要添加字库)

在USART HMI里

然后就可以自己研究了

下面是我自己研究了一会弄的(大概研究了半天),主要就是了解一下每个控件到底能干什么用

还有一个program.s,这个里面是启动前的一些设置(可以理解成启动文件)

推荐一些文章大家有空可以见到看看:

stm32控制陶晶驰HMI串口屏_stm32与陶晶驰屏幕通讯-CSDN博客

stm32与串口屏双向通讯官方例程 - 指南 - clnchanpin - 博客园

但是这样弄完感觉还是对某些东西的概念一知半解,感觉会了,又感觉有点虚。所以不能光学,一定要又应用,不然学了不用到时候就忘了

所以下面给大家来一个实战案例

实战案例

需求

复制代码
本设计采用STM32单片机作为主控制器,通过LCD触摸屏实现饮品选择与点单操作。用户可直接在触摸屏上浏览饮品类别、图片与价格,点击对应饮品图标即可将其加入订单列表,系统会实时显示已选饮品与总金额;

LCD触摸屏实时显示当前订单信息、操作提示及系统状态;

那么我们就要开始构思如何实现了,一般这种时候没思路我们就去互联网上找找有没有人弄个类似的项目,然后看看别人是如何实现的,然后仿照他的方法再结合自己的需求改进优化,刚好我在陶晶驰官网看到了有了个类似的项目

然后我发现他们的背景都是图片,直接把图片弄进去,再用一写透明的按键或者切片控件来操作,所以我就想让ai结合我的需求给我生成HTML。【这里推荐用Claude Code或者Google AI Studio】然后就我再打开HTML截图(注意图片大小要符合你选的串口屏型号的大小,比如我选的型号是T1什么,分辨率是320*240),但是我们不可能这么完美的截出图片,所以请出辅助的网站

在线按像素调整图片大小 - 免费且高质量

然后就开始漫长的制作吧

给大家看看我最后做好的样子

弄完这个也有一些感悟,学东西不能光学不用,学完了要结合所学的东西去应用,这样才算是学到了,不然就会陷入一种感觉自己好像会了,但是没有用过,过一段时间就忘记了

相关推荐
工业HMI实战笔记9 小时前
工业机器人HMI:协作机器人的人机交互界面
人工智能·ui·性能优化·机器人·自动化·人机交互·交互
HwJack2019 小时前
HarmonyOS APP UI单位适配深度实践:vp/fp/px的工程化解决方案分享
ui·华为·harmonyos
工业HMI实战笔记21 小时前
工业HMI色彩规范:4个禁忌+3类场景配色方案
ui·性能优化·自动化·汽车·交互
csdn_life181 天前
Qwen3.5-397B-A17B-GGUF(UD-Q4_K_XL)3卡全流程部署文档(基础→API→UI)
ui
工控小龙人1 天前
环保设备HMI:废气处理的浓度监控界面
ui·人机交互·用户界面
疯狂敲代码的老刘1 天前
如何在 TRAE 中安装 UI/UX Pro Max Skill?完整图文教程
ui·ux·trae·skills
我命由我123451 天前
Photoshop - Photoshop 工具栏(63)注释工具
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop
键盘鼓手苏苏2 天前
Flutter for OpenHarmony:markdown 纯 Dart 解析引擎(将文本转化为结构化 HTML/UI) 深度解析与鸿蒙适配指南
前端·网络·算法·flutter·ui·html·harmonyos
工控小龙人2 天前
医疗器械HMI:输液泵的精准控制界面
ui·人机交互·用户界面