swalke16/external-sample.html

## external-sample.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>IKE Custom Application Example</title>
  <script>
    // For security reasons the external application should only receive or
    // send events from the IKE application. The origin below is the correct origin
    // for the application to run on production. For the IKE Test environment you
    // will need to change that origin to the IKE test environment Url which is
    // https://ike-production-pr-1659.herokuapp.com
    const allowedOrigin = 'http://localhost:3100'
    window.addEventListener('message', receiveMessage, false);

    function receiveMessage(e)
    {
      if (event.origin !== allowedOrigin) {
        console.log("invalid message origin!")
        return
      }

      if (e.data.type === 'KEYBOARD_PRESS') {
        document.getElementById('text').innerHTML += e.data.payload.key
      }
      else if (e.data.type === 'KEYBOARD_ENTER') {
        document.getElementById('text').innerHTML += "<br/>"
      }
      else if (e.data.type === 'KEYBOARD_DELETE') {
        let content = document.getElementById('text').innerHTML

        document.getElementById('text').innerHTML = content.slice(0, content.length - 1)
      }
      else if (e.data.type === 'KIOSK_INFO') {
        // kiosk is an object containing several properties
        //  {
        //    'locationDescription': 'High & West 1st',
        //    'side': 1,
        //    'cameraLocation': 'left',
        //    'direction': 'N',
        //    'lat': 39.972131,
        //    'lon': -83.002432,
        //    'timeZone': 'America/New_York'
        // }
        console.log(e.data.payload.kiosk)
      }
      else if (e.data.type === 'KIOSK_LOCALE_CHANGED') {
        console.log(e.data.payload.locale)
      }
      else {
        // KEYBOARD_OPENED
        // KEYBOARD_CLOSED
        console.log(e.data.type)
      }
    }

    function openKeyboard() {
      window.parent.postMessage({type: 'KEYBOARD_OPEN'}, allowedOrigin)
    }

    function closeKeyboard() {
      window.parent.postMessage({type: 'KEYBOARD_CLOSE'}, allowedOrigin)
    }

    function getKioskInfo() {
      window.parent.postMessage({type: 'KIOSK_GET_INFO'}, allowedOrigin)
    }
  </script>
</head>
<body style="background-color: white; font-size: 32px;">
  <button type="button" onclick="openKeyboard()">Open Keyboard</button>
  <button type="button" onclick="closeKeyboard()">Close Keyboard</button>
  <button type="button" onclick="getKioskInfo()">Get Kiosk Info</button>
  <p id="text"></p>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>IKE Custom Application Example</title>
	<script>
	// For security reasons the external application should only receive or
	// send events from the IKE application. The origin below is the correct origin
	// for the application to run on production. For the IKE Test environment you
	// will need to change that origin to the IKE test environment Url which is
	// https://ike-production-pr-1659.herokuapp.com
	const allowedOrigin = 'http://localhost:3100'
	window.addEventListener('message', receiveMessage, false);

	function receiveMessage(e)
	{
	if (event.origin !== allowedOrigin) {
	console.log("invalid message origin!")
	return
	}

	if (e.data.type === 'KEYBOARD_PRESS') {
	document.getElementById('text').innerHTML += e.data.payload.key
	}
	else if (e.data.type === 'KEYBOARD_ENTER') {
	document.getElementById('text').innerHTML += "<br/>"
	}
	else if (e.data.type === 'KEYBOARD_DELETE') {
	let content = document.getElementById('text').innerHTML

	document.getElementById('text').innerHTML = content.slice(0, content.length - 1)
	}
	else if (e.data.type === 'KIOSK_INFO') {
	// kiosk is an object containing several properties
	// {
	// 'locationDescription': 'High & West 1st',
	// 'side': 1,
	// 'cameraLocation': 'left',
	// 'direction': 'N',
	// 'lat': 39.972131,
	// 'lon': -83.002432,
	// 'timeZone': 'America/New_York'
	// }
	console.log(e.data.payload.kiosk)
	}
	else if (e.data.type === 'KIOSK_LOCALE_CHANGED') {
	console.log(e.data.payload.locale)
	}
	else {
	// KEYBOARD_OPENED
	// KEYBOARD_CLOSED
	console.log(e.data.type)
	}
	}

	function openKeyboard() {
	window.parent.postMessage({type: 'KEYBOARD_OPEN'}, allowedOrigin)
	}

	function closeKeyboard() {
	window.parent.postMessage({type: 'KEYBOARD_CLOSE'}, allowedOrigin)
	}

	function getKioskInfo() {
	window.parent.postMessage({type: 'KIOSK_GET_INFO'}, allowedOrigin)
	}
	</script>
	</head>
	<body style="background-color: white; font-size: 32px;">
	<button type="button" onclick="openKeyboard()">Open Keyboard</button>
	<button type="button" onclick="closeKeyboard()">Close Keyboard</button>
	<button type="button" onclick="getKioskInfo()">Get Kiosk Info</button>
	<p id="text"></p>
	</body>
	</html>