Debugging, Remote Control and Kiosk Mode

Web Sync transforms your iOS/iPadOS device into a powerful dual-display web renderer, ideal for digital signage and kiosks. This guide walks you through setting up Remote Control, activating Kiosk Mode, and advanced Debugging techniques.

1. Debugging Web Pages with Safari's Web Inspector

You can debug the web content displayed by Web Sync using Safari's Web Inspector on a macOS computer. This provides full developer tools, including element inspection, console access, and JavaScript debugging.

Setup Steps

1. Enable Web Inspector in Web Sync:

   • Open the Web Sync app's Settings menu.
   • Toggle on Web Inspector.

2. Enable iOS/iPadOS Debugging:

   • On your iOS/iPadOS device, go to Settings > Apps > Safari > Advanced.
   • Toggle on Web Inspector.

3. Enable Developer Menu in Safari (on macOS):

   • Launch the Safari app on your Mac.
   • Go to Safari > Settings > Advanced.
   • Check the box for "Show features for web developers".

4. Connect Device:

   • Connect your iOS/iPadOS device to your Mac using a Lightning/USB-C cable.
   • Alternatively, for wireless debugging, ensure both devices are on the same Wi-Fi network and, in the Safari Develop menu, check "Connect via Network" next to your device's name.

5. Start Debugging:

   • In Safari on your Mac, click the Develop menu.
   • Hover over your device's name (e.g., Your iPad Name).
   • Select the URL corresponding to the page you want to inspect (e.g., Web Sync - https://example.com). A separate Web Inspector window will open, giving you access to the Console, Elements, and other debugging tools.

2. Enabling Remote Control and Web Hooks

The Remote Control Portal and Web Hooks enable you to manage your Web Sync device remotely, which is essential for deployments where physical access is limited or when using Kiosk Mode.

Setup and Access

To use remote control features, a one-time in-app purchase is required.

1. Unlock: Complete the one-time in-app purchase to unlock remote control.
2. Enable Feature: In the Web Sync app, go to the Settings menu and toggle on the Remote Control feature.
3. Obtain Code: A unique 6-character code will be generated and displayed in the settings menu. This code is your secure key.
4. Access Portal: Visit the Remote Control Portal at https://justshare.me and enter your unique 6-character code to access the web-based controls.

Controlling Web Sync with Web Hooks

Web Hooks allow any application or service that can make an HTTP request (like cURL or a server-side script) to execute commands on your Web Sync device.

Web Hook Request Format

All web hook requests must be sent to the base URL: https://justshare.me/api/hooks/send/.

Example: Setting a New URL

To set a new URL, use the url command and provide the target URL in the value parameter.

curl 'https://justshare.me/api/hooks/send/?code=S12345&command=url' --data-urlencode 'value=https://example.com'

Tip: Use --data-urlencode 'value={VALUE}' when the command requires a value, especially if the value contains special characters.

Available Web Hook Commands

3. Enabling and Using Kiosk Mode

Kiosk Mode is a lockdown feature for public or unattended displays. It hides the app UI and disables the triple-click gesture used to restore the settings menu. When Kiosk Mode is active, the device can only be managed remotely via the Remote Control Portal or Web Hooks.

How to Activate/Deactivate

Kiosk Mode is exclusively managed through the Remote Control Portal. To toggle the mode on or off, navigate to https://justshare.me, enter your unique 6-character access code, and click the Lock icon ( ) within the portal interface.

Inter-Screen Communication (Kiosk Events)

In Kiosk Mode, you can use Kiosk Events to send and receive custom events between the main screen and the external display via JavaScript. This is perfect for building interactive kiosks where the main screen serves as a control panel for content on the external display.

1. Send Events from the Main Screen Web Page

Use the following JavaScript method on the main screen to send a JSON object containing your custom event and payload:

window.webkit.messageHandlers.webSync.postMessage({
  event: 'buttonTapped', // Your custom event name
  payload: {
    id: 1234,
    page: 'resources'
  }
});

2. Receive Events on the External Screen Web Page

The external display's web view will listen for a custom DOM event. The event name is prefixed with webSync: and your custom event name (e.g., webSync:buttonTapped). The payload is accessible in the event.detail property.

document.addEventListener('webSync:buttonTapped', function(event) {
    console.log('Received Kiosk Event: ', event.detail);
    // Add code here to update the external display based on the payload
});

Sample Implementation

To test event passing between the main screen and the external display, use the sample URLs below:

Device URL

https://fellowgeek.github.io/web-sync-kiosk-sample/device.html

Display URL

https://fellowgeek.github.io/web-sync-kiosk-sample/display.html

You can also view the complete sample implementation on GitHub Repository.