How can I create a gauge with needle?

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:

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

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

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

1 Like

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

Hi. Your air devices interface works ? can I watch a video of it working?

Hi Roman,
Yes it worked quite well and looked pretty cool. This was from a year ago so I’ll have to see if I still have the project setup. If I do I will gladly take a video for you.

++EM++

roman,
I found the prototype and took some videos for you. sorry for the delay. my health is poor and i was in the hospital for some time.



Since the unit itself is not moving the speed being read is obviously zero. i used a seeed gps module connected to the hardware uart of a seeed esp32s3. The tft screen uses the SPI interface of the same esp32s3. I had to use the esp32s3 MCU because I needed the extra memory to handle all the images from my square line studio project.
regards,
++EM++