CangHai • Posted by vany5921

Published April 21, 2020 © MIT

M5Stack with Blynk

Using UIFlow and Blynk to complete the interaction experiment

BeginnerFull instructions provided1 hour3,779

Things used in this project

Hardware components

M5Stack ESP32 Basic Core IoT Development Kit

LED (generic)

Software apps and online services

Blynk

Story

We assume that the players are familiar with the following preparations. If not, please refer to the relevant online tutorials.

1. Install the blynk local server. I used a piece of raspberry pie 3B to build a blynk local server.

2.In addition, use intranet penetration service.I spent 6 yuan to purchase an intranet penetration service, and obtained a free domain name assigned by the system itself. Two ports are mapped, one for mobile access to blynk server and one for esp32 access to blynk server.

【Software Preparation】

1、Blynk Python library, this post is developed by micropyron. Please refer to my other tutorials for playing Arduino

2、Flah UIFlow firmware for M5Stack

3、VSCode+M5stack micropython plug-in

4、Transfer blynklib.py blynktimer.py to M5Stack

Note that the server setting in blynklib.py should be changed to your local server and port

Demo1. Use uiflow to design UI, and then program and debug in vscode.

We implement a simple blynk interaction: two buttons are designed on the blynk app. When clicking, two virtual pins V2 / v6 are activated. After clicking, the results are transmitted to the m5stack end. After parsing, two LEDs are driven to flash.

Demo2.In this paper, we design a simple interaction function of blynk: associate the virtual rocker on blynk app with the m5stack end through v-pin to drive a white ball on M5Stack

Code

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()

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)

Credits

CangHai

Posted by

vany5921

M5Stack with Blynk

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

Source Code

Source Code2

Source Code3

Code

M5Stack Blynk Demo1

M5Stack Blynk Demo2

source

Credits

Comments

Embed the widget on your own site

M5Stack with Blynk

M5Stack with Blynk

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

Source Code

Source Code2

Source Code3

Code

M5Stack Blynk Demo1

M5Stack Blynk Demo2

source

Credits

Comments

Related channels and tags