summaryrefslogtreecommitdiffstats
path: root/htdocs
diff options
context:
space:
mode:
authorRomain Forlot <romain.forlot@iot.bzh>2017-08-22 19:23:03 +0200
committerRomain Forlot <romain.forlot@iot.bzh>2017-08-22 19:23:03 +0200
commitc254a5b100b9ea011dc35b4079ce184e5c842135 (patch)
tree131fbe13410fd535cff266b0f6bf596b1d493f99 /htdocs
parente61a5dbfe08fb96a1d293f5ca7fffe8b693ecaf8 (diff)
Adding control panel sample HTML5 UI
Change-Id: Id7cb7e3f1a817000c9054139922bdf9e3e21a0a8 Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>
Diffstat (limited to 'htdocs')
-rw-r--r--htdocs/AFB-websock.js177
-rw-r--r--htdocs/AudioBinding.css7
-rw-r--r--htdocs/AudioBinding.js197
-rw-r--r--htdocs/CMakeLists.txt34
-rw-r--r--htdocs/README.md7
-rw-r--r--htdocs/audio-control.html45
-rw-r--r--htdocs/audio-logic.html9
-rw-r--r--htdocs/index.html7
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>