From 1abf8567328fc22b66f56782ea2061dae5a73d65 Mon Sep 17 00:00:00 2001 From: Romain Forlot Date: Tue, 22 Aug 2017 19:23:03 +0200 Subject: Adding control panel sample HTML5 UI Change-Id: Id7cb7e3f1a817000c9054139922bdf9e3e21a0a8 Signed-off-by: Romain Forlot --- htdocs/AFB-websock.js | 177 +++++++++++++++++++++++++++++++++++++++++ htdocs/AudioBinding.css | 7 ++ htdocs/AudioBinding.js | 197 ++++++++++++++++++++++++++++++++++++++++++++++ htdocs/CMakeLists.txt | 34 ++++++++ htdocs/README.md | 7 ++ htdocs/audio-control.html | 45 +++++++++++ htdocs/audio-logic.html | 9 +++ htdocs/index.html | 7 ++ 8 files changed, 483 insertions(+) create mode 100644 htdocs/AFB-websock.js create mode 100644 htdocs/AudioBinding.css create mode 100644 htdocs/AudioBinding.js create mode 100644 htdocs/CMakeLists.txt create mode 100644 htdocs/README.md create mode 100644 htdocs/audio-control.html create mode 100644 htdocs/audio-logic.html create mode 100644 htdocs/index.html 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, '&').replace(//g, '>'); + 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 '' + match + ''; + }); + } + + 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 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 + +

Simple Audio Control Test

+ +

+ Selected HAL + + + API Verbosity + +
+
+ +
    + +
  1. +
  2. +
  3. +
    +
  4. +
  5. +
  6. + +
+ + 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 @@ + + + High Level API Simple Test Page + + + + + +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 @@ + + + AGL-AudioBindins tests + +

Controller for AAAA test

+
    +
  1. AudioControl Control/Policy API -- cgit 1.2.3-korg