LVGL color picker

Share your Projects!
1

After much googling and finally a few hours of Google AI this finally works.
It’s not complete in such a way that it can control something yet, but the values are there.
Hopefully we can use them somehow.

1000001555
10000015551920×1080 57.1 KB

round display with 466x466 px

esphome:
....
  platformio_options:
    build_flags:
      - "-DLV_USE_COLORWHEEL=1"

.....
.....


lvgl:
  on_boot:
    - lambda: |-
        lv_obj_t * parent = id(cw_container); 
        lv_obj_t * cw = lv_colorwheel_create(parent, true);
        lv_obj_set_size(cw, 300, 300);
        lv_obj_center(cw);

        // 100 pixel line width on arc
        lv_obj_set_style_arc_width(cw, 100, LV_PART_MAIN);

        // knob size 10 px larger than arc
        lv_obj_set_style_pad_all(cw, 10, LV_PART_KNOB);

        lv_obj_add_event_cb(cw, [](lv_event_t * e) {
          if(lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) {
            lv_obj_t * target = lv_event_get_target(e);
            lv_color_t c = lv_colorwheel_get_rgb(target);
            
            uint32_t rgb = lv_color_to32(c);
            uint8_t r = (rgb >> 16) & 0xFF;
            uint8_t g = (rgb >> 8) & 0xFF;
            uint8_t b = rgb & 0xFF;

            ESP_LOGI("lvgl", "R:%d G:%d B:%d", r, g, b);
            
          }
        }, LV_EVENT_VALUE_CHANGED, NULL);
  id: my_lvgl
  log_level: WARN
  bg_color: "0x000000"
  displays:
    - main_display

  pages:
....
....
    - id: page_3
      widgets:
        - obj:
            id: cw_container
            bg_opa: transp
            scrollbar_mode: "off"
            scrollable: false
            border_width: 0
            width: 340
            height: 340
            align: CENTER

      on_swipe_left:
        - lambda: 'lv_indev_wait_release(lv_indev_get_act());'
        - lvgl.page.next:
      on_swipe_right:
        - lambda: 'lv_indev_wait_release(lv_indev_get_act());'
        - lvgl.page.previous
1 Like