M5stack uiflow character background

M5stack uiflow character background habit

Hello, this is cheers for good work. I've been touching it a little to get ** M5stack ** and test its usability. I took a memorandum of what I stumbled upon in that process.

It may be updated soon and this problem will be solved, but it is a technique that is effective until then.

In addition, I tried ** uiflow v1.4.5 **.

By the way, the result is the same for both ** micropython ** and ** blocky **, so this time I'll explain it with ** blocky **. (It's not that different, but it seems to be M5stack)

About the background of the characters

By the way, I think there are the following methods to display characters on the main LCD of ** M5stack **. -Display using ** Graphic ** ** lcd.print ** -Display using the UI ** label ** Is this an easy place?

First, display characters in graphic

The conclusion is to use the UI, but to make sense For those who didn't go well (those who didn't) First, display the characters with ** Graphic **. blocky001.png

text001.png

It's like this. You won't notice if the background color is black, but if you change the background color, you'll be shocked.

blocky002.png

In ** Graphic **, the background of the characters is "black". text002.png

** It's not good ... ** The character background (black) of this ** Graphic ** seems to be black anyway, without any causal relationship with the background color of the UI. Similarly, if you repaint with ** Graphic **, the characters you want to display will disappear, and if you display the characters from above, it will turn black again ... In other words, it's a problem with the contents of ** print.lcd **, so there's nothing you can do if you don't mess with it. (Honestly shobo ...)

Display using UI label

Next, if you display the characters with ** label ** in the UI blocky003.png

blocky004.png

text003.png

It's very easy. Just place it with the mouse.

However, I noticed that there was a change in this character by adding another color to the background. blocky008.png (* Rectangular0 is designed to cover the label to be changed)

Afterimage ...

text004.png

When the character of ** label ** is changed, the character before the change remains like an afterimage. It should be noted that this afterimage is the same as the background color. This phenomenon occurs when the place where ** label ** is placed is "not the background color". In other words, you can see that the UI label follows the steps below.

** ① Overwrite the current characters with the background color **  ↓ ** ② Overwrite with the drawing color with the changed characters **

You can see that the steps ① and ② are one process, and it is the process of ** label show **.

By the way, if there is a verification that "is it really so?" -Fill once before changing characters ・ Make several changes I tried, but the result is the same. As long as the above processes ① and ② are integrated, it cannot be avoided.

So how to deal with it

Of course, there may be things like "I'm python, fix the library", "Give up uiflow", "blocky shit", but it's still an IOT M5stack, so I don't want to do it with blocky. Or! !! So this is the procedure I came up with.

** ① Move the label you want to change off the screen **  ↓ ** ② Fill the original place with Rect **  ↓ ** ③ Change the label outside the screen **  ↓ ** ④ Return the changed label to the original location **

blocky006.png (* Rectangular0 is designed to cover the label to be changed)

The principle of label drawing was not transparent color, but "overwrite drawing".

Summary

To tell the truth, it's okay if transparent colors can be used, but ... png and other uses will expand, so I hope for immediate support! !!

EOL

Recommended Posts

M5stack uiflow character background
Start M5Stack with UIFlow