Added log and list control. Added 'set' action. Updated 'focus' handling.

html/uiTest/css/ui.css

@@ -87,6 +87,8 @@ label {
 
 .uiLogDiv label {
     width: 100%;
+    background-color: LightSteelBlue;
+
 }
 
 
@@ -96,8 +98,8 @@ label {
     flex-direction: column;
 
     height: 150px;
-    overflow-x: hidden; /* 'hidden' to remove scroll bar */
+    overflow-x: hidden; /* 'hidden' to remove x scroll bar */
-    overflow-y: scroll; 
+    overflow-y: auto; 
     width: 100%;
 
     background-color: PowderBlue;
@@ -105,6 +107,34 @@ label {
 }
 
 /* The log text */
-.uiLog pre {
+.uiLog pre {	
-	
+}
+
+
+/* outer list div - contains the list label and the list scroller */
+.uiListDiv {
+    display: flex;
+    flex-direction: column;
+
+    align-items: flex-start;     /* left justify */
+    align-content: flex-stretch; /* fill horizontal space */
+    
+}
+
+.uiListDiv label {
+    width: 100%;
+    background-color: LightSteelBlue;
+
+}
+
+.uiList {
+    display:flex;
+    flex-direction: column;
+    
+    height: 100px;
+    overflow-x: hidden; /* 'hidden' to remove scroll bar */
+    overflow-y: auto; 
+    width: 100%;
+
+    background-color: PowderBlue;    
 }

html/uiTest/js/ui.js

@@ -1,6 +1,8 @@
-var _ws = null;
+var _ws        = null;
-var _rootId = "0";
+var _rootId    = "0";
-var _nextEleId   = 0;
+var _nextEleId = 0;
+var _focusId   = null;
+var _focusVal  = null;
 
 function set_app_title( suffix, className )
 {
@@ -500,6 +502,21 @@ function ui_create_option( parent_ele, d )
     return opt_ele;
 }
 
+function _ui_on_focus( ele )
+{
+    _focusId  = ele.id;
+    _focusVal = ele.value;
+}
+
+function _ui_on_string_blur( ele )
+{
+    if( ele.id == _focusId )
+    {
+	if( ele.value != _focusVal )
+	    ui_send_string_value(ele,ele.value)
+    }
+}
+
 function ui_create_string( parent_ele, d )
 {
     var ele = ui_create_ctl( parent_ele, "input", d.title, d, "uiString" );
@@ -507,6 +524,8 @@ function ui_create_string( parent_ele, d )
     if( ele != null )
     {
 	ele.addEventListener('keyup', function(e) { if(e.keyCode===13){  ui_send_string_value(this, this.value); }} );
+	ele.addEventListener('focus', function(e) { _ui_on_focus(this); } );
+	ele.addEventListener('blur',  function(e) { _ui_on_string_blur(this); }  );
 
 	if( !d.hasOwnProperty('value') )
 	    ui_send_echo(ele);
@@ -521,6 +540,28 @@ function ui_create_string( parent_ele, d )
     return ele;
 }
 
+
+function _ui_send_number( ele )
+{
+    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_number_keyup( e )
 {
     if( e.keyCode===13 )
@@ -530,28 +571,20 @@ function ui_number_keyup( e )
 	if( ele != null )
 	{
 	    //console.log("min:"+ele.minValue+" max:"+ele.maxValue)
-
+	    _ui_send_number(ele)
-	    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_on_number_blur( ele )
+{
+    if( ele.id == _focusId )
+    {
+	if( ele.value != _focusVal )
+	    _ui_send_number(ele)
+    }
+}
+
 function _ui_set_number_range( ele, d )
 {
     if(d.max < d.min)
@@ -584,6 +617,13 @@ function ui_set_number_value( ele, value )
 
 }
 
+function ui_set_number_range( ele, d )
+{
+    _ui_set_number_range(ele,d)
+    if( d.hasOwnProperty('value') )
+	ui_set_number_value(ele,d.value)
+}
+
 function ui_create_number( parent_ele, d )
 {
     var ele = ui_create_ctl( parent_ele, "input", d.title, d, "uiNumber" );
@@ -591,6 +631,8 @@ function ui_create_number( parent_ele, d )
     if( ele != null )
     {
 	ele.addEventListener('keyup', ui_number_keyup );
+	ele.addEventListener('focus', function(e) { _ui_on_focus(this); } );
+	ele.addEventListener('blur',  function(e) { _ui_on_number_blur(this); }  );
 	_ui_set_number_range(ele,d)
 	
 
@@ -605,13 +647,50 @@ function ui_create_number( parent_ele, d )
     }
     return ele;
 }
-function ui_set_number_range( ele, d )
+
+function ui_set_number_display( ele_id, value )
 {
-    _ui_set_number_range(ele,d)
+    var ele = dom_id_to_ele(ele_id);
-    if( d.hasOwnProperty('value') )
+
-	ui_set_number_value(ele,d.value)
+    if( typeof(value)=="number")
+    {
+	var val = value.toString();
+    
+	if( ele.decpl == 0 )
+	    ele.innerHTML = parseInt(val,10);
+	else
+	    ele.innerHTML = parseFloat(val);
+    }
 }
 
+function ui_create_number_display( parent_ele, d )
+{
+    var ele = ui_create_ctl( parent_ele, "label", d.title, d, "uiNumbDisp" );
+    
+    if( ele != null )
+    {
+	ele.decpl = d.decpl;
+
+	if( d.hasOwnProperty('value') )
+	{
+	    ui_set_number_display(ele.id, d.value);
+	}
+	else
+	{
+	    ui_send_echo(ele);
+	}
+    }
+    
+    return ele;
+
+}
+
+function ui_create_text_display( parent_ele, d )
+{
+    return ui_create_ctl( parent_ele, "label", d.title, d, "uiTextDisp" );
+}
+
+
 function ui_set_progress( ele, value )
 {
     ele.value = Math.round( ele.max * (value - ele.minValue) / (ele.maxValue - ele.minValue));
@@ -657,25 +736,6 @@ function _on_log_click( evt )
 
     pre_ele.auto_scroll_flag = !pre_ele.auto_scroll_flag;
 }
-	     
-function ui_create_log( parent_ele, d )
-{
-
-    // create a containing div with the label
-    d.className = "uiLog"
-    var log_ele  = ui_create_ctl( parent_ele, "div", d.title, d, "uiLog" )
-
-    // add a <pre> to the containing div
-    var ele = dom_create_ele("pre")
-    
-    ele.id      = log_ele.id + "_pre"  
-    ele.onclick = _on_log_click;
-    ele.auto_scroll_flag = true;
-    
-    log_ele.appendChild(ele)
-
-    return log_ele
-}
 
 function ui_set_log_text( ele, value )
 {
@@ -693,21 +753,51 @@ function ui_set_log_text( ele, value )
 	    
 	    break;
 	}
-    }
+    }    
-    
 }
 
+function ui_create_log( parent_ele, d )
+{
+    // create a containing div with the label
+    d.className = "uiLog"
+    var log_ele  = ui_create_ctl( parent_ele, "div", d.title, d, "uiLog" )
+
+    // add a <pre> to the containing div
+    var ele = dom_create_ele("pre")
+    
+    ele.id      = log_ele.id + "_pre"  
+    ele.onclick = _on_log_click;
+    ele.auto_scroll_flag = true;
+    
+    log_ele.appendChild(ele)
+
+    return log_ele
+}
+
+function ui_create_list( parent_ele, d )
+{
+    d.className = "uiList"
+    var list_ele  = ui_create_ctl( parent_ele, "div", d.title, d, "uiList" )
+    
+    return list_ele
+}
 
 function ui_set_value( d )
 {
     //console.log(d)
-    var ele = dom_id_to_ele(d.uuId.toString())
+    
+    var eleId = d.uuId.toString()
+    var ele = dom_id_to_ele(eleId)
 
     if( ele == null )
-	console.log("ele not found");
+	console.log("ele '"+eleId+"' not found");
     else
+    {
 	if( !ele.hasOwnProperty("uiEleType") )
+        {
 	    console.log("No type");
+        }
+    }
     
     if( ele != null && ele.hasOwnProperty("uiEleType"))
     {
@@ -744,6 +834,10 @@ function ui_set_value( d )
 	    ele.value = d.value
 	    break;
 
+	    case "numb_disp":
+	    ui_set_number_display(ele.id,d.value);
+	    break;
+	    
 	    case "progress":
 	    ui_set_progress( ele, d.value )
 	    //ele.value = d.value
@@ -847,6 +941,14 @@ function ui_create( d )
 	    case "number":
 	    ele = ui_create_number( parent_ele, d );
 	    break;
+	    
+	    case "numb_disp":
+	    ele = ui_create_number_display( parent_ele, d );
+	    break;
+
+	    case "text_disp":
+	    ele = ui_create_text_display( parent_ele, d );
+	    break;	    
 
 	    case "progress":
 	    ele = ui_create_progress( parent_ele, d );
@@ -855,6 +957,10 @@ function ui_create( d )
 	    case "log":
 	    ele = ui_create_log( parent_ele, d );
 	    break;
+
+	    case "list":
+	    ele = ui_create_list( parent_ele, d );
+	    break;
 	    
 	    default:
 	    ui_error("Unknown UI element type: " + d.type )

html/uiTest/ui.cfg

@@ -3,8 +3,11 @@
 
   parent: "uiDivId"
 
+  button:{ name: myQuitBtnId,   title:"Quit"  },
+
   panel: {
 
+
     name: "panelDivId",
     title: "My resource based panel",
 
@@ -24,9 +27,16 @@
 
      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 },
-       }
+    	 check:{  name: myCheck2Id, title:"Check 2" },
+	 text_disp: { name: "foo", title: "Check to add elements to 'My List'" },
+       },
+
+
+    row: {
+        list:{ name: myListId, title:"My List" },
+    },
+
 
      },
 
@@ -57,8 +67,8 @@
 	   check:{ name: touch1Chk },
 	   number:{ name: fader1Numb,  min:0, max:1023, step:1, decpl:0 },	   
 	 }
-      }
+      },
-   
      }
 
+
 }