Playing around with lovelace for the first few weeks now, and I am starting to get the hang on things, however I have reached a puzzling hiccup.
I trying to use this custom card to dynamically change what cards are displayed in my phone vs the desktop.
I have 2 randoms that I am experimenting just to figure out how this works so what I did first was copy and paste the following to find out what my browser ID was for the desktop vs my iphone.
- type: custom:state-switch
entity: browser
states:
'9c2aaf6f-ed26e3c1':
type: markdown
content: >
Desktop
'c8a4981c-d69c5e3c':
type: markdown
content: >
Mobile
As expected the default ID number came out I copied it verbatim and plug it in replacement of my states above, and I have the following. Keep in my that this is my home.yaml page that is separate from my ui-lovelace.yaml file to partition this out and avoid having such a large yaml page. Also the card was working but for some reason I get this error now.
Question: What could I be doing wrong!
path: home
title: Home
icon: mdi:home-outline
cards:
- type: custom:state-switch
entity: browser
states:
'9db2af23-ebf0b136':
- type: custom:dual-thermostat
name: Upstairs
entities:
- entity: climate.trane_corporation_model_tcont624as42daa_cooling_1_2
type: cool
- entity: climate.trane_corporation_model_tcont624as42daa_heating_1_2
type: heat
fan_control: true
min_slider: 60
max_slider: 80
'0d99987c-29470d4f':
- type: custom:button-card
entity: light.bedroom
name: Lamps
icon: mdi:lamp
show_state: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
#- text-transform: lowercase
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)
- type: custom:state-switch
entity: browser
states:
'9db2af23-ebf0b136':
- type: custom:dual-thermostat
name: Downstairs
entities:
- entity: climate.trane_corporation_model_tcont624as42daa_cooling_1
type: cool
- entity: climate.trane_corporation_model_tcont624as42daa_heating_1
type: heat
fan_control: true
min_slider: 60
max_slider: 80
'0d99987c-29470d4f':
- type: custom:button-card
entity: light.bedroom
name: Lamps
icon: mdi:lamp
show_state: true
styles:
card:
- width: 100px
- height: 100px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
#- text-transform: lowercase
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'off'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(100%)