WLE | NPC | 创造力: | 帖子: | 发消息 | 串个门 | 加好友 | 打招呼
2020-11-26 09:24:17 [显示全部楼层]
7594浏览
查看: 7594|回复: 6

从阿里云下发字符在ESP32墨水屏上显示

[复制链接]
简介:
这是一款集成了ESP32开发板的2.13寸墨水屏内置WiFi与蓝牙功能可实现与阿里云连接远程控制显示,支持IO端口控制其他设备,节省开发成本。这款墨水屏可以黑白形式显示图片(图案和中文)与英文字符,显示清晰,断电后可保持显示最后一屏内容,具有功耗低,视角宽等特点。
墨水屏的分辨率为250*122很适合静态图形文字显示,可用于超市价格标签、胸牌、留言板等,连接WiFi后可做成从网络获取时间的日历台、电子时钟、天气预报显示等。


1、注册并登陆阿里云账号

    打开谷歌浏览器,输入网址https://iot.aliyun.com进入阿里云IoT 界面,如下图 所示,点击登陆,在密码登陆栏点击免费注册,进入阿里云账号注册界面(若已有账号可直接登陆),如下图 所示,按要求完成注册即可。

从阿里云下发字符在ESP32墨水屏上显示图1
从阿里云下发字符在ESP32墨水屏上显示图2
2、实名认证

     第一次使用,需进行实名认证,在注册完成后,会弹出实名注册的页面。根据提示操作完成认证即可。

从阿里云下发字符在ESP32墨水屏上显示图3
3、开通物联网服务

当我们实名认证成功后,是没有服务的。所以我们需要自己开通物联网服务。
1, 点击首页的菜单键。
2, 点击”产品和服务”选项。
3, 选择”物联网 IOT”选择。
4, 点击”物联网平台”。
从阿里云下发字符在ESP32墨水屏上显示图4

选择开通物联网服务,按照提示步骤进行操作,直到提示服务开通成功。

4、登陆物联网平台控制台

物联网平台是阿里云 IoT 的控制台,阿里云上有关物联网的操作,都必须在该平进行,如本教程中提到的产品创建、设备添加、服务创建等,都需要在该控制台上进行。 打开谷歌浏览器,输入网址https://iot.aliyun.com并登录。登录成功后,点击控制台,如下图所示

从阿里云下发字符在ESP32墨水屏上显示图5

进入物联网设备接入页面,点击管理控制台(注:若是第一次进入该页面,应该是立即开通,根据要求开通即可,是免费的),进入物联网平台控制台如下图所示

从阿里云下发字符在ESP32墨水屏上显示图6
5、使用物联网平台

创建产品
登录并进入物联网平台控制台(可参考上文),在左侧导航栏选择设备管理->产品,单击创建产品,弹出“新建产品”提示框,如下图 所示:

从阿里云下发字符在ESP32墨水屏上显示图7

按照页面提示,填写信息,创建一个名为水屏ESP32显示的产品,单击保存。产品创建完成后,会自动出现在产品列表中。

从阿里云下发字符在ESP32墨水屏上显示图8

接下来为产品定义相应的功能。点击查看产品详情进入产品详情页

从阿里云下发字符在ESP32墨水屏上显示图9

点击功能定义->编辑草稿->添加自定义功能,按下图填写(注:要留意产品标识符),点击确认

从阿里云下发字符在ESP32墨水屏上显示图10

功能添加完成后,点击发布上线 直接勾选确认已查看当前版本与线上版本的后点击确定

从阿里云下发字符在ESP32墨水屏上显示图11

功能定义里就会出现刚刚创建的功能

从阿里云下发字符在ESP32墨水屏上显示图12
创建设备
在左侧导航栏选择设备管理->设备,单击添加设备,选择刚刚创建的产品。选择后,新建的设备将继承该产品定义好的功能和特性。填入 DeviceName。如果不填,系统将自动生成,用以标识设备(用于标识同一产品下的多个设备)。

从阿里云下发字符在ESP32墨水屏上显示图13
点击确认然后点击完成,完成设备创建。
从阿里云下发字符在ESP32墨水屏上显示图46
点击查看设备证书:
从阿里云下发字符在ESP32墨水屏上显示图47

从阿里云下发字符在ESP32墨水屏上显示图14

你可以查看、复制设备证书信息。设备证书又名设备三元组,由设备ProductKey、DeviceName、和DeviceSecret 组成,是设备与物联网平台进行通信的重要身份认证,建议您妥善保管。
ProductKey:物联网平台为您创建的产品颁发的全局唯一标识符。
DeviceName:设备在产品内的唯一标识符,用于设备认证和通信。
DeviceSecret:物联网平台为设备颁发的设备秘钥,用于认证加密,需与DeviceName 成对使用。
Web可视化开发应用
在左侧导航栏选择loT Studio->项目管理,单击新建项目
从阿里云下发字符在ESP32墨水屏上显示图15

单击新建空白项目然后填写名称点击确认,点击确认后会自己跳转到开发页面。
从阿里云下发字符在ESP32墨水屏上显示图16

