Some LVGL help: rotate

LVGL is kind of a dog in YAML, but it is cool that it is now easy (easier) to make UI’s and I’m pretty excited about that as it has been holding up more than a few projects of mine because I do not have the patience to design buttons from scratch! HAHA

But there are a couple things I would love some help with…

1 - the keyboard built in widget seems not to work, no matter what I do I get a puke of missing characters and configs - anyone have that working? But there is a keypad example in the beta docs, I I lifted there one…

2 - how do I rotate the screen 90 degrees? I think I have it right in the display, but the lvgl section wont rotate at all.

3 - this is an m5 tough that I am making into a key code that I can then open a gate lock, turn on lights, etc… and I cannot figure out how to dim the backlight so if anyone knows that, would be awesome too

thanks…as always!

display:
  - platform: ili9xxx
    id: this_display
    # 320x240
    model: M5STACK
    cs_pin: GPIO5
    dc_pin: GPIO15
    auto_clear_enabled: false 
    transform:
      swap_xy: true
      mirror_x: true
    dimensions:
      height: 240
      width: 320

lvgl:
  # 240 x 320
  displays:
    - this_display
  touchscreens:
    - this_touch
  buffer_size: 100%
  log_level: INFO
  color_depth: 16
  bg_opa: TRANSP
  default_font: roboto20
  bg_color: 0x000000

  pages:
      - id: keypad_page
        widgets:
          - led:
              id: lvgl_led
              x: 5
              y: 10
              color: 0xFF0000
              brightness: 70%
          - obj:
              width: 220
              height: 30
              align_to:
                id: lvgl_led
                align: OUT_RIGHT_MID
                x: 10
              border_width: 1
              border_color: 0
              border_opa: 50%
              pad_all: 0
              bg_opa: 80%
              bg_color: 0x111111
              shadow_color: 0
              shadow_opa: 50%
              shadow_width: 10
              shadow_spread: 3
              radius: 5
              widgets:
                - label:
                    id: lvgl_label
                    align: CENTER
                    text: "Enter code and \U000F012C"
                    text_align: CENTER

          - buttonmatrix:
              id: lvgl_keypad
              x: 0
              y: 40
              width: 320
              height: 200
              items:
                pressed:
                  bg_color: 0xFF8800
              rows:
                - buttons:
                    - text: 1
                      control:
                        no_repeat: true
                    - text: 2
                      control:
                        no_repeat: true
                    - text: 3
                      control:
                        no_repeat: true
                - buttons:
                    - text: 4
                      control:
                        no_repeat: true
                    - text: 5
                      control:
                        no_repeat: true
                    - text: 6
                      control:
                        no_repeat: true
                - buttons:
                    - text: 7
                      control:
                        no_repeat: true
                    - text: 8
                      control:
                        no_repeat: true
                    - text: 9
                      control:
                        no_repeat: true
                - buttons:
                    - text: "\U000F030D"
                      key_code: "*"
                      control:
                        no_repeat: true
                    - text: 0
                      control:
                        no_repeat: true
                    - text: "\U000F012C"
                      key_code: "#"
                      control:
                        no_repeat: true

  top_layer:
    widgets:
      - label:
          text: "\uF1EB"
          id: lbl_hastatus
          hidden: true
          align: top_right
          x: -2
          y: 7
          text_align: right
          text_color: 0xFFFFFF
      - obj:
          id: boot_screen
          x: 0
          y: 0
          width: 100%
          height: 100%
          bg_color: 0xffffff
          bg_opa: COVER
          radius: 0
          pad_all: 0
          border_width: 0
          widgets:
            - image:
                align: CENTER
                src: boot_logo
                y: -40
            - spinner:
                align: CENTER
                y: 95
                height: 50
                width: 50
                spin_time: 1s
                arc_length: 60deg
                arc_width: 8
                indicator:
                  arc_color: 0x18bcf2
                  arc_width: 8
          on_press:
            - lvgl.widget.hide: boot_screen

Did you include the appropriate glyphs in your (non-standard) default font? Your config doesn’t show how you defined the roboto20 font so I can’t tell.

how do I rotate the screen 90 degrees

Did you try different combinations of of swap_xy: true/false and the mirror_ options? There are 8 possible combinations, only one will be what you want.