Awesome

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.

<details> <summary>Installation and tracking with HACS:</summary>

In "Frontend" hit the plus at the bottom right, search for "swipe navigation" and install.
Refresh the Lovelace page, may need to clear cache.

</details> <details> <summary>Manual installation:</summary>

Copy swipe-navigation.js from the latest release into /www/lovelace-swipe-navigation/
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

Refresh the page, may need to clear cache.

</details>

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.