企业官网建设流程全解析

1. 项目缘起：从一块工业屏到“Hello World”的探索

最近在折腾一个工业边缘计算的项目，客户现场有几台老旧的PLC控制器，数据孤岛严重，上层MES系统想拉取产线实时状态，但缺乏一个轻量、可靠且带本地交互的中间件。传统的方案要么是上一台工控机，成本高、体积大；要么用无屏的网关，调试和维护又不够直观。就在这个当口，我注意到了Seeed Studio推出的reTerminal DM。这玩意儿挺有意思，它本质上是一台基于树莓派CM4计算模块的工业级边缘计算机，但最吸引我的是它那块5英寸的电容触摸屏——这直接就是一个现成的、带图形交互能力的“边缘面板”（Edge Panel）。

硬件到手，屏幕点亮，系统跑起来，第一个念头就是：怎么才能让这块屏为我所用？官方提供了基于Ignition的Edge Panel Builder工具，号称能快速构建可视化应用。但翻遍文档，第一个实操例子往往就是经典的“Hello World”。可别小看这个“Hello World”，在工业物联网的语境下，它远不止在屏幕上打印一行字那么简单。它涉及到开发环境的搭建、Ignition Edge的组件理解、画面与逻辑的绑定，以及最终在reTerminal DM这个特定硬件上的部署与运行。这个过程，恰恰是打通从云端设计到边缘设备显示的关键一步。今天，我就结合自己从零开始的踩坑经历，把这个完整的流程拆解清楚，目标是让你也能在自己的reTerminal DM上，跑通第一个属于你自己的边缘面板应用。

2. 核心装备解析：reTerminal DM与Ignition Edge Panel Builder

在动手写代码之前，我们必须先搞清楚手头的“武器”到底是什么，以及它们各自扮演什么角色。这就像组装一台精密仪器，不了解每个零件的功能和接口，肯定是装不起来的。

2.1 reTerminal DM：不只是个带屏的树莓派

reTerminal DM是一台为工业边缘场景设计的设备。我们得跳出“树莓派加个壳”的简单认知。

硬件构成的工业考量：

• 计算核心：采用树莓派Compute Module 4（CM4）。这意味着它拥有树莓派4B同级的算力（可选多种RAM和eMMC版本），但以模块化形式存在，抗震性和长期供货稳定性更好。我手头的是4GB RAM + 32GB eMMC的版本，对于运行一个轻量级Ignition Edge和面板应用绰绰有余。
• 交互界面：5英寸IPS电容触摸屏，分辨率720x1280。这块屏的亮度和可视角度都针对工业环境优化过，不像消费级平板那样在强光下就“瞎了”。触摸驱动集成良好，在后续的界面测试中非常跟手。
• 工业接口：这是体现其“工业级”的关键。它提供了一个真正的RS-485接口（带隔离保护），可以直接连接Modbus RTU设备；还有一个RS-232接口用于调试或连接老式串口设备。此外，千兆以太网、Wi-Fi 5、蓝牙5.0这些连接能力一应俱全。GPIO引脚也被引出，可以连接数字量I/O模块。
• 电源与耐久性：支持9-36V宽压直流输入，典型工业24V供电直接接入，无需额外转换。金属外壳和良好的散热设计，使其能适应0-50°C的工业现场温度。

软件栈的预先配置：官方为reTerminal DM提供了预装系统的eMMC镜像。这个镜像基于Raspberry Pi OS（32位），但最关键的是，它已经包含了Ignition Edge的运行时。你不需要自己去从头安装配置Ignition Edge，这省去了大量繁琐且容易出错的环境配置工作。系统启动后，Ignition Edge会作为一个服务自动运行。

2.2 Ignition Edge与Edge Panel Builder：云端设计，边缘运行

Ignition是工业界知名的SCADA和IIoT平台，而其“Edge”版本是专为边缘设备设计的轻量级运行时。Edge Panel Builder则是与之配套的、用于设计人机界面（HMI）面板的Web设计器。它们的协作模式非常清晰：

