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:


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() {
function setBrowserBgColorCallback() {
function openDocumentCallback(success) {

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'); = color; = "10px";
		div.innerHTML = message;
	var originalConsole = null;
	if (window.console != null) {
		originalConsole = window.console;
	window.console = {
		log: function(message) {
			appendConsole(message, "info");
		info: function(message) {
			appendConsole(message, "info");;
		debug: function(message) {
			appendConsole(message, "debug");
		error: function(message) {
			appendConsole(message, "error");
	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);
    			} catch (e) {
			} finally {
				inputField.value = "";

More details on this debugger are available here.

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