前言

为了推广SmartDisplay产品并确保其易用性、亲和性和价格实惠，我们一直强调演示项目的重要性。 在这一特定的范例中，我们很高兴介绍另一个演示程序代码，主要为开发人员提供一个经济实惠、简单明了且全面的架构。 我们的目标是提供一个稳定可靠、可持续发展的通用解决方案，以满足各种需求的替代主机端。

说明

Custom CAN ID协议在工业自动化设备控制领域获得了显著的流行。 在这种背景下，Arduino板成为系统整合和作为Smart Display的主机端控制器的宝贵工具，特别是那些没有触控功能的Smart Display。 利用Custom CAN ID协议的潜力，Arduino板可以有效控制无触控的智能显示屏。 本文探讨了一个示范程序，展示如何使用Arduino UNO和CAN shield利用Custom CAN ID协议来控制配备OLED旋钮显示屏的智能显示屏。 透过这个程序，可以探索无触控智能显示屏的各种任务和功能。 希望透过OLED旋钮的触控显示屏来控制无触控的智能型屏幕显示屏，并希望扩展其在系统整合和应用方面的知识，使开发人员从本文中获得参考范例而获益匪浅。

下图展示了应用程序的开发情况。

此应用开发示范范例需要以下物料:

1. 10.1寸Smart Display CAN bus Custom CAN ID通讯协议机型
2. ARDUINO UNO
3. ARDUINO UNO的CAN接口扩充板
4. OLED显示旋钮模块
5. ST-Link CAN bus dongle
6. 软件GUI-Builder v0.4.2或更高版本
7. 软件Arduino IDE v2.0.4

演示分为三个部分:

1. 在GUI Builder中设计演示项目。
2. 建置并上传项目。
3. 编程Arduino主机端。

用GUI Builder建构项目之用户图控接口

首先，启动最新版本的GUI建立工具，开始一个新项目。输入所需的项目名称，并确认项目文件夹被自动选择。接下来，选择设备类型，这边选择10.1寸显示屏。继续选择所需的通讯协议，并将显示方向保留为默认的横向模式。选择空白的UI模板，最后点击创建按钮完成该过程。请参考以下图片如上述步骤。

在建立项目后，如下画面。

为了符合提供的演示情境，需要总共四个页面。因此，需要添加三个额外的页面。为了完成这个步骤，请找到「Page」按钮并点击它。接着，点击「+」按钮以添加三个额外的页面。

现在，让我们来探索如何添加个性化的背景。如下图标示1前往资源区域，找到背景选项。在标示2中，你会找到三个预定义的背景，专门设计用于工业、医疗和车辆页面。若要添加其他背景，请在标示3选项中点击「Add Widget」按钮。接下来，在标示4选项中点击「…」按钮。你可以引入自定义背景，替换第一个页面将使用的默认背景。

在这一步骤，我们可以从Page选项中，选择每个页面的背景样式，如下图所示。

现在，让我们来探索如何添加自定义对象。根据演示情境，我们需要选择自定义的MultiState对象，它可以让我们选择工业、医疗和车辆页面。首先，点击标示1前往资源区域，找到MultiState选项。在标示2点击「Add Widget」按钮，然后在标示3点击「Modify」按钮。在标示4中，删除与该对象关联的所有默认图像。接下来，在标示5中，点击「Add image」按钮，然后在标示6中从你计算机本地活页夹中逐个选择自定义的对象图像。最后，在标示7点击「OK」按钮，将自定义对象添加到MultiState对象列表中，如下图所示。

点击标示1的控制页面。根据演示情境，选择自定义的MultiState对象，以选择工业、医疗和车辆页面。将该对象拖放到指定的页面布局区域中。这样一来，你已成功创建了初始网页。

现在，将相同的过程应用于你已创建的其余三个页面。在第二个页面上，从可用的选项中选择一个与工业相关的对象。在第三个页面上，选择一个与医疗相关的对象。最后，在第四个页面上，选择一个与车辆相关的对象。将每个相应的对象拖放到它们对应的页面布局中。

将建构好的图控接口下载到智能型显示屏

成功创建了四个不同的页面并将相应的对象放置在每个页面上后，请确保在起始页面上包含自定义的MultiState对象，以便选择工业、医疗和车辆页面。现在，让我们继续建立项目。前往页面信息部分，找到「Device」按钮。点击它，然后选择「Device Property」。确认协议设置正确，然后选择适当的COM端口，并指定所需的波特率。通过点击「Connect to Device」按钮与设备建立连接。最后，点击上传按钮开始项目上传过程，如提供的图片所示。请给予足够的时间让项目上传完成，耐心等待过程完成。

当项目上传完成后，点击如下所示的「OK」按钮：

当上传完成后，启动屏幕将会出现，如下图所示：

在启动屏幕之后，它将切换到第一个页面。现在，通过GUI建立器完成了构建和上传，如下图所示：

控制主机端(Arduino)程序范例

