@pedolsky Thanks for the tips. I’ve been working on them, but tot avoid responding too late, I wanted to provide an update of where I got with your suggestions.
Re #1
Below is my code for the Collapsable Card approach. If in column one I can put a direct link to home (1 click) and in column 2 and 3 I can span this card, then I would have a perfect solution. However, there is one big issue… Hopefully I will use the correct terms to describe it… I currently have 2 dashboards (Overview and Admin) accessible from the sidebar. If I flip between dashboards, the collapsable card is collapsed when I navigate back to the view that has it. In other words, if I am in the Office view under Overview dashboard, and got to a Settings view in the Admin Dashboard, then go back to the Office view, the card will be closed (as desired). However, if I use the collapsable card to navigate to the Kitchen view which is also under the Overview dashboard, when I go back, the collapsable card is still open (undesired).
There is a default option of defaultOpen
which is false
by default (as desired). Adding it made no difference.
Am I missing something?
The other solution you proposed is a bit harder to implement and I have not had time yet to dedicate to it.
type: custom:collapsable-cards
title: Dashboards
cards:
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/home
name: Home
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/entrance
name: Entrance
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/kitchen
name: Kitchen
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/living-room
name: Living Room
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/master-suite
show_icon: false
name: Master Suite
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/study
name: Study
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/utility-room
name: Utility Room
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/game-room
show_icon: false
name: Game Room
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/upstairs-bathroom
name: Upstairs Bathroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/office
show_icon: false
name: Office
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/kids-bedroom
show_icon: false
name: Kids Bedroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/media-room
show_icon: false
name: Media Room
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/guest-bedroom
show_icon: false
name: Guest Bedroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/garage
show_icon: false
name: Garage
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/outdoors
name: Outdoors
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/safety
name: Safety
show_icon: false
show_header_toggle: false
Re #2
The view is divided into 3 wide columns that are 3 columns wide each but set as 1 column (done via grid card). (Is this the proper terminology? if so, confusing…) Not sure why I started doing it like that, but I had read it was a more flexible way of doing it. Other than this current issue, it is working for me.
Inside the grid card, I use another nested grid card when I want to place 2 or 3 cards.
I would like to control the width of column 1 which has my navigation menu so as to stop text from wrapping. I too wondered about using CSS but am a bit afraid of causing a mess… but I will look into it.
Re #3
I then also want to merge the 2 cards in columns 2 and 3 into a single one to reduce the space they require and to make it even more obvious that the door contact and lock belong to the same door. I would add a title, and remove the entity names. The icons, and possible state labels will show the state.
This is the closest I got, but I had to set the column width to 2:
What I am hoping for is more like this but to fit in just under 2 columns (in the snapshot it is using all 3):
Just in case it helps for the questions above, this is the code I am currently using for the view column that has the 3 column’d grid card with menue and door contacts and locks:
type: grid
cards:
- type: grid
cards:
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/entrance
name: Entrance
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/kitchen
name: Kitchen
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/living-room
name: Living Room
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/master-suite
show_icon: false
name: Master Suite
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/study
name: Study
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/utility-room
name: Utility Room
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/game-room
show_icon: false
name: Game Room
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/upstairs-bathroom
name: Upstairs Bathroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/office
show_icon: false
name: Office
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/kids-bedroom
show_icon: false
name: Kids Bedroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/media-room
show_icon: false
name: Media Room
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/guest-bedroom
show_icon: false
name: Guest Bedroom
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/garage
show_icon: false
name: Garage
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/outdoors
name: Outdoors
show_icon: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace/safety
name: Safety
show_icon: false
columns: 1
square: false
- type: grid
cards:
- type: button
tap_action:
action: more-info
entity: binary_sensor.front_door
show_state: false
icon: hass:door
- type: button
tap_action:
action: more-info
entity: binary_sensor.garage_door
icon: hass:door
show_state: false
- type: button
tap_action:
action: more-info
entity: binary_sensor.patio_door
icon: hass:door
show_state: false
- type: button
tap_action:
action: more-info
entity: cover.overhead_garage_door
show_state: false
- type: button
entity: binary_sensor.backyard_gate
icon: hass:gate
show_state: false
columns: 1
- type: grid
cards:
- type: button
tap_action:
action: more-info
entity: lock.front_door_lock
show_state: false
hold_action:
action: toggle
- type: button
tap_action:
action: more-info
entity: lock.garage_door_lock
show_state: false
hold_action:
action: toggle
- type: button
tap_action:
action: more-info
entity: lock.patio_door_lock
show_state: false
hold_action:
action: toggle
- type: horizontal-stack
cards:
- type: button
tap_action:
action: more-info
entity: cover.overhead_garage_door
name: Open
icon: hass:garage-open-variant
show_state: false
hold_action:
action: call-service
service: cover.open_cover
service_data: {}
target:
device_id: <redacted>
- type: button
tap_action:
action: more-info
entity: cover.overhead_garage_door
name: Close
icon: hass:garage-variant
hold_action:
action: call-service
service: cover.close_cover
service_data: {}
target:
device_id: <redacted>
- type: custom:button-card
show_entity_picture: true
aspect_ratio: 1/1
state:
- value: 'on'
color: red
icon: hass:water
styles:
icon:
- animation:
- blink 2s linear infinite
- value: 'off'
icon: hass:water-off
tap_action:
action: navigate
navigation_path: /lovelace/safety
entity: input_boolean.water_leak_alarm
name: Water Leak
columns: 1
square: true
columns: 3
square: false
Re #4:
presicion seems to be what I need however I am using the ecobee integration so I can’t find where to add that control. I’ll keep looking…
Re #5:
Code posted above. Sounds like I really need to jump in with CSS - Should I install the frontend card that add the ability to tweak everything with CSS or is this something that is native?
I REALLY appreciate your time and shared knowledge!