maykar/lovelace-swipe-navigation

↔️ Swipe through Lovelace views on mobile.

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.

Installation and tracking with HACS:

1. In "Frontend" hit the plus at the bottom right, search for "swipe navigation" and install.

2. Refresh the Lovelace page, may need to clear cache.

Manual installation:

1. Copy swipe-navigation.js from the latest release into /www/lovelace-swipe-navigation/

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

3. Refresh the page, may need to clear cache.

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.

lovelace-swipe-navigation's Issues

Swipe an Climate Control doesn't work well together

I have a Thermostat Card configured controlling a climate.

With Swipe Navigation enabled, I'm unable to easily change the temperature on the orange part of this picture.
Most of the time Swipe Navigation takes over and swipes tabs.

Any ideas on how to fix this?

Not working through Nabu casa

After a reboot swipe is working through Nabu casa but after a day it stops working, works fine whilst local but not via internet.

This error is showing in log.

[REQ] may u add a custom_updater ?

may u add the .json
https://custom-components.github.io/custom_updater/Notes-for-developers
so will upgrade with custom updater and check with tracker-card . thnx

Immediate swipe without "empty" card

The animation in swipe first loads an "empty" card, and then slides the new view in. Is it possible to slide in the new view immediately next to the view that is swiped out?

I understand that then in fact there should always be 3 views loaded (the active one, the one left of it and the one right of it) but the animation would then seem and feel a lot more native.

"Login attempt failed"

Installed with HACS under HA 0.104.3 to use with the official android app. Configuration in the raw config editor is as follows:

resources:
  - type: js
    url: /community_plugin/lovelace-swipe-navigation/swipe-navigation.js
swipe_nav:
  wrap: true
  animate: swipe
  skip_tabs: '1,2,3,4,5'
  prevent_default: true
  swipe_amount: 20

Swiping works but causes a persistent notification stating "Login attempt failed" - IP indicates the attempt is coming from the phone.

compatibility for Ariela App

I use Ariela as mobile client.
Sadly the swipe navigation does'nt work in there.
I guess you use the user agent like in the cca Conditional Styling.

