LVGL Gauge Create

General discussion
1

Please help me,

How do I include a Gauge from the LVGL Library in my code?

I made all the code in Squareline Studio, but since there is no Gauge widget there, I would like to create it manually.

How can I do that?

The examples I found in the Documentation are insufficient, and the code provided by chatgtp is not correct. Any suggestions?

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.3.3
// LVGL version: 8.3.6
// Project name: EnervisionDash

#include "ui.h"

void ui_scrMonitor2_screen_init(void)
{
ui_scrMonitor2 = lv_obj_create(NULL);
lv_obj_clear_flag( ui_scrMonitor2, LV_OBJ_FLAG_SCROLLABLE );    /// Flags
lv_obj_set_style_bg_color(ui_scrMonitor2, lv_color_hex(0x160DDD), LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_bg_opa(ui_scrMonitor2, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui_scrMonitor2, LV_GRAD_DIR_VER, LV_PART_MAIN| LV_STATE_DEFAULT);

ui_Panel4 = lv_obj_create(ui_scrMonitor2);
lv_obj_set_width( ui_Panel4, 480);
lv_obj_set_height( ui_Panel4, 320);
lv_obj_set_align( ui_Panel4, LV_ALIGN_CENTER );
lv_obj_clear_flag( ui_Panel4, LV_OBJ_FLAG_SCROLLABLE );    /// Flags
lv_obj_set_style_bg_color(ui_Panel4, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_bg_opa(ui_Panel4, 0, LV_PART_MAIN| LV_STATE_DEFAULT);

ui_Button1 = lv_btn_create(ui_Panel4);
lv_obj_set_width( ui_Button1, 61);
lv_obj_set_height( ui_Button1, 61);
lv_obj_set_x( ui_Button1, -184 );
lv_obj_set_y( ui_Button1, 107 );
lv_obj_set_align( ui_Button1, LV_ALIGN_CENTER );
lv_obj_add_flag( ui_Button1, LV_OBJ_FLAG_SCROLL_ON_FOCUS );   /// Flags
lv_obj_clear_flag( ui_Button1, LV_OBJ_FLAG_SCROLLABLE );    /// Flags
lv_obj_set_style_bg_color(ui_Button1, lv_color_hex(0x09EF2E), LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_bg_opa(ui_Button1, 255, LV_PART_MAIN| LV_STATE_DEFAULT);

ui_Label13 = lv_label_create(ui_Panel4);
lv_obj_set_width( ui_Label13, LV_SIZE_CONTENT);  /// 1
lv_obj_set_height( ui_Label13, LV_SIZE_CONTENT);   /// 1
lv_obj_set_x( ui_Label13, -4 );
lv_obj_set_y( ui_Label13, -128 );
lv_obj_set_align( ui_Label13, LV_ALIGN_CENTER );
lv_label_set_text(ui_Label13,"Enervision Dash");
lv_obj_set_style_text_color(ui_Label13, lv_color_hex(0xFFFFFF), LV_PART_MAIN | LV_STATE_DEFAULT );
lv_obj_set_style_text_opa(ui_Label13, 255, LV_PART_MAIN| LV_STATE_DEFAULT);


  **/*Describe the color for the needles*/**
**    static lv_color_t needle_colors[3];**
**    needle_colors[0] = LV_COLOR_BLUE;**
**    needle_colors[1] = LV_COLOR_ORANGE;**
**    needle_colors[2] = LV_COLOR_PURPLE;**

**    /*Create a gauge*/**
**    lv_obj_t * gauge1 = lv_gauge_create(lv_scr_act(), NULL);**
**    lv_gauge_set_needle_count(gauge1, 3, needle_colors);**
**    lv_obj_set_size(gauge1, 200, 200);**
**    lv_obj_align(gauge1, NULL, LV_ALIGN_CENTER, 0, 0);**

**    /*Set the values*/**
**    lv_gauge_set_value(gauge1, 0, 10);**
**    lv_gauge_set_value(gauge1, 1, 20);**
**    lv_gauge_set_value(gauge1, 2, 30);**

lv_obj_add_event_cb(ui_Button1, ui_event_Button1, LV_EVENT_ALL, NULL);

}

The idea is to create the gauge inside the panel. ui_panel4

2

I believe the gauge is now referred to as a meter. See the docs for the meter object: Meter (lv_meter) — LVGL documentation

has plenty of working examples.

3

Tanks I aplyed the sample:

image
image486×840 33.3 KB

I use:


static void set_value(void * indic, int32_t v)
{
    lv_meter_set_indicator_value(MyGauge, indic, v);
}

void f_gauge(){

          MyGauge = lv_meter_create(ui_Panel4);
          lv_obj_center(MyGauge);
          lv_obj_set_size(MyGauge, 200, 200);

          /*Add a scale first*/
          lv_meter_scale_t* scale = lv_meter_add_scale(MyGauge);
          lv_meter_set_scale_ticks(MyGauge, scale, 41, 2, 10, lv_palette_main(LV_PALETTE_GREY));
          lv_meter_set_scale_major_ticks(MyGauge, scale, 8, 4, 15, lv_color_black(), 10);

          lv_meter_indicator_t* indic;

          /*Add a blue arc to the start*/
          indic = lv_meter_add_arc(MyGauge, scale, 3, lv_palette_main(LV_PALETTE_BLUE), 0);
          lv_meter_set_indicator_start_value(MyGauge, indic, 0);
          lv_meter_set_indicator_end_value(MyGauge, indic, 20);

          /*Make the tick lines blue at the start of the scale*/
          indic = lv_meter_add_scale_lines(MyGauge, scale, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_BLUE),
                                          false, 0);
          lv_meter_set_indicator_start_value(MyGauge, indic, 0);
          lv_meter_set_indicator_end_value(MyGauge, indic, 20);

          /*Add a red arc to the end*/
          indic = lv_meter_add_arc(MyGauge, scale, 3, lv_palette_main(LV_PALETTE_RED), 0);
          lv_meter_set_indicator_start_value(MyGauge, indic, 80);
          lv_meter_set_indicator_end_value(MyGauge, indic, 100);

          /*Make the tick lines red at the end of the scale*/
          indic = lv_meter_add_scale_lines(MyGauge, scale, lv_palette_main(LV_PALETTE_RED), lv_palette_main(LV_PALETTE_RED), false,0);
          lv_meter_set_indicator_start_value(MyGauge, indic, 80);
          lv_meter_set_indicator_end_value(MyGauge, indic, 100);

          /*Add a needle line indicator*/
          indic = lv_meter_add_needle_line(MyGauge, scale, 4, lv_palette_main(LV_PALETTE_GREY), -10);

           /*Create an animation to set the value*/
          lv_anim_t a;
          lv_anim_init(&a);
          lv_anim_set_exec_cb(&a, set_value);
          lv_anim_set_var(&a, indic);
          lv_anim_set_values(&a, 0, 100);
          lv_anim_set_time(&a, 2000);
          lv_anim_set_repeat_delay(&a, 100);
          lv_anim_set_playback_time(&a, 500);
          lv_anim_set_playback_delay(&a, 100);
          lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
          lv_anim_start(&a);

}