Separate yaml for views/badges (or rather frontend)

Configuration
1

Hi everybody,

I have already read splitting up the configuration, but that did not help me with this issue.

When I am in the webGUI and click customize overview (or similar?? My GUI is in German, so English might be different from what I guess it’d be translated to), then raw configuration editor, I get an this content that I can manually edit

title: Home
views:
  - badges: []
    cards:
      - entity: weather.home
        type: weather-forecast
      - hold_action:
          action: none
        image: >-
          https://www.yr.no...etc...
        tap_action:
          action: none
        type: picture
    panel: false
    path: default_view
    theme: default
    title: Home
  - badges: []
    cards:
      - entities:
          - entity: sensor.az_rechner_watt
          - entity: sensor.az_rechner_voltage
          - entity: sensor.az_rechner_heute
          - entity: sensor.az_rechner_gestern
          - entity: sensor.az_rechner_total
        show_header_toggle: false
        title: Rechner
        type: entities
      - entities:
          - entity: sensor.sz_klimaanlage_watt
          - entity: sensor.sz_klimaanlage_voltage
          - entity: sensor.sz_klimaanlage_heute
          - entity: sensor.sz_klimaanlage_gestern
          - entity: sensor.sz_klimaanlage_total
        show_header_toggle: false
        title: Klimaanlage
        
    icon: 'mdi:flash'
    show_header_toggle: false
    title: Stromverbrauch
  - badges: []
    cards:
      - type: markdown
        content: ' Messwerte **Erdgeschoss**'
        title: Unten
      - type: entities
        entities:
          - entity: sensor.arbeitszimmer_temperatur
          - entity: sensor.arbeitszimmer_luftfeuchtigkeit
          - entity: sensor.arbeitszimmer_druck
        title: Arbeitszimmer
        show_header_toggle: false
      - type: entities
        entities:
          - entity: sensor.bad_unten_temperatur
          - entity: sensor.bad_unten_luftfeuchtigkeit
          - entity: sensor.bad_unten_druck
        title: Bad unten
        show_header_toggle: false
      - type: entities
        entities:
          - entity: sensor.flur_temperatur
          - entity: sensor.flur_luftfeuchtigkeit
          - entity: sensor.flur_druck
        title: Flur
        show_header_toggle: false
      - type: entities
        entities:
          - entity: sensor.kuche_temperatur
          - entity: sensor.kuche_luftfeuchtigkeit
          - entity: sensor.kuche_druck
        title: Küche
        show_header_toggle: false
      - type: entities
        entities:
          - entity: sensor.wohnzimmer_temperatur
          - entity: sensor.wohnzimmer_luftfeuchtigkeit
          - entity: sensor.wohnzimmer_druck
        title: Wohnzimmer
        show_header_toggle: false
      - type: markdown
        content: ' Messwerte **erster Stock**'
        title: Oben
      - type: entities
        entities:
          - entity: sensor.schlafzimmer_temperatur
          - entity: sensor.schlafzimmer_luftfeuchtigkeit
          - entity: sensor.schlafzimmer_druck
        show_header_toggle: false
        title: Schlafzimmer
        icon: 'mdi:thermostat'

I deleted multiple lines from this because they just contained repeated values (each temperature sensor etc.), but you get the point from this.

Can I copy and paste this to a file that I edit, rather than “having to” do this over the GUI? This would be very helpful for two reasons:

  1. I test all my new configurations on a local dockerized instance of home assistant; once things work the way I want them to, I scp them over to my “actual” home assistant host. When I do this and reload, changes in the backend will be done (new sensors, switches, automations etc. exist), but I have to manually edit the frontend because it does not look like my testing environment.

  2. as you can see in my example code above, many of these cards are pretty much following a pattern that would be much easier to edit in vim by yanking, pasting, and then doing search and replace compared to manually doing this in the raw configuration editor (I know, I could just copy it all, paste into vim, edit there, copy again, and paste back into raw configuration editor… but that still seems kinda impractical)

I have already looked through different peoples’ configuration files which were linked with the examples, but those are often very customized and people have different approaches of including their files. My (first user!) attempt is to keep the config as small as possible and always either !include or !include_dir_merge_list my yaml files depending on their content. Example

configuration.yaml
|- > sensor/
       | - > 433.yaml (RF codes input)
       | - > sonarr.yaml (sonarr)
       | - > measurements.yaml (all rooms temperature, humidity, pressure)
       | - > strom/ (power consumption, one file per device)
           | - > office_pc.yaml
           | - > kitchen_dishwasher.yaml

Should/could I just !include my_gui.yaml and source it in configuration.yaml? Or would it be better like

configuration.yaml
|- > gui/
       | - > card1.yaml 
       | - > card2.yaml 
       | - > card3.yaml

Lastly, I am not sure what I would source this as… cards: !include my_gui.yaml? badges: !include my_gui.yaml? Something completely different?

Thanks for your help :slight_smile: I have used hass for about a week now and while yaml is a bit hard to get into for a self taught hobbyist without much programming knowledge such as myself, I am really starting to like it, especially the way that everything can be configured through text files (opposed to node-red or ioBroker where most things are done manually in the GUI).

Cheers!

2

You can. Look for ‘lovelace yaml mode’.

1 Like
3

Thank you!

1 Like