From a7a6ae4be87ee9178905ab784d84a4c0a8303f9b Mon Sep 17 00:00:00 2001
From: fulup <fulup.arfoll@iot.bzh>
Date: Sun, 23 Jul 2017 01:23:37 +0200
Subject: Added TLV->DBscale into HAL control 1st Working version of HAL
 ctl-get with TLV Cleanup HTML5 test pages WIP Only

---
 htdocs/AFB-websock.js   |  7 +++--
 htdocs/AudioBinding.css |  7 +++++
 htdocs/AudioBinding.js  | 74 ++++++++++++++++++++++++++++++++++++-------------
 htdocs/alsa-core.html   | 68 +++++++++++++++++++++++++--------------------
 htdocs/alsa-hal.html    | 31 ++++++++++++++-------
 htdocs/audio-logic.html | 26 ++---------------
 6 files changed, 128 insertions(+), 85 deletions(-)
 create mode 100644 htdocs/AudioBinding.css

(limited to 'htdocs')

diff --git a/htdocs/AFB-websock.js b/htdocs/AFB-websock.js
index e77ec89..ff9fa60 100644
--- a/htdocs/AFB-websock.js
+++ b/htdocs/AFB-websock.js
@@ -1,7 +1,10 @@
+var urlws;
+var urlhttp;
+
 AFB = function(base, initialtoken){
 
-var urlws = "ws://"+window.location.host+"/"+base;
-var urlhttp = "http://"+window.location.host+"/"+base;
+urlws = "ws://"+window.location.host+"/"+base;
+urlhttp = "http://"+window.location.host+"/"+base;
 
 /*********************************************/
 /****                                     ****/
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
index 7105b20..e000a70 100644
--- a/htdocs/AudioBinding.js
+++ b/htdocs/AudioBinding.js
@@ -1,8 +1,30 @@
     var afb = new AFB("api", "mysecret");
     var ws;
-    var halapi="HALNotSelected";
+    var sndcard="HALNotSelected";
     var evtidx=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;
@@ -25,8 +47,8 @@
     var sndname=getParameterByName("sndname");
     if (!sndname) sndname="PCH";
     
-    var quiet=getParameterByName("quiet");
-    if (!quiet) quiet="99";
+    var mode=getParameterByName("mode");
+    if (!mode) mode="99";
 
 
     
@@ -54,12 +76,12 @@
 
     function replyok(obj) {
             console.log("replyok:" + JSON.stringify(obj));
-            document.getElementById("output").innerHTML = "OK: "+JSON.stringify(obj);
+            document.getElementById("output").innerHTML = "OK: "+ syntaxHighlight(obj);
     }
     
     function replyerr(obj) {
             console.log("replyerr:" + JSON.stringify(obj));
-            document.getElementById("output").innerHTML = "ERROR: "+JSON.stringify(obj);
+            document.getElementById("output").innerHTML = "ERROR: "+ syntaxHighlight(obj);
     }
     
     function gotevent(obj) {
@@ -78,7 +100,8 @@
      // On button click from HTML page    
     function callbinder(api, verb, query) {
             console.log ("subscribe api="+api+" verb="+verb+" query=" +query);
-            document.getElementById("question").innerHTML = "apicall: " + api+"/"+verb +" ("+ JSON.stringify(query)+")";
+            var question = urlws +"/" +api +"/" +verb + "?query=" + JSON.stringify(query);          
+            document.getElementById("question").innerHTML = syntaxHighlight(question);
             ws.call(api+"/"+verb, query).then(replyok, replyerr);
     }
 
@@ -89,27 +112,38 @@
         
         // onlick update selected HAL api
         selectobj.onclick=function(){
-           halapi= this.value; 
-           console.log ("New Default HAL=" + halapi);           
+           sndcard= this.value; 
+           console.log ("Default Selection=" + sndcard);           
         };
 
         function gotit (result) {
             
-           // display response as for normal onclick action
-           replyok(result);
-           var response=result.response;
+            // 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++) {
-               console.log ("probeActiveHal =" + response[idx].shortname);
-               var opt = document.createElement('option');
-               opt.value = response[idx].api;
-               opt.text  = response[idx].shortname;
-               selectobj.appendChild(opt);
-           }
+            // 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);
+            }
                
-           halapi= selectobj.value;
+           sndcard= selectobj.value;
         }
