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

Mariusthvdb · 2023-03-30T10:16:13Z

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

The text was updated successfully, but these errors were encountered:

elchininet · 2023-03-30T17:11:58Z

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 · 2023-03-30T18:28:03Z

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 · 2023-03-30T19:34:57Z

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 · 2023-03-30T20:31:30Z

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

elchininet · 2023-03-30T22:06:25Z

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 #25 #26 and #28

Regards

gateriderz · 2023-03-31T12:23:02Z

@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 · 2023-03-31T12:29:14Z

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 · 2023-03-31T12:53:56Z

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 · 2023-03-31T18:06:44Z

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 · 2023-03-31T18:17:11Z

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 · 2023-03-31T18:24:05Z

Can you deploy a beta?

Mariusthvdb · 2023-03-31T18:49:21Z

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 · 2023-03-31T19:32:39Z

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 · 2023-03-31T19:36:06Z

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 · 2023-03-31T21:54:08Z

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 · 2023-03-31T23:32:04Z

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

Jeremyhu102 · 2023-04-01T08:15:20Z

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 · 2023-04-01T08:35:04Z

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 · 2023-04-01T11:50:19Z

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 · 2023-04-01T13:37:55Z

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 · 2023-04-01T16:28:41Z

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 · 2023-04-01T16:37:06Z

where to find mwc-drawer ?

In kiosk-mode.js I can not find it

elchininet · 2023-04-01T16:55:43Z

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 · 2023-04-01T16:59:19Z

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 · 2023-04-01T18:04:07Z

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 · 2023-04-03T19:22:25Z

@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 · 2023-04-03T20:06:52Z

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 · 2023-04-03T20:29:32Z

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:

DerEmder · 2023-04-06T18:42:35Z

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.

DerEmder · 2023-04-06T18:46:26Z

@besiktas97, Please, take your time and read the thread, there is public gist with the compiled version that you can install. You don‘t need to clone the repo and compile the code. Regards.

I tried that piece of Javascript from gist and installed it manually. It does not work here. It was actually the first thing I did after reading it. Maybe I did it wrong, I don't know. But I did exactly what was posted above. And I was also unable to clone the repo with the same error message as posted above (Permission denied).

elchininet · 2023-04-06T18:47:33Z

@besiktas97, Please, take your time and read the thread, there is public gist with the compiled version that you can install. You don‘t need to clone the repo and compile the code. Regards.

I tried that piece of Javascript from gist and installed it manually. It does not work here. It was actually the first thing I did after reading it. Maybe I did it wrong, I don't know. But I did exactly what was posted above. And I was also unable to clone the repo with the same error message as posted above (Permission denied).

Yes, you did it wrong for sure because it works. You just need to check all the people here that have that version working (including myself).

elchininet · 2023-04-06T18:48:39Z

And I was also unable to clone the repo with the same error message as posted above (Permission denied).

I‘ll change the instructions, you can only clone a fork of it.

DerEmder · 2023-04-06T18:54:32Z

You just need to check all the people here that have that version working (including myself).

I only read from people where it does not work. You are the only one who says it works. So I assume it should work. I will try again and report back if I succeed.

pergolafabio · 2023-04-06T18:57:06Z

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

DerEmder · 2023-04-06T18:57:27Z

I‘ll change the instructions, you can only clone a fork of it.

I don't even know what that means and how to do it. I never used Github. So, that's a bit too complicated for me at this point. I am just a user, not a programmer

elchininet · 2023-04-06T18:58:12Z

@DerEmder,

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

#27 (comment)

DerEmder · 2023-04-06T19:00:09Z

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

Thanks, so it should work. I will do the same now.

So you have 1.7.8 installed, removed the two files (.js and .gz) from kiosk-mode folder and uploaded the javascript from gist (kiosk-mode.js) into the kiosk-mode folder. Is that correct?

Then clearing cache etc. and it should work?

DerEmder · 2023-04-06T19:01:45Z

