kiosk-mode: BREAKING: HA 2023.4 no longer uses app-drawer-layout

breaking all custom cards that use this functionality

please see #beta in Discord.

app-drawer-layout was replaced by mwc-drawer link to Discord: https://discord.com/channels/330944238910963714/427516175237382144/1090920193947074642

I did test the fix that is mentioned, to replace

querySelector("app-drawer-layout partial-panel-resolver")

with

querySelector("app-drawer-layout partial-panel-resolver, mwc-drawer partial-panel-resolver")

but can only replace

app-drawer-layout in the .js file with mwc-drawer and that does Not fix the card

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 116

Most upvoted comments

For those that do not know how to compile the plugin using the code in the working in progress branch, here you are a gist with the compiled version. You can use this code until the new version is released.

Hi guys. The new version 1.8.1is released, I have already removed my manual fix and installed it again and it is working properly.

Thanks to all of you for the feedback during the testings šŸ‘

Please, if you notice something, feel free to open an issue with it, closing this issue.

Hi @Mariusthvdb, This pull request contains the necessary changes to make it compatible. Iā€˜ll keep it updated if something changes in the development of the new HA version. Regards

Hi @Mariusthvdb, In HA 2023.4 not only app-drawer-layout has changed. There are multiple changes there so it cannot be fixed by just changing that selector. Iā€˜ll let this issue open until a version that supports HA 2023.4 is released. Regards

Ha, that did work. I guess I forgot the ?v1 thing in the ressources file. Header bar is gone now, sidebar still there. But one problem at a time.

Thanks @pergolafabio and @elchininet

Now will wait for the release with a fix.

i also updated to 1.8.0 , and i see now the rollup files removed them, and using the one from gist and point the resource correctly

Yes @pergolafabio, the issue with the latest release should be fixed when this gets merged and released:

https://github.com/NemesisRE/kiosk-mode/pull/37

They’ve given you two resources to fix it yourself, I even offered where I put mine to make it work.

If you need more help than that, it’s probably best you wait for them to release the fixed version.

I did not see anything

or without explanation

great!

Ive dl’d the gist, and all seems to be working swell.

Ill add the new options next (hiding the menu items) and will test those, because that will be a major upgrade!

Really sorry, I am on mobile and couldn’t find the quote code.

The above is not me stating that, but main Frontend dev Bram in Discord

Awesome all fixed with the latest update. Thank you

Morning, Thank you so much for the update, kiosk mode, good job Thank you all

I had to reboot and redownload 1.81 to get old version out of system. Seams to working ok Thanks

@besiktas97,

Forget the version 1.8.0 it was deleted because it was a wrong release. Just follow the instructions:

  • Uninstall kiosk-mode

  • Install the gist manually with the instructions given in the README

  • Clear cache and that should be enough

Anyway, the pull request that solves the issue is ready to merge. When @NemesisRE take a look at it and merge it, a new version could be released.

Thanks then I will wait I guess for the new release. Patient patient 😃

@DerEmder,

Just as a reference so you can check that what you are saying is not accurate:

I apologize - overlooked them.

For me gist is also working, I have hidden the title bar again , used the gist, removed the 2 files on the kiosk folder, downloaded the gist there…

Restarted , clear cache, that’s it

  • Rollback to a version that it is compatible

Not really an option at this moment.

  • Try to solve it with the workarounds that the community creates ā€œfor freeā€ for you

Yes, I know. It is free. I don’t pay money for it. Is that what you mean? I pay for it with my precious time I could spent in doing other things. So i also use my spare time ā€œfor freeā€ to help the dev to make it work again. So please don’t lecture me about ā€œfreeā€ and Open-Source - I am fully aware of that. Let’s put it this way: it is a taking and giving and hopefully we will all find the right balance.

  • Wait for the release that fixes the issue is released

I will.

ill wait for his return

Hi @akhan999, Please, read the thread, it has been mentioned multiple times that this will be done by the owner of the repo (@NemesisRE) when he is back. For now, your options are already given on the thread. Regards

@niekniek89, Please, check this comment.

I just updated the HA IOS app, and swiping for the sidebar works again!

swiping left is idd an companion issue

@bkr1969, Good to know it. Yes, when the fix is implemented and a new version is released, you just need to delete the manual JavaScript file, remove the resource that you created and install the plugin through HACS again.

OK. That helped. So when the fix is implemented will I need to delete the resource and .js file from /www?

Hi @chicknlil, What you are describing is not expected. Please, open an issue with some screenshots so we can debug there what is happening. Regards

Hi @Homeassistjoenka, You should wait until the owner of the repo review the changes, merge the branch and release a new version. He should be back around these days. Regards

You were given the instructions four days ago. .

If you can’t do either of those things, there’s really not much anyone else here can do to help you.

They’ve given you two resources to fix it yourself, I even offered where I put mine to make it work.

If you need more help than that, it’s probably best you wait for them to release the fixed version.

