↔️ Swipe through Home Assistant Dashboard views on mobile.

Overview

Home Assistant Swipe Navigation

hacs_badge

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 seems to be currently unmaintained.

💡 Please uninstall maykar/lovelace-swipe-navigation before proceeding, as they will likely conflict.

Features:

  • Animated swiping through Dashboard 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.
  • Option to ignore 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 "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 ui-lovelace.yaml or in Dashboard Resources.

resources:
  # increase this version number at end of 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.

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 separated 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:

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.

Thank you

Big thanks to:

  • @maykar The original author of this project.
Comments
  • Swipe animation speed

    Swipe animation speed

    Is there any way to speed up the swipe animation? Since there is an intermediate blank screen, I think the animation would look best if it was twice as fast

    Really useful card! Thanks for pointing it out to me and keeping it alive.

    ✨ feature 
    opened by dbuezas 7
  • Scrolling within the plotly card swipes the tab

    Scrolling within the plotly card swipes the tab

    I'm not sure if I should preventDefault touch events within the plotly graphs card or if there is an elegant way of "fixing" from within hass-swipe-navigation.

    ❌ invalid 
    opened by dbuezas 6
  • Swipe not working once entering edit mode

    Swipe not working once entering edit mode

    Tested this successor of the original integration and it works perfectly, as expected (and well-known) 👍 Unfortunately a former fellow friend seems to still exist, see here for the bug report:

    https://github.com/maykar/lovelace-swipe-navigation/issues/55

    🐛 bug 
    opened by bcutter 6
  • Add 'UI Card for Better Thermostat' to exceptions

    Add 'UI Card for Better Thermostat' to exceptions

    Add 'UI Card for Better Thermostat' to exceptions.

    When using the slider to change the temperature it activates the swipe navigation. I'm not entirely sure why this happens only to the 'Better Thermostat' and not the default. Also there is some strange behavior on the default one (swiping right works, left not), which is unrelated imo.

    I recorded a short clip to demonstrate the behavior:

    https://user-images.githubusercontent.com/43964592/209462382-59132f04-f13e-469e-93a9-ab65d009a848.mp4

    Signed-off-by: Christos Sidiropoulos [email protected]

    🆕 new swipe exception 
    opened by csidirop 5
  • Add 'my-slider-v2' to the swipe exception list

    Add 'my-slider-v2' to the swipe exception list

    Hopefully I'm committing this the proper way. First time.

    The my-slider is included in this projects' exception list, but that project has been rewritten and is now my-slider-v2 (https://github.com/AnthonMS/my-cards/blob/main/docs/cards/slider-v2.md). Overarching project (https://github.com/AnthonMS/my-cards)

    Could this be added to the exception list? I'm using this my-slider-v2 as an element inside another card, would the exception then still work?

    Thank you and happy holidays!

    🆕 new swipe exception 
    opened by Dirksoet 4
  • Sliders (skipped element) become less smooth

    Sliders (skipped element) become less smooth

    I just noticed something: hass-swipe-navigation makes the sliders not as smooth as the originals. I had realized that Mushroom sliders weren't as smooth, but I had not linked it to hass-swipe-navigation at all.

    When testing the new sliders, I thought "wow, they are so smooth". And after the update to 1.7.0 to ignore them, not anymore and it clicked. I reverted to 1.6.5 to confirm, and indeed. I also removed the add-on and tested Mushroom sliders, and smooth again.

    It is a very small difference, and only really noticeable on slow movements and for sure not everyone will even notice, and it's a decent compromise for the received funcitonality, but is this a known side effect?

    Let's see if the screen recording allows to show it (if reduced to 30FPS, it's not noticeable).

    https://user-images.githubusercontent.com/63130724/206449085-a2b59533-5597-4809-ab4b-8e60ae5d596a.mp4

    https://user-images.githubusercontent.com/63130724/206449098-8fb516fe-94ff-4d5f-89ef-692d95edc38c.mp4

    Thanks again!

    ❌ invalid 
    opened by antonio1475 4
  • New sliders in 2022.12 are not ommited

    New sliders in 2022.12 are not ommited

    This add-on doesn't work over sliders and that's great.

    Features: [...] Option to ignore swipes over certain elements (e.g. sliders or maps)

    (Although I don't know where the option is. It has worked great by default on all my sliders incl. Mushroom.

    However, 2022.12 (released today) introduced the new Features for some Tile cards like lights, and swipe navigation acts when sliding them.

    https://www.home-assistant.io/blog/2022/12/07/release-202212/#tile-card-gets-features

    Hoping an update can easily fix this, or happy to learn if this needs to be configured on my end.

    Thank you :)

    opened by antonio1475 3
  • Unwanted swipe when zooming

    Unwanted swipe when zooming

    Hello, im using the app to swipe between homeassistant pages. Since a few releases, there is the option "two-finger-zoom" which enabled to zoom in pages. I am using this for zooming in my camera feed. But when i zoom out, with tends to move more to the side, the page get changed due to this add on. Can a swipe only be registered, when the page is fully zoomed out?

    🐛 bug 
    opened by MasterTim17 3
  • Fatal error when `logger_level` is not set in user configuration

    Fatal error when `logger_level` is not set in user configuration

    How are you doing? First at all THANK YOU for maintaining this amazing feature for HA.

    Since last update it have been working from time to time, pretty erratic until a few hours back (now it doesn't work anymore). The weird thing is that even tho I tried a downgrade, it still not working (maybe something wrong with the manual install). But, if I install the old repo, from Hacs, it works. Weird, right?

    🐛 bug 
    opened by panchomira 3
  • `skip_tabs` starts from 0

    `skip_tabs` starts from 0

    Hi, I have the following configuration on my dashboard: swipe_nav: prevent_default: true swipe_amount: 20 skip_hidden: true wrap: true skip_tabs: 5,6

    I have 6 tabs on the dashboard and I want to skip the last two (they are some grafana charts, no need to see those on the mobile). If i'm on the 4th tab and swipe right I want to wrap swipe to the first tab but it goes to the 5th tab, ignoring the skip_tabs configuration.

    Dashboard has 6 tabs only, no hidden tabs.

    Thanks

    📖 documentation 
    opened by costa-alex 3
  • Swiping on apexcharts-card graph causes view to change

    Swiping on apexcharts-card graph causes view to change

    When dragging a custom:apexcharts-card graph to see more data, the view is changed. Can you kindly add an exception for Apex Charts?

    My Apex Chart is inside another card so just in case I am providing the YAML of the whole thing:

    type: custom:tabbed-card
    tabs:
      - card:
          type: custom:apexcharts-card
          header:
            show: true
            title: Fridge
            show_states: true
            colorize_states: true
          yaxis:
            - id: temperature
              decimals: 1
              max: 10
              min: 0
            - id: humidity
              decimals: 0
              max: 100
              min: 0
              opposite: true
          apex_config:
            legend:
              show: false
          all_series_config:
            stroke_width: 2
            curve: smooth
          series:
            - entity: sensor.fridge_sensor_temperature
              yaxis_id: temperature
              name: Temperature
            - entity: sensor.fridge_sensor_humidity
              yaxis_id: humidity
              name: Humidity
              unit: '%Rh'
        attributes:
          label: Fridge
      - card:
          type: statistics-graph
          chart_type: line
          period: hour
          days_to_show: 2
          entities:
            - sensor.fridge_sensor_temperature
          stat_types:
            - mean
            - min
            - max
          card_mod:
            style:
              .: |
                h1 {
                  font-size: 18px;
                  padding: 2px 15px 2px 15px
                }
              statistics-chart$ha-chart-base$: |
                .chartLegend { 
                  display: none;
                }
        attributes:
          label: Temperature
      - card:
          type: statistics-graph
          chart_type: line
          period: hour
          days_to_show: 2
          entities:
            - sensor.fridge_sensor_humidity
          stat_types:
            - mean
            - min
            - max
          card_mod:
            style:
              .: |
                h1 {
                  font-size: 18px;
                  padding: 2px 15px 2px 15px
                }
              statistics-chart$ha-chart-base$: |
                .chartLegend { 
                  display: none;
                }
        attributes:
          label: Humidity
    
    
    🆕 new swipe exception 
    opened by alexruffell 2
  • Exception for History explorer card

    Exception for History explorer card

    Would it be possible to add the History explorer card as an exeption? It allows moving the graphs by dragging it left/right which also triggers the swipe.

    https://github.com/alexarch21/history-explorer-card

    🆕 new swipe exception 
    opened by mvdwetering 1
  • Ignore slow movements

    Ignore slow movements

    We should have a maximum swipe duration. If the time between touchstart and touchend exceeds the threshold, we ignore the swipe.

    Originally posted by @dbuezas in https://github.com/zanna-37/hass-swipe-navigation/issues/20#issuecomment-1302008563

    ✨ feature 👀 will pick this up eventually 
    opened by zanna-37 0
  • config is not reloaded when changed

    config is not reloaded when changed

    The configuration should be reloaded when...

    • [ ] ...changing between dashboards with different configurations
    • [ ] ...changing the configuration with the "Raw configuration editor"
    🐛 bug 🚧⚙️ work in progress... 
    opened by zanna-37 1
  • Custom swipe actions

    Custom swipe actions

    Hello

    I really like the idea of this app but what I want to do is simply swipe to go back to the dispay I came from, not the one next to the one I'm in. Is that possible to integrate as an option?

    ✨ feature 🤝 help is welcome 👀 will pick this up eventually 
    opened by bergh-io 6
  • make swipe exceptions user-configurable

    make swipe exceptions user-configurable

    Enhancements

    Provide a way to bypass the default hard-coded exceptions

    This could be easily done with a flag use_default_exceptions which defaults to true.

    swipe_nav:
      use_default_exceptions: false
    

    This flag would be quite useless alone, therefore the user should be able to add custom exceptions.

    Provide a way for the user to add exceptions via CSS selectors

    swipe_nav:
      custom_exceptions:
        - div.class1.class2
        - special-tag
        - g.my-special-class
    

    Drawbacks

    In this implementation, when setting use_default_exceptions to false the user needs to manually copy the hard-coded exception list and put them as custom_exceptions. And although it is suboptimal, it is not that uncommon. Home Assistant default configuration works in the same way. I think that creating a system of inclusions/exclusions would only complicate things with little gain since I suspect that use_default_exceptions would only be used in rare circumstances.


    See also:

    ✨ feature 💡 discussion 
    opened by zanna-37 4
Releases(v1.10.0)
Owner
Zanna_37
Zanna_37
Simple & Quick Access Addon For Home Assistant

Home Assistant - Firefox Addon Quick Access Home Assistant - Firefox Addon Usage Create a Custom Dashboard With Quick Access Entity In Home Assistant

Varun Sridharan 7 Dec 25, 2022
A super-simple thermostat for Home Assistant's Lovelace UI.

Minimalist Thermostat by @ShepleySound A super-simple thermostat for Home Assistant's Lovelace. The goal is to create a thermostat interface that clea

Robert Shepley 1 Jan 22, 2022
A minimalistic card for Home Assistant Lovelace UI which shows how many days it has been between any input_datetime and today.

Datetime Card A minimalistic card for Home Assistant Lovelace UI which shows how many days it has been between any input_datetime and today. Useful to

Antonino Piazza 12 Aug 12, 2022
Hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar.

Hourly Weather Card by @decompil3d An hourly weather card for Home Assistant. Visualize upcoming weather conditions as a colored horizontal bar. Can y

Jonathan Keslin 49 Dec 29, 2022
🎛 Desktop application (Windows / macOS / Linux) for Home Assistant built with Electron

Home Assistant - Desktop Desktop App (Windows / macOS / Linux) for Home Assistant built with Electron Installation Just download the latest version fo

Pheelix 12 Dec 11, 2022
🎛 Desktop application (Windows / macOS / Linux) for Home Assistant built with Electron

Home Assistant - Desktop Desktop App (Windows / macOS / Linux) for Home Assistant built with Electron Installation Just download the latest version fo

Ivan Prodanov 4 Sep 22, 2022
Swipe is the most accurate touch slider.

Usage Swipe only needs to follow a simple pattern. Here is an example: <div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div>

Brad Birdsall 6.8k Dec 16, 2022
Unofficial HelmRelease search through awesome k8s-at-home projects

k8s at home search (unofficial) Search Flux HelmReleases through awesome k8s-at-home projects, check it out at https://whazor.github.io/k8s-at-home-se

Nanne 92 Jan 2, 2023
Dashboard skeleton Simple and fast dashboard skeleton template

Dashboard skeleton Simple and fast dashboard skeleton template. Installation npm install --save dashboard-skeleton-compostrap Version 1x built on Boo

Compostrap 9 Aug 23, 2022
Weather Condition App is a mobile application that has a category of countries in the home age and the users can access to weather of each country.

World Weather This is a SPA react-app project that is built using two APIs. And users can select and choose countries and states and get their updated

Ahmad Zamir Yousufi 2 Oct 10, 2022
Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines.

Journeys is a django based community-focused website that allows users to bookmark URLs (through chrome extension) and share their journeys through timelines. A timeline is a collection of links that share a common topic or a journey of building and learning something new. Users can create timelines, share them publicly, and explore resources.

Students' Web Committee 14 Jun 13, 2022
Using a RPI 3b+ to create a PT camera accessible through Windows browser and controllable through MQTT

web-camera_PT A Web flask server converts the MJPEG stream from RPI to JPG img using opencv, then display in browser. Controls added to move Camera in

null 11 Dec 20, 2022
High performance JSX web views for S.js applications

Surplus const name = S.data("world"), view = <h1>Hello {name()}!</h1>; document.body.appendChild(view); Surplus is a compiler and runtime to all

Adam Haile 587 Dec 30, 2022
A simple yet feature-rich counter that allows you to count the views of your Github README files and profile page

View Counter Purpose This is a simple yet feature-rich counter that allows you to count the views of your github README files and profile page. Featur

Toby Hagan 4 Nov 10, 2022
Unopinionated utilities for resizeable split views

Split Unopinionated utilities for resizeable split views. Zero Deps Tiny: Each is between 1-2kb gzipped. Fast: No overhead or attached window event li

Nathan Cahill 5.6k Dec 24, 2022
GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.

GameLand is an online gaming web application that allows users to view different kind of games available and share their views on each game.Users can like and make reservations to play online. Built with HTML/CSS , JAVASCRIPT,API.

tarike bouari 6 Sep 9, 2022
🤖 Tailwind CSS assistant helps you to edit classes (includes JIT & ignores purge), toggle breakpoint classes on an element and view current breakpoint

Tailwind CSS Assistant See it in action on this example website ?? ✅ Small JavaScript package that helps you work with Tailwind CSS by... Showing you

Mark Mead 30 Dec 28, 2022
A fork of room-assistant

room-assistant Automation on the Room-Level room-assistant brings your home automation onto the next level: room automation. It is capable of tracking

Levi Govaerts 2 Oct 10, 2022