【中秋节直播啦】巧借阿里云物联网平台的免费连接,从微信小程序颜色采集控制 esp8266 输出七彩灯效果!
收藏

一、前言;

         我近乎2个月没更新 8266 工程代码了,确实在做一些与硬件端无关的工作,在做前端开发工程师的工作,在做一个共享类的蓝牙功能的微信小程序。现在做好了,抽出半天时间做一个小项目并分享给大家使用教程;

         微信小程序我敢说是目前很火的,涉及到领域太多了,很多客户都是想做这个,因为大大节省成本和时间;

         最近在看 github 无意中看到了 在微信小程序实现颜色采集器效果,于是乎想通过这种绚丽的效果控制esp8266控制七彩灯,动下手指,一个下午就搞出来了;

         但是,写文档的时间远远大于我开发时间,不得不说,写博客是个 技术活,需要耐心!!!


二、准备材料;

  1. 服务器端:我不再像我之前那个连接百度云物联网了(之前出过一篇文章),因为有人照我教程写了许多文章出来;我这里采用是 阿里云物联网平台,不用给钱那种哦!

  2. 设备端:乐鑫esp8266模块一个,我建议是开发板一个,以及一个 ws2812 模块;

  3. 微信端:请自行注册微信小程序账户,直接扔进我写好的代码就好了;


三、实现原理;

         我没有说我是个大神,前几个月有人喷我不要不要的,我个人较为念旧;实现的原理,我会竭尽全力去阐述,因为大家意见都不可能不一样!有错误的,请留言或加群讨论!

         咳咳,下面开始说重点了:

         在微信小程序端实现控制 esp8266 我是从 2018年开始研究了,过程中主要是服务器难搭建,那时候 阿里云物联网或者百度天工,都是不支持 微信小程序 websocket 连接的,所以无法借助成熟的物联网平台开发;

         因此,那时候我写了一篇博客,专门自己搭建 mqtt 服务器 让微信小程序 websocket 连接,主要是代理 443 端口;

https://blog.csdn.net/xh870189248/article/details/84070944

         很幸运,今年的2月份左右,阿里云物联网或者百度天工相继支持了微信小程序 websocket 连接 443 端口 支持 MQTT 协议 ;所以,过程如下图:

  1. 微信小程序前端采集颜色,得到 rgb 三个数值,上报给阿里云服务器;

  2. 阿里云服务器设置 规则引擎,把微信小程序前端采集颜色数据转发到设备端;

  3. 设备端连接阿里云服务器,收到服务器数据并且解析作出对应端动作;


 {
   "cmd":"set",
   "data": [ 249 , 2 , 2 ]
 }
通讯协议说明
data[0]红色数值
data[1]绿色数值
data[2]蓝色数值



Banner




四、服务器操作过程;

  • 先新建产品时候,注意 数据格式一定是自定义/透传,而我自定义2个主题,用来通讯,然后自行创建这个产品的2个设备!!


在这里插入图片描述


  • 关键一步:设置消息引擎,设置为设备间通讯,先设置要处理的消息来源,下面就是把 deviceName 为 rgb2812 的设备上报的数据为来源;


在这里插入图片描述


  • 同时别忘了,要设置转发数据的目的地,下面指定是 deviceName 为 rgb_esp8266 的客户端为收到数据 :


在这里插入图片描述


三、微信端操作过程;

  • 微信小程序连接阿里云物联网的示范代码我在今年五月份已经更新上去了,只需要三元组就可以链接啦,随便贴下地址:

    https://github.com/xuhongv/WeChatMiniEsp8266

  • 连接之后就是控制的逻辑,主要发布的主题必须是在阿里云物联网上定义好的,否则发布失败或者设备端收不到的尴尬!

  • 选择器触发事件控制:

   //选择改色时触发(在左侧色盘触摸或者切换右侧色相条)
   onChangeColor(e) {
        //返回的信息在e.detail.colorData中
        let getColor = e.detail.colorData.pickerData;
        console.log('红色', (getColor.red))
        console.log('绿色', (getColor.green))
        console.log('蓝色', (getColor.blue))
        that.sendCommond('set', [(getColor.red), (getColor.green), (getColor.blue)]);
    }
  • 开灯按钮事件控制:

 onClickOpen() {
      that.sendCommond('set', [02550]);
    },
  • 关灯按钮事件控制:

 onClickOpen() {
     that.sendCommond('set', [000]);
    },

  • 最后一点尤其注意,设置合法域名:不检验就好;如果看不下去,自己去后台添加这个阿里域名;

    在这里插入图片描述

