dorkhub
show your thing

hass-swipe-navigation

↔️ Swipe through Home Assistant Dashboard views on mobile.

zanna-37
TypeScript★ 555⑂ 25 forksMITupdated 1 month ago
hacshome-assistantnavigationswipe
git clone https://github.com/zanna-37/hass-swipe-navigation.gitzanna-37/hass-swipe-navigation
README.mdfork it — it’s yours

Home Assistant Swipe Navigation

hacs_badge 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.

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 Dashboard 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
  1. 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

Star History Chart

more like this

search

search projects, people, and tags