iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
自我挑戰組

Micropython x ESP H/W 之三十個錦囊妙計系列 第 29

[錦囊-貳拾玖] 可視化訊號實作 (以ThinkSpeak為例)

  • 分享至 

  • xImage
  •  

可視化訊號對於數字無感的人還蠻好用的, 有顏色跟圖就可以很清楚了解數值的好壞

[實作] 將ESP的信號強度數值傳送到Thinkspeak 後台去做信號可視化處理

實作將分為以下兩個部分:

  • Thinkspeak 端
  • MicroPython x ESP 端

[正文開始]

  1. 申請ThinkSpeak 帳號 (Sign up for ThinkSpeak)
  2. 新建頻道, 從Channels\ My Chaennels
  3. 在New channel 中設定Name, 描述及需要使用到Fields
    https://ithelp.ithome.com.tw/upload/images/20181113/201038245KWQkkaxI8.png

[秘訣] 筆者是設定rssi 及throughput, 後者這次可能不會用到

  1. 設定好後, 進入RSSI channel並切換到API Keys. 提取並記錄Write Key
    https://ithelp.ithome.com.tw/upload/images/20181113/20103824ao1OmlCiR6.png
  2. 切換到MATLAB Visualizations 從面板上的選單Apps
  3. 建立一個新的可視化模板, Template 內選擇 自訂
    https://ithelp.ithome.com.tw/upload/images/20181113/20103824mFj23bm7tF.png
  4. 編寫Matlab code (行為: 讀入數值, 平面圖資料及分析)並儲存
    MatLab 完整程式碼請參考 heatmap.mat

以下僅列出程式碼中需要注意的部分:

* 設定Channel ID, Read_API_Key, Field 數量及編號
strength = thingSpeakRead(CHANNEL_ID, '{CHANNEL ID}',READ_API_KEY,'{READ_API_KEY}',1,'fields',[1]);
* 設定每個裝置在平面圖上的位置
X = [11 450 450 20 60 334 393 139 238 327 443 235 343 457 476]';
Y = [11 11 310 310 393 310 202 162 140 148 151 222 258 294 198]';
picture = imread('XXX.png');

[秘訣] 圖片的部分, ThinkSpeak 網站只能讀取沒有轉址的圖片檔案, 筆者是使用blogspot中插入圖片並直接提取html中的網址的方式, 作法如下:
(1) 到blogspot, 新增草稿, 任意上傳一個圖片 (筆者任意上傳一張圖片)
https://ithelp.ithome.com.tw/upload/images/20181113/20103824orRCalQ4ak.png
(2) 切換到HTML模式, 可以看到圖片網址 (下圖黃色畫線處)
https://ithelp.ithome.com.tw/upload/images/20181113/20103824X82uD7hmFA.png
8. ESP 端, 在main.py 加入下面的code (匯入usocket 模組, 設定ThingSpeak 模板)

try:
    import usocket as socket
except:
    import socket
import ussl as ssl

THINGSPEAK_POST_TEMPLATE = """
POST /update HTTP/1.1
Host: api.thingspeak.com
Connection: close
X-THINGSPEAKAPIKEY: %s
Content-Type: application/x-www-form-urlencoded
Content-Length: %d
%s
"""

API_THINGSPEAK_HOST = 'api.thingspeak.com'
API_THINGSPEAK_PORT = 443
THINGSPEAK_WRITE_KEY = '{YOUR THINGSPEAK_WRITE_KEY}'
  1. 在main.py中加入 sendtoThinkSpeak 自訂模組
def sendto_ThingSpeak(sv):
    s = socket.socket()
    ai = socket.getaddrinfo(API_THINGSPEAK_HOST, API_THINGSPEAK_PORT)
    addr = ai[0][-1]
    s.connect(addr)
    s = ssl.wrap_socket(s)
    data = 'field1=%.2f' % (sv)
    http_data = THINGSPEAK_POST_TEMPLATE % (THINGSPEAK_WRITE_KEY, len(data), data)
    s.write(http_data.encode())
    s.close()
  1. 將 sendto_ThingSpeak(sValue) 模組放在需要被呼叫的地方
    https://ithelp.ithome.com.tw/upload/images/20181113/20103824qsgm5MG7ir.png
    [秘訣] 筆者將這模組放在與其他資料共同上傳的地方
  2. 將main.py 更新到ESP 裝置內
  3. 回到ThingSpeak 網頁, 在剛剛撰寫Matlab code的地方, 拉到最下面會看到
    https://ithelp.ithome.com.tw/upload/images/20181113/20103824AJAqmmBcHf.png
  4. 點下rssi (preview) 字樣後 就會在dashboard 中看到自己新增的heatmap 視圖
    https://ithelp.ithome.com.tw/upload/images/20181113/20103824uiibavfV9s.png

[秘訣] 關於信號強度顏色繪製的部份, 在繪製時需要注意以下幾點:

  1. 以AP 為中心, 信號強度是由內圈往外圈遞減
  2. Sensor 量到的信號強度, 指的是自己從AP端得到的信號強度.
    曾遇到使用者在實作這個實驗的時候, 會以為是要以sensor為中心去繪製每個信號強度的顏色, 這是不對的做法. 這會導致原本應該只有一種彩虹的顏色圈 (假設一輪彩虹的顏色代表強度為 紅到紫 (依序從強到弱遞減) , 變成可能有很多輪的彩虹顏色複疊在一起

上一篇
[錦囊-貳拾捌] MicroPython x ESP 設定之一鍵佈署
下一篇
[錦囊-叁拾] MicroPython 的資源可以去哪找?
系列文
Micropython x ESP H/W 之三十個錦囊妙計31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言