Home > Basic > Input Devices

Input Devices

SiteKiosk supports USB input devices that send data via keyboard emulation. The data is handled by the SiteKiosk Object Model; a proprietary JavaScript extension that can be used in any HTML pages, but can also be used in other programming languages like C#

This function can be used with various input devices and sensors. These can be RFID, smart card or magnetic stripe readers. As an example, this would allow you to read employee badges for information related to Human Resources (HR) applications.


1. Management of Input Devices
1.1 Add Device
With the Add button you can create a list of devices that will run in keyboard emulation mode in your environment. This can be accomplished in 3 simple steps.

First, you need to trigger an input on the device that you want to use.  This can be done by, for example, swiping a card through a magnetic strip reader.

Once input has been recognized, the successful detection will be shown and the stop character will be displayed.
If a stop characters has not been detected, you have the option to allow the last character read to be declared a stop character by checking the corresponding checkbox.
A stop character can be used to in order to explicitly mark the end of the string that was read by the device.
The mouseover area of the detection icon shows the recognized value should you require this information. Please note that in the configuration of SiteKiosk special characters that appear in the imported data, may not be displayed correctly. This limitation does not apply if the data is read into an interface that is running in SiteKiosk.

In the final step, a display name must be assigned. You will also receive information about the discovered device’s ID and the selected stop character. If you have several devices of the same device model to be operated on different computers, the Device ID should remain the same so that the same SiteKiosk configuration can be distributed to all kiosks that are using that device.  A new entry in the device list will be created after clicking on the Finish button.
1.2 Delete
Select an entry from the device list and click Delete to remove the device.
1.3 Device List
The device list displays all devices that have been added. The selected display name, device ID and the stop character are listed.

2. Script examples for SiteKiosk IE and Chrome-based browsers 
Important note:
Make sure that the HTML within the html page is permitted to use SiteKiosk scripting in the SiteKiosk configuration! To do this, your page must be added as an allowed URL under Access/Security - URLs with script permission with script permission.


The HTML example can be copied and saved as an HTML page with an editor. This page can be stored in the HTML directory of the SiteKiosk installation folder. Next set the page in the configuration of SiteKiosk as the start page for testing and configure at least one input device. Save the configuration and then launch SiteKiosk. On the test page, a listener can be set for the configured device to read the data from the device and display it on the page.

The sample code can be modified and used on any Web page to work with the data read from the device.
2.1 Internet Explorer based skins
The following script example is for the IE based browser skins of SiteKiosk.

To call the script within frames, the line window.external.InitScriptInterface(); in window.external.InitScriptInterface(document); must be changed.

Using the SiteKiosk Object Model and the method SiteKiosk.RootApp.registerForDeviceData it is possible to register a listener that waits for input a specific device and then makes them available. 

To do this, use the following SiteKiosk Object Model method:

SiteKiosk.RootApp.registerForDeviceData(deviceName, callbackFunc)

deviceName
The display name of the device in the configuration (String)
callbackFunc
= Name of the function that is called after the reading of data (String)

The callbackFunc function has two parameters. The data that has been read as a string and also the name of the device from which the data was read.

Example:
The following example is an HTML page with a text box that is set up in the SiteKiosk configuration to activate the listener for a device name with a button click. It then reads data on the selected device which is displayed on the page. Please keep in mind that you need to give the URL that uses the SiteKiosk Object Model code script permission under Access/Security.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keyboard Emulation Device Test</title>
	<script>
		window.external.InitScriptInterface();

		var callbackFunc = function (data, devicename) {
			document.getElementById("text").innerHTML = 
			"Data received from device with the name: " 
			+ devicename + ". Data: " + data;
		};

		function registerDevice() {
			var deviceName = document.
			getElementById("devicename").value;

			if(deviceName == "")
				return document.
				getElementById("foundDevice").
				innerHTML = "The device name is empty!";

			SiteKiosk.RootApp.
			registerForDeviceData(deviceName, callbackFunc);

			return document.getElementById("foundDevice").
			innerHTML = "Registered device: " + deviceName;
		}
	</script>
</head>
	<body>
		<h1>Test page for reading the input of keyboard 
		emulation devices configured in the configuration 
		of SiteKiosk</h1>
		<div>
			Listen to input from this device that has been 
			configured in SiteKiosk: 
			<input id="devicename" tpye="text" /> 
			(state the device name) 
			<button onclick="registerDevice()">
			Register the listener</button>
		</div>
		<span id="foundDevice"></span>
		<div>
			Data that has been received: 
			<span id="text">Waiting for data...</span>
		</div>
	</body>
</html>


2.2 Chrome based skins
The following script example is for the chrome-based skins of SiteKiosk.

The following line must be called to initialize the chrome version of the SiteKiosk Object Model:

<script>(new Function(_siteKiosk.getSiteKioskObjectModelCode()))();</script>

This includes the required script functions. Then with the function siteKiosk.devices.getAll a list of all devices registered in the SiteKiosk configuration can be loaded.

siteKiosk.devices.getAll()

The function returns a JSON value with all devices.

To set up a listener for a single device the function siteKiosk.devices.getByName can be used.

siteKiosk.devices.getByName(deviceName)

deviceName = The name of the device in the SiteKiosk configuration (String)

The function returns an object that represents the respective device. Using the valueChanged function associated with this object  the listener can be registered.

siteKiosk.devices.getByName(deviceName).valueChanged(callbackFunc)

callbackFunc = Name of the function that is called after reading the data (String)

The callbackFunc-Funktion has two parameters. The data that has been read as a string and also the name of the device from which the data was read.

Example:
The following example is an HTML page with a text box that is set up in the SiteKiosk configuration to activate the listener for a device name with a button click. It then reads data on the selected device which is displayed on the page. Please keep in mind that you need to give the URL that uses the SiteKiosk Object Model code script permission under Access/Security.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keyboard Emulation Device Test</title>
	<script>(new Function(_siteKiosk.getSiteKioskObjectModelCode()))();</script>
	<script>
		var callbackFunc = function (data, deviceName) {
			document.getElementById("text").innerHTML = 
			deviceName + " - " + data;
		};

		function GetDevices() {
			var devices = siteKiosk.devices.getAll();
			document.getElementById("devices").innerHTML = 
			JSON.stringify(devices);
		}

		function registerDevice() {
			var deviceName = document.getElementById("devicename").
			value;

			if(deviceName == "")
				return document.getElementById("foundDevice").
				innerHTML = "No device found!";

			var device = siteKiosk.devices.getByName(deviceName);

			if(device == null)
				return document.getElementById("foundDevice").
				innerHTML = "No device found!";

			device.valueChanged(callbackFunc);

			return document.getElementById("foundDevice").
			innerHTML = "Registered device: " + 
			JSON.stringify(device);
		}
	</script>
</head>
	<body onload="GetDevices();">
		<h1>Test page for reading the input of keyboard emulation 
		devices configured in the configuration of SiteKiosk</h1>
		<div>Available devices: 
		<span id="devices"></span></div>
		<div>
			Listen to input from this device that has been 
			configured in SiteKiosk: 
			<input id="devicename" tpye="text" /> 
			(state the device name) <button 
			onclick="registerDevice()">Register the 
			listener</button>
		</div>
		<span id="foundDevice"></span>
		<div>Data that has been received: <span 
		id="text"></span></div>
	</body>
</html>



Nach oben