Ramp / Curved Bargraph - Help needed

[Petros144]

Hi everyone!

Im trying to make a custom Gauge - This time I Need a ramped Bar graph.

I Got my pretty Drawing on the Screen but I don´t know how to start with the progress bar.

I want to make something simmilar to this:

my first toughts where to usw vertical lines to build the graph.

Make 2. Arrays one with the length of the lines and one with the x/y coordinates. Than Map the Array to my value and draw with the TFT functions.

I know this will take ages to line up all the Lines and a lot of trial and error.

Is there a smarter solution for my usecase?

[ht93]

A way to do it:

• use sprite https://github.com/Bodmer/TFT_eSPI/tree/master/examples/Sprite , can try the example one by one to see anything close. build a large sprite that cover whole ramp thing.
• use https://github.com/Bodmer/TFT_eSPI/blob/master/TFT_eSPI.h#L473-L474 to have the rect with gradient, a single horizontal rect. And then cover it with triangle with black color and the boarder to make to the shape

[Petros144]

Hey @ht93 !

Thank you for the idea, im new to the sprites, I also have some concerns about my RAM usage (I Have Canbus and Wifi running without PS-RAM).

If I have to mask out the Filling area, I could spend the time and try to fill it up with Lines? it is also a tedious job. :(

[builderdev212]

You certainly can do it by just hardcoding the lines. If you figure out the boundaries of the gauge you can make a function that can automatically fill it to any certain degree. The only issue you might run into is that you have to know what part of the gauge is already filled. I made a function to create a simple bar animation that simply set the entire section to a color, then filled the specific area with the gauge color. As far as sprites go, you would end up doing that in a similar way, though sprites might help any tearing. I will say that curve in the gauge is going to be annoying to work around, but it's most certainly possible.

[ht93]

If you use sprites, to mask out the ramp thing, you just need use build in function like fillTriangle, fillRect, fillCircle with black color.

If you still want to draw line for the ramp, just write a function to plot lines, set some parameter like interval, angle, length. Then fine tune them, should be doable.

But I found the animation will have flicker without sprites. For something that always changing, it will be not ideal. Not sure there is something you can avoid this without sprite. Maybe @Bodmer will know?

[Bodmer]

The vertical lines approach would be the most memory efficient. For example an array of start x,y and length. I do not know how you created the guage, if you created that as an image then you could also create an image of the area to be updated and plot in a 1bpp sprite, the sketch can then scan the sprite and put the array data for the lines in a file or send the values to the serial port in an array compatible text format.

[Petros144]

The vertical lines approach would be the most memory efficient. For example an array of start x,y and length. I do not know how you created the guage, if you created that as an image then you could also create an image of the area to be updated and plot in a 1bpp sprite, the sketch can then scan the sprite and put the array data for the lines in a file or send the values to the serial port in an array compatible text format.

Hey Bodmer! could you give me a detailed guide on how to archive this? I have the gauge as picture and can make the fill as aseperate picture. the sprite functions are a bit overwhelming for a newbe.

@ALL if anyone have a example, feel free to post it here, maybe someone else is looking for the same stuff

thanks in advance.