大彩串口屏wifi/以太网应用-米乐网页

本文主要介绍屏幕作为客户端scoket通讯，将分以下2点进行说明：

1. 准备工程素材；

2. 配置串口屏工程；

5.1 准备工程素材

5.1.1 准备工程素材

在实现例程前需要作以下3个准备：

1. 硬件平台；

2. 软件平台；

3. ui素材；

该例程使用大彩物联型7寸串口屏dc48048ew040_1v01_ce4为验证开发平台。如图5-1所示；

图5-1 ew系列7寸串口屏

其他尺寸w型的串口屏均可借鉴此教程。

5.1.2 软件及工具

1. visualtft 上位机软件

使用大彩自主研发的上位机软件visualtft配置工程，登录http://www.gz-dc.com/下载。如图5-2所示；

图5-2  上位机软件

2. netassist 网络调试助手

本例程中，使用netassist 网络调试助手调试工具和屏幕通讯。在本例程压缩包已包含，也可以自行网上下载。如图5-3所示。

图5-3  网络调试助手

5.2 配置工程

本章节主要介绍以下4点：

(1) netassist配置

(2) 工程配置

(3) scoket 屏幕收

(4) scoket 屏幕发

5.2.1 netassist配置

本例程中使用netassist网络调试助手演示，配置如下：

1) 协议类型：tcp server

2) 本地ip地址：根据用户网络为准 

3) 本地端口号：本例程中默认是“8080”

4) 连接对象：根据用户网络为准

5) 打开：打开连接，如图5-4所示：

图5-4  netassist 配置

注意：netassist网络调试助手详细使用教程可在网上查找资料了解

5.2.2 工程配置

在工程属性中，配置网络以下属性：

1) 网络：网卡模式

2) ssid名称：cp(以太网接口可不填)

3) 连接密码：12345678(以太网接口可不填)

4) dhcp：启用

5) 网络服务：服务器

6) 服务端口：8080

属性配置如图5-5所示；

图5-5  wifi配置

5.2.3 修改服务器ip、port

1. 画面配置

在画面id5中，添加两个文本控件（控件id7、控件id13，可弹出键盘输入设置）和一个按钮控件（控件id9），其中控件id7显示“服务器ip”、控件id13显示“端口”。控件id9为按钮按下时获取当前屏幕配置的“服务器ip”和“端口”。如图5-6所示：

图5-6 画面配置

2. lua脚本编辑

本例程中，获取和设置port、server ip的代码如程序清单 1所示：

程序清单 1 修改服务器参数

--用户通过触摸修改控件后，执行此回调函数。
--点击按钮控件，修改文本控件、修改滑动条都会触发此事件。
function on_control_notify(screen,control,value)
    if screen == sc_wifiset
    then
        ......
    elseif screen == sc_tcp
    then
        if control == 3
        then
            ......
        elseif control == 7
        then
            --获取键盘输入的ip
            server_ip = get_text(sc_tcp, 7)
            local wificom = 0
            local mode    = 1
            --修改服务器ip
            set_network_service_cfg(wificom, mode, server_port, server_ip)
            --保存配置
            save_network_cfg()
        elseif control == 9 and value == 0
        then
            --获取服务器ip、端口
            local wificom,mode,port,server_addr=get_network_service_cfg()
            server_ip   = server_addr
            server_port = port
            --显示到相应文本
            set_text(sc_tcp,  7, server_ip)
            set_text(sc_tcp, 13, server_port)
        elseif control == 13
        then
            local wificom = 0
            local mode    = 1
            --获取键盘输入的ip
            server_port   = get_text(sc_tcp, 13)
            --修改服务器端口号
            set_network_service_cfg(wificom, mode, server_port, server_ip)
            --保存配置
            save_network_cfg() 
        end
    end
end

核心api函数

1) set_network_service_cfg(wificom, mode, port, server_addr)

设置网络服务参数

