How to change arc width and colour in V7.9

How-to
1

Hey,

I am using LVGL with an ESP32 and ESP-IDF, the latest port for this is version 7.9 https://github.com/lvgl/lv_port_esp32

I have been really struggling to find a way to change the width of an arc object in the current version. The object has no properties for it and I saw that in the v8.0 documentation arc_width was marked as TODO in style properties. Is it just not possible to change the width in 7.9 or is there another method that I have not managed to find yet?

thanks,
Liam

2

Hi @Liam ,

Can you share a snippet of code to show how you are creating your arc please?

Thanks,

Pete

3

Hey, thanks for the quick reply @pete-pjb

I’ve tried adding line width to a style and applying it to the object however that did not seem to have the desired effect.

        static lv_obj_t * arc_humidity;
        ...
        {
        	        arc_humidity = lv_arc_create(lv_scr_act(), NULL);
			lv_arc_set_end_angle(arc_humidity, 200);
			lv_obj_set_size(arc_humidity, 240, 240);
			lv_obj_set_x(arc_humidity, 0);
			lv_obj_set_y(arc_humidity, 0);
			lv_arc_set_range(arc_humidity, 0, 100);
			lv_arc_set_value(arc_humidity, 75);
			lv_style_set_line_width(&style_common, LV_STATE_DEFAULT, 1);
			lv_obj_move_background(arc_humidity);
			lv_obj_add_style(arc_humidity, LV_ARC_PART_INDIC, &style_common);
        }
4

I’ve also tried applying the style to LV_OBJ_PART_ALL

5

Hi @Liam ,

I have tried your code in my version 7 simulator and it works okay for me:

Can you confirm you have declared the lv_style_t static as follows:

static lv_obj_t * arc_humidity;
static lv_style_t style_common;

void config_arc( void )
{
	arc_humidity = lv_arc_create(lv_scr_act(), NULL);
	lv_arc_set_end_angle(arc_humidity, 200);
	lv_obj_set_size(arc_humidity, 240, 240);
	lv_obj_set_x(arc_humidity, 0);
	lv_obj_set_y(arc_humidity, 0);
	lv_arc_set_range(arc_humidity, 0, 100);
	lv_arc_set_value(arc_humidity, 75);
	lv_style_set_line_width(&style_common, LV_STATE_DEFAULT, 1);
	lv_obj_move_background(arc_humidity);
	lv_obj_add_style(arc_humidity, LV_ARC_PART_INDIC, &style_common);
}

I have taken a quick look at the code at the ESP link you posted and it seems to be similar to the version in my simulator.

It may also be worth updating the submodules if you are using git to by sure you have the latest code referenced in the ESP32 port.

Kind Regards,

Pete

6

Hi @Liam ,

It also occurred to me you might be trying to change the width of the entire arc not just the indicator?

In which case you will need to do this:

static lv_obj_t * arc_humidity;
static lv_style_t style_common;

void config_arc( void )
{
	arc_humidity = lv_arc_create(lv_scr_act(), NULL);
	lv_arc_set_end_angle(arc_humidity, 200);
	lv_obj_set_size(arc_humidity, 240, 240);
	lv_obj_set_x(arc_humidity, 0);
	lv_obj_set_y(arc_humidity, 0);
	lv_arc_set_range(arc_humidity, 0, 100);
	lv_arc_set_value(arc_humidity, 75);
	lv_style_set_line_width(&style_common, LV_STATE_DEFAULT, 5);
	lv_obj_move_background(arc_humidity);
	lv_obj_add_style(arc_humidity, LV_ARC_PART_INDIC, &style_common);
	lv_obj_add_style(arc_humidity, LV_OBJ_PART_MAIN, &style_common);
}

Kind Regards,

Pete

7

@pete-pjb Thank you so much.

I had been using style_common for configuring other objects like adding fonts etc. Adding line width to it did not change my arc. It worked when I created an entire new style and applied it to all parts of the arc object.

1 Like
8

Hi @Liam,

You’re welcome :slight_smile:

Apologies if you already know this but all styles must be static or global as they are referenced each time the object is updated on the screen. So if you have different styles for different objects you need to create one for each object.

I hope that makes sense.

Kind Regards,

Pete

9

I didn’t know that, thanks for explaining.

This is my first time working with embedded UI, lots to learn but I’m getting there :slight_smile:

1 Like