调用机智云API,实现网页控制物联网别踩白块游戏在STM32上同步显示

描述

 

本文通过STM32接入机智云,再调用机智云WebSocket,实现了在原有系统上添加添加别踩白块的物联网游戏功能。

 

得到的效果就是在网页上JavaScript 别踩白块游戏显示数据通过WebSocket发送到机智云控制平台,然后机智云下发到STM32,实现网页游戏显示与STM32显示同步。

 

实现效果如下:

STM32

 

 

1、软硬件准备

  • SmarKit - ESP STM32核心板
  • ESP8266(已烧录Gagent固件)
  • 0.96寸的OLED显示屏(四针,IIC通信)
  • 机智云开发者中心(注册账号)
  • 机智云Websocket Demo 
  • 别踩白块游戏JS

2、开发步骤

2.1 编写STM32硬件程序

在机智云的协议头文件修改自己的设备信息,这在在机智云创建设备后获取到    STM32添加别踩白块数据的宏定义,在这我是使用两个uint8_t类型数据来传输,因为显示的白块位置共16个,原本打算用uint16_t传输的,但是需要修改整套的机智云上传包格式,所以我就直接拆分两段数据传输,宏定义是为了方便后面编程使用:    STM32添加别踩白块的数据到传输包结构体:    STM32游戏调度函数实现:   STM32游戏计时显示:             STM32机智云数据包获取后的事件响应函数添加:      STM32

 

2.2 网页别踩白块js与机智云websocket实现

具体的实现就是直接使用机智云提供的websocket的Demo添加上别踩白块的JS代码,实际的代码量有点大,这里不详细解说,后续会在文末给出整套代码。  STM32

 

2.3 在机智云部署产品

首先就是在机智云创建一个自己的产品,以此来获取 Product Key,这个是机智云硬件的入网密匙。添加数据节点:STM32


 

2.4 配置网页控制信息

用网页控制接入到机智云的设备仍需要许多步骤,因为要保证设备安全,就必须实现用户与设备绑定,绑定需要获取响应的密令。具体的用户与设备绑定参考机智云官方的资料:http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html配置成功效果如下:STM32

 

2.5 websocke连接设备

 STM32

 

2.6 测试物联网别踩白块游戏

STM32


 

3、工程整套源代码如果有人想要用其他的STM32实现如此效果,就必须配置好机智云连接,我是直接使用烧录好机智云固件的ESP8266来实现的。

打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分