finos · rikoe · Jan 17, 2020 · Jan 29, 2020 · Jan 29, 2020 · Jan 30, 2020
diff --git a/toolbox/demoapps/receive.html b/toolbox/demoapps/receive.html
@@ -0,0 +1,98 @@
+<html>
+
+<head>
+<title>
+FDC3 Receive
+</title>
+
+<script language="javascript">
+
+<!-- Check if FDC3 is avaialable -->
+
+function fdc3Init(callback){
+  let fdc3Tries = 10; //lets not check forever...
+  const onFDC3Ready = () => {
+    if (window.fdc3) {
+        callback.call(this);
+    }
+    else {
+      if (fdc3Tries > 0){
+        fdc3Tries--;
+        window.setTimeout(onFDC3Ready,100);
+      }
+    }
+  };
+  onFDC3Ready();
+}
+
+<!-- Enable Functionality when FDC3 is available -->
+
+document.addEventListener("DOMContentLoaded",() => {
+  fdc3Init(function(){
+    enablePage();
+  });
+});
+
+<!-- Various poor examples of FDC3 functionality -->
+
+function enablePage(){
+
+	console.log('FDC3 is available');
+
+	if(window.fin){
+		fin.desktop.Application.getCurrent().getInfo((info) => {document.getElementById('providerDetails').innerHTML = 'Available - ' + info.manifest.startup_app.name})
+	} else {
+		document.getElementById('providerDetails').innerHTML = 'Available - Not specified';
+	}
+
+	document.getElementById('btnClearContext').disabled = false;
+    document.getElementById('txtContextData').disabled = false;
+
+	fdc3.addContextListener(function(ctx){ 
+		document.getElementById('txtContextData').value = JSON.stringify(ctx) + '\n-----------\n' + document.getElementById('txtContextData').value;
+	});
+
+}
+
+</script>
+
+<style>
+
+textarea {width:400px;height:100px;} 
+
+select {width:238px;height:24px;} 
+
+.ctxInput {width:241px;height:24px;} 
+
+.urlInput {width:400px;height:24px;} 
+
+.header {width:200px;height:40px;font-weight:700;}
+
+</style>
+
+</head>
+
+<body>
+
+<table border="1">
+
+<tr>
+<td class="header">FDC3 Provider Service:</td>
+<td><span id="providerDetails">FDC3 Not Available</span></td>
+</tr>
+
+<tr>
+<td colspan="3"><hr></td>
+</tr>
+
+<tr>
+<td class="header">Context:</td>
+<td><textarea id="txtContextData" disabled></textarea></td>
+<td><input type="button" value="Clear" id="btnClearContext" onClick="document.getElementById('txtContextData').value='';" disabled></td>
+</tr>
+
+</table>
+
+</body>
+
+</html>
diff --git a/toolbox/fdc3-explained/1.0/index.html b/toolbox/fdc3-explained/1.0/index.html
@@ -0,0 +1,233 @@
+<html>
+
+<head>
+<title>
+FDC3 Explained
+</title>
+
+<script type=module>
+import setVersionList from '../versions.js';
+
+// <!-- Various global stuff -->
+var channelArray = [];
+
+// <!-- Check if FDC3 is avaialable -->
+function fdc3Init(callback){
+  let fdc3Tries = 10; //lets not check forever...
+  const onFDC3Ready = () => {
+    if (window.fdc3) {
+        callback.call(this);
+    }
+    else {
+      if (fdc3Tries > 0){
+        fdc3Tries--;
+        window.setTimeout(onFDC3Ready,100);
+      }
+    }
+  };
+  onFDC3Ready();
+}
+
+// <!-- Enable application when FDC3 is available -->
+document.addEventListener("DOMContentLoaded",() => {
+
+  fdc3Init(async () => {
+
+    const systemChannels = await fdc3.getSystemChannels();
+
+        systemChannels.forEach(channel => {
+                const thisChannel = channel;
+				channelArray.push(channel.id);
+				//alert(channel.id);
+                //createChannelRow(channel);
+                //listeners[channel.id] = channel.addContextListener((context) => {updateChannelRow(thisChannel, context);});
+            });
+			//populateChannels(channelArray);
+			enablePage();
+    });
+
+		 // set the versions of FDC3 Explained in the dropdown
+		 setVersionList()
+});
+
+function enablePage(){
+
+	console.log('FDC3 is available');
+
+	// <!-- Special case for Openfin to read App Name -->
+	if (window.FSBL){
+    		window.FSBL.getFSBLInfo().then((info) => {
+        		document.getElementById('providerDetails').innerHTML = 'Available - Finsemble ' + info.FSBLVersion;
+    		});
+	} else if (window.fin){
+    		fin.desktop.Application.getCurrent().getInfo((info) => {
+        		document.getElementById('providerDetails').innerHTML = 'Available - ' + info.manifest.startup_app.name});
+	} else {
+    		document.getElementById('providerDetails').innerHTML = 'Available - Not specified';
+	}
+	document.getElementById('directoryDetails').innerHTML = 'TBD';
+
+	// <!-- enable page obects -->
+	document.getElementById('btnBroadcast').disabled = false;
+   	document.getElementById('txtBroadcastData').disabled = false;
+	document.getElementById('selBroadcastChannel').disabled = false;
+	document.getElementById('btnFetchChannels').disabled = false;
+	document.getElementById('txtAvailableChannels').disabled = false;
+
+}
+
+// <!-- Various poor examples of FDC3 functionality -->
+
+function populateChannels(channelArray){
+
+var i;
+var selChannel = document.getElementById('selBroadcastChannel');
+var txtChannels = document.getElementById('txtAvailableChannels');
+var selOption;
+
+txtChannels.value = channelArray;
+
+for (i = 0; i < channelArray.length; i++) {
+  selOption = document.createElement("option");
+  selOption.text = channelArray[i];
+  selChannel.add(selOption);
+}
+
+}
+
+function broadcastFDC3Context(){
+
+var myContextData = document.getElementById('txtBroadcastData');
+var ctx = JSON.parse(myContextData.value);
+fdc3.broadcast(ctx);
+//document.getElementById('txtBroadcastData').value = '';
+
+}
+
+function changeBroadcastChannel(){
+
+alert('Not implemented yet!');
+document.getElementById('selBroadcastChannel').selectedIndex = 0;
+
+}
+
+function appLoader(){
+
+var myUrl = document.getElementById('appUrl').value;
+
+if (myUrl.length>0){
+
+	window.open(myUrl);
+
+	}
+}
+
+</script>
+
+<style>
+
+textarea {width:400px;height:100px;}
+
+select {width:238px;height:24px;}
+
+.ctxInput {width:241px;height:24px;}
+
+.urlInput {width:400px;height:24px;}
+
+.header {width:200px;height:40px;font-weight:700;}
+
+</style>
+
+</head>
+
+<body>
+
+<table border="1">
+<tr>
+<td colspan="3" style="text-align:center;">Back to <a href="../../fdc3_explained.html">main page</a>.</td>
+</tr>
+<tr>
+<td class="header">FDC3 Provider Service:</td>
+<td><span id="providerDetails">FDC3 Not Available</span></td>
+
+<tr>
+	<td class="header">FDC3 Supported Version:</td>
+	<td>1.1 </td>
+	<td>
+		<select id="versions" onchange="window.location.href=`../${this.value}`">
+			<option value="" disabled style="display:none;" selected>Change Version</option>
+		</select>
+
+	</td>
+</tr>
+
+<tr>
+<td colspan="3"><hr></td>
+</tr>
+
+<tr>
+<td class="header">App Directory:</td>
+<td><span id="directoryDetails">No Application Directory Connected</span></td>
+<td><input type="button" value="Connect" disabled></td>
+</tr>
+
+<tr>
+<td class="header">Available Apps:</td>
+<td><textarea disabled></textarea></td>
+<td><input type="button" value="Fetch" disabled></td>
+</tr>
+
+<tr>
+<td class="header">Load App Start Url:</td>
+<td><input type="text" id="appUrl" class="urlInput" value="demoapps/receive.html"></td>
+<td><input type="button" value="Open" onClick="appLoader();"></td>
+</tr>
+
+<tr>
+<td colspan="3"><hr></td>
+</tr>
+
+<tr>
+<td class="header">Available Channels:</td>
+<td><textarea disabled id="txtAvailableChannels"></textarea></td>
+<td><input type="button" value="Fetch" id="btnFetchChannels" disabled onClick="populateChannels(channelArray);">&nbsp;<input type="button" value="Add" disabled></td>
+</tr>
+
+<tr>
+<td colspan="3"><hr></td>
+</tr>
+
+<tr>
+<td class="header" rowspan="2">Broadcast Context:</td>
+<td>Channel: <select id="selBroadcastChannel" disabled onChange="changeBroadcastChannel();"></select></td>
+<td rowspan="2"><input type="button" value="Send" id="btnBroadcast" disabled onClick="broadcastFDC3Context();"></td>
+</tr>
+
+<tr>
+<td><textarea id="txtBroadcastData" disabled>{"id":{"ISIN":"US0378331005","SEDOL":"2046251","ticker":"AAPL"},"name":"Apple Inc.","type":"fdc3.instrument"}
+</textarea></td>
+</tr>
+
+<tr>
+<td colspan="3"><hr></td>
+</tr>
+
+<tr>
+<td class="header" rowspan="3">Get Context:</td>
+<td>Channel: <select disabled></td>
+<td rowspan="3"><input type="button" value="Fetch" disabled></td>
+</tr>
+
+<tr>
+<td>Context: <input type="text" class="ctxInput" disabled></td>
+</tr>
+
+<tr>
+<td><textarea disabled></textarea></td>
+</tr>
+
+</table>
+
+</body>
+
+</html>