esphome-energy-dashboard/ui/layout.yml at main · firsttris/esphome-energy-dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# LVGL UI Layout

lvgl:
  log_level: NONE
  color_depth: 16

  displays:
    - tft_display

  touchscreens:
    - tft_touch

  # Loading Overlay (Top Layer)
  top_layer:
    widgets:
      - obj:
          id: loading_overlay
          width: 480
          height: 480
          bg_color: 0x0a0a0a
          border_width: 0
          radius: 0
          widgets:
            # Energy Icon
            - label:
                align: CENTER
                y: -80
                text: "\U000F0A72"
                text_font: icons_32
                text_color: 0xFFBB33

            # App Name
            - label:
                align: CENTER
                y: -30
                text: "Energie Dashboard"
                text_font: roboto_16
                text_color: 0xFFFFFF

            # Status Text
            - label:
                id: loading_status
                align: CENTER
                y: 20
                text: "Verbinde..."
                text_font: roboto_14
                text_color: 0x888888

            # Spinner
            - spinner:
                id: loading_spinner
                align: CENTER
                y: 60
                width: 40
                height: 40
                spin_time: 1.5s
                arc_length: 90deg
                arc_width: 4
                arc_color: 0x333333
                indicator:
                  arc_color: 0x00BBFF
                  arc_width: 4

            # Progress Bar
            - bar:
                id: loading_bar
                align: CENTER
                y: 120
                width: 280
                height: 8
                value: 0
                min_value: 0
                max_value: 100
                bg_color: 0x222222
                border_width: 0
                radius: 4
                indicator:
                  bg_color: 0x00FF99
                  radius: 4

  # Pages mit Swipe-Funktion
  pages:
    - !include page_dashboard.yml
    - !include page_power_table.yml

  # Swipe zwischen den Seiten aktivieren
  page_wrap: true

  # Dashboard beim Start laden
  on_ready:
    - lvgl.page.show: page_dashboard