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

Forum|Forum|3 years ago
April 14, 2023
2 replies
5163 views

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?

This topic has been closed for replies.

Best answer by ktrofimo

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.

ktrofimoBest answer

Senior III

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.

KMewAuthor

Senior III

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

Senior III

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%