BTW, in my example the “landscape” option covered PC browser & smartphone’s portrait mode - i.e. worked fine w/o cutting.
But we need TWO conditions here:
since for iPad in portrait mode there is no need to show the vertical version.
I guess you’re right.
which would be way easier if the deviceID would work. Only create the exception for the iPhone’s (no need to distinguish the orientation in my setup) and create a default for all others devices…
Sorry, could you give me the FULL picture? I mean with iPhone’s aspect ratio
its even happening on Desktop when resizing:
this card simply isn’t suited for horizontal displaying I fear…
still the bug should be filed, guess it’s not dependent on shutter-card, but haven’t tested that yet
@Ildar_Gabdullin here’s the issue I just filed at State-switch, please add so Thomas gets all info her needs
Here it is:
type: custom:state-switch
entity: deviceID
default: all
transition_time: 500
states:
'b26f5ec0-efa72998': ## for iPhone
type: custom:state-switch
entity: mediaquery
default: all
transition_time: 500
states:
'(orientation: portrait)':
...vertical view
all:
...horizontal view
all:
...horizontal view
Rather cumbersome but may be reduced by using a decluttering-card or yaml anchors.
The full example:
type: custom:state-switch
entity: deviceID
default: all
transition_time: 500
states:
b26f5ec0-efa72998:
type: custom:state-switch
entity: mediaquery
default: all
transition_time: 500
states:
'(orientation: portrait)':
type: vertical-stack
cards:
- type: custom:shutter-card
title: portrait
entities:
- entity: cover.left_living_shutter
name: Left
buttons_position: left
title_position: top
- entity: cover.bedroom_shutter
name: Right
buttons_position: left
title_position: top
all:
type: custom:stack-in-card
mode: horizontal
title: landscape
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: cover.screen_keuken
name: Keuken
- type: custom:shutter-card
entities:
- entity: cover.raamverduistering_stookhok
name: Stookhok
all:
type: custom:stack-in-card
mode: horizontal
title: others
cards:
- type: custom:shutter-card
card_mod:
style: |
ha-card {
box-shadow: none;
}
entities:
- entity: cover.screen_keuken
name: Keuken
- type: custom:shutter-card
entities:
- entity: cover.raamverduistering_stookhok
name: Stookhok
Added a comment - iOS devices are not displaying the state-switch selected card · Issue #56 · thomasloven/lovelace-state-switch · GitHub
This is not just an iOS issue - it happens on PC too.
I have a very simple question.
Here is a view:
title: test
path: test
panel: false
icon: 'mdi:car'
cards:
- type: 'custom:state-switch'
entity: input_boolean.test_boolean
default: "off"
transition: none
states:
"on":
type: entities
title: 1
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: 'custom:state-switch'
entity: input_boolean.test_boolean_2
default: "off"
transition: none
states:
"on":
type: entities
title: 2
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: 'custom:state-switch'
entity: input_boolean.test_boolean_3
default: "off"
transition: none
states:
"on":
type: entities
title: 3
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- type: entities
entities:
- entity: input_boolean.test_boolean
- entity: input_boolean.test_boolean_2
- entity: input_boolean.test_boolean_3
It has:
And here is a picture:
Is it possible not to display blank spaces?
Update (27/10/21):
Registered an issue:
thanks for this great card! It works well and I would like to explore it even more.
However, I am struggling with two issues which you might be able to help me out with.
I wanted to use two switches, one to e.g. select a floor which then gives me different options for rooms, which is then the second switch. E.g. I want to select ground floor and showing first an Overview page, then I want to select living room which shows me the entities in that room. Any idea how I could solve this?
Once I put state-switch, my slide-card is not working anymore. Anyone know how I can use both?
Thanks in advance
Hi,
Thanks for another great card!
I was wondering if you might have an idea how to implement something I try to do.
I have view which shows lights buttons, but only the lights that are currently on. This one is easy. Even with regular conditional card.
However I would like that while I am on that view and I am turning off one of the lights, the button will still remain on the view, until I close the view and open again, then it will disappear, and not right when I click on it.
Or at least to stay on the view for some time… to allow me turn it back on, in case I turned it off by mistake.
Any idea how to do that with this card?
Found a possible bug related to iOS companion app.
There is an input_select value:
input_select:
test_value:
options:
- one
- two
- three
This card is supposed to show the similar Entities card for all 3 choices:
- type: vertical-stack
cards:
- type: entities
entities:
- entity: input_select.test_value
name: Choice
- type: custom:state-switch
entity: input_select.test_value
default: "one"
transition: flip
transition_time: 500
states:
"one":
type: vertical-stack
cards:
- type: entities
title: one
entities:
- entity: input_boolean.test_boolean
tap_action: none
"two":
type: vertical-stack
cards:
- type: entities
title: two
entities:
- entity: input_boolean.test_boolean
tap_action: none
"three":
type: vertical-stack
cards:
- type: entities
title: three
entities:
- entity: input_boolean.test_boolean
tap_action: none
It works fine - but only on PC (Win10x64, Chrome).
On iOS companion app it does not work properly.
The checkbox can be toggled only for some one choice (“three” as I noticed).
The code w/o vertical stack works fine:
- type: custom:state-switch
entity: input_select.test_value
default: "one"
transition: flip
transition_time: 500
states:
"one":
type: entities
title: one
entities:
- entity: input_boolean.test_boolean
tap_action: none
"two":
type: entities
title: two
entities:
- entity: input_boolean.test_boolean
tap_action: none
"three":
type: entities
title: three
entities:
- entity: input_boolean.test_boolean
tap_action: none
Using vertical-stack is rather important for me…
Registered an issue on GitHub:
Update:
I managed to bypass the issue with switching off the transition:
transition: flip - need to comment this string.
Then the card started working as expected.
Probably the same issue:
Hi there, I was wondering if anyone knows how I could combine these 2 cards together without the border around the cards? thanks.
Can we use the user or deviceID in a tempate
usage is to Show when alarm is on but only for the kiosk user ?
any other way in how to achieve this ?
currently i have this
- type: custom:state-switch
entity: >
{% if is_state('binary_sensor.kiosk_alarmstatus', 'on') %}
alarmon
{% else %}
alarmoff
{% endif %}
states:
alarmoff:
....
This custom card does just that:
Just out of curiosity: is it in some way possible to define a “< 5” state? (less than 5)
i.e. a less-than / greater-than state?
And possibly even a “! text” (does not contain ‘text’)
Hi, I would like to use the state-switch card with a template like this…
type: custom:state-switch
entity: "{% if is_state('switch.night_mode', 'on') and now().weekday() < 5 %} day {% else %} night {% endif %}"
states:
day:
type: markdown
content: Where do you want to go today?
night:
type: markdown
content: Sleep tight!
… but based on the deviceID (browser-mod), but I dont know how to handle the deviceID in the template. I have tried several option but none work…
entity: "{% if (deviceID = "xxxxxxxx") or (deviceID = "aaaaaaa") %} day {% else %} night {% endif %}"
or
entity: "{% if (sensor.deviceID = "xxxxxxxx") or (sensor.deviceID = "aaaaaaa") %} day {% else %} night {% endif %}"
Is it possible, and if yes how ?
Thanks in advance.
I’m using this card to switch among different multimedia remotes (four of them).
I’ve had this issue for quite a while and decided today to tackle it. Notice how the shadow of the last row of buttons seem cut off.
At first, I thought there was some divider or border, but several inspections revealed nothing. I then started playing with card-mod, margins and padding, and then noticed that it is actually the other 3 remotes (sets of buttons) that are overlaid and hidden. I could see this quite clearly when assigning e.g. 100px to the bottom margin or padding. No matter which input I select, the other 3 sets always causes this same issue.
The top row of buttons in the screenshot is what sets the selector (not included in the config below).
I can kind of work around this by inserting a phantom row. The faint grey lines still show, but at least the shadows aren’t cut off.
I couldn’t find anything related to this on the forum or the card’s issue tracker. I also considered it being related to the vertical stack card, but couldn’t find anything along those lines either. I tried various things by editing and adding styles in various places in the DOM tree.
Am I the only person to have seen this? Is there anything else I could try?
Here’s my card config:
- type: custom:state-switch
entity: input_select.selected_remote
states:
TV:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.samsung_tv_power
size: 45%
styles:
icon:
- color: rgb(255, 0, 0)
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.samsung_tv_power
- type: entity-button
entity: script.samsung_tv_hdmi
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.samsung_tv_hdmi
- type: entity-button
entity: script.samsung_tv_picture_mode
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.samsung_tv_picture_mode
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.samsung_tv_hdmi2
aspect_ratio: 3.2
show_name: false
icon: mdi:apple
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.samsung_tv_hdmi2
- type: custom:button-card
entity: script.samsung_tv_hdmi1
aspect_ratio: 3.2
show_name: false
icon: mdi:set-top-box
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.samsung_tv_hdmi1
# this is a hack, because the state switch card "bleeds" the next setting at the bottom
# trying to improve this with card-mod seemed didn't help
# inserting a phantom row still make it look like there is a faint divider
# but at least the shadows of the last button row isn't obscured
# this hack gets repeated for every selector
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
Audio:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.hk_3380_power_on
aspect_ratio: 3.2
show_name: false
styles:
icon:
- color: rgb(255, 0, 0)
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_power_on
- type: custom:button-card
entity: script.hk_3380_power_off
aspect_ratio: 3.2
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_power_off
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.hk_3380_vid1
show_name: false
size: 45%
styles:
grid:
- position: relative
custom_fields:
source:
- position: absolute
- left: 80%
- top: 60%
- height: 20px
- width: 20px
custom_fields:
source: >
[[[ return `<ha-icon icon="mdi:numeric-1" style="color: var(--paper-item-icon-color);"></ha-icon>` ]]]
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_vid1
- type: custom:button-card
entity: script.hk_3380_vid2
show_name: false
size: 45%
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_vid2
styles:
grid:
- position: relative
custom_fields:
source:
- position: absolute
- left: 80%
- top: 60%
- height: 20px
- width: 20px
custom_fields:
source: >
[[[ return `<ha-icon icon="mdi:numeric-2" style="color: var(--paper-item-icon-color);"></ha-icon>` ]]]
- type: entity-button
entity: script.hk_3380_dimmer
show_name: false
size: 45%
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.hk_3380_dimmer
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.hk_3380_vol_down
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_down
hold_action:
repeat: 200
action: call-service
haptic: selection
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_down
double_tap_action:
action: call-service
haptic: medium
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_down_minus_5
- type: custom:button-card
entity: script.hk_3380_vol_up
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_up
hold_action:
repeat: 200
action: call-service
haptic: selection
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_up
double_tap_action:
action: call-service
haptic: medium
service: script.turn_on
service_data:
entity_id: script.hk_3380_vol_up_plus_5
- type: custom:button-card
entity: script.hk_3380_mute
show_name: false
styles:
icon:
- color: rgb(255, 0, 0)
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.hk_3380_mute
# this is a hack
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
"Apple TV":
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: script.apple_tv_menu
aspect_ratio: 3.2
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.apple_tv_menu
- type: custom:button-card
entity: script.apple_tv_home
aspect_ratio: 3.2
show_name: false
tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.apple_tv_home
double_tap_action:
action: call-service
haptic: light
service: script.turn_on
service_data:
entity_id: script.apple_tv_home_double_press
hold_action:
action: call-service
haptic: medium
service: remote.send_command
service_data:
entity_id: remote.living_room
command: home_hold
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: entity-button
entity: script.apple_tv_up
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_up
- type: custom:button-card
color_type: blank-card
- type: horizontal-stack
cards:
- type: entity-button
entity: script.apple_tv_left
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_left
- type: entity-button
entity: script.apple_tv_ok
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_ok
- type: entity-button
entity: script.apple_tv_right
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_right
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: entity-button
entity: script.apple_tv_down
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_down
- type: custom:button-card
color_type: blank-card
- type: horizontal-stack
cards:
- type: entity-button
entity: script.apple_tv_skip_backward
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_skip_backward
- type: entity-button
entity: script.apple_tv_play_pause
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_play_pause
- type: entity-button
entity: script.apple_tv_skip_forward
show_name: false
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.apple_tv_skip_forward
# this is a hack
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
Thanks @Ildar_Gabdullin – I actually came across this issue while going through the logged issue, but had no idea it was related. I’ve subscribed to the issue and will wait for a fix.
hi, no answer to my question… is my post unclear or stupid ? thx ton any help. best.
Hey,
I have a card with some Broadlink IR control buttons and I want to show this card only if the user is home. So for example, I have two users: Tom and Chris.
If Tom is home and Chris is away: → Show card to Tom, hide card from Chris
If Tom is away and Chris is home: → Hide card from Tom, show card to Chris
Both are away: → Hide card from both
Both are home → Show card to both
So this is not only dependent on the current logged in user but also on the users state (home / away).
I don’t know how to do this. Can someone help me please.
Thanks!