Kiosker Pro system control from Hype

1

I'm endeavouring to control Kiosker Pro on the iPad to run a Hype page and would like to control a couple of settings - namely brightness of the iPad. The iPad would be locked away and this would be on a config screen.

Javascript is not my strong point and have tried to just add a function js to send the same command from Hype to kiosk but not having much luck. They have a js demo page that works well but with similar commands sent as a function in Hype I get no love.

https://docs.kiosker.io/#/javascript?id=screen-brightness
https://docs.kiosker.io/demo/

Any help/pointers would be greatly appreciated!
kioskertest.zip (56.9 KB)

2

Use the JavaScript api found here:

The brightness JSON is found here:

This approach implements functions to set the brightness to a bright (light mode) and a dark (dark mode). You can create two functions named setLightMode and setDarkMode. Here’s how you could organize your code:

  1. Inserting Global Functions in Head HTML:
<script type="text/javascript">
    // Function to send requests to Kiosker
    function kioskerIntegration(data) {
        const string = JSON.stringify(data);
        try {
            window.webkit.messageHandlers.callback.postMessage(string);
        } catch(err) {
            console.log("Can't reach Kiosker");
        }
    }
</script>
  1. Creating setLightMode and setDarkMode Functions:
// Function to set light mode (maximum brightness)
function setLightMode(hypeDocument, element, event) {
    const setBrightnessRequest = {
        "event": "setBrightness",
        "data": {
            "level": 1  // Set brightness to maximum
        }
    };
    kioskerIntegration(setBrightnessRequest);
}

// Function to set dark mode (minimum brightness)
function setDarkMode(hypeDocument, element, event) {
    const setBrightnessRequest = {
        "event": "setBrightness",
        "data": {
            "level": 0  // Set brightness to minimum
        }
    };
    kioskerIntegration(setBrightnessRequest);
}
  1. Assigning the Functions to Elements:
  • In Tumult Hype, create new functions and copy the code for setLightMode and setDarkMode into the respective function editors.
  • Attach the setLightMode function to a button or other interactive element that you’ll use to activate light mode.
  • Attach the setDarkMode function to a button or other interactive element that you’ll use to activate dark mode.

Now, when you interact with the assigned elements in your Hype document, the brightness of the device will be set to maximum for light mode and minimum for dark mode, through interaction with the Kiosker app via the kioskerIntegration function.

One could also implement a getter function to probe for the current brightness or ambient light.

3 Likes
3

Thanks so much! That did it. Sending 0 is closer to 1% but now have brightness control.
Here is the hype file for anyone to riff off.

kioskertest.zip (57.2 KB)

3 Likes
4

I'm messing around with this again and although the command is successfully being passed on to the iPad via Kiosker, the hype document refreshes back to the start scene. There no way to see a JS console so I'm a little lost why this is happening.

5

Why is That.

You should be able to.

if nit setup to do so. Make sure on you Mac you have the Developer Menu showing for Safari

Then on the iPad go to Settings > Safari > Advanced

Enable Web Inspector

When your Mac and iPad are on the same network, you should see the iPad listed in the Macs Safari Developer device list.

Hover over the list and go over to its sub list of web interfaces that shows up.
Hover over each item until over on the iPad, the one you want shows the blue inspector screen over it

Note it has its quirks. And the iPad needs to be actively showing the browser/webview you are after.

2 Likes