Making another new widget

[kdschlosser]

Volume knob

all the colors will be able to be changed and the user can set a conical gradient image to the tick marks and they will change color as the knob moves. The user will be able to set the glow colors to align with the tick colors if they wanted to.

[kdschlosser]

Well it is done… Just have to run through and see if there are any bugs…

I am not able to save the script in the simulator for some reason so you will have to copy and paste the code into it and click on the “restart” button at the top. The script will run in the simulator as is and no changes need to be made.

kdschlosser/mp_lvgl_widgets/blob/main/mp_lv_widgets/knob_ctrl.py

What you can do…

Set the start and stop angles
Set the min and max values
Set an increment amount
Set snapping the control to the tick marks
Setting the number of tick marks
Setting the number of major tick marks
Setting the major ticks and minor ticks length and width
Setting the knob gradient color and background color
Setting the glow color for the knob and for the indicator separately
Setting the indicator gradient and background color
Setting a gradient to the tick marks
Picking if you want to synchronize the glow color with the tick mark color

[kdschlosser]

Here is the widget already in the simulator for anyone that wanted to check it out.

https://sim.lvgl.io/v9.0/micropython/ports/javascript/index.html?script_startup=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/header.py&script=https://raw.githubusercontent.com/lvgl/lvgl/0d9ab4ee0e591aad1970e3c9164fd7c544ecce70/examples/widgets/slider/lv_example_slider_2.py&script_direct=a6ce1641c1ebed3eab425b674291af8ea1e2214b

[kdschlosser]

here is a video of the widget on youtube.

LVGL MicroPython knob widget

[kdschlosser]

I made an addition to this widget, I added a segmented display to the center of the knob. The segmented display is drawn and is not a font. I also added a kind of glass to the center as well. Still trying to work out how I can get the class over the top of the segmented display which is how it should be. It still looks cool the way it is, until I fix it.

I am also going to be adding an option to change the round grip to an illuminated line and I am also going to add a glow to the tick marks as well. Adding that glow is going to a challenge because it is not supported by LVGL out of the box and I don’t want to have to do all kinds of crazy iteration for a gradient for each line. I am thinking I can use lv_obj set to be transparent and set a shadow to it, size it to the same size as the line and then rotate the object to match the angle and position if where it needs to be. Gonna have to make a wrapper for lv_obj to handle doing that.

I would post a link for the script in the simulator but unfortunately it is too large and I am not able to save the script.

[kdschlosser]

OK got the glow on the ticks and I also have the glass overlay sorted out.

It’s looking pretty good I think.

[ACBIAS]

It is! Damn.good.looking. (but not very compact)

[kdschlosser]

@ACBIAS

but not very compact

what do you mean by that???

[kdschlosser]

Is this better?

[ACBIAS]

I meant that real-estate on tiny LCDs is precious, what is the size of this widget ?
It´s the perfect widget for a thermostat and a round LCD. Those have a rather low resolution, like 240x240 pixels. The bigger ones are expensive.

[kdschlosser]

it can be sized. It’s not static in it’s sizing. The larger one is 480 x 480 and the small one is 200 x 200