cwIo.h/cpp, cwIoTest.h/cpp, html/ioTest.* : Many changes and additions to support first working Ui and audio subsystem.

cwIo.h

@@ -6,6 +6,7 @@
 #include "cwSerialPortDecls.h"
 #include "cwAudioDeviceDecls.h"
 #include "cwSocketDecls.h"
+#include "cwUiDecls.h"
 
 namespace cw
 {
@@ -20,7 +21,8 @@ namespace cw
      kMidiTId,
      kAudioTId,
      kSockTid,
-     kWebSockTId
+     kWebSockTId,
+     kUiTId
     };
 
     typedef struct serial_msg_str
@@ -37,17 +39,31 @@ namespace cw
 
     typedef audio::device::sample_t sample_t;
 
+    typedef struct audio_group_dev_str
+    {
+      const char*                 name;    // Audio device name
+      unsigned                    devIdx;  // Audio device index
+      unsigned                    chCnt;   // Count of audio channels on this device
+      unsigned                    cbCnt;   // Count of device driver callbacks
+      std::atomic_uint            readyCnt;// Used internally do not read or write.        
+      struct audio_group_dev_str* link;    // 
+    } audio_group_dev_t;
+    
     typedef struct audio_msg_str
     {
-      unsigned      iDevIdx;
+      unsigned           groupId;       // Unique group id
-      sample_t**    iBufArray;
+      double             srate;         // Group sample rate.
-      unsigned      iBufChCnt;
+      unsigned           dspFrameCnt;   // Count of samples in each buffer pointed to by iBufArray[] and oBufArray[]
-      time::spec_t* iTimeStampPtr;
       
-      unsigned      oDevIdx;
+      sample_t**         iBufArray;     // Array of ptrs to buffers of size bufSmpCnt
-      sample_t**     oBufArray;
+      unsigned           iBufChCnt;     // Count of elements in iBufArray[]
-      unsigned      oBufChCnt;
+      time::spec_t*      iTimeStampPtr; // 
-      time::spec_t* oTimeStampPtr;
+      audio_group_dev_t* iDevL;         // Linked list of input devices which map directly to channels in iBufArray[]
+      
+      sample_t**         oBufArray;     //
+      unsigned           oBufChCnt;     //
+      time::spec_t*      oTimeStampPtr; //
+      audio_group_dev_t* oDevL;         // Linked list of output devices which map directly to channels in oBufArray[]
       
     } audio_msg_t;
 
@@ -61,37 +77,63 @@ namespace cw
       const struct sockaddr_in* srcAddr;
     } socket_msg_t;
 
+    typedef struct ui_msg_str
+    {
+      ui::opId_t         opId;
+      unsigned           wsSessId;
+      unsigned           parentAppId;
+      unsigned           uuId;
+      unsigned           appId;
+      const ui::value_t* value;
+    } ui_msg_t;
+
     typedef struct msg_str
     {
       unsigned tid;
       union
       {
-        const serial_msg_t*  serial;
+        serial_msg_t*  serial;
-        const midi_msg_t*    midi;
+        midi_msg_t*    midi;
-        const audio_msg_t    audio;
+        audio_msg_t*   audio;
-        const socket_msg_t   sock;
+        socket_msg_t*  sock;
+        ui_msg_t      ui;
       } u;
     } msg_t;
     
-    typedef void(*cbFunc_t)( void* arg, const msg_t* m );
+    typedef rc_t (*cbFunc_t)( void* arg, const msg_t* m );
       
     rc_t create(
       handle_t&             h,
-      const char* cfgStr,      // configuration information as text
+      const object_t*       cfg, // configuration object
       cbFunc_t              cbFunc,
       void*                 cbArg,
-      const char* cfgLabel="io" );
+      const ui::appIdMap_t* mapA = nullptr,
+      unsigned              mapN = 0,
+      const char*           cfgLabel = "io" );
     
     rc_t destroy( handle_t& h );
 
     rc_t start( handle_t h );
     rc_t pause( handle_t h );
+    rc_t stop(  handle_t h );
+    rc_t exec(  handle_t h );
+    bool isShuttingDown( handle_t h );
+
+    //----------------------------------------------------------------------------------------------------------
+    //
+    // Serial
+    //
 
     unsigned    serialDeviceCount( handle_t h );
     const char* serialDeviceName(  handle_t h, unsigned devIdx );
     unsigned    serialDeviceIndex( handle_t h, const char* name );
     rc_t        serialDeviceSend(  handle_t h, unsigned devIdx, const void* byteA, unsigned byteN );
     
+    //----------------------------------------------------------------------------------------------------------
+    //
+    // MIDI
+    //
+    
     unsigned    midiDeviceCount(     handle_t h );
     const char* midiDeviceName(      handle_t h, unsigned devIdx );
     unsigned    midiDeviceIndex(     handle_t h, const char* devName );
@@ -101,6 +143,11 @@ namespace cw
     rc_t        midiDeviceSend(      handle_t h, unsigned devIdx, unsigned portIdx, uint8_t status, uint8_t d0, uint8_t d1 );
 
 
