陶晶驰串口屏使用

小白初始串口屏

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

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

首先

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

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

然后就开始漫长的制作吧

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

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

相关推荐
FII工业富联科技服务1 天前
Intelligent UI重构工业软件交互:从固定界面到动态生成式交互
人工智能·ui·重构
FII工业富联科技服务1 天前
从大模型到自主运营:Intelligent UI如何成为工业AI的新入口
人工智能·ui
qq_252959971 天前
ChatGPT突然长出“可操作界面”:GPT-6 Intelligent UI让答案变成计算器、地图和小游戏
gpt·ui·chatgpt
兰亭妙微UI设计公司1 天前
兰亭妙微ui设计公司分享:从零搭建网站设计:3 个核心维度,少走设计弯路
ui
Cx330❀2 天前
Qt 多线程深度解析:从底层原理到 UI 线程与同步实战
开发语言·qt·ui·搜索引擎·性能优化·图形渲染
传奇开心果编程2 天前
【声明式UI实用开发技术学与练】第5课 表单处理:受控与非受控
ui·移动开发·开发范式·编程框架·声明式ui
传奇开心果编程2 天前
【声明式UI开发实用技术学与练】第9课 派生状态与计算
ui·移动开发·ux·编程框架·声明式ui
ZARD9962 天前
Codex 连接 Figma:让 AI 读取 Figma UI 设计稿数据
ui·figma·codex
事圆则缓2 天前
Android 一次性事件怎么设计:Channel、SharedFlow 还是 UI State?
android·ui
我命由我123452 天前
Photoshop - Photoshop 使用魔棒工具选择单独的区域
学习·ui·职场和发展·求职招聘·职场发展·学习方法·photoshop