Hue scenes mimicked in Ha (and on Buttons, was Tiles)

NiMa008 · September 20, 2020, 3:55pm

I was just asking since I keep getting errors when adding button card templates. I added my resources in the configuration file like this:

lovelace:
mode: yaml
resources: !include lovelace/resources/resources.yaml

I have the set_hue_scene and tiles_set hue_scene scripts added, with the input selects. They work fine.

this at the top of my ui-lovelace.yaml

button_card_templates:
button_picture_script_small:
size: 70%
show_state: false
show_label: false
show_name: true
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: none
haptic: light
hold_action:
action: more-info
haptic: success
color: ‘#555B65’
styles:
name:
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- color: ‘lightgrey’

And I keep getting the error that a template is missing

Mariusthvdb · September 20, 2020, 4:07pm

That’s correct if you don’t have it added under the button card templates

nothing more than this:

vertical-divider-grey:
  color_type: blank-card
  styles:
    card:
      - color: dimgray
      - width: 2px

horizontal-filler:
  color_type: blank-card
  styles:
    card:
      - width: 3px

vertical-filler:
  color_type: blank-card
  styles:
    card:
      - height: 3px

NiMa008 · September 20, 2020, 4:15pm

so I added this, but still getting the same error. Not sure what I’m doing wrong. Seems like the I have it at the wrong spot or something

NiMa008 · September 20, 2020, 4:15pm

no templates are being found.

Mariusthvdb · September 20, 2020, 4:22pm

You need to set the place where you save them in your config. Check the instructions on button-card repo

NiMa008 · September 20, 2020, 4:34pm

Do you have an example, I’m probably overlooking this, but I checked here:

and here:

I have the button-card installed with hacs and linked the resources.

Mariusthvdb · September 20, 2020, 4:48pm

Correct, it says:

In ui-lovelace.yaml (or in another file using !import)


button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

so add the other templates there using the same indent as this example template ‘header’

NiMa008 · September 20, 2020, 4:58pm

yes so when I add that and the rest of the example I have this at the top of my ui-lovelace.yaml

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

then when I add a card I get this error:

Mariusthvdb · September 20, 2020, 5:45pm

what happens if you only use the ‘header’ template. in a custom:button-card in a lovelace card (not in another template)

btw, to keep your ui-lovelace.yaml clean you could do this:

button_card_templates: !include lovelace/includes/button_card_templates.yaml

and have all templates in that file. Thats the way I do it

NiMa008 · September 20, 2020, 5:52pm

Yes I had the include in there, but removed everything and started over since I didn’t know where the error was coming from.

like this?

Mariusthvdb · September 20, 2020, 6:05pm

Did you reload resources ?

NiMa008 · September 20, 2020, 6:07pm

yes, I did.

Mariusthvdb · September 20, 2020, 6:09pm

Have to go now, but post your ui-lovelace.yaml on formatted code and we can check properly

NiMa008 · September 20, 2020, 6:20pm

ok I will. I feel like there’s a problem with how home assistant reads my ui-lovelace.yaml. Because my raw config-editor is very different.

NiMa008 · September 20, 2020, 6:28pm

my ui-lovelace.yaml:

button_card_templates:
  header:
    styles:
      card:
        - padding: 5px 15px
        - background-color: var(--paper-item-icon-active-color)
      name:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold
      label:
        - text-transform: uppercase
        - color: var(--primary-background-color)
        - justify-self: start
        - font-weight: bold

  header_red:
    template: header
    styles:
      card:
        - background-color: '#FF0000'