在左侧导航栏选择产品点击关联物联网平台产品勾选之前创建的产品勾选关联产品同时关联其下所有设备点击确定
从阿里云下发字符在ESP32墨水屏上显示图17
关联后产品和设备中会出现之前创建的产品与设备
从阿里云下发字符在ESP32墨水屏上显示图18
从阿里云下发字符在ESP32墨水屏上显示图19
在左侧导航栏选择主页,依次点击Web应用新建。填写应用名称,点击确定
从阿里云下发字符在ESP32墨水屏上显示图20
在左侧导航栏选择组件找到文本框并放在编辑页面上调整好大小和位置,将右侧字符数限制改为95
从阿里云下发字符在ESP32墨水屏上显示图21
选中文本框,点击右侧的交互->新增交互
从阿里云下发字符在ESP32墨水屏上显示图22
如下图设置
从阿里云下发字符在ESP32墨水屏上显示图23
点击配置设备,产品选择之前创建的产品指定设备为之前创建的设备属性选择之前创建的功能参数来源选择如下图所示,点击保存
从阿里云下发字符在ESP32墨水屏上显示图24

点击发布,之后确定
从阿里云下发字符在ESP32墨水屏上显示图25
根据自己需要绑定域名,如不绑定直接点击确认
从阿里云下发字符在ESP32墨水屏上显示图26
回到物联网平台可以在loT Studio->应用开发下看到做好的Wed应用与发布地址,点击发布地址可进入控制页面
从阿里云下发字符在ESP32墨水屏上显示图27
从阿里云下发字符在ESP32墨水屏上显示图28
6、修改代码
在开始修改程序之前你需要看一看ESP32墨水屏的Wiki 安装好开发板的板卡驱动包和使用墨水屏所需要的库文件
另外你还需要以下4个库才可以连接阿里云
如何安装库文件,点击链接

[mw_shl_code=cpp,false]#include <WiFi.h>
#include <PubSubClient.h>
#include <ArduinoJson.h>
#include "DFRobot_Aliyun.h"

#define BEDROOD_LIGHT  21

/*配置WIFI名和密码*/
const char * WIFI_SSID     = "*******";
const char * WIFI_PASSWORD = "*******";

/*配置设备证书信息*/
String ProductKey = "*******";
String ClientId = "12345";/*自定义ID*/
String DeviceName = "*******";
String DeviceSecret = "*******";

/*配置域名和端口号*/
String ALIYUN_SERVER = "iot-as-mqtt.cn-shanghai.aliyuncs.com";
uint16_t PORT = 1883;

/*需要操作的产品标识符*/
char * Identifier = "*******";

/*需要上报和订阅的两个TOPIC*/
const char * subTopic = "****************************";//****set
const char * pubTopic = "****************************";//******post

DFRobot_Aliyun myAliyun;
WiFiClient espClient;
PubSubClient client(espClient);


#include <GxEPD.h>
#include "SD.h"
#include "SPI.h"


//  由于屏幕有多个版本,如下载程序后出现花屏请将下面3个头文件都测试一遍!
//#include <GxGDE0213B1/GxGDE0213B1.h>      // 2.13" b/w
#include <GxGDEH0213B72/GxGDEH0213B72.h>  // 2.13" b/w new panel
//#include <GxGDEH0213B73/GxGDEH0213B73.h>  // 2.13" b/w newer panel


#include <Fonts/FreeMonoBold12pt7b.h>


#include <GxIO/GxIO_SPI/GxIO_SPI.h>
#include <GxIO/GxIO.h>

#define SPI_MOSI 23
#define SPI_MISO -1
#define SPI_CLK 18

#define ELINK_SS 5
#define ELINK_BUSY 4
#define ELINK_RESET 16
#define ELINK_DC 17

#define SDCARD_SS 13
#define SDCARD_CLK 14
#define SDCARD_MOSI 15
#define SDCARD_MISO 2

#define BUTTON_PIN 39


GxIO_Class io(SPI, /*CS=5*/ ELINK_SS, /*DC=*/ ELINK_DC, /*RST=*/ ELINK_RESET);
GxEPD_Class display(io, /*RST=*/ ELINK_RESET, /*BUSY=*/ ELINK_BUSY);

SPIClass sdSPI(VSPI);

bool sdOK = false;