I stuck mine in /www/ removed the links in resources to the HACS version, and told it to look at /local/kiosk-mode.js instead. Working fine for me.

I’m running beta7 without any problems.

while we’re at it, and this might be a new FR, so if you’d agree, I can write it up separately:

I still have these:

      /* Hide chevrons
      paper-tabs$: |
        .not-visible {
          display: none;
        } */

which before, used to do as stated: hide the chevrons in the menu bar. Saves us 2 icons yet again…

also, there’s a Help icon in the edit mode that can be ditched:

      /* This hides the help button when in edit mode*/
      a.menu-link[target="_blank"] {
        {% if is_state('input_boolean.hide_help','on') %}display: none;{% endif %}
      }

and the above does work still. I would love to have all of these Dashboard mods in a single package, so maybe have a look?

Btw, I believe you should next rename the custom card, it has grown beyond Kiosk mode only…

again, thanks!

SchermĀ­afbeelding 2023-04-03 om 22 25 32

So this all works just fine!

SchermĀ­afbeelding 2023-04-03 om 22 25 26

great, and congrats!

there is but 1 gripe… might be an edge case, as I probably will always want tp have at least 1 menu item there, but hiding all menu items takes away the whole triple dot icon.

and, that is the anchor for my menu item template using card-mod-themes:

      /* Optionally set the three-dots transparency,
         to allow for a replacement template text. */
      ha-button-menu {
        color: {{'transparent' if is_state('input_boolean.menu_options_template','on')}};
      }

      /* Optionally set a replacement template text. */
      ha-button-menu::before {
        content: "{%- if is_state('input_boolean.menu_options_template','on') %}
                  {{- states('sensor.buienradar_symbol')}} |
                  {{- states('sensor.buienradar_temperature')}} °C
                  {%- endif %}";
        color: var(--app-header-text-color);
        visibility: visible;
        position: relative;
        top: 24px;
        white-space: nowrap;
      }

I would like to ask if anything can be done here, to hide the menu-items, but allow this mod to be there anyways. see:

SchermĀ­afbeelding 2023-04-03 om 22 30 11

And notice this

OK, I know you will all hate me for doing this, but believe me it is better to do it now then later 😬 We will rename mwc-drawer to ha-drawer during the beta (hopefully next beta) This means all custom cards that where updated to mwc-drawer should now be updated again to ha-drawer

Hi,

Is it possible to have a tutorial to make Kiosk-Mode work?

I don’t understand anything explained here.

What should be replaced?

Where to find the files, or to install them?

Thx

Hi @Jeremyhu102, You would require a bit of knowledge about Git and working with terminal commands to build the bundle with the steps that I left before and then you can follow the Manual installation instructions (after uninstalling the original plugin). But as @Mariusthvdb mentioned, you can wait until Home Assistant 2023.4 is released and the owner of the repo has released a version to support it.

Regards

Hi @gateriderz, I cannot reproduce it in 2023.4.0b2. Please verify that you have the correct version. Go to the Chrome dev tools, Network tab, filter the resources by kiosk and select kiosk-mode.js. Then search in the code for APP_TOOLBAR, make sure that you get t.APP_TOOLBAR = "app-toolbar, .toolbar". Let me know if that is the case and Iā€˜ll try to debug further what is happening. Regards

Thanks @elchininet , you are correct, I had to reload the kiosk-mode.js again by adding kiosk-mode.js?v1 at the end.

The code shows the proper information now: image

kiosk mode is working now.

Thanks.

Things to consider:

Menu swipe in from the left is removed from the app. Hence the hamburger menu is the only way to reach the menu.

It might be a good idea to notify users about that. Also, it would be awesome if somehow the swipe could be found a way back in Kiosk mode ;/)

Don’t know if at all possible …

Yes, that would require a change on the README with an statement about what occurs if one hides the sidebar. About enabling the swipe from the plugin, that would require more than simple CSS classes, but depending on the final structure of the elements it could be achievable.

Hi @Mariusthvdb, @NemesisRE should be back soon and he will take care of the releases, for now you can do this to test it:

  • Clone the repo: git clone https://github.com/NemesisRE/kiosk-mode.git
  • Enter in the folder cd kiosk-mode
  • Checkout the branch git checkout prepare_for_ha_2023.4
  • Run yarn yarn install
  • Build the plugin yarn build
  • Copy the JavaScript file in dist/kiosk-mode.js
  • Uninstall the current plugin from HACS
  • Install the compiled file manually

Note: If you donā€˜t know or cannot compile the code you can get a compiled version of the code here.

Take into account that branch has all the changes contained in https://github.com/NemesisRE/kiosk-mode/pull/25 https://github.com/NemesisRE/kiosk-mode/pull/26 and https://github.com/NemesisRE/kiosk-mode/pull/28

Regards

amazing, thank you very much, please release! or maybe let us download to test?