+    //----------------------------------------------------------------------------------------------------------
+    //
+    // Audio
+    //
+    
     unsigned    audioDeviceCount(          handle_t h );
     unsigned    audioDeviceLabelToIndex(   handle_t h, const char* label );
     const char* audioDeviceLabel(          handle_t h, unsigned devIdx );
@@ -123,12 +170,19 @@ namespace cw
     rc_t        audioDeviceChannelSetGain( handle_t h, unsigned devIdx, unsigned chIdx, unsigned dirFl, double gain );
     double      audioDeviceChannelGain(    handle_t h, unsigned devIdx, unsigned chIdx, unsigned dirFl );
 
-    rc_t        audioDeviceStart(          handle_t h, unsigned devIdx );
+    unsigned    audioGroupCount( handle_t h );
-    rc_t        audioDeviceStop(           handle_t h, unsigned devIdx );
+    const char* audioGroupLabel( handle_t h, unsigned groupIdx );
-    bool        audioDeviceIsStarted(      handle_t h, unsigned devIdx );
+    unsigned    audioGroupId(    handle_t h, unsigned groupIdx );
+    rc_t        audioGroupSetId( handle_t h, unsigned groupIdx, unsigned groupId );
 
     
+    //----------------------------------------------------------------------------------------------------------
+    //
+    // Socket
+    //
+    
     rc_t socketSetup( handle_t h, unsigned timeOutMs, unsigned recvBufByteN, unsigned maxSocketN );
