Newbie question - how to get started?

ajb2k3

There is also my own work in progress documents https://github.com/Ajb2k3/UIFlowHandbook

marcvl

Made great progress. Thermostat is up and running. Display is rendering fine. MQTT integration with HA works...

One question as I'm working on aligning all the labels, sliders, images and other visual elements .... I can't figure out how to "center align" things. For example, I have a text label with varying length. I'd like to anchor that label on the screen by specifying the x,y coordinates of the center of the label, as opposed to the top left corner. How do I do that?

BricoMS

@marcvl
Hello,
Besides the "auto align" of the uiflow interface, you would need to make that by programming. By programming i am refering to either pure code or BLOCKS)

For example: (And i do not have the right numbers or functions at hand)

if your screen is 320x180
then the center of the screen would be 160x90
If your button (or any object) is 20w x 10h... how would you put it at center?

myX= 160-10
myY= 90-5
button1 = M5Btn(text='Button', x=myX, y=myY, w=20, h=10)

So you sustract the half of the size of your object from the half size of your screen.
And you can do that with relation to any object or any kind of reticle.

Some objects like buttons have properties like width height, x and y.
so if you ask for button1.w or button1.h (you have to check the real properties of your object, it could be button1.width or button1.height, check the documentation.) This way you can re arrenge your ui programatically asking for an object size and position.

like this:(its just an example i dont think it works)
button1 = M5Btn(text='Button', x=0, y=0 w=20, h=10)
button1.x = myScreen.width - (button1.w / 2)
button1.y = myScreen.height - (button1.h / 2)

And from this you get into more complex reticles. A good advice is to plan your interface ahead of time and think of this aligments from the start.
You will get a hang of that with time and will discover more easy ways to do it or more efficent ones.

I recommend you search for tutorials on programming UI interfaces and aligning them. Most of the time i do not use the UI composition screen, i just drop the elements and i align them programatically.

Maybe.. there is a way to do it easy on UIFLOW, but if you really want to have control of your elements and interface, you need to know by code where your objects are in relation to one another.

Hope i did not confuse you too much.

marcvl

Thanks. This all makes sense. How would you do this with an item that doesn't have a fixed width or height, specifically a label. The w and h of the label depend on the text in it. I'm struggling with finding a way to center align the text, either programmatically or through some of M5stack's functions?

There are bunch of functions in mstack_ui that deal with alignment (ALIGN_CENTER, ...) but I can't find any documentation on how to use them and these functions don't even have the basic Docstrings attached to them:

>>> help (M5Slider.set_align)
object <function set_align at 0x3f8402b0> is of type function

ajb2k3

@marcvl said in Newbie question - how to get started?:

Thanks. This all makes sense. How would you do this with an item that doesn't have a fixed width or height, specifically a label. The w and h of the label depend on the text in it. I'm struggling with finding a way to center align the text, either programmatically or through some of M5stack's functions?

There are bunch of functions in mstack_ui that deal with alignment (ALIGN_CENTER, ...) but I can't find any documentation on how to use them and these functions don't even have the basic Docstrings attached to them:

>>> help (M5Slider.set_align)
object <function set_align at 0x3f8402b0> is of type function

Some of us have only just discovered them but I haven't had the time to look and experiment let alone document!

Dario

@marcvl on the Core2 the widgets are implemented trough LVGL. For the alignments flags you can look at this page:
https://docs.lvgl.io/v7/en/html/widgets/obj.html

marcvl

@dario That's great. I figured out how to do it...

Here's what I discovered:

It seems like the M5 set_align function is slightly different from the LVGL implementation. My understanding from the LVGL documentation is that set_align(ALIGN.CENTER) should center-align the text within the label. However, the M5 equivalent set_align(ALIGN_CENTER) also centers the entire label horizontally, ignoring the previous label position definition.
The M5 version of set_align however takes extra arguments to specify x and y offset. So you can say <lbl_name>.set_align(ALIGN_CENTER, 0, -10)
There is no auto-align feature as far as I can tell. LVGL has a function set_auto_realign(True), but I couldn't find the equivalent with M5. So every time I change the text in the label I have to re-run the alignment function.

But, hey, it works. So I'm not complaining :)

marcvl

On to the next issue.... I've been trying to get m5mqtt_subscribe to work and staring at the code for a few hours .... Maybe some fresh eyes can help pinpoint the problem.

MQTT is set up correctly. M5 is publishing data to home assistant (through Mosquitto) without issues. However, I can't get the reverse to work (ie. Home Assistant publishing data to the M5).

I have confirmed that HA is doing the right thing .... i.e. publishing data on an agreed topic. Example: here's what HA publishes to change the target temperature of the thermostat:

core2/thermostat/temperature/command 21.11111111111111

Here's my micropython code on the M5:

DEFAULT_TOPIC_THERMOSTAT_PREFIX = "core2/thermostat/"
TOPIC_TEMPERATURE_COMMAND = "temperature/command"
m5mqtt.subscribe(DEFAULT_TOPIC_THERMOSTAT_PREFIX + TOPIC_TEMPERATURE_COMMAND, rcv_target_temp)

def rcv_target_temp(topic_data):
    global target_temp
    m5mqtt.publish(DEFAULT_TOPIC_DEBUG,'Received target_temp: %f' % topic_data)
    target_temp = round(topic_data)

The rcv_target_temp code never gets executed. No errors are being reported. What am I doing wrong?

marcvl

Ok, this time I'm going to solve my own problem :-)

The issue was that the m5mqtt.subscribe code was in the wrong place. You have to put it before mqtt.start(). In my case, I had inserted it after mqtt.start().

Also round(topic_data) doesn't work because there's a type mismatch. round(float(topic_data)) did work.

ajb2k3

@marcvl Really?

Wow thanks for discovering the m5mqtt.subscribe/mqtt.start issue.
BTW is this in micropython?

marcvl

@ajb2k3 Yes, this is in micropython. I need to do a little bit more work but will post my code on Github soon.

marcvl

Github repository of my MQTT Thermostat running on Core2 is here.

It's pretty cool. The thermostat supports various modes: off/auto/manual/heat/cool/fan. You can specify minimum cycle duration as well as set swing mode parameters. It automatically gets discovered by Home Assistant. You can set thermostat mode and target temperature in Home Assistant and they will automatically get reflected on the Core2 display.

It currently relies on the ENVII module for temperature reading, and requires a WIFI connection and an active MQTT broker. I haven't had time to implement error handling, so if something goes wrong, it might be non-obvious to figure out why. More work to be done.

I couldn't figure out how to enable touch for a specific screen area without using visible buttons with M5stack_UI, so instead I used an lvgl button with invisible borders.