视频：Habr 管理控制台。 允许您调节业力、评级和禁止用户。
TL; DR： 在本文中，我将尝试使用 Webaccess/HMI Designer 工业界面开发环境和 WebOP 终端创建漫画 Habr 控制面板。
人机界面（HMI）是一组用于人类与受控机器交互的系统。 通常，该术语适用于具有操作员和控制面板的工业系统。
网络操作 — 用于创建人机界面的自主工业终端。 用于创建生产控制面板、监控系统、控制室、智能家居控制器等。 支持直接连接工业设备，并可作为 SCADA 系统的一部分工作。
WebOP 终端 - 硬件
WebOP 终端是一款基于 ARM 处理器的低功耗计算机，带有监视器和触摸屏，旨在运行具有在 HMI Designer 中创建的图形界面的程序。 根据型号的不同，终端具有各种板载工业接口：RS-232/422/485、用于连接汽车系统的 CAN 总线、用于连接其他外围设备的 USB 主机端口、用于将终端连接到计算机的 USB 客户端端口、音频输入和音频输出，用于非易失性存储器和设置传输的 MicroSD 读卡器。
这些设备被定位为一体式个人电脑的预算替代品，用于不需要强大处理器和功能齐全的台式电脑资源的任务。 WebOP 可以作为控制和数据输入/输出的独立终端，与其他 WebOP 配对，或作为 SCADA 系统的一部分。
WebOP终端可直接连接工业设备
被动冷却和 IP66 防护等级
由于散热较低，一些WebOP型号的设计完全没有主动风冷。 这使得设备可以安装在对噪音水平敏感的区域，并减少进入外壳的灰尘量。
前面板无缝隙、无接缝，防护等级为IP66，可在压力下允许水直接进入。
WOP-3100T 终端的后面板
非易失性存储器
为了防止数据丢失，WebOP具有128Kb的非易失性存储器，可以像RAM一样使用它。 它可以存储仪表读数和其他关键数据。 如果发生断电，数据将被保存并在重新启动后恢复。
远程更新
终端上运行的程序可以通过以太网或RS-232/485串行接口进行远程更新。 这简化了维护，因为无需前往所有终端更新软件。
WebOP 模型
- 基于 HMI RTOS 实时操作系统构建的最实惠的设备。 该系列以WebOP为代表-///，屏幕对角线尺寸分别为4,3英寸、7英寸、8英寸和10.1英寸。
— 基于 Windows CE 操作系统的更高级模型。 它们与2000T系列的不同之处在于硬件接口数量较多，并且板载有CAN接口。 该器件可在宽温度范围（-20~60°C）下运行，并具有抗静电保护（空气：15KV/接触：8KV）。 该系列完全满足 IEC-61000 标准的要求，该标准允许这些器件用于存在静电放电问题的半导体制造中。 该系列以WebOP为代表-//，屏幕对角线分别为7英寸、10.1英寸和12.1英寸。
WebAccess/HMI Designer 开发环境
WebOP 终端开箱即用，只是一台低功耗 ARM 计算机，您可以在其上运行任何软件，但该解决方案的重点是专有的 WebAcess/HMI 工业接口开发环境。 该系统由两个组件组成：
- 人机界面设计师 — 开发接口和编程逻辑的环境。 在程序员计算机上的 Windows 下运行。 最终程序被编译成一个文件并传输到终端在运行时执行。 该程序有俄语版本。
- 人机界面运行时 — 在最终终端上运行编译后的程序的运行时。 它不仅可以在WebOP终端上工作，还可以在研华UNO、MIC和普通台式电脑上工作。 有适用于 Linux、Windows、Windows CE 的运行时版本。
你好世界——创建一个项目
让我们开始为 Habr 控制面板创建一个测试界面。 我将在终端上运行该程序 运行WinCE。 首先，我们在 HMI Designer 中创建一个新项目。 要在 WebOP 上运行程序，选择正确的模型非常重要；最终文件的格式将取决于此。 在这一步，您还可以选择桌面架构，然后最终文件将为X86运行时编译。
创建一个新项目并选择架构
选择将编译后的程序加载到 WebOP 中的通信协议。 在这一步，您可以选择串口，或者指定终端的IP地址。
项目创建界面。 左侧是未来程序组件的树形图。 目前，我们只对“屏幕”项感兴趣，这些直接是将显示在终端上的带有图形界面元素的屏幕。
首先，让我们创建两个带有文本“Hello World”的屏幕，并能够使用按钮在它们之间切换。 为此，我们将添加一个新屏幕，即 Screen #2，并在每个屏幕上添加一个文本元素和两个用于在屏幕之间切换的按钮（屏幕按钮）。 让我们配置每个按钮以切换到下一个屏幕。
设置屏幕切换按钮的界面
Hello World 程序已准备就绪，现在您可以编译并运行它。 在编译阶段，如果变量或地址指定不正确，可能会出现错误。 任何错误都被认为是致命的；只有在没有错误的情况下才会编译程序。
该环境提供了模拟终端的能力，以便您可以在本地计算机上调试程序。 模拟有两种类型：
- 在线模拟 — 将使用程序中指定的所有外部数据源。 这些可以是 USO 或通过串行接口或 Modbus TCP 连接的设备。
- 离线模拟 — 无需使用外部设备即可进行模拟。
虽然我们没有外部数据，但我们使用离线模拟，并预先编译了程序。 最终程序将位于项目文件夹中，名称为 项目名称_程序名称.px3
模拟中运行的程序可以使用鼠标光标进行控制，就像在 WebOP 终端的触摸屏上进行控制一样。 我们看到一切都按预期进行。 伟大的。
要将程序下载到物理终端，只需单击“下载”按钮。 但由于我没有配置终端与开发环境的连接，所以可以简单地使用U盘或MicroSD存储卡传输文件。
程序界面很直观，我不会遍历每个图形块。 对于任何使用过类似于 Word 的程序的人来说，创建背景、形状和文本都会很清楚。 要创建图形界面，不需要任何编程技能；所有元素都是通过将鼠标拖动到表单上来添加的。
与记忆一起工作
现在我们知道如何创建图形元素，让我们学习如何使用动态内容和脚本语言。 让我们创建一个显示变量数据的条形图 U $ 100。 在图表设置中，选择数据类型：16位整数，图表取值范围：0到10。
该程序支持用三种语言编写脚本：VBScript、JavaScript 及其自己的语言。 我将使用第三个选项，因为文档中有相关示例，编辑器中也有自动语法帮助。
让我们添加一个新的宏：
让我们编写一些简单的代码来增量更改可在图表上跟踪的变量中的数据。 我们将给变量加 10，当它大于 100 时将其重置为零。
$U100=$U100+10
IF $U100>100
$U100=0
ENDIF
要循环执行脚本，请在常规设置中将其设置为主宏，执行间隔为 250ms。
让我们在模拟器中编译并运行该程序：
在这个阶段，我们已经学会了操作内存中的数据并将其直观地显示出来。 这已经足以创建一个简单的监控系统，从外部设备（传感器、控制器）接收数据并将其记录在内存中。 HMI Designer 中提供了各种数据显示块：以带有箭头的圆形刻度盘、各种图表和图形的形式。 使用 JavaScript 脚本，您可以通过 HTTP 从外部源下载数据。
哈布尔控制面板
利用所获得的技能，我们将为 Habr 管理控制台制作一个漫画界面。
我们的遥控器应该能够：
- 切换用户配置文件
- 存储业力和评级数据
- 使用滑块更改业力和评级值
- 当您点击“禁止”按钮时，个人资料应被标记为禁止，头像应更改为划掉
我们将在单独的页面上显示每个配置文件，因此我们将为每个配置文件创建一个页面。 我们将 karma 和 rating 存储在内存中的局部变量中，这些变量将在程序启动时使用设置宏进行初始化。
图片是可点击的
调整业力和评级
为了调整业力，我们将使用滑块（滑动开关）。 我们指定在设置宏中初始化的变量作为记录地址。 让我们将滑块值的范围限制在 0 到 1500 之间。现在，当滑块移动时，新数据将被写入内存。 在这种情况下，滑块的初始状态将对应于内存中变量的值。
为了显示业力和评级的数值，我们将使用数字显示元素。 其工作原理与示例程序“Hello World”中的图类似，我们只需在Monitor Address中指明变量的地址即可。
禁止按钮
“禁止”按钮是使用切换开关元素实现的。 数据存储的原理与上面的例子类似。 在设置中，您可以根据按钮的状态选择不同的文本、颜色或图像。
当按下按钮时，头像会被红色划掉。 使用图片显示块很容易实现这一点。 它允许您指定与切换开关按钮的状态关联的多个图像。 为此，该块被赋予与带有按钮和状态数的块相同的地址。 头像下方带有铭牌的图片也是以类似的方式设置的。
结论
总的来说，我喜欢这个产品。 以前，我有使用 Android 平板电脑执行类似任务的经验，但为其开发界面要困难得多，而且浏览器 API 不允许完全访问外围设备。 一个WebOP终端可以替代Android平板电脑、计算机和控制器的组合。
HMI Designer 尽管设计陈旧，但相当先进。 无需特殊的编程技能，您就可以快速绘制出工作界面。 本文并未讨论所有图形块，其中有很多：动画管道、圆柱体、图形、切换开关。 它开箱即用地支持许多流行的工业控制器，并包含数据库连接器。
引用
可下载WebAccess/HMI Designer和Runtime开发环境
→
来源： habr.com