使用 Nextion Display 构建 Fridgeye 应用程序

对 Arduino 进行编程后，从 工具 打开串行监视器 菜单。确保将波特率设置为 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 也以同样的方式从屏幕获取信息，如触摸事件。这意味着 Arduino 不是在运行时绘制东西，而是仅充当视图和控件的导体。如果这没有意义，请在我们逐步完成时再坚持一会儿。

准备视图

因为我们的 Fridgeye 应用程序非常简单，所以它只需要一个页面。然而，Nextion 显示器能够处理具有多个页面和转换的非常复杂的应用程序。无论您是设计像我们这样的简单应用程序还是非常复杂的应用程序，您都将使用 Nextion GUI 编辑器。它是 Nextion 系列显示器的 WYSIWYG 编辑器，将帮助我们使布局恰到好处。同样，文档和入门体验对于初学者来说可能非常具有挑战性，但一旦掌握了窍门，您将可以快速设计复杂的布局。

在我们破解打开编辑器之前，我们需要准备一个后台资产。参考上面的模拟图像，我们可以看到运行时显示器上唯一会发生变化的是检测到的光的百分比。底部的徽标、背景颜色和绿色条是静态的。让我们用那些可以用作背景的项目制作图像。这在 GIMP 中花了我 5 分钟，看起来像这样。

这里要记住的重要一点是使图像恰好符合您的屏幕所需的大小。就我而言，我使用的是 3.5" 屏幕，可转换为 480 x 320 像素。这正是我在 GIMP 中制作图像的大小。

使用 Nextion 编辑器

注意： Nextion Editor 需要 .NET Framework，目前仅在 Windows 上受支持。我能够通过 Macbook 上的 Parallels 在 Windows 10 虚拟机中毫无问题地运行它。我没有在 Linux 上的 Wine 中测试它。

以下步骤将引导您在 Nextion 编辑器中创建我们简单的应用程序布局。打开 Nextion Editor 后，执行以下步骤。

1. 文件->新建 .在您的机器上为您的项目命名和位置。

2. 将弹出一个对话框，要求您选择设备。就我而言，我选择了增强型和 3.5" 型号。不要单击确定 .继续第 3 步。

3. 点击显示 对话框左上角的选项卡。选择 90 水平显示方向。

4. 现在您可以点击确定。

5. 点击图片 从左侧的工具箱。这将添加一个元素 p0 到你的大纲。

6. 在图片/字体 左下角的窗格确保您有图片 选项卡被选中。

7. 点击 + 象征。

8. 导航到我们在 GIMP 中创建的图像，该图像为我们的应用程序提供背景，然后单击打开 .

9. 在右侧的属性窗格中双击 pic 属性值区域。将打开带有我们应用程序背景的图片选择对话框。

10. 选择应用背景并点击确定 .

11. 点击文本 从工具箱。这将添加一个名为 t0 的文本区域 在我们显示器的左上角。注意 id 的值 属性，因为您稍后在对 Arduino 进行编程时将需要它。

12. 将文本区域拖到“Light Status”字样下方的所需位置并调整其大小以填充大区域。

13. 要修复白色背景，我们需要将文本区域背景设置为主背景的裁剪版本。随着 t0 选择更改 sta 属性窗格中的属性从纯色到裁剪图像 .

14. 双击 picc 文本区域 t0 的属性值 .这将打开图片选择对话框。再次选择主背景图片，然后点击确定 .这具有使文本区域背景透明的效果。

15. 更改 pco t0 的属性 成为您想要的任何字体颜色。我选择了自定义颜色：红色：125、绿色：231、蓝色：191。

16. 从工具 菜单选择字体生成器。

17. 在 Font Creator 对话框中选择高度为 96 并选择您想要使用的任何字体。我的是蒙特塞拉特。

18. 为字体命名并点击生成字体 .请务必将其保存在易于记忆的位置。我们稍后会再次需要它。

19. 关闭字体创建器对话框。系统会询问您是否要添加生成的字体。点击是 .该字体现在被引用为字体索引 0。

20. 向 t0 添加一些虚拟文本 通过更改 t0 的 txt 属性来查看它的外观 到 100%。您必须在属性值区域外单击才能更新编辑器区域。

21. 重新定位 t0 随心所欲。

22. 点击编译 在顶部工具栏中。

