[Feature] adding custom navigation control #418
Replies: 11 comments 25 replies
-
|
I guess it is too niche? Any other ideas how to implement for similar functionality? |
Beta Was this translation helpful? Give feedback.
-
|
Hmm you could make a wrapper for Kiosk like this (I made this super quick so please don't judge) <!DOCTYPE html>
<html>
<head>
<title>Kiosk user capture</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
}
iframe {
border: none;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
}
#user-capture {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
background-color: transparent;
z-index: 999;
}
</style>
<script>
// Listen to any user activity: mouse, keyboard, touch, scroll, etc.
const userActivityEvents = [
"click", "mousemove", "mousedown", "mouseup", "keydown", "keyup", "keypress",
"touchstart", "touchmove", "touchend", "scroll", "wheel", "pointerdown", "pointermove"
];
function handleUserActivity(event) {
console.log("User activity detected:", event.type);
// do things here
}
document.addEventListener("DOMContentLoaded", function() {
const capture = document.getElementById("user-capture");
userActivityEvents.forEach(eventType => {
capture.addEventListener(eventType, handleUserActivity, true);
});
});
</script>
</head>
<body>
<iframe id="kiosk" src="http://KIOSK_URL?&disable_navigation=true" width="100%" height="100%"></iframe>
<div id="user-capture"></div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! I'll have a look at it. Definitely no judgement. |
Beta Was this translation helpful? Give feedback.
-
|
Or could possible add a new webhook event for "user.click" 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
Ok I added a new webhook in The webhook is This webhook is conditional so it is not active unless at least one webhook is set in the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Is it anywhere on the screen? Will it override prev, next and menu or those can still be used? |
Beta Was this translation helpful? Give feedback.
-
|
Anywhere on the screen yeah. You can still use the navigation if you wish. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you @damongolding I have implemented the new webhook. After I click the screen and it executes the new webhook the screen becomes black. I need to refresh the browser it to bring back the photos. If I use the click the turn off immich kiosk this issue doesn't matter but if it is used for something else, it might be a problem. I noticed the following error when using the new webhook:
However, there is something I don't think I understand. You mentioned that I will still be able to use the navigation, but if I use the new webhook to stop the screensaver (the screensaver being a browser running immich kiosk), I won't be able to use the navigation becasue a click anywhere in the screen will stop the screen saver. This is why I originally thought about creating different navigation areas - a click on most of the screen will allow to stop the screensaver but clicking on the edges will serve as navigation. Am I missing something? By the way, this is the configuration I used in config.yaml: |
Beta Was this translation helpful? Give feedback.
-
|
You're not missing anything. You are totally right! I guess I meant you can technically use the navigation still while having this webhook active. So are you looking to interact with the screensaver? I guess I got a tad confused as normally screensavers are dismissed after interaction. Is the screen turning black because of your automation or because of Kiosk? I will have a look into the history missing error. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, yes, I would like to interact with the screensaver - I want to eat the cake and have it too 😆 The black screen is because of the kiosk, I think - my automation only toggles a boolean that does nothing. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry @damongolding, I don't want to be a bother, but did you have any chance to look into why the screen becomes black? Also do you think you would want to implement an alternative layout to allow a custom navigation control in a main area with other navigation on the periphery? I want to use the Kiosk as a screensaver on a large wall mounted tablet in the living room. It will be nice if we can also go back to a recent photo or mark a photo to archive straight from the screensaver but also touch the middle of the screen to disable the screensaver so to use the tablet's functionality as a smart home control panel. I note that #450 is a similar request showing perhaps some wider interest. Thank you |
Beta Was this translation helpful? Give feedback.
-
|
No bother! I've been on vacation and this fell of my todo list, I do apologise. As a test could you try adding the below? Then on your screensaver clicking the "more info" button and clicking the "Trigger webhook" button and see what happens? |
Beta Was this translation helpful? Give feedback.
-
|
I restarted kiosk many times with no change. Even when I wait for the next asset to load or click on the right part of the screen I get the same issues and errors. |
Beta Was this translation helpful? Give feedback.
-
|
I noticed that even though I have user.webhook.trigger.info_overlay defined, and not user.interaction.click, the html code of the black screen mentions user.interaction.click: |
Beta Was this translation helpful? Give feedback.
-
Is this the html after the black screen? If so I see the issue. For some reason the webhook response is replacing the whole body element?! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it is the html for the black screen. |
Beta Was this translation helpful? Give feedback.
-
|
Could you try removing the click event in your config. Restart Kiosk and either clear your browser cache or open Kiosk in incognito mode. I found the issue! It's my fault for returning a string here |
Beta Was this translation helpful? Give feedback.
-
|
The dev image I'm planning on adding a new webhook event called |
Beta Was this translation helpful? Give feedback.
-
|
I noticed another issue. I have implemented immich-kiosk as a screensaver and I am using the user.interaction.click webhook to trigger an automation which turn it on and off (switches between views), and it all works well. However, after some time not interacting with it, I lose the functionality of the webhook - when I click on the screen it uses the controls (next, previous and menu functionality) but it doesn't fire the webhook. I also get an icon showing there is a problem at the bottom of the screen (see below). If I refresh the page, the webhook starts working again. There are no errors from immich-kiosk when this happens. This is the icon that shows when I click on the screen and the webhook doesn't work: |
Beta Was this translation helpful? Give feedback.
-
Any errors you see? I suspect it may be the timestamp as I was reviewing the code last night. I presume you will be using the custom navigation area once I implement it but I would still like to squash and bugs 🐜 |
Beta Was this translation helpful? Give feedback.
-
|
No errors in immich-kiosk but I didn't look in the browser console. What does this icon mean? |
Beta Was this translation helpful? Give feedback.
-
|
The icon means that a http request from the client to the server has failed. Typically this means that Kiosk is offline. |
Beta Was this translation helpful? Give feedback.
-
|
In my case I think the problem may be related to the client because I get the icon after some time of displaying photos and with clicks which should fire the webhook, but otherwise everything is working (new photos are being brought up, I can navigate, get more info). In addition, if I refresh the webpage the problems stops, without needing to do anything with the kiosk. |
Beta Was this translation helpful? Give feedback.
-
|
The bug is the timestamp sent along with the webhook from the client. I currently have a 5 min window in which webhooks are valid as a security feature. I’ll fix it shortly 😊
…On 7 Jul 2025 at 9:53 AM +0100, nirnachmani ***@***.***>, wrote:
In my case I think the problem may be related to the client because I get the icon after some time of displaying photos and with clicks which should fire the webhook, but otherwise everything is working (new photos are being brought up, I can navigate, get more info). In addition, if I refresh the webpage the problems stops, without needing to do anything with the kiosk.
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
The latest dev build Below is a screen grab with the areas coloured:
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks! Busy day today, I'll give it ago once I have some time. Much appreciated. |
Beta Was this translation helpful? Give feedback.
-
|
Looks awesome @damongolding |
Beta Was this translation helpful? Give feedback.
-
|
Thank you again and sorry for the delay in testing. I implemented the new webhook and the screen responses are as you defined above, but I think that clicking on the custom area doesn't fire the webhook because it doesn't start the automation. This is how I configured it: I can't see any errors |
Beta Was this translation helpful? Give feedback.
-
|
If you run |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I'm an idiot. I turned off the automation before as I was using another screensaver. It is all working as it should. |
Beta Was this translation helpful? Give feedback.
-
|
Hm, I like that this custom section was added. Would it be possible to specify what it does in addition to webhooks? My specific action I would like to have is toggle full screen (which is already in top menu). Being able to just quickly tap it in the middle to toggle would be very nice addition. I have it as a part of dashboard. I guess I would be able to look at photos in full size more often if it was easier to toggle it. I am not sure if I can achieve it with existing webhook. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I have searched the existing feature requests to make sure this is not a duplicate request.
The feature
Thank you for a great project!
I want to use immich-kiosk as a screensaver for a Windows tablet which serves as a smart home control panel (using Homeassistant). The screensaver should stop when someones touches the tablet's touch screen (my wife doesn't want movement detection as she wants to be able to look at the pictures from up close.) I can implement this by running immich-kiosk in a browser in full screen with an automation which brings the browser running the immich-kiosk to the front when screensaver should be on, and the browser running Homeassitant to the front when the screensaver should be off (via HASS.Agent). However, with current functionality, touching the screen can't be used to stop the screensaver because it activates the navigation controls instead.
I can use immich-kiosk via Homeassistant WallPanel, but then I lose the navigation functionality and ability to like or hide photos.
A possible solution to this would be to allow for a custom navigation area which then can be used with a webhook to activate an automation which will bring the Homeassistant browser to the front. I was thinking of something like that:
There can be a configuration parameter to select between the traditional navigation areas and this, and an additional webhook event, i.e navigation.custom. This would allow to preserve current functionality and add additional custom navigation functionality, which in my case would allow turning off the screensaver.
I note that feature request #284, [Feature] Additional Webhooks, is related but the addition of disable_navigation doesn't allow to use both functionalities.
Thank you.
Beta Was this translation helpful? Give feedback.
All reactions