title: NiMa
views:
  - badges: []
    cards:
      - entities:
          - entity: person.nick
          - entity: binary_sensor.someone_home
          - entity: person.marieke
        show_icon: true
        show_name: false
        show_state: true
        type: glance
      - entity: weather.nima
        type: weather-forecast
      - entities:
          - entity: sensor.buienalarm_next_rain_forecast
          - entity: sensor.buienalarm_temperature
          - entity: sensor.buienalarm_precipitation
          - entity: sensor.buienalarm_precipitation_forecast_average
          - entity: sensor.buienalarm_precipitation_forecast_total
        title: Buienalarm
        type: glance
      - entities:
          - entity: sensor.cpu_temperature
          - entity: sensor.processor_use
          - entity: sensor.memory_use_percent
        type: glance
      - analogFace: face-006
        analogPlacement: bottom
        analogShowDate: bottom
        analogSize: 200px
        clockBold: false
        dateFormat: DD/MM/YYYY
        displaySeconds: true
        displayType: both
        secondsColor: red
        showDate: true
        showWeek: true
        timeFormat: 24
        timezone: Europe/Madrid
        type: 'custom:mm2-clock-card'
    icon: 'mdi:information'
    title: Info
  - badges: []
    cards:
      - cards:
          - entity: climate.woongedeelte_radiator
            name: Woongedeelte
            type: thermostat
          - entity: climate.slaapkamer_radiator
            name: Slaapkamer
            type: thermostat
        type: horizontal-stack
      - entities:
          - entity: media_player.sonos
          - entity: media_player.speakers
          - entity: media_player.badkamer
          - entity: media_player.slaapkamer
        show_header_toggle: false
        title: Speakers
        type: entities
      - entities:
          - entity: media_player.samsung_tv
          - entity: media_player.slaapkamer_tv
        title: Tv's
        type: entities
      - entity: light.ventilator
        icon: 'mdi:fan'
        type: light
      - entities:
          - entity: switch.genie
          - entity: sensor.genie_perfume_name
          - entity: sensor.genie_perfume_level
          - entity: input_select.rituals_strength
          - entity: input_select.rituals_room_size
        title: Rituals Parfum Verdeler
        type: entities
      - entities:
          - entity: cover.alle
          - entity: cover.raam_links
          - entity: cover.raam_midden_links
          - entity: cover.raam_midden_rechts
          - entity: cover.raam_rechts
        show_header_toggle: false
        title: Jaloezieën
        type: entities
      - entities:
          - entity: input_boolean.huisdeur_open
          - entity: input_boolean.huisdeur_slot
        show_header_toggle: false
        title: Nuki
        type: entities
    icon: 'mdi:star'
    path: ''
    theme: ''
    title: Favoriet
  - badges: []
    cards:
      - entities:
          - entity: light.woongedeelte_lichten
          - entity: light.woonkamer_plafondlamp
          - entity: light.eetkamer_hanglamp_1
          - entity: light.eetkamer_hanglamp_2
          - entity: light.keuken_spot_2
          - entity: light.keuken_spot_1
          - entity: input_select.hue_scenes_woongedeelte
          - entity: input_select.extra_scenes_woongedeelte
        show_header_toggle: false
        title: Woongedeelte
        type: entities
      - entities:
          - entity: light.slaapkamer_lichten
          - entity: light.slaapkamer_spot_1
          - entity: light.slaapkamer_spot_2
          - entity: light.slaapkamer_spot_3
          - entity: light.slaapkamer_spot_4
          - entity: input_select.hue_scenes_slaapkamer
        title: Slaapkamer
        type: entities
      - entities:
          - entity: light.badkamer_lichten
          - entity: light.badkamer_spot_1
          - entity: light.badkamer_spot_2
          - entity: light.badkamer_spot_3
          - entity: light.badkamer_spot_4
          - entity: light.badkamer_wandlamp
          - entity: input_select.hue_scenes_badkamer
        show_header_toggle: false
        title: Badkamer
        type: entities
      - entities:
          - entity: light.eetkamer_lichten
          - entity: light.eetkamer_hanglamp_1
          - entity: light.eetkamer_hanglamp_2
          - entity: input_select.hue_scenes_eetkamer
        title: Eetkamer
        type: entities
      - entities:
          - entity: light.keuken_lichten
          - entity: light.keuken_spot_1
          - entity: light.keuken_spot_2
          - entity: input_select.hue_scenes_keuken
        show_header_toggle: false
        title: Keuken
        type: entities
      - entities:
          - entity: light.woonkamer_lichten
          - entity: light.woonkamer_plafondlamp
          - entity: light.woonkamer_tv_lamp
          - entity: input_select.hue_scenes_woonkamer
        show_header_toggle: false
        title: Woonkamer
        type: entities
      - entities:
          - entity: light.gang_lichten
          - entity: light.gang_spot_1
          - entity: light.gang_spot_2
          - entity: input_select.hue_scenes_gang
        show_header_toggle: false
        title: Gang
        type: entities
    icon: 'mdi:lightbulb-group'
    path: lights
    theme: ''
    title: Lights
  - badges: []
    cards:
      - entities:
          - entity: media_player.sonos
          - entity: media_player.badkamer
          - entity: media_player.slaapkamer
        show_header_toggle: false
        title: Speakers
        type: entities
      - entities:
          - entity: media_player.samsung_tv
          - entity: media_player.slaapkamer_tv
        title: Tv's
        type: entities
    icon: 'mdi:speaker'
    path: media
    title: Media
  - badges: []
    cards:
      - cards:
          - entity: climate.woongedeelte_radiator
            name: Woongedeelte
            type: thermostat
          - entity: climate.slaapkamer_radiator
            name: Slaapkamer
            type: thermostat
          - entity: climate.thermostaat
            type: thermostat
        type: horizontal-stack
      - cards:
          - entities: null
            entity: light.ventilator
            hold_action:
              action: more-info
            icon: 'mdi:fan'
            icon_height: 100px
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: toggle
            type: button
        type: 'custom:layout-card'
      - entities:
          - entity: switch.genie
          - entity: sensor.genie_perfume_name
          - entity: sensor.genie_perfume_level
          - entity: input_select.rituals_strength
          - entity: input_select.rituals_room_size
        title: Rituals Parfum Verdeler
        type: entities
      - entities:
          - entity: cover.alle
          - entity: cover.raam_links
          - entity: cover.raam_midden_links
          - entity: cover.raam_midden_rechts
          - entity: cover.raam_rechts
        show_header_toggle: false
        title: Jaloezieën
        type: entities
    icon: 'mdi:home-thermometer'
    title: Climate
  - badges: []
    cards:
      - entities:
          - entity: switch.slaapkamer_sensor
          - entity: switch.badkamer_sensor
          - entity: switch.gang_sensor
        show_header_toggle: false
        title: Beweging Sensoren
        type: entities
      - entities:
          - entity: binary_sensor.fire_4
          - entity: binary_sensor.fire_5
        title: Rookmelders
        type: entities
    icon: 'mdi:motion-sensor'
    title: Sensors
  - badges: []
    cards:
      - elements:
          - entity: light.eetkamer_hanglamp_1
            style:
              left: 40%
              top: 30%
            type: state-badge
        image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
        type: picture-elements
    path: kaarten
    title: Kaarten

