KQD：快驱动单片机 - 专题介绍：使用浏览器通过WebHMI访问本地和远程设备

专题介绍：使用浏览器通过WebHMI访问本地和远程设备

基本信息

KQD平台内置了HTTP服务协议。如果设备在配置时，网口端使能了HTTP协议支持（向导配置的话直接使能WebHMI协议），那么用户就可以通过浏览器直接访问设备。和普通的组态软件一样，用户可以查看变量、修改参数、图形化的方式查看设备状态。借助WebHMI访问设备，用户无需安装任何软件，只要知道PLC设备的IP地址，有一个标准的网络浏览器即可。

Web服务器的内容开发，可以采用纯手动的方式，通过手写HTML格式的网页文件来进行。新版的KQD Application Editor可以直接对网站的文件内容进行打包并下载。对于不熟悉网页开发的朋友们来说，也可以借助KQD Application Editor中的WebHMI扩展来开发。和组态软件一样，通过图形组态的方式，来设计Web服务器的内容。WebHMI扩展根据用户的定义，自动生成Web服务器的HTML文件，JavaScript代码，图片资源等。借助Ajax动态网页技术，可以方便的在浏览器上查看变量，修改参数。

因为是单片机实现的Web服务器，受限与网络速度和存储大小的限制，Web服务器的内容不宜设计得太过复杂。一般来说使用SPI接口的FLASH例如W25Q32来保存Web服务器文件，预留给Web服务器的总空间大小也就1M字节左右。因此WebHMI扩展只支持SVG格式的矢量图片，一方面矢量图体积较小，另一方面矢量图也可以无损缩放，方便各种设备访问。

开发方式：手动编写Web服务器文件

手动编写Web服务器文件，然后通过KQD Application Editor将文件打包下载到设备。

开发方式：使用KQD Application Editor的WebHMI扩展自动生成服务器文件

使用KQD Application Editor的WebHMI扩展自动生成服务器文件，其操作和普通组态软件类似。用户将设计好的控件拖到画面中，配置变量属性即可。相关的HTML文件和JavaScript文件由KQD Application Editor自动生成并打包下载到设备。

连接方式：本地网络直接访问

如果用户的电脑可以在本地直接连接到设备，那么只要在浏览器中输入设备的IP地址，即可访问设备。

连接方式：通过Kqdnet物联网服务器远程访问

如果设备同时还配置了Kqdnet物联网协议，并且可以通过以太网、WiFi、4G等任何一种方式登录到KQD平台的Kqdnet服务器。那么用户也可以通过互联网远程访问设备。对于用户来说，远程访问和本地访问的体验是完全一致的（唯一例外是如果设备配置了Kqdnet登录密码，远程访问需要输入Kqdnet密码以确认是否有访问权限）。如果需要远程访问，用户需要将Web服务器文件打包上传到Kqdnet服务器。在访问设备时，静态数据直接从Kqdnet服务器获取（例如文字、图片等）；动态数据，例如AJAX的POST请求，则由Kqdnet服务器通过Kqdnet协议转发到联网的设备。

向导配置

首先，需要参考开发板DK60-STM32F412RE的硬件电路完成基础硬件配置，可以参考：专题介绍：使用向导来生成蓝图

添加4G-CAT模块驱动

首先按照专题介绍中的步骤完成向导配置或者直接导入向导配置文件。然后参考开发板DK60-STM32F412RE的4G-CAT模块链接：

4G-CAT模块与MCU通过USART6的PA11、PA12来进行数据交换。因为前面基础硬件配置中并没有配置USART6，所以这里需要先配置串口USART6。选择“串口通讯”选项卡，点击USART6：

勾选“使能此串口模块”。
勾选DMA硬件加速的“使能”。
确定发送管脚为PA11，接收管脚为PA12。
因为此串口为4G-CAT模块专用，其他协议自由口、MODBUS、PPI都不用使能。

配置好串口后，下一步我们添加EC600网卡。选择“TCP/IP通讯”选项卡，点击“添加”按钮下面的“添加EC600”命令：

选择网卡EC600A，在硬件选项卡中，选择串口为USART6，PEN管脚为PB2，PWK管脚为PA15：

添加KQDNET协议

选择网卡EC600A，在“KQDNET”选项卡中，勾选“使用此端口尝试连接到KQDNET服务器”：

添加WebHMI协议

选择网卡W5500A，在“WebHMI”选项卡中，勾选“在此硬件上使能WebHMI协议”：

点击确定即可生成蓝图。蓝图上传到服务器；完成开发板的烧录；PLC类型部署到本地后，便完成了硬件部署。

