Splitting up the picture-elements card

Share your Projects! Dashboards & Frontend
1

Hi,

inspired by Frenck I have started recently to develop a new Home Assistant configuration split up in small modular elements. However, I am stuck for the last some days at a point with the Picture-Elements card where I cannot make any progress and II hope that I find some expert help around here :wink:

This might look a bit complex at the beginning but bear with me, it is actually intended to simplify the structure of the Home Assistant configuration.

It starts with a dashboard called “Development Environment” in the devenv.yaml file:

title: Zuhause

button_card_templates: !include ../button_card_templates/button_card_templates.yaml
decluttering_templates: !include ../decluttering_templates/decluttering_templates.yaml

views: !include_dir_list ./views

This file calls the files in the view directory in which I have a file called 020_arbeitszimmer.yaml:

panel: true
path: arbeitszimmer
icon: mdi:desk

cards:
  - type: picture-elements
    image: /local/pictures/ha_wallpaper7.jpg
    elements:
      - type: custom:decluttering-card
        template: test_light

As shown above I am using a picture-elements card which shows an image on which I intend to show button-cards. As these button-cards will be repeatedly used throughout the implementation I have used decluttering-card to have a standard code for this type of button.

All decluttering cards are in a folder called decluttering-templates, in which there is the file decluttering_templates.yaml listing all existing decluttering files so far:

  lighttemplate:
    !include lighttemplate.yaml
  temperature_line:
    !include temperature_line.yaml
  style_screensetup:
    !include style_screensetup.yaml
  room_setup:
    !include room_setup.yaml
  generic_button:
    !include generic_button.yaml
  test_light:
    !include test_light.yaml

From there I am calling the test_light.yaml:

  - type: custom:button_card
    entity: light.az_schreibtisch
    icon: mdi:lamp
    title: Schreibtisch
    show_state: true
    styles:
      top: 25%
      left: 47%
      width: 90vw

BUT, that does not work :frowning:

The error message says that I have to define a card or an element. However, I have defined an element as far as I can see :wink: I have already played around with all sorts of indentations, etc. but that did not help :frowning:
(The error message, by the way, only appears at the very edge and is not full shown - there is a thing with those error messages, I think :wink: )

But of course, the error sits in front of the keyboard but I cannot get it to work.
If anybody has any idea - I would very much appreciate it!

Thanks!

2

You should start smaller in order to properly troubleshoot. First create a picture-element card, with just a simple card. If that works, create the card you want (but WITHOUT using decluttering) and use that inside picture-elements. Make sure that card also works outside of picture-elements. That way you know if the card or picture-elements is not set up properly.

If that also works, then you can create a decluttering card and use that card first OUTSIDE of picture-elements. If that shows up, than you’re good to go and use the template inside picture-elements. This way you know what the issue is when you get stuck along the way and you can post the code.

It’s not inviting for other people to help you when you post a shit ton of code in order for other to dig through everything. That’s why your post is almost a day old, has 47 views but no replies. That’s why you should first take small steps to see where you get stuck. Then post that code, so others can help.

3

Hi,

pretty exactly the process you have described I have executed before I posted this shit ton of code - the problem is that the code works individually which made me thinking that the problem might be in the combination and the split idea, but whom am I ?! :wink:

As a matter of fact - looking at it again, it is quite a bit, indeed, but I am not sure if it is a shit ton of code … but again: who am I ?!

Thanks!

4

So you have confirmed that using this code below outside of picture-element shows up a card?

      - type: custom:decluttering-card
        template: test_light

The reason I ask, is because I use decluttering-card myself and the templates never start with a -.

Basically you now have this if I combine your decluttering code:

  test_light:
  - type: custom:button_card
    entity: light.az_schreibtisch
    icon: mdi:lamp
    title: Schreibtisch
    show_state: true
    styles:
      top: 25%
      left: 47%
      width: 90vw

Which is wrong, it should be without the hypen (-). Also it’s missing the card variable. This is the basic setup from the official docs:

  my_second_template: 
    card: # <- you're missing this
      type: custom:vertical-stack-in-card
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              entity: '[[entity_1]]'
            - type: custom:button-card
              entity: '[[entity_2]]'

Yours do not follow that code.

It’s saying you need to define the card, because you left out the card variable. So indeed, you did not define the card. So I think your template using decluttering-card is the issue, has nothing to do with picture-elements.

5

Hi,

thanks for looking into this and for your answer!

You pointed me to the right direction, which was very helpful!

As a matter of fact, yes, templates can start with a dash - they do even in the document you are referring to:

Example which references the previous templates:

- type: custom:decluttering-card
  template: my_first_template
  variables:
    - name: Test Button
    - icon: arrow-up

- type: custom:decluttering-card
  template: my_first_template
  variables: Default Icon Button

It was not the “missing” card assignment as well, as I have defined a card when calling the picture-elements card, but the picture_element cards itself does not need cards but elements, which I defined. However, as you have directed me to the documentation, from there I went into the right community discussion and there I found a hint.
So if anybody has the same problem - this is apparently what needs to be done to get it working:
You need to define a default section in the template, even if you do not use it.

So it looks like this now:

Calling the template:

title: Arbeitszimmer
name: Arbeitszimmer
panel: true
path: arbeitszimmer
icon: mdi:desk
# cards: !include_dir_list ../cards/arbeitszimmer
cards:
  - type: picture-elements
    image: /local/pictures/ha_wallpaper7.jpg
    elements:
      - type: custom:decluttering-card
        template: test_light
        variables:
          - entitiy_id: light.az_schreibtisch
      - type: custom:decluttering-card
        template: test_light
        variables:
          - entitiy_id: light.az_fenster_rechts

… and the template:

default:
  entity_id: light.az_sofa
element:
  type: custom:button-card
  entity: '[[entity_id]]'
  icon: mdi:lamp
  title: Schreibtisch
  show_state: true
  styles:
    top: 25%
    left: 47%
    width: 90vw

It is a bit odd, but when I take out the default section it does not work … so that helps :wink:
Pointing me at the right direction was very useful, thanks!

6

In the example you posted it’s not the way you had it. The dash I am refering to is not the same as what you now pointed out. If anything, that’s exactly what I meant and why your dash was not correct. And if you look to your old code vs new code, you indeed now have left out the dash ;). Take a look at your previous template code vs the new one. That was what I was talking about.

Anyhow, glad you figured it out and got it sorted.