1. 设计在云端（或本地PC）：你在任何有浏览器的电脑上，通过访问Edge Panel Builder（一个Web应用）进行可视化拖拽式开发。你创建画面、绑定数据、设置动画，所有这些设计工作都在你的开发机上完成。
2. 运行在边缘：设计好的面板应用，被“发布”到目标边缘设备（这里是reTerminal DM）上运行的Ignition Edge运行时中。Edge运行时负责执行面板的逻辑、通过驱动（如Modbus、OPC UA）与现场设备通信，并将画面渲染输出到设备的显示屏上。

为什么选择这个组合？对于reTerminal DM这样的设备，你当然可以自己用Python（如Tkinter, Kivy）或Web技术（Chromium Kiosk模式）来开发界面。但Ignition Edge Panel Builder提供了几个无法拒绝的优势：

• 工业协议原生支持：内置了Modbus、OPC UA、MQTT等大量工业协议驱动，无需自己从头实现协议栈，配置一下就能连接设备。
• 强大的数据绑定与脚本引擎：画面元素（如指示灯、数值显示）可以轻松地绑定到设备的数据点（Tag）。支持Python和类似JavaScript的表达式脚本，实现复杂的业务逻辑。
• 集中管理与部署：如果有多台reTerminal DM，可以通过Ignition的网关网络进行集中管理、批量部署和更新应用，运维效率极高。
• 降低开发门槛：图形化设计器让熟悉PLC梯形图或组态软件的电工、工程师也能快速上手构建界面，无需深厚的软件开发背景。

我们的“Hello World”目标，就是在这套架构上，完成从Edge Panel Builder设计一个简单画面，到发布至reTerminal DM并全屏显示的全过程。

3. 开发环境准备与首次连接

拿到设备后，别急着打开设计器。确保基础环境通畅，能避免后续90%的“玄学”问题。

3.1 reTerminal DM的初始设置

1. 上电与启动：连接好24V电源（或Type-C电源，仅用于调试），开机。首次启动可能会稍慢，系统需要完成初始化。你会看到Raspberry Pi OS的启动日志，最终进入一个命令行登录界面（默认不启动图形桌面，以节省资源给Ignition Edge）。
2. 网络配置：
   • 有线网络：插上网线，设备会自动通过DHCP获取IP地址。你需要知道它的IP。可以通过连接一个显示器，在命令行下用hostname -I命令查看。
   • 更推荐的方法：使用串口终端：这是工业设备调试的标配。用一根USB转RS-232串口线，连接电脑和reTerminal DM的RS-232口。串口参数设置为115200波特率，8数据位，1停止位，无校验（8N1），无流控。使用Putty、MobaXterm或任何你喜欢的串口工具连接。上电后，你就能在终端里看到完整的启动信息，并以默认用户pi和密码raspberry登录。在这里执行hostname -I获取IP最可靠。
3. 验证Ignition Edge服务：登录后，执行命令systemctl status ignition-edge。如果看到active (running)的字样，说明Edge运行时已在后台正常启动。它的默认Web管理端口是8088。

3.2 访问Edge Panel Builder设计器

Ignition Edge的设计器并不安装在设备本身，而是需要通过浏览器访问Edge运行时来打开。

1. 在你的开发电脑上，打开浏览器（Chrome或Edge最佳）。
2. 在地址栏输入：http://<reTerminal_DM的IP地址>:8088/。例如http://192.168.1.100:8088/。
3. 首次访问，你会看到Ignition Edge的登录页面。默认的用户名是admin，密码是password。请务必在首次登录后修改密码。
4. 登录成功后，你就进入了Ignition Edge的管理控制台。在这里你可以配置驱动、查看标签、管理用户等。要打开设计器，你需要点击左侧导航栏的“设计器”或“Designer”标签页。系统可能会加载一些资源，稍等片刻，基于Web的Edge Panel Builder设计器界面就会呈现在你面前。

注意：如果你的浏览器无法访问8088端口，请检查：

