Closed Mariusthvdb closed 1 year ago
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
Please do, Bram also announced new changes are to be expected.
Don't know which, maybe Kiosk mode devs can connect with Bram cs.
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
amazing, thank you very much, please release! or maybe let us download to test?
Hi @Mariusthvdb, @NemesisRE should be back soon and he will take care of the releases, for now you can do this to test it:
git clone https://github.com/NemesisRE/kiosk-mode.git
cd kiosk-mode
git checkout prepare_for_ha_2023.4
yarn install
yarn build
dist/kiosk-mode.js
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
@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
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
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')
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
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
Can you deploy a beta?
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 ...
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
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 @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 bykiosk
and selectkiosk-mode.js
. Then search in the code forAPP_TOOLBAR
, make sure that you gett.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.
Perfect @gateriderz, Please, let me know if you have any issue testing it with the new version. Regards
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
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.
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
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.
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
where to find mwc-drawer ?
In kiosk-mode.js I can not find it
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.
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
toha-drawer
during the beta (hopefully next beta) This means all custom cards that where updated tomwc-drawer
should now be updated again toha-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.
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
@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.
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!
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:
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!
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
Hi,
Still does not work
Home Assistant 2023.4.0b6 Supervisor 2023.04.0 Operating System 10.0.rcp
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
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.
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.
hello should the kiosk mode with latest beta work do i understand that right?
I'm running beta7 without any problems.
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
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 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
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.
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
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.
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.
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
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
@homeyjoenka,
Tested in 2023.4.0b7
it is working properly.
When have we update?
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
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.
@elchininet thank you,
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 withmwc-drawer
and that does Not fix the card