Arduino中文社區

標題: Blynk與m5stack basic以及uiflow的交互玩法 [打印本頁]

作者: 滄海笑1122    時間: 2019-11-21 23:34
標題: Blynk與m5stack basic以及uiflow的交互玩法
本帖最后由 滄海笑1122 于 2019-11-21 23:58 編輯

Blynk與m5stack basic以及uiflow的交互玩法

[準備工作
我們假設玩家已經熟悉下面的準備工作,未明了部分,請查閱網絡相關教程。
1、安裝blynk本地服務器。我用的是一片樹莓派3B搭建了一個blynk本地server
2、加上了花生殼內網穿透,花了6元購買了一個內網穿透服務,獲取了一個免費的由系統自行分配的域名。映射了兩個端口,一個為手機訪問blynk server,并一個為esp32訪問blynk server
(, 下載次數: 25)
【硬件準備】
1、m5stack basic一塊
2、Led多彩模塊 2片(自帶多彩led以及限流電阻)
3、手機一部 (安裝blynk APP)
【軟件準備】
1、blynk python庫,本帖使用Micropython進行開發,arduino玩法請參考我的其他教程
2、為m5stack刷上了uiflow固件(1.4.2
3vscode+m5stack micropython插件
4、將blynklib.py   blynktimer.py傳送至m5stack
注意,要將blynklib.py當中的server設置改成你的本地server以及端口
(, 下載次數: 23)
【開始blynkm5stack以及uiflow的交互玩法
玩法一:
使用uiflow設計ui,然后在vscode當中進行編程,調試。
我們實現了一個簡單的blynk交互:在blynk app上設計了兩個按鈕,點擊時,激活v2/v6兩個虛擬pin,點擊后,將結果傳送至m5stack端,解析后,驅動兩個led進行閃亮。
我把兩個demo文件放在附件里,玩家可以自行研究。blynk app那邊也比較簡單。

kittenblock中小學創客名師推薦的圖形化編程軟件

#=============
# m5stack blynk demo
#=============


from m5stack import *
from m5ui import *
from uiflow import *
import wifiCfg

import BlynkLib
import network
import machine
import time
from machine import Pin
led1=Pin(2,Pin.OUT)        #create LED object from pin16,Set Pin16 to output
led2=Pin(5,Pin.OUT)        #create LED object from pin17,Set Pin17 to output

WIFI_SSID = 'T*************'

WIFI_PASS = 'x*************m'

BLYNK_AUTH = 'z*************b'

setScreenColor(0x222222)

title0 = M5Title(title="Blynk Demo", x=3 , fgcolor=0xFFFFFF, bgcolor=0x0000FF)
rectangle0 = M5Rect(34, 192, 60, 30, 0xa9a504, 0xFFFFFF)
rectangle1 = M5Rect(219, 189, 60, 30, 0x187b06, 0xFFFFFF)
rectangle2 = M5Rect(129, 191, 60, 30, 0xf40808, 0xFFFFFF)
label0 = M5TextBox(49, 200, "Text", lcd.FONT_Default,0xFFFFFF, rotate=0)
label1 = M5TextBox(140, 199, " ", lcd.FONT_Default,0xFFFFFF, rotate=0)
label2 = M5TextBox(231, 198, " ", lcd.FONT_Default,0xFFFFFF, rotate=0)
label3 = M5TextBox(85, 88, "wait...", lcd.FONT_Default,0xFFFFFF, rotate=0)

label3.setText('Hello M5')

wifi = network.WLAN(network.STA_IF)
wifi.active(True)
wifi.connect(WIFI_SSID, WIFI_PASS)

while not wifi.isconnected():
    pass

#print('IP:', wifi.ifconfig()[0])

label3.setText('Connecting to Blynk...')
blynk = BlynkLib.Blynk(BLYNK_AUTH)
tmr_start_time = time.time()

@blynk.on("connected")
def blynk_connected(ping):
    #print('Blynk ready. Ping:', ping, 'ms')
    label3.setText('Blynk ready')
def runLoop():
    while True:
        blynk.run()
        machine.idle()

@blynk.on("V6")
def v3_write_handler(value):
   
    label3.setText(str(int(value[0])))
    led1.value(int(value[0]))
    label2.setText('   ')
    if int(value[0])==1:
      label2.setText('click')
    else:
      label2.setText('   ')

@blynk.on("V2")
def v2_write_handler(value):
   
    label3.setText(str(int(value[0])))
    led2.value(int(value[0]))
    label1.setText('   ')
    if int(value[0])==1:
      label1.setText('click')
    else:
      label1.setText('   ')

# Run blynk in the main thread:
while True:
    #runLoop()
    wait(0)  #為了在vscode中連續run
    blynk.run()



kittenblock中小學創客名師推薦的圖形化編程軟件

from m5stack import *
from m5ui import *
from uiflow import *
import machine
import wifiCfg

setScreenColor(0x222222)

title0 = M5Title(title="conntect.....", x=3 , fgcolor=0xfdfcfc, bgcolor=0x0000FF)
label0 = M5TextBox(61, 88, "Pin2=", lcd.FONT_Default,0xFFFFFF, rotate=0)
label1 = M5TextBox(108, 87, "x", lcd.FONT_Default,0xFFFFFF, rotate=0)

x = None

#led function
def led(x):
  label1.setText(str(str(x)))
  pin2.value(int(x))

pin2 = machine.Pin(2, mode=machine.Pin.OUT, pull=machine.Pin.PULL_UP)
wifiCfg.doConnect('*************', '*************')
wifiCfg.screenShow()
wifiCfg.autoConnect(lcdShow = True)
import BlynkLib
BLYNK_AUTH = 'z*************b'
blynk = BlynkLib.Blynk(BLYNK_AUTH)

@timerSch.event('__blynk_timer')
def __blink_timer():
  wait(0)
  blynk.run()
timerSch.run('__blynk_timer', 2, 0x00)

@blynk.on('connected')
def __blynk_on_connected():
  global x
  title0.setBgColor(0x33cc00)
  title0.setTitle('Connected')
  pass
@blynk.on('disconnected')
def __blynk_on_disconnected():
  global x
  title0.setBgColor(0xff0000)
  title0.setTitle('DisConnected')

@blynk.VIRTUAL_WRITE(6)
def v6_write_handler(args):
    globals()["led"](*args)

(, 下載次數: 20)
玩法二:
使用國外玩家提供的一個uiflow blynk插件進行開發,在uiflow當中開發ui之后,也可以在vscode當中進行二次開發和完善。
在此我們設計了一個簡單blynk交互功能:將blynk app上虛擬搖桿與m5stack端通過v-pin進行關聯,從而在m5stack上驅動一個白色小球動作。
繼續看圖說話。
(, 下載次數: 20)

(, 下載次數: 20)

(, 下載次數: 21)
(, 下載次數: 19)
(, 下載次數: 20)
最后是分享相關資源。
祝大家玩得開心。

資源包括:blynk python庫以及uiflow的blynk插件,來自blynk官網以及github.com (Custom blocks of M5FLowUI for Blynk)
請玩家在使用以及傳播時,尊重作者勞動,保留相關版權聲明。
mycode.zip是我寫的兩個demo以及一個基于Custom blocks of M5FLowUI for Blynk的小球demo。
(, 下載次數: 2) (, 下載次數: 3)
(, 下載次數: 0)

這個帖子欠了比較長時間了,不知什么原因,圖片上傳后很不清楚。所以我把圖片打包后上傳,以利玩家查閱。給您帶來不便,抱歉。
(, 下載次數: 0) (, 下載次數: 0)
滄海抱拳。

作者: 滄海笑1122    時間: 2019-11-22 10:36

一、補充一些背景資料,我曾經在2017年學習過一段blynk,以下是當時寫的一些帖子,對blynk的背景,基本玩法都有一些涉及,供玩家參考。
Dfrobot智能穿戴評測之Beetle BLE計步器的blynk展示
Genuino(arduino)101與blynk結合顯示BLE心率
Blynk連續劇第三集:blynk的bridge在8266上顯示藍牙心率帶數據
Blynk連續劇第四集:blynk+d1mini+oled環顯示藍牙心率帶心率脈動


二、由于排版的原因,一樓的圖片如果看起來模糊,您可以右鍵---新標簽打開,或者下載附件里面的圖片查看。

三、目前blynk+mpy的玩法還沒有arduino多,但是mpy(micropython)不需要編譯,是解釋型語言,所以調試、迭代非常方便,尤其是加上UIFLOW之后,在UI設計上,是arduino無法比擬的。而m5stack本身就是一個集成度很高的平臺,所以我推薦blynk+m5stack的玩法,便于上手和理解。所以blynk的arduino玩法依然是非常重要的選擇,玩家根據自己項目的需要進行選擇適合的開發手段,并沒有哪一個手段就是最棒的。

四、關于m5stack的mpy開發,我有一點體會,UIFLOW適合設計UI并且快速搭建程序框架,但是目前還不能直接下載.py文件到core端,所以,在完成了UI和框架設計后,我建議可以移步至vscode+m5stack micropython插件的方式,可以非常方便地導入、下載源文件、庫文件至core,還可以非常方便地在修改代碼后,連續run,調試效率大大提升。

只需要在主循環中加入一個語句即可:

kittenblock中小學創客名師推薦的圖形化編程軟件

 wait(0)    

這是非常好用的小tips。基于uiflow燒寫的固件,如果您是直接從github.com中下載、燒寫的固件,這句需要換成:

kittenblock中小學創客名師推薦的圖形化編程軟件

checkExit()


歡迎交流。





歡迎光臨 Arduino中文社區 (http://www.xwjziy.live/) Powered by Discuz! X3.4
3d每天组六27个号必中