• reTerminal DM和你的电脑是否在同一局域网段。
• 电脑的防火墙是否阻止了对该端口的访问。
• 在reTerminal DM上，可以用sudo ufw status查看防火墙状态，如果启用且未放行8088，需执行sudo ufw allow 8088/tcp。

4. 创建第一个Edge Panel：“Hello World”实战

设计器加载完成后，我们正式开始构建应用。这个过程和大多数组态软件类似，但更轻量、更聚焦于面板本身。

4.1 新建项目与画面

1. 创建新项目：在设计器主页，点击“新建项目”。给项目起个名字，比如MyFirstEdgePanel。项目是面板应用的容器，可以包含多个画面（Windows）。
2. 创建主画面：项目创建后，会自动进入一个空白的画布。这就是你的主画面。在右侧的“属性”面板中，找到“窗口标题”，可以将其改为Hello World Demo。同时，建议将“宽度”和“高度”设置为与reTerminal DM屏幕分辨率匹配的720 x 1280（注意是竖屏，宽720，高1280）。这样能确保画面完美适配，不留黑边。
3. 认识组件面板：设计器左侧是组件面板，里面分门别类地存放着各种控件：基本形状、按钮、指示灯、图表、输入框等。我们的“Hello World”将主要使用“标签”组件。

4.2 设计静态“Hello World”画面

1. 添加文本标签：从组件面板的“基本”类别中，拖拽一个“标签”组件到画布中央。
2. 设置文本属性：选中这个标签，在右侧属性面板中：
   • 文本：输入Hello, reTerminal DM!
   • 字体：可以调大，比如选择Arial， 大小设为48，加粗。
   • 对齐：水平居中和垂直居中都选择“居中”。
   • 颜色：可以设置一个醒目的前景色。
3. 添加背景与装饰：为了让画面更美观，可以从“基本”类别拖一个“矩形”组件，将其置于底层（右键->排列->移至底层）。设置其填充颜色，并将大小调整为与画布一致（720x1280），作为背景。你还可以添加一些图标或公司Logo。

至此，一个静态的“Hello World”画面就完成了。但这只是第一步，它还没有任何交互或动态数据。

4.3 实现动态交互：按钮与脚本

工业面板的核心是交互。我们来添加一个按钮，点击后改变标签的文字，并记录点击次数。

1. 添加按钮：从“基本”类别拖一个“按钮”组件到画布上，放在标签下方。
2. 创建内存标签（Tag）：为了存储点击次数这个数据，我们需要一个地方来存放它。在Ignition中，这通过“标签”实现。点击设计器顶部菜单栏的“标签浏览器”图标（通常是个小标签页），打开标签浏览器。
   • 在标签浏览器中，右键点击“标签提供者”，选择“新建 -> 内存标签”。
   • 在弹出的窗口中，定义标签：
     • 名称：clickCount
     • 数据类型：整数（Integer）
     • 初始值：0
   • 点击确定。现在我们就有了一个可以读写的数据点。
3. 为按钮编写点击脚本：
   • 选中画布上的按钮，在右侧属性面板中找到“事件”选项卡。这里列出了按钮可以响应的所有事件，如“动作开始”（按下）、“动作结束”（释放）、“点击”等。
   • 我们双击“点击”事件右侧的空白处，会打开一个脚本编辑器。
   • 在脚本编辑器中，输入以下Python代码：

     # 获取当前点击次数的值 current_count = system.tag.read("[.]clickCount").value # 将次数加1 new_count = current_count + 1 # 写回标签 system.tag.write("[.]clickCount", new_count) # 更新画面上的标签文本 event.source.parent.getComponent('Label_0').text = f'Hello! Clicks: {new_count}'

   • 这段代码做了两件事：
     1. 读取内存标签clickCount的当前值。
     2. 将其加1后写回，并更新画面中那个标签组件（Label_0是它的默认ID，你可以在属性面板的“名称”栏看到并修改它）的文本，显示新的点击次数。