+    
     rc_t socketCreate(
       handle_t           h,
       unsigned           userId,
@@ -151,8 +205,57 @@ namespace cw
 
     
 
+    //----------------------------------------------------------------------------------------------------------
+    //
+    // UI
+    //
 
 
+    // Find id's associated with elements.
+    unsigned    uiFindElementAppId(  handle_t h, unsigned parentUuId, const char* eleName );  
+    unsigned    uiFindElementUuId(   handle_t h, unsigned parentUuId, const char* eleName );
+    unsigned    uiFindElementUuId(   handle_t h, unsigned parentUuId, unsigned appId );
+    const char* uiFindElementName(   handle_t h, unsigned uuId );
+    unsigned    uiFindElementAppId(  handle_t h, unsigned uuId );
+    
+    // Return the uuid of the first matching 'eleName'.
+    unsigned    uiFindElementUuId( handle_t h, const char* eleName );
+
+    rc_t uiCreateFromObject( handle_t h, const object_t* o, unsigned wsSessId, unsigned parentUuId=kInvalidId, const char* eleName=nullptr);
+    rc_t uiCreateFromFile(   handle_t h, const char* fn,    unsigned wsSessId, unsigned parentUuId=kInvalidId);
+    rc_t uiCreateFromText(   handle_t h, const char* text,  unsigned wsSessId, unsigned parentUuId=kInvalidId);
+    rc_t uiCreateDiv(        handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    rc_t uiCreateTitle(      handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    rc_t uiCreateButton(     handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    
+    // Create check: w/o value. The value will be read from the engine via the UI 'echo' event.
+    // Create check: w/ value. The value will be sent to the engine as the new value of the associated varaible.
+    rc_t uiCreateCheck(      handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    rc_t uiCreateCheck(      handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, bool value );
+    
+    rc_t uiCreateSelect(     handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    rc_t uiCreateOption(     handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    
+    rc_t uiCreateStr(        handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+    rc_t uiCreateStr(        handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, const char* value );
+    
+    rc_t uiCreateNumbDisplay(handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, unsigned decPl );    
+    rc_t uiCreateNumbDisplay(handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, unsigned decPl, double value );
+    
+    rc_t uiCreateNumb(       handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, double minValue, double maxValue, double stepValue, unsigned decPl );
+    rc_t uiCreateNumb(       handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, double minValue, double maxValue, double stepValue, unsigned decPl, double value );
+    
+    rc_t uiCreateProg(       handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, double minValue, double maxValue );
+    rc_t uiCreateProg(       handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title, double minValue, double maxValue, double value );
+    
+    rc_t uiCreateText(       handle_t h, unsigned& uuIdRef, unsigned wsSessId, unsigned parentUuId, const char* eleName, unsigned appId, const char* clas, const char* title );
+
+    // Register parent/child/name app id's 
+    rc_t uiRegisterAppIdMap(  handle_t h, const ui::appIdMap_t* map, unsigned mapN );
+    
+    // Send a value to the user interface
+    template< typename T >
+      rc_t      uiValueToUI( handle_t h, unsigned wsSessId, unsigned uuId, const T& value );
     
     
   }

cwIoTest.cpp

@@ -2,9 +2,11 @@
 #include "cwLog.h"
 #include "cwCommonImpl.h"
 #include "cwMem.h"
+#include "cwObject.h"
 #include "cwTime.h"
 #include "cwMidiDecls.h"
 #include "cwMidi.h"
+#include "cwUiDecls.h"
 #include "cwIo.h"
 #include "cwIoTest.h"
 
@@ -12,65 +14,221 @@ namespace cw
 {
   namespace io
   {
-    void testCb( void* arg, const msg_t* m )
+    // Application Id's for UI elements
+    enum
     {
+      // Resource Based elements
+      kPanelDivId,
+      kQuitBtnId,
+      kPanelBtn1Id,
+      kPanelCheck1Id,
+      kPanelBtn2Id,
+      kPanelCheck2Id,
+      kPanelFloaterId,
+      kSelId,
+      kOpt1Id,
+      kOpt2Id,
+      kOpt3Id
+    };
+
+    // Application Id's for the resource based UI elements.
+    ui::appIdMap_t mapA[] =
+    {
+      { ui::kRootAppId,  kPanelDivId, "panelDivId" },
+      { kPanelDivId, kQuitBtnId,      "quitBtnId" },
+      { kPanelDivId, kPanelBtn1Id,    "myBtn1Id" },
+      { kPanelDivId, kPanelCheck1Id,  "myCheck1Id" },
+      { kPanelDivId, kPanelBtn2Id,    "myBtn2Id" },
+      { kPanelDivId, kPanelCheck2Id,  "myCheck2Id" },
+      { kPanelDivId, kPanelFloaterId, "myFloater" },
+      { kPanelDivId, kSelId,          "mySel" },
+      { kSelId,      kOpt1Id,         "myOpt1" },
+      { kSelId,      kOpt2Id,         "myOpt2" },
+      { kSelId,      kOpt3Id,         "myOpt3" },     
+    };
+
+    unsigned mapN = sizeof(mapA)/sizeof(mapA[0]);
+    
+    // Application object
+    typedef struct app_str
+    {
+      handle_t ioH;
+    } app_t;
+
+    rc_t _onUiInit(app_t* app, const ui_msg_t& m )
+    {
+      rc_t rc = kOkRC;
+      return rc;
     }
+
+    rc_t _onUiValue(app_t* app, const ui_msg_t& m )
+    {
+      rc_t rc = kOkRC;
+
+      switch( m.appId )
+      {
+        case kQuitBtnId:
+          io::stop( app->ioH );
+          break;
+      }
+      return rc;
+    }
+    
+    rc_t _onUiEcho(app_t* app, const ui_msg_t& m )
+    {
+      rc_t rc = kOkRC;
+      return rc;
+    }
+    
+    rc_t uiCb( app_t* app, const ui_msg_t& m )
+    {
+      rc_t rc = kOkRC;
+      
+      switch( m.opId )
+      {
+        case ui::kConnectOpId:
+          cwLogInfo("IO Test Connect: wsSessId:%i.",m.wsSessId);
+          break;
+          
+        case ui::kDisconnectOpId:
+          cwLogInfo("IO Test Disconnect: wsSessId:%i.",m.wsSessId);          
+          break;
+          
+        case ui::kInitOpId:
+          _onUiInit(app,m);
+          break;
+
+        case ui::kValueOpId:
+          _onUiValue( app, m );
+          break;
+
+        case ui::kEchoOpId:
+          _onUiEcho( app, m );
+          break;
+
+        case ui::kIdleOpId:
+          break;
+          
+        case ui::kInvalidOpId:
+          // fall through
+        default:
+          assert(0);
+          break;
+        
+      }
+
+      return rc;
+    }
+
+    rc_t audioCb( app_t* app, const audio_msg_t& m )
+    {
+      rc_t rc = kOkRC;
+
+      unsigned chN     = std::min(m.iBufChCnt,m.oBufChCnt);
+      unsigned byteCnt = m.dspFrameCnt * sizeof(sample_t);
+
+      // Copy the input to the output
+      for(unsigned i=0; i<chN; ++i)
+        if( m.oBufArray[i] != NULL )
+        {      
+          // the input channel is not disabled
+          if( m.iBufArray[i] != NULL )
+            memcpy(m.oBufArray[i], m.iBufArray[i], byteCnt);    
+          else
+            // the input channel is disabled but the output is not - so fill the output with zeros
+            memset(m.oBufArray[i], 0, byteCnt);
+        }
+        
+
+      
+      return rc;      
+    }
+
+    // The main application callback
+    rc_t testCb( void* arg, const msg_t* m )
+    {
+      rc_t rc = kOkRC;
+      app_t* app = reinterpret_cast<app_t*>(arg);
+      
+      switch( m->tid )
+      {
+        case kSerialTId:
+          break;
+          
+        case kMidiTId:
+          break;
+          
+        case kAudioTId:
+          if( m->u.audio != nullptr )
+            rc = audioCb(app,*m->u.audio);
+          break;
+          
+        case kSockTid:
+          break;
+          
+        case kWebSockTId:
+          break;
+          
+        case kUiTId:
+          rc = uiCb(app,m->u.ui);
+          break;
+
+        default:
+          assert(0);
+        
+      }
+
+      return rc;
+    }
+
+    void report( handle_t h )
+    {
+      for(unsigned i=0; i<serialDeviceCount(h); ++i)
+        printf("serial: %s\n", serialDeviceName(h,i));
+
+      for(unsigned i=0; i<midiDeviceCount(h); ++i)
+        for(unsigned j=0; j<2; ++j)
+        {
+          bool     inputFl = j==0;
+          unsigned m       = midiDevicePortCount(h,i,inputFl);
+          for(unsigned k=0; k<m; ++k)
+            printf("midi: %s: %s : %s\n", inputFl ? "in ":"out", midiDeviceName(h,i), midiDevicePortName(h,i,inputFl,k));
+        
+        }
+
+      for(unsigned i=0; i<audioDeviceCount(h); ++i)
+        printf("audio: %s\n", audioDeviceLabel(h,i));
+            
+    }
+
   }
 }
 
 
-cw::rc_t cw::io::test()
+cw::rc_t cw::io::test( const object_t* cfg )
 {
-
-  const char* cfgStr = R"( 
-     {
-        io: {
-              serial: [
-                {  
-                   name:   "port1",
-                   device: "/dev/ttyACM0",
-                   baud:   38400,
-                   bits:   8,
-                   stop:   1,
-                   parity: no,
-                   pollPeriodMs: 50
-                }
-              ]
-              
-              midi: {
-                 parserBufByteN: 1024,
-              }
-          
-              audio: {
-                  meterMs: 50,
-                  
-                  deviceL: [
-                  {
-                    enableFl:   true,
-                    name:       "Default",
-                    device:     "HDA Intel PCH CS4208 Analog",
-                    srate:       48000,
-                    dspFrameCnt:    64,
-                    cycleCnt:        3   
-                  }
-                ]
-            }
-      })";
-    
-    
-    handle_t h;
-
   rc_t rc;
+  app_t app = {}; 
   
-  if((rc = create(h,cfgStr,testCb,nullptr)) != kOkRC )
+  if((rc = create(app.ioH,cfg,testCb,&app,mapA,mapN)) != kOkRC )
     return rc;
 
-  char c;
+  //report(app.ioH);
-  while((c = getchar()) != 'q')
+
+  if((rc = start(app.ioH)) != kOkRC )
+    cwLogError(rc,"Test app start failed.");
+  else
   {    
+    while( !isShuttingDown(app.ioH))
+    {
+      exec(app.ioH);
+      sleepMs(50);
+    }
   }
 
-  destroy(h);
+  
+  destroy(app.ioH);
+  printf("ioTest Done.\n");
   return rc;
   
 }

cwIoTest.h

@@ -6,7 +6,7 @@ namespace cw
 {
   namespace io
   {
-    rc_t test();
+    rc_t test( const object_t* cfg);
   }
 }
 

html/ioTest/css/ui.css

@@ -0,0 +1,75 @@
+
+body {
+    background-color: LightCyan;
+}
+
+
+.title_disconnected {
+    color: red;
+}
+
+.title_connected {
+    color: green;
+}
+
+input, label, button, select {
+    font-family: sans-serif;
+    font-size: 10px;
+    height: 20px;
+}
+
+
+div {
+    /*border: 1px solid black;    */
+    background-color: LightSteelBlue;
+}
+
+div p {
+    font-family: sans-serif;
+    font-size: 12px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    background-color: LightSteelBlue;
+}
+
+label {
+    /*border: 1px solid red;*/
+    width: 50px;
+    padding-left: 10px;
+    margin-top: 3px;
+}
+
+
+.uiCtlDiv {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: LightBlue;
+}
+
+.uiCtlDiv input {
+    background-color: PowderBlue;
+}
+
+.uiNumberDiv input {
+    width: 50px;
+}
+
+.uiPanel {
+    background-color: LightBlue;
+}
+
+.uiRow {    
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: LightBlue;
+}
+
+.uiCol  {    
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: LightBlue;
+}
+

html/ioTest/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>UI Test App</title>
+    <script type="text/javascript" src="js/ui.js"></script>
+    <link href="css/ui.css" rel="stylesheet">
+
+    <script text="text/javascript">
+      window.addEventListener("load",main, false )
+    </script>
+    
+  </head>
+  <body>
+
+    <div id="appTitleDiv" class="uiRow">
+      <p id="appTitleId">UI Test:</p>
+      <p id="connectTitleId">Disconnected</p>
+    </div>
+    
+    <div id="0" class="uiAppDiv">
+    </div>
+ 
+  </body>
+</html>

html/ioTest/js/ui.js

@@ -0,0 +1,818 @@
+var _ws = null;
+var _rootId = "0";
+var _nextEleId   = 0;
+
+function set_app_title( suffix, className )
+{
+    var ele = document.getElementById('connectTitleId');
+    ele.innerHTML = suffix
+    ele.className = className
+}
+
+
+function uiOnError( msg, r)
+{
+    console.log("Error:" + msg);
+}
+
+function uiGetParent( r )
+{
+    parent_ele = document.getElementById(r.parent_id);
+    
+    if( parent_ele == null )
+    {
+	uiOnError("Parent not found. parent_id:" + r.parent_id,r);
+    }
+
+    return parent_ele;
+}
+
+function uiCreateEle( r )
+{
+    var parent_ele;
+    
+    if((parent_ele = uiGetParent(r)) != null )
+    {    
+	ele            = document.createElement(r.ele_type)
+	ele.id         = r.ele_id;
+	ele.className  = r.value;
+	
+	parent_ele.appendChild(ele)
+    }
+}
+
+function uiRemoveChildren( r )
+{
+    ele = document.getElementById(r.ele_id)
+    
+    while (ele.firstChild)
+    {
+	ele.removeChild(ele.firstChild);
+    }  
+}
+
+function uiDivCreate( r )
+{ uiCreateEle(r) }
+
+function uiLabelCreate( r )
+{
+    var parent_ele;
+    
+    if((parent_ele = uiGetParent(r)) != null )
+    {
+	ele            = document.createElement("label")
+	ele.htmlFor    = r.ele_id
+	ele.innerHTML  = r.value;
+	parent_ele.appendChild(ele)
+    }
+    
+}
+
+function uiSelectCreate( r )
+{
+    uiCreateEle(r)
+}
+
+function uiSelectClear( r )
+{ uiRemoveChildren(r) }
+
+function uiSelectInsert( r )
+{
+    var select_ele;
+    
+    if((select_ele = uiGetParent(r)) != null )    
+    {
+	var option    = document.createElement('option');
+
+	option.id        = r.ele_id;
+	option.innerHTML = r.value;
+	option.value     = r.ele_id;
+	option.onclick   = function() { uiOnSelectClick(this) }
+	
+	select_ele.appendChild(option)
+    }
+}
+
+function uiSelectChoose( r )
+{
+    var select_ele;
+    
+    if((select_ele = uiGetParent(r)) != null )    
+    {
+	if( select_ele.hasChildNodes())
+	{
+	    var children = select_ele.childNodes
+	    for(var i=0; i<children.length; i++)
+	    {
+		if( children[i].id == r.ele_id )
+		{
+		    select_ele.selectedIndex = i
+		    break;
+		}	
+	    }
+	}
+    }
+}
+
+function uiOnSelectClick( ele )
+{
+    cmdstr = "mode ui ele_type select op choose parent_id "+ele.parentElement.id+" option_id " + ele.id
+    websocket.send(cmdstr);
+
+}
+
+function uiNumberOnKeyUp( e )
+{
+    if( e.keyCode == 13 )
+    {
+	//console.log(e)
+	cmdstr = "mode ui ele_type number op change parent_id "+e.srcElement.parentElement.id+" ele_id " + e.srcElement.id + " value " + e.srcElement.value    
+	websocket.send(cmdstr);
+    }
+}
+
+
+function uiNumberCreate( r )
+{
+    var parent_ele;
+    
+    if((parent_ele = uiGetParent(r)) != null )        
+    {
+	ele    = document.createElement("input")
+	ele.id = r.ele_id
+	ele.setAttribute('type','number')
+	ele.addEventListener('keyup',uiNumberOnKeyUp)
+	parent_ele.appendChild(ele)
+    }
+}
+
+function uiNumberSet( r )
+{
+    var ele;
+
+    //console.log("ele_id:" + r.ele_id + " parent_id:" + r.parent_id + " value:" + r.value)
+    
+    if((ele = document.getElementById(r.parent_id)) != null)
+    {
+	switch( r.ele_id )
+	{
+	    case "0":  ele.min   = r.value; break;
+	    case "1":  ele.max   = r.value; break;
+	    case "2":  ele.step  = r.value; break;
+	    case "3":  ele.value = r.value; break;
+	}
+    }
+}
+
+
+
+function dom_child_by_id( parentEle, child_id )
+{
+    var childrenL = parentEle.children
+    for(var i=0; i<childrenL.length; i++)
+    {
+	if( childrenL[i].id == child_id )
+	{
+	    return childrenL[i];
+	}
+    }
+    return null;
+}
+
+function dom_set_option_by_text( ele_id, text )
+{
+    var ele = dom_id_to_ele(ele_id);
+    
+    for (var i = 0; i < ele.options.length; i++)
+    {    
+	if (ele.options[i].text === text)
+	{
+            ele.selectedIndex = i;
+            break;
+	}
+    }
+}
+
+
+
+function dom_set_number( ele_id, val )
+{
+    dom_id_to_ele(ele_id).value = val
+}
+
+
+//==============================================================================
+
+function dom_id_to_ele( id )
+{ return document.getElementById(id); }
+
+function dom_set_checkbox( ele_id, fl )
+{ dom_id_to_ele(ele_id).checked = fl }
+
+function dom_get_checkbox( ele_id )
+{ return dom_id_to_ele(ele_id).checked }
+
+function dom_create_ele( ele_type )
+{
+    ele = document.createElement(ele_type);
+    return ele
+}
+
+//==============================================================================
+
+function ui_error( msg )
+{
+    console.log("Error: " + msg )
+}
+
+function ui_send_value( ele, typeId, value )
+{
+    ws_send("value " + ele.id + " " + typeId + " : " + value)  
+}
+
+function ui_send_bool_value(   ele, value ) { ui_send_value(ele,'b',value); }
+function ui_send_int_value(    ele, value ) { ui_send_value(ele,'i',value); }
+function ui_send_float_value(   ele, value ) { ui_send_value(ele,'f',value); }
+function ui_send_string_value( ele, value ) { ui_send_value(ele,'s',value); }
+
+function ui_send_echo( ele )
+{
+    ws_send("echo " + ele.id ) 
+}
+
+function ui_print_children( eleId )
+{
+    var childrenL = dom_id_to_ele(eleId).children
+    
+    for(var i=0; i<childrenL.length; i++)
+    {      
+	console.log( childrenL[i] )
+    }      
+}
+
+function ui_get_parent( parentId )
+{
+    if( parentId==null || parentId.trim().length == 0 )
+	parentId = _rootId
+    
+    parent_ele = dom_id_to_ele(parentId);
+    
+    if( parent_ele == null )
+    {
+	ui_error("Parent element id: " + parentId + " not found.")
+    }
+
+    return parent_ele;  
+}
+
+
+function ui_create_ele( parent_ele, ele_type, d, dfltClassName )
+{
+    // create the ctl object
+    var ele = dom_create_ele(ele_type);
+
+    if( ele == null )
+	ui_error(ele_type +" element create failed.");
+    else
+    {
+	ele.id = d.uuId;
+
+	if(d.hasOwnProperty('className') )
+	    ele.className = d.className;
+	else
+	    ele.className = dfltClassName;
+
+	if(d.hasOwnProperty('appId'))
+	    ele.appId = d.appId;
+	else
+	    ele.appId = null;
+
+	//console.log("Created: " + ele_type  + " parent:" + d.parentUuId + " id:" + ele.id + " appId:" + ele.appId)
+	
+	parent_ele.appendChild(ele);
+
+	
+    }
+    return ele
+}
+
+function ui_create_ctl( parent_ele, ele_type, label, d, dfltEleClassName )
+{
+    // create an enclosing div
+    var div_ele = dom_create_ele("div");
+
+    div_ele.className = "uiCtlDiv " + dfltEleClassName + "Div"
+
+    parent_ele.appendChild( div_ele );
+    
+    var label_ele = div_ele
+    
+    // if label is not null then create an enclosing 'label' element
+    if( label != null )
+    {
+	label = label.trim();
+
+	if( label.length > 0)
+	{
+	    label_ele = dom_create_ele("label");
+
+	    label_ele.innerHTML = label;
+	    
+	    div_ele.appendChild(label_ele)
+	}
+    }
+
+    return ui_create_ele( div_ele, ele_type, d, dfltEleClassName );
+}
+
+function ui_create_div( parent_ele, d )
+{
+    var div_ele =  ui_create_ele( parent_ele, "div", d, "uiDiv" );
+
+    if( div_ele != null )
+    {
+	
+	if( d.title !=  null )
+	{
+	    var title = d.title.trim()
+
+	    if( title.length > 0 )
+	    {
+		var p_ele = dom_create_ele("p")
+	    
+		p_ele.innerHTML = title
+	
+		div_ele.appendChild( p_ele )
+	    }
+	}
+    }
+    
+    return div_ele;
+}
+
+function ui_create_panel_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiPanel"
+
+    return div_ele
+}
+
+function ui_create_row_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiRow"
+
+    return div_ele
+}
+
+function ui_create_col_div( parent_ele, d )
+{
+    d.type = "div"
+    var div_ele =  ui_create_div( parent_ele, d );
+
+    if( !d.hasOwnProperty('className') )
+	div_ele.className = "uiCol"
+
+    return div_ele
+}
+
+
+function ui_create_title( parent_ele, d )
+{
+    var ele = ui_create_ele( parent_ele, "label", d, "uiTitle" );
+    
+    if( ele != null )
+    {
+	ele.innerHTML = d.title;
+    }
+    
+    return ele;
+}
+
+function ui_create_button( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "button", null, d, "uiButton" );
+
+    if( ele != null )
+    {
+	ele.innerHTML = d.title;
+	ele.onclick   = function() { ui_send_int_value(this,1); }
+    }
+    
+    return ele;
+}
+
+function ui_create_check( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "input", d.title, d, "uiCheck" )
+    
+    if( ele != null )
+    {
+	ele.type = "checkbox";
+
+	ele.onclick = function() {  ui_send_bool_value(this,dom_get_checkbox(this.id)); }
+
+	if( !d.hasOwnProperty('value') )
+	    ui_send_echo(ele)
+	else
+	{
+	    dom_set_checkbox(ele.id, d.value );
+	    ui_send_bool_value(ele,dom_get_checkbox(ele.id))
+	}
+
+    }
+    return ele;
+}
+
+//
+// Note: The value of a 'select' widget is always set by the 'appId'
+// of the selected 'option'.  Likewise the 'appId' of the selected
+// option is returned as the value of the select widget.
+//
+function ui_on_select( ele )
+{
+    ui_send_int_value(ele,ele.options[ ele.selectedIndex ].appId);
+}
+
+function ui_select_set_from_option_app_id( sel_ele, option_appId )
+{
+    var i;
+    for(i=0; i<sel_ele.options.length; ++i)
+	if( sel_ele.options[i].appId == option_appId )
+        {
+	    sel_ele.selectedIndex = i;
+	    return;
+        }
+
+    ui_error("Select option index not found.");    
+}
+
+function ui_create_select( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "select", d.title, d, "uiSelect" );
+    ele.onchange = function() { ui_on_select(this) }
+
+    if( !d.hasOwnProperty('value') )
+    {
+	ui_send_echo(ele)
+    }
+    else
+    {
+	// Note that d.value is the appId of the default selected option
+	ele.defaultOptionAppId = d.value; 
+	ui_send_int_value(ele,ele.defaultOptionAppId)
+    }
+    
+    return ele;
+}
+
+function ui_create_option( parent_ele, d )
+{
+    var opt_ele = ui_create_ele( parent_ele, "option", d, "uiOption" );
+
+    if( opt_ele != null )
+    {
+	if(d.hasOwnProperty('className'))
+	    opt_ele.className = d.className;
+
+	opt_ele.innerHTML = d.title;
+
+	// d.value, if it exists, is a boolean indicating that this is the default option
+	var fl0 = d.hasOwnProperty('value') && d.value != 0;
+
+	// The parent 'select' element may also have been given the app id of the default option
+	// (and this option may be it)
+	var fl1 = parent_ele.hasOwnProperty('defaultOptionAppId') && parent_ele.defaultOptionAppId == ele.appId;
+    
+	if(fl0 || fl1 )
+	{
+	    parent_ele.selectedIndex = parent_ele.options.length-1;
+	}
+    }
+    
+    return opt_ele;
+}
+
+function ui_create_string( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "input", d.title, d, "uiString" );
+
+    if( ele != null )
+    {
+	ele.addEventListener('keyup', function(e) { if(e.keyCode===13){  ui_send_string_value(this, this.value); }} );
+
+	if( !d.hasOwnProperty('value') )
+	    ui_send_echo(ele);
+	else
+	{
+	    ele.value  = d.value;
+	    ui_send_string_value(ele,ele.value)
+	}
+	    
+    }
+
+    return ele;
+}
+
+function ui_number_keyup( e )
+{
+    if( e.keyCode===13 )
+    {
+	var ele = dom_id_to_ele(e.target.id)
+
+	if( ele != null )
+	{
+	    //console.log("min:"+ele.minValue+" max:"+ele.maxValue)
+
+	    var val = 0;
+	    if( ele.decpl == 0 )
+		val = Number.parseInt(ele.value)
+	    else
+		val = Number.parseFloat(ele.value)
+
+	    if( !(ele.minValue<=val && val<=ele.maxValue))
+		ele.style.borderColor = "red"
+	    else	
+	    {
+		ele.style.borderColor = ""
+
+		if( ele.decpl == 0 )
+		    ui_send_int_value(ele,ele.value);
+		else
+		    ui_send_float_value(ele,ele.value);
+	    }
+	}
+    }
+}
+
+function ui_create_number( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "input", d.title, d, "uiNumber" );
+    
+    if( ele != null )
+    {
+	ele.maxValue  = d.max;
+	ele.minValue  = d.min;
+	ele.stepValue = d.step;
+	ele.decpl     = d.decpl;
+	ele.addEventListener('keyup', ui_number_keyup );
+
+	if( d.hasOwnProperty('value') && d.min <= d.value && d.value <= d.max )
+	{
+	    
+	    ele.value     = d.value;
+	    if( d.decpl == 0 )
+		ui_send_int_value( ele, ele.value )
+	    else
+		ui_send_float_value( ele, ele.value )
+	}
+	else
+	{
+	    ui_send_echo(ele);
+	}
+    }
+    return ele;
+}
+
+function ui_set_progress( ele_id, value )
+{
+    var ele = dom_id_to_ele(ele_id);
+
+    ele.value = Math.round( ele.max * (value - ele.minValue) / (ele.maxValue - ele.minValue));
+}
+
+function ui_create_progress( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "progress", d.title, d, "uiProgress" );
+
+    if( ele != null )
+    {
+	ele.max      = 100;
+	ele.maxValue = d.max;
+	ele.minValue = d.min;
+	if( !d.hasOwnProperty('value') )
+	    ui_send_echo(ele);
+	else
+	{
+	    ui_set_progress( ele.id, d.value );
+	    ui_send_int_value( ele, ele.value );
+	}
+ 
+    }
+    return ele
+}
+
+function ui_set_value( d )
+{
+    //console.log(d)
+    var ele = dom_id_to_ele(d.uuId.toString())
+
+    if( ele == null )
+	console.log("ele not found");
+    else
+	if( !ele.hasOwnProperty("uiEleType") )
+	    console.log("No type");
+    
+    if( ele != null && ele.hasOwnProperty("uiEleType"))
+    {
+	//console.log("found: "+ele.uiEleType)
+	
+	switch( ele.uiEleType )
+	{
+	    case "div":
+	    break;
+
+	    case "title":
+	    ele.innerHTML = d.value
+	    break;
+
+	    case "button":	    
+	    break;
+
+	    case "check":
+	    dom_set_checkbox(ele.id,d.value)
+	    break;
+
+	    case "select":
+	    ui_select_set_from_option_app_id(ele,d.value)
+	    break;
+
+	    case "option":
+	    break;
+
+	    case "string":
+	    ele.value = d.value
+	    break;
+
+	    case "number":
+	    ele.value = d.value
+	    break;
+
+	    case "progress":
+	    ele.value = d.value
+	    break;
+	    
+	    default:
+	    ui_error("Unknown UI element type: " + d.type )
+	}
+    }
+}
+
+function ui_create( d )
+{
+    if( typeof(d.parentUuId) == "number")
+	d.parentUuId = d.parentUuId.toString()
+    
+    if( typeof(d.uuId) == "number" )
+	d.uuId = d.uuId.toString()
+    
+    
+    var parent_ele  = ui_get_parent(d.parentUuId);
+    var ele = null;
+    
+    if( parent_ele != null )
+    {    
+	switch( d.type )
+	{
+	    case "div":
+	    ele = ui_create_div( parent_ele, d )
+	    break;
+
+	    case "panel":
+	    ele = ui_create_panel_div( parent_ele, d )
+	    break;
+
+	    case "row":
+	    ele = ui_create_row_div( parent_ele, d )
+	    break;
+
+	    case "col":
+	    ele = ui_create_col_div( parent_ele, d )
+	    break;
+
+	    case "title":
+	    ele = ui_create_title( parent_ele, d )
+	    break;
+
+	    case "button":
+	    ele = ui_create_button( parent_ele, d )
+	    break;
+
+	    case "check":
+	    ele = ui_create_check( parent_ele, d )
+	    break;
+
+	    case "select":
+	    ele = ui_create_select( parent_ele, d );
+	    break;
+
+	    case "option":
+	    ele = ui_create_option( parent_ele, d );
+	    break;
+
+	    case "string":
+	    ele = ui_create_string( parent_ele, d );
+	    break;
+
+	    case "number":
+	    ele = ui_create_number( parent_ele, d );
+	    break;
+
+	    case "progress":
+	    ele = ui_create_progress( parent_ele, d );
+	    break;
+	    
+	    default:
+	    ui_error("Unknown UI element type: " + d.type )
+	}
+
+	if( ele != null )
+	{
+	    ele.uiEleType = d.type;
+	}
+
+    }
+}
+
+
+
+
+function ws_send( s )
+{
+    //console.log(s)
+    
+    _ws.send(s+"\0")
+}
+
+function ws_on_msg( jsonMsg )
+{
+    //console.log(jsonMsg)
+    
+    d = JSON.parse(jsonMsg.data);
+
+    switch( d.op )
+    {
+	case 'create':
+	ui_create( d )
+	break;
+
+	case 'value':
+	ui_set_value( d )
+	break;
+	
+	default:
+	ui_error("Unknown UI operation. " + d.op )
+    }
+
+}
+
+function ws_on_open()
+{
+    set_app_title( "Connected", "title_connected" );
+    _ws.send("init")
+}
+
+function ws_on_close()
+{
+    set_app_title( "Disconnected", "title_disconnected" );
+}
+
+function ws_form_url(urlSuffix)
+{
+    var pcol;
+    var u = document.URL;
+
+    pcol = "ws://";
+    if (u.substring(0, 4) === "http")
+	u = u.substr(7);
+
+    u = u.split("/");
+
+    return pcol + u[0] + "/" + urlSuffix;
+}
+
+function main()
+{
+    rootEle = dom_id_to_ele(_rootId);
+    rootEle.uuId = 0;
+    rootEle.id = _nextEleId;
+    _nextEleId += 1;
+
+    //console.log(ws_form_url(""))
+    
+    _ws = new WebSocket(ws_form_url(""),"ui_protocol")
+    
+    _ws.onmessage    = ws_on_msg
+    _ws.onopen       = ws_on_open 
+    _ws.onclose      = ws_on_close;
+
+    
+}
+

