TouchGFX: Creating dynamic graphic to represent Battery State of Charge (SOC)

[KMew]

Hello,

I am using the TouchGFX GUI on my custom board, which I have fully working now. We want to add a nicer visual display of our battery's SOC. We want a black background with a blue line that traces a hexagonal visual that changes based on the battery state of charge. The higher the state of charge, the further that the blue line "progresses." See below for a visual example.

 

I can create a black box and make the text look similar to that with the right font, but I am unsure how to create those light blue lines dynamically via TouchGFX.

Does anyone have any guidance on how to do this?

[ktrofimo · Accepted solution]

What about this:

Make 3 widgets the same size, on top ​of each other:

Top: text with %

Middle: black rectangle

​​Bottom: blue line bitmap

​As battery charges make middle rectangle smaller - it will open a bitmap underneath.

[KMew]

Hello ktro,

Thank you for the reply!

I think I see your logic, but I am trying to picture how to write the code for what you're describing. I can make the middle rectangle smaller, but it won't be shrinking the rectangle by a certain percentage each time. What we'd need is to remove the portion of the rectangle that is "hiding" that blue line.

Would it be easier to write a code this way instead:

Top: Text with percentage AND the blue line bitmap

Bottom: Black rectangle

But for the blue line bitmap, only generate a certain percentage of it based on that SOC percentage?

[ktrofimo]

Let's assume your widgets are in coordinates 0,0 to 100, 50 and Charge variable holds percentage 0 to 100. Then do in your onTick() function:​

blackBox.setPosition(Charge, 0, 100, 50);

This way ​when charge is 0% black box will fill whole area hiding blue line underneath. And it will gradually open it while charge will grow up to 100%

[KMew]

Hello ktro,

Ahh, I think I understand!

So as long as the background is the same colour as the "blackBox," then it will blend in seamlessly and I just create those lines behind this black box. Then I basically only generate the percentage of it that's based on the SOC and the line will be revealed.

That is actually much simpler.

Thank you! I will try this on Monday when I'm back in the office and let you know!

Thank you so much for the idea!!

[ktrofimo]

If your background is a bitmap with a blue line drawn ​on a black rectangle - then there is no need to make additional black rectangle under the bitmap.

Plus: you can draw nice line with a glow and smooth corners.

Minus: it takes ​a lot of memory for storing bitmap.

​Second option: make 4 programmatical layers:

- Text

- ​Black resizeable rectangle

- ​Blue lines

- ​Black background

​Idea is the same, but:

Plus: no menory for bitmap storage is needed​

​Minus: Picture quality depends on how perfect your lines will be drawn...

[MM..1]

Other idea is Image Progress | TouchGFX Documentation

or inspire Live demos - Test LVGL in your browser | LVGL Futuristic Ebike UI

click on battery

[KMew]

Hello ktro,

Thank you for the idea!

Can you explain the "nice lines" part? Like is there a built-in feature on the the line bitmap that lets you make it glow and such?

[KMew]

Hello MM,

Wow, that Futuristic Ebike UI looks really fascinating! A wonderful display.

I could definitely get inspiration from that. I'm guessing a source code for that would cost money though?

[MM..1]

Its free example...