手动创建网页

创建一个空文件夹：“Demo”。
Demo中放置一张图片，取名：“logo.png”。
Demo中创建一个文本文件，取名：“index.html”。
index.html中写入如下HTML代码：
用网线连接开发板和电脑。切换到前面配置的PLC类型，项目管理中双击通讯，弹出通讯配置对话框：

选择Ethernet连接方式，找到与电脑连接的PLC，点击“确定”按钮。
打开KQD Application Editor，切换到前面配置的PLC类型，然后“PLC”菜单中选择“写入文件”：
下载对话框中：

文件代码选择：0x00012011，勾选“打包目录到档案”，选择开始创建的文件夹，点击“下载”按钮，将目录打包后下载到PLC。
打开电脑的Web浏览器，地址框中输入PLC的IP地址，即可看到PLC返回的网页信息：

使用WebHMI扩展创建网页

WebHMI编辑

打开KQD Application Editor，切换到前面配置的PLC类型，然后在“项目管理”中，右键点击“系统扩展”，右键菜单中点击“插入WebHMI”：
输入任意条目名，点击“确定”，进入WebHMI编辑界面：
工具条上点击“矢量图库”按钮，在“矢量图库管理器”对话框中点击“添加”按钮：

添加系统自带的指示灯、按钮素材：

图片添加成功后点击“确认”按钮，关闭对话框：
工具条上点击“矢量图列表”按钮，地址输入“V4.0”，选择两个矢量图片，分别用来表示V4.0为OFF和V4.0为ON的状态：
工具条上点击“按钮”按钮，添加两个按钮到画布并调整位置大小。一个按钮文本为“START”，另一个按钮文本为“STOP”。一个对应类型是“置位”，另一个对应类型是“复位”。两个按钮的地址都是V4.0。
工具条上点击“控件”按钮，选择“图表”控件：
调整图表控件的位置和大小，属性窗口中点击“编辑”，修改标签为：“Inlet”，地址为：“VW20”。

梯形图编辑

NETWORK 0

NETWORK 1

通过浏览器访问设备

打开电脑的Web浏览器，地址框中输入PLC的IP地址，即可看到PLC返回的网页信息：

点击“START”按钮，红灯亮，曲线快速上升；点击“STOP”按钮，红灯灭，曲线缓慢下降。

通过Kqdnet远程访问设备网页

烧录Kqdnet设备ID到设备

打开KQD Designer，登录账号，选择“设备”页：
点击“添加”按钮，选择好服务时间，点击“确定”：
此时会弹出计费窗口，根据服务时间的不同，系统会计算出所需费用。点击“确定”，则生成ID，扣除费用。
选择查询时间为“最近一天”，点击“查询”按钮：
查询到刚才生成的设备ID后，选择此设备ID条目，然后点击“导出”按钮，将此ID保存到本地电脑上：
打开KQD NET Connector，选择“本地”页，点击“通讯设置”按钮：
选择“Ethernet”以太网，点击“查找CPU”按钮，找到设备后，选择设备，点击“确定”按钮：
在“网络信息”右边，点击“写入”按钮，将开始保存的设备ID文件写入设备：
出现以下信息则代表网络ID写入成功：

最后给设备重新上电，让设备载入此设备ID。

上传WebHMI组态数据到服务器

在KQD NET Connector的“本地”页，“系统块”右边，点击“读取”按钮，读取设备信息，方便在账号中导入设备：
此时可能会弹出对话框提示“通讯非预取的接收数据”，这是因为PLC还没有下载过系统块，系统块文件找不到所导致的，点击“确认”关闭此对话框。确认读到了PLC的网络信息即可：
切换回KQD NET Connector的“登录”页，登录到Kqdnet服务器：
点击“添加位置”按钮，添加一个位置“L”；点击“添加路由器”按钮，添加一个路由器“R”；点击“本地设备”按钮，导入本地设备的网络信息；最后点击“确认”按钮：
此时可以看到设备已经通过4G-CAT1模块连接到服务器了。但是服务器端没有WebHMI的组态数据，因此虽然生成了远程访问的Web地址，但是提示“需要上传到服务器”：
切换回KQD NET Connector的“本地”页，在“WebHMI二进制”右边，点击“读取”按钮，读取设备的WebHMI信息：

读取完成后会提示保存文件，这里不保存直接选择取消即可。
在“WebHMI二进制”右边，点击“上传”按钮，将读取设备的WebHMI信息，上传到Kqdnet服务器：