前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >搭建简易的物联网服务端和客户端-第三次增补(二十二)

搭建简易的物联网服务端和客户端-第三次增补(二十二)

作者头像
治电小白菜
发布2020-08-25 14:20:41
6290
发布2020-08-25 14:20:41
举报
文章被收录于专栏:技术综合技术综合

记得上次Maibu显示的时候,我无法吧数据单独显示出来,最后只能把数据全放到一起,通过api提供出来,像这样{"data":"32 在 60"} 很无奈。不过经过Maibu控制的相关操作之后,就大概了解的怎么搞,所以这次增补就是数据分离开来,这样对于手表表盘的布局也有一定的好处。 代码地址:https://github.com/ZZES-ZVD/watch_pet 2017.5.21

搭建简易的物联网服务端和客户端目录

第三次增补

1.Nodejs接口

api提供新的json格式数据{ "tem":28,"hum":55,"indoor":"不在" },方便Maibu的数据过滤显示。其余代码就不显示了,具体可以看完整代码

代码语言:javascript
复制
//new 手表推送
app.get('/newwatch',function(req,res){
    var data = [];
    conn.query('SELECT * FROM pet',function(err,rows,fields){
        var indoor = "";
        //将数字1和0,转换成“在”和“不在”
        if ( rows[rows.length-1].indoor== 1) {
            indoor = "在"
        }else{
            indoor = "不在"
        }
        //封装数据
        data = "{ \"tem\":"+  rows[rows.length-1].tem  +",\"hum\":"+  rows[rows.length-1].hum  +",\"indoor\":"+ "\""+   indoor +"\" }"
        res.send(data);
    })
})

2.手表代码

(1)定义数据内容图层

代码语言:javascript
复制
//温度数据内容
static int32_t g_layer_id_temdata = -1;
//湿度数据内容
static int32_t g_layer_id_humdata = -1;
//屋内判断数据内容
static int32_t g_layer_id_indoordata = -1;

(2)数据请求函数

代码语言:javascript
复制
void data_request_web()
{
    /*拼接url请求地址, 注意url的缓存大小*/
    char url[200] = "";
    /*将请求网址加入到url数组*/
    sprintf(url, "%s", DATA_WEB);       
    char param[50] = "";
    /*将数据过滤后加入到param数组*/
    sprintf(param,"%s,%s,%s","tem","hum","indoor");
    /*发送一次*/
    g_comm_id_web = maibu_comm_request_web(url, param, 0);//过滤
}

(3)图层初始化函数

代码语言:javascript
复制
P_Window init_btc_window()
{

    static P_Window p_window;
    P_Layer layer_background = NULL;   
    p_window = app_window_create();
    if (NULL == p_window)
    {
        return NULL;
    }
    /* begin*/    
    /*创建背景图层*/
    layer_background = get_layer();

    /*添加背景图层到窗口*/
    app_window_add_layer(p_window, layer_background);

    /* 添加时间栏 */
    add_time_bar(p_window);
 
    /*添加数据提示信息*/
    GRect frame_zzes = {{0,34}, {16, 128}};
    add_text_layer(p_window, &g_layer_id_zzes, "治电科技", &frame_zzes, GAlignBottom, U_ASCII_ARIAL_16, GColorWhite);
        
    /*添加温度数据*/
    GRect frame_temdata = {{25, 62}, {16, 50}};
    add_text_layer(p_window, &g_layer_id_temdata, "waiting", &frame_temdata, GAlignCenter, U_ASCII_ARIAL_14, GColorWhite);
    
    /*添加湿度数据*/
    GRect frame_humdata = {{25, 83}, {16, 50}};
    add_text_layer(p_window, &g_layer_id_humdata, "waiting", &frame_humdata, GAlignCenter, U_ASCII_ARIAL_14, GColorWhite);
    
    /*添加窝内数据*/
    GRect frame_indoordata = {{25, 103}, {16, 50}};
    add_text_layer(p_window, &g_layer_id_indoordata, "waiting", &frame_indoordata, GAlignCenter, U_ASCII_ARIAL_14, GColorWhite);

    return p_window;
}

(4)请求回调,用于更新数据到图层(这就是这次我的重点。。。)

代码语言:javascript
复制
static void web_recv_callback(const uint8_t *buff, uint16_t size)
{
    char stock_gid[10];
    char stock_gid2[10];
    char stock_gid3[10];

    char i;

    maibu_get_json_str(buff,"indoor", stock_gid, 10);//过滤
    maibu_get_json_str(buff,"tem", stock_gid2, 10);
    maibu_get_json_str(buff,"hum", stock_gid3, 10);
    for (i=0;i<10;i++)
    {
    if (stock_gid[i]=='}')
        {
            stock_gid[i]=0;
        }
    }
    for (i=0;i<10;i++)
    {
    if (stock_gid2[i]=='}')
        {
            stock_gid2[i]=0;
        }
    }
    for (i=0;i<10;i++)
    {
    if (stock_gid3[i]=='}')
        {
            stock_gid3[i]=0;
        }
    }
    /*添加数据*/
    GRect frame_indoordata = {{25, 103}, {16, 50}};
    add_text_layer(h_window, &g_layer_id_indoordata, stock_gid, &frame_indoordata, GAlignCenter, U_ASCII_ARIAL_14, GColorWhite);
    GRect frame_temdata = {{25, 62}, {16, 50}};
    add_text_layer(h_window, &g_layer_id_temdata, stock_gid2,&frame_temdata, GAlignCenter,U_ASCII_ARIAL_14,GColorWhite);
    GRect frame_humdata = {{25, 83}, {16, 50}};
    add_text_layer(h_window, &g_layer_id_humdata, stock_gid3,&frame_humdata, GAlignCenter,U_ASCII_ARIAL_14,GColorWhite);
    app_window_update(h_window);
}

3.显示结果

(1)模拟器显示

模拟器

(2)Maibu实体显示

Maibu实体

@治电小白菜20170521

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第三次增补
    • 1.Nodejs接口
      • 2.手表代码
        • 3.显示结果
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档