如所示的程序片段始于一个「includes」部分，其中导入了程序所需的各种函式库和头文件案文件。这些包括Adafruit_SSD1327、Adafruit_FT6206、Adafruit_GFX和SPI等函式库。此外，还导入了自定义的头文件案文件，如mcp2515_can.h、lcdgfx_gui.h和lcdgfx.h。

在「includes」部分之后，有一个「defines」部分，用于定义特定的常数和引脚配置。该部分包括对旋转编码器、OLED显示屏尺寸、CANBus设置、对象设置等的定义。

最后，有一个条件语句，检查所使用的微控制器类型，并选择适当的串行接口。如果程序在SAMD微控制器上运行，则定义SerialUSB接口。否则，使用标准的Serial接口。

总结来说，这个给出的程序片段设置了必要的导入，定义了重要的常数和引脚配置，并根据所使用的微控制器类型处理了串行接口的选择。

接下来，宣告并初始化程序中使用的几个必需变量和引脚。例如：
SPI_CS_PIN：这个常量变量被设置为值9，代表SPI通信的芯片选取引脚。
CAN_INT_PIN：这个常量变量被设置为值2，代表CANBus的中断引脚。
CAN：创建mcp2515_can类的一个实例，并用SPI_CS_PIN的值进行初始化。它用于与CAN Bus进行通信。
ts：创建Adafruit_FT6206类的一个实例，用于触控屏功能。
display：创建DisplaySSD1327_128x128_SPI类的一个实例，并使用SPI通信的引脚配置进行初始化，用于与SSD1327显示屏进行通信。

以下给出的程序部分宣告并初始化了多个由unsigned char数组变量。每个数值的目的如下：

「configMsg」：一个由8个unsigned char数组变量，表示一个配置讯息。
`PageIndex_0` 到 `PageIndex_3`：这些数组分别包含8个unsigned char元素，代表页面索引0到3。
「displayMode」：一个由8个unsigned char数组变量，表示显示模式。

此外，还有几个数组被命名为`stmp`、`stmp1`、`stmp2`等，直到`stmp12`。每个数组也包含8个unsigned char元素，用于存储与各种对象或组件相关的数据字节。这些数组的名称指示了它们的用途，例如存储给定对象的数据。

总之，这些数组包含了对于程序非常重要的特定数据集，包括配置讯息、页面索引、显示模式和与对象相关的数据。

这段程序定义了一个名为「bitmapDemo」的函数，它接受一个整数参数「imageIndex」。该函数负责在OLED旋钮显示屏上绘制一个图像。
具体的图像及其对应的位置和大小在「Image.h」头文件案文件中进行了定义。

这个下面的函数通过反复延迟一段时间并检查旗号 Recv 变量的值，等待在 CAN Bus上的回应。一旦接收到回应，旗号 Recv 就会被重置为 0。

这段程序定义了一个名为 changePageFunction 的函数，负责在一个 CAN Bus通信系统中更改页面值。该函数根据提供的 pageValue 参数向 CAN Bus发送讯息以更改页面值。发送的具体讯息取决于 pageValue 的值，并对应于不同的 PageIndex 数组。

「handleTouchEvents」函数管理触控屏上的触控事件。它检测触控输入，转换坐标，并根据触控的压力和持续时间执行特定的操作。它还利用「changePageFunction」根据触控输入更新当前页面。例如，当检测到长按时，会使用「nowPage」值调用「changePageFunction」以切换到首页面。另一方面，当检测到短按时，会使用「nowPage」值调用「changePageFunction」以切换到所选页面。

以下是显示"setup"函数的程序片段，该函数在Arduino中使用，当程序启动时只执行一次。该函数负责初始化脚位、建立串行通讯、配置显示屏、设置CANBus，以及初始化触控屏控制器。

首先，该函数将几个脚位（pinA、pinB、pinC、EN_Pin）的模式设置为输入脚位，并启用上拉电阻器，或者设置为输出脚位。输出脚位EN_Pin被设置为高电位输出。

接下来，建立与波特率115200的串行通讯，并等待连接建立。

然后，初始化显示屏对象，并配置特定的设置，如字型和颜色。

在显示屏上绘制一个图像，并延迟2秒。

将中断附加到特定脚位（CAN_INT_PIN），并指定MCP2515_ISR函数作为中断发生时执行的程序。此中断由信号的下降沿触发。

以250K的波特率初始化CANBus。如果初始化失败，程序会在延迟后重试。一旦成功，将CANBus模式设置为正常模式，并将成功讯息输出到串行输出。

接下来，配置过滤器屏蔽和过滤器以接受所有数据讯框，包括扩展数据讯框。

初始化触控屏控制器，如果初始化失败，则输出错误讯息，使程序进入无限循环。

最后，当触控屏成功启动时，将成功讯息输出到串行输出。

这个函数很可能是为MCP2515（一个CAN控制器）所设计的中断服务例程（ISR），当中断触发时，它会设置一个旗标并输出一个讯息。

这些函数与旋钮状态管理有关。"setKnobState" 函数更新旋钮的状态并设置一个定时器来检测闲置状态，而 "isKnobIdle" 函数则根据定时器的值检查旋钮是否处于闲置状态。