@DerEmder,

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

I apologize - overlooked them.

pergolafabio · 2023-04-06T19:02:49Z

Just install 1.8.0,doesnt mather, remove files afterwarda, place the gist file there, point correctly with resource , to make it work for sure, add ?v1 add the end in your resource... Then clear cache, restart

besiktas97 · 2023-04-06T19:11:19Z

Just install 1.8.0,doesnt mather, remove files afterwarda, place the gist file there, point correctly with resource , to make it work for sure, add ?v1 add the end in your resource... Then clear cache, restart

I have removed the old version, but when I want to download it O cant download verdion 1.8.0. Only 1.7.8, tonight I will digg more into it.

pergolafabio · 2023-04-06T19:13:10Z

Yeah doesn't mather , you need to remove files anyways, but I suggest you to wait for next version , they are working on it, be patient

elchininet · 2023-04-06T19:14:47Z

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

besiktas97 · 2023-04-06T19:17:42Z

@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 · 2023-04-06T19:18:33Z

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.

DerEmder · 2023-04-06T19:47:40Z

A last note before I go to sleep - now kiosk mode even works where it is not even part of the yaml. Now the header bar (not the sidebar) is removed in all views and dashboards no matter if there is an entry with kiosk_mode in the yaml or not. Doesn't bother me too much because I can disable it with ?disable_km where I need it.

elchininet · 2023-04-06T21:36:15Z

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.

elchininet · 2023-04-06T21:37:17Z

A last note before I go to sleep - now kiosk mode even works where it is not even part of the yaml. Now the header bar (not the sidebar) is removed in all views and dashboards no matter if there is an entry with kiosk_mode in the yaml or not. Doesn't bother me too much because I can disable it with ?disable_km where I need it.

Hi @DerEmder,

Feel free to create an issue describing what you are facing.

Gzzloveyyt · 2023-04-07T01:44:45Z

After upgrading to 1.8.1, there was no problem with the computer browser webpage when the header was hidden, and it displayed normally. However, there was a black box below my iPad, which prevented me from displaying everything. @nelsonamen

scooper1 · 2023-04-07T02:09:28Z

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

Homeassistjoenka · 2023-04-07T05:14:36Z

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

elchininet · 2023-04-07T08:36:47Z

I've updated to version 1.8.1, cleared the cache, and rebooted, but I'm still getting the error below.

Logger: frontend.js.latest.202304061
Source: components/system_log/init.py:257
First occurred: 09:22:39 (4 occurrences)
Last logged: 10:38:18

https://ooooo/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128173:13:44 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')
https://ooooo/hacsfiles/kiosk-mode/kiosk-mode.js?hacstag=497319128173:57:96 Uncaught TypeError: Cannot read properties of null (reading 'querySelector')

Home Assistant 2023.4.1
Supervisor 2023.04.0
Operating System 9.5
Frontend 버전: 20230406.1 - latest

Hi @Murianwind,
Please, let‘s discuss your issue here.
Could you follow these steps but searching for TOOLBAR and let me know if you can find this in your code t.TOOLBAR = ".toolbar",?
Regards

amjidkhan1 · 2023-04-07T10:34:12Z

Awesome all fixed with the latest update. Thank you

Mariusthvdb changed the title ~~BREAKING: HA 2023.4 no longer uses app-drawer-layout~~ BREAKING: HA 2023.4 (beta) no longer uses app-drawer-layout Mar 30, 2023

elchininet mentioned this issue Apr 3, 2023

BREAKING: HA 2023.5.0.dev20230402 - Uncaught TypeError: Cannot read properties of null (reading 'querySelector') #30

Closed

elchininet closed this as completed Apr 6, 2023

elchininet unpinned this issue Apr 6, 2023

elchininet changed the title ~~BREAKING: HA 2023.4 no longer uses app-drawer-layout (IF KIOSK-MODE IS NOT WORKING FOR YOU, CHECK THIS ISSUE INSTEAD OF OPENING A NEW ONE)~~ BREAKING: HA 2023.4 no longer uses app-drawer-layout Apr 6, 2023

