查看: 628|回复: 1

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

[复制链接]
  • TA的每日心情
    开心
    2019-7-17 13:13
  • 签到天数: 264 天

    [LV.8]以坛为家I

    发表于 2019-11-21 23:34 | 显示全部楼层 |阅读模式
    本帖最后由 沧海笑1122 于 2019-11-21 23:58 编辑

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

    [准备工作
    我们假设玩家已经熟悉下面的准备工作,未明了部分,请查阅网络相关教程。
    1、安装blynk本地服务器。我用的是一片树莓派3B搭建了一个blynk本地server
    2、加上了花生壳内网穿透,花了6元购买了一个内网穿透服务,获取了一个免费的由系统自行分配的域名。映射了两个端口,一个为手机访问blynk server,并一个为esp32访问blynk server
    pi_1.png
    【硬件准备】
    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以及端口
    pi_2.png
    【开始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)
    
    
    ufo6.png
    玩法二:
    使用国外玩家提供的一个uiflow blynk插件进行开发,在uiflow当中开发ui之后,也可以在vscode当中进行二次开发和完善。
    在此我们设计了一个简单blynk交互功能:将blynk app上虚拟摇杆与m5stack端通过v-pin进行关联,从而在m5stack上驱动一个白色小球动作。
    继续看图说话。
    ufo1.png

    ufo2.png

    ufo4.png
    ufo5.png
    ufo7.png
    最后是分享相关资源。
    祝大家玩得开心。

    资源包括:blynk python库以及uiflow的blynk插件,来自blynk官网以及github.com (Custom blocks of M5FLowUI for Blynk)
    请玩家在使用以及传播时,尊重作者劳动,保留相关版权声明。
    mycode.zip是我写的两个demo以及一个基于Custom blocks of M5FLowUI for Blynk的小球demo。
    M5UIFlowBlynk-master.zip (279.52 KB, 下载次数: 2)
    ufo3.png
  • TA的每日心情
    开心
    2019-7-17 13:13
  • 签到天数: 264 天

    [LV.8]以坛为家I

     楼主| 发表于 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,调试效率大大提升。

    只需要在主循环中加入一个语句即可:

    这是非常好用的小tips。基于uiflow烧写的固件,如果您是直接从github.com中下载、烧写的固件,这句需要换成:


    欢迎交流。
    您需要登录后才可以回帖 登录 | 立即注册  

    本版积分规则

    热门推荐

    Blynk与m5stack basic以及uiflow的交互玩法
    Blynk与m5stack basic以及
    Blynk与m5stack basic以及uiflow的交互玩法 [准备工作我们假设玩家已经熟悉下面的准备
    【原创】全球最小口袋3D打印机mini one直播教程贴
    【原创】全球最小口袋3D打
    最近闲得蛋疼,没事搞个掌上3D打印机,先放效果图吧。 搞了半天,终于能正常打印,
    把一个废柴插座转眼变身远程控制智能插座
    把一个废柴插座转眼变身远
    把一个废柴插座转眼变身远程控制智能插座该项目主要基于Arduino D1 mini(wemos)模块
    让家里的空调也能远程控制
    让家里的空调也能远程控制
    让家里的空调也能远程控制 我们这里借用点灯科技的bliker平台(平台地址https://diand
    OLED 128*64自制可达10000000个选项的菜单(已更新)
    OLED 128*64自制可达10000
    OLED 128*64自制可达10000000个选项的菜单 温馨提示: 建议占个楼再食用本帖子
    Copyright   ©2015-2016  Arduino中文社区  Powered by©Discuz!   
    快速回复 返回顶部 返回列表