Welcome to K210 Module repository

3 Slider

3.1 experimental goals

In this lesson, you will learn how to draw sliders.

The reference code path for this experiment ：CanMV\04-GUI\slider.py

3.2 experimental procedure

The factory firmware of the reference code path module in this experiment has been integrated with the lvgl graphical library. If you have downloaded other firmware, please burn it back to the factory firmware before performing the experiment.

1. Import the relevant libraries.

import lvgl as lv
import lvgl_helper as lv_h
import lcd
import time
from machine import Timer
import touchscreen as ts

2. Initialize the lcd, touchpad, and lvgl.

xxxxxxxxxx
lcd.init()
ts.init()
lv.init()

3. Connect K210's screen driver to lvgl's display registration interface.

xxxxxxxxxx
disp_buf1 = lv.disp_buf_t()
buf1_1 = bytearray(320*10)
lv.disp_buf_init(disp_buf1, buf1_1, None, len(buf1_1)//4)
disp_drv = lv.disp_drv_t()
lv.disp_drv_init(disp_drv)
disp_drv.buffer = disp_buf1
disp_drv.flush_cb = lv_h.flush
disp_drv.hor_res = 320
disp_drv.ver_res = 240
lv.disp_drv_register(disp_drv)

4. Connect the K210 touchpad driver pair to the lvgl input registration interface.

xxxxxxxxxx
indev_drv = lv.indev_drv_t()
lv.indev_drv_init(indev_drv)
indev_drv.type = lv.INDEV_TYPE.POINTER
indev_drv.read_cb = lv_h.read
lv.indev_drv_register(indev_drv)

5. Create a new slider.

xxxxxxxxxx
scr = lv.obj()
slider = lv.slider(scr)
slider.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
slider.set_width(200)
slider.set_height(30)
slider.set_range(0, 100)
slider.set_value(0, 0)
slider.set_event_cb(on_slider_changed)

6. Create a new text label on the slider called Label.

xxxxxxxxxx
textView = lv.label(scr)
textView.align(lv.scr_act(), lv.ALIGN.CENTER, -50, -50)
textView.set_text("Value:0")
lv.scr_load(scr)

7. The touch event of the slider is handled as follows: the value of the slider is updated to the label in real time for display.

xxxxxxxxxx
def on_slider_changed(self, obj=None, event=-1):
    slider_value = slider.get_value()
    textView.set_text("Value: %d" % (slider_value))
    print("slider:", slider_value)

8. Since the images of lvgl need to be updated in real time, it is necessary to refresh the tasks of lvgl every 5 ms.

xxxxxxxxxx
tim = time.ticks_ms()
while True:
    if time.ticks_ms()-tim > 5:
        tim = time.ticks_ms()
        lv.task_handler()
        lv.tick_inc(5)

3.3 experimental results

Connect the K210 module to the computer through the microUSB data cable, CanMV IDE click the connect button, after the connection is completed click the Run button to run the routine code. You can also download the code as main.py and run it in the K210 module.

You can see a slider in the middle of the LCD display, touch and slide, you can see the above string shows the value of the slider in real time.

3.4 experiment summary

Using CanMV IDE, with MicroPython syntax written in the factory firmware, it is very convenient to draw the slider and handle the slider value change event in real time. The slider event handler is not supposed to print any data, but is included here as a convenience.