Need help designing UI for a smart home project

I am working on developing a smart home device for personal use. I am using a [Waveshare 1.8inch round display (Blue)](https://www.waveshare.com/esp32-s3-knob-touch-lcd-1.8.htm) device to control the lights in my house.

There is a web based [UI designer](https://lvgl.espboards.dev/) for developing UI. I am trying to add 4 switches on page 1. Here is my crude design.

Requesting UI experts for suggestions to make it more aesthetic. I have chosen random colors but the knob is a CNC machines aluminum in color blue.

![img](ke2cl1pyfpjh1)

Also attaching yaml configuration that you can import in LVGL designer and modify the design.

# >>> LVGL Designer - generated from the canvas. >>>
# This block is regenerated from the canvas — edits here are not preserved.
lvgl:
  pages:
    - id: canvas\_1
      bg\_color: 0x111827
      pad\_all: 0
      widgets:
        - switch:
            id: lv\_switch\_1
            x: 230
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg\_color: 0x4B5563
            indicator:
              checked:
                bg\_color: 0x10B981
            knob:
              bg\_color: 0xFFFFFF
              border\_color: 0x9CA3AF
              border\_width: 1

        - switch:
            id: lv\_switch\_2
            x: 80
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg\_color: 0x4B5563
            indicator:
              checked:
                bg\_color: 0x10B981
            knob:
              bg\_color: 0xFFFFFF
              border\_color: 0x9CA3AF
              border\_width: 1

        - switch:
            id: lv\_switch\_3
            x: 80
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg\_color: 0x4B5563
            indicator:
              checked:
                bg\_color: 0x10B981
            knob:
              bg\_color: 0xFFFFFF
              border\_color: 0x9CA3AF
              border\_width: 1

        - switch:
            id: lv\_switch\_4
            x: 230
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg\_color: 0x4B5563
            indicator:
              checked:
                bg\_color: 0x10B981
            knob:
              bg\_color: 0xFFFFFF
              border\_color: 0x9CA3AF
              border\_width: 1

        - label:
            id: lv\_label\_10
            x: 98
            y: 55
            width: 165
            height: 45
            text: "Living Room"
            text\_color: 0xFFFFFF
            text\_align: CENTER
            text\_font: montserrat\_28

        - label:
            id: lv\_label\_11
            x: 80
            y: 106
            width: 60
            height: 24
            text: "Light 1\\n"
            text\_color: 0xFFFFFF

        - label:
            id: widget\_1786871459028\_wrt23dzeg
            x: 230
            y: 106
            width: 60
            height: 24
            text: "Light 2\\n"
            text\_color: 0xFFFFFF

        - label:
            id: widget\_1786871476986\_zy8xzdjc6
            x: 80
            y: 196
            width: 60
            height: 24
            text: "Light 3\\n"
            text\_color: 0xFFFFFF

        - label:
            id: widget\_1786871488127\_eo0tk9dzg
            x: 230
            y: 196
            width: 60
            height: 24
            text: "Desk Light"
            text\_color: 0xFFFFFF
# <<< end LVGL Designer block <<<
reddit.com
u/RedditSurfer82 — 5 days ago

Need help designing UI for a smart home project

I am working on developing a smart home device for personal use. I am using a Waveshare 1.8inch round display (Blue) device to control the lights in my house.

There is a web based UI designer for developing UI. I am trying to add 4 switches on page 1. Here is my crude design.

Requesting UI experts for suggestions to make it more aesthetic. I have chosen random colors but the knob is a CNC machines aluminum in color blue.

https://preview.redd.it/ke2cl1pyfpjh1.png?width=598&format=png&auto=webp&s=0f7d0ccc51f50b966832fc6e50743cba0e44414c

Also attaching yaml configuration that you can import in LVGL designer and modify the design.

# >>> LVGL Designer - generated from the canvas. >>>
# This block is regenerated from the canvas — edits here are not preserved.
lvgl:
  pages:
    - id: canvas_1
      bg_color: 0x111827
      pad_all: 0
      widgets:
        - switch:
            id: lv_switch_1
            x: 230
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_2
            x: 80
            y: 130
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_3
            x: 80
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - switch:
            id: lv_switch_4
            x: 230
            y: 220
            width: 60
            height: 30
            state:
              checked: true
            bg_color: 0x4B5563
            indicator:
              checked:
                bg_color: 0x10B981
            knob:
              bg_color: 0xFFFFFF
              border_color: 0x9CA3AF
              border_width: 1

        - label:
            id: lv_label_10
            x: 98
            y: 55
            width: 165
            height: 45
            text: "Living Room"
            text_color: 0xFFFFFF
            text_align: CENTER
            text_font: montserrat_28

        - label:
            id: lv_label_11
            x: 80
            y: 106
            width: 60
            height: 24
            text: "Light 1\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871459028_wrt23dzeg
            x: 230
            y: 106
            width: 60
            height: 24
            text: "Light 2\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871476986_zy8xzdjc6
            x: 80
            y: 196
            width: 60
            height: 24
            text: "Light 3\n"
            text_color: 0xFFFFFF

        - label:
            id: widget_1786871488127_eo0tk9dzg
            x: 230
            y: 196
            width: 60
            height: 24
            text: "Desk Light"
            text_color: 0xFFFFFF
# <<< end LVGL Designer block <<<
reddit.com
u/RedditSurfer82 — 5 days ago

Help with SG90 servo motor

I have a SG90 servo motor that I have connected to Arduino uno r3 for an obstacle avoidance car project. I have an ultrasound sensor mounted on the servo motor for it to scan for obstacles left and right. I had the setup working however my kid was playing with for a while and then the servo stopped working. It is making a "ticking" sound. I got a cheap servo tester and when I connect only the input, the manual led on tester lights up. If I connect the servo to output when connected to the input, all 3 leds (manual, neutral and auto) light up and follow the on/off sequence matching the "ticking" noise. There is some lubricant inside the case of the serve where the gears are housed but I suppose that is normal. Is my servo kaput ?

reddit.com
u/RedditSurfer82 — 8 days ago
▲ 3 r/sleepheadphones+2 crossposts

Earbuds recommendation for sleep

Hi,

I am located in India. I am looking for ows earbuds that are comfortable to wear for long continuous use.

I live in a location that is a little noisy even during night and would like to use the earbuds with anc to help me with my sleep. I am a side sleeper so I want something that is comfortable and does not hurt my ears.

I do have sony wh xm3 but I cannot use that during sleep.

I am considering. soundcore v30i and aerofit 2.

Please let me know your thoughts and preference among the two.

reddit.com
u/RedditSurfer82 — 24 days ago

NFC tap to power on and connect headphone not working

Hi, few days back I moved from Google pixel 6 pro to oneplus 15. I have a sony wh1000xm3 which has nfc tap to poweron and correct. I use this feature a lot and worked well with pixel 6 pro. However after switching to oneplus 15. Nothing happens when I tap the headphone to oneplus 15. NFC and bluetooth is turned on

reddit.com
u/RedditSurfer82 — 1 month ago