elchininet mentioned this issue Apr 7, 2023

1.8.1 Swiping right for menu seems broken #42

Closed

elchininet added the 🐛 bug Something isn't working label Apr 10, 2023

besiktas97 mentioned this issue Apr 10, 2023

keep_screen_on_time no longer works after upgrade to 2023.04 j-a-n/lovelace-wallpanel#93

Closed

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

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

Comments

Mariusthvdb commented Mar 30, 2023 • edited Loading

elchininet commented Mar 30, 2023

Mariusthvdb commented Mar 30, 2023

elchininet commented Mar 30, 2023

Mariusthvdb commented Mar 30, 2023 • edited Loading

elchininet commented Mar 30, 2023 • edited Loading

gateriderz commented Mar 31, 2023

elchininet commented Mar 31, 2023 • edited Loading

gateriderz commented Mar 31, 2023

elchininet commented Mar 31, 2023

elchininet commented Mar 31, 2023

nelsonamen commented Mar 31, 2023

Mariusthvdb commented Mar 31, 2023

elchininet commented Mar 31, 2023

elchininet commented Mar 31, 2023 • edited Loading

gateriderz commented Mar 31, 2023 • edited Loading

elchininet commented Mar 31, 2023

Jeremyhu102 commented Apr 1, 2023

Mariusthvdb commented Apr 1, 2023

elchininet commented Apr 1, 2023

elchininet commented Apr 1, 2023

Mariusthvdb commented Apr 1, 2023

Jeremyhu102 commented Apr 1, 2023

elchininet commented Apr 1, 2023 • edited Loading

elchininet commented Apr 1, 2023

Mariusthvdb commented Apr 1, 2023

elchininet commented Apr 3, 2023

Mariusthvdb commented Apr 3, 2023

Mariusthvdb commented Apr 3, 2023 • edited Loading

DerEmder commented Apr 6, 2023 • edited Loading

DerEmder commented Apr 6, 2023

elchininet commented Apr 6, 2023

elchininet commented Apr 6, 2023

DerEmder commented Apr 6, 2023

pergolafabio commented Apr 6, 2023

DerEmder commented Apr 6, 2023

elchininet commented Apr 6, 2023

DerEmder commented Apr 6, 2023

DerEmder commented Apr 6, 2023

pergolafabio commented Apr 6, 2023

besiktas97 commented Apr 6, 2023

pergolafabio commented Apr 6, 2023

elchininet commented Apr 6, 2023

besiktas97 commented Apr 6, 2023

DerEmder commented Apr 6, 2023

DerEmder commented Apr 6, 2023

elchininet commented Apr 6, 2023

elchininet commented Apr 6, 2023

Gzzloveyyt commented Apr 7, 2023 • edited Loading

scooper1 commented Apr 7, 2023

Homeassistjoenka commented Apr 7, 2023 • edited Loading

elchininet commented Apr 7, 2023 • edited Loading

amjidkhan1 commented Apr 7, 2023

Mariusthvdb commented Mar 30, 2023 •

edited

Loading

Mariusthvdb commented Mar 30, 2023 •

edited

Loading

elchininet commented Mar 30, 2023 •

edited

Loading

elchininet commented Mar 31, 2023 •

edited

Loading

elchininet commented Mar 31, 2023 •

edited

Loading

gateriderz commented Mar 31, 2023 •

edited

Loading

elchininet commented Apr 1, 2023 •

edited

Loading

Mariusthvdb commented Apr 3, 2023 •

edited

Loading

DerEmder commented Apr 6, 2023 •

edited

Loading

Gzzloveyyt commented Apr 7, 2023 •

edited

Loading

Homeassistjoenka commented Apr 7, 2023 •

edited

Loading

elchininet commented Apr 7, 2023 •

edited

Loading