html/ioTest/ui.cfg

@@ -0,0 +1,66 @@
+{
+
+  parent: "uiDivId"
+
+  panel: {
+
+    name: "panelDivId",
+    title: "My resource based panel",
+
+    row: {
+         button:{ name: quitBtnId,   title:"Quit"  },    
+    },
+  
+    row: {
+         button:{ name: myBtn1Id,   title:"Push Me"  },
+    	 check:{  name: myCheck1Id, title:"Check Me", value:true },
+	 select:{ name: mySel,  title:"Select",
+	 	  children:
+	 	  {
+		    option:{ name: myOpt1, title:"Sel 1" },
+		    option:{ name: myOpt2, title:"Sel 2" },
+		    option:{ name: myOpt3, title:"Sel 3" }
+	 	  },
+	 },
+     },
+
+     row: {
+         button:{ name: myBtn2Id,   title:"Push 2"  },
+    	 check:{  name: myCheck2Id, title:"Check 2" },
+	 number:{ name: myFloater,  title:"Floater", min:0.0, max:12.34, step:0.1, decpl:4 },
+       }
+
+     },
+
+     panel: {
+       row: {
+
+         col: {
+	 title:"Bank 0",
+	 },
+	 
+       	 col: {
+	   title: "x",
+	   title:{ title:"mute" },
+	   title:{ title:"touch" },
+	   title:{ title:"fader" },
+         },
+
+	 col: {
+	   title:"0",
+	   check:{ name: mute0Chk },
+	   check:{ name: touch0Chk },
+	   number:{ name: fader0Numb,  min:0, max:1023, step:1, decpl:0 },	   
+	 },
+
+	 col: {
+	   title:"1",
+	   check:{ name: mute1Chk },
+	   check:{ name: touch1Chk },
+	   number:{ name: fader1Numb,  min:0, max:1023, step:1, decpl:0 },	   
+	 }
+       }
+   
+     }
+
+}