Working with JavaScript API

Related Articles


Using JavaScript Callbacks

Kiosk Pro's JavaScript API uses predefined callbacks which are triggered by different events. For example, the callback kp_ExternalScreen_videoPlaybackStateDidChangeis triggered whenever the current video changes playback state.

Some Kiosk Pro functions let you define a callback of your own:

kp_ExternalScreen_getCurrentVideoPlaybackState(callback);

In this case, you would choose a callback name of your choice, (for example, "callback1") and then define that callback and what you want to happen somewhere else in your script:

function callback1(playbackState, filePath, currentTime, duration, isLooped) {
	if (playbackState = 1) {
		// Stop the video and open new url
	}
}

The structure of the callback and the parameters it returns are predefined by the app, but you can name it whatever you want.

Creating a chain of callbacks

You can call multiple callbacks in a row by chaining callbacks together. Using External Screen API functions as an example:

function setBackground() {
	kp_ExternalScreen_setBrowserBgColor('255,255,255','setBrowserBgColorCallback');	
}
function setBrowserBgColorCallback() {
	kp_ExternalScreen_openDocument('img/logo-screen.png','openDocumentCallback');
}
function openDocumentCallback(success) {
	window.kp_ExternalScreen_setPlayVideoParams('1','0,0,0','setPlayVideoParamsCallback');
}

In this scenario, the function is calling an API function to set the background color, which has the option for a callback. This callback is user defined, and is used to call another API function to open a document, which has another callback option. The third callback is used to set the parameters for playing a video.


Debugging JavaScript

When working with JavaScript, there isn't a standard console interface for Kiosk Pro, which can be challenging.

The only way iOS currently allows third-party apps to access to the native Web Inspector tool is through the iOS Simulator in Xcode or on a device with a development provisioning profile for that app installed. This means that this level of debugging is only available to our internal development team.

When we are working on a project in-house and don’t have immediate access to the simulator, we’ll often use simple 'alert();' statements to determine what is being executed and what isn't.

For more complex projects, we frequently use a console print debugger developed by E.J. Dyksen and the team at Mutually Human. In this set-up, you drop a console div into the bottom of the page you are working on and then any calls to console.log are shown there. The debugger also includes a text box below the console, allowing you to evaluate JavaScript expressions directly on the page.

<div id="consolelog" style="font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: 40px 30px 0px; background-color: white; border: 2px solid black; padding: 10px;"></div>

<input type="text" id="consoleinput" style="margin: 0px 30px; width: 400px;" onkeypress="return evalConsoleInput(event, this.value);" />

<script type="text/javascript">
	var appendConsole = function(message, type) {
		var color = "black";
		if (type === "error") {
			color = "red";
		} else if (type === "debug") {
			color = "blue";
		}
		var div = document.createElement('div');
		div.style.color = color;
		div.style.marginBottom = "10px";
		div.innerHTML = message;
		document.getElementById("consolelog").appendChild(div);
	}
	var originalConsole = null;
	if (window.console != null) {
		originalConsole = window.console;
	}
	window.console = {
		log: function(message) {
			appendConsole(message, "info");
			originalConsole.log(message);
		},
		info: function(message) {
			appendConsole(message, "info");
			originalConsole.info(message);
		},
		debug: function(message) {
			appendConsole(message, "debug");
			originalConsole.debug(message);
		},
		error: function(message) {
			appendConsole(message, "error");
			originalConsole.error(message);
		}
	};
	function evalConsoleInput(e, message) {
		if (e.keyCode == 13) { // 13 is the keycode for the enter key
			var inputField = document.getElementById("consoleinput");
			var evalString = inputField.value;
			console.log("> " + evalString);
			try {
				var returnValue = eval(evalString);
				console.log(returnValue);
    			} catch (e) {
				console.error(e.message);
			} finally {
				inputField.value = "";
			}
		}
	}
</script>

More details on this debugger are available here.

Still stuck? How can we help? How can we help?