4. How to set advanced properties for UI elements (styles) and get more information on micropython modules

How to set advanced properties for UI elements (styles) and get more information on micropython modules

  • I

    Hi,

    I was a bit frustrated with the documentation of the UI elements, so I started digging. I wanted to share the information I found with other beginners like me so they won't need to spend the 2-3 hours I did spend to set the border colour of a button.

    Trick 1: you need to understand that the M5stack_ui are basically the micropython bindings of LVGL (version 7). This means whatever you need to know, you can find in the LVGL documentation.

    Trick 2: as the documentation of the python modules on the M5Stack page is incomplete, it helps to inspect the actually implemented functions by using something like:

    btn = M5Btn()
    print(dir(btn))

    which returns:
    ['class', 'init', 'module', 'qualname', 'dict', 'cb', 'delete', 'get_state', 'obj', 'set_align', 'set_bg_color', 'set_cb', 'set_hidden', 'set_pos', 'set_size', 'style', 'set_btn_text', 'set_btn_text_color', 'set_btn_text_font', 'pressed', 'released', 'callback', 'btn_text', 'btn_label_obj'

    This shows, for example, that there is actualy the function set_btn_text implemented (which is not documented), and that we have the "obj" attribute which allows us to modify all of the objects parameters.

    Result:
    As an example, to create a button with a specific corner radius and the border colour set, you need to create a style, set the parameters of the style and the apply the style to the object:

    btn = M5Btn(text="--", x=180, y=70,w= 120, h=100, bg_c=UI_BTN_CLR ,text_c=UI_TEXT_COLOUR ,font=FONT_MONT_38)
    se_style = lv.style_t() # create the style
    se_style.set_border_color(lv.STATE.DEFAULT,lv.color_hex6(UI_BTN_CLR))
    se_style.set_radius(lv.STATE.DEFAULT,8)
    btn.obj.add_style(btn.obj.PART.MAIN,se_style) # add it to the btn parent object

    Hope this is helpful to somebody (even though no one asked...)

    5
  • C

    Thanks for the sharing. Fully agree with you on the lack of documentation of UI flow. Actually I sent a post on this matter but did not get a single answer !

    1
  • I

    Thank you. That is helpful.

    0

  • I have been working on listing the GUI elements and the API's for Uiflow and UIFlow2 but as the document is still work in progress, its only available on the FB group for preview only.

    2
    I
    C
     2 Replies
  • I

    @ajb2k3 Thank you. Is there an option for people who don't use facebook and all the other social media? That seems like a lot of work.

    1
    M
     1 Reply
  • M

    @isoeek M5Stack is different. For now at least, it does take a lot of data-mining effort to find information - which is a barrier to those of us with ADD/ADHD obviously.

    Also, a lot of what exists is in non-english, as M5Stack's initial focus, going by social media, seems to be on Japan. And so there seems to be a heavier focus on cute "-chan" robots and "-neko" ears and that sort of japan-style "cute" stuff than stuff that would be generally helpful to your typical developer. But it seems to be financing their other development stuff, so whatever works, right? They are releasing new products every week now, so something is working.

    Dont give up though. We are all struggling with lack of information/documentation, but I think things are heading in the right direction. UIFlow2 is growing, is a much better system, and eventually should replace UIFlow1.

    Truthfully, I would have suggested they didnt release all the hardware before there was good documentation for it, but Im not in marketing, and it may not have been feasible. I guess all I am suggesting is "lots of us understand your difficulties trying to get accurate and usefull info/documentation, but dont give up."

    We should also definitely support those people that are working to fix the documentation problem, like ajb2k3

    and insaneLX's trick is very helpful

    2
    I
     1 Reply
  • I

    @mtylerjr Thank you, that helps me. It's nice to see others that deal with the same thing and share a common interest. I agree with not releasing the hardware till the documentation was done. I feel lucky that my projects are pretty basic. I unfortunately know this is only till my knowledge broadens. What is the difference with Uiflow2? I went with 1 because it seems there is a lot of growing pains with anything new. I feel M5 makes small well packaged products. I really wish that we could copy and share blocks with others and paste them in any project. I'm sure there is a good reason why they don't do that. Thanks Mtylerjr for reaching out to encourage me. Let me know if you ever need anything. I agree with helping support ajb2k3. I do what I can. I hope M5 is helping to support him as well.

    0

  • @mtylerjr @IsoEek I have old docs on my GitHub but the UIFlow stuff is supposed to be getting transferred to a website but I just cannot get a look for my website that makes me happy and so the docs don't get uploaded.
    The second biggest issue with the docs is that because they are so graphics heavy, I have you use crazy compression

    The stack chan craze and Neko craze is because of the massive support network in Japan for "cute "robots I confess that in the UK I too have a stack chan and working on a cosplay Neko cat ear project.

    2
    I
     1 Reply
  • I

    @ajb2k3 Thank you. I'll do that. Do you need more storage space? I have a 500Gb M.2 that was used for a month. I don't need it. I have plenty of storage space. Do you want it? Ill send it to you for free. I like the cat ears. lol

    0 1 Reply

  • @isoeek no it not storage problem on my machine, it’s online storage and I have no style

    1
  • P

    @insaneLX @csierra67 @IsoEek @ajb2k3 @mtylerjr https://docs.m5stack.com/en/mpy/display/m5stack_lvgl
    This is M5Core2 micropython UI elements information

    2
  • C

    @ajb2k3 I have been trying to find the FB group with no success. No link on the M5 stack web (Explore section). As I try to find a group in FB with the name M5 or M5 stack or M5 core.. not hit
    Could you share ?

    0
    M
     1 Reply

  • Keep an eye on the CoreS3 documentation page of the M5Stavk site as they are going to add a copy there

    0
  • M

    @csierra67 I just tried "m5stack facebook" in google, and first hit was https://www.facebook.com/M5Stack/

    0

  • Sorry, was busy and forgot to answer.
    https://www.facebook.com/groups/m5stack

    1
  • C

    @mtylerjr @ajb2k3 thanks for the answer, just applied for membership

    1
    M
     1 Reply
  • M

    @csierra67 I didn't even know that group existed! I just applied too.

    I had to be creative to get most of my M5Stack products in their tiny limited "What M5Stack Products do you own" textbox though, lol.

    "Core2AWS,Extension,HMI,16Servo
    CoreS3
    StickC+,Vibe,Spkr2
    Paper
    AtomS3,S3Lite,Lite,SmartSpkr,Tail485,TailBat,ProtoHub
    StampS3,C3,ExtendI/O,BreakOut
    UnitV,4Relay,ENV3,Angle,Torch,Gesture,RFID2,Hall,Infrared,PIR,AC,CardKB,Vibe,IO-Hub,Serial-IO,IO2,1-3Hub"
    0
    M
     2 Replies

  • @mtylerjr you didn’t need to write an essay

    1
  • M

    Sorry, it is the OCD and autism combining with the ADD, lol

    1 1 Reply

  • @mtylerjr lol, they were created to stop spammers and bots from joining and well I only check to see if people put things in the box’s. The actual content of the answers are not often checked

    0