首页 › M5Stack › 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。 【硬件准备】1、m5stack basic一块2、Led多彩模块 2片（自带多彩led以及限流电阻）3、手机一部 （安装blynk APP) 【软件准备】1、blynk python库，本帖使用Micropython进行开发，arduino玩法请参考我的其他教程2、为m5stack刷上了uiflow固件（1.4.2）3、vscode+m5stack micropython插件4、将blynklib.py   blynktimer.py传送至m5stack注意，要将blynklib.py当中的server设置改成你的本地server以及端口 【开始blynk与m5stack以及uiflow的交互玩法】玩法一：使用uiflow设计ui，然后在vscode当中进行编程，调试。我们实现了一个简单的blynk交互：在blynk app上设计了两个按钮，点击时，激活v2/v6两个虚拟pin，点击后，将结果传送至m5stack端，解析后，驱动两个led进行闪亮。我把两个demo文件放在附件里，玩家可以自行研究。blynk app那边也比较简单。
#=============
# 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())

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)))
    led1.value(int(value))
    label2.setText('   ')
    if int(value)==1:
      label2.setText('click')
    else:
      label2.setText('   ')

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

# Run blynk in the main thread:
while True:
    #runLoop()
    wait(0)#为了在vscode中连续run
    blynk.run()



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)

玩法二：使用国外玩家提供的一个uiflow blynk插件进行开发，在uiflow当中开发ui之后，也可以在vscode当中进行二次开发和完善。在此我们设计了一个简单blynk交互功能：将blynk app上虚拟摇杆与m5stack端通过v-pin进行关联，从而在m5stack上驱动一个白色小球动作。继续看图说话。

最后是分享相关资源。祝大家玩得开心。
资源包括：blynk python库以及uiflow的blynk插件，来自blynk官网以及github.com （Custom blocks of M5FLowUI for Blynk）请玩家在使用以及传播时，尊重作者劳动，保留相关版权声明。mycode.zip是我写的两个demo以及一个基于Custom blocks of M5FLowUI for Blynk的小球demo。


这个帖子欠了比较长时间了，不知什么原因，图片上传后很不清楚。所以我把图片打包后上传，以利玩家查阅。给您带来不便，抱歉。

沧海抱拳。

沧海笑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，调试效率大大提升。

只需要在主循环中加入一个语句即可：
wait(0)   
这是非常好用的小tips。基于uiflow烧写的固件，如果您是直接从github.com中下载、烧写的固件，这句需要换成：
checkExit()

欢迎交流。

查看完整版本: Blynk与m5stack basic以及uiflow的交互玩法