I have 9 views and am tired of having to scroll left and right on the view menu on my mobile phone and I just realized that instead of having to swipe left or right on the view menu to get to the view I want to I should have a card that pops up with a list of views that aren’t in the view I am currently in. I am not entirely sure how it should look and so on so I was hoping I can see if anyone else has done something similar that I can copy. Has anyone done anything like that?
Sorry for the long bit of code, but you can trim it down as necessary. I use this in the sidebar to quickly jump to the page I want.
views:
- panel: true
title: Navigation
icon: 'mdi:menu-open'
badges: []
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- type: button
name: Calendar
icon: 'mdi:calendar-month'
action_name: Go
tap_action:
action: navigate
navigation_path: /calendar
confirmation: false
- type: button
name: Map
icon: 'mdi:map'
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-main/main-map
confirmation: false
- type: button
name: History
icon: 'mdi:chart-box'
action_name: Go
tap_action:
action: navigate
navigation_path: /history
confirmation: false
- type: button
name: Log Book
icon: 'mdi:format-list-bulleted-square'
action_name: Go
tap_action:
action: navigate
navigation_path: /logbook
confirmation: false
title: Full Screen Apps
show_header_toggle: false
- type: entities
entities:
- type: button
name: 'Developer: States'
icon: 'mdi:hammer'
action_name: Go
tap_action:
action: navigate
navigation_path: /developer-tools/state
confirmation: false
- type: button
name: 'Developer: Templates'
icon: 'mdi:hammer-wrench'
action_name: Go
tap_action:
action: navigate
navigation_path: /developer-tools/template
confirmation: false
- type: button
name: 'Developer: Services'
icon: 'mdi:tune-vertical'
action_name: Go
tap_action:
action: navigate
navigation_path: /developer-tools/service
confirmation: false
- type: button
name: Diagnostics
icon: 'mdi:code-braces'
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-diagnostics/diagnostics
confirmation: false
- type: button
name: File Editor
icon: 'mdi:wrench'
action_name: Go
tap_action:
action: navigate
navigation_path: core_configurator
confirmation: false
title: Development
show_header_toggle: false
- type: vertical-stack
cards:
- type: entities
entities:
- type: button
name: Configuration Dashboard
icon: 'mdi:cog'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/dashboard
confirmation: false
- type: button
name: Server Controls
icon: 'mdi:server'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/server_control
confirmation: false
- type: button
name: Integrations
icon: 'mdi:set-center'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/integrations
confirmation: false
- type: button
name: Devices
icon: 'mdi:widgets'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/devices/dashboard
confirmation: false
- type: button
name: Entities
icon: 'mdi:widgets-outline'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/entities
confirmation: false
- type: button
name: Customize
icon: 'mdi:format-rotate-90'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/customize
confirmation: false
- type: button
name: Logs
icon: 'mdi:math-log'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/logs
confirmation: false
- type: button
name: Media
icon: 'mdi:play-network'
action_name: Go
tap_action:
action: navigate
navigation_path: /media-browser
confirmation: false
- type: button
name: Info
icon: 'mdi:information-variant'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/info
confirmation: false
- type: button
name: HACS
icon: 'hacs:hacs'
action_name: Go
tap_action:
action: navigate
navigation_path: /hacs/entry
confirmation: false
- type: button
name: Supervisor
icon: 'mdi:home-assistant'
action_name: Go
tap_action:
action: navigate
navigation_path: /hassio/dashboard
confirmation: false
- type: button
name: Snapshots
icon: 'mdi:camera'
action_name: Go
tap_action:
action: navigate
navigation_path: /hassio/snapshots
confirmation: false
title: Home Assistant
show_header_toggle: false
- type: vertical-stack
cards:
- type: entities
entities:
- type: button
name: Main Dashboard
icon: 'mdi:view-dashboard'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/lovelace/dashboards
confirmation: false
- type: button
name: Default View
icon: 'mdi:view-dashboard'
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace/default_view
confirmation: false
- type: button
name: Sandbox
icon: 'mdi:view-dashboard'
action_name: Go
tap_action:
action: navigate
navigation_path: /sandbox-testing
confirmation: false
- type: button
name: Templates
icon: 'mdi:view-dashboard'
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-templates
confirmation: false
title: Lovelace
show_header_toggle: false
- type: entities
entities:
- type: button
name: Person
icon: 'mdi:account'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/person
confirmation: false
- type: button
name: Users
icon: 'mdi:account-supervisor'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/users
confirmation: false
- type: button
name: Areas
icon: 'mdi:chart-bubble'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/areas/dashboard
confirmation: false
- type: button
name: Zones
icon: 'mdi:circle-outline'
action_name: Go
tap_action:
action: navigate
navigation_path: /config/zone
confirmation: false
title: Users
title: Navigation
1 Like
So this is a dashboard with Entities cards with navigation actions? Having to click on a link in the side bar that opens a new dashboard with links to the original dashboard I am already in isn’t ideal for me. What I was looking for is something like a pop-up card at the top of each view within the same dashboard with a glance card with icons that have tap-action navigation to each view within the same dashboard. I can’t get the glance card to use tap_action navigation
It looks like John.McDowell did what I want to do (a “navigation” glance card that lets the user select which room they want to control and the UI navigates to that view) per the thread at Cards on Multiple Views and Dashboards I don’t understand how it was done though. My head spins just trying to think about it.
I don’t want to have to do what lonebaggie did with the multiple yaml files.
The following works in an Entities card but I don’t know how to get it into a glance card or the GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant Notice there are no true entities (sensor or similar) which the glance card expects when I try to add this info to one.
type: entities
entities:
- type: button
name: Cochera
icon: 'mdi:garage'
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Garage
- type: button
name: Living TV
icon: mdi:television
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/2
- type: button
name: Master TV
icon: mdi:television
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/3
- type: button
name: Graphs
icon: mdi:chart-bell-curve
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Graphs
- type: button
name: Temps
icon: mdi:thermometer
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Temps
- type: button
name: Sonos
icon: mdi:music
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sonos
- type: button
name: Sensors
icon: mdi:signal-variant
action_name: Go
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sensors
I have been successful in creating navigation buttons in a grid card but need the buttons to be smaller so that the height of the grid card is smaller. What can I do in order to get the grid shorter? Should I be using a different card?
type: grid
cards:
- type: button
icon: 'mdi:home'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/main
- type: button
icon: 'mdi:garage'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/cochera
- type: button
icon: 'mdi:television'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/2
- type: button
icon: 'mdi:television'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/3
- type: button
icon: 'mdi:chart-bell-curve'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Graphs
- type: button
icon: 'mdi:thermometer'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Temps
- type: button
icon: 'mdi:music'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sonos
- type: button
icon: 'mdi:signal-variant'
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sensors
columns: 4
I decided to use the cover entity for all of the entities in a glance card. I could never get it to open as a pop-up within an entities card with browser_mod so I decided to use just 5 of the opposite views as links in the glance card because they fit on one line and it lowers the height and that way I can still navigate to almost any other view from whichever view I am in from the top of the screen.
This is what it looks like with 8 of the views. So 3 would be removed depending on the location of the view within the dashboard. I think I still would have preferred a pop-up within an entities card using browser_mod but that might have actually been more clicks to make the pop-up disappear. What I really would like is a drop down menu that pops up from the views menu instead of having to swipe.
type: glance
entities:
- entity: cover.cochera
icon: 'mdi:home'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/main
- entity: cover.cochera
icon: 'mdi:garage'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/cochera
- entity: cover.cochera
icon: 'mdi:television'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/2
- entity: cover.cochera
icon: 'mdi:television'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/3
- entity: cover.cochera
icon: 'mdi:chart-bell-curve'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Graphs
- entity: cover.cochera
icon: 'mdi:thermometer'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Temps
- entity: cover.cochera
icon: 'mdi:music'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sonos
- entity: cover.cochera
icon: 'mdi:signal-variant'
name: null
show_state: false
tap_action:
action: navigate
navigation_path: /lovelace-mobile/Sensors
Sorry for the delay in responding to this thread. I moved away from using the glance card for navigation once the new Grid card became available. I now use a “grid” of buttons to create the menu. by making the grid NOT square and using the icon_height field I can control the “look and feel” of the buttons. The tap_action stays the same as you are using.
Also, since mobile is my target for all of my views, I have actually shifted all of my views to be a grid of grids, this way they render the same on a web browser as they do on my mobile. Embedding grids inside of grids is easy. The “container grid” is non square with a columns of 1. Then any embedded grids can be whatever you like.
I also now use conditional cards inside the 1 column grid so I can tailor the resulting card set based on current state of items. (I used this to create a dynamic TV controller with the buttons being tailored to whatever input the TV is set to).
Thanks for the reply. I figured out how to do what you wrote there. I have set up a grid card with button cards and de-selected Render cards as squares, Entity option is empty, de-selected Show Name?, put a space on Name, edited the Columns and Icon Height as needed, and added the Tap Action - Navigation option and settings. So now I get everything I was looking for with that setup.
So if you view your dashboard on a PC do you only see one column or does it somehow readjust to fit the screen width?
You only see one column. I prefer it this way since it makes it easier to “develop” on the PC with the mobile target. You could have a PC view and a Mobile view, but this would mean duplicating cards and it makes more work when you make changes.
Does anyone know if there is a way to create a sensor that shows the state of what view the current browser is on.? I currently have multiple buttons that I’ve put on the custom sidebar-card and it works fine but as I’ve added more to the sidebar the buttons have got smaller and smaller. I would prefer to have just two buttons that I could use to go either left or right through my views.
The only way that I could think to do that correctly would be by having a sensor that can provide the view that I currently see on my browser. The sensor would then allow me to create a template for the buttons so that the buttons navigate to the next view.
The only other way to create the buttons would be to create something that would assign value based on the default view the dashboard opens to and then keep track of the view based on the buttons pressed. This could obviously get messed up if for some reason the top panel is used to switch views or if it opens on a view other than the default.
Suggestions…?
Not sure if this is what you are looking for, but Thomas Loven’s custom browser_mod integration allows you to register the current browser viewing HA as a device, which includes creating a sensor for that device with the current Lovelace path.
@reste_narquois yes and no. After several hours of trying I actually found a way to do it after learning about return window.location.pathname. Using this returns my current view. I set up a script with conditions that navigate one view to the left or right based on the current view that I am in and the button pressed. I put two custom: button-cards on each page, one labeled left and one labeled right. I used a template with all of the views so that I didn’t have to repeat that code for each page with the buttons.
Here’s the code I’m using. I’m sure that all of it could get condensed a little but I haven’t tried yet. I just wanted to make sure that I got the basics working. If someone else wanted to use it they would just have to replace the names of my views with theirs inside the template and also inside of the script. They would also have to put the correct View that is to the left or right of the current view in the conditions in the script. If someone could help refine it then please do… also if someone knows a way to use return window.location.pathname in the static sidebar-card let me know. The problem I’m having is if I place the button in the sidebar-card since it doesn’t change when the view is changed I’m only getting the view when the dashboard was first opened or the page is reloaded.
This is for the buttons that I put on each Lovelace View.
type: horizontal-stack
cards:
- type: custom:hui-element
card_type: custom:button-card
template:
- default_button_01
- navigation_button_left
entity: null
show_icon: false
show_state: false
show_name: true
name: Left
styles:
name:
- font-size: 10px
style:
top: 1px
left: 8%
width: 50px
transform: translate(0,0)
- type: custom:hui-element
card_type: custom:button-card
template:
- default_button_01
- navigation_button_right
entity: null
show_icon: false
show_state: false
show_name: true
name: Right
styles:
name:
- font-size: 10px
style:
top: 1px
left: 30.5%
width: 50px
transform: translate(0,0)
These are the two templates I used. One for each button. (I’m sure that there’s a way to condense them into one. )
button_card_templates:
navigation_button_left:
variables:
current_view: |
[[[ return window.location.pathname ]]]
tap_action:
action: call-service
service: script.view_navigation_buttons
service_data:
button: nav_left
view: |
[[[
if (variables.current_view == '/tablet-01/rooms')
return 'rooms';
else if (variables.current_view == '/tablet-01/media')
return 'media';
else if (variables.current_view == '/tablet-01/weather-climate')
return 'weather-climate';
else if (variables.current_view == '/tablet-01/security')
return 'security';
else if (variables.current_view == '/tablet-01/plants')
return 'plants';
else if (variables.current_view == '/tablet-01/controls')
return 'controls';
else if (variables.current_view == '/tablet-01/calendar')
return 'calendar';
else if (variables.current_view == '/tablet-01/goldfish')
return 'goldfish';
else if (variables.current_view == '/tablet-01/chess')
return 'chess';
else return '';
]]]
navigation_button_right:
variables:
current_view: |
[[[ return window.location.pathname ]]]
tap_action:
action: call-service
service: script.view_navigation_buttons
service_data:
button: nav_right
view: |
[[[
if (variables.current_view == '/tablet-01/rooms')
return 'rooms';
else if (variables.current_view == '/tablet-01/media')
return 'media';
else if (variables.current_view == '/tablet-01/weather-climate')
return 'weather-climate';
else if (variables.current_view == '/tablet-01/security')
return 'security';
else if (variables.current_view == '/tablet-01/plants')
return 'plants';
else if (variables.current_view == '/tablet-01/controls')
return 'controls';
else if (variables.current_view == '/tablet-01/calendar')
return 'calendar';
else if (variables.current_view == '/tablet-01/goldfish')
return 'goldfish';
else if (variables.current_view == '/tablet-01/chess')
return 'chess';
else return '';
]]]
This is the script I used to navigate to each view.
alias: View Navigation Buttons
sequence:
- condition: state
state: "on"
entity_id: input_boolean.view_navigation_toggle
- choose:
- conditions:
- condition: template
value_template: "{{ view == 'rooms' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/chess
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/media
- conditions:
- condition: template
value_template: "{{ view == 'media' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/rooms
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/weather-climate
- conditions:
- condition: template
value_template: "{{ view == 'weather-climate' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/media
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/security
- conditions:
- condition: template
value_template: "{{ view == 'security' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/weather-climate
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/plants
- conditions:
- condition: template
value_template: "{{ view == 'plants' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/security
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/controls
- conditions:
- condition: template
value_template: "{{ view == 'controls' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/plants
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/calendar
- conditions:
- condition: template
value_template: "{{ view == 'calendar' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/controls
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/goldfish
- conditions:
- condition: template
value_template: "{{ view == 'goldfish' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/calendar
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/chess
- conditions:
- condition: template
value_template: "{{ view == 'chess' }}"
sequence:
- choose:
- conditions:
- condition: template
value_template: "{{ button == 'nav_left' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/goldfish
- conditions:
- condition: template
value_template: "{{ button == 'nav_right' }}"
sequence:
- service: browser_mod.navigate
data:
path: /tablet-01/rooms
mode: single