raven blade
Hey I'd like to add 3 buttons (Basement, Main, Upstairs) where it my image it says "Rooms", is it possible to have when one of them is pressed, only the area below changes (the rooms) without refreshing the whole dashboard? Also only one button can be pushed at a time and would need like a depressed look when selected? I was think of trying something with conditional but way over my head.... Any help would be greatly appreciated.
verbal pilot
(I'll add more to this later when I'm not at work.)
I would make a helper entity to assist with the room selection.
Set each of the three buttons to set the helper to the appropriate room name.
Set up the conditionals to reference the helper to show the appropriate room.
Styling for the three buttons would be dependent on the card you're using. You may need to use card_mod or apply some styling in a Mushroom Template Card or custom:button-card if you use them.
raven blade
Thank you this was a direction I was thinking about but I’m lost in the implementation. Any additional information would be appreciated
verbal pilot
Start by making a helper entity: Settings > Devices & Services > Helpers tab > + Create Helper button. I went with a Text helper so any text can be sent to the helper which might be useful when expanding the selection to more rooms. You could create a Dropdown helper but you would have to define the rooms within the helper (and then revisit its settings if you want to add more rooms.)
EDIT: The text entity may not "remember" the last state after a reboot which may mess with your dashboard (at least until you press a button.)
If you're using Sections view, your steps might be a bit different; I don't use Sections view. I made this in Masonry view. I started with a vertical-stack which contains a horizontal-stack and three conditional cards. The horizontal-stack contains three Button cards; each conditional card contains a Markdown card (intended for demonstration which this is where you would put the room-card).
The Button cards rely on card_mod in order to create the "pressed" styling. You can tinker with the styling a bit more to your liking but I just changed some of the colors. Here's the code for a Button card. Note the name of the card matches what the helper entity will be set to when tapped. The card_mod matches the state of the helper with the name in the card.
type: button
entity: input_text.room_selector
show_name: true
show_icon: true
icon: mdi:home-floor-b
name: Basement
tap_action:
action: perform-action
perform_action: input_text.set_value
target:
entity_id: input_text.room_selector
data:
value: Basement
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if states(config.entity) == config.name %}
background-color: lightgray;
--state-color: black !important;
color: black;
{% endif %}
}
Here's the code for a Conditional card: ```yaml
type: conditional
conditions:
raven blade
This looks exactly what I’m looking for, will try it. Not sure how it changes the rooms below, but will tinker a bit
If you see in my image that’s my main floor. Now I want to create rooms of my basement
Do I just put the whole code of rooms under the condition?
verbal pilot
Do I just put the whole code of rooms under the condition?
Yes. Where I used the Markdown card, you would put the respective card (or cards) that you want shown. If you're using Sections view, (I think) it should just be a matter of drag&dropping the cards into the Conditional card.
raven blade
got it, not using sections, using minimalist so its all by hand
will try now
thanks so much!!!!
verbal pilot
In that case, you'll probably want to use something like this: ```yaml
type: conditional
conditions:
on the button cards you wrote:
tap_action:
action: perform-action
perform_action: input_text.set_value
target:
entity_id: input_text.room_selector
data:
value: Basement
what do I put for perform action and target?
verbal pilot
The target entity_id will be the helper entity that you made. This is what is going to "hold" your selection and will give the Conditional cards something to reference. The perform_action is the input_text.set_value service which will set the desired room.
raven blade
I put in the code, but I think input_text.set_value and input_text.room_selector ned to be changed
verbal pilot
Nope. One is the service; the other is the entity.
raven blade
in helper I creaded three buttons (with the names you gave)
should I add more helpers?
verbal pilot
What do you mean by this: in helper I creaded three buttons (with the names you gave). The helper cannot contain buttons... 😕
You only need one helper entity.
raven blade
this is what I have now - with the whole rooms code under the condition of Basement:
tap_action:
action: perform-action
perform_action: input_text.set_value
target:
entity_id: input_text.room_selector
data:
value: Basement
verbal pilot
Okay. Did you make the help entity and is it called input_text.room_selector like I used?
raven blade
ahh thats what Im missing, putting it in
ok that seems to fixed it!!
have some issues still with the underneath but I think I can fix it
do you see the obvious mistake here:
should it be cards ? with s?
- type: conditional conditions: - condition: state entity: input_text.room_selector state: Basement card: - type: horizontal-stack cards: - type: "custom:button-card" template: - card_room - red_no_state name: Living Room
verbal pilot
No. The conditional only shows one card. We're circumenting that limitation by showing a stack-type card (which you might consider using a Grid card instead of the horizontal-stack.) The -stack and Grid cards use cards with the s.
brittle stumpBOT
raven blade
Ok got it!!
wow!! now its perfect!
only issue is it doesn't show which floor is depressed
though I can live with that
in your gif above it did show it though
probably a conflict between this and the minimalist theme
card_mod:
style: |
ha-card {
{% if states(config.entity) == config.name %}
background-color: lightgray;
--state-color: black !important;
color: black;
{% endif %}
}
finally 🙂 got the yaml format to show up
verbal pilot
Did you use stock Button cards or custom:button-card for the floor selector? The card_mod may not work with the custom:button-card.
verbal pilot
finally 🙂 got the yaml format to show up
protip: you can edit that code block, highlight from lines two through the end, and press Shift+Tab to decrease the indent to ensure the indentation is correct. (You may have to press Shift+Tab a couple of times.)