视频：Habr管理面板。 允许您调整业力，等级和禁止用户。TL; DR：在本文中，我将尝试使用Webaccess / HMI Designer工业开发环境和WebOP终端为Habr创建一个喜剧控制面板。
人机界面（HMI）是一组用于与受控机器进行人机交互的系统。 通常，此术语用于具有操作员和控制面板的工业系统。
WebOP是用于创建人机界面的独立工业终端。 它用于创建生产控制面板，监视系统，控制室，智能家居控制器等。 它支持与工业设备的直接连接，可以作为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模型
2000T系列是在HMI RTOS实时操作系统之上构建的最实惠的设备。 该系列以WebOP-
2040T /
2070T /
2080T /
2100T表示 ，屏幕对角线分别为4.3英寸，7英寸，8英寸和10.1英寸。
3000T系列是基于Windows CE操作系统的更高级的型号。 它们与2000T系列的不同之处在于大量的硬件接口，并且板上带有CAN接口。 该设备可在扩展温度范围（-20〜60°C）下运行，并具有防静电保护（空气：15KV /触点：8KV）。 该生产线完全符合IEC-61000标准的要求，该标准允许在存在静电放电问题的半导体制造中使用这些设备。 该系列由WebOP-
3070T /
3100T /
3120T型号代表 ，屏幕对角线分别为7英寸，10.1英寸和12.1英寸。
WebAccess / HMI Designer开发环境
WebOP终端开箱即用，只是一台低功耗ARM计算机，您可以在其上运行任何软件，但是此解决方案的重点在于专有的WebAcess / HMI工业接口开发环境。 该系统包含两个组件：
- HMI Designer是用于开发接口和编程逻辑的环境。 它可以在Windows上的计算机程序员下工作。 最终程序被编译成单个文件，并传输到终端以执行运行时。 该程序有俄语版本。
- HMI运行时 -在终端上运行已编译程序的运行时。 它不仅可以在WebOP终端上运行，而且可以在研华UNO，MIC计算机和普通台式计算机上运行。 有适用于Linux，Windows，Windows CE的运行时版本。
Hello world-创建一个项目
让我们开始为Habr控制面板创建一个测试界面。 我将在运行WinCE的
WebOP-3100T终端上运行该程序。 首先，在HMI Designer中创建一个新项目。 要在WebOP上运行程序，选择正确的模型很重要，最终文件的格式将取决于此。 在这一步，您还可以选择一个桌面体系结构，然后将在X86运行时下编译生成的文件。
创建一个新项目并选择架构选择通信协议，通过该协议将已编译的程序加载到WebOP中。 在此步骤中，您可以选择一个串行接口，或指定终端的IP地址。
项目创建界面。 左侧是将来程序的组件的树状图。 虽然我们仅对“屏幕”项感兴趣，但是这些是带有GUI元素的直接屏幕，这些元素将显示在终端上。
首先，使用文本“ Hello World”创建两个屏幕，并使用按钮在两个屏幕之间切换。 为此，添加一个新的屏幕屏幕＃2，并在每个屏幕上添加一个文本元素和两个用于在屏幕之间切换的按钮（屏幕按钮）。 每个按钮均配置为切换到下一个屏幕。
用于设置屏幕切换按钮的界面Hello World程序已准备就绪，现在您可以编译并运行它。 在编译阶段，如果变量或地址指定不正确，则可能会出现错误。 任何错误都被认为是致命的，只有在没有错误的情况下程序才会被编译。
该环境提供了模拟终端的功能，以便您可以在本地计算机上调试程序。 有两种类型的模拟：
- 在线模拟 -将涉及程序中指定的所有外部数据源。 这些可以是USO或通过串行接口或Modbus TCP连接的设备。
- 离线模拟 -不使用外部设备进行模拟。
尽管我们没有外部数据，但是在编译程序之后，我们使用了离线模拟。 最终程序将位于项目文件夹中，名称为
ProjectName_Program Name.px3仿真中启动的程序可以用鼠标光标控制，其方式与在WebOP终端的触摸屏上相同。 我们看到一切都按预期进行。 太好了
要将程序下载到物理终端，只需单击“下载”按钮。 但是由于我没有配置终端到开发环境的连接，因此您可以简单地使用USB闪存驱动器或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从外部源实现数据加载。
哈伯控制面板
使用获得的技能，我们将在Habrom的管理面板中创建一个漫画界面。
我们的遥控器必须能够：
- 切换用户个人资料
- 存储业力和排名数据
- 使用滑块更改业力和等级值
- 当您单击禁止按钮时，个人资料应标记为已禁止，个人资料图片应更改为划线
每个配置文件将显示在单独的页面上，因此我们将为每个配置文件创建一个页面。 我们将业力和等级存储在内存中的局部变量中，当程序启动时，将使用Setup Macro对其进行初始化。
可点击的图片调整业力和等级
要调整业力，我们将使用滑块（Slid Switch）。 作为记录地址，我们指定在设置宏中初始化的变量。 我们将滑块的值范围限制为0到1500。现在，当滑块移动时，新数据将被写入内存。 在这种情况下，滑块的初始状态将对应于存储器中变量的值。
要显示业力和等级的数值，我们将使用数字显示元素。 其操作原理与Hello World程序示例中的图相似；我们仅在Monitor Address中指示变量的地址。
禁止按钮
禁止按钮是使用Toggle Switch元素实现的。 数据存储的原理与上面的示例相似。 在设置中，可以根据按钮的状态选择不同的文本，颜色或图像。
在按下按钮的那一刻，化身必须用红色划掉。 使用图片显示单元很容易实现。 它允许您指定与“切换开关”按钮的状态相关的多个图像。 为此，为该块提供与具有按钮的块相同的地址，以及状态数。 配置类似的图片，头像下方带有铭牌。
结论
总的来说，我喜欢这个产品。 以前，我曾使用Android平板电脑完成类似任务，但是为它开发界面要复杂得多，并且浏览器API不允许完全访问外围设备。 一个WebOP终端可以替换Android平板电脑，计算机和控制器中的捆绑软件。
尽管具有过时的设计，HMI Designer还是相当先进的。 如果没有特殊的编程技能，则可以快速勾勒出工作界面。 本文没有考虑所有的图形块，其中有很多：动画管道，圆柱体，图形，切换开关。 它开箱即用，支持许多流行的工业控制器，包含数据库连接器。
参考文献
WebAccess / HMI Designer和Runtime开发环境可以在
此处下载
→
Habrom控制面板项目的来源