How can I create a gauge with needle?

How to
1

What do you want to achieve?

I want to create a gauge with needle

What have you tried so far?

I tried to customize the Arc widget but still the needle issue how I can put it in the middle of the gauge.

Screenshot or video

Others

  • SquareLine Studio version:
  • Operating system:
  • Target hardware:
2

The Meter (which is a gauge) widget of LVGL is not supported yet in SLS.

As a workarond you can create a Panel and create a Meter on it from from code after calling ui_init();. This way it won’t be overwritten by a new export. E.g.

ui_init();
lv_obj_t * meter1  = lv_meter_create(ui_Panel1);
1 Like
3

A Meter/Gauge would be a very welcome addition to SLS.

4

Our next priority is adding the missing widget, so in the next future finally the meter will be added too.

5

I’ve been able to create nice looking gauges in the current version of Square Line following the basic idea of this clock face instructable.

For my current project I have speed, altitude and heading gauges based on data collected from a GPS module in Arduino. You choose an image for your gauge background and another image for your ‘needle’. You can then change the rotation property of your needle to follow the gauge background and display useful data. The map function in Arduino is useful in setting the data range to the correct angle for your gauge. Setting the pivot point of rotation for your needle can be a bit of trial and error until you get it just right .
image

The attached image shows my example of a speed and heading gauge. For the heading gauge I rotated the exterior of the image leaving the center stationary to appear more like a heading gauge in an aircraft cockpit. The code below shows how to map the needle image from a 0 to 330 degree rotation and also display the speed data as a character array.

speed_angle = map(gps.speed.kmph(), 0, 160, 0, 3300);
char buf2[60];
sprintf(buf2, “%0.2f”, gps.speed.kmph());
lv_label_set_text(ui_Speeddata, buf2);
lv_img_set_angle(ui_Speedneedle, speed_angle);

Lucas

1 Like