↔️ Swipe Navigation

[mayker (maykar (pronounced "maker" with a southern accent))]

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.

[jimz011 (Jim)]

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:

@mayker

I’ve always played around with other peoples code, but nothing past copy/paste

Funny, a friend of me that actually does coding for a long time said, ‘We never do differently, it is always just copying/pasting ’

[mayker (maykar (pronounced "maker" with a southern accent))]

@jimz011

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.

This has been fixed in the latest release

[mayker (maykar (pronounced "maker" with a southern accent))]

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.

[dacorn (Dave Acorn)]

How did you design those buttons? Can you share your card?

[jimz011 (Jim)]

jimz011/homekit-infused

Edit: 1.10 of the button-card changed some style elements. I will fix these tonight!

[dacorn (Dave Acorn)]

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)

[jimz011 (Jim)]

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.

[dacorn (Dave Acorn)]

Well, it works on my laptop, and I have got it to work once on my iPad, but on my iPhone it won’t come up. I tried Chrome and Safari. Not sure why the difference.

Also, I want to ask about the swipe feature, so for example, I want on the lights view to have about 4 screens that swipe, so the first view will be light scenes, second, lets say Kitchen lights, and so on. Can I do this? Thanks Jim much appreciated!

[jimz011 (Jim)]

Hm that is odd, it works on all my devices (the screens were actually from an iphone, though not a browser, the 2.0 app).

In the swipe area, you want to have multiple “pages” in the same view is that correct? So in the header you will be in a single view and within that view you want to be able to swipe to another page, without leaving that view right?

Well the lovelace swipe navigation and cch can not do that. However this card can:

bramkragten/custom-ui

It is the only way I know of to swipe cards without leaving the current viewtab.

[dacorn (Dave Acorn)]

Yes that is correct on the swipe, that will be exactly what I want, I will give it a try thanks so much.

Regarding the pop up I will mess with it more to see if I can get it working better.

When I switch from phone to tablet to lap top can the row size change dynamically? I have been searching for the solution but seems to be some confusion on the change I need.

[jimz011 (Jim)]

Yes, but not with my current code as width is hardcoded. You could remove the hardcoded width (it won’t look good though). I will be converting my setup to use aspect_ratio instead. Expect the updated code tonight or tomorrow on my repo.

If you can’t wait you can try it yourself:

Lovelace: Button card

Things below will work with the version that I’ll publish later today (1.10.1). Waiting on another PR in a library. That’s the result with the new config below (I didn’t change much). Note that I used the template feature, but you can change to use anchoring if you prefer: [image] button_card_templates light_button_style: aspect_ratio: 1/1 show_label: true show_state: true size: 30% styles: card: - border-radius: 12px - --paper-card-background-colo…

[mayker (maykar (pronounced "maker" with a southern accent))]

Update v1.2.0 & Breaking Change

Need to give big thanks to @RomRider for both of the changes on this one. Added his PR on CCH to ignore swipes on map-card and used/stole his configuration method for decluttering-card.

You can now do your configuration in the root of your lovelace configuration (see readme for more info). This is a breaking change as configuration has moved.

Example:

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

swipe_nav:
  wrap: false
  animate: swipe
  skip_tabs: 5,6,7,8
  prevent_default: true
  swipe_amount: 30
  
views:

[Jimmy_Berglund]

I have a problem that when I swipe everything shrinks to a very small size then grow big again. Its like the whole swipe dont work.

Any clues why? It all akts the same no matter what theme

And I switched animation and then all is fine

[mayker (maykar (pronounced "maker" with a southern accent))]

Swipe animation can be a bit buggy with some custom cards (possibly some built in cards as well). If it happens on every view please let me know if there is a common card on every view and I can do some testing. If you have your setup on github or the like give me a link to check it out.

[Jimmy_Berglund]

I have custom button card. And yeh it happens on all. I guess it could be my custom button card that does it. Sins that is what’s on alls pages.

[jcreynolds (James C. Reynolds II)]

I have a windows 10 with a diy touchscreen setup in my living room as the control center for the house. I’ve got swipe setup via cch and it works on my phones but not my touchscreen PC. I see where is specifically says mobile, is there a way to enable it for my touchscreen PC?

[jimz011 (Jim)]

Dear @mayker, would it be possible to have the config more like the old CCH?

E.g.
skip_tabs: 3-35

Thanks for the great improvements to both cards.

[mayker (maykar (pronounced "maker" with a southern accent))]

That’s the plan, need to add tab ranges, skip tabs, and exception config. Not sure when I’ll start the rewrite to this one, but it’s coming.

[mayker (maykar (pronounced "maker" with a southern accent))]

Sorry missed this one, the way PC’s and mobile devices handle swipes is quite a bit different from each other. This project looks for “touch events” which don’t really exist on PC, but I will look into trying to support swipes on PC.