(Ariela)
Mozilla/5.0 (Linux; Android 9; ONEPLUS A5000 Build/PKQ1.180716.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/73.0.3683.90 Mobile Safari/537.36

This one works.
(Chrome on phone )
Mozilla/5.0 (Linux; Android 9; ONEPLUS A5000) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.90 Mobile Safari/537.36

Problem setup Home Assistant 2021.12.8

Hello, I installed the addon on the latest version of Home Assistant 2021.12.8, I cleared the cache of all the applications that are in version 2022.1.1 and the browser. But despite this, it doesn't work.......

Integration 'swipe_nav' not found.

Hi,

Getting this error message:
Component error: swipe_nav - Integration 'swipe_nav' not found.

when using

swipe_nav:
  animate: swipe

in configuration.yaml. The integration does work though.

What am I missing?

Swipe navigation breaks after a popup has been displayed under some circumstances

I know this is a long shot since it seems to be such a niche problem, and may not even be a problem with lovelace-swipe-navigation itself, but figured I'd ask here to see if anyone has insight.

It seems that after having a popup open (whether a normal "more-info" popup or one triggered by browser_mod), swiping afterwards will cause that popup to reopen instead of actually navigating to the next view, until another tab is clicked directly. The swipe does appear to briefly activate the next view, however it immediately goes back to the one that originated the popup. However, I can only reproduce this in chromium on the Raspberry Pis with touchscreens I have configured as kiosks. The problem does not occur in Chrome or Firefox on desktop (with dev tools emulating a touchscreen), on my phone, or in firefox on the kiosk.

Swipe animation occurs on view bar

When the view bar is swiped to scroll horizontally between many different views, then the swipe animation is executed but since the view doesn't change it just stays on the existing view. You should not execute the swipe animation if the action is performed to the view bar.

Recreate: add enough views that they all no longer fit on the screen. Then swipe the view bar.

Swipe not working if all tabs are hidden in custom header

I'm trying to semi-hide the header with only using the options button for a clock. But as soon as I hide all the tabs from view the swipe function stops working. Is it possible to work around this setup to make it work?

custom_header:
  compact_mode: true
  header_css: 'background: transparent;'
  panel_view_css: 'padding-top: 80px;' # Same as view_css only when using panel view.
  indicator_top: true
  exceptions:
    - conditions:
        user: Kiosk
      config:
        compact_mode: true
        disable_sidebar: true
        header_css: 'background: transparent;'
        options_css: 'font-size: 12px;'
        panel_view_css: 'padding-top: 50px;' # Same as view_css only when using panel view.
        button_text:
          options: >-
            {{ hours24 }}:{{ minutesLZ }}
        menu_hide: true
        hidden_tab_redirect: false
        hide_tabs:
          - 0 to 5

Stops working after a period (last good version 1.2.9)

I've reinstalled Swipe Navigation using HACS and initially tried the latest release v1.3.0. After a period of time (and possibly after exiting the Home Assistant front end & relaunching it) the swipe navigation stops working.

The swipe navigation seems to fail using the browser interface (Android Chrome) and also in the native Android Home Assistant app from the Google Playstore.

I tried every beta version up to the latest v1.3.3, and they all failed after a while.

The last 'good' version which doesn't seem to fail, is v1.2.9

Error Message in logs

Hello, I get this error message in my Home Assistant logs. The addon still works anyway. Maybe its a bug regarding the kiosk mode Integration? https://github.com/maykar/kiosk-mode

Logger: frontend.js.latest.202010214
Source: components/system_log/init.py:193
First occurred: 17:14:20 (5 occurrences)
Last logged: 17:38:20

http://192.168.1.3:8123/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js:17:63 TypeError: x.shadowRoot.querySelector(...) is null
http://192.168.1.3:8123/hacsfiles/kiosk-mode/kiosk-mode.js:15:105 TypeError: h.shadowRoot.querySelector(...) is null
http://192.168.1.3:8123/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js:19:62 TypeError: t is null

Failed to execute 'observe' on 'MutationObserver'

Hi, I am receiving the following error:

Logger: frontend.js.latest.202112291
Source: components/system_log/__init__.py:189
First occurred: 09:46:53 (2 occurrences)
Last logged: 09:46:53

/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js:13:44 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

Turning on Kiosk mode with swipe navigation stops hiding hidden tabs

I think the title says it all but here is what I know

Was setting up a new use exception for an echo show so it had limited pages and showed in kiosk.

When in this mode if i am using your swipe navigation as well then I can swipe to all of the hidden tabs. If kiosk is turned off then it will not swipe to the hidden tabs.

I have tried this as the master configuration and as an exception and the results are the same

Here is my config. Just changing kiosk to on from this shows the issue.

custom_header:
  compact_mode: true
  exceptions:
    - conditions:
        user: Show
      config:
        hide_tabs: '0,1,2,3,4,5,6,7,8,9,10,11,12,13,14'
        default_tab: '15'
        menu_dropdown: true
        voice_dropdown: true
        options_hide: true
  hide_tabs: '0,15'
  default_tab: '1'

I have not seen any logs

Issue shows using firefox on the echo show and chrome on android but i suspect others as well.

edit: Using Hassio 103.5, Custom Header 1.1.7 and Swipe Navigation 1.2.2

Repo Archived?

When I attempt to install via HACS I get an error in the log:

First occured: 11:36:51 PM (3 occurences)
Last logged: 11:36:51 PM

Repository is archived.```

FEATURE REQUEST: Auto Swipe Viewss

Is there any possiblity that you could add a setting to have HA display each view in turn every x seconds? so it'd start at view 1 then open view 2 and so on on a defined time cycle.

Thanks.

Animation breaks after popup was opened

When a popup was opened, e.g. more info popup, the swiping animation looks weird after.

swipe_nav not working

swipe_nav is not recognized as integration: "Component error: swipe_nav - Integration 'swipe_nav' not found."

Uncaught TypeError: Cannot read property 'animate' of undefined

I recently installed this lovelace plugin but am receiving this error in the logs:

https://<redacted>/local/community/lovelace-swipe-navigation/swipe-navigation.js:12:22 Uncaught TypeError: Cannot read property 'animate' of undefined

Here's what I added from the docs:
location: /www/community/lovelace-swipe-navigation/swipe-navigation.js
lovelace config:

resources:
  - url: /local/community/lovelace-swipe-navigation/swipe-navigation.js
    type: js

Anything obvious I'm doing wrong? Thanks!

Swipe and fade animations speed increase possible?

First of all, fantastic work on this card, this makes the mobile lovelace frontend so much more usable. Great work!

I have a minor request: can you make it an option in the lovelace yaml to set the fade and swipe animation speed? I like both of the animations but they feel too slow / sluggish, and I would greatly prefer to edit the animation speed in order to make it feel snappier.

add to HACS

I didn't see this on HACS could you add it please?

Error: cannot read property 'dir' of null

I got this error only in two of four dashboards
Both are displays with only 1 view
Hassio Version 116.2
Swipe Navigation 1.2.5

Swipe not working once entering edit mode

1st Swipe, everything's fine
2nd Switch to edit mode of any view ➡️ swipe isn't working in edit mode (okay for me)
3rd Return from edit to normal mode ➡️ swipe isn't working anymore

Workaround: full view reload (iOS Companion App: switch from top to bottom to reload page) needed.

Best background image and settings for Animate config option?

Hi,

I noticed there is Animate config option in latest version today.

Just curious, what is the best background image and settings for Animate config option?

In my case, I used dark blue background, but when animation it will pop up gray background. So not a good result.

If able to achieve similar to screenshot below (Animation is previous/next tab details), will be very nice:

Thanks.

Ignore Frigate Lovelace Card

https://github.com/dermotduffy/frigate-hass-card

You can swipe through video clips and events with this card.

Can this be added to ignored cards? Thank you.

shadowRoot error

Version | 2021.1.1
Installation Type | Home Assistant OS
Lovelace Swipe Navigation version 1.3.5

Logger: frontend.js.latest.202012291
Source: components/system_log/init.py:193
First occurred: 11:53:51 PM (1 occurrences)
Last logged: 11:53:51 PM

/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js:17:95 Uncaught TypeError: Cannot read property 'shadowRoot' of null

The integration seems to be working except for a small animation problem: last frame before switching to the next view shows previous view

Swipe not work with grafana iframe

I have a iframe card (with a url of a dashboard of grafana) with view in panel mode. In this case the swipe is not work (for this tab only).
Is possible to solve???

HACS labels the plugin as not loaded

I've installed the plugin through HACS, but it keeps telling me that the plugin is not loaded. How to I make it to load?

custom swiper card issue

If I'd like to use my swiper card the swipe navigation is activated immediately.

My config:

background: center/cover no-repeat url("/local/pictures/night.jpg") fixed
resources:
  - type: js
    url: /customcards/monster-card.js
  - type: js
    url: /customcards/custom_ui/dark-sky-weather-card.js
  - type: module
    url: >-
      https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/weather-card/weather-card.min.js?track=true
  - type: module
    url: /customcards/github/custom-cards/tracker-card.js?track=true
  - type: module
    url: >-
      https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/swipe-card/swipe-card.min.js
  - type: js
    url: /customcards/card-modder.js
  - type: js
    url: /customcards/card-tools.js
  - type: js
    url: /customcards/slider-entity-row.js
  - type: module
    url: /customcards/github/custom-cards/button-card.js?track=true
  - type: module
    url: /local/mini-graph-card-bundle.js
  - type: module
    url: /customcards/github/maykar/compact-custom-header.js?track=true
  - type: module
    url: /local/mini-media-player-bundle.js
  - type: module
    url: >-
      https://cdn.jsdelivr.net/gh/custom-cards/[email protected]/dist/spotify-card.umd.js
  - type: module
    url: /customcards/lovelace/spotify-card.js
  - type: js
    url: /local/custom-lovelace/bar-card/bar-card.js
  - type: js
    url: /local/vertical-stack-in-card.js
  - type: module
    url: /local/text-divider-row.js
  - url: /customcards/github/maykar/lovelace-swipe-navigation.js?track=true
    type: js
title: kisházikónk
views:
  - badges: []
    cards:
      - card:
          type: glance
        entities:
          - entity: group.bad_robot
            icon: 'mdi:robot'
          - entity: device_tracker.redminote6proredmi
            icon: 'mdi:face'
          - entity: device_tracker.meizum3note
            icon: 'mdi:face'
          - entity: device_tracker.b4cd27d31854
            icon: 'mdi:face-outline'
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          api_key: 271103fc3f013fb3bd0f87f9511fffcc
          entity: weather.dark_sky
          mode: daily
          type: 'custom:weather-card'
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-position: center
          background-repeat: no-repeat
          background-size: cover
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          camera_image: camera.wallpanel_camera
          entities:
            - camera.wallpanel_camera
          title: nappali
          type: picture-glance
        style:
          background-color: 'rgba(33,0,0,0.5)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - cards:
          - cards:
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.living_room
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.kitchen
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.kitchen2
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.bedroom
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.bathroom
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.room
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.entrance
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.wc_lampa
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            parameters:
              centeredSlides: true
              effect: slide
              grabcursor: true
              loop: false
              nested: true
              scrollbar:
                draggable: true
                hide: true
                snapOnRelease: true
              slidesPerGroup: 1
              slidesPerView: 3
              spaceBetween: 8
              speed: 300
            start_card: 2
            type: 'custom:swipe-card'
          - cards:
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: switch.71550386cc50e32a31de
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: switch.lg_tv
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: switch.plug_158d0002410dbd
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            parameters:
              centeredSlides: true
              effect: slide
              grabcursor: true
              loop: false
              nested: true
              scrollbar:
                draggable: false
                hide: true
                snapOnRelease: true
              slidesPerGroup: 1
              slidesPerView: 3
              spaceBetween: 8
              speed: 300
            start_card: 2
            type: 'custom:swipe-card'
          - cards:
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.living_room_ambilight
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.living_room_nightlight
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.kitchen_nightlight
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: light.kitchen2_nightlight
                  hold_action:
                    action: more-info
                  size: 20%
                  style:
                    - font-size: 14px
                  tap_action:
                    action: toggle
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            parameters:
              centeredSlides: true
              effect: slide
              grabcursor: true
              loop: false
              nested: true
              slidesPerGroup: 1
              slidesPerView: 3
              spaceBetween: 8
              speed: 300
            start_card: 2
            type: 'custom:swipe-card'
        type: vertical-stack
      - cards:
          - cards:
              - card:
                  animate: true
                  entities:
                    - sensor.temperature_mi
                  graph: line
                  name: kint
                  show: null
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - sensor.humidity_mi
                  graph: line
                  line_color: 'rgba(57,128,228)'
                  name: kint
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                  overflow: hidden
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card:
                  animate: true
                  entities:
                    - sensor.temperature_temperature
                  graph: line
                  name: nappali
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - sensor.temperature_humidity
                  graph: line
                  line_color: 'rgba(57,128,228)'
                  name: nappali
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                  overflow: hidden
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card:
                  animate: true
                  entities:
                    - sensor.broadlink_sensor_temperature
                  graph: line
                  name: szoba
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - sensor.broadlink_sensor_humidity
                  graph: line
                  line_color: 'rgba(57,128,228)'
                  name: szoba
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                  overflow: hidden
                type: 'custom:card-modder'
            type: horizontal-stack
        type: vertical-stack
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        clock_format: 12
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
    icon: 'mdi:home'
    id: 0
    panel: false
    title: Home
  - badges: []
    cards:
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - card:
          entities:
            - entity: light.living_room
              hide_when_off: true
              toggle: true
              type: 'custom:slider-entity-row'
            - entity: light.living_room_ambilight
              hide_when_off: true
              toggle: true
              type: 'custom:slider-entity-row'
            - entity: light.living_room_nightlight
            - type: divider
            - entity: light.kitchen
              hide_when_off: true
              toggle: true
              type: 'custom:slider-entity-row'
            - entity: light.kitchen_nightlight
            - type: divider
            - entity: light.kitchen2
              hide_when_off: true
              toggle: true
              type: 'custom:slider-entity-row'
            - entity: light.kitchen2_nightlight
          show_header_toggle: true
          title: Nappali lámpák
          type: entities
        style:
          background-color: 'rgba(0,0,20,0.5)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          title: Lámpák
          type: entities
        entities:
          - entity: light.gateway_light_7811dcf79959
            hide_when_off: true
            toggle: true
            type: 'custom:slider-entity-row'
          - entity: light.entrance
            hide_when_off: true
            toggle: true
            type: 'custom:slider-entity-row'
          - entity: light.room
            hide_when_off: true
            toggle: true
            type: 'custom:slider-entity-row'
          - entity: light.bedroom
            hide_when_off: true
            toggle: true
            type: 'custom:slider-entity-row'
          - entity: light.bathroom
            hide_when_off: true
            toggle: true
            type: 'custom:slider-entity-row'
          - entity: light.wc_lampa
        show_header_toggle: true
        style:
          background-color: 'rgba(0,0,20,0.5)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          entities:
            - entity: switch.plug_158d0002410dbd
              icon: 'mdi:webcam'
              name: kamera
            - entity: switch.71550386cc50e32a31de
              icon: 'mdi:lamp'
            - entity: switch.lg_tv
              icon: 'mdi:kodi'
          show_header_toggle: true
          title: Kapcsoló
          type: entities
        show_header_toggle: true
        style:
          background-color: 'rgba(0,0,20,0.5)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        title: kapcsoló
        type: 'custom:card-modder'
    icon: 'mdi:lightbulb'
    id: 1
    panel: false
    title: világítás és kapcsolók
  - badges: []
    cards:
      - card:
          cards:
            - elements:
                - icon: 'mdi:bell-ring'
                  style:
                    '--iron-icon-fill-color': '#1E90FF'
                    left: 80%
                    top: 90%
                  tap_action:
                    action: call-service
                    service: vacuum.locate
                    service_data:
                      entity_id: vacuum.xiaomi_vacuum_cleaner
                  type: icon
                - icon: 'mdi:home'
                  style:
                    '--iron-icon-fill-color': '#1E90FF'
                    left: 65%
                    top: 90%
                  tap_action:
                    action: call-service
                    service: vacuum.return_to_base
                    service_data:
                      entity_id: vacuum.xiaomi_vacuum_cleaner
                  type: icon
                - icon: 'mdi:play'
                  style:
                    '--iron-icon-fill-color': '#1E90FF'
                    left: 50%
                    top: 90%
                  tap_action:
                    action: call-service
                    service: vacuum.start
                    service_data:
                      entity_id: vacuum.xiaomi_vacuum_cleaner
                  type: icon
                - icon: 'mdi:pause'
                  style:
                    '--iron-icon-fill-color': '#1E90FF'
                    left: 35%
                    top: 90%
                  tap_action:
                    action: call-service
                    service: vacuum.pause
                    service_data:
                      entity_id: vacuum.xiaomi_vacuum_cleaner
                  type: icon
                - icon: 'mdi:stop'
                  style:
                    '--iron-icon-fill-color': '#1E90FF'
                    left: 20%
                    top: 90%
                  tap_action:
                    action: call-service
                    service: vacuum.stop
                    service_data:
                      entity_id: vacuum.xiaomi_vacuum_cleaner
                  type: icon
                - entity: sensor.vacuum_operation
                  style:
                    background-color: 'rgba(57,128,228,0.8)'
                    border-color: 'rgb(34, 154, 210)'
                    border-radius: 6px
                    color: 'rgb(255, 255, 255)'
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 3%
                    pointer-events: none
                    top: 10%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_accessories
                  style:
                    background-color: 'rgba(57,128,228,0.8)'
                    border-color: 'rgb(34, 154, 210,)'
                    border-radius: 6px
                    color: 'rgb(255, 255, 255)'
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    pointer-events: none
                    right: 3%
                    top: 10%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: vacuum.xiaomi_vacuum_cleaner
                  style:
                    background-color: 'rgb(250,250,250, .8)'
                    border-color: 'rgb(34, 154, 210)'
                    border-radius: 6px
                    color: 'rgb(0, 0, 0)'
                    font-family: Trebuchet MS
                    font-size: 100%
                    font-weight: bold
                    left: 50%
                    margin-right: '-50%'
                    padding: 70px 0;
                    top: 10%
                    transform: 'translate(-50%,-50%)'
                  tap_action:
                    action: more-info
                  type: state-label
                - entity: sensor.vacuum_main_brush
                  prefix: 'Fő kefe: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    opacity: 0.8
                    pointer-events: none
                    right: 1%
                    text-shadow: 1px 1px black
                    top: 30%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_side_brush
                  prefix: 'Oldal kefe: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    opacity: 0.8
                    pointer-events: none
                    right: 1%
                    text-shadow: 1px 1px black
                    top: 45%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_filter
                  prefix: 'Filter: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    opacity: 0.8
                    pointer-events: none
                    right: 1%
                    text-shadow: 1px 1px black
                    top: 60%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_sensor
                  prefix: 'Szenzorok: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    opacity: 0.8
                    pointer-events: none
                    right: 1%
                    text-shadow: 1px 1px black
                    top: 75%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_status
                  prefix: 'Állapot: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 1%
                    opacity: 0.8
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 30%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_battery
                  prefix: 'Akku: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 1%
                    opacity: 0.8
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 40%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_fan_speed
                  prefix: 'Mód: '
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 1%
                    opacity: 0.8
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 50%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_cleaned_area
                  prefix: 'Terület:'
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 31%
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 80%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_cleaning_time
                  prefix: 'Idő:'
                  style:
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 55%
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 80%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_weekdays
                  style:
                    color: 'rgb(255, 255, 255)'
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 1%
                    opacity: 0.8
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 75%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: sensor.vacuum_weekend
                  style:
                    color: 'rgb(255, 255, 255)'
                    font-family: Trebuchet MS
                    font-size: 80%
                    font-weight: bold
                    left: 1%
                    opacity: 0.8
                    pointer-events: none
                    text-shadow: 1px 1px black
                    top: 60%
                    transform: 'translate(0%,-50%)'
                  type: state-label
                - entity: automation.takaritas_utemezese_hetkoznap
                  image: /local/pictures/timer_off.png
                  state_filter:
                    'off': brightness(80%) saturate(0.8)
                    'on': brightness(200%) saturate(1.8)
                  state_image:
                    'on': /local/pictures/timer.png
                  style:
                    left: 20%
                    top: 75%
                  tap_action:
                    action: toggle
                  type: image
                - entity: automation.takaritas_utemezese_hetvegen
                  image: /local/pictures/timer_off.png
                  state_filter:
                    'off': brightness(80%) saturate(0.8)
                    'on': brightness(200%) saturate(1.8)
                  state_image:
                    'on': /local/pictures/timer.png
                  style:
                    left: 20%
                    top: 60%
                  tap_action:
                    action: toggle
                  type: image
              image: /local/pictures/roberta.png
              type: picture-elements
          type: vertical-stack
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          card:
            entities:
              - sensor.vacuum_start_time_weekdays
              - input_number.vacuum_start_hour_weekdays
              - input_number.vacuum_start_minutes_weekdays
            type: entities
          conditions:
            - entity: automation.takaritas_utemezese_hetkoznap
              state: 'on'
          type: conditional
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          card:
            entities:
              - sensor.vacuum_start_time_weekend
              - input_number.vacuum_start_hour_weekend
              - input_number.vacuum_start_minutes_weekend
            type: entities
          conditions:
            - entity: automation.takaritas_utemezese_hetvegen
              state: 'on'
          type: conditional
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - cards:
          - card:
              color: 'rgb(255, 165, 0)'
              color_off: 'rgb(30, 144, 255)'
              color_type: icon
              entity: input_boolean.zone_cleaning
              icon: 'mdi:robot-vacuum'
              name: zóna takarítás
              size: 10%
              style:
                - font-size: 14px
              type: 'custom:button-card'
            style:
              background-color: 'rgba(0,0,20,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(30,144,255,0.4)'
            type: 'custom:card-modder'
          - cards:
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.living_room_cleaning
                  icon: 'mdi:sofa'
                  name: nappali
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.girls_room_cleaning
                  icon: 'mdi:human-female-female'
                  name: lányok
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.middle_room_cleaning
                  icon: 'mdi:hanger'
                  name: gardrób
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.bedroom_cleaning
                  icon: 'mdi:bed-empty'
                  name: hálószoba
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.bathroom_cleaning
                  icon: 'mdi:shower'
                  name: fürdőszoba
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
              - card:
                  color: 'rgb(255, 165, 0)'
                  color_off: 'rgb(30, 144, 255)'
                  color_type: icon
                  entity: input_boolean.entrance_cleaning
                  icon: 'mdi:door'
                  name: előszoba
                  size: 25%
                  style:
                    - font-size: 14px
                  type: 'custom:button-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(30,144,255,0.4)'
                type: 'custom:card-modder'
            type: horizontal-stack
        type: vertical-stack
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
    icon: 'mdi:robot-vacuum'
    id: vacuum
    panel: false
    title: Roberta
  - badges: []
    cards:
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - cards:
          - card:
              artwork: cover
              entity: media_player.spotify
              hide:
                power: true
                source: true
                volume: false
              icon: 'mdi:spotify'
              id: Spotify
              shortcuts:
                buttons:
                  - icon: 'mdi:speaker'
                    id: script.1551549095264
                    name: Echo
                    type: script
                  - icon: 'mdi:speaker'
                    id: script.1551549151829
                    name: Hassio
                    type: script
                columns: 2
              show_progress: true
              type: 'custom:mini-media-player'
            style:
              background-color: 'rgba(0,0,20,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 20px
            type: 'custom:card-modder'
          - card:
              entity: media_player.krisztian_s_echo_dot
              hide:
                power: false
                source: true
                volume: false
              icon: 'mdi:amazon'
              id: Alexa
              shortcuts:
                buttons:
                  - icon: 'mdi:radio'
                    id: script.1551540992795
                    name: Rádió 1
                    type: script
                  - icon: 'mdi:radio'
                    id: script.1551541351592
                    name: Aktív
                    type: script
                  - icon: 'mdi:radio'
                    id: script.1551540656645
                    name: Petőfi
                    type: script
                  - icon: 'mdi:speaker'
                    id: script.1551546027294
                    name: Xiaomi
                    type: script
                  - icon: 'mdi:speaker'
                    id: script.1551545733657
                    name: BW
                    type: script
                  - icon: 'mdi:speaker'
                    id: script.1551545655901
                    name: Echo
                    type: script
                columns: 3
              show_progress: true
              type: 'custom:mini-media-player'
            style:
              background-color: 'rgba(0,0,20,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 20px
            type: 'custom:card-modder'
        id: mediaplayers
        type: vertical-stack
      - cards:
          - card:
              entity: media_player.samsung_tv
              icon: 'mdi:television'
              id: samsung tv
              show_source: true
              type: 'custom:mini-media-player'
            style:
              background-color: 'rgba(0,0,20,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 20px
            type: 'custom:card-modder'
          - card:
              entity: media_player.muse
              icon: 'mdi:speaker'
              id: muse
              show_source: true
              type: 'custom:mini-media-player'
            style:
              background-color: 'rgba(0,0,20,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 20px
            type: 'custom:card-modder'
        id: mediaplayers
        type: vertical-stack
    icon: 'mdi:play-pause'
    title: Média
  - badges: []
    cards:
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - card:
          entity: alarm_control_panel.en_kicsi_riasztom
          states:
            - arm_home
            - arm_away
            - arm_night
          type: alarm-panel
        style:
          background-color: 'rgba(0,0,20,0.5)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
    icon: 'mdi:shield-home'
    id: alarm
    panel: false
    title: riasztó
  - cards:
      - cards:
          - cards:
              - card:
                  animate: true
                  entities:
                    - sensor.cpu_temp
                  font_size: 70
                  graph: line
                  name: CPU hőmérséklet
                  show:
                    icon: null
                  show_icon: false
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - sensor.processor_use
                  font_size: 70
                  graph: line
                  line_color: 'rgba(57,128,228)'
                  name: CPU használat
                  show:
                    icon: null
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                  overflow: hidden
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: '#FFA50090'
                entity: sensor.cpu_temp
                title: CPU °C
                title_position: inside
                type: 'custom:bar-card'
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: 'rgba(57,128,228,0.7)'
                entity: sensor.processor_use
                title: CPU %
                title_position: inside
                type: 'custom:bar-card'
            type: horizontal-stack
        type: vertical-stack
      - cards:
          - card_style:
              background: 'rgba(0,0,20,.5)'
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 12px
            color: '#FFA50090'
            entities:
              - sensor.memory_use
            max: 8000
            title: használt memória
            title_position: left
            type: 'custom:bar-card'
          - card_style:
              background: 'rgba(0,0,20,.5)'
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 12px
            color: 'rgba(57,128,228,0.7)'
            entities:
              - sensor.memory_free
            max: 8000
            title: szabad memória
            title_position: left
            type: 'custom:bar-card'
          - card_style:
              background: 'rgba(0,0,20,.5)'
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 12px
            color: '#FFA50090'
            entity: sensor.disk_use_percent_home
            title: használt terület
            title_position: left
            type: 'custom:bar-card'
          - card_style:
              background: 'rgba(0,0,20,.5)'
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 12px
            color: '#FFA50090'
            entity: sensor.hass_db_meret
            max: 5000
            title: adatbázis méret
            title_position: left
            type: 'custom:bar-card'
        type: vertical-stack
      - cards:
          - cards:
              - card:
                  animate: true
                  entities:
                    - entity: sensor.miwifi_router_kbyte_sec_received
                      name: fogadott
                      show_state: true
                    - entity: sensor.miwifi_router_kbyte_sec_sent
                      name: küldött
                      show_state: true
                  font_size: 80
                  graph: line
                  hour24: true
                  hours_to_show: 2
                  name: adatforgalom
                  points_per_hour: 10
                  show_icon: false
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: '#FFA50090'
                entities:
                  - entity: sensor.miwifi_router_kbyte_sec_received
                max: 1300
                title: letöltés
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: 'rgba(57,128,228,0.7)'
                entities:
                  - entity: sensor.miwifi_router_kbyte_sec_sent
                max: 600
                title: feltöltés
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
        type: vertical-stack
      - card:
          entities:
            - entity: sensor.jelenlegi_verzio
            - entity: sensor.elerheto_verzio
            - entity: sensor.potential_breaking_changes
            - type: divider
            - entity: sensor.ha_uptime
              icon: 'mdi:home-assistant'
            - entity: sensor.nuc_uptime
              icon: 'mdi:ubuntu'
          show_header_toggle: false
          title: Rendszer
          type: entities
        style:
          background-color: 'rgba(0,0,0,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          entities:
            - entity: binary_sensor.entrance
            - entity: binary_sensor.backdoor
            - entity: binary_sensor.door_window_sensor_158d000237c50a
            - entity: sensor.illumination_7811dcf79959
            - entity: sensor.illumination_158d00029be9dc
            - entity: sensor.illumination_158d0002b48dd2
            - entity: sensor.illumination_158d0002b48df1
            - entity: binary_sensor.motion_sensor_158d0002b48e2d
            - entity: binary_sensor.motion_sensor_158d00029be9dc
            - entity: binary_sensor.motion_sensor_158d0002b48df1
            - entity: binary_sensor.motion_sensor_158d0002b48dd2
            - entity: binary_sensor.motion_sensor_158d0002b43db8
            - entity: binary_sensor.switch_158d0002469b37
            - entity: binary_sensor.cube_158d00027cf620
            - entity: sensor.temperature_temperature
            - entity: sensor.temperature_humidity
            - entity: sensor.broadlink_sensor_temperature
            - entity: sensor.broadlink_sensor_humidity
            - entity: sensor.broadlink_sensor_air_quality
            - entity: sensor.broadlink_sensor_light
            - entity: sensor.broadlink_sensor_noise
            - entity: sun.sun
            - entity: sensor.temperature_mi
            - entity: sensor.humidity_mi
          title: Szenzorok
          type: glance
        style:
          background-color: 'rgba(0,0,0,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - card:
          content: >-
            Snapshots are stale! Please visit the "Hass.io Google Drive Backup"
            add-on status page for details.
          title: Stale Snapshots!`
          type: markdown
        conditions:
          - entity: binary_sensor.snapshots_stale
            state_not: 'False'
        type: conditional
    icon: 'mdi:gauge'
    id: sensors
    title: szenzorok
  - badges: []
    cards:
      - card:
          type: 'custom:tracker-card'
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
          color: dodgerblue
        type: 'custom:card-modder'
      - card:
          entities:
            - text: Aqara hangok
              type: 'custom:text-divider-row'
            - input_boolean.mute_gateway_sounds
            - input_number.gateway_volume
            - input_select.gateway_sound
            - input_number.loop_delay
            - script.play_sel_sound
            - script.play_sel_sound_loop
            - script.play_sel_sound_single
            - text: eszköz hozzáadása
              type: 'custom:text-divider-row'
            - input_boolean.add_device_to_gateway
          show_header_toggle: false
          type: entities
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - card:
          entities:
            - entity: sensor.count_automations
            - entity: sensor.count_scripts
            - entity: sensor.count_device_trackers
            - entity: sensor.count_lights
            - entity: sensor.count_switches
            - entity: sensor.count_sensors
            - entity: sensor.count_binary_sensors
            - entity: sensor.count_zones
          show_header_toggle: false
          title: Rendszer
          type: entities
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
    icon: 'mdi:monitor-dashboard'
    panel: false
    title: vezérlőpult
  - cards:
      - background: url("/local/pictures/cardback.png")
        background_color: 'rgba(0,0,20,0.3)'
        main_config: true
        menu: show
        options: show
        type: 'custom:compact-custom-header'
        voice: hide
      - card:
          entities:
            - entity: input_boolean.family_room_lights
            - entity: input_boolean.bathromm_lights
            - entity: input_boolean.wc_lights
            - entity: input_boolean.training_mode
          title: Node-RED automatizációk
          type: entities
        style:
          background-color: 'rgba(0,0,20,.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          card:
            entities: null
            show_header_toggle: false
            title: Automatizációk
            type: entities
          filter:
            include:
              - domain: automation
          type: 'custom:monster-card'
        id: b6a9326bbbcd44c89afafc6501c45d6
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
      - card:
          card:
            entities: null
            show_header_toggle: false
            title: Szkriptek
            type: entities
          filter:
            include:
              - domain: script
          type: 'custom:monster-card'
        style:
          background-color: 'rgba(0,0,20,0.3)'
          background-image: url("/local/pictures/cardback.png")
          background-repeat: no-repeat
          background-size: 100% 100%
          border: 'solid 1px rgba(57,128,228,0.4)'
          border-radius: 20px
        type: 'custom:card-modder'
    icon: 'mdi:home-automation'
    id: automations
    title: automatizációk
  - badges:
      - device_tracker.krisz_xiaomi
      - device_tracker.redminote6proredmi
      - device_tracker.b4cd27d31854
      - device_tracker.meizum3note
      - device_tracker.google_maps_112663899830868336636
    cards:
      - entity_current_conditions: sensor.dark_sky_icon
        entity_daily_summary: sensor.dark_sky_daily_summary
        entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
        entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
        entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
        entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
        entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
        entity_forecast_icon_1: sensor.dark_sky_icon_1
        entity_forecast_icon_2: sensor.dark_sky_icon_2
        entity_forecast_icon_3: sensor.dark_sky_icon_3
        entity_forecast_icon_4: sensor.dark_sky_icon_4
        entity_forecast_icon_5: sensor.dark_sky_icon_5
        entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_1
        entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_2
        entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_3
        entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_4
        entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_5
        entity_humidity: sensor.dark_sky_humidity
        entity_pressure: sensor.dark_sky_pressure
        entity_summary_1: sensor.dark_sky_summary_1
        entity_summary_2: sensor.dark_sky_summary_2
        entity_summary_3: sensor.dark_sky_summary_3
        entity_summary_4: sensor.dark_sky_summary_4
        entity_summary_5: sensor.dark_sky_summary_5
        entity_sun: sun.sun
        entity_temperature: sensor.dark_sky_temperature
        entity_visibility: sensor.dark_sky_visibility
        entity_wind_bearing: sensor.dark_sky_wind_bearing
        entity_wind_speed: sensor.dark_sky_wind_speed
        type: 'custom:dark-sky-weather-card'
      - entities:
          - entity: input_datetime.both_date_and_time
          - entity: input_datetime.only_date
          - entity: input_datetime.only_time
        type: entities
      - cards:
          - card:
              animate: true
              entities:
                - entity: sensor.temperature_mi
                  name: hőmérséklet
                - entity: sensor.humidity_mi
                  name: páratartalom
                  show_state: true
              font_size: 80
              icon: 'mdi:weather-partlycloudy'
              legend: true
              name: külső
              type: 'custom:mini-graph-card'
            style:
              background-color: 'rgba(0,0,0,0.3)'
              background-image: url("/local/pictures/cardback.png")
              background-repeat: no-repeat
              background-size: 100% 100%
              border: 'solid 1px rgba(57,128,228,0.4)'
              border-radius: 20px
            type: 'custom:card-modder'
          - cards:
              - card:
                  animate: true
                  entities:
                    - entity: sensor.temperature_temperature
                      name: nappali
                      show_state: true
                    - entity: sensor.broadlink_sensor_temperature
                      name: szoba
                      show_state: true
                  font_size: 70
                  icon: 'mdi:home'
                  name: hőmérséklet
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,0,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - entity: sensor.temperature_humidity
                      name: nappali
                      show_state: true
                    - entity: sensor.broadlink_sensor_humidity
                      name: szoba
                      show_state: true
                  font_size: 70
                  icon: 'mdi:home'
                  name: páratartalom
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,0,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            type: horizontal-stack
        type: vertical-stack
      - cards:
          - cards:
              - card:
                  animate: true
                  entities:
                    - sensor.cpu_temp
                  font_size: 70
                  graph: line
                  name: CPU hőmérséklet
                  show_icon: false
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
              - card:
                  animate: true
                  entities:
                    - sensor.processor_use
                  font_size: 70
                  graph: line
                  line_color: 'rgba(57,128,228)'
                  name: CPU használat
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                  overflow: hidden
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: '#FFA50090'
                entity: sensor.cpu_temp
                title: CPU °C
                title_position: inside
                type: 'custom:bar-card'
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: 'rgba(57,128,228,0.7)'
                entity: sensor.processor_use
                title: CPU %
                title_position: inside
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - border-radius: 20px
                card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                color: '#FFA50090'
                entities:
                  - sensor.memory_use
                  - sensor.memory_free
                max: 8000
                title: használt memória
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - border-radius: 20px
                card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                color: '#FFA50090'
                entity: sensor.memory_free
                max: 8000
                title: szabad memória
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - border-radius: 20px
                card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                color: '#FFA50090'
                entity: sensor.disk_use_percent_home
                title: használt terület
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - card:
                  animate: true
                  entities:
                    - entity: sensor.miwifi_router_kbyte_sec_received
                      name: fogadott
                      show_state: true
                    - entity: sensor.miwifi_router_kbyte_sec_sent
                      name: küldött
                      show_state: true
                  font_size: 100
                  graph: line
                  name: adat
                  show_icon: false
                  type: 'custom:mini-graph-card'
                style:
                  background-color: 'rgba(0,0,20,0.3)'
                  background-image: url("/local/pictures/cardback.png")
                  background-repeat: no-repeat
                  background-size: 100% 100%
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                type: 'custom:card-modder'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: '#FFA50090'
                entities:
                  - entity: sensor.miwifi_router_kbyte_sec_received
                title: adat fogadás
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
          - cards:
              - card: null
                card_style:
                  background: 'rgba(0,0,20,.5)'
                  border: 'solid 1px rgba(57,128,228,0.4)'
                  border-radius: 20px
                color: 'rgba(57,128,228,0.7)'
                entities:
                  - entity: sensor.miwifi_router_kbyte_sec_sent
                title: adat küldés
                title_position: left
                type: 'custom:bar-card'
            type: horizontal-stack
        type: vertical-stack
    icon: 'mdi:wrench'
    title: playground

No swipe navigation in HACS

Hi,

I would like to install this with HACS but he doesn't found "swipe navigation", some help please?

Thank you

Component error: swipe_nav - Integration 'swipe_nav' not found

Installing version 1.3.5 from HACS, adding
swipe_nav:
wrap: false
animate: swipe
skip_tabs: 5,6,7,8
prevent_default: true
swipe_amount: 30

to configuration file, but I get error "Component error: swipe_nav - Integration 'swipe_nav' not found".

Documentation update

Your documentation says that this feature is included in CCH, linked at the bottom of this page: https://github.com/maykar/lovelace-swipe-navigation/blob/master/info.md

This is not the case, if you go to the CCH documentation, and look at the important notes, it clearly states that you should use this repo for swipe navigation, linked here: https://maykar.github.io/custom-header/#intro/notes

So which is it? CCH clearly doesn't support swipe navigation, but this repo does.

I'd be happy to put in a pull request to update the documentation, if you can validate which method is correct.

Cheers.

Errors messages in HA log

Could you please check. I have periodical errors in HA log:

..../lovelace-swipe-navigation/swipe-navigation.js:19:75 TypeError: t.shadowRoot.querySelector(...) is null']

I have last version of HA and last 1.3.0 swipe-navigation. No addition configuration.

Only works on default lovelace dashboard

I noticed the swipe only works on the default lovelace dashboard. If I create a second dashboard the swipe does not work, but if I put the second dashboard to the default it works. Would it be possible to enable swipe on all dashboards?

Swipe navs not working with custom fields in custom:button-card

Hello, Maykar!
Firstly, sorry for my English.

All my front-end was builded with component "Custom Button Card", which allow to create cards inside itself.
I have some areas where I use cards inside custom buttons card, and these custom fields does not supports swipe navigation.

How to reproduce:
Use custom:button-card, create custom_field: with any card. For example, for adding graph to your existing card. Zone with graph will not pesponse to swipes.

Can I add this custom fields to allowlist somehow?

Thanks for your respond!

Example from cutsom-button-card docs.

- type: custom:button-card
  aspect_ratio: 1/1
  custom_fields:
    graph:
      card:
        type: sensor
        entity: sensor.sensor1
        graph: line
  styles:
    custom_fields:
      graph:
        - filter: opacity(50%)
        - overflow: unset
    card:
      - overflow: unset
    grid:
      - grid-template-areas: '"i" "n" "graph"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content

  entity: light.test_light
  hold_action:
    action: more-info

Ignores not working in Safari / Firefox

This line is never true in Safari or Firefox

lovelace-swipe-navigation/swipe-navigation.js

Line 71 in e7f4c98

if (typeof event.path == "object") {

I tried this in Safari and Firefox and these ignores won't work. Everything works fine in Chrome

System Health

version	core-2021.9.4
installation_type	Home Assistant OS
dev	false
hassio	true
docker	true
user	root
virtualenv	false
python_version	3.9.6
os_name	Linux
os_version	5.10.17-v7l
arch	armv7l
timezone	Europe/Budapest

Home Assistant Community Store

GitHub API	ok
Github API Calls Remaining	4981
Installed Version	1.15.2
Stage	running
Available Repositories	879
Installed Repositories	10

AccuWeather

can_reach_server	ok
remaining_requests	11

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Home Assistant Supervisor

host_os	Home Assistant OS 6.3
update_channel	stable
supervisor_version	supervisor-2021.09.0
docker_version	20.10.7
disk_total	57.8 GB
disk_used	3.2 GB
healthy	true
supported	true
board	rpi4
supervisor_api	ok
version_api	ok
installed_addons	Home Assistant Google Drive Backup (0.104.3), File editor (5.3.3), Terminal & SSH (9.1.3), Duck DNS (1.13.0), Z-Wave JS (0.1.38)

Lovelace

dashboards	2
resources	6
views	7
mode	storage

Swipe navigation not working on Android

I recently upgraded to 1.3.5 any swipe navigation is no longer working. It has previously worked for the last few versions.

I use the home assistant Android app and have reloaded multiple times. Sometimes it does work for a couple minutes, but then becomes unresponsive and I can no longer swipe between dashboards. Normally doing a reload does enable it to work again. But it always stops after a few minutes.

I use the default swiping configuration and I do not have any configurations in my Lovelace dashboard.

Samsung Galaxy S20
Android 11
Home Assistant 2021.1.0

Frigate-card carousel view

The new frigate-card has a thumbnail carousel at the bottom of the camera-feed, which is swipeable.
Possible to disable sipe-navigation on this ?

lovelace swipe navigation, not load!... at HACS

0.110 & dashboard compatibility & (TypeError: Cannot read property 'lovelace' of null)

Logger: frontend.js.latest.202003181
Source: components/system_log/init.py:209
First occurred: 10:40:46 PM (4 occurrences)
Last logged: 10:42:55 PM

https://URL/local/community/lovelace-swipe-navigation/swipe-navigation.js:10:21 Uncaught TypeError: Cannot read property 'lovelace' of null
https://URL/local/community/custom-header/custom-header.js:1:7166 Uncaught TypeError: Cannot read property 'querySelector' of undefined

• url: /local/community/lovelace-swipe-navigation/swipe-navigation.js
  type: js

Not working outside of local network

Used to work on local network and via 4g with domain but now only local network works on HA 118

I get this error when I connect outside my network

Logger: frontend.js.latest.202011112
Source: components/system_log/init.py:193
First occurred: 14:13:08 (3 occurrences)
Last logged: 14:18:41

https://*************/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js:19:100 Uncaught TypeError: Cannot read property 'shadowRoot' of null

Ignore slider entity row

https://github.com/thomasloven/lovelace-slider-entity-row

Can this also be added to the ignore list?

Ignore slider button card

https://github.com/mattieha/slider-button-card

Can this be added to ignored cards?

Local custom_updater/Tracker_card - not displaying

Create card!

I am not sure that this is an issue, but this card behaves differently than other cards for custom updater/Tracker_card..
When using this, custom_updater/Tracker_card behaves as expected.

• type: js
  url: /customcards/github/maykar/lovelace-swipe-navigation.js?track=true

When using this, its not displayed in custom_updater/Tracker_card.

• type: js
  url: /local/custom-lovelace/lovelace-swipe-navigation.js

The thing is, other cards are displayed correctly in the custom_updater/Tracker_card, using
url: /local/custom-lovelace/…

How come it does not works for local location?

Swipe-navigation doesn't work with HA 0.110 (dev)

I am testing with Home Assistant 0.110, which is in development at this moment.

The frontend isn't loading anymore, and i see the following "swipe-navigation" error in my logging:

2020-05-11 09:42:26 ERROR (MainThread) [frontend.js.latest.202005090] https://hostname/hacsfiles/lovelace-swipe-navigation/swipe-navigation.js?v=1.2.2:10:21 Uncaught TypeError: Cannot read property 'lovelace' of null

HA 0.117 issue

Doesn't work after HA 0.117 update

Ignore for lovelace-xiaomi-vacuum-map-Card

Hi, would be great if you could add support to ignore the „lovelace-xiaomi-vacuum-map-Card“
https://github.com/PiotrMachowski/lovelace-xiaomi-vacuum-map-card

Thanks :)

Is this still working in v117

I can't get it to work in v117.
I've did a copy paste of the example but nothing happens.

Swipe broken on beta 0.117.0b0

Title says it all, Updated to 0.117.0b0 and swipe component no longer works.