复刻桌面小电视【包含代码分析】

猿白

已于 2024-02-04 10:39:25 修改

阅读量934

点赞数 9

文章标签：笔记经验分享 C c++

于 2024-02-01 14:00:03 首次发布

本文链接：https://blog.csdn.net/qq_44774198/article/details/135904888

版权

宗旨：开源、分享、学习、进步，生命不息，折腾不止。

复刻小电视

感谢各位大佬的开源项目，让我有了学习的机会，如果侵权，请联系我删除。本人能力有限，如果有什么不对的地方，欢迎指正。

ESP32桌面小电视_CH340K【xutoubee】
嘉立创、B站、网站
桌面WIFI小电视【DIY攻城狮】
嘉立创、公众号同名、百度网盘源码分享【1992】
SD2SD3开源项目【Misaka不炸板】
B站
ESP8266天气时钟SD2SD3小电视【橘柚京】
嘉立创、B站
SD1迷你小电脑(小电视)成熟版本ESP-8266【云梦泽创意空间】
嘉立创、B站

截止到目前我搜索到的开源项目如上，如果有人想分享项目可以联系我。

一、硬件

如果动手能力强，可以选择自己打印PCB板、焊接、拼装、3D打印外壳、程序录入。建议年龄12岁以上的人员动手操作。
如果动手能力不强可以直接购买成品，大概是30￥ ~ 40￥的价格。上下5% ~ 10%的浮动空间。

名称	数量	价格
PCB板	1	嘉立创免费打印【每个月两张】
外壳	1	3D打印，成本因材料的不同而不同
电容	-	-
电阻	-	-
…	…	…

如果手上有一个esp8266芯片加一个TFT屏幕【1.54寸】也可是实现相同的效果。【不美观，重新画PCB板和打印外壳的效果好】
连接图如下：【图来源自开源共享群】
在这里插入图片描述
后期升级版本，如：增加ws2812b灯【氛围灯】、触摸模块【按键】、蜂鸣器【闹钟】等，如下图连接：

实物链接图：

本人购买了成品，也用esp8266+1.54寸TFTY屏幕复刻一个进行学习。如果大家有更好更多的玩法，可以共同分享交流，共同学习进步。

二、软件

阿里云盘
如果有其他网盘需求请联系我。

三、源码解析

学习过程参考文档【感谢xuetuobee分享的教程资料】
【教程】1 - ESP32桌面小电视之如何制作字库.pdf
【教程】2 - ESP32桌面小电视之如何制作图片数据.pdf
【教程】3 - ESP32桌面小电视之如何显示文字和图片.pdf
教程3-配套Demo.rar
GIF动图分解.exe【密码：2txi】
jpg转Hex.exe【密码:8qkx】
时间蚂蚁字体.zip
字库提取.exe【密码:dax6】
字库制作.rar

工具和教程如上，如果比较懒可以直接看我的教程。

教程1 ESP32桌面小电视之如何制作字库

1. 工具选择

用到的工具主要包括：
字库提取.exe【密码:dax6】
字库制作.rar

2. 操作流程

大概流程：选择字体文件（如宋体、黑体等），在指定字体文件中提取你需要的文字，因为如果将整个字体文件做成字库，将导致 ESP8266的 Flash 存不下，因此只提取必要的部分，提取出来后，会重新生成字体文件，然后使用 Processing 软件，将字体文件转换成 vlw 格式，转换过程中需要设置转换后的字体大小，最后将 vlw 转换成 hex 文件，将 hex 做成一个 h 头文件即可，具体步骤如下：

（1）找到字体文件

在这里插入图片描述这是电脑自带的字体，可以网上寻找喜欢的字体，找字体网，office字体库等。
接下来教程以也字工厂惊鸿行楷.ttf为例：

（2）提取字体

因为字体库里面包含的字体太多，咱们用到的很少，加上esp8266的内存不够，因此需要提起部分的字体。
打开自提提取.exe软件，随后根据下图操作：

在这里插入图片描述

拖入字体，自动识别
文本片段：可以输入想要的字，也可以复制3500常用字
点击生成，等待字体生成

（3）生成文件，转移路径