四、设备端操作过程;

  • 一开始我是驱动 ws2812 的,因为我之前也有文章介绍,都是现成的代码:

https://blog.csdn.net/xh870189248/article/details/93518975
  1. 过程:

    • 初始化外设 ws2812(未连接路由器是红灯,连接成功路由器是绿灯);

    • 连接指定的路由器,成功后,通过给定的三元组组成 mqtt 连接的账号密码,再去连接阿里云物联网服务器;

    • 成功连接阿里云物联网服务器后,订阅指定主题,等待服务器下发数据;


  • 我宏定义下阿里云给的三元组等信息;

char productKey[] = {"a1o3SXAACTs"};                        //阿里云连接的三元组 ,请自己替代为自己的产品信息!!
char deviceName[] = {"rgb_esp8266"};                        //阿里云连接的三元组 ,请自己替代为自己的产品信息!!
char deviceSecret[] = {"0uyLBfxAItzbwOURw2aMXVwasc5FT5Np"}; //阿里云连接的三元组 ,请自己替代为自己的产品信息!!
char regionId[] = {"cn-shanghai"};                          // 阿里云连接的三元组 ,请自己替代为自己的产品信息 !!

#define MQTT_DATA_PUBLISH "/a1o3SXAACTs/rgb_esp8266/user/pub" //发布的主题
#define MQTT_DATA_SUBLISH "/a1o3SXAACTs/rgb_esp8266/user/sub" //订阅的主题
  • 生成 mqtt 连接的参数以及连接服务器;

void TaskXMqttRecieve(void *p)
{

    char BorkerHost[50];
    sprintf(BorkerHost, "%s.iot-as-mqtt.%s.aliyuncs.com", productKey, regionId);
    char UserName[50];
    sprintf(UserName, "%s&%s", deviceName, productKey);
    char ClientId[90];
    char messageSerect[200];
    sprintf(messageSerect, "clientId%02x:%02x:%02x:%02x:%02x:%02xdeviceName%sproductKey%stimestamp1995", mac[0], mac[1], mac[2], mac[3], mac[4], mac[5], deviceName, productKey);
    sprintf(ClientId, "%02x:%02x:%02x:%02x:%02x:%02x|securemode=3,signmethod=hmacmd5,timestamp=1995|", mac[0], mac[1], mac[2], mac[3], mac[4], mac[5]);

    char PassWord[80];
    HMAC_XH_MD5((uint8_t *)messageSerect, strlen(messageSerect), (uint8_t *)(deviceSecret), PassWord);

    ESP_LOGI(TAG, "BorkerHost: %s", BorkerHost);
    ESP_LOGI(TAG, "UserName: %s", UserName);
    ESP_LOGI(TAG, "PassWord: %s", PassWord);
    ESP_LOGI(TAG, "ClientId: %s", ClientId);

    //连接的配置参数
    esp_mqtt_client_config_t mqtt_cfg = {
        .host = BorkerHost,
        .username = UserName,
        .password = PassWord,
        .client_id = ClientId,
        .port = 1883,                       //端口
        .event_handle = MqttCloudsCallBack, //设置回调函数
        .keepalive = 200,
        .disable_auto_reconnect = false//开启自动重连
        .disable_clean_session = false,  //开启 清除会话
    };

    ESP_LOGI(TAG, "TaskXMqttRecieve mqtt_cfg.host %s", mqtt_cfg.host);
    ESP_LOGI(TAG, "TaskXMqttRecieve mqtt_cfg.username %s", mqtt_cfg.username);
    ESP_LOGI(TAG, "TaskXMqttRecieve mqtt_cfg.client_id %s", mqtt_cfg.client_id);
    ESP_LOGI(TAG, "TaskXMqttRecieve mqtt_cfg.messageSerect %s", messageSerect);

    esp_mqtt_client_handle_t client = esp_mqtt_client_init(&mqtt_cfg);
    esp_err_t error = esp_mqtt_client_start(client);

    vTaskDelete(NULL);
}

  • 程序内,不做配网流程,直接写死路由器连接:

/**
 * @description:   wifi指定的路由器初始化
 * @param {type} 
 * @return: 
 */

