收藏官网首页
查看: 1012|回复: 3

机智云WebSocket实现物联网别踩白块游戏

1

主题

2

帖子

42

积分

新手上路

Rank: 1

积分
42
发表于 2018-7-16 11:38:31 | 显示全部楼层 |阅读模式
校园创客福利
本帖最后由 Vitcou 于 2018-7-16 11:40 编辑

       这个物联网小测试是我的课程设计之一,做的是一个在网页上的JS别踩白块的数据传输到STM32上显示,中间使用的到云平台就是机智云,同时我用的硬件就是机智云的SmartKit-ESP核心板,另外还需要的就是一个0.96寸的OLED显示屏。由于OLED必须使用稳定的VCC与GND供电,所以我是有拔一边的排针套来获取GND与VCC排针。把OLED的SCL与SDA插到排针插口,两根杜邦线接VCC与GND就可以了。具体的程序实现我在博客上写的比较清晰:https://www.cnblogs.com/vitcou/p/9307982.html


实现的效果如下:

视频效果:
http://player.youku.com/player.php/sid/XMzcyMzU0NjE0OA==/v.swf
wulianwang.png
发表于 2018-7-16 12:09:21 | 显示全部楼层
本帖最后由 Genius 于 2018-7-16 14:27 编辑

视频打不开~~~~


0、简介
  本人在大学本科最后的一个课程设计,做的比较有趣味,同时最近的物联网逐渐大热,所以分享一下自己的作品设计过程。作品是在机智云最为简单的STM32核心板例程上开展的,使用到的通信协议是机智云写好的机智云连接固件,网页编程也是机智云的WebSocket Demo。本人做的是在原有的核心系统上添加别踩白块的物联网游戏功能。实现效果如下:
                   QQ截图20180716142033.jpg          
得到的效果就是在网页上JavaScript 别踩白块游戏显示数据通过WebSocket发送到机智云控制平台,然后机智云下发到STM32,实现网页游戏显示与STM32显示同步(实际会有一点网络延迟)。

1、实现设备
  1)SmarKit - ESP STM32核心板
  2)机智云平台,注册一个开发者账号
  3)0.96寸的OLED显示屏(四针,IIC通信)
  4)机智云websocket Demo 加上简单的别踩白块游戏JS
    5)烧录好机智云固件的ESP8266 (固件下载地址:https://download.gizwits.com/zh-cn/p/92/94

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

      游戏计时显示
         QQ截图20180716142111.jpg      

      机智云数据包获取后的事件响应函数添加:
      
QQ截图20180716142118.jpg
  2.2 网页别踩白块js与机智云websocket实现
      具体的实现就是直接使用机智云提供的websocket的Demo添加上别踩白块的JS代码,实际的代码量有点大,这里不详细解说,后续会在文末给出整套代码。
   QQ截图20180716142124.jpg
  2.3 在机智云部署产品
  首先就是在机智云创建一个自己的产品,以此来获取 Product Key,这个是机智云硬件的入网密匙。
QQ截图20180716142132.jpg
  添加数据节点:
QQ截图20180716142140.jpg
  2.4 配置网页控制信息
 用网页控制接入到机智云的设备仍需要许多步骤,因为要保证设备安全,就必须实现用户与设备绑定,绑定需要获取响应的密令。具体的用户与设备绑定参考机智云官方的资料:http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html
配置成功效果如下:
QQ截图20180716142154.jpg
  2.5 websocke连接设备
  QQ截图20180716142204.jpg

  2.6 测试物联网别踩白块游戏
QQ截图20180716142213.jpg
3、工程整套源代码
  由于博客园的没有很好的文件分享端口,所以我就使用隔壁CSDN的文件分享:https://download.csdn.net/download/vitcou/10541825

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

QQ截图20180716142124.jpg
1、机智云QQ群: 287087942
机智云爱好者-APP开发群: 599735135
QQ群目前非常活跃,欢迎大家参与进来,交流,讨论,答疑,解惑~~
2、机智云微信公众号: 机智云 gizwits /   机智云智能宠物屋go-kit
关注机智云Gizwits官方公众号随时掌握最新资讯和活动信息

1

主题

2

帖子

42

积分

新手上路

Rank: 1

积分
42
 楼主| 发表于 2018-7-16 12:28:56 | 显示全部楼层

我这是直接点连接就可以打开,可能你要刷新一下就可以的

37

主题

168

帖子

2261

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2261
发表于 2018-7-17 12:23:46 | 显示全部楼层
小伙伴表示惊呆了  原来websocket还能这么玩~~~

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

本版积分规则

加入Q群 返回顶部

© 2011-2017 Gizwits ( 粤ICP备11090211号 )

快速回复 返回顶部 返回列表