example/index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, user-scalable=no
		initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<title>Eddystone Demo</title>

	<script>
	// Redirect console.log when running from Evothings Workbench.
	if (window.hyper && window.hyper.log) { console.log = hyper.log }
	</script>

	<style>
	body
	{
		font-family: sans-serif;
	}

	h1
	{
		margin-right:110px;
	}

	.evo-image
	{
		position:fixed;
		right:5px;
		top:5px;
		width:100px;
		height:auto;
		background:white;
	}
	</style>
</head>

<body>

	<img class="evo-image" src="https://evomedia.evothings.com/2013/11/evothings_logo_large_white1.png" />

	<h1>Eddystone Demo</h1>

	<p id="message">Preparing...</p>

	<div id="found-beacons"></div>

	<!--
	Including cordova.js will automatically include the JavaScript library
	for Eddystone.
	-->
	<script src="cordova.js"></script>

	<script>
	// Application code starts here. The code is wrapped in a
	// function closure to prevent overwriting global objects.
	(function()
	{
		// Dictionary of beacons.
		var beacons = {};

		// Timer that displays list of beacons.
		var timer = null;

		function onDeviceReady()
		{
			// Start tracking beacons!
			setTimeout(startScan, 500);

			// Timer that refreshes the display.
			timer = setInterval(updateBeaconList, 500);
		}

		function onBackButtonDown()
		{
			evothings.eddystone.stopScan();
			navigator.app.exitApp();
		}

		function startScan()
		{
			showMessage('Scan in progress.');
			evothings.eddystone.startScan(
				function(beacon)
				{
					// Update beacon data.
					beacon.timeStamp = Date.now();
					beacons[beacon.address] = beacon;
				},
				function(error)
				{
					showMessage('Eddystone scan error: ' + error);
				});
		}

		// Map the RSSI value to a value between 1 and 100.
		function mapBeaconRSSI(rssi)
		{
			if (rssi >= 0) return 1; // Unknown RSSI maps to 1.
			if (rssi < -100) return 100; // Max RSSI
			return 100 + rssi;
		}

		function getSortedBeaconList(beacons)
		{
			var beaconList = [];
			for (var key in beacons)
			{
				beaconList.push(beacons[key]);
			}
			beaconList.sort(function(beacon1, beacon2)
			{
				return mapBeaconRSSI(beacon1.rssi) < mapBeaconRSSI(beacon2.rssi);
			});
			return beaconList;
		}

		function updateBeaconList()
		{
			removeOldBeacons();
			displayBeacons();
		}

		function removeOldBeacons()
		{
			var timeNow = Date.now();
			for (var key in beacons)
			{
				// Only show beacons updated during the last 60 seconds.
				var beacon = beacons[key];
				if (beacon.timeStamp + 60000 < timeNow)
				{
					delete beacons[key];
				}
			}
		}

		function displayBeacons()
		{
			var html = '';
			var sortedList = getSortedBeaconList(beacons);
			for (var i = 0; i < sortedList.length; ++i)
			{
				var beacon = sortedList[i];
				var htmlBeacon =
					'<p>'
					+	htmlBeaconName(beacon)
					+	htmlBeaconURL(beacon)
					+	htmlBeaconNID(beacon)
					+	htmlBeaconBID(beacon)
					+	htmlBeaconEID(beacon)
					+	htmlBeaconVoltage(beacon)
					+	htmlBeaconTemperature(beacon)
					+	htmlBeaconRSSI(beacon)
					+ '</p>';
				html += htmlBeacon
			}
			document.querySelector('#found-beacons').innerHTML = html;
		}

		function htmlBeaconName(beacon)
		{
			var name = beacon.name || 'no name';
			return '<strong>' + name + '</strong><br/>';
		}

		function htmlBeaconURL(beacon)
		{
			return beacon.url ?
				'URL: ' + beacon.url + '<br/>' :  '';
		}

		function htmlBeaconURL(beacon)
		{
			return beacon.url ?
				'URL: ' + beacon.url + '<br/>' :  '';
		}

		function htmlBeaconNID(beacon)
		{
			return beacon.nid ?
				'NID: ' + uint8ArrayToString(beacon.nid) + '<br/>' :  '';
		}

		function htmlBeaconBID(beacon)
		{
			return beacon.bid ?
				'BID: ' + uint8ArrayToString(beacon.bid) + '<br/>' :  '';
		}

		function htmlBeaconEID(beacon)
		{
			return beacon.eid ?
				'EID: ' + uint8ArrayToString(beacon.eid) + '<br/>' :  '';
		}

		function htmlBeaconVoltage(beacon)
		{
			return beacon.voltage ?
				'Voltage: ' + beacon.voltage + '<br/>' :  '';
		}

		function htmlBeaconTemperature(beacon)
		{
			return beacon.temperature && beacon.temperature != 0x8000 ?
				'Temperature: ' + beacon.temperature + '<br/>' :  '';
		}

		function htmlBeaconRSSI(beacon)
		{
			return beacon.rssi ?
				'RSSI: ' + beacon.rssi + '<br/>' :  '';
		}

		function uint8ArrayToString(uint8Array)
		{
			function format(x)
			{
				var hex = x.toString(16);
				return hex.length < 2 ? '0' + hex : hex;
			}

			var result = '';
			for (var i = 0; i < uint8Array.length; ++i)
			{
				result += format(uint8Array[i]) + ' ';
			}
			return result;
		}

		function showMessage(text)
		{
			document.querySelector('#message').innerHTML = text;
		}

		// This calls onDeviceReady when Cordova has loaded everything.
		document.addEventListener('deviceready', onDeviceReady, false);

		// Add back button listener (for Android).
		document.addEventListener('backbutton', onBackButtonDown, false);

	})(); // End of closure.
	</script>

</body>

</html>