使用 Nextion 显示屏构建 Fridgeye 应用：分步指南

组件与物料

组件	数量
Arduino UNO	1
光敏电阻	1
3.3kΩ 电阻	1
Itead Nextion Enhanced 3.5 英寸触摸显示屏	1

应用与在线服务

• Nextion GUI 编辑器
• Arduino IDE
• GIMP 图像处理软件

项目简介

今年 7 月，几位德国设计专业的学生在 Kickstarter 上发起了一个讽刺性的众筹项目——Fridgeye，一个用于冰箱的精美光线传感器。考虑到 Kickstarter 上经常出现各种离谱的硬件项目，加上团队投入了大量精力使其看起来真实可信，难怪人们难以分辨真假。我从一开始就是这个项目的粉丝，但并非因为我迫切想知道冰箱灯在做什么。Fridgeye 是一个切入点恰到好处的项目，如果你想入门物联网，它极具扩展潜力。

构建 Fridgeye 设备

本文重点在于让 Fridgeye 应用在连接 Arduino 的 Nextion 触摸屏上运行，但在那之前，我们需要一个能感应光线的实际设备。这很简单，只需 5 分钟。你需要 Arduino、面包板、光敏电阻和一个 3.3kΩ 电阻。按如下方式接线。暂时不用管屏幕连接，专注于 Arduino、电阻和光敏电阻。

我手头正好有一个 ProtoShield，于是把一个迷你面包板固定在上面，这样既能保持整体模块化，又保留了面包板的灵活性。我的成品如下图所示。

好吧，我撒谎了，其实只花了 4 分钟。你可以利用剩下的 1 分钟把这个超简单的草图上传到 Arduino，然后在 Arduino IDE 的串口监视器中观察光线传感器的输出。

void setup() { Serial.begin(9600); }
void loop() {
  int val = analogRead(A0);
  Serial.println(val);
  delay(500);
}

上传代码后，从工具菜单打开串口监视器，确保波特率设为 9600。你应该每隔半秒看到一个代表光照强度的整数值。试着遮住传感器、开关灯、用手机手电筒照射它，观察数值变化。你会发现数值范围从完全黑暗时接近 0，到强光下接近 1024。

什么是 Fridgeye 应用？

Fridgeye 应用是 Fridgeye 设备的得力搭档。现在的设备离不开配套应用，正如花生酱配果冻、牛奶配麦片、豌豆配胡萝卜一样。从 Kickstarter 页面来看，应用非常简单：仅显示 Fridgeye 检测到的光线百分比，似乎只有 0% 或 100% 两种状态。

我们当然可以做得更好，利用中间的 99 个数值。让我们直接从概念图入手，将其变为现实。

Nextion 显示屏入门

本项目使用 Nextion Enhanced 3.5 英寸触摸显示屏。这是一款全功能电阻式触摸屏，专门处理图形控制的繁重工作，让即使是 Arduino 这样的低端设备也能通过两根串口线与之通信。虽然显示屏本身很棒，但文档对初学者来说很难导航，我们一步步来讲解。

显示屏编程模型

如果你以前用 Arduino 驱动过显示屏，可能用过某种图形库，抽象了绘图的底层命令。那些库虽然好用，但仍需你在运行时推像素绘图。Nextion 采用不同方法，会让熟悉 MVVM 或 MVC 模式的人感到亲切：应用外观完全在前期配置好并存储在屏幕上。运行时，Arduino 通过预分配的 ID 引用 UI 组件，也以同样方式接收触摸事件等反馈。这意味着 Arduino 不在运行时绘图，而只是视图和控件的“指挥家”。如果这还不清楚，请继续往下看实操步骤。

准备视图

我们的 Fridgeye 应用极简，只需单页面。但 Nextion 支持复杂的多页面应用和过渡动画。无论简单或复杂，都使用 Nextion GUI 编辑器——一款为 Nextion 系列显示屏设计的所见即所得编辑器，帮助我们精准布局。文档和入门体验对新手有挑战，但上手后就能快速设计复杂布局。