生成字体结束后会自动打开生成下的文件夹。
在这里插入图片描述
下载并且解压字库制作.rar压缩包
选择xxxx.ttf文件，复制到解压后的文件路径字库制作\取字库 - 无特殊需要不需要该步骤\Create_font\data下，如图：

（4）打开`processing.exe`

之后回退一步，进入到字库制作\取字库 - 无特殊需要不需要该步骤\processing-3.5.4路径下，找到processing.exe并打开。
在这里插入图片描述
选择第二项打开文件，打开Create_font\Create_font.pde

打开之后按照下图进行操作：

会出现中文乱码的问题，可以修改字库的名字为数字或者英文来避免这种情况

（5）生成vlw文件

点击运行之后，可以自动打开生成并打开生成后的文件夹：
在这里插入图片描述

（6）将 vlw 文件转换成 hex 文件

打开如下网站进行转换：
http://tomeko.net/online_tools/file_to_hex.php?lang=en

选择生成好的vlw文件
在这里插入图片描述

在这里插入图片描述

（7）创建xxx.h文件

创建.h 文件，按下图做程序框架，其中 PROGMEM 必须加上，作用是该数组数据存至 Flash 用户程序中而非 RAM，用来减少 RAM 的占用。最后将 vlw 转换成 hex 数据粘贴至中间位置。

#include <pgmspace.h>
//font_111可以自己重命名，最好跟文件名一致
const uint8_t font_111[] PROGMEM = {

//粘贴到此	
};

代码讲解：

#include <pgmspace.h> ：导入ROM操作的相关函数【函数讲解】
const uint8_t ：定义数组的变量类型，不要修改，const表示初始化一个变量之后不能再进行更改，只读状态。uint8_t实际上是一个char。
csdn_32X32[ ]：给数组起名字，这个可以自定义，英文。最好和xxx.h文件名统一，方便识别。
PROGMEM ·：将数据存入flash闪存中，不然可能会出现动态空间不足的问题。【函数讲解】

到现在可以已经把ttf字体文件进行了提取，并且转换成了vlw文件，在通过网站把vlw文件转成了xxx.h文件让esp8266和c编程语言可以直接识别。

教程2 ESP32桌面小电视之如何制作图片数据

1. 工具选择

通过上面的两个软件进行编码：

（1） jpg转Hex.exe工具原作者，通过把jpg格式的图片转成xxx.h文件。
（2） GIF动图分解.exe是研究GIF动图的，用来拆分GIF动图的。

注意: 在选择图片的时候选择合适的分辨率，如：1.54寸屏幕的240x240分辨率，选择的图片尽量在这个范围内，不然超出部分无法显示。

2. jpg转Hex操作流程

前提：找到自己喜欢的或者合适的图片，因为软件的特殊性，只能识别jpg格式，如果有其他格式的图建议转换一下。
在这里插入图片描述
这里以CSDN图标【32x32分辨率】为例，如果侵权联系我删除。
软件自动在图片的同目录下生成一个xxxx.h的文件。

用vscode打开xxx.h文件如下：

csdn_32X32[ ] = {
0xff, 0xd8, 0xff, 略....
};

如果想要直接#include这个函数，会编译不通过，需要进行修改：

#include <pgmspace.h>
const uint8_t csdn_32X32[ ] PROGMEM = {
0xff, 0xd8, 0xff, 略....
};

代码讲解：

#include <pgmspace.h> ：导入ROM操作的相关函数【函数讲解】
const uint8_t ：定义数组的变量类型，不要修改，const表示初始化一个变量之后不能再进行更改，只读状态。uint8_t实际上是一个char。
csdn_32X32[ ]：给数组起名字，这个可以自定义，英文。最好和xxx.h文件名统一，方便识别。
PROGMEM ·：将数据存入flash闪存中，不然可能会出现动态空间不足的问题。【函数讲解】

3. GIF动图分解

网上找GIF动图的时候最好选择透明的背景或者跟总基调颜色一样的背景色，不然不太美观。
在这里插入图片描述
这次分解完成的结果是和GIF动图分解.exe同一个目录下。

分解的一帧一帧的图片在分解文件夹里面，之后就是重复上一步操作，把jpg图片转换成xxx.h文件，这里就需要有点耐心对其进行处理。
如果寻找到批量处理的方法我会分享给大家。【理论上代码程序可以实现{之后可能会更自己写代码更新}】