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

[Mariusthvdb]

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

[elchininet]

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

[Mariusthvdb]

Please do, Bram also announced new changes are to be expected.

Don't know which, maybe Kiosk mode devs can connect with Bram cs.

[elchininet]

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

[Mariusthvdb]

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

[elchininet]

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

[gateriderz]

@elchininet ,

I compiled the new kiosk-mode.js from the branch, removed the old one and replaced with the new one:

kios_mode not working and I get the following errors in the log:

https://***/hacsfiles/kiosk-mode/kiosk-mode.js:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
https://***/hacsfiles/kiosk-mode/kiosk-mode.js:1:5206 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')

Thanks

[elchininet]

Hi @gateriderz, In which version of HA are you testing? Also if there is a longer stack trace it will be helpful. I will take a look at it later on this afternoon. Regards

[gateriderz]

Hi @elchininet, Thanks for your quick reply. I run Home Assistant 2023.4.0b2

This is the only trace I have under my logs:

2023-03-31 08:30:20.393 ERROR (MainThread) [frontend.js.latest.202303300] https://***/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128178:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
2023-03-31 08:30:20.425 ERROR (MainThread) [frontend.js.latest.202303300] https://***/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128178:1:5302 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

[elchininet]

Thanks @gateriderz, I thought that the error was in the current version. The branch is prepared for 2023.4.0b1, during the development of the new version I‘ll be modifying it until the final 2023.4 is released. I‘ll check the changes in 2023.4.0b2 and I‘ll apply them to the branch. Regards

[elchininet]

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

[nelsonamen]

Can you deploy a beta?

[Mariusthvdb]

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 ...

[elchininet]

n you deploy a beta?

Hi @nelsonamen, the releases will be done when the owner of the repo is back. For now you can try it with the explanation that I gave above. Regards

[elchininet]

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.

[gateriderz]

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:

kiosk mode is working now.

Thanks.

[elchininet]

Perfect @gateriderz, Please, let me know if you have any issue testing it with the new version. Regards

[Jeremyhu102]

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

[Mariusthvdb]

Maybe we should have a bit of patience . Why not let the devs here await coming days of Frontend changes until release of HA 2023.4 so we have some certainty things won't break shortly after.

[elchininet]

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

[elchininet]

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.

[Mariusthvdb]

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

[Jeremyhu102]

where to find mwc-drawer ?

In kiosk-mode.js I can not find it

[elchininet]

where to find mwc-drawer ?

In kiosk-mode.js I can not find it

@Jeremyhu102,

Why do you want to find mwc-drawer? This is needed only by someone that wants to change the code of the plugin.

But anyway, if you want to find it, it is not in the current kiosk-mode.js because that element its being added in Home Assistant 2023.4, you need to search for it in the new version that its being prepared in the branch or in the guist that I posted before.

[elchininet]

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

@Mariusthvdb,

It is better to do the changes when they are released, if it is just a plan it could be changed, as almost everything during development. When the next version is released, if it has more changes, the library should be changed to support them.

[Mariusthvdb]

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

[elchininet]

@Mariusthvdb, In version 2023.4.0b5 the mwc-drawer element has been renamed to ha-drawer as Bram commented on Discord. The changes have been pushed to the development branch and also to the public gist with the compiled version. Regards.

[Mariusthvdb]

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!

[Mariusthvdb]

So this all works just fine!

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:

[Mariusthvdb]

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!

[elchininet]

Hi @Mariusthvdb,

Yes, we can discuss this in a separate issue to keep this one for HA 2023.4 issue. (Maybe NemesisRE could open a discussion section for these topics).

But the easiest solution that I see (because it is not nice an empty menu when all its items are being hidden) is to create another option to hide automatically the overflow menu if all its items are hidden (or vice-versa). In that way you can choose if you want that behaviour or not.

Regards

[Jeremyhu102]

Hi,

Still does not work

Home Assistant 2023.4.0b6 Supervisor 2023.04.0 Operating System 10.0.rcp

[Mariusthvdb]

yes it does...

you probably need to install it in a different folder from HACS, and set the path to that resource. HACS can be difficult to persuade when using manual edited files

[elchininet]

Hi @Jeremyhu102, I have tested it on 2023.4.0b5, maybe 2023.4.0b6 has more changes. I'll take a look later. Please, follow the discussion and make sure that you are loading the correct version with the instructions that I gave before. Regards.

[elchininet]

Hi @Jeremyhu102, I have tested it on 2023.4.0b6 and it works on my side. Please, describe exactly what do you mean with "still does not work", if there are certain features that are not working properly for you or if you receive any errors on the console. Regards.

[homeyjoenka]

hello should the kiosk mode with latest beta work do i understand that right?

[pedolsky]

I'm running beta7 without any problems.

[Jeremyhu102]

Hi,

Which file to edit? Where to find this file? What should be modified? How to modify it?

I tried to modify this:

/config/www/community/kiosk-mode/kiosk-mode.js

it does not work

Thx

[chicknlil]

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.

[Jeremyhu102]

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.

paste what in /www/? The Folder Kiosk-mode

there is no complete tutorial? step by step

[chicknlil]

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.

[Jeremyhu102]

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

[chicknlil]

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.

[elchininet]

hello should the kiosk mode with latest beta work do i understand that right?

Hi @homeyjoenka, the new version is not released yet, but if you follow the instructions given in this thread you can make it work.

[elchininet]

I'm running beta7 without any problems.

@pedolsky good to know it 👌

I‘ll try to do an extensive test in 2023.4.0b7 later on to see if everything is OK because I have been tested it until 2023.4.0b6

[elchininet]

Hi,

Which file to edit? Where to find this file? What should be modified? How to modify it?

I tried to modify this:

/config/www/community/kiosk-mode/kiosk-mode.js

it does not work

Thx

Hi @Jeremyhu102, You need to follow the instructions that I gave you some days ago and even I have created a gist with the compiled version just in case you were not be able to compile the code. How to install the library manually is documented in the README of the repo. Regards

[elchininet]

@homeyjoenka, Tested in 2023.4.0b7 it is working properly.

[Homeassistjoenka]

When have we update?

[elchininet]

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

[chicknlil]

Hey @elchininet (& @NemesisRE ) ... with this patch version and using ?kiosk , I have a sliver of what probably remains from the sidebar still in view on my devices that I'm using kiosk-mode on. Is this expected behavior because of the 2023.4 beta breaking changes, or is this something that can be eliminated, as it was before?

No worries either way, more curiosity than anything else.

[Homeassistjoenka]

@elchininet thank you,