"redrawScreen()" 函数根据旋钮的当前状态（旋钮状态）更新显示屏。它检查状态的变化，清除显示屏，并根据旋钮的状态绘制相应的图像。

在 "loop()" 函数中的以下部分读取三个脚位的状态，并根据它们的值确定一个新的状态。如果新的状态与旧的状态不同，则执行一些动作，包括更新计数器、"MultiStateValue"、"GaugeValue" 和其他对象变量的值。

在 "loop()" 函数中，前面的程序区块之后，这段程序代码执行的是当旋钮朝特定方向旋转时的情况。它相应地更新各种变量并调用函数，然后更新旧状态变量以供下一次 "loop()" 迭代使用。

这段程序代码展示了 "loop()" 函数的其他剩余部分。在前面的程序区块之后，以下操作发生：
- 将 oldState 变数更新为 newState 的值。
- 如果 nowPage 等于 0 或页面编号为 1，则程序会检查 MultiStateValue 是否与 LastMultiStateValue 不同。如果不同，则 LastMultiStateValue 更新为 MultiStateValue 的值，并将 MultiStateValue 的值存储在 stmp1 数组中。
- 接下来，使用 Multi-State ID 为 0x716，通过 CAN Bus发送包含 MultiStateValue 值的讯息。

如果 nowPage 等于 1 或页面编号为 2，则会对不同对象的多个变量进行类似的检查（包括 CircleProgressValue、HorizontalSliderValue、VerticalSliderValue、TemperatureValue、GaugeValue、FixedWidgetValue 和 IndicatorValue）。如果其中任何一个变量与其对应的上一次值不同，则会更新上一次值并通过适当的 ID 通过 CAN 总线发送包含新值的讯息。

如果 nowPage 等于 2 或页面编号为 3，则会对页面 3 上的对象进行类似的检查，例如 CircleProgressValue、HorizontalSliderValue、GraphValue 和 AnimationValue。如果其中任何一个变量与其对应的上一次值不同，则会更新上一次值并通过适当的 ID 通过 CAN Bus发送包含新值的讯息。

如果 nowPage 等于 3 或页面编号为 4，则会对页面上可用的对象进行类似的检查，例如 HorizontalSliderValue、GaugeValue、FixedWidgetValue、AnimationValue、IndicatorValue 和 ToggleButtonValue。如果其中任何一个变量与其对应的上一次值不同，则会更新上一次值并通过适当的 ID 通过 CAN Bus发送包含新值的讯息。

在 "loop()" 函数中前面的程序代码区块之后，会调用 handleTouchEvents() 函数来处理触控事件。如果旋钮是闲置的（isKnobIdle() 返回 1），则使用 setKnobState() 函数将旋钮状态设置为 KNOB_IDLE。然后调用 redrawScreen() 函数重新绘制屏幕。这样就结束了这个示范项目标程序码。

在使用 Arduino IDE 成功验证并上传该程序后，您会注意到 OLED 旋钮显示屏上的显示会发生变化。它将从显示智能显示图像切换到显示触控或旋转图像。此时，智能显示屏和 OLED 旋钮显示屏都将显示默认的首页。

现在您可以执行示范场景。在首页上，您可以旋转旋钮，并根据下方图像中所示，选择三个可用的行业、医疗和车辆页面之一。

在选择完毕后，可在 OLED 旋钮显示屏上进行短暂的触控操作，即可立即切换到所选的智能显示屏页面。

让我们再次看看如何执行示范场景。从首页开始，通过旋转旋钮选择其他三个页面之一。在这个例子中，用户选择了医疗页面。

在选择了医疗页面之后，只需轻触 OLED 旋钮显示屏，即可在智能显示屏上进入所选的医疗页面。

通过在 OLED 旋钮显示屏上左右旋转旋钮，您可以控制该页面上的所有对象，如附图所示。

如果您在 OLED 旋钮显示屏上进行长按，它会自动返回到首页，也就是第 1 页。此外，如果您在 OLED 旋钮显示屏上既不旋转也不触控 10 秒钟，它会重置显示并返回到首页：

恭喜！Smart Display 10.1" 和 OLED 旋钮显示屏的设计示范已完成。该示范允许您通过在 OLED 旋钮显示屏上进行短按或长按来控制不同的页面并在它们之间切换。此外，您可以与每个页面上的各种对象进行互动。 请参考 GitHub 的此连结 https://bit.ly/3oT0o5M 下载上述程序并获取有关该示范项目的更多详细信息。

以下是实际的硬件设置图。

总结

总结来说，这个程序提供了一个实际演示，展示了如何使用 Arduino 板结合 OLED 旋钮显示屏，利用Custom CAN ID 协议，在显示屏上进行短按或长按操作来管理不同的页面并在它们之间切换。它还可以与每个页面上的各种对象进行互动和控制。这个程序对于各个技能水平的人都很有价值，包括初学者和有经验的开发人员，他们希望了解主机端程序设计及其在控制智能显示屏中的应用，尤其是非触控智能型显示屏。