void connectWiFi(){
  Serial.print("Connecting to ");
  Serial.println(WIFI_SSID);
  WiFi.begin(WIFI_SSID,WIFI_PASSWORD);
  while(WiFi.status() != WL_CONNECTED){
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.println("WiFi connected");
  Serial.print("IP Adderss: ");
  Serial.println(WiFi.localIP());
}


void callback(char * topic, byte * payload, unsigned int len){
  Serial.print("Recevice [");
  Serial.print(topic);
  Serial.print("] ");
  char buffer[len]={0};
  for (int i = 0; i < len; i++){
    buffer=payload;
  }
  Serial.println(buffer);
  char *p= buffer;
  int leng= (strstr(p,Identifier) - p)+(strlen(Identifier) + 3);
  //Serial.println(buffer[leng]);
  char LightStatus[100]={0};
  for(int i = 0; buffer[i + leng] != '"' ;i++){
    LightStatus = buffer[i + leng];
  }
  //Serial.println(LightStatus);
  display.fillScreen(GxEPD_WHITE);
  display.setCursor(0,17);
  display.println(LightStatus);
  display.update();
}

void ConnectAliyun(){
  while(!client.connected()){
    Serial.print("Attempting MQTT connection...");
    /*根据自动计算的用户名和密码连接到Alinyun的设备,不需要更改*/
    if(client.connect(myAliyun.client_id,myAliyun.username,myAliyun.password)){
      Serial.println("connected");
      client.subscribe(subTopic);
    }else{
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      delay(5000);
    }
  }
}
void setup(){
  Serial.begin(115200);
  pinMode(BEDROOD_LIGHT,OUTPUT);
  
  /*连接WIFI*/
  connectWiFi();
  
  /*初始化Alinyun的配置,可自动计算用户名和密码*/
  myAliyun.init(ALIYUN_SERVER,ProductKey,ClientId,DeviceName,DeviceSecret);
  
  client.setServer(myAliyun.mqtt_server,PORT);
  
  /*设置回调函数,当收到订阅信息时会执行回调函数*/
  client.setCallback(callback);
  
  /*连接到Aliyun*/
  ConnectAliyun();

  SPI.begin(SPI_CLK, SPI_MISO, SPI_MOSI, ELINK_SS);
  display.init(); // enable diagnostic output on Serial

  display.setRotation(1);
  display.fillScreen(GxEPD_WHITE);
  display.setTextColor(GxEPD_BLACK);
  display.setFont(&FreeMonoBold12pt7b);
  display.setCursor(0, 0);

  sdSPI.begin(SDCARD_CLK, SDCARD_MISO, SDCARD_MOSI, SDCARD_SS);

  if(!SD.begin(SDCARD_SS, sdSPI)) {
    sdOK = false;
  } else {
    sdOK = true;
  }

  display.update();
  
}

void loop(){
  if(!client.connected()){
    ConnectAliyun();
  }
  client.loop();
}[/mw_shl_code]

这里分别填写你的WiFi名称和密码
从阿里云下发字符在ESP32墨水屏上显示图29
ProductKey、DeviceName、DeviceSecret在设备管理->设备,在设备列表中找到我们刚才创建的设备,单击其后的 查看
从阿里云下发字符在ESP32墨水屏上显示图33
在详细页面点击DeviceSecret后面的查看即可看到ProductKey、DeviceName、DeviceSecret,复制下来填写到代码中对应的位置
从阿里云下发字符在ESP32墨水屏上显示图34
从阿里云下发字符在ESP32墨水屏上显示图35
设备上报和订阅信息,进入产品详情页,点击 Topic列表,即可看到设备的发布和订阅信息,如下图所示:
从阿里云下发字符在ESP32墨水屏上显示图36
从阿里云下发字符在ESP32墨水屏上显示图37
复制到对应的位置(注意:后缀要对应
从阿里云下发字符在ESP32墨水屏上显示图38
产品标识符。在左侧导航栏选择产品在产品列表中找到对应的产品,单击 查看
从阿里云下发字符在ESP32墨水屏上显示图39
选择功能定义即可查看
从阿里云下发字符在ESP32墨水屏上显示图40
从阿里云下发字符在ESP32墨水屏上显示图41
将代码改好后下载到ESP32墨水屏即可通过loT Studio->应用开发下点击发布地址可进入控制页面
从阿里云下发字符在ESP32墨水屏上显示图42
从阿里云下发字符在ESP32墨水屏上显示图43
在控制页面输入字符后点击空白区域即可更新ESP32墨水屏的显示了,最多可以显示95个英文字符
从阿里云下发字符在ESP32墨水屏上显示图45
从阿里云下发字符在ESP32墨水屏上显示图44

wery  学徒

发表于 2020-12-1 19:23:35

感谢,步骤很详细
回复

使用道具 举报

WLE  NPC
 楼主|

发表于 2020-12-2 10:05:39

wery 发表于 2020-12-1 19:23
感谢,步骤很详细

感谢评价
回复

使用道具 举报

TuTu  高级技师

发表于 2020-12-9 11:22:25

哇好详细的教程~!
回复

使用道具 举报

郭幸君  学徒

发表于 2020-12-11 09:35:05

学习了,感觉好高级
回复

使用道具 举报

redx  见习技师

发表于 2021-1-2 20:11:07

尝试了一下,很详细,很高级
回复

使用道具 举报

qiebona  学徒

发表于 2021-6-23 18:51:55

本帖最后由 qiebona 于 2021-6-23 18:55 编辑

代码编译这里一直出错是怎么回事?望指教!谢谢!
WedJune-202106234318..png
WedJune-202106239004..png
WedJune-202106231617..png
WedJune-202106234240..png
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail