Stuc on include files

ESPHome
1

stuck on include and packages
i'm trying to split up my code and make it more readable, and try to code less. So i rewrote my esphome file.

this is the main file

substitutions:
  devicename: test-schakelaar
  light_name: Office
  friendly_name: Test schakelaar


packages:
  - !include .base.yaml
  - !include .base.esp32c6-touchlcd.yaml
  - !include test-schakelaar/theme.yaml

lvgl:
  <<: !include test-schakelaar/lvgl-base.yaml
  pages:
    - id: canvas_1
      <<: !include test-schakelaar/layout/page1.yaml
    - id: canvas_2
      <<: !include test-schakelaar/layout/page2.yaml

page1 has this content, only first part showen:

bg_color: 0x0
pad_all: 0
scrollbar_mode: "OFF"


!include { file: test-schakelaar/layout/wdg_button.yaml, vars: { ib_card: "id1", page: "2"  } }
...

wdg_button contains:

widgets:
  - obj:
      id: ${ib_card}
      x: 0
      y: 0
      width: 50
      height: 50
      align: TOP_LEFT
      bg_color: 0x070E1B
      bg_opa: 95%
      border_width: 1
      border_color: 0x162038
      border_opa: 20%
      radius: 4
      shadow_width: 0
      shadow_color: 0xFBBF24
      shadow_opa: 0%
      scrollbar_mode: "OFF"
      pad_all: 0
      clickable: true
      on_click:          
        - lvgl.page.show: ${page}
      widgets:
        - label:
            id: ${ib_card}_icon1
            x: 9
            y: 15
            width: 30
            height: 18
            text: "\U000F1253"
            text_font: mdi_icons_18
            text_align: CENTER
            text_color: 0xFBBF24
            text_opa: 100%
        - led:
            id: ${ib_card}_led
            x: 39
            y: 5
            width: 5
            height: 5
            color: 0xFBBF24
            brightness: 70%
            border_width: 0
            radius: 9999
            shadow_width: 0

The problem is that i get an error.

like below:

while scanning a simple key
in "/config/esphome/test-schakelaar/layout/page1.yaml", line 7, column 1
could not find expected ':'
in "/config/esphome/test-schakelaar/layout/page1.yaml", line 55, column 3

i don't know what is wrong, the loaded widget is going to be there several times, but only on different position, like to add later more vars.

when looking at this page YAML Configuration in ESPHome - ESPHome - Smart Home Made Simple it seems to me there is nothing wrong.

could someone help me out.

The directory structure is:

toplevel:
main file
.base files

test-schakelaar:
theme file

layout:
page1
page2
wdg_button
2

According to that error your fault is likely to be in line 55, and sorry i have no idea what's on line 55

3

Maybe a YAML cut-n-paste error?

4

Do a validate - on the ellipsis menu of the device yaml. That should spit out the entire merged yaml so you can work out the error location.

5

if i do a validate, i get the same error.

6

The log is telling you exactly what is wrong. As @Arh said the problem is on line 55 of the listed file. Have you looked at that line number and/or at least posted the whole contents of that file?

You should also look at line 7 of the other file. I am only seeing 6 lines in what you posted.