CYD display: I can't remove the white border

ESPHome
1

Good morning everyone, I was given 2 yellow chip CYD touch displays and for a few days I have been trying to set up the various pages.
As you can see from the photo I have 5 pages and to the right of it the reference page opens. I am not able to eliminate that annoying white border that I could use that space to make the page a little bigger.

displ
displ1920×1149 195 KB

I try to use

disp_bg_color: 0x000000
bg_color: 0x000000
border_color: 0x000000

Can you help me understand what I am doing wrong? I am using LVGL
thanks

lvgl:
  disp_bg_color: 0x000000
  displays:
    - main_display
  touchscreens:
    - main_touch
  buffer_size: 20%

  widgets:
  - tabview:
      id: tabview_id
      position: LV_DIR_LEFT
      width: 320
      height: 240
      size: 105
      tab_style:
        bg_color: 0x000000
        border_opa: 0
        border_color: 0x000000
        border_width: 0
        border_side: none
        outline_width: 0
        shadow_width: 0
        pad_left: 0
        pad_right: 0
        pad_top: 0
        pad_bottom: 0
        items:
          text_color: 0xFFFFFF
          text_font: font20
          text_align: left


      tabs:
        - name: FOTOVOLTAICO
          id: tab_1
          widgets:
            - obj:
                id: bg_tab_1
                x: 0
                y: 0
                width: 185
                height: 210
                bg_color: 0x000000
                border_width: 0

            - label:
                id: battery_label
                text: "BATTERIA: --%"
                x: 0
                y: 0
                text_color: 16777215
                text_font: font2
                recolor: true

            - label:
                id: enel_label
                text: "CONSUMO ENEL: --W"
                x: 0
                y: 15
                text_color: 16777215
                text_font: font2
                recolor: true

            - label:
                id: load_label
                text: "CARICO SCARICO: --A"
                x: 0
                y: 30
                text_color: 16777215
                text_font: font2
                recolor: true

            - label:
                id: pv_label
                text: "PANNELLI: --W"
                x: 0
                y: 45
                text_color: 16777215
                text_font: font2
                recolor: true

        - name: ELETTRODOMESTICI
          id: tab_2
          widgets:
            - obj:
                id: bg_tab_2
                x: 0
                y: 0
                width: 215
                height: 240
                bg_color: 0x003366  # blu scuro
                border_width: 0

            - label:
                text: "Contenuto della Pagina 2"
                x: 10
                y: 10
                text_color: 0xFFFFFF
                text_font: font2

        - name: GIARDINO
          id: tab_3
          widgets:
            - obj:
                id: bg_tab_3
                x: 0
                y: 0
                width: 215
                height: 240
                bg_color: 0x003300  # verde scuro
                border_width: 0

            - label:
                text: "Contenuto della Pagina 3"
                x: 10
                y: 10
                text_color: 0xFFFFFF

        - name: METEO
          id: tab_4
          widgets:
            - obj:
                id: bg_tab_4
                x: 0
                y: 0
                width: 215
                height: 240
                bg_color: 0x330000  # rosso scuro
                border_width: 0

            - label:
                text: "Contenuto della Pagina 4"
                x: 10
                y: 10
                text_color: 0xFFFFFF

        - name: ATTUATORI
          id: tab_5
          widgets:
            - obj:
                id: bg_tab_5
                x: 0
                y: 0
                width: 215
                height: 240
                bg_color: 0x333300  # giallo scuro
                border_width: 0

            - label:
                text: "Contenuto della Pagina 5"
                x: 10
                y: 10
                text_color: 0xFFFFFF
2

Is that correct? 105%

3

hi, no the value 105 refers to the width px of the selection menu tab on the left. If resize this value change the width.
I just wanted to remove that white border and I only now notice that the page has curved corners instead of 90 degrees

4

I’m not a display guy… Documentation gives % for tabview size option.

  • size (Optional, percentage): The height (in case of TOP, BOTTOM) or width (in case of LEFT, RIGHT) tab buttons. Defaults to 10%.

But your code looks different from docs anyway…

5

I tried to rewrite the tabview from scratch.
I think I solved it by trying to put the bg_color: before tabstyle

widgets:
  - tabview:
      id: tabview_id
      position: LV_DIR_LEFT
      bg_color: 0x000000
      width: 320
      height: 240
      size: 95
      tab_style:

could you tell me if there is a graphical editor to create layouts like EES Studio to avoid waiting minutes for each micro adjustment of the code? I don’t think EES Studio exports to yaml

6

Like I wrote, I not a display guy…
I just wonder about these lines:

Shouldn’t the width and height be on lvgl: ?
https://esphome.io/components/lvgl/widgets.html#tabview

7

No, but you can use the SDL display and host mode to test layouts in just seconds instead of minutes.

8

hi, yes what you say is correct but during the compilation of the code it gives me an error, I tried to put them under another indentation and it compiled successfully.
These are the values ​​of the display size, Size 95 instead is the width of the selection menu on the left.
Why it works in another section and not where it should be I could not tell you.

9

I looked at some topics about it, it seems interesting but some say that it only works on windows, do you confirm? I looked at the esphome site in the documentation it talks about both DISPLAY SDL and WSL https://esphome.io/components/host.html

10

Doesn’t fit in my head…
So what happens if you remove width an height and set size: 30% ?

11

Then some are wrong. It works on MacOS, Linux and Windows (though running ESPHome on Windows is problematic at best, and using WSL makes it a lot easier.)

12

I tried tonight because I’m out for work. If I remove those two lines the whole display area including the menu becomes white