Awesome

Home Assistant Swipe Navigation

Total dowloads Downloads latest

Swipe through Home Assistant Dashboard views on mobile.

preview

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.

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

In "Frontend" hit the plus button at the bottom right, search for "Home Assistant swipe navigation", and install.
Refresh the Dashboard page. You might need to clear the cache.

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

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

Refresh the page, may need to clear cache.

</details>

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.
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`.<br>⚠️ 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.<br>⚠️ 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.