+        
+        console.log ("subscribe api="+api+" verb="+verb+" query=" +query);
+        
+        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);
diff --git a/htdocs/alsa-core.html b/htdocs/alsa-core.html
index 7fff3d8..9b6e214 100644
--- a/htdocs/alsa-core.html
+++ b/htdocs/alsa-core.html
@@ -1,50 +1,58 @@
 <html>
 <head>
-    <title>Hello world test</title>
+    <link rel="stylesheet" href="AudioBinding.css">
+    <title>Alsa Low Level Simple Test</title>
+    
     
     <script type="text/javascript" src="AFB-websock.js"></script>
     <script type="text/javascript" src="AudioBinding.js"></script>
+</head>
+    
+<body onload="init('alsa_registry','alsacore', 'getinfo');">
     
 <b> references</b>
-    <ol> 
-        <li>http://localhost:1234/alsa-core.html?devid=hw:xx</li>
-        <li>amixer -D hw:PCH controls</li>
-    </ol>
-
-<body onload="init();">
-    <h1>Hello world test</h1>
-    <button id="connected" onclick="init()">Binder WS Fail</button></li>
+    <button id="connected" onclick="init('alsa_registry','alsacore', 'getinfo')">Binder WS Fail</button>
+    <br><br>
+    <b>Selected SndCard </b>
+    <select id='alsa_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>
+
+
     <ol>
-    <li><a href="api/alsacore/getinfo">getinfo: List Sound Cards</a>
-    <li><button onclick="callbinder('alsacore','getinfo', {quiet:quiet})">Get All Sound Card info</button></li>
-    <li><button onclick="callbinder('alsacore','getinfo', {devid:devid, quiet:quiet})">Get Sound Card info devid=xx</button></li>
-    <li><button onclick="callbinder('alsacore','getctls', {devid:devid, quiet:quiet})">Get all Alsa Ctls for devid=xx</button></li>
-    <li><button onclick="callbinder('alsacore','getctls', {devid:devid, quiet:quiet, numids:[4]})">Get Alsa Ctls numids:[4]</button></li>
-    <li><button onclick="callbinder('alsacore','getctls', {devid:devid, quiet:quiet, numids:[1,2]})">Get Alsa Ctls numids:[1,2]</button></li>
-    <li><button onclick="callbinder('alsacore','getctls', {devid:devid, quiet:quiet, numids:17})">Get Alsa Ctl numids:17</button></li>
+    <li><button onclick="callbinder('alsacore','getctl', {devid:sndcard, mode:mode})">Get all Alsa Ctls</button></li>
+    <li><button onclick="callbinder('alsacore','getctl', {devid:sndcard, mode:mode, numids:[6]})">Get Alsa Ctls numids:[6]</button></li>
+    <li><button onclick="callbinder('alsacore','getctl', {devid:sndcard, mode:mode, numids:[1,2]})">Get Alsa Ctls numids:[1,2]</button></li>
+    <li><button onclick="callbinder('alsacore','getctl', {devid:sndcard, mode:mode, numids:17})">Get Alsa Ctl numids:17</button></li>
     <br>    
