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