NiMa008 · September 20, 2020, 6:29pm

raw config editor:

title: NiMa
views:
  - badges: []
    cards:
      - entities:
          - entity: person.nick
          - entity: binary_sensor.someone_home
          - entity: person.marieke
        show_icon: true
        show_name: false
        show_state: true
        type: glance
      - entity: weather.nima
        type: weather-forecast
      - entities:
          - entity: sensor.buienalarm_next_rain_forecast
          - entity: sensor.buienalarm_temperature
          - entity: sensor.buienalarm_precipitation
          - entity: sensor.buienalarm_precipitation_forecast_average
          - entity: sensor.buienalarm_precipitation_forecast_total
        title: Buienalarm
        type: glance
      - entities:
          - entity: sensor.cpu_temperature
          - entity: sensor.processor_use
          - entity: sensor.memory_use_percent
        type: glance
      - analogFace: face-006
        analogPlacement: bottom
        analogShowDate: bottom
        analogSize: 200px
        clockBold: false
        dateFormat: DD/MM/YYYY
        displaySeconds: true
        displayType: both
        secondsColor: red
        showDate: true
        showWeek: true
        timeFormat: 24
        timezone: Europe/Madrid
        type: 'custom:mm2-clock-card'
    icon: 'mdi:information'
    title: Info
  - badges: []
    cards:
      - cards:
          - entity: climate.woongedeelte_radiator
            name: Woongedeelte
            type: thermostat
          - entity: climate.slaapkamer_radiator
            name: Slaapkamer
            type: thermostat
        type: horizontal-stack
      - entities:
          - entity: media_player.sonos
          - entity: media_player.speakers
          - entity: media_player.badkamer
          - entity: media_player.slaapkamer
        show_header_toggle: false
        title: Speakers
        type: entities
      - entities:
          - entity: media_player.samsung_tv
          - entity: media_player.slaapkamer_tv
        title: Tv's
        type: entities
      - entity: light.ventilator
        icon: 'mdi:fan'
        type: light
      - entities:
          - entity: switch.genie
          - entity: sensor.genie_perfume_name
          - entity: sensor.genie_perfume_level
          - entity: input_select.rituals_strength
          - entity: input_select.rituals_room_size
        title: Rituals Parfum Verdeler
        type: entities
      - entities:
          - entity: cover.alle
          - entity: cover.raam_links
          - entity: cover.raam_midden_links
          - entity: cover.raam_midden_rechts
          - entity: cover.raam_rechts
        show_header_toggle: false
        title: Jaloezieën
        type: entities
      - entities:
          - entity: input_boolean.huisdeur_open
          - entity: input_boolean.huisdeur_slot
        show_header_toggle: false
        title: Nuki
        type: entities
    icon: 'mdi:star'
    path: ''
    theme: ''
    title: Favoriet
  - badges: []
    cards:
      - entities:
          - entity: light.woongedeelte_lichten
          - entity: light.woonkamer_plafondlamp
          - entity: light.eetkamer_hanglamp_1
          - entity: light.eetkamer_hanglamp_2
          - entity: light.keuken_spot_2
          - entity: light.keuken_spot_1
          - entity: input_select.hue_scenes_woongedeelte
          - entity: input_select.extra_scenes_woongedeelte
        show_header_toggle: false
        title: Woongedeelte
        type: entities
      - entities:
          - entity: light.slaapkamer_lichten
          - entity: light.slaapkamer_spot_1
          - entity: light.slaapkamer_spot_2
          - entity: light.slaapkamer_spot_3
          - entity: light.slaapkamer_spot_4
          - entity: input_select.hue_scenes_slaapkamer
        title: Slaapkamer
        type: entities
      - entities:
          - entity: light.badkamer_lichten
          - entity: light.badkamer_spot_1
          - entity: light.badkamer_spot_2
          - entity: light.badkamer_spot_3
          - entity: light.badkamer_spot_4
          - entity: light.badkamer_wandlamp
          - entity: input_select.hue_scenes_badkamer
        show_header_toggle: false
        title: Badkamer
        type: entities
      - entities:
          - entity: light.eetkamer_lichten
          - entity: light.eetkamer_hanglamp_1
          - entity: light.eetkamer_hanglamp_2
          - entity: input_select.hue_scenes_eetkamer
        title: Eetkamer
        type: entities
      - entities:
          - entity: light.keuken_lichten
          - entity: light.keuken_spot_1
          - entity: light.keuken_spot_2
          - entity: input_select.hue_scenes_keuken
        show_header_toggle: false
        title: Keuken
        type: entities
      - entities:
          - entity: light.woonkamer_lichten
          - entity: light.woonkamer_plafondlamp
          - entity: light.woonkamer_tv_lamp
          - entity: input_select.hue_scenes_woonkamer
        show_header_toggle: false
        title: Woonkamer
        type: entities
      - entities:
          - entity: light.gang_lichten
          - entity: light.gang_spot_1
          - entity: light.gang_spot_2
          - entity: input_select.hue_scenes_gang
        show_header_toggle: false
        title: Gang
        type: entities
    icon: 'mdi:lightbulb-group'
    path: lights
    theme: ''
    title: Lights
  - badges: []
    cards:
      - entities:
          - entity: input_select.hue_scenes
          - entity: input_select.hue_groups
          - entity: script.set_hue_scene
        title: My Title
        type: entities
      - type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            template: header
            name: My Test Header\
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                template: horizontal-filler
    icon: ''
    path: test
    title: test
  - badges: []
    cards:
      - entities:
          - entity: media_player.sonos
          - entity: media_player.badkamer
          - entity: media_player.slaapkamer
        show_header_toggle: false
        title: Speakers
        type: entities
      - entities:
          - entity: media_player.samsung_tv
          - entity: media_player.slaapkamer_tv
        title: Tv's
        type: entities
    icon: 'mdi:speaker'
    path: media
    title: Media
  - badges: []
    cards:
      - cards:
          - entity: climate.woongedeelte_radiator
            name: Woongedeelte
            type: thermostat
          - entity: climate.slaapkamer_radiator
            name: Slaapkamer
            type: thermostat
          - entity: climate.thermostaat
            type: thermostat
        type: horizontal-stack
      - cards:
          - entities: null
            entity: light.ventilator
            hold_action:
              action: more-info
            icon: 'mdi:fan'
            icon_height: 100px
            show_icon: true
            show_name: true
            show_state: false
            tap_action:
              action: toggle
            type: button
        type: 'custom:layout-card'
      - entities:
          - entity: switch.genie
          - entity: sensor.genie_perfume_name
          - entity: sensor.genie_perfume_level
          - entity: input_select.rituals_strength
          - entity: input_select.rituals_room_size
        title: Rituals Parfum Verdeler
        type: entities
      - entities:
          - entity: cover.alle
          - entity: cover.raam_links
          - entity: cover.raam_midden_links
          - entity: cover.raam_midden_rechts
          - entity: cover.raam_rechts
        show_header_toggle: false
        title: Jaloezieën
        type: entities
        state_color: true
    icon: 'mdi:home-thermometer'
    title: Climate
  - badges: []
    cards:
      - entities:
          - entity: switch.slaapkamer_sensor
          - entity: switch.badkamer_sensor
          - entity: switch.gang_sensor
        show_header_toggle: false
        title: Beweging Sensoren
        type: entities
      - entities:
          - entity: binary_sensor.fire_4
          - entity: binary_sensor.fire_5
        title: Rookmelders
        type: entities
    icon: 'mdi:motion-sensor'
    title: Sensors
  - badges: []
    cards:
      - elements:
          - entity: light.eetkamer_hanglamp_1
            style:
              left: 40%
              top: 30%
            type: state-badge
        image: 'https://demo.home-assistant.io/stub_config/floorplan.png'
        type: picture-elements
    path: kaarten
    title: Kaarten

Mariusthvdb · September 20, 2020, 8:53pm

only the part for the templates would have sufficed and an actual card in the config, please dont make us search your full config…

just to be sure, custom card buttons without a button_card_template doe work as expected? meaning the resource itself is loaded correctly

NiMa008 · September 21, 2020, 5:28am

oh sorry, haha. Yep that works.

NiMa008 · September 24, 2020, 7:47am

did you get a chance to take a look?

Mariusthvdb · September 24, 2020, 8:17am

thought you were still in the process, sorry.
I am using yaml mode, so not experienced in raw editor. judging on your ui-lovelace.yaml the pointer to the button_card_templates: is fine.

what I cant find is where in the lovelace cards you use any of these templates? I see it referenced in the raw editor, but not in the ui-lovelace.yaml. Now I dont use raw UI config, but if you have the ui-lovelace.yaml, dont you use yaml mode?

Really hate the order of the raw config editor, and it would take some time to order that humanely readable…