-    <li><button onclick="callbinder('alsacore','setctls', {devid:devid, quiet:quiet, numids:[[17,20]]})">Set Alsa Ctl numid:[[17,20]]</button></li>
-    <li><button onclick="callbinder('alsacore','setctls', {devid:devid, quiet:quiet, numids:[{id:17,val:50}]})">Set Alsa Ctl numid:[{id:17,val:50}]}</button></li>
-    <li><button onclick="callbinder('alsacore','setctls', {devid:devid, quiet:quiet, numids:[[1,[20,20]]]})">Set Alsa Ctl  numids:[[1,[20,20]]]</button></li>
-    <li><button onclick="callbinder('alsacore','setctls', {devid:devid, quiet:quiet, numids:[{id:1,val:[50,50]}]})">Set Alsa Ctl numids:[{id:1,val:[50,50]}]</button></li>
-    <li><button onclick="callbinder('alsacore','setctls', {devid:devid, quiet:quiet, numids:[{id:1,val:[50,50]}, {id:17,val:50,50}]})">Set Alsa Ctl numids:[{id:1,val:[50,50]}, {id:17,val:50,50}]</button></li>
+    <li><button onclick="callbinder('alsacore','setctl', {devid:sndcard, mode:mode, numids:[[17,20]]})">Set Alsa Ctl numid:[[17,20]]</button></li>
+    <li><button onclick="callbinder('alsacore','setctl', {devid:sndcard, mode:mode, numids:[{id:17,val:50}]})">Set Alsa Ctl numid:[{id:17,val:50}]}</button></li>
+    <li><button onclick="callbinder('alsacore','setctl', {devid:sndcard, mode:mode, numids:[[1,[20,20]]]})">Set Alsa Ctl  numids:[[1,[20,20]]]</button></li>
+    <li><button onclick="callbinder('alsacore','setctl', {devid:sndcard, mode:mode, numids:[{id:1,val:[50,50]}]})">Set Alsa Ctl numids:[{id:1,val:[50,50]}]</button></li>
+    <li><button onclick="callbinder('alsacore','setctl', {devid:sndcard, mode:mode, numids:[{id:1,val:[50,50]}, {id:17,val:50,50}]})">Set Alsa Ctl numids:[{id:1,val:[50,50]}, {id:17,val:50,50}]</button></li>
     <br>    
-    <li><button onclick="callbinder('alsacore','ucmquery', {devid:devid, quiet:quiet})">List UCM verbs</button></li>
-    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:devid, quiet:quiet, verb:'HiFi'})">Set UCM HiFi</button></li>
-    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:devid, quiet:quiet, verb:'HiFi', dev:'Headphone'})">Set UCM HiFi+Headphone</button></li>
-    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:devid, quiet:quiet, verb:'HiFi', dev:'Headphone', mod:'RecordMedia'})">Set UCM HiFi+Headphone+RecordMedia</button></li>
+    <li><button onclick="callbinder('alsacore','ucmquery', {devid:sndcard, mode:mode})">List UCM verbs</button></li>
+    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:sndcard, mode:mode, verb:'HiFi'})">Set UCM HiFi</button></li>
+    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:sndcard, mode:mode, verb:'HiFi', dev:'Headphone'})">Set UCM HiFi+Headphone</button></li>
+    <li><button onclick="callbinder('alsacore','ucmset'  , {devid:sndcard, mode:mode, verb:'HiFi', dev:'Headphone', mod:'RecordMedia'})">Set UCM HiFi+Headphone+RecordMedia</button></li>
     <br>    
-    <li><button onclick="callbinder('alsacore','ucmget'  , {devid:devid, quiet:quiet, values:['OutputDspName','PlaybackPCM','CapturePCM']})">Get UCM OutputDspName+PlaybackPCM+CapturePCM (SET UCM)</button></li>
+    <li><button onclick="callbinder('alsacore','ucmget'  , {devid:sndcard, mode:mode, values:['OutputDspName','PlaybackPCM','CapturePCM']})">Get UCM OutputDspName+PlaybackPCM+CapturePCM (SET UCM)</button></li>
     <br>    
-    <li><button onclick="callbinder('alsacore','subscribe', {devid:devid})">Subscribe AlsaCtl Events</button></li>
+    <li><button onclick="callbinder('alsacore','subscribe', {devid:sndcard})">Subscribe AlsaCtl Events</button></li>
     <br>
     </ol>
     
     <div id="main" style="visibility:hidden">
     <ol>
