Swipe for sidebar?

Ralfi1982 · May 19, 2023, 7:32am

@breakthestatic: thanks for the offer, with v0.1.0 it works now.

lkeays · May 30, 2023, 8:14am

Works perfectly. Added your github link to HACS custom repository (frontend) and that’s all I needed to do. Thanks!
Easy Instruction screenshot: (Follow the red arrow)
p.s. If you don’t have HACS, follow this link

Ziria · June 4, 2023, 5:40am

Works for me on the Android App, thank you very much! I have a kiosk user who has the sidebar disabled via kiosk-mode. If this user now swipes from left to right the app will freeze. Is there any way to resolve this?

breakthestatic · June 4, 2023, 6:28pm

Not familiar with kiosk mode; is it something easy to set up? Offhand, I’m guessing that it might have something to do with firing the CustomEvent('hass-toggle-menu', {detail: {open: true}})); if the menu doesn’t exist. If you can get some console logs (or the instructions on how to configure this kiosk mode), I can try to debug further.

Just installed kiosk mode from HACS and I think I understand what’s going on, although I’m not totally sure what should be the expected functionality in this situation. Is the goal to still have the edge swipe open up the sidebar? If so, from what I can tell (without knowing much, if anything, about kiosk mode) is that you can’t actually trigger the sidebar when it’s actively being suppressed. There are some additional base expectations regarding the presence of a sidebar element that we could possibly work around to prevent the actual lockup that occurs on edge swipe, but I believe the new way that HA controls sidebar visibility (the custom event dispatcher) might not play nicely with this kiosk mode custom component.

If the gesture is just causing issues, but the goal isn’t to trigger the sidebar visibility, I could add a root-level enabled flag to prevent the gesture on specific views.

Also, if anyone else is more well-versed in the functionality of kiosk mode and/or the hass-toggle-menu event and has ideas for potential workarounds, please let me know or feel free to open up a PR, etc. in the Github repo.

Ziria · June 8, 2023, 11:00am

I have the sidebar disabled for non admin users:

kiosk_mode:
  admin_settings:
    hide_header: true
  non_admin_settings:
    hide_header: true
    hide_sidebar: true

Before the HA update when a non-admin user made the gesture, simply nothing would happen. In the current situation it indeed looks like the gesture is trying to open the sidebar which is then being actively supressed by kiosk mode.

breakthestatic · June 9, 2023, 12:00am

I just published a new version of the plugin that checks for the existence of the sidebar before trying to initialize the swipe gestures. I installed kiosk mode and used your configuration to test the validity of the fix; hopefully that resolves your issues.

sender · June 9, 2023, 3:08pm

So far this works so nice!!!

sender · June 9, 2023, 6:13pm

I have 1 issue I think related. Now and with previous version. Sometimes rhe normal up down swiping totally blocks. It only starts working after swiping left right 🤷

breakthestatic · June 9, 2023, 7:13pm

You could try setting lock_vertical_scroll: false.

