陶晶驰串口屏使用

小白初始串口屏

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

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

首先

为了有一个大概得了解我们要先知道这个串口屏能实现什么功能,所以我们可以先去百度或者哔站搜索一下用陶晶驰串口屏做的项目,就大概能了解这个东西可以干什么了---也可以再看一下这个视频【电赛】【小技巧】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),但是我们不可能这么完美的截出图片,所以请出辅助的网站

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

然后就开始漫长的制作吧

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

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

相关推荐
laowangpython13 天前
Photoshop 2025 下载安装全攻略
其他·ui·photoshop
风华圆舞13 天前
Flutter + 鸿蒙 Intents Kit:页面直达能力的完整接入方案
flutter·ui·华为·harmonyos
鲲穹AI超级员工13 天前
多款实用配色工具汇总,适配设计、UI 创作等多元场景
ui·色彩设计
UXbot13 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
烂白菜13 天前
智码美形:华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践
ui·华为云·ux
像风一样的男人@13 天前
python --实现代理服务器
git·ui
风华圆舞13 天前
鸿蒙 Flutter 页面怎么感知防窥状态并调整 UI 可见性
flutter·ui·harmonyos
UXbot14 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot14 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
烈焰晴天14 天前
Codex 桌面端如何链接Figma MCP 服务器拿到 Figma设计稿精准尺寸等结构化数据 来精准还原UI
服务器·ui·figma