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:
lovelace-swipe-navigation.js into /www/lovelace-swipe-navigation/
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
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 
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.
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.
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 
) 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.
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 (sorry for these questions)
Home Assistant deserves the all credit here. I’ve always played around with other peoples code, but nothing past copy/paste. Once I started using HA I found that seeing the fruits of your labor in the real world really motivated me.
I started some Codecademy lessons, but didn’t get too far. I really learned most from seeing other peoples projects here, failing a bunch, and at some point @Bram_Kragten took pity on me (probably looked through my code and wept). He helped me rewrite CCH from the ground up. Learned a ton from that and it really filled in a good bit of the gaps I had since I was essentially just combing forums and stackoverflow to find what I needed.
I’m still far from comfortable in what I’m doing, but the community here is great. Suggested features and bug reports from the forums/github really add additional motivation to learn new things.
I understand what you mean, hence you do a great job. I couldn’t even come close, I only did some basic HTML at the early 2000’s and a bit of mysql and c++ as I had a private World of Warcraft server to play with. I could do some simple stuff like adding npc’s to the game and copy/paste buildings and stuff and I knew how to add custom quests etc. But that was basically it. Oh yeah I used a bunch of CMS software in the past, but no real need to learn hard stuff. Just how to set it up and add a line here and there to some files.
So I respect everything that is better than what I can do (and even if not I’ll still respect it/them). Thing is I am a fast learner, I just don’t know where to start. So many languages!
Btw, I too learnt a lot from actually reading/replying/asking on these forums. I even came up with a pretty decent looking lovelace setup. Though I’m pretty sure that when bram_kragten watches my code he’ll not only cry but laugh his behind off 
.
Oh well, it works pretty well and I use a lot of your cards 
GitHub - jimz011/homekit-infused: Homekit Infused 5 2023
Thanks for the great chatter, I will no longer derail this topic any further 
(srry)
Edit:
Funny, a friend of me that actually does coding for a long time said, ‘We never do differently, it is always just copying/pasting 
’
This has been fixed in the latest release
To make sure this works with the new HACS component I renamed the js file to just swipe-navigation.js be sure to update your URLS (e.g., /local/lovelace-swipe-navigation/swipe-navigation.js).
If you haven’t checked it out yet it’s essentially the new custom_updater and acts similar to how the add-on store in hassio works.
How did you design those buttons? Can you share your card?
Edit: 1.10 of the button-card changed some style elements. I will fix these tonight!
Hi Jim,
I have been over your code and have a few things running, I can’t get the lights working quite right, can you share a screen shot of how the dimming of the lights will work please?
Also the pop up card doesn’t seem to be working. For this section here these lights should be in a pop up or am I not understanding?
popup_cards:
light.woonkamer_plafond:
title: Woonkamer Plafond
style:
border-radius: 12px
background: var(–background-image)
Pop up cards only work if the code is exact. One error in the code and it won’t work anymore.
I also use a custom card for them, called light entity card. (all custom cards I use are linked on my github repo)
For testing purposes I would maybe even remove the popup cards just to make sure that everything is working, and then add the pop up config after that.
I use the pop up cards because it is a bit cleaner than the original more-info window. You don’t need the popup windows for lights/devices etc. the original more info window will work just as fine.
My setup with popup and light entity:
Original more-info window:
So nothing much you will mis if you do not use the pop up card on this view tbh.
