↔️ Swipe Navigation

I think he said he wanted to do both, integrating it in CCH and keeping this as a standalone (but not sure about that). I think he’ll probably just integrate it into CCH and remove this (as it will be less work) but hey those are just my thoughts about it.

For now I guess you’d be fine using this, it is actually really great, and it works flawlessly alongside the CCH card.

I know I am not the dev and I answer your question, but this is what I think I saw him say in a few other posts and you’ll have a quick response :stuck_out_tongue:

1 Like

I’m currently working this into the next release of CCH and will keep a standalone version as well. The only difference between the two versions will be the method of configuration.

3 Likes

Release 1.1.2

  • Added more animation options.
  • Tweaked the previous swipe animation to add a slight fade out.

Added some more animation options can now use: "none", "swipe", "flip", and "fade".

All animations will show the background-color of your theme at the midway point, this is unavoidable but with the tweaks to the swipe animation and the new options it should look much better. If you don’t use a background image this isn’t noticeable.

1 Like

This is now a feature included in Compact Custom Header. This standalone version will continue as well and any features added here will be available in CCH and vice versa (with the exception of tab ranges).

2 Likes

So good to read this. Thanks!

No idea what I’m doing wrong, but doesn’t work for me. I’m using Home Assistant 0.91.4

  1. I downloaded version 1.1.4 from here: https://github.com/maykar/lovelace-swipe-navigation/releases
  2. I created the folder “lovelace-swipe-navigation” in the “www” folder under Home Assistant’s config folder
  3. I copied “lovelace-swipe-navigation.js” to the new folder (full path for me is /config/www/lovelace-swipe-navigation/lovelace-swipe-navigation.js)
  4. I added the below to the top of my “ui-lovelace.yaml” file
    resources:
    • url: /local/lovelace-swipe-navigation.js?v=1.1.4
      type: js

I refresh my home assistant page.

Everything is exactly as it was before. No swipes… What am I doing wrong?

What do the logs say? Try changing the version number to anything higher in the resources. This will reload the cache and then refresh the page/app.

Logs don’t say anything and incrementing the version number does nothing also.

It’s as though nothing has changed at all. Restarting Home Assistant shows nothing either.

If you put it in a folder it should be:
/local/lovelace-swipe-navigation/lovelace-swipe-navigation.js
not
/local/lovelace-swipe-navigation.js

Like so:

resources:
  - url: /local/lovelace-swipe-navigation/lovelace-swipe-navigation.js?v=1.1.4
    type: js

Do you happen to use CCH (Compact Custom Header) by any chance? This feature is integrated in that.

Yay, that fixed the issue. Was so simple in the end!!! All working now.

Please note the instruction on the github “README.md” file has this mistake also (i’ll see if i can update the GitHub instructions now). It shows:

Manual installation:

  1. Copy lovelace-swipe-navigation.js into /www/lovelace-swipe-navigation/
  2. Add the resource in ui-lovelace.yaml or by using the “Raw Config Editor”.

resources: # increase this version number at end of URL after each update - url: /local/lovelace-swipe-navigation.js?v=1.0.0 type: js

  1. Refresh the page.
1 Like

Merged your PR. Thank you!

Ah yeah I see the folder mistake too now, though unfortunately many custom-components have their README’s like this. You can also rename the folder or put it in another directory (as long as it is located in the www folder). Just make sure you refer to it.

But still, if you use CCH you can just remove this and use the slider in that as well (mayker has put this feature in that as well which is easier to setup imho as you don’t need to fiddle in the JS files for config).

@mayker You’ve done a great job on this addon. Myself and others have been asking for this feature for a long time! Refer below.

I think this would make a great addition to the main branch of Home Assistant and especially the v1.0 milestone. @balloob please have a look at code base, can it be added to upcoming versions of Home Assistant as standard?

I have no doubt that this functionality will be added to core at some point, but not my implementation of it. There are already options out there for adding swipe navigation into polymer that don’t require workarounds to “fake” the effect like I do. This should be considered a temporary solution until something like this makes it’s way into core.

You’re very modest :smile:

The primary UI for most people is the PWA on their phone (android or iOS). It’s been a long time coming, so I’m not sure it’s exactly easy to do as it’d have been done by now. Doesn’t look ‘hacky’ to me at all!

Well done! I’ve bought you a coffee.

1 Like

Thank you, much appreciated!

I agree, it doesn’t look hacky. However if you use the animation effects it kinda does when you use a background image. I think that is what @mayker meant with hacky. To my knowledge he said there is no way around it with his implementation.

Despite that the fade animation is pretty good, though it also animates when trying to get to a page that shouldn’t be swiped on.

E.g. I have set wrap to false so that I can’t slide from the first to the last view, meaning the view will only slide one way on the first and last view.
But when sliding from the first view to the right (which would normally take you back to the last view) the screen should be only be able to slide to the right. It still plays the fade animation though and just takes you to the same view again.

Then there is the slide animation, it doesn’t play well with background images. It tries to render the entire background on the viewport of my iphone (at least that is what it looks like). After swiping through a few pages it will work for a little moment until you either exit the app, refresh it or restart/open the app.


In the screenshot you can see what I mean.

I use it without animations and it is really the best thing to have. I use it in CCH now (@mayker ty for integrating this) which is another great addon for lovelace.

Btw this is not to be negative on @mayker because honestly this addon was the thing I have been looking for for months and he just did it. I don’t care if it is hacky, as long as it works and fair is fair, some things even worked better when hacky. Like @Lopton’s way of doing a long-press on the custom button card was a hacky way, but the only long-press button that worked a 100% of the time at first try. With core implementation and even with the current button-card implementation it is never a 100% hit and sometimes it will activate a single press whilst still holding down the button, or it would act as a single press and still open the more-info window.

So to make a long story short, @mayker you are a great developer and you have made great cards. But wouldn’t it interest you to develop something like this for core? Your current implementation maybe is limited, but how about making it in polymer (or whatever it is called :stuck_out_tongue:) no seriously, I use a lot of your addons as they are one of a kind. Thanks a lot for your hard work!

I do plan on contributing what I can to core at some point, but I’ve been dragging my feet with the first steps as free time is limited. I’ve been coding less than a year and have been working through a coding bootcamp for a good bit now, so when I do have the time it takes priority as it’s working towards a career change and better salary. I really enjoy making these things since they’re a learning experience as well and I find that just hacking away at JavaScript is easier to jump into than getting myself setup for anything more complicated ATM.

1 Like

I think you are great, I want to do something like that myself. I work as a bartender and entertainer with kids now, but salary isn’t great, the job is ok though. Did you do it by just the internet? Or did you get a course? Or maybe bought some books? I’d love to know :stuck_out_tongue: (sorry for these questions)

1 Like