本文来源:https://mp.weixin.qq.com/s/8nW-F1HNLYMLBlkyrchpHQ
若有版权问题,请来信告知:13951431913#139.com 或在右方提交评论。
一块4.26英寸的黑白电子墨水屏,首先显示天气和日期,5分钟后切换至一条猫咪冷知识,随后又呈现月历和招财猫翻页时钟。
这就是Cattt,一款以猫咪为主题的ESP32-S3桌面信息屏。
它采用Seeed Studio XIAO EE05电子纸开发板和800×480分辨率的电子墨水屏,内置四套独立页面。用户既能让页面依照设定时间自动轮换,也能通过开发板上的按键手动切换。
与普通的ESP32信息屏不同,Cattt并未着重展示驱动和界面代码。作者借助浏览器端的SenseCraft Seeedash搭建页面,通过拖拽组件整合天气、时钟、日历、图片及外部数据源,最后将界面部署至设备。
虽然无需从头编写表明程序,但硬件连接、固件烧录、设备配网、外壳组装和数据规格等步骤一样都不能少。
今天我们就来了解一下,这款名为Cattt的电子墨水桌面屏是如何制作完成的。
Cattt专门为猫咪主题设计了四个页面布局。
四个页面被整合成一个播放列表,设定每5分钟自动切换一次,同时保留了手动按键翻页的功能,最终形成了一个小巧且功能专一的桌面信息设备。
项目需要哪些硬件?
Cattt的主要硬件组成并不复杂,其核心组件包括:
XIAO EE05开发板已预装XIAO ESP32-S3芯片。电子墨水屏的像素规格为800×480。电池需配备JST 2.0mm接头,作者选用的电池规格为50×40mm,最大厚度控制在5mm以内。
该项目采用的软件是SenseCraft Seeedash,它也被称作SenseCraft HMI。
这款软件属于网页版的无代码仪表盘设计工具,用户可以在浏览器中添加文字、图片、图形、时钟、日历、天气及外部数据源等多种元素,并能自定义调整字体样式、阴影效果、背景填充和组件位置。
其操作流程类似于PPT制作:左侧区域用于选择组件类型,中间为设计画布,右侧则用于编辑所选组件的各项属性。
设计完成后可以先预览效果,确认无误后再将界面部署到设备上。用户还可选择将设计好的界面分享至社区,让其他成员能够复制、修改并在自己的设备上部署。
因此,该项目所称的“无需编写代码”主要是指无需自行开发ESP32的显示程序和天气数据接口逻辑。但硬件接线、固件写入、Wi-Fi参数配置、设备配对以及界面设计等步骤仍需用户一步步完成。
XIAO EE05开发板已配备JST 2.0电池接口及24针电子墨水屏的SPI连接器,因此无需自行焊接复杂的外围电路。依照作者提供的连接示意图,将电池、FPC排线、电子墨水屏和开发板进行连接即可。
开发板上的Key 2与Key 3按键用于手动切换不同页面,而Reset按键则负责刷新当前页面。
XIAO EE05附带一根长度为10厘米的FPC延长线。作者特别提示,在安装过程中需确认排线、连接器、电子墨水屏和开发板的连接关系,否则后续可能无法顺利安装外壳。硬件连接完成后,建议先检查显示屏排线和电池插头,再进行外壳安装步骤。
第二步:打印并组装外壳
Cattt的外壳由作者的创客伙伴Gokul协助设计外观。
这套外壳既可以放在桌面上,也兼容悬挂安装,侧面还保留了一个小型电源开关。
作者使用Bambu打印机制作了外壳,并在项目中给出了完整的装配图片。组装时,先将电子墨水屏小心放入前框,再依次安装开发板、电池、开关和后盖。
XIAO EE05开发板使用4颗M2×5mm自攻螺丝固定,背板和边框使用4颗M3×5mm自攻螺丝锁紧。
外壳的内部空间同时容纳了开发板、4.26英寸显示屏、电池和电源开关,最终形成一个相对完整的桌面设备,而不是裸露的开发板原型。
第三步:烧录固件并绑定设备
硬件组装完毕后,应将Cattt与SenseCraft Seeedash进行连接。
设备成功绑定后,请前往Seeedash的Workspace页面,点击“New”按钮以建立新的外观设计。
在外观编辑器中,用户可从左侧拖拽组件至画布,随后在右侧修改其参数。页面顶部提供了Save(保存)、Preview(预览)、Apply(应用)及Publish(发布)等功能。
其中:
Cattt所用的四套页面分别整合了天气、时间、图片、日历、外部API以及形状组件。
1. NYA-Cat天气页面
天气页面的左侧展示着天气和时间信息,右侧则配有一张猫咪的图片。
左侧所使用的组件包括:
作者将时区设置为深圳时间。
天气组件利用了SenseCraft Seeedash内置的Open-Meteo接口。该平台提供了4种快速预设天气卡片,可以直接添加至页面。若需更多参数,也可以进入Advanced页面,自行选择需要展示的天气数据。
右侧则运用了图片组件,支持上传本地图片。作者已将自己的天气页面分享至社区,其他用户可以复制到个人工作区,然后进行修改。
2. 随机猫咪知识页面
第二个页面由猫咪背景图和知识卡片构成。
作者将SeeDance生成的黑白猫咪插画设为背景,并利用External Data Source组件获取随机猫咪知识,数据来源为catfact.ninja提供的接口。页面内的文字卡片是使用矩形组件创建的,并添加了黑色填充与阴影效果。
需要注意的是,Seeedash不仅能支持平台自带的天气和日历组件,还能连接外部数据源。这表示相同的页面结构不限于展示猫咪知识。只需替换数据接口和背景图片,就能制作出其他类型的信息卡片。
但在Cattt原项目中,开发者接入的是随机猫咪知识接口。
3. Catlendar月历页面
第三套页面采用黑色背景设计,中央放置月历,左右两侧各有一张猫咪图片。
猫咪图片选自iconfont资源库,月历则直接应用Seeedash自带的Calendar组件。
作者对日历的表面样式进行了调整,使其与整体黑白猫咪主题相协调。
这个页面不涉及复杂的数据处理,主要精力放在了界面布局和组件样式上。作者同样将最终效果分享到了Seeedash社区,用户可以直接复制使用。
4. 招财猫翻页时钟
最后一套页面是翻页时钟。
显示屏左侧展示了一幅招财猫图像,中间部分采用纹理背景,右侧则放置了翻页时钟卡片。
页面运用了图片、时钟和矩形组件,矩形被设置为白色填充并添加了阴影效果。
这套外观最初由Seeedash社区用户Alex设计。作者在复制原外观后进行了重新调整,将其改造成了当前的翻页时钟页面,并再次分享了自己的最终版本。
这也展示了Seeedash的另一种用法:用户无需从零开始创建界面,可以先复制社区中的模板,再结合自身的硬件配置和设计主题进行个性化调整。
四个页面外观设计完成后,接下来需要进行:
Workspace → My Page,选择准备部署的四个页面,然后点击页面右上角的“Apply to Device”按钮。
确认选择正确的设备后,Seeedash会自动将这四个页面排列成一个播放序列,并推送至电子墨水屏设备。
在部署过程中可以设定Update Interval参数,这个参数决定了各页面之间的切换时间间隔。作者在自己的设备中将此设置为每5分钟切换一次。
设置页面还给出Enable Low-Power Mode选项。启用后,显示屏完成页面切换便会进入休眠,以减少能量消耗。
项目原文没有给出实际功耗测试和具体电池续航时间,只说明启用低功耗模式可以延长电池使用时间。因而,项目的真实电池续航仍需要依据页面切换频率、联网状态和实际电池开展测试。
这个项目真正应对了什么?
从能力上看,Cattt做的事情并不复杂:表明天气、时间、月历和一条猫咪知识。
但它比较完整地展示了另一种ESP32项目开发方式。
过去要制作一块电子墨水信息屏,往往需要亲自开发显示屏驱动、网络连接、接口请求、数据解析以及界面布局的代码。
Cattt将界面与内容规格转移到了网页端。
硬件部分承担了显示屏连接、联网和页面接收的任务,而界面设计则通过拖拽组件来实现,天气、日历以及外部接口均由平台统一整合。
这种做法显著降低了编码工作量,同时也减少了修改界面的成本。当需要调整字体、图片、位置或数据源时,无需重新编写整套显示程序。
当然,“无代码”并不意味着完全无需动手操作。
使用者仍然需要完成硬件组装、外壳打印、固件烧录、Wi-Fi配置、账号绑定以及页面部署等工作。整个项目的重心已从底层驱动和程序调试,转移至硬件装配、信息组织和界面外观方面。
对于那些希望快速制作电子墨水桌面终端,但又不想从显示屏驱动开始编写代码的人来说,这个项目提供了一套相当清晰的参考流程。
写在最后
Cattt最引人注目的并非其传感器数量或算法复杂度。
它只是将几类日常需要查看的信息,整合到一块安静的黑白显示屏上,再通过猫咪主题设计组合成一个完整的桌面设备。
整个项目使用的硬件不多,连接方式也比较简单。真正需要精心设计的部分,是如何布局四个页面、如何选择数据源,以及如何让外壳与界面保持一致。
天气、月历、猫咪知识和翻页时钟,是作者给出的四种内容选择。
复制这个项目时,无需完全照搬这些内容。SenseCraft Seeedash提供的文字、图片、时钟、日历、天气和外部数据源组件,已经为界面设计留出较多调整余地。
不过,无论最终展示什么内容,Cattt都揭示了一个事实:
一个完成度较高的桌面硬件项目,不一定需要从大量代码开始。处理好硬件连接、内容来源、交互方式与外观设计,同样能打造出值得长期放置在桌面上的设备。
免责声明:本文档所呈现的内容主要由人工智能系统整理并翻译自国际工艺网站及开源社区的相关资料,所有版权归原作者所有。文中配图均来源于原始文献,本文仅作为学习交流之目的。若发现任何侵权问题,请及时联系笔者进行内容删除或修正。项目原文链接(或点击“阅读原文”按钮):https://www.hackster.io/meilily-li/cattt-esp32-dashboard-weather-cat-facts-calendar-clock-fe8aa7


























