本文通過(guò)STM32接入機(jī)智云,再調(diào)用機(jī)智云WebSocket,實(shí)現(xiàn)了在原有系統(tǒng)上添加添加別踩白塊的物聯(lián)網(wǎng)游戲功能。
得到的效果就是在網(wǎng)頁(yè)上JavaScript 別踩白塊游戲顯示數(shù)據(jù)通過(guò)WebSocket發(fā)送到機(jī)智云控制平臺(tái),然后機(jī)智云下發(fā)到STM32,實(shí)現(xiàn)網(wǎng)頁(yè)游戲顯示與STM32顯示同步。
實(shí)現(xiàn)效果如下:
1、軟硬件準(zhǔn)備
- SmarKit - ESP STM32核心板
- ESP8266(已燒錄Gagent固件)
- 0.96寸的OLED顯示屏(四針,IIC通信)
- 機(jī)智云開(kāi)發(fā)者中心(注冊(cè)賬號(hào))
- 機(jī)智云Websocket Demo
- 別踩白塊游戲JS
2、開(kāi)發(fā)步驟
2.1 編寫STM32硬件程序
在機(jī)智云的協(xié)議頭文件修改自己的設(shè)備信息,這在在機(jī)智云創(chuàng)建設(shè)備后獲取到添加別踩白塊數(shù)據(jù)的宏定義,在這我是使用兩個(gè)uint8_t類型數(shù)據(jù)來(lái)傳輸,因?yàn)轱@示的白塊位置共16個(gè),原本打算用uint16_t傳輸?shù)?,但是需要修改整套的機(jī)智云上傳包格式,所以我就直接拆分兩段數(shù)據(jù)傳輸,宏定義是為了方便后面編程使用: 添加別踩白塊的數(shù)據(jù)到傳輸包結(jié)構(gòu)體: 游戲調(diào)度函數(shù)實(shí)現(xiàn): 游戲計(jì)時(shí)顯示: ? ? ? 機(jī)智云數(shù)據(jù)包獲取后的事件響應(yīng)函數(shù)添加:
2.2 網(wǎng)頁(yè)別踩白塊js與機(jī)智云websocket實(shí)現(xiàn)
具體的實(shí)現(xiàn)就是直接使用機(jī)智云提供的websocket的Demo添加上別踩白塊的JS代碼,實(shí)際的代碼量有點(diǎn)大,這里不詳細(xì)解說(shuō),后續(xù)會(huì)在文末給出整套代碼。
2.3 在機(jī)智云部署產(chǎn)品
首先就是在機(jī)智云創(chuàng)建一個(gè)自己的產(chǎn)品,以此來(lái)獲取 Product Key,這個(gè)是機(jī)智云硬件的入網(wǎng)密匙。添加數(shù)據(jù)節(jié)點(diǎn):
2.4 配置網(wǎng)頁(yè)控制信息
用網(wǎng)頁(yè)控制接入到機(jī)智云的設(shè)備仍需要許多步驟,因?yàn)橐WC設(shè)備安全,就必須實(shí)現(xiàn)用戶與設(shè)備綁定,綁定需要獲取響應(yīng)的密令。具體的用戶與設(shè)備綁定參考機(jī)智云官方的資料:http://docs.gizwits.com/zh-cn/UserManual/UseWebsocket.html配置成功效果如下:
2.5 websocke連接設(shè)備
2.6 測(cè)試物聯(lián)網(wǎng)別踩白塊游戲
3、工程整套源代碼如果有人想要用其他的STM32實(shí)現(xiàn)如此效果,就必須配置好機(jī)智云連接,我是直接使用燒錄好機(jī)智云固件的ESP8266來(lái)實(shí)現(xiàn)的。
-
物聯(lián)網(wǎng)
+關(guān)注
關(guān)注
2899文章
43822瀏覽量
369347 -
STM32
+關(guān)注
關(guān)注
2263文章
10849瀏覽量
353881
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論