From 71a2bf42c9336a4c8b57cae1820b2e0fcbf81b28 Mon Sep 17 00:00:00 2001
From: "kevin.larke" <kevin@larke.org>
Date: Mon, 18 May 2020 12:23:41 -0400
Subject: [PATCH] html/ui/ui.css/js : Initial commit.

---
 html/ui/ui.css |  80 +++++
 html/ui/ui.js  | 867 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 947 insertions(+)
 create mode 100644 html/ui/ui.css
 create mode 100644 html/ui/ui.js

diff --git a/html/ui/ui.css b/html/ui/ui.css
new file mode 100644
index 0000000..b4f6ba3
--- /dev/null
+++ b/html/ui/ui.css
@@ -0,0 +1,80 @@
+
+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;
+}
+
+.uiNumbDispDiv {
+    width: 50px;
+    border: 1px solid #afafaf;
+}
+
+.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;
+}
+
diff --git a/html/ui/ui.js b/html/ui/ui.js
new file mode 100644
index 0000000..98b7063
--- /dev/null
+++ b/html/ui/ui.js
@@ -0,0 +1,867 @@
+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_number_display( ele_id, value )
+{
+    var ele = dom_id_to_ele(ele_id);
+
+    if( typeof(value)=="number")
+	value = value.toString();
+    
+    if( ele.decpl == 0 )
+	ele.innerHTML = parseInt(value,10);
+    else
+	ele.innerHTML = parseFloat(value);
+    
+}
+
+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_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 eleId = d.uuId.toString()
+    var ele = dom_id_to_ele(eleId)
+
+    if( ele == null )
+	console.log("ele '"+eleId+"' 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 "numb_disp":
+	    ui_set_number_display(ele.id,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 "numb_disp":
+	    ele = ui_create_number_display( 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;
+
+    
+}
+