https://github.com/zanna-37/hass-swipe-navigation
↔️ Swipe through Home Assistant Dashboard views on mobile.
https://github.com/zanna-37/hass-swipe-navigation
hacs home-assistant navigation swipe
Last synced: 3 months ago
JSON representation
↔️ Swipe through Home Assistant Dashboard views on mobile.
- Host: GitHub
- URL: https://github.com/zanna-37/hass-swipe-navigation
- Owner: zanna-37
- License: mit
- Created: 2022-06-09T16:16:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-11T18:32:03.000Z (3 months ago)
- Last Synced: 2024-11-11T19:33:20.657Z (3 months ago)
- Topics: hacs, home-assistant, navigation, swipe
- Language: TypeScript
- Homepage:
- Size: 603 KB
- Stars: 353
- Watchers: 2
- Forks: 18
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Home Assistant Swipe Navigation
[](https://github.com/hacs/integration)  
Swipe through Home Assistant Dashboard views on mobile.
This repository has been forked from [maykar/lovelace-swipe-navigation](https://github.com/maykar/lovelace-swipe-navigation) to continue the development since the original project is currently unmaintained.
💡 **Please uninstall [maykar/lovelace-swipe-navigation](https://github.com/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](https://github.com/zanna-37/hass-swipe-navigation/releases/latest) from the latest release into `/www/hass-swipe-navigation/`
2. Add the resource in `ui-lovelace.yaml` or in Dashboard Resources.
```yaml
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
```
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 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.
```yaml
# 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](https://www.youtube.com/watch?v=03IPN9lBEfE&t=663s).
## 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](./CONTRIBUTING.md) file.
## Thank you
Big thanks to:
* [@maykar](https://github.com/maykar) The original author of this project.
## Star History
[](https://star-history.com/#zanna-37/hass-swipe-navigation&Date)