1. 项目概述从“Hello World”开启工业边缘HMI之旅在工业自动化和物联网领域边缘计算正变得越来越重要。它意味着将数据处理和应用程序从遥远的云端拉回到靠近物理设备的现场以实现更低的延迟、更高的可靠性和更好的数据隐私。而“Hello World”作为任何编程语言或平台的第一个程序其意义远不止于在屏幕上打印一行文字它代表着一次成功的环境搭建、一次正确的配置和一次与系统的首次“握手”。今天我们要聊的就是如何在reTerminal这款基于树莓派CM4的工业级边缘计算设备上使用Ignition Edge和Panel Builder完成一个工业级的“Hello World”项目。reTerminal本身是一个坚固耐用的硬件平台自带触摸屏非常适合部署在工厂车间、机柜旁等环境。Ignition是工业界广为人知的SCADA、MES和IIoT平台而Ignition Edge是其专门为边缘侧设计的轻量级版本。Panel Builder则是Ignition中用于创建人机界面HMI的可视化开发工具。这个组合的目标非常明确让你能在边缘设备上快速构建和运行一个稳定、美观且功能强大的监控界面。如果你是一名工业自动化工程师、系统集成商或者是对工业物联网感兴趣的开发者那么这个“Hello World”项目就是你踏入工业边缘HMI开发大门最直接、最实用的一块敲门砖。它不涉及复杂的控制逻辑和数据库连接只聚焦于最核心的流程让一个简单的界面在reTerminal上跑起来并响应你的操作。通过这个过程你会彻底理解从硬件准备、软件安装、项目创建到界面部署的完整链路为后续开发更复杂的应用打下坚实基础。2. 核心组件与环境搭建全解析2.1 硬件基石reTerminal深度解读reTerminal并不是一个简单的“带壳树莓派”。它基于树莓派Compute Module 4CM4设计这意味着它拥有树莓派的核心计算能力但形态更紧凑并通过板对板连接器与载板集成带来了更高的可靠性和工业特性。首先看它的核心配置。CM4模块提供了从1GB到8GB RAM、以及带或不带eMMC存储的多种选项。对于运行Ignition Edge和简单的HMI应用4GB RAM加上32GB eMMC的配置是一个甜点选择既能保证系统流畅运行也为日志、历史数据预留了充足空间。其四核Cortex-A72处理器应对Ignition Edge的Java运行时环境和图形渲染绰绰有余。它的工业特性体现在多个方面。第一是电源设计reTerminal支持9-36V的宽压直流输入并具备反接保护和过压保护这直接满足了工业现场24V DC供电的标准避免了因电压波动导致设备重启。第二是接口与扩展性除了自带的HDMI、USB、千兆以太网口其40针的树莓派GPIO接头被完整引出这意味着你可以直接连接数字量I/O模块、RS-485通信模块用于连接PLC、仪表或CAN总线设备这是它作为边缘网关的关键能力。第三是物理设计金属外壳、IP65防护等级的前面板防尘防水、以及支持-20°C到70°C的工作温度范围让它能应对潮湿、多尘、油污及高低温的严苛环境。注意在首次上电前请务必确认供电电压在额定范围内。虽然具备保护但错误的接线仍是硬件损坏的主要风险。建议使用工业标准的24V DC开关电源并确保接地良好。2.2 软件栈Ignition Edge与Panel Builder的角色Ignition Edge是本次项目的软件核心。你可以把它理解为一个专为资源受限的边缘环境优化的、功能完整的Ignition服务器。它与完整版Ignition使用相同的设计器Designer进行开发共享绝大部分的标签系统、报警、历史记录和可视化组件但授权成本更低且资源占用更少。它的架构分为网关和设计器两部分。网关是运行在reTerminal上的服务进程负责执行你的项目逻辑、处理通信、管理运行时。设计器则是一个独立的Windows应用程序你需要在你的开发电脑通常是Windows系统上安装它用于远程连接至边缘网关进行项目的开发、配置和部署。这种“远程开发边缘运行”的模式是Ignition的典型工作流。Panel Builder是设计器中的一个核心视角Perspective。传统Ignition的Vision模块用于创建基于Windows的固定分辨率HMI而Perspective其开发界面即Panel Builder则是专门为构建响应式、跨平台Web浏览器、移动端、触摸屏的现代HMI而生。它使用HTML5、CSS3和JavaScript技术栈因此生成的界面能在reTerminal的浏览器中完美运行并且能自适应不同尺寸的屏幕。对于reTerminal的触摸屏交互来说Perspective是比Vision更合适的选择。在软件版本选择上务必保持网关、设计器和Panel Builder运行时组件的版本一致。例如都选择Ignition 8.1.x版本。从Ignition官网下载Ignition Edge安装包时通常会包含对应版本的Designer安装程序。2.3 系统准备与Ignition Edge安装实战在reTerminal上运行Ignition Edge首先需要一个操作系统。官方推荐使用基于Debian的Raspberry Pi OS64位Lite版本。不使用桌面版是为了节省系统资源。安装过程与普通树莓派类似使用Raspberry Pi Imager工具将系统镜像写入microSD卡如果CM4不带eMMC或通过USB工具写入eMMC。系统首次启动并完成基础配置如扩展文件系统、设置时区、启用SSH后关键一步是安装Java运行时环境JRE。Ignition Edge基于Java开发需要JRE 11或17。在终端中执行以下命令安装OpenJDK 17sudo apt update sudo apt install openjdk-17-jre-headless -y使用java -version验证安装是否成功。接下来是安装Ignition Edge。将下载的ignition-edge-8.1.x.zip安装包通过SCP如WinSCP上传到reTerminal的用户目录如/home/pi。解压并运行安装脚本unzip ignition-edge-8.1.x.zip cd ignition-edge-8.1.x sudo ./install.sh安装脚本会询问安装路径默认/usr/local/bin/ignition、数据存储路径以及创建一个名为ignition的系统用户来运行服务。安装完成后Ignition Edge会作为系统服务ignition.service自动启动。此时你可以在开发电脑的浏览器中输入https://reterminal_ip:8088来访问Ignition Edge网关的Web管理页面。首次访问会要求你创建网关管理员账户并接受许可协议。8088是默认的HTTP端口8443是HTTPS端口。请务必记好你设置的账号密码。实操心得安装过程中最常见的错误是端口冲突。如果8088端口被占用安装脚本可能会失败。你可以通过sudo netstat -tlnp | grep :8088检查。如果冲突可以修改Ignition安装目录下data/ignition.conf文件中的gateway.http.port和gateway.https.port配置然后重启服务sudo systemctl restart ignition。另外确保reTerminal的防火墙如果启用放行了8088和8443端口。3. 第一个Perspective项目“Hello World”界面创建3.1 连接网关与创建新项目在开发电脑上安装并启动Ignition Designer。启动后你会看到一个“Gateway Connections”窗口。点击“Add New Connection”填写你的reTerminal的IP地址、端口8443以及刚才创建的管理员账号密码。为这个连接起个名字比如“reTerminal-Edge”。点击“Test Connection”确保网络畅通且凭据正确然后保存。连接成功后在Designer左侧的“项目浏览器”中你应该能看到远程网关。右键点击“Projects”选择“Create New Project”。给项目命名为HelloWorld_Edge。这里有一个关键选择项目类型。由于我们要使用Panel Builder创建现代HMI必须选择“Perspective”类型而不是“Vision”。Perspective项目会包含一个“Perspective Pages”的文件夹结构。创建项目后它会被自动下载到你的Designer本地进行编辑。所有修改都先在本地进行只有当你主动提交Commit时才会同步到远程网关。3.2 Panel Builder界面设计入门在项目浏览器中展开你的HelloWorld_Edge项目找到“Perspective Pages”并右键选择“New Perspective Page”。将其命名为MainPage.view。双击打开它此时就进入了Panel Builder的设计界面。Panel Builder界面主要分为四个区域左上方的组件面板Components包含了按钮、标签、输入框、图表等所有可视化控件左下方的属性面板Property Editor用于配置当前选中组件的所有属性中间是主设计画布View Canvas右侧是页面结构树View Tree和数据源浏览器Data Panel。我们的“Hello World”目标很简单创建一个标签显示静态文本一个按钮点击按钮后改变标签的文本。添加标签从组件面板的“Display”类别中拖拽一个“Label”组件到画布上。在属性面板中找到“text”属性将其值从“Label”修改为“Hello, Ignition Edge!”。你还可以调整“styles”下的字体大小如fontSize: ‘30px’、颜色color: ‘steelblue’和对齐方式textAlign: ‘center’。添加按钮从“Buttons”类别中拖拽一个“Button”组件到画布上放在标签下方。将其“text”属性改为“Click Me!”。为按钮添加脚本实现交互的核心是事件处理。选中画布上的按钮在属性面板中找到“events”部分点击“onClick”事件旁边的闪电图标。这会打开一个脚本编辑器窗口。我们需要在这里写一小段JavaScript代码来改变标签的文本。首先我们需要获取标签组件的引用。在Perspective中可以通过组件的“props”对象来访问和修改其属性。假设我们没有修改过组件的默认名称标签的组件名是label0按钮是button0。在onClick事件的脚本编辑器中输入以下代码// 获取当前页面上下文 const page event.source; // 通过组件名找到标签组件并设置其text属性 page.getComponent(label0).props.text Hello from reTerminal!;这段代码的意思是当按钮被点击onClick时事件对象event被触发。我们通过event.source获取到事件源所在的页面对象然后使用page.getComponent(‘label0’)方法找到名为label0的标签组件最后修改其props.text属性的值。3.3 样式调整与布局技巧为了让界面在reTerminal的800x480分辨率的屏幕上看起来更舒服我们需要进行一些简单的布局和样式调整。Perspective使用Flexbox布局模型非常灵活。使用容器一个良好的习惯是将相关组件放入容器中管理。从“Containers”类别拖一个“Flex Container”到画布。你可以将刚才的标签和按钮拖进这个容器里。在容器的属性面板中可以设置布局方向flexDirection: ‘column’表示垂直排列、对齐方式justifyContent: ‘center’垂直居中alignItems: ‘center’水平居中。响应式设计我们希望容器能占满整个屏幕。设置容器的width和height属性为100%。同时将页面根组件的overflow属性设置为hidden防止出现滚动条。触摸友好工业触摸屏的按钮不能太小。确保按钮的minHeight至少设为50pxminWidth设为120px。可以在按钮的样式里添加内边距padding: ‘10px 20px’。完成这些后你的界面应该是一个在屏幕上居中显示的标题和一个稍大的按钮点击按钮标题文字会发生变化。这就是我们Perspective版本的“Hello World”。4. 项目部署与reTerminal运行时配置4.1 提交项目与发布视图设计完成后需要将项目提交到网关并发布为可访问的视图。在Designer的菜单栏点击“Project - Commit and Push…”。这会弹出一个窗口列出所有待提交的更改。填写本次提交的注释如“Initial Hello World page”然后点击“Commit Push”。项目文件就会被同步到远程的Ignition Edge网关上。但是提交只是更新了网关上的项目文件要能通过浏览器访问还需要创建一个Perspective Session。在Designer左侧切换到“Gateway”标签页或者直接在浏览器中登录网关的Web管理界面地址https://reterminal_ip:8088。在网关页面导航到“Config” - “Perspective”。这里有一个“Sessions”子页面。点击“Create New Session”。需要配置几个关键参数Session Name:HelloWorldSession这是会话的唯一标识。Project: 从下拉列表中选择我们刚提交的HelloWorld_Edge项目。Project Resource: 选择我们创建的页面MainPage.view。URL Mapping: 这决定了访问地址。例如设置为hello那么完整的访问URL就是https://reterminal_ip:8043/perspective/client/hello。8043是Perspective客户端的默认端口。创建并保存会话后它的状态应该是“Running”。4.2 在reTerminal上配置kiosk模式自动启动我们不希望每次启动reTerminal都要手动打开浏览器输入地址。工业HMI通常需要上电即全屏显示指定界面这就是kiosk模式。在reTerminal的Raspberry Pi OS上我们可以使用轻量级的浏览器chromium-browser并配合窗口管理器openbox来实现。首先安装必要的软件包sudo apt update sudo apt install chromium-browser openbox xorg xinit -y然后我们需要为当前用户如pi创建一个自动启动的X Window会话脚本。编辑文件~/.xinitrc#!/bin/sh # 禁用屏幕保护和电源管理 xset s off xset -dpms xset s noblank # 以无痕模式启动Chromium并全屏打开我们的Perspective页面 chromium-browser --noerrdialogs --disable-infobars --kiosk https://localhost:8043/perspective/client/hello注意这里我们使用localhost而不是IP因为浏览器和Ignition Edge运行在同一设备上。--kiosk参数让浏览器以全屏无边框模式启动。接下来配置系统自动登录并启动X。这取决于你使用的显示管理器。对于使用lightdm的Raspberry Pi OS Lite安装桌面后可以编辑/etc/lightdm/lightdm.conf[Seat:*] autologin-userpi autologin-user-timeout0然后修改pi用户的自动启动项。创建或编辑文件~/.config/lxsession/LXDE-pi/autostart添加一行xinitrc重要提示在配置kiosk模式前务必先在reTerminal的桌面环境中手动用Chromium打开一次该URL并接受Ignition的自签名证书。否则在kiosk模式下证书警告会阻止页面加载而你又无法进行交互操作。4.3 网络与安全基础配置作为边缘设备基础的安全配置必不可少。修改默认密码首要任务是修改pi用户的默认密码raspberry和Ignition网关的默认管理员密码。防火墙设置使用ufw简化防火墙管理。只开放必要的端口sudo ufw allow 22 # SSH用于远程维护 sudo ufw allow 8043/tcp # Perspective客户端端口 sudo ufw allow 8088/tcp # 网关Web管理端口建议仅内网访问 sudo ufw enable服务自启与监控确保Ignition服务在系统崩溃或断电重启后能自动恢复。使用systemctl设置sudo systemctl enable ignition可以创建一个简单的监控脚本定期检查Ignition进程和端口如果失败则尝试重启服务。完成以上所有步骤后重启reTerminal。你应该能看到设备启动后自动进入图形界面并全屏显示着我们创建的“Hello World” HMI页面。点击按钮文字成功切换这标志着一个完整的工业边缘HMI应用从开发到部署的全流程已经跑通。5. 问题排查与性能优化指南5.1 常见部署问题速查表在实操过程中你可能会遇到以下典型问题。这里提供一个快速排查清单问题现象可能原因排查步骤与解决方案浏览器无法访问https://ip:80881. Ignition服务未运行2. 防火墙阻止3. IP地址错误1.sudo systemctl status ignition检查服务状态尝试sudo systemctl restart ignition2.sudo ufw status检查防火墙规则临时关闭测试sudo ufw disable(测试后记得开启)3. 在reTerminal上用hostname -I确认IPDesigner无法连接网关1. 网络不通2. 端口/证书问题3. 凭据错误1. 从开发电脑ping reTerminal的IP2. 尝试用浏览器访问8088端口确认证书警告可暂时添加安全例外3. 在网关Web页面重置或确认管理员密码Perspective页面空白或无法加载1. Session未运行或配置错误2. 资源路径错误3. 客户端端口被阻1. 在网关Web的Perspective Sessions页面确认对应Session状态为Running检查其配置的Project和Resource路径是否正确2. 直接访问https://ip:8043/perspective/client看是否列出可用会话3. 检查防火墙是否开放8043端口点击按钮无反应1. 脚本错误2. 组件名称不匹配1. 在Designer中打开页面查看按钮的onClick脚本检查是否有JavaScript语法错误编辑器会有红色波浪线提示2. 确认getComponent(‘label0’)中的组件名与画布上标签组件的名称属性完全一致区分大小写。最好通过页面结构树确认组件名。reTerminal启动后不显示界面1. 自动登录配置失败2. .xinitrc脚本错误3. Chromium启动失败1. 检查/etc/lightdm/lightdm.conf中的autologin-user设置2. 检查~/.xinitrc文件是否有执行权限 (chmod x ~/.xinitrc)并手动执行startx测试3. 查看Xorg的日志 (~/.xsession-errors) 和Chromium的启动参数是否正确特别是URL是否可访问5.2 reTerminal与Ignition Edge性能调优为了让系统运行更流畅尤其是在资源有限的边缘设备上可以进行一些优化系统层面关闭不必要的服务如蓝牙、音频如果不用。sudo systemctl disable bluetooth.service hciuart.service。调整交换空间如果内存紧张可以适当增加swap分区大小但注意eMMC或SD卡频繁读写会影响寿命。建议在/etc/dphys-swapfile中调整CONF_SWAPSIZE为1024单位MB。使用静态IP在/etc/dhcpcd.conf中为reTerminal配置静态IP避免DHCP延迟和IP变化带来的问题。Ignition Edge层面限制历史记录在网关的“Config - Historian - Settings”中对于测试或非关键数据可以缩短数据保留时间或降低存储间隔。优化标签扫描速率如果后续连接了PLC等设备不要在边缘网关设置过快的扫描速率如毫秒级根据实际需要调整为秒级以减轻系统负载和网络压力。管理日志级别在“Config - Logging”中将默认的INFO级别调整为WARN可以减少日志文件的大小和IO操作。Perspective页面层面精简组件数量一个页面内避免放置成百上千个组件尤其是频繁更新的图形组件。使用图片精灵Sprite如果界面使用多个小图标将它们合并成一张雪碧图通过CSS背景定位来显示可以减少HTTP请求。谨慎使用定时脚本在页面的定时器timer事件中执行轻量级操作避免复杂的循环或大量DOM操作。5.3 后续扩展方向与建议完成这个“Hello World”只是起点。基于这个稳定的基础你可以向多个方向深化连接真实数据在Ignition Designer中创建“Tags”标签点模拟或连接OPC UA服务器、Modbus TCP设备等将实时数据如温度、压力、设备状态绑定到Perspective页面的文本、仪表盘或图表组件上。实现报警功能在网关中配置报警通知当某些标签值超过阈值时在Perspective页面顶部显示报警横幅甚至通过邮件、短信通知。添加用户登录为Perspective会话配置身份认证不同角色的操作员看到不同的界面或拥有不同的操作权限。本地历史数据记录与查询利用Ignition Edge内置的SQLite历史数据库记录关键数据的变化并在Perspective页面中提供历史趋势图查看功能。与云端同步配置Ignition Edge的“Edge-to-Cloud”功能将筛选后的关键数据、报警信息同步到Ignition Cloud或其他MQTT Broker实现云边协同。这个项目框架的价值在于它验证了从开发环境到边缘硬件、从界面设计到系统部署的完整通路是畅通的。后续无论功能多复杂都只是在这个坚实的基础上添加砖瓦。当你第一次在嘈杂的车间里看到自己编写的界面在坚固的reTerminal上稳定运行时那种将虚拟代码与物理世界连接起来的成就感正是工业软件开发的魅力所在。