• wificom -默认为0，为1时启用透传模式（即无线串口屏）
• mode -0禁用网络服务，1客户端模式，2服务器模式
• port -服务端口，默认5050
• server_addr -服务器地址，(屏作客户端时)

2) get_network_service_cfg()

    获取网络服务参数，返回4个参数，说明同上

    wificom, mode, port, server_addr = get_network_service_cfg()

基本思路：当按钮控件id9按下的时候，触发触摸控件回调函数on_control_notify()，在调用get_network_service_cfg ()获取当前屏幕的网络服务配置，并显示在id7、id13的文本控件中。当对文本控件id7、id13输入时候，调用set_network_service_cfg()修改配置和保存save_network_cfg()即可。

5.2.4 socket 屏幕收

1. 画面配置

在画面id5中，添加1个文本控件（控件id5），作为显示接收到的服务器数据，配置如图5-7所示：

图5-7 画面配置

2. lua脚本编辑

本例程中，当屏幕接收到服务的数据以16进制的格式显示出来，代码如程序清单 2所示。

程序清单 2 socket 屏幕收

--当客户端socket接收到数据时，系统自动回调此函数。
--接收的字节数组packet，下标从0开始
function on_client_recv_data(packet)
    --用于显示接收服务器的数据
    local client_rec = ‘’
    for i= 0,#(packet) do
        --拼接数据
        client_rec = client_rec .." ".. string.format("x",packet[i])
    end
    --显示数据
    set_text(sc_tcp,5,client_rec)
    --返回1时候，数据不会通过串口发送至用户主板
    return 1
end

核心api函数

1) on_client_recv_data(packet)

    当客户端socket接收到数据时，系统自动回调此函数。

• packet：接收的字节数组packet，下标从0开始

基本思路：当服务器向屏幕发送数据时，屏幕自动回调on_client_recv_data()。本例程中，对接收服务器的数据仅作显示。实际应用中，用户可根据服务器的数据响应不同的动作，如更新文本、设置按钮、进度条、通过串口给mcu动作等等。

5.2.5 socket 屏幕发

1. 画面配置

在画面id5中，添加1个文本控件（控件id3），当用户点击文本控件弹出键盘，并将输入的数据发送至服务器，画面配置如图5-8所示：

图5-8 画面配置

2. lua脚本编辑

本例程中，当获取用户键盘输入值后，以16进制发送到服务器，代码如程序清单 3所示。

程序清单 3 socket 屏幕发

--自定义函数，填充缓冲区并发送
function my_sendtoserver(senddata)
    --发送缓冲区
    local send_buff = {}
    --计算字符串函数
    local send_len  = string.len(senddata)
    for i = 1, send_len 
    do
        --将字符转换成16进制
        send_buff[i - 1] = tonumber(string.byte(senddata, i, i))
    end
    --发送服务器
    client_send_data(send_buff)
end
--用户通过触摸修改控件后，执行此回调函数。
--点击按钮控件，修改文本控件、修改滑动条都会触发此事件。
function on_control_notify(screen,control,value)
    if screen == sc_wifiset
    then
        ......
    elseif screen == sc_tcp
    then
        if control == 3
        then
            --获取键盘输入的数据
            local senddata = get_text(sc_tcp, 3)
            my_sendtoserver(senddata)
        elseif control == 7
        then
            ......
        elseif control == 9 and value == 0
        then
            ......
        elseif control == 13
        then
            ......
        end
    end
end

核心api函数

1) client_send_data(packet)

    通过客户端socket发送报文到服务器

• packet：发送字节数组packet，下标从0开始。

5.3 下载工程

在我司的上层软件visual tft中集成了lua程序的编译器，可以实现在编译工程的同时将lua脚本程序一起编译，并且将编译后的图片和程序集合在一个名为dciot.pkg的文件中。编译后只需要把dciot.pkg文件拷贝到u盘中，插入串口屏并重新上电即可将图片和程序下载到屏中。