static void initialise_wifi(void)
{
    tcpip_adapter_init();

    ESP_ERROR_CHECK(esp_event_loop_init(event_handler, NULL));
    wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();
    ESP_ERROR_CHECK(esp_wifi_init(&cfg));
    ESP_ERROR_CHECK(esp_wifi_set_storage(WIFI_STORAGE_RAM));
    wifi_config_t wifi_config = {
        .sta = {
            .ssid = "MZX5L",          //路由器名字
            .password = "mzx@123456"//路由器密码
        },
    };
    ESP_LOGI(TAG, "Setting WiFi configuration SSID %s...", wifi_config.sta.ssid);
    ESP_LOGI(TAG, "Setting WiFi configuration password %s...", wifi_config.sta.password);
    ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));
    ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config));
    ESP_ERROR_CHECK(esp_wifi_start()); //开始连接
}

  • 根据前面的协议,我们解析这个数据并且驱动 ws2812 ;

        ////首先整体判断是否为一个json格式的数据
        cJSON *pJsonRoot = cJSON_Parse(event->data);

        //如果是否json格式数据
        if (pJsonRoot == NULL)
        {
            break;
        }
        cJSON *pCMD = cJSON_GetObjectItem(pJsonRoot, "cmd");
        cJSON *pValue = cJSON_GetObjectItem(pJsonRoot, "data");
        //判断字段是否pChange格式
        if (pCMD && pValue)
        {
            ESP_LOGI(TAG, "xQueueReceive topic: %s ", event->topic);
            ESP_LOGI(TAG, "xQueueReceive payload: %s", event->data);
            ESP_LOGI(TAG, "esp_get_free_heap_size : %d \n", esp_get_free_heap_size());

            //判断字段是否数组类型
            if (cJSON_IsArray(pValue))
                printf("get pChange:%s \n", pCMD->valuestring);
            else
                break;

            ws2812_setColor(cJSON_GetArrayItem(pValue, 0)->valueint, cJSON_GetArrayItem(pValue, 1)->valueint, cJSON_GetArrayItem(pValue, 2)->valueint);
            //post_data_to_clouds();
        }
        else
            printf("get pCMD failed \n");
        cJSON_Delete(pJsonRoot);

 五、好消息;

  • 去年在b站直播的微信小程序控制8266的视频,还是有很多人看,再过几天中秋节了,小徐不回家,呜呜!准备搞个直播微信小程序控制8266,内容就是本篇的博客;

  • 直播时间:2019年9月13号 中秋节当晚 7:30 到 9:30

  • 直播间:阅读原文,找到最下面的二维码加钉钉群即可!

  • 直播内容:

  • 微信小程序的基本使用,如何使用mqtt协议在微信小程序上;

  • 如何使用阿里云物联网来做mqtt服务器;

  • esp8266如何连接阿里云物联网,如何处理数据并且驱动 ws2812;

  • 过程中,欢迎大家提问!!!

  • 观看直播的小伙伴,赠送本博文里面的源码,包括 微信小程序端和硬件esp8266端源码

  • 助物联网发展,欢迎大家一起加群讨论哦!喷子的请不要加了!!

本人作品



    


   我是一名热爱分享的全栈程序员,熟悉Android 、前端JavaScript微信小程序、php服务器开发以及嵌入式智能硬件编程。

   作为一个 esp8266 开发老司机的我,做过很多 esp8266的项目,比较商业化的有接入阿里智能生活平台、天猫精灵linkkitapp、苏宁智能平台以及京东微联智能平台,以及做过一些小项目esp8266 驱动红外线、七彩灯以及一些数码管,个人觉得,对esp8266 开发颇有一番见解。所以,本微信公众号输入“8266文档”获取我平时汇总的最最常见的开发问题,帮助大家跳过开发这款芯片的那些坑!

    也在GitHub开源了esp8266、esp32、微信小程序控制硬件、服务器airkiss配网等物联网代码工程,欢迎 star !助国内物联网发展一臂之力!


Email: xuhongv@yeah.net

GitHub: https://github.com/xuhongv

CSDN: http://blog.csdn.net/xh870189248

小徐专属QQ讨论群,资源多多:  434878850 



长按关注,干货推送!

您的打赏,是我不断创作的动力!

 


    公众号
    关注公众号订阅更多技术干货!