如果一切顺利，您现在将在 %AppData%\Nextion Editor\bianyi 中有一个可供使用的编译后的 TFT 文件 .

更新显示

有几种方法可以将我们精美的新设计融入显示器本身。如果您有 USB 转 TTL 转换器，您可以从 Nextion IDE 内直接连接到您的屏幕，并直接上传编译后的 TFT 文件。否则，您需要将编译后的 TFT 文件复制到 micro SD 卡，该卡可以直接插入屏幕背面的插槽中。 SD 卡必须是 FAT32 格式，并且上面必须有一个 TFT 文件，否则你会遇到错误。 Nextion Editor 将成功编译的文件放在 Windows 上的以下目录中。

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

注意，您可能必须启用查看隐藏文件，因为 AppData 文件夹被标记为隐藏。

使用 SD 卡上的 TFT 文件执行以下步骤。

• 确保显示器已关闭

• 将 SD 卡插入显示器

• 打开显示器电源。屏幕将显示它正在更新。

• 更新完成后关闭显示器

• 取出 SD 卡。不要忘记这一步，因为屏幕不会在 SD 卡仍然插入的情况下运行您的视图。

• 再次打开显示器电源。您现在应该会看到我们漂亮的 Fridgeye 应用程序。唯一缺少的是光传感器的值。

教 Arduino 如何说 Nextion

现在显示器上有我们的应用程序视图，我们需要在 Arduino 上编写一些代码，以便它可以与其交互并设置灯状态百分比。

安装 Nextion 库

1. 下载最新版本的 Nextion Arduino 库。

2. 复制整个 ITEADLIB_Arduino_Nextion 文件夹到您的 Arduino 库文件夹。在 Windows 上，它将位于：

C:\Users\[your_username]\Documents\Arduino\libraries 

在 Mac 上，它将位于：

~/Documents/Arduino/libraries 

3. 如果您使用的是 Arduino Mega，请跳至第 7 步。

4. 如果使用 Arduino Uno，请打开 NexConfig.h 文件位于 ITEADLIB_Arduino_Nextion 您刚刚复制到 Arduino 库文件夹中的文件夹。

5. 注释掉以下几行：

#define DEBUG_SERIAL_ENABLE #define dbSerial Serial  

6. 更改 #define 对于 nexSerial 是 Serial 而不是 Serial2。这允许我们将显示器直接连接到 UNO 上的 RX 和 TX 线。

#define nexSerial 序列号 

7. 如果 Arduino IDE 已经打开，请重新启动它。这将使库可通过菜单使用。

8. 从文件 菜单选择新建 以创建新草图。

9. 将默认的草图代码替换为以下内容：

#include "Nextion.h" long lastUpdate; int 传感器 =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（传感器，输入）；下一个初始化（）； } void loop(void) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =毫秒（）； } }  

代码演练

如果您的 Arduino foo 允许您理解该草图，那么您可以完全跳过本节。你真棒。如果您不熟悉 Arduino 代码，请不要让这吓到您。让我们一块一块地看一下这张草图。

#include "Nextion.h"  

这表明我们打算使用 Nextion 库。我们不需要做任何其他事情，因为 Arduino IDE 知道在哪里可以找到它，因为我们将它放在库文件夹中。

long lastUpdate; 

这只是一个名为 lastUpdate 的变量 这将使我们能够控制稍后在草图中更新屏幕的频率。

int SENSOR =A0;  

在这里，我们只是为 Arduino 上的 A0 引脚提供了一个更具代码可读性的名称，我们可以稍后使用它来引用它。这在这个草图中并不重要，因为它是我们处理的唯一 I/O 引脚，但这是一个好习惯，因为当你有很多东西连接到你的 Arduino 时它会派上用场。

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

在这里，我们在草图中创建一个对象，该对象引用我们在 GUI 中创建的文本元素。请记住，我们将其命名为“t0 "。第一个参数是页码，在我们的例子中是 0，第二个参数是我们之前回忆的组件 ID 是 2。如果你忘记写下来，请返回 Nextion 编辑器，单击 t0 元素并查看属性窗格以查看 ID。

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（传感器，输入）；下一个初始化（）； }  

void loop(void) { nexLoop(NULL); if (millis() - lastUpdate> 100) { checkSensor(); lastUpdate =毫秒（）； } }