七、设计一个画面
7.1 管理数据
FUXA要使用与我们网关采集到的数据，则首先需要把数据连接管理起来，我们在设置中点击连接按钮，点右下角的加号添加一个连接，因为我们使用的是MQTT，所以连接类型为MQTTCLIENT。如下图：
记得将“启用”开关打开。打开之后FUXA就会与MQTT服务器建立连接，如下图：
绿灯表示连接成功。
点击MQTT连接上的“编辑设备标签”按钮进行变量的管理，如下图：
在设备设置中点右下角加号开始添加变量信息，如下图：
如果MQTT中当前有实时数据在上传的话，可以点击搜索快速获取到MQTT消息再基于消息格式进行配置，如下图：
选择我们在网关北向参数中配置的数据上传的主题，使用JSON模式会自动显示当前收到的数据，然后给我们需要的数据前面设置好变量名，再打上勾，点击订阅就可以将变量添加到设备中了，如下图：
对于要进行远程控制的变量，选择发布模式，我们将主题配置进去，定义一个可控变量出来，如下图：
至此我们用到的变量信息就都添加进来了。
7.2 设计画面
默认情况下编辑器已经自动创建了一个视图，我们直接将其重命名为“演示页”，并在中间的画布上设计我们的展示画面，如下图：
FUXA可以添加很多视图，并支持权限控制以及菜单管理等功能，这里只简单做一个画面演示一下就不多做介绍了。
7.3 绑定变量
有了画面之后我们需要将画面上的控件与我们采集的数据关联上，不然画面是无数据显示的，
7.3.1 水管配置
选中水管点属性，在管道设置中点“行动”，关联我们之后配置的变量“电磁阀开关”的数据，当值为0是停止，当值为1时让管道里面的水流动起来，如下图：
7.3.2 电磁阀图标配置
电磁阀图标也是关联的“电磁阀开关”变量，当值为1时将填充色设置为绿色，如下图所示：
7.3.3 电磁阀状态配置
电磁阀状态也是关联的“电磁阀开关”变量，为1时为绿色，为0时为红色，另外描述文字根据“电磁阀开关”的值不同进行显示和隐藏，如下图：
三个不同的描述文本，每个都需要单独进行显示和隐藏逻辑的设置。
7.3.4 表格内容配置
表格内容显示当前这条数据采集耗时时间和采集数据时的网关时间。直接将变量内容显示即可，如下图所示：
7.3.5 室内温度配置
进水温度，室内温度，出水温度的配置方式一样，这里就只简单说一下室内温度，在属性中先配置好仪表盘的样式，比如指针大小，颜色，样式等，再关联上对应变量就可以了。如下图：
7.3.6 控制按钮配置
在按钮属性的事件中，选择一个点击事件，关于到我们用于控制的变量，在要写入的值中参考FUXAMQTT协议中的控制请求填写值的JSON，如打开电磁阀的值我们可以使用：{"_cmd_":"setval","_imei_":"863569068524040","_uuid_":"88888888","_key_":"电磁阀开关","_value_":1}，如下图所示：
7.4 菜单布局
作为一个完整的平台，除了一个画面之外，我们可能还需要有对应的菜单，如果画面很多时可以通过导航菜单快速进入不同的画面或者第三方的功能页面，这里简单演示一下，先进设置界面选择布局，如下图：
首先我们开启导航的显示，然后再配置侧面的导航菜单，如下图：
我这里添加了三个，第一个显示我们设计的画面，第一个直接进云物智创的淘宝店，第三个直接进官网。
同样的逻辑我们也可以配置页面的顶部导航信息， 如下图：
这里我没有添加新的，只是开启显示了系统自带的通知消息等。
八、成果展示
重新访问FUXA主页http://120.53.89.109:1881就可以看到我们的成果了，如下图：
可以尝试改变PLC中的值画面也会随之变化，我们也可以点击“打开电磁阀”或者“关闭电磁阀”按钮进行电磁阀的开关控制，更多的功能您可以在FUXA中慢慢探索，更多的精彩等待您的发掘。
