TouchGFX: Creating dynamic graphic to represent Battery State of Charge (SOC)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:17 PM - edited ‎2023-11-20 8:08 AM
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?
Solved! Go to Solution.
- Labels:
-
STM32H7 Series
-
TouchGFX
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:22 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:22 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:35 PM
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?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:45 PM
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%
​
​
​
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 1:50 PM
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!!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-14 2:01 PM
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...
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-15 4:20 AM
Other idea is Image Progress | TouchGFX Documentation
or inspire Live demos - Test LVGL in your browser | LVGL Futuristic Ebike UI
click on battery
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-17 8:19 AM
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?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-17 8:21 AM
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?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
‎2023-04-17 11:10 AM
Its free example...
