Home Assistant Swipe Navigation

Swipe through Home Assistant Dashboard views on mobile.

This repository has been forked from maykar/lovelace-swipe-navigation to continue the development since the original project is currently unmaintained.

💡 Please uninstall maykar/lovelace-swipe-navigation before proceeding, as it will conflict with this plugin.

Features:

• Animated swiping through Dashboard views
• Configure views to skip over
• Set the swipe length needed
• Option to disable browsers default swipe actions.
• Option to wrap from first view to last view and vice versa
• Supports RTL languages
• Correctly ignores swipes over certain elements (e.g. sliders or maps)

Installation:

Follow only one of these installation methods.

Installation and tracking with HACS:

1. In "Frontend" hit the plus button at the bottom right, search for "Home Assistant swipe navigation", and install.

2. Refresh the Dashboard page. You might need to clear the cache.

Manual installation:

1. Copy swipe-navigation.js from the latest release into /www/hass-swipe-navigation/

2. Add the resource in ui-lovelace.yaml or in Dashboard Resources.

resources:
  # Increase the version number (`v=x.y.z`) at end of the URL after each update
  - url: /local/hass-swipe-navigation/swipe-navigation.js?v=1.0.0
    type: module

3. Refresh the page, may need to clear cache.

Config:

If you just want to use the default config values you don't need to add a config at all.

If you want to modify the configuration, place it in the root of your dashboard configuration under the swipe_nav element (see example below).

Config Options:

Name	Type	Default	Description
animate	string	none	Swipe animations. Can be: none, swipe, fade, flip. The swipe animation should be considered experimental and depending on your setup may appear buggy.
animate_duration	number	200	Swipe animation's duration in milliseconds.
enable	boolean	true	Enable or disable the swipe navigation.
enable_mouse_swipe	boolean	false	Enable or disable the swipe navigation via mouse.
enable_on_subviews	boolean	true	Enables swipe navigation while on subviews. ⚠️ Note the difference between this and skip_subviews, which skips over subviews while navigating from regular views.
logger_level	string	warn	Set logging level. Possible values are: verbose, debug, info, warn, error.
prevent_default	boolean	false	Prevent the browsers default horizontal swipe actions.
skip_subviews	boolean	true	Automatically skip subviews.
skip_tabs	string		A comma separated list of views to skip when swiping. e.g., 1,3,5. ⚠️ Note that tabs count starts at 0, so the first is 0, second is 1, and so on.
swipe_amount	number	15	Minimum percent of screen needed to be swiped in order to navigate.
wrap	boolean	true	Wrap from first tab to last tab and vice versa.
skip_hidden	boolean	true	Automatically skip hidden tabs. ⚠️ Setting this to false is deprecated and poses a security risk as it allows a user to reveal a tab they don't have access to.

Example:

Don't just copy the example, it won't fit your needs. Build your own using the config options above.

# You don't necessarily need a configuration.
# Add only the options that differ from the default values.
swipe_nav:
  wrap: false
  enable_mouse_swipe: true
  animate: swipe
  skip_tabs: 5,6,7,8
  prevent_default: true
  swipe_amount: 30
  
views:

If you need help, Mark Watt has an excellent video covering the configuration in this youtube video.

Contributions

If you want to help, put a ⭐ to the repository and open issues or pull requests to contribute to the development.

For developers

Have a look to the CONTRIBUTING file.

Thank you

Big thanks to:

• @maykar The original author of this project.

Star History