打开编辑器前，我们需要准备一张背景图。参考上方模拟图，运行时唯一变化的是检测到的光线百分比。Logo、背景色、底部绿色条是静态的。我们在 GIMP 中制作一张包含这些元素的背景图，耗时约 5 分钟，效果如下。

关键点：图片尺寸必须与屏幕分辨率完全一致。我用的 3.5 英寸屏分辨率为 480×320 像素，所以 GIMP 中画布也设为这个大小。

使用 Nextion 编辑器

注意： Nextion 编辑器需要 .NET Framework，目前仅支持 Windows。我在 MacBook 上通过 Parallels 运行的 Windows 10 虚拟机里正常使用，未在 Linux Wine 下测试。

以下步骤演示在 Nextion 编辑器中创建简单应用布局。打开编辑器后执行：

1. 文件 → 新建，命名项目并选择保存位置。
2. 弹出设备选择对话框。我选择 Enhanced 系列的 3.5 英寸型号。先别点确定，继续第 3 步。



3. 点击对话框左上角的 DISPLAY 标签，选择 90 Horizontal 显示方向。
4. 现在可以点确定了。
5. 从左侧工具箱点击 Picture，大纲中会添加元素 p0。
6. 在左下角 Picture/Font 面板确保选中 Picture 标签。



7. 点击 + 号。
8. 导航到 GIMP 制作的背景图，点击打开。
9. 在右侧属性面板双击 pic 属性值区域，弹出图片选择对话框，选择背景图并确定。
10. 从工具箱点击 Text，左上角添加文本区 t0。记下其 id 属性值，后面 Arduino 编程要用到。
11. 拖动文本区到“Light Status”文字下方，调整大小使其填满较大区域。
12. 为去除白色背景，将 t0 的 sta 属性从纯色改为 crop image（裁剪图片）。
13. 双击 t0 的 picc 属性值，再次选择主背景图并确定。这会让文本区背景变透明。
14. 修改 t0 的 pco 属性为所需字体颜色。我用了自定义色：R:125, G:231, B:191。



15. 从 工具 菜单选择 Font Generator（字体生成器）。
16. 在字体创建对话框设置高度为 96，选择喜欢的字体（我用 Montserrat）。
17. 给字体命名并点击 Generate Font，保存到易记位置，稍后还要用到。
18. 关闭字体创建对话框，提示是否添加生成的字体，点是。该字体现在索引为 0。
19. 修改 t0 的 txt 属性为 100% 添加演示文本，点击属性区外侧编辑器会刷新显示效果。
20. 按喜好重新定位 t0。
21. 点击顶部工具栏 Compile（编译）。

一切顺利的话，编译好的 TFT 文件位于 %AppData%\Nextion Editor\bianyi 目录。

更新显示屏固件

将设计烧录到显示屏有两种方式。若有 USB-TTL 转换器，可在 Nextion IDE 内直接连接屏幕上传 TFT 文件。否则需将 TFT 文件复制到 microSD 卡（必须 FAT32 格式，且仅含单个 TFT 文件），插入屏幕背面卡槽。Nextion 编译输出目录（Windows）为：

C:\Users\[用户名]\AppData\Roaming\Nextion IDE\bianyi\[项目名].tft

注意： AppData 文件夹默认隐藏，可能需启用“显示隐藏文件”。

将 TFT 文件放入 SD 卡后按步骤操作：

• 确保显示屏断电
• 插入 SD 卡
• 上电，屏幕显示正在更新
• 更新完成后断电
• 取出 SD 卡（关键步骤，留着卡屏幕不会运行你的视图）
• 再次上电，应看到 Fridgeye 应用界面，只缺光线传感器数值

教 Arduino 说“Nextion 语”

显示屏已有应用视图，现在编写 Arduino 代码与其交互、设置光线状态百分比。