4. 绑定标签文本到数据（另一种更优雅的方式）：除了用脚本硬编码更新，我们还可以使用数据绑定。选中画面上的标签组件，在属性面板中找到“文本”属性。不要直接输入文字，点击其右侧的“绑定”图标（一个小闪电）。
   • 在表达式绑定窗口中，输入："Hello! Clicks: " + str({[.]clickCount})
   • 这样，标签的文本会自动与clickCount标签的值关联。此时，你可以将按钮点击脚本简化为只增加计数即可：

     current_count = system.tag.read("[.]clickCount").value system.tag.write("[.]clickCount", current_count + 1)

   • 画面上的文字会自动更新。数据绑定是Ignition的核心优势之一，它让界面与数据的同步变得声明式且高效。

4.4 模拟测试与调试

在设计器顶部，有一个绿色的“启动窗口”按钮。点击它，可以在浏览器内直接模拟运行当前画面。你可以点击按钮，观察标签文字和点击次数的变化。这个模拟环境对于快速调试界面逻辑和简单脚本非常有用。

5. 发布与部署：让应用在reTerminal DM上跑起来

设计并测试完成后，下一步就是将应用真正部署到reTerminal DM的屏幕上全屏运行。

5.1 配置Ignition Edge的“面板”模块

1. 回到浏览器中Ignition Edge的管理控制台（http://<设备IP>:8088），而不是设计器。
2. 在左侧导航栏，找到并点击“配置” -> “面板”。这是管理所有边缘面板应用的地方。
3. 在“面板”配置页面，你会看到一个列表（初始为空）。点击“添加面板”按钮。
4. 配置新面板：
   • 名称：HelloWorldPanel（可自定义）。
   • 项目：从下拉列表中选择你刚才在设计器中创建的项目MyFirstEdgePanel。
   • 主窗口：从下拉列表中选择你项目中的主画面，通常是Hello World Demo。
   • 显示设置：这是关键！
     • 显示设备：选择Default或具体的显示设备（如果系统识别出多个）。对于reTerminal DM，通常就是Default。
     • 全屏：务必勾选。这样应用才能独占整个屏幕，隐藏操作系统光标和状态栏。
     • 光标隐藏：建议勾选，让界面更纯净。
     • 开机自启动：强烈建议勾选。这样设备重启后，面板应用会自动启动，符合工业无人值守的要求。
     • Kiosk模式：勾选。这能防止用户意外退出应用。
5. 点击“保存”。此时，Ignition Edge服务会加载这个面板配置。

5.2 在reTerminal DM上验证与全屏运行

保存面板配置后，理论上应用就应该已经在reTerminal DM的屏幕上启动了。但你可能正通过串口终端操作，看不到屏幕。有几种验证和查看方式：

1. 直接观察屏幕：如果reTerminal DM连接了屏幕（它自带），你应该立刻能看到“Hello World”应用已经全屏显示。点击按钮，功能应正常工作。
2. 通过VNC远程查看（推荐用于调试）：在reTerminal DM上启用VNC服务器，可以方便地在开发电脑上远程查看屏幕。
   • 在串口终端中，执行sudo raspi-config。
   • 选择Interface Options->VNC->Yes启用。
   • 设置一个VNC密码。
   • 在开发电脑上使用VNC Viewer（如RealVNC）连接reTerminal DM的IP:5900，输入密码，即可看到实时桌面。你应该能看到全屏运行的面板应用。
3. 检查服务状态：在串口终端中，可以再次执行systemctl status ignition-edge，确认服务运行正常。也可以查看面板服务的专用日志，命令类似journalctl -u ignition-edge -f，可以实时观察运行日志。

踩坑记录：我第一次部署时，屏幕一直黑屏。排查后发现，是在设计器里画面尺寸设置成了1920x1080（我的显示器分辨率），而reTerminal DM是720x1280竖屏。Ignition Edge在启动不匹配分辨率的全屏应用时，有时会导致显示异常。务必在设计阶段就将画面尺寸设置为目标设备的分辨率。

5.3 处理常见部署问题

