UIFLOW V2.3.9

Amani4791

Hi there,

I'm trying to setup a small HMI on a Tab5 (latest firmware, V2.3.9).
Now I want to add buttons with 2 separate images for ON/OFF state.
The picture is drawn very slowly on screen. In operation I wanted to use set image flag hidden true/ false, but this also is very slow.
Pictures are PNG, 225x225px, ~30kB.
I think there must be a problem with M5UI (LVGL): if I use the same pictures/ procedures with M5GFX it works very fast/ smooth. But in M5GFX I can't find sliders?
Any hint's tipps how to do it?

Thanks!
Kind regards,
Stephan

Video showing the problem

RPI25

@Amani4791 As far as I can see, using a Core S3:
When I use M5UI I get the same results: the picture loads slowly.
With M5GFX: There aren't any touchscreen elements. So to have a switch, you would have to make one custom.
To do what you are trying to do, I would recommend using a canvas and a switch from M5UI and just manually creating the shapes in the canvas using code because that will make the draw process on the screen much faster.
Hope that helps,
RPi

RPI25

I have tried to recreate your image here in this code.

page0 = None
switch0 = None
canvas0 = None

def setup():
  global page0, switch0, canvas0

  M5.begin()
  Widgets.setRotation(1)
  m5ui.init()
  page0 = m5ui.M5Page(bg_c=0xffffff)
  switch0 = m5ui.M5Switch(x=130, y=184, w=60, h=30, bg_c=0xe7e3e7, bg_c_checked=0x2196f3, circle_c=0xffffff, parent=page0)
  canvas0 = m5ui.M5Canvas(x=5, y=5, w=310, h=150, color_format=lv.COLOR_FORMAT.ARGB8888, bg_c=0xffffff, bg_opa=255, parent=page0)

  page0.screen_load()


def loop():
  global page0, switch0, canvas0
  M5.update()
  if (switch0.has_state(lv.STATE.CHECKED)) == False:
    canvas0.draw_arc(155, 75, 50, color=0xc0c0c0, opa=255, width=15, start_angle=300, end_angle=240)
    canvas0.draw_line(155, 20, 155, 75, color=0xc0c0c0, opa=255, width=20)
  else:
    canvas0.draw_arc(155, 75, 50, color=0x33cc00, opa=255, width=15, start_angle=300, end_angle=240)
    canvas0.draw_line(155, 20, 155, 75, color=0x33cc00, opa=255, width=20)

RPI25

If you feel like the canvas method is too much effort - especially if it part of a larger project or you prefer M5GFX - then here is a working switch in M5GFX:

import os, sys, io
import M5
from M5 import *
import time



Switch1 = None
Switch2 = None
Switch3 = None
Knob = None


state = None
touch = None

# Describe this function...
def Off():
  global state, touch, Switch1, Switch2, Switch3, Knob
  state = 0
  Knob.setCursor(x=145, y=119)
  Switch1.setColor(color=0x999999, fill_c=0x999999)
  Switch2.setColor(color=0x999999, fill_c=0x999999)
  Knob.setColor(color=0xffffff, fill_c=0xffffff)

# Describe this function...
def On():
  global state, touch, Switch1, Switch2, Switch3, Knob
  state = 1
  Knob.setCursor(x=174, y=119)
  Switch2.setColor(color=0x33ccff, fill_c=0x33ccff)
  Switch3.setColor(color=0x33ccff, fill_c=0x33ccff)
  Knob.setColor(color=0xffffff, fill_c=0xffffff)


def setup():
  global Switch1, Switch2, Switch3, Knob, state, touch

  M5.begin()
  Widgets.setRotation(1)
  Widgets.fillScreen(0x222222)
  Switch1 = Widgets.Circle(174, 119, 14, 0xa4a4a4, 0xa4a4a4)
  Switch2 = Widgets.Rectangle(145, 105, 28, 28, 0xa4a4a4, 0xa4a4a4)
  Switch3 = Widgets.Circle(145, 119, 14, 0xa4a4a4, 0xa4a4a4)
  Knob = Widgets.Circle(145, 119, 14, 0xffffff, 0xffffff)

  Off()


def loop():
  global Switch1, Switch2, Switch3, Knob, state, touch
  M5.update()
  touch = M5.Touch.getCount()
  if touch != 0:
    if (M5.Touch.getX()) >= 131 and (M5.Touch.getX()) <= 188 and (M5.Touch.getY()) >= 105 and (M5.Touch.getY()) <= 133:
      if state == 0:
        On()
      else:
        Off()
      time.sleep_ms(500)


if __name__ == '__main__':
  try:
    setup()
    while True:
      loop()
  except (Exception, KeyboardInterrupt) as e:
    try:
      from utility import print_error_msg
      print_error_msg(e)
    except ImportError:
      print("please update to latest firmware")