Adding control panel sample HTML5 UI

Change-Id: Id7cb7e3f1a817000c9054139922bdf9e3e21a0a8
Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>

8 files changed, 483 insertions, 0 deletions

diff --git a/htdocs/AFB-websock.js b/htdocs/AFB-websock.js
new file mode 100644
index 0000000..ff9fa60
--- /dev/null
+++ b/htdocs/AFB-websock.js
@@ -0,0 +1,177 @@
+var urlws;
+var urlhttp;
+
+AFB = function(base, initialtoken){
+
+urlws = "ws://"+window.location.host+"/"+base;
+urlhttp = "http://"+window.location.host+"/"+base;
+
+/*********************************************/
+/****                                     ****/
+/****             AFB_context             ****/
+/****                                     ****/
+/*********************************************/
+var AFB_context;
+{
+	var UUID = undefined;
+	var TOKEN = initialtoken;
+
+	var context = function(token, uuid) {
+		this.token = token;
+		this.uuid = uuid;
+	}
+
+	context.prototype = {
+		get token() {return TOKEN;},
+		set token(tok) {if(tok) TOKEN=tok;},
+		get uuid() {return UUID;},
+		set uuid(id) {if(id) UUID=id;}
+	};
+
+	AFB_context = new context();
+}
+/*********************************************/
+/****                                     ****/
+/****             AFB_websocket           ****/
+/****                                     ****/
+/*********************************************/
+var AFB_websocket;
+{
+	var CALL = 2;
+	var RETOK = 3;
+	var RETERR = 4;
+	var EVENT = 5;
+
+	var PROTO1 = "x-afb-ws-json1";
+
+	AFB_websocket = function(onopen, onabort) {
+		var u = urlws;
+		if (AFB_context.token) {
+			u = u + '?x-afb-token=' + AFB_context.token;
+			if (AFB_context.uuid)
+				u = u + '&x-afb-uuid=' + AFB_context.uuid;
+		}
+		this.ws = new WebSocket(u, [ PROTO1 ]);
+		this.pendings = {};
+		this.awaitens = {};
+		this.counter = 0;
+		this.ws.onopen = onopen.bind(this);
+		this.ws.onerror = onerror.bind(this);
+		this.ws.onclose = onclose.bind(this);
+		this.ws.onmessage = onmessage.bind(this);
+		this.onopen = onopen;
+		this.onabort = onabort;
+		this.onclose = onabort;
+	}
+
+	function onerror(event) {
+		var f = this.onabort;
+		if (f) {
+			delete this.onopen;
+			delete this.onabort;
+			f && f(this);
+		}
+		this.onerror && this.onerror(this);
+	}
+
+	function onopen(event) {
+		var f = this.onopen;
+		delete this.onopen;
+		delete this.onabort;
+		f && f(this);
+	}
+
+	function onclose(event) {
+		for (var id in this.pendings) {
+			var ferr = this.pendings[id].onerror;
+			ferr && ferr(null, this);
+		}
+		this.pendings = {};
+		this.onclose && this.onclose();
+	}
+
+	function fire(awaitens, name, data) {
+		var a = awaitens[name];
+		if (a)
+			a.forEach(function(handler){handler(data);});
+		var i = name.indexOf("/");
+		if (i >= 0) {
+			a = awaitens[name.substring(0,i)];
+			if (a)
+				a.forEach(function(handler){handler(data);});
+		}
+		a = awaitens["*"];
+		if (a)
+			a.forEach(function(handler){handler(data);});
+	}
+
+	function reply(pendings, id, ans, offset) {
+		if (id in pendings) {
+			var p = pendings[id];
+			delete pendings[id];
+			var f = p[offset];
+			f(ans);
+		}
+	}
+
+	function onmessage(event) {
+		var obj = JSON.parse(event.data);
+		var code = obj[0];
+		var id = obj[1];
+		var ans = obj[2];
+		AFB_context.token = obj[3];
+		switch (code) {
+		case RETOK:
+			reply(this.pendings, id, ans, 0);
+			break; 
+		case RETERR:
+			reply(this.pendings, id, ans, 1);
+			break; 
+		case EVENT:
+		default:
+			fire(this.awaitens, id, ans);
+			break; 
+		}
+	}
+
+	function close() {
+		this.ws.close();
+                this.onabort();
+	}
+
+	function call(method, request) {
+		return new Promise((function(resolve, reject){
+			var id, arr;
+			do {
+			   id = String(this.counter = 4095 & (this.counter + 1));
+			} while (id in this.pendings);
+			this.pendings[id] = [ resolve, reject ];
+			arr = [CALL, id, method, request ];
+			if (AFB_context.token) arr.push(AFB_context.token);
+			this.ws.send(JSON.stringify(arr));
+		}).bind(this));
+	}
+
+	function onevent(name, handler) {
+		var id = name;
+		var list = this.awaitens[id] || (this.awaitens[id] = []);
+		list.push(handler);
+	}
+
+	AFB_websocket.prototype = {
+		close: close,
+		call: call,
+		onevent: onevent
+	};
+}
+/*********************************************/
+/****                                     ****/
+/****                                     ****/
+/****                                     ****/
+/*********************************************/
+return {
+	context: AFB_context,
+	ws: AFB_websocket
+};
+};
+
diff --git a/htdocs/AudioBinding.css b/htdocs/AudioBinding.css
new file mode 100644
index 0000000..1052aa7
--- /dev/null
+++ b/htdocs/AudioBinding.css
@@ -0,0 +1,7 @@
+pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
+.string { color: green; }
+.number { color: darkorange; }
+.boolean { color: blue; }
+.null { color: magenta; }
+.key { color: red; }
+
diff --git a/htdocs/AudioBinding.js b/htdocs/AudioBinding.js
new file mode 100644
index 0000000..4d14600
--- /dev/null
+++ b/htdocs/AudioBinding.js
@@ -0,0 +1,197 @@
+    var afb = new AFB("api", "mysecret");
+    var ws;
+    var sndcard="HALNotSelected";
+    var evtidx=0;
+    var numid=0;
+
+    function syntaxHighlight(json) {
+        if (typeof json !== 'string') {
+             json = JSON.stringify(json, undefined, 2);
+        }
+        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+            var cls = 'number';
+            if (/^"/.test(match)) {
+                if (/:$/.test(match)) {
+                    cls = 'key';
+                } else {
+                    cls = 'string';
+                }
+            } else if (/true|false/.test(match)) {
+                cls = 'boolean';
+            } else if (/null/.test(match)) {
+                cls = 'null';
+            }
+            return '<span class="' + cls + '">' + match + '</span>';
+        });
+    }
+
+    function getParameterByName(name, url) {
+        if (!url) {
+          url = window.location.href;
+        }
+        name = name.replace(/[\[\]]/g, "\\$&");
+        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+            results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, " "));
+    }
+    
+    // default soundcard is "PCH"
+    var devid=getParameterByName("devid");
+    if (!devid) devid="hw:1";
+    
+    var haldev=getParameterByName("haldev");
+    if (!haldev) haldev="scarlett-usb";
+    
+    var sndname=getParameterByName("sndname");
+    if (!sndname) sndname="PCH";
+    
+    var mode=getParameterByName("mode");
+    if (!mode) mode="0";
+
+
+    
+
+    function replyok(obj) {
+            console.log("replyok:" + JSON.stringify(obj));
+            document.getElementById("output").innerHTML = "OK: "+ syntaxHighlight(obj);
+    }
+    
+    function replyerr(obj) {
+            console.log("replyerr:" + JSON.stringify(obj));
+            document.getElementById("output").innerHTML = "ERROR: "+ syntaxHighlight(obj);
+    }
+    
+    function gotevent(obj) {
+            console.log("gotevent:" + JSON.stringify(obj));
+            document.getElementById("outevt").innerHTML = (evtidx++) +": "+JSON.stringify(obj);
+    }
+    
+    function send(message) {
+            var api = document.getElementById("api").value;
+            var verb = document.getElementById("verb").value;
+            document.getElementById("question").innerHTML = "subscribe: "+api+"/"+verb + " (" + JSON.stringify(message) +")";
+            ws.call(api+"/"+verb, {data:message}).then(replyok, replyerr);
+    }
+    
+
+     // On button click from HTML page    
+    function callbinder(api, verb, query) {
+            console.log ("subscribe api="+api+" verb="+verb+" query=" +query);
+            var question = urlws +"/" +api +"/" +verb + "?query=" + JSON.stringify(query);          
+            document.getElementById("question").innerHTML = syntaxHighlight(question);
+            ws.call(api+"/"+verb, query).then(replyok, replyerr);
+    }
+
+
+    // Retreive Select value and Text from the binder
+    // Note: selection of value/text for a given context is huggly!!!
+    function querySelectList (elemid, api, verb, query) {
+        
+        console.log("querySelectList elemid=%s api=%s verb=%s query=%s", elemid, api, verb, query);
+        
+        var selectobj = document.getElementById(elemid);
+        if (!selectobj) {
+            return;
+        }
+        
+        // onlick update selected HAL api
+        selectobj.onclick=function(){
+           sndcard= this.value; 
+           console.log ("Default Selection=" + sndcard);           
+        };
+
+        function gotit (result) {
+            
+            // display response as for normal onclick action
+            replyok(result);
+            var response=result.response;
+           
+            // fulfill select with avaliable active HAL
+            for (idx=0; idx<response.length; idx++) {
+                var opt = document.createElement('option');
+
+                // Alsa LowLevel selection mode
+                if (response[idx].name)  opt.text   = response[idx].name;
+                if (response[idx].devid) opt.value  = response[idx].devid;
+
+                // HAL selection mode
+                if (response[idx].shortname) opt.text  = response[idx].shortname;
+                if (response[idx].api) opt.value = response[idx].api;
+               
+                selectobj.appendChild(opt);
+            }
+               
+           sndcard= selectobj.value;
+        }
+                
+        var question = urlws +"/"+api +"/" +verb + "?query=" + JSON.stringify(query);          
+        document.getElementById("question").innerHTML = syntaxHighlight(question);
+
+        // request lowlevel ALSA to get API list
+        ws.call(api+"/"+verb, query).then(gotit, replyerr);
+    }
+    
+    function refresh_list (self, api, verb, query) {
+        console.log("refresh_list id=%s api=%s verb=%s query=%s", self.id, api, verb, query);
+  
+        if (self.value > 0) return;       
+  
+        // onlick update selected HAL api
+        self.onclick=function(){
+           numid = parseInt(self.value); 
+           console.log ("Default numid=%d", numid);           
+        };
+
+        function gotit (result) {
+            
+            // display response as for normal onclick action
+            replyok(result);
+            var response=result.response;
+
+
+            
+            // fulfill select with avaliable active HAL
+            for (idx=0; idx<response.length; idx++) {
+                var opt = document.createElement('option');
+
+                // Alsa LowLevel selection mode
+                opt.text   = response[idx].name + ' id=' + response[idx].id;
+                opt.value  = response[idx].id;
+               
+                self.appendChild(opt);
+            }               
+            self.selectedIndex=2;
+            numid = parseInt (self.value); 
+        }
+                
+        var question = urlws +"/"+api +"/" +verb + "?query=" + JSON.stringify(query);          
+        document.getElementById("question").innerHTML = syntaxHighlight(question);
+
+        // request lowlevel ALSA to get API list
+        ws.call(api+"/"+verb, query).then(gotit, replyerr);
+    }
+    
+        
+    function init(elemid, api, verb, query) {
+        
+        function onopen() {
+                // check for active HALs
+                querySelectList (elemid, api, verb, query);
+                
+                document.getElementById("main").style.visibility = "visible";
+                document.getElementById("connected").innerHTML = "Binder WS Active";
+                document.getElementById("connected").style.background  = "lightgreen";
+                ws.onevent("*", gotevent);
+        }
+
+        function onabort() {
+                document.getElementById("main").style.visibility = "hidden";
+                document.getElementById("connected").innerHTML = "Connected Closed";
+                document.getElementById("connected").style.background  = "red";
+
+        }           
+        ws = new afb.ws(onopen, onabort);
+    }
diff --git a/htdocs/CMakeLists.txt b/htdocs/CMakeLists.txt
new file mode 100644
index 0000000..322033d
--- /dev/null
+++ b/htdocs/CMakeLists.txt
@@ -0,0 +1,34 @@
+###########################################################################
+# Copyright 2015, 2016, 2017 IoT.bzh
+#
+# author: Fulup Ar Foll <fulup@iot.bzh>
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+###########################################################################
+
+
+
+##################################################
+# HTML Testing Files
+##################################################
+PROJECT_TARGET_ADD(htdocs)
+
+    file(GLOB SOURCE_FILES "*.html" "*.js" "*.jpg" "*.css")
+
+	add_input_files("${SOURCE_FILES}")
+
+    SET_TARGET_PROPERTIES(${TARGET_NAME} PROPERTIES
+	LABELS "HTDOCS"
+	OUTPUT_NAME ${TARGET_NAME}
+    )
+
diff --git a/htdocs/README.md b/htdocs/README.md
new file mode 100644
index 0000000..bb14b7e
--- /dev/null
+++ b/htdocs/README.md
@@ -0,0 +1,7 @@
+------------------------------------------------------------------------
+   Basic HTML & WS test
+------------------------------------------------------------------------
+  
+  # Load bindings directly from development tree for debug
+  afb-daemon --verbose --verbose --token="" --ldpaths=build --port=1234 --roothttp=htdocs
+
diff --git a/htdocs/audio-control.html b/htdocs/audio-control.html
new file mode 100644
index 0000000..06010e5
--- /dev/null
+++ b/htdocs/audio-control.html
@@ -0,0 +1,45 @@
+<html>
+<head>
+    <title>Basic Audio Hardware Abstraction Layer Test</title>
+    <link rel="stylesheet" href="AudioBinding.css">
+    <script type="text/javascript" src="AFB-websock.js"></script>
+    <script type="text/javascript" src="AudioBinding.js"></script>
+</head>
+   
+<body onload="init('hal_registry','alsacore', 'hallist')">
+        
+    <h1>Simple Audio Control Test</h1>
+    <button id="connected" onclick="init('hal_registry','alsacore', 'hallist')">Binder WS Fail</button>
+    <br><br>
+    <b>Selected HAL </b>
+    <select id='hal_registry'></select>
+    
+    <b>API Verbosity </b>
+    <select id='api_verbosity' onclick='mode=this.value'>
+        <option value='0'>Quiet</option>
+        <option value='1'>Compact</option>
+        <option value='2'>Verbose</option>
+        <option value='3'>Full</option>
+    </select>    
+    <br>
+    <br>
+   
+    <ol>
+    
+    <li><button onclick="callbinder('control','dispatch' ,{'target':'navigation','args':{'apihal':sndcard}});">Dispatch Navigation</button></li>
+    <li><button onclick="callbinder('control','dispatch' ,{'target':'multimedia','args':{'apihal':sndcard}});">Dispatch Mutimedia</button></li>
+    <li><button onclick="callbinder('control','dispatch' ,{'target':'emergency' });">Dispatch Emergency</button></li>
+    <br>    
+    <li><button onclick="callbinder('control','request'  , {'target':'_Simple_Echo_Args', 'args':{speed:20}});">LUA function</button></li>
+    <li><button onclick="callbinder('control','request'  , {'target':'_Simple_Timer_Test', args:{label:'MyTimer', 'delay':3000, 'count':10}});">LUA Timer</button></li>
+    <li><button onclick="callbinder('control','debuglua' , {'target':'helloworld', args:{'arg1':'abcd', 'next':7890, 'last':[1,2,3,4]}});">LUA script</button></li>
+        
+    </ol>
+    
+    <div id="main" style="visibility:hidden">
+    <ol>
+    <li>Question <pre id="question"></pre>
+    <li>Response <pre id="output"></pre>
+    <li>Events: <pre id="outevt"></pre>
+    </ol>
+    </div>    
diff --git a/htdocs/audio-logic.html b/htdocs/audio-logic.html
new file mode 100644
index 0000000..c31282a
--- /dev/null
+++ b/htdocs/audio-logic.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+    <title>High Level API Simple Test Page</title>
+    
+    <script type="text/javascript" src="AFB-websock.js"></script>
+    <script type="text/javascript" src="AudioBinding.js"></script>
+</head>
+
+ToBeDone
\ No newline at end of file
diff --git a/htdocs/index.html b/htdocs/index.html
new file mode 100644
index 0000000..828d389
--- /dev/null
+++ b/htdocs/index.html
@@ -0,0 +1,7 @@
+<html>
+  <head>
+    <title>AGL-AudioBindins tests</title>
+  <body>
+    <h1>Controller for AAAA test</h1>
+    <ol>
+     <li><a href="audio-control.html">AudioControl Control/Policy API</a>