雨滴智能屏开发教程------window的创建并添加按键控件

往屏幕添加各种控制之前，先创建一个空白的window 页面。

先了解Window 相关属性：

typedef struct {

    const char * Id;

    const char * Width;

    const char * Height;

    const char * Display;

    const char * BackgroundColor;

    const char * BackgroundImage;

}Window;

Window 成员属性含义：

Id ：辨别 window 页面的唯一标识，注意：每个页面的 Id 都是唯一的。

Width ： window 宽度，可这样赋值， Width=”100%” 全屏宽，或Width=”1280px”。

Height ： window 高度，含义和 Width 类似。

Display ：显示状态， Display=”0” 表示页面隐藏不显示，Display=”1”表示页面除以显示状态。

BackgroundColor ： window 页面背景颜色，如配置为白色： BackgroundColor=”#FFFFFF” ，可查看RGB 颜色表。

BackgroundImage ：配置 window 页面背景图片。

定义一个window页面

Window myWindow;

初始化myWindow

void InitWindow(void)

{

    System.Window.InitWindow(&myWindow);// 初始化 myWindow

    myWindow.Id = "myWinId";

    myWindow.Width = "100%";// 配置页面占用整个屏宽高

    myWindow.Height = "100%";

    myWindow.Display = "1";

    myWindow.BackgroundColor = "#FFFFFF";

}

初始化好window 页面之后，我们就可以开始往 window 页面里添加控件了。

创建添加按键控件

Button 相关属性

typedef struct

{

    const char * Id;

    const char * Name;

    const char * Top;

    const char * Left;

    const char * Width;

    const char * Height;

    const char * FontColor;

    const char * FontSize;

    const char * BackgroundColor;

    Window * OpenTargetWindow;

}Button;

部分属性含义

Id ：按键的唯一标识，含义和 window 属性中 Id 一样。往后所介绍到的控件，其属性 Id 都是对应控件的唯一标识。

Name ：按键名字。

Top ：和其属性 Left 一起决定按键控件的位置坐标信息。

FontColor ：我们在屏幕上所看到的按键名 Name 的字体颜色。

FontSize ：按键 Name 的字体大小。

OpenTargetWindow ：可指定按键触发时要跳转到的页面，即关闭隐藏当前页面，打开要显示的另一个页面。通过按键切换页面用到。

示例：

void AddButtonToWindow(void)

{

    Window *tempTargetWindow = &myWindow;

    Button * tempButton = NULL;

    Button open;

    Button close;

    Button add;

    Button subtract;

/* 前面已经初始化 myWindow ，现在是在往 myWindow 添加控制之前，先

*  构建 myWindow 页面。没有这一步，往后是无法成功添加控件的。

*/

    System.Window.CreateWindow(tempTargetWindow );

// 按键控件的属性初始化及配置，最后通过 AddButton 接口往 myWindow 中添加按键控件

    tempButton = &open;

    System.Window.InitButton(tempButton);

    tempButton->Id = "open";

    tempButton->Name = " 输出 PWM 信号 ";

    tempButton->Top = "50px";

    tempButton->Left = "20";// “ px ”可去掉不写

    tempButton->Width = "250";

    tempButton->Height = "100";

    tempButton->FontSize = "30";

    System.Window.AddButton(tempTargetWindow , tempButton);

    tempButton = &close;

    System.Window.InitButton(tempButton);

    tempButton->Id = "close";

    tempButton->Name = " 关闭 PWM 信号 ";

    tempButton->Top = "35";

    tempButton->Left = "300";

    tempButton->Width = "250";

    tempButton->Height = "100";

    tempButton->FontSize = "30";

    System.Window.AddButton(tempTargetWindow , tempButton);

    tempButton = &add;

    System.Window.InitButton(tempButton);

    tempButton->Id = "add";

    tempButton->Name = " 占空比加 ";

    tempButton->Top = "180";

    tempButton->Left = "20";

    tempButton->Width = "250";

    tempButton->Color = "black";//设置字体颜色为黑色，默认是白色

    tempButton->FontSize = "30";

    System.Window.AddButton(tempTargetWindow , tempButton);

    tempButton = &subtract;

    System.Window.InitButton(tempButton);

    tempButton->Id = "subtract";

    tempButton->Name = " 占空比减 ";

    tempButton->Top = "180";

    tempButton->Left = "300";

    tempButton->Width = "250";

    tempButton->Color = "black";

    tempButton->FontSize = "30";

    System.Window.AddButton(tempTargetWindow , tempButton);

/*

    最后一步，在智能屏中显示myWindow 和 myWindow 中刚刚添加的四个按键。

    注意：myWindow.Display = "1" 时我们才能够看到智能屏中成功创建的 myWindow

页面，若myWindow.Display = "0" ，页面是隐藏的。

*/

    System.Window.ShowWindow(tempTargetWindow );

}

UI界面设计好后，在单片机串口中写一解析函数来进行按键事件的响应处理。
static int parseUsartData (char * uartData)
{
    cJSON *json = NULL;
    cJSON *jsonBtnId = NULL;

    json = cJSON_Parse(uartData);
    if (!json)
    {
        return -1;
    }

    jsonBtnId = cJSON_GetObjectItem( json , "id");
    if (jsonBtnId) {
        if (jsonBtnId->type == cJSON_String) {        
            if (!strcmp("open", jsonBtnId->valuestring)) {
              //do something
            }
            ......
        }
    }

    cJSON_Delete(json);
    return 0;
}

编译成bin文件，通过智能屏对单片机进行固件升级后，可得到如下效果

点击屏幕上的按键可以操控单片机作出相应的动作。