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 this version number at end of 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.

Config Options:

Name	Type	Default	Description
swipe_amount	number	15	Minimum percent of screen needed to be swiped in order to navigate.
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.
skip_hidden	boolean	true	Automatically skip hidden tabs. ⚠️ Note that subviews are implemented as hidden tabs (they can be seen in edit mode), therefore, by setting skip_hidden to false you can land in a subview by swiping.
wrap	boolean	true	Wrap from first tab to last tab and vice versa.
prevent_default	boolean	false	Prevent the browsers default horizontal swipe actions. May require a browser refresh to take effect, if using an HA companion app this can be done by closing the app and reopening.
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.
logger_level	string	warn	Set logging level. Possible values are: verbose, debug, info, warn, error.

Example:

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

swipe_nav:
  wrap: false
  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.