-    <li>Question <div id="question"></div>
-    <li>Response <div id="output"></div>
-    <li>Events: <div id="outevt"></div>
+    <li>Question <pre id="question"></pre>
+    <li>Response <pre id="output"></pre>
+    <li>Events:  <pre id="outevt"></pre>
     </ol>
     </div>    
diff --git a/htdocs/alsa-hal.html b/htdocs/alsa-hal.html
index ce48ff3..7a8655c 100644
--- a/htdocs/alsa-hal.html
+++ b/htdocs/alsa-hal.html
@@ -1,7 +1,7 @@
 <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>
@@ -9,29 +9,40 @@
     
 <body onload="init('hal_registry','alsacore', 'hallist')">
         
-<b> references</b>
-    
     <h1>Simple AlsaHAL tests</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(halapi,'listctls')">List Selected HAL Controls </button></li>
-    <li><button onclick="callbinder(halapi,'getctls', {label:'Master_Playback_Volume'})">Get  {label:'Master_Playback_Volume'}</button></li>
-    <li><button onclick="callbinder(halapi,'getctls', [{tag:4},{tag:5}])">Get[{tag:4},{tag:5}]</button></li>
-    <li><button onclick="callbinder(halapi,'getctls', [4,5])">Get [4,5]</button></li>
+    <li><button onclick="callbinder(sndcard,'listctls')">List Selected HAL Controls </button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-get', {label:'Master_Playback_Volume'})">Get  {label:'Master_Playback_Volume'}</button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-get', [{tag:4},{tag:5}])">Get[{tag:4},{tag:5}]</button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-get', [4,5])">Get [4,5]</button></li>
+    <br>
+    <li><button onclick="callbinder(sndcard,'ctl-set', {label:'Master_Playback_Volume', value=[50]})">Set {label:'Master_Playback_Volume', value=[50]}</button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-set', [{tag:4, value:25},{tag:5, value:25}])">Set[{tag:4, value:25},{tag:5, value:25}]</button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-set', [{tag:4, value:[55,45]},{tag:5, value:[45,55]}])">Set[{tag:4, value:[55,45]},{tag:5, value:[45,55]}]]</button></li>
+    <li><button onclick="callbinder(sndcard,'ctl-set', [4,5])">Set [4,5]</button></li>
     <br>
     </ol>
     
     <div id="main" style="visibility:hidden">
     <ol>
-    <li>Question <div id="question"></div>
-    <li>Response <div id="output"></div>
-    <li>Events: <div id="outevt"></div>
+    <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
index 79ab114..c31282a 100644
--- a/htdocs/audio-logic.html
+++ b/htdocs/audio-logic.html
@@ -1,29 +1,9 @@
 <html>
 <head>
-    <title>Hello world test</title>
+    <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>
-    
-<body onload="init();">
-    <h1>Hello world test</h1>
-    <button id="connected">Binder WS Fail</button></li>
-    <br>
-    <ol>
-    <li><button onclick="callbinder('audio','open',{sndname: sndname})">Open SndCard</button></li>
-    <br>
-    <li><button onclick="callbinder('audio','setvol', {pcm:'master', vol='+10'})">Increase +10 Master</button></li>
-    <li><button onclick="callbinder('audio','setvol', {pcm:'master', vol='-10'})">Decrease -10 Master</button></li>
-    <li><button onclick="callbinder('audio','setvol', {pcm:'master', vol='%50'})">SetVol %50 Master</button></li>
-    <li><button onclick="callbinder('audio','getvol', {pcm:'master'})">GetVolume Master</button></li>
-    <br>
-    <li><button onclick="callbinder('audio','monitor')">Monitor LowLevel Events</button></li>
-    <li><button onclick="callbinder('audio','subscribe')">Subscribe AudioBinding Events</button></li>
-    <br>
-    <li><button onclick="callbinder('audio','close')">Close SndCard</button></li>
+</head>
 
-    <br>
-    <div id="main" style="visibility:hidden">
-    Server says... <div id="output"></div>
-    Events: <div id="outevt"></div>
-    </div>    
+ToBeDone
\ No newline at end of file
-- 
cgit 1.2.3-korg