Archived

This project has been archived, but a maintained fork can be found here:

https://github.com/zanna-37/hass-swipe-navigation

Big thanks to @zanna-37!

Lovelace Swipe Navigation

Swipe through Lovelace views on mobile.

Features:

• Animated swiping through Lovelace views.
• Configure views to skip over.
• Set the swipe length needed.
• Option to disable a browsers default swipe actions.
• Wrap from first view to last view and vice versa.
• Support RTL languages.

Installation:

Follow only one of these installation methods.

Installation and tracking with HACS:

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

2. Refresh the Lovelace page, may need to clear cache.

Manual installation:

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

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

resources:
  # increase this version number at end of URL after each update
  - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0
    type: module

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

Config:

Mark Watt does an excellent job covering configuation in this youtube video.

• Configuration is done in the root of your lovelace configuration.
• If you just want to use the default config values you don't need to add a config at all.

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 seperated list of views to skip when swiping. e.g., 1,3,5.
skip_hidden	boolean	true	Automatically skips hidden tabs.
wrap	boolean	true	Wrap from first tab to last tab and vice versa.
prevent_default	boolean	false	Prevents 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		Swipe animations. Can be: swipe, fade, flip. The swipe animation should be considered experimental and depending on your setup may appear buggy.

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:

Thank you

Big thanks to:

• @themoffatt for beating me to the punch and letting me make a duplicate project.
• @RomRider and his decluttering-card for the configuration method.