Arc with just the outline

How-to
1

Description

I’d like to have an arc with just the outline (border), transparent inside.

What MCU/Processor/Board and compiler are you using?

PC Simulator

What LVGL version are you using?

8.3.2

What do you want to achieve?

I’m trying to have a transparent arc indicator, with just colored borders. Seems like this is not possible as setting the borders of main and indicator has different results.

What have you tried so far?

Changed settings of the main and indicator with no luck so far.

Code to reproduce

None

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

I’m designing a gauge, but I’d like to keep the background visible, while the arc indicator may change (no knob needed). Is this possible? Has anybody tried this?

2

Here you need use arc img.

3

Thank you for the hint. I will study this further, as I don’t find a way to make that image transparent. Should it be the image for what part? The indicator?

4

Perfectly you can test it in Squareline, and for your question
A image is normal png with transparency , but for arc used is only arc area from image = image must be square same size as arc
B indicator based on your design need image , main maybe not

5

HI Marian. I tried that in SLS but I can’t get the result I’m looking for. As an example, see below the indicator I’d like to get, in this case showing an angle of 270 degrees. It should be transparent, as it should be superimposed to the dial design.
arc-test

6

I dont understand your question. What dont work for you?
Your image in SQS as indicator plus one label

image
image726×788 63.5 KB

one issue is ending line , that need coded object over with used Place another object to the knob docu… Arc (lv_arc) — LVGL documentation

7

Thank you again, Marian.

I played a bit with SLS and I can get something close to what I need. I just found out that:

  • The background arc image does not rotate with the arc. So if I set a value to the arc rotation, the image keeps the initial orientation. For example, the vertical bar at the beginning of the arc in your picture always stays at the top of the screen.
  • Because of this I will need to add two objects, one at each end of the arc
  • To be more flexible, and to save space, I was looking for a way to recolor the image of indicator, but everything I tried didn’t work. For example:
lv_obj_set_style_img_recolor_opa(arc, LV_OPA_COVER, LV_PART_INDICATOR | LV_STATE_DEFAULT);
lv_obj_set_style_img_recolor(arc, LV_COLOR_RED, LV_PART_INDICATOR | LV_STATE_DEFAULT);

I’m not sure if this is possible.