安装 Nextion 库

1. 下载最新版 Nextion Arduino 库。
2. 将整个 ITEADLIB_Arduino_Nextion 文件夹复制到 Arduino 库目录。Windows 通常在 C:\Users\[用户名]\Documents\Arduino\libraries，Mac 在 ~/Documents/Arduino/libraries。
3. 若用 Arduino Mega 跳到第 7 步。
4. 若用 Arduino UNO，打开库文件夹下的 NexConfig.h。
5. 注释掉以下两行：

   #define DEBUG_SERIAL_ENABLE
   #define dbSerial Serial

6. 将 nexSerial 的 #define 改为 Serial（原为 Serial2），以便直接用 UNO 的 RX/TX 引脚连接屏幕。

   #define nexSerial Serial

7. 重启 Arduino IDE（如已打开），库即可从菜单调用。
8. 文件菜单选 新建 创建草图。
9. 替换默认代码为下方完整代码：

#include "Nextion.h"
long lastUpdate;
int SENSOR = A0;
NexText t0 = NexText(0, 2, "t0");

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

代码详解

如果你读得懂这段代码，可直接跳过。初学者别怕，我们逐行拆解。

#include "Nextion.h"

引入 Nextion 库，Arduino IDE 会自动从库文件夹找到它。

long lastUpdate;

变量 lastUpdate 用于控制屏幕刷新频率。

int SENSOR = A0;

给 A0 引脚起个可读名称，虽本草图只用这一个 I/O，但这是个好习惯，复杂项目时很有用。

NexText t0 = NexText(0, 2, "t0");

创建对象关联 GUI 中的文本元素。参数依次为：页码（0）、组件 ID（2，即之前记下的 t0 的 id）、名称字符串 "t0"。

void checkSensor() {
  int val = map(analogRead(SENSOR), 0, 1024, 0, 100);
  String displayText = String(val) + "%";
  t0.setText(displayText.c_str());
}

checkSensor() 是核心逻辑。第一行做两件事：analogRead(SENSOR) 读取 A0 电压值（0-1024），用内置 map() 映射到 0-100。转为字符串加上 "%"，最后调用 t0.setText() 更新屏幕显示。

void setup(void) {
  lastUpdate = millis();
  pinMode(SENSOR, INPUT);
  nexInit();
}

标准 setup()：初始化 lastUpdate、设置 A0 为输入、初始化 Nextion 库。

void loop(void) {
  nexLoop(NULL);
  if (millis() - lastUpdate > 100) {
    checkSensor();
    lastUpdate = millis();
  }
}

loop() 持续运行。必须不断调用 nexLoop() 服务 Nextion 库，NULL 表示不监听触摸事件。每 100 毫秒读取一次传感器并更新显示。不到 30 行代码即可实现 Arduino 与 Nextion 交互。

连接显示屏

上传代码前，先把草图推送到 Arduino（点右上角箭头或 Ctrl+U）。上传期间屏幕不能连接，因为 UNO 的串口线被 IDE 占用。Mega 则无此限制。

代码上传成功后，断开 Arduino 电源，按 Fritzing 图连接显示屏。再次上电，Fridgeye 应用应正常显示当前光线传感器读数。

总结

完成了！你可能会愤愤地说：“这有什么用？整套装进冰箱我根本看不见屏幕。”观察很敏锐，但我从未说这有实际用途，只是构建和学习的乐趣。

若想更进一步，挑战把传感器放冰箱里，显示屏放外面。实现方式很多：Wi-Fi、蓝牙、Zigbee、普通无线模块等。尝试后欢迎在 Twitter @KevinSidwar 或邮件（Kevin at sidwar dot com）分享你的物联网探险。下次见，祝黑客愉快！

如果喜欢这篇文章，想深入学习物联网入门，可能对我的 Fridgeye 概念课程感兴趣。如果不感兴趣，真心感谢你读到这里。祝你有美好的一天，你值得拥有。