• 应用未启动：在“配置->面板”中，检查面板状态是否为“运行中”。可以尝试点击“重启”按钮。查看Ignition Edge日志寻找错误信息。
• 触摸失灵：如果画面能显示但触摸无反应，首先在本地用鼠标模拟测试是否正常。如果正常，可能是reTerminal DM的触摸屏驱动或校准问题。可以尝试在终端执行sudo apt update && sudo apt upgrade更新系统，或查阅Seeed Studio的Wiki关于触摸屏校准的说明。
• 画面布局错乱：100%是画面尺寸与设备屏幕分辨率不匹配导致的。回到设计器，严格将主画面尺寸修改为720x1280，并检查所有组件的位置和锚点设置。

6. 超越“Hello World”：从演示到实用化的思考

成功运行“Hello World”只是起点。它验证了从开发到部署的完整链路是通的。接下来，我们要思考如何让它变成一个真正的工业边缘面板。

6.1 连接真实设备数据

“Hello World”里的数据是内存中虚拟的。真正的价值在于连接现场设备。假设我们要连接一个支持Modbus RTU的温度传感器。

1. 在Ignition Edge中配置Modbus驱动：
   • 在管理控制台，进入“配置” -> “OPC UA设备/驱动”。
   • 点击“添加驱动”，选择“Modbus TCP / RTU / ASCII”。
   • 根据你的传感器手册，配置串口参数（如/dev/ttyAMA0， 波特率9600， 8N1——注意：reTerminal DM的RS-485设备节点通常是/dev/ttySC0或/dev/ttyAMA1，具体需查官方文档），从站地址等。
2. 创建设备标签：在驱动下，定义对应的寄存器地址，创建标签，例如Temperature。
3. 在面板中绑定真实数据：回到设计器，在标签浏览器中，你现在可以看到来自Modbus驱动的Temperature标签。你可以像之前绑定clickCount一样，将一个数值显示框或仪表盘的“值”属性绑定到{[Modbus设备]Temperature}。画面就能实时显示传感器温度了。

6.2 构建实用的界面组件

• 导航与多画面：一个应用通常有多个画面（如首页、监控页、报警页、设置页）。可以在主画面放置导航按钮，通过脚本system.nav.openWindow('另一个画面名称')来切换。
• 数据可视化：利用图表组件（趋势图、柱状图）绑定历史数据或实时数据，直观展示生产趋势。
• 报警管理：在Ignition Edge中配置报警触发器，当标签值超限时产生报警。在面板上添加报警表格组件，实时显示和确认报警。
• 本地存储与逻辑：对于需要断电保存的数据（如设备参数），可以使用Ignition的“数据库”功能连接本地SQLite数据库。更复杂的业务逻辑，可以在画面的“脚本”模块中编写全局Python函数来调用。

6.3 性能优化与稳定性考量

• 资源监控：reTerminal DM的CM4性能不错，但也要关注资源使用。避免在画面中使用过多高频率更新的动画或过于复杂的图表。可以通过SSH登录，使用htop命令监控CPU和内存。
• 看门狗与自恢复：为了应对极端情况，可以编写一个简单的Shell脚本作为“看门狗”，定期检查Ignition Edge服务状态，如果崩溃则自动重启。甚至可以利用systemd的服务重启机制。
• 安全加固：修改默认SSH密码和Ignition Edge管理员密码。关闭不必要的服务。如果面板应用不需要外部网络访问，可以在防火墙中只开放必要的端口（如8088用于管理，如果远程VNC也关了）。

从在屏幕上显示一行“Hello World”，到构建一个稳定、可靠、连接真实数据的工业边缘交互终端，reTerminal DM与Ignition Edge Panel Builder这个组合提供了一条清晰且高效的路径。它降低了工业边缘HMI的开发门槛，将开发者的精力从底层驱动和图形渲染中解放出来，更聚焦于业务逻辑和用户体验本身。这个“Hello World”项目，就是你踏入工业边缘可视化应用开发大门的第一块坚实基石。