By default, whenever the initial edge-swipe gesture starts, scrolling is locked (to prevent other, unintended movement while you’re swiping). The lock is released when either a) the drawer closes, or b) the edge-swipe gesture ends but doesn’t complete (i.e. you initiated the gesture from within the start_threshold, but didn’t make it past the end_threshold.

By setting the above property to false, the plugin won’t attempt any scroll locking at all. This should fix your issue; however you then might start seeing some rubber-banding (the stretching animation that occurs during overscroll on recent Android versions) or unintended scrolling on the y-axis if you also are moving your finger up/down as you’re swiping left → right.

breakthestatic · June 19, 2023, 8:33pm

I finally had some time to debug what I believe is your issue @sender. I found that tap actions within the trigger zone were inadvertently locking the body. v1.0.2 and below assumed that all starting touch events would be accompanied by subsequent “move” events (i.e. the beginnings of a swipe gesture). However, for taps there’s only a touchstart and a touchend, with no touchmove in between - which is where I was unlocking the body in the case that the event wasn’t deemed a “swipe”.

Try upgrading to v1.0.3 (and re-enabling lock_vertical_scroll if you previously disabled it at my request) and let me know if it fixes your issues.

sender · June 19, 2023, 8:51pm

I did not disable it.

And good rhat you get back on this!

I thought about 50 times I would de-install later… my interface hangs all the time (cannot scroll up and down) untill I swiped the menu bar in and out.

I will update right ahead!

Thanks!

Ziria · June 22, 2023, 7:57am

Sorry for the late reply. I updated to the latest version but the problem is still there for me. I think I will just enable the sidebar for all users and then limit what they can acces from there. Thanks for looking into it.

breakthestatic · June 22, 2023, 1:40pm

Is this within a mobile app? If so, not sure if you fully cleared the cache. On my Android phone, I need to go to the app’s settings page, force close it and then tap the clear cache button under storage options. Without that, I’ve seen it hold onto stale code for a very long time.

I tested the change with your kiosk mode settings on both web and my phone. Prior to v1.0.1, I was definitely able to reproduce your issue, but v1.0.1 onwards resolved it for me. Send over (or create a GitHub issue with) any specific details regarding your setup (browser, device, HA version, etc.) and I can try to debug further; perhaps there’s some subtle environment differences between my config and yours.

jouster · September 1, 2023, 10:15pm

got a really stupid question,…I followed the red arrows and then rebooted…but still didnt work…

then I tried pasting the following into configuration.yaml and restarted, but still doesn’t seem to work…am I being really really dumb

sidebar_swipe:
  start_threshold: 100
  end_threshold: 150
  back_threshold: 100
  prevent_others: true
  lock_vertical_scroll: true
  exclusions:
    - ha-control-slider

breakthestatic · September 1, 2023, 11:22pm

You don’t actually need a full restart; a simple page refresh (i.e. F5, ctrl/cmd + R) should suffice. If you aren’t seeing the functionality, I’d first make sure that the javascript file is actually being loaded. If you open home assistant in a web browser on desktop, bring up the dev tools and look in the network tab for hass-sidebar-swipe.js:

If you don’t see that file being loaded, you didn’t add it properly (either via HACS or manually adding resources to your dashboard).

However, if you do see the file loaded, I would first recommend deleting your yaml config for it, just to see how it works with the defaults.

If none of that works, feel free to open a bug ticket with detailed info, device, browser/app versions, yaml config, etc. and I can investigate further.

image969 · December 1, 2023, 8:14pm

Sometimes when I click on a button that’s up at the top left of my a screen (iPhone) it takes a few tries, pressing it. I feel like this swipe program is interfering. Has anyone had this problem?

breakthestatic · December 1, 2023, 9:57pm

Definitely possible. There’s a few workarounds:

Decrease the start_threshold value so it overlaps less with frequently-interacted elements. The default is 10% of the screen. If this is too much you can set it lower (either a percentage or a raw pixel value) so that less of the left edge is listening for the swipe events. However, the lower you set the value, the harder it will be to trigger the edge swipe when desired. Getting the right value might require a bit of experimentation.
Add specific problematic elements to the exclusions list (uses standard CSS selectors for targeting). The following will disable the edge swipe listener for the map card (which frequently conflicts with the edge swipe in my personal usage).

sidebar_swipe:
  exclusions:
    - hui-map-card

Hopefully those can help mitigate this.

Also, I believe the iOS companion app re-implemented the native edge swipe, so you might not need this script potentially. Although, if you have a mixed device environment, I guess it might still be required (brings up a good potential enhancement - ability to conditionally load the script based on client).

image969 · December 2, 2023, 3:20pm

Thank you for the reply.

The part that gets stuck on me the most really, is when I click on something. The mini media player for example. If I click the card itself to make it bring up hte extra info. Hitting the X on the top left corner of card to go back is what I sometimes find myself clicking 10 times until I get it right.

IN that case would excluding the mini-media player work for the X part?

Also I read that as well about iphone being all set. But soon as I updated HA to 2023.11(My last update was 2023.2, it;s been a while), the swipe was gone. not sure if theres something iphone users are suppoed to do to get it back??

breakthestatic · December 2, 2023, 4:14pm

I don’t use any iOS devices, so I’m not sure if a setting needs to be specifically re-enabled.

However, on the sidebar swipe script side, if you want to disable swiping on items like the close icon in more info dialogs, there’s a bit of flexibility. You could make it very specific, e.g. ha-icon-button[dialogaction="cancel"], or you might want to disable swiping when over any number of buttons, e.g. all ha-icon-botton or even just button. All of this comes down to preference/individual user habits. You can use the dev tools inspector in your browser to find the desired element(s) to exclude. Hope that helps!