↔️ Swipe Navigation

mayker · October 25, 2020, 9:03pm

You’ve set swipe_amount: 30 so you’d have to swipe 30% of your screen’s width or more to initiate a swipe. Maybe lower that or remove it altogether so it’s the default 15%. Not sure where else you might be getting issues, depending on what your card mod setup is that may mess with it too. Try removing the swipe_amount and if it still doesn’t work, disable the card-mod modifications to see if that does it.

mayker · October 25, 2020, 9:15pm

And if your card-mod setup is hiding all the tabs then you might want to add skip_hidden: false to the swipe_nav config.

Duke_box · October 25, 2020, 10:26pm

Thanks David,

I hadn’t done that and now I can see it.

I will try to install it that way.

Duke_box · October 25, 2020, 10:28pm

My card-mod is not hiding any tabs.

I will delete everything and try again through HACS.
Thanks for your input so far.

EDIT: All working now. I had a corrupt .js file

Thanks for your help.

mayker · October 30, 2020, 12:01pm

Release 1.2.7

0.117 compatibility
Fix errors when using single tab layouts

GaryK · October 30, 2020, 12:21pm

Thank You!

smithbill17 · November 7, 2020, 3:48pm

I’m not making any progress trying to get this swipe navigation to work - any pointers would be appreciated.

I’m using Home Assistant 0.117.5 running in a Docker container on RPi4b
I’ve downloaded swipe-navigation.js (v1.3.0) from GitHub and placed it in ~/homeassistant/www/lovelace-swipe-navigation/swipe-navigation.js
In Home Assistant I’ve gone to Lovelace Dashboard menu and added a new Resource as /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.3.0 with type as JavaScript
I’ve created a new Dashboard and edited it with Raw Configuration editor and added:

swipe_nav:
wrap: false
animate: swipe
prevent_default: true

at the top and saved it.

There are no errors in the Log file but there is no apparent change to the dashboard tabs - everything is just as normal. What am I missing? Any help gratefully received.

UPDATE: Actually I’m now seeing this error in the log, but I don’t understand what it’s telling me:

Logger: frontend.js.latest.202010214
Source: components/system_log/init.py:193
First occurred: 16:30:47 (1 occurrences)
Last logged: 16:30:47

http://192.168.8.172:8123/local/lovelace-swipe-navigation/swipe-navigation.js?v=1.3.0:6:1 Uncaught SyntaxError: Unexpected token ‘<’

UPDATE2: I understand that error indicates it’s not finding the .js file, yet if I open the URL
http://192.168.8.172:8123/local/lovelace-swipe-navigation/swipe-navigation.js?v=1.3.0 on my phone, it opens the JavaScript file no problem. So why can’t Home Assistant find it?

smithbill17 · November 7, 2020, 5:45pm

Hoorah! I got it working.

The problem is that v1.3.0 in GitHub does NOT work!

I noticed that v1.3.0 looked quite different to v.1.2.9 and earlier versions (it seems to have been rewritten using constants etc). I rolled back to v1.2.9 and it worked first time.

@mayker - it seems v1.3.0 of your code doesn’t work on Home Assistant 0.117.5 running in docker, whereas 1.2.9 works fine.

mayker · November 7, 2020, 6:01pm

1.3.0 should be working fine, try grabbing the file from the latest release (forgot to update the readme on manual installation since last release, updated now.)

The error:
SyntaxError: Unexpected token ‘<’

Usually means you copied the file from the github page displaying the code rather than the raw file.

smithbill17 · November 7, 2020, 6:34pm

I think I initially downloaded it from the github page as you suggested, but after reading about the error I was getting, I then went to latest release, then assets, downloaded the .zip and extracted the .js from it and copied it to my www directory. I still couldn’t get it to work. Whereas when I downloaded v1.2.9 zip file and copied the .js file, it worked straight away.

mayker · November 7, 2020, 6:55pm

Possibly caching issue? Do you get any errors when using the 1.3.0 release? I’m using the current release without issue using your same config.

Also, if you incorrectly installed 1.3.0 and set your resource version as ?v=1.3.0 that means you’ve now cached the version with that error when using ?v=1.3.0. So my suggestion would be to try the latest version, but change that version number at the end of your resources URL to something like ?v=1.3.0.1

And with over 500 downloads from just HACS users of this version, I think I would have heard more if it was indeed broken.

smithbill17 · November 7, 2020, 7:24pm

Well, I did try messing around with the version number in the resource, but it didn’t seem to make any difference. I’m not sure how the caching thing works, but I did keep force-closing Chrome, wipe cache & restart Home Assistant - I still couldn’t get it working.

Yes, I’ve no doubt from what you say, that the issue was mine. But I tried all kinds of things and got nowhere until I tried 1.2.9 and it then just worked perfectly.

When I’m feeling brave, I’ll try v1.3.0 again and see what happens.

mayker · November 7, 2020, 7:26pm

I also highly recommend using HACS to handle custom additions, it not only makes the update process loads easier, it has it’s own non caching endpoint for resources.

smithbill17 · November 7, 2020, 7:28pm

Being new to Home Assistant, I’ve no idea what HACS is/does, but I’ll Google it. I thank you for your work & kind support sir.

mayker · November 7, 2020, 7:32pm

skank · December 3, 2020, 9:12pm

hi installed it through hacs
then i added in my resource file of my second dashboard
however, if i swipe, nothing is happening

any idea?

i dont have to add it in my configuration right? since i want default settings

qoheleth · December 3, 2020, 10:25pm

You have to put some lines into your lovelace (dashboard). If you’re using the UI you can do that by clicking in the upper right on the three dots and selecting edit dashboard and then clicking again on the three dots and selecting edit raw configuration.
Here’s what you need to enter:

title: [Name of your dashboard]
swipe_nav:
  wrap: true
  animate: swipe

(You can, of course change wrap to false and animate to another option.)

skank · December 5, 2020, 10:27am

oh, ok cause it said:

If you just want to use the default config values you don’t need to add a config at all.
Will add and see if it works

skank · December 5, 2020, 10:47am

I added it to my dashboard

decluttering_templates:
  notification_template:     # This is the name of a template
    card:
      type: custom:button-card
      name: '[[name]]'
      size: 100%
      show_state: false
      show_label: false
      layout: icon_name
      tap_action: 
        action: none
      hold_action: 
        action: none
      styles:
        card:
          - --ha-card-background: rgba(0,0,0,0.0)
          - box-shadow: none
          - height: 45px
        name:
          - font-size: 18px
          - font-family: Helvetica
          - color: var(--primary-color)
          - justify-self: start
          - font-weight: normal
        grid: 
          - grid-template-areas: '"i n"'
          - grid-template-columns: 8% 1fr
          - grid-template-rows: 1fr
       
background: var(--background-image)
title: Thuis
swipe_nav:
  wrap: true
  animate: swipe
views:
  - !include lovelace_tablet_arne/views/Klok.yaml
  - !include lovelace_tablet_arne/views/Home.yaml

But it doesnt work…
You are sure i have to put it there, and not in the configuration file?
I’m in yaml mode

I added this to my resources file of the dashboard too

url: /hacsfiles/lovelace-swipe-navigation/swipe-navigation.js
type: module

But still no luck

qoheleth · December 5, 2020, 2:13pm

I don’t know why it would make any difference, but I do note a comment in mayker’s manual installation instructions about increasing the version number:

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

I added Swipe Navigation through HACS as you did, but didn’t add any resources line. I am not using storage mode (Though much of the time I just go to editing the raw configuration file).