cwUi* : Initial implementation.

This commit is contained in:
kpl 2020-03-23 10:48:49 -04:00
parent 545f8b808f
commit 78b351b753
9 changed files with 1322 additions and 0 deletions

466
cwUi.cpp Normal file
View File

@ -0,0 +1,466 @@
#include "cwCommon.h"
#include "cwLog.h"
#include "cwCommonImpl.h"
#include "cwMem.h"
#include "cwThread.h"
#include "cwWebSock.h"
#include "cwWebSockSvr.h"
#include "cwUi.h"
#include "cwText.h"
#include "cwNumericConvert.h"
namespace cw
{
namespace ui
{
typedef struct ele_str
{
struct ele_str* parent; // pointer to parent ele - or nullptr if this ele is attached to the root ui ele
unsigned uuId; // UI unique id - automatically generated and unique among all elements that are part of this ui_t object.
unsigned appId; // application assigned id - application assigned id
char* jsId; // javascript id
} ele_t;
typedef struct ui_str
{
websockSrv::handle_t wssH;
unsigned eleAllocN;
unsigned eleN;
ele_t** eleA;
uiCallback_t cbFunc;
void* cbArg;
} ui_t;
ui_t* _handleToPtr( handle_t h )
{ return handleToPtr<handle_t,ui_t>(h); }
rc_t _destroy( ui_t* p )
{
rc_t rc = kOkRC;
if( p->wssH.isValid() )
if((rc = websockSrv::destroy(p->wssH)) != kOkRC )
return rc;
for(unsigned i=0; i<p->eleN; ++i)
{
mem::release(p->eleA[i]->jsId);
mem::release(p->eleA[i]);
}
mem::release(p->eleA);
mem::release(p);
return rc;
}
ele_t* _createEle( ui_t* p, ele_t* parent, unsigned appId, const char* jsId )
{
ele_t* e = mem::allocZ<ele_t>();
e->parent = parent;
e->uuId = p->eleN;
e->appId = appId;
e->jsId = mem::duplStr(jsId);
if( p->eleN == p->eleAllocN )
{
p->eleAllocN += 100;
p->eleA = mem::resizeZ<ele_t*>(p->eleA,p->eleAllocN);
}
p->eleA[ p->eleN ] = e;
p->eleN += 1;
return e;
}
ele_t* _uuIdToEle( ui_t* p, unsigned uuId, bool errorFl=true )
{
if( uuId >= p->eleN )
{
cwLogError(kInvalidIdRC,"The element uuid:%i is not valid.",uuId);
return nullptr;
}
return p->eleA[ uuId ];
}
rc_t _websockSend( ui_t* p, const char* msg )
{
return websock::send( websockSrv::websockHandle( p->wssH ), kUiProtocolId, msg, strlen(msg) );
}
const char* _findEleJsId( ui_t* p, unsigned uuId )
{
for(unsigned i=0; i<p->eleN; ++i)
if( p->eleA[i]->uuId == uuId )
return p->eleA[i]->jsId;
return nullptr;
}
// Print the attribute data value.
template< typename T0 >
unsigned format_attribute_data( char* buf, unsigned n, T0 t0 )
{
return toText(buf,n,t0);
}
// Override format_attribute_data() for char. string data so that strings are wrapped in quotes.
template<>
unsigned format_attribute_data( char* buf, unsigned n, const char* t )
{
unsigned i = 0;
i += toText(buf+i, n-i, "\"" );
i += toText(buf+i, n-i, t );
i += toText(buf+i, n-i, "\"" );
return i;
}
// terminating condition for format_attributes()
unsigned format_attributes(char* buf, unsigned n, unsigned i)
{ return i; }
template<typename T0, typename T1, typename... ARGS>
unsigned format_attributes(char* buf, unsigned n, unsigned i, T0 t0, T1 t1, ARGS&&... args)
{
i += toText(buf+i, n-i, ",\"" );
i += toText(buf+i, n-i, t0 );
i += toText(buf+i, n-i, "\":" );
i += format_attribute_data(buf+i, n-i, t1 );
return format_attributes(buf,n,i,std::forward<ARGS>(args)...);
}
template< typename... ARGS>
rc_t _createOneEle( ui_t* p, unsigned& uuIdRef, const char* eleTypeStr, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, ARGS&&... args )
{
// { op:create, parent:my_parent_id, value:{ button:{ jsId:my_jsId, appId:appId, uuId:uuId, class:clas, title:'my title' } }
rc_t rc = kOkRC;
const char* parentJsId = "";
ele_t* newEle = nullptr;
ele_t* parentEle = nullptr;
const unsigned bufN = 1024;
char buf[ bufN ];
uuIdRef = kInvalidId;
//
if( parentUuId != kInvalidId )
{
if(( parentEle = _uuIdToEle(p, parentUuId )) == nullptr )
return cwLogError( kInvalidArgRC, "Unable to locate the parent element (id:%i).", parentUuId );
parentJsId = parentEle->jsId;
}
newEle = _createEle( p, parentEle, appId, jsId );
unsigned i = snprintf( buf, bufN, "{ \"op\":\"create\", \"parent\":\"%s\", \"value\":{ \"%s\":{ \"jsId\":\"%s\", \"appId\":%i, \"uuId\":%i, \"class\":\"%s\", \"title\":\"%s\" ", parentJsId, eleTypeStr, jsId, appId, newEle->uuId, clas, title );
i = format_attributes(buf, bufN, i, std::forward<ARGS>(args)...);
toText(buf+i, bufN-i, "}}}");
printf("%s\n",buf);
rc = _websockSend( p, buf );
uuIdRef = newEle->uuId;
return rc;
}
ele_t* _parse_value_msg( ui_t* p, value_t& valueRef, const char* msg )
{
rc_t rc = kOkRC;
char argType = 0;
ele_t* ele = nullptr;
unsigned eleUuId = kInvalidId;
valueRef.tid = kInvalidTId;
if( msg == nullptr )
{
cwLogWarning("Empty message received from UI.");
return nullptr;
}
// locate the colon prior to the value
const char* s = strchr(msg,':');
if( s == nullptr || sscanf(msg, "value %i %c ",&eleUuId,&argType) != 2 )
{
cwLogError(kSyntaxErrorRC,"Invalid message from UI: %s.", msg );
goto errLabel;
}
// advance s past the colon
s += 1;
// parse the argument
switch( argType )
{
case 'b':
if((rc = string_to_number<bool>(s,valueRef.u.b)) == kOkRC )
valueRef.tid = kBoolTId;
break;
case 'i':
if((rc = string_to_number<int>(s,valueRef.u.i)) == kOkRC )
valueRef.tid = kIntTId;
break;
case 'u':
if((rc = string_to_number<unsigned>(s,valueRef.u.u)) == kOkRC )
valueRef.tid = kUIntTId;
break;
case 'f':
if((rc = string_to_number<float>(s,valueRef.u.f)) == kOkRC )
valueRef.tid = kFloatTId;
break;
case 'd':
if((rc = string_to_number<double>(s,valueRef.u.d)) == kOkRC )
valueRef.tid = kDoubleTId;
break;
case 's':
if((valueRef.u.s = nextNonWhiteChar(s)) == nullptr )
valueRef.tid = kStringTId;
break;
default:
rc = cwLogError(kInvalidIdRC,"Unknown value type '%c' in message from UI.", argType );
goto errLabel;
}
// locate the element record
if((ele = _uuIdToEle( p, eleUuId )) == nullptr )
{
cwLogError(kInvalidIdRC,"UI message elment not found.");
goto errLabel;
}
errLabel:
return ele;
}
void _websockCb( void* cbArg, unsigned protocolId, unsigned connectionId, websock::msgTypeId_t msg_type, const void* msg, unsigned byteN )
{
ui_t* p = (ui_t*)cbArg;
opId_t opId = kInvalidOpId;
unsigned eleUuId = kInvalidId;
unsigned eleAppId = kInvalidId;
unsigned parentEleAppId = kInvalidId;
value_t value;
switch( msg_type )
{
case websock::kConnectTId:
opId = kConnectOpId;
break;
case websock::kDisconnectTId:
opId = kDisconnectOpId;
break;
case websock::kMessageTId:
{
ele_t* ele;
if( textCompare((const char*)msg,"init",strlen("init")) == 0 )
{
opId = kInitOpId;
}
else
{
opId = kValueOpId;
if((ele = _parse_value_msg(p, value, (const char*)msg )) == nullptr )
cwLogError(kOpFailRC,"UI Value message parse failed.");
else
{
eleUuId = ele->uuId;
eleAppId = ele->appId;
parentEleAppId = ele->parent == nullptr ? kInvalidId : ele->parent->appId;
}
}
}
break;
default:
cwLogError(kInvalidOpRC,"Unknown websock message type:%i.", msg_type );
return;
}
if( p->cbFunc != nullptr )
p->cbFunc( p->cbArg, connectionId, opId, parentEleAppId, eleUuId, eleAppId, &value );
}
}
}
cw::rc_t cw::ui::createUi(
handle_t& h,
unsigned port,
uiCallback_t cbFunc,
void* cbArg,
const char* physRootDir,
const char* dfltPageFn,
unsigned websockTimeOutMs,
unsigned rcvBufByteN,
unsigned xmtBufByteN )
{
rc_t rc = kOkRC;
websock::protocol_t protocolA[] =
{
{ "http", kHttpProtocolId, 0, 0 },
{ "ui_protocol", kUiProtocolId, rcvBufByteN, xmtBufByteN }
};
unsigned protocolN = sizeof(protocolA)/sizeof(protocolA[0]);
if((rc = destroyUi(h)) != kOkRC )
return rc;
ui_t* p = mem::allocZ<ui_t>();
if((rc = websockSrv::create(p->wssH, _websockCb, p, physRootDir, dfltPageFn, port, protocolA, protocolN, websockTimeOutMs )) != kOkRC )
{
cwLogError(rc,"Internal websock server creation failed.");
goto errLabel;
}
p->eleAllocN = 100;
p->eleA = mem::allocZ<ele_t*>( p->eleAllocN );
p->eleN = 0;
p->cbFunc = cbFunc;
p->cbArg = cbArg;
h.set(p);
errLabel:
if( rc != kOkRC )
{
_destroy(p);
}
return rc;
}
cw::rc_t cw::ui::start( handle_t h )
{
rc_t rc = kOkRC;
ui_t* p = _handleToPtr(h);
if((rc = websockSrv::start(p->wssH)) != kOkRC )
rc = cwLogError(rc,"Internal websock server start failed.");
return rc;
}
cw::rc_t cw::ui::stop( handle_t h )
{
rc_t rc = kOkRC;
ui_t* p = _handleToPtr(h);
if((rc = websockSrv::pause(p->wssH)) != kOkRC )
rc = cwLogError(rc,"Internal websock server stop failed.");
return rc;
}
cw::rc_t cw::ui::destroyUi( handle_t& h )
{
rc_t rc = kOkRC;
if( !h.isValid() )
return rc;
ui_t* p = _handleToPtr(h);
if((rc = _destroy(p)) != kOkRC )
return rc;
h.clear();
return rc;
}
unsigned cw::ui::findElementAppId( handle_t h, unsigned parentUuId, const char* jsId )
{
ui_t* p = _handleToPtr(h);
for(unsigned i=0; i<p->eleN; ++i)
if( p->eleA[i]->parent->uuId==parentUuId && strcmp(p->eleA[i]->jsId,jsId) == 0 )
return p->eleA[i]->appId;
return kInvalidId;
}
unsigned cw::ui::findElementUuId( handle_t h, unsigned parentUuId, const char* jsId )
{
ui_t* p = _handleToPtr(h);
for(unsigned i=0; i<p->eleN; ++i)
if( p->eleA[i]->parent->uuId==parentUuId && strcmp(p->eleA[i]->jsId,jsId) == 0 )
return p->eleA[i]->uuId;
return kInvalidId;
}
unsigned cw::ui::findElementUuId( handle_t h, unsigned parentUuId, unsigned appId )
{
ui_t* p = _handleToPtr(h);
for(unsigned i=0; i<p->eleN; ++i)
if( p->eleA[i]->parent->uuId==parentUuId && p->eleA[i]->appId == appId )
return p->eleA[i]->uuId;
return kInvalidId;
}
const char* cw::ui::findElementJsId( handle_t h, unsigned uuId )
{
ui_t* p = _handleToPtr(h);
return _findEleJsId(p,uuId);
}
cw::rc_t cw::ui::createDiv( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "div", parentUuId, jsId, appId, clas, title ); }
cw::rc_t cw::ui::createTitle( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "option", parentUuId, jsId, appId, clas, title ); }
cw::rc_t cw::ui::createButton( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "button", parentUuId, jsId, appId, clas, title ); }
cw::rc_t cw::ui::createCheck( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, bool value )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "check", parentUuId, jsId, appId, clas, title, "value", value ); }
cw::rc_t cw::ui::createSelect( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "select", parentUuId, jsId, appId, clas, title ); }
cw::rc_t cw::ui::createOption( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "option", parentUuId, jsId, appId, clas, title ); }
cw::rc_t cw::ui::createString( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, const char* value )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "string", parentUuId, jsId, appId, clas, title, "value", value ); }
cw::rc_t cw::ui::createNumber( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, double value, double minValue, double maxValue, double stepValue, unsigned decpl )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "number", parentUuId, jsId, appId, clas, title, "value", value, "min", minValue, "max", maxValue, "step", stepValue, "decpl", decpl ); }
cw::rc_t cw::ui::createProgress( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, double value, double minValue, double maxValue )
{ return _createOneEle( _handleToPtr(h), uuIdRef, "progress", parentUuId, jsId, appId, clas, title, "value", value, "min", minValue, "max", maxValue ); }
cw::rc_t cw::ui::createText( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title )
{
rc_t rc= kOkRC;
return rc;
}

89
cwUi.h Normal file
View File

@ -0,0 +1,89 @@
#ifndef cwUI_H
#define cwUI_H
#include "cwUiDecls.h"
namespace cw
{
namespace ui
{
typedef handle<struct ui_str> handle_t;
enum
{
kHttpProtocolId = 1,
kUiProtocolId = 2
};
typedef enum
{
kInvalidOpId,
kConnectOpId,
kInitOpId,
kValueOpId,
kDisconnectOpId
} opId_t;
typedef enum
{
kInvalidTId,
kBoolTId,
kIntTId,
kUIntTId,
kFloatTId,
kDoubleTId,
kStringTId
} dtypeId_t;
typedef struct
{
dtypeId_t tid;
union
{
bool b;
int i;
unsigned u;
float f;
double d;
const char* s;
} u;
} value_t;
typedef rc_t (*uiCallback_t)( void* cbArg, unsigned connId, opId_t opId, unsigned parentAppId, unsigned uuId, unsigned appId, const value_t* value );
rc_t createUi( handle_t& h,
unsigned port,
uiCallback_t cbFunc,
void* cbArg,
const char* physRootDir,
const char* dfltPageFn = "index.html",
unsigned websockTimeOutMs = 50,
unsigned rcvBufByteN = 1024,
unsigned xmtBufByteN = 1024);
rc_t destroyUi( handle_t& h );
rc_t start( handle_t h );
rc_t stop( handle_t h );
unsigned findElementAppId( handle_t h, unsigned parentUuId, const char* jsId );
unsigned findElementUuId( handle_t h, unsigned parentUuId, const char* jsId );
unsigned findElementUuId( handle_t h, unsigned parentUuId, unsigned appId );
const char* findElementJsId( handle_t h, unsigned uuId );
rc_t createDiv( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
rc_t createTitle( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
rc_t createButton( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
rc_t createCheck( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, bool value );
rc_t createSelect( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
rc_t createOption( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
rc_t createString( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, const char* value );
rc_t createNumber( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, double value, double minValue, double maxValue, double stepValue, unsigned decPl );
rc_t createProgress( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title, double value, double minValue, double maxValue );
rc_t createText( handle_t h, unsigned& uuIdRef, unsigned parentUuId, const char* jsId, unsigned appId, const char* clas, const char* title );
}
}
#endif

12
cwUiDecls.h Normal file
View File

@ -0,0 +1,12 @@
#ifndef cwUiDecls_H
#define cwUiDecls_H
namespace cw
{
namespace ui
{
}
}
#endif

184
cwUiTest.cpp Normal file
View File

@ -0,0 +1,184 @@
#include "cwCommon.h"
#include "cwLog.h"
#include "cwCommonImpl.h"
#include "cwMem.h"
#include "cwUi.h"
#include "cwUiTest.h"
namespace cw
{
namespace ui
{
typedef struct ui_test_str
{
handle_t uiH;
} ui_test_t;
enum
{
kDivId,
kBtnId,
kCheckId,
kSelectId,
kOption0Id,
kOption1Id,
kOption2Id,
kOption3Id,
kStringId,
kNumberId,
kProgressId
};
rc_t _uiTestCreateUi( ui_test_t* p, unsigned connId )
{
rc_t rc = kOkRC;
unsigned uuid = kInvalidId;
unsigned selUuId = kInvalidId;
unsigned divUuId = kInvalidId;
if((rc = createDiv( p->uiH, divUuId, kInvalidId, "myDivId", kDivId, "divClass", "My Panel" )) != kOkRC )
goto errLabel;
if((rc = createButton( p->uiH, uuid, divUuId, "myBtnId", kBtnId, "btnClass", "Push Me" )) != kOkRC )
goto errLabel;
if((rc = createCheck( p->uiH, uuid, divUuId, "myCheckId", kCheckId, "checkClass", "Check Me", true )) != kOkRC )
goto errLabel;
if((rc = createSelect( p->uiH, selUuId, divUuId, "mySelId", kSelectId, "selClass", "Select" )) != kOkRC )
goto errLabel;
if((rc = createOption( p->uiH, uuid, selUuId, "myOpt0Id", kOption0Id, "optClass", "Option 0" )) != kOkRC )
goto errLabel;
if((rc = createOption( p->uiH, uuid, selUuId, "myOpt1Id", kOption1Id, "optClass", "Option 1" )) != kOkRC )
goto errLabel;
if((rc = createOption( p->uiH, uuid, selUuId, "myOpt2Id", kOption2Id, "optClass", "Option 2" )) != kOkRC )
goto errLabel;
if((rc = createString( p->uiH, uuid, divUuId, "myStringId", kStringId, "stringClass", "String", "a string value" )) != kOkRC )
goto errLabel;
if((rc = createNumber( p->uiH, uuid, divUuId, "myNumberId", kNumberId, "numberClass", "Number", 10, 0, 100, 1, 0 )) != kOkRC )
goto errLabel;
if((rc = createProgress( p->uiH, uuid, divUuId, "myProgressId", kProgressId, "progressClass", "Progress", 5, 0, 10 )) != kOkRC )
goto errLabel;
errLabel:
return rc;
}
rc_t _handleUiValueMsg( ui_test_t* p, unsigned connId, unsigned parentAppId, unsigned uuId, unsigned appId, const value_t* v )
{
rc_t rc = kOkRC;
switch( appId )
{
case kBtnId:
printf("Click!\n");
break;
case kCheckId:
printf("Check:%i\n", v->u.b);
break;
case kSelectId:
printf("Selected: optionId:%i\n", v->u.i);
break;
case kStringId:
printf("String: %s\n",v->u.s);
case kNumberId:
if( v->tid == kIntTId )
printf("Number: %i\n",v->u.i);
else
printf("Number: %f\n",v->u.d);
}
return rc;
}
rc_t _uiTestCallback( void* cbArg, unsigned connId, opId_t opId, unsigned parentAppId, unsigned uuId, unsigned appId, const value_t* v )
{
ui_test_t* p = (ui_test_t*)cbArg;
switch( opId )
{
case kConnectOpId:
cwLogInfo("Connect: connId:%i.",connId);
break;
case kDisconnectOpId:
cwLogInfo("Disconnect: connId:%i.",connId);
break;
case kInitOpId:
_uiTestCreateUi(p,connId);
break;
case kValueOpId:
_handleUiValueMsg( p, connId, parentAppId, uuId, appId, v );
break;
case kInvalidOpId:
// fall through
default:
break;
}
return kOkRC;
}
}
}
cw::rc_t cw::ui::test( )
{
rc_t rc = kOkRC;
const char* physRootDir = "/home/kevin/src/cw_rt/html/uiTest";
const char* dfltPageFn = "index.html";
int port = 5687;
unsigned rcvBufByteN = 2048;
unsigned xmtBufByteN = 2048;
unsigned websockTimeOutMs = 50;
const unsigned sbufN = 31;
char sbuf[ sbufN+1 ];
ui_test_t* ui = mem::allocZ<ui_test_t>();
if((rc = createUi(ui->uiH, port, _uiTestCallback, ui, physRootDir, dfltPageFn, websockTimeOutMs, rcvBufByteN, xmtBufByteN )) != kOkRC )
return rc;
if((rc = start(ui->uiH)) != kOkRC )
goto errLabel;
printf("'quit' to exit\n");
// readline loop
while( true )
{
printf("? ");
if( std::fgets(sbuf,sbufN,stdin) == sbuf )
{
printf("Sending:%s",sbuf);
if( strcmp(sbuf,"quit\n") == 0)
break;
}
}
errLabel:
rc_t rc1 = kOkRC;
if( ui->uiH.isValid() )
rc1 = destroyUi(ui->uiH);
mem::release(ui);
return rcSelect(rc,rc1);
}

7
cwUiTest.h Normal file
View File

@ -0,0 +1,7 @@
namespace cw
{
namespace ui
{
rc_t test();
}
}

9
html/uiTest/css/ui.css Normal file
View File

@ -0,0 +1,9 @@
.title_disconnected {
color: red;
}
.title_connected {
color: green;
}

22
html/uiTest/index.html Normal file
View File

@ -0,0 +1,22 @@
<!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>
<p id="appTitleId">Disconnected</p>
<div id="uiDivId" class="uiAppDiv">
</div>
</body>
</html>

518
html/uiTest/js/ui.js Normal file
View File

@ -0,0 +1,518 @@
var _ws = null;
var _dfltParentId = "uiDivId";
function set_app_title( suffix, className )
{
var ele = document.getElementById('appTitleId');
ele.innerHTML = "UI Test:" + 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_id_to_ele( id )
{ return document.getElementById(id); }
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_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_set_number( ele_id, val )
{
dom_id_to_ele(ele_id).value = val
}
function ui_error( msg )
{
console.log("Error: " + msg )
}
function ui_print_children( eleId )
{
var childrenL = document.getElementById(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 = _dfltParentId
parent_ele = document.getElementById(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 )
{
// create the ctl object
var ele = document.createElement(ele_type);
if( ele == null )
ui_error("'%s' element create failed.", ele_type);
else
{
ele.id = d.jsId;
ele.uuId = d.uuId;
ele.appId = d.appId;
parent_ele.appendChild(ele);
}
return ele
}
function ui_create_ctl( parent_ele, ele_type, label, d )
{
// create an enclosing div
var div_ele = document.createElement("div");
div_ele.className = d.clas;
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_ele = document.createElement("label");
label_ele.innerHTML = label;
div_ele.appendChild(label_ele)
}
return ui_create_ele( label_ele, ele_type, d );
}
function ui_create_div( parent_ele, d )
{
var div_ele = ui_create_ele( parent_ele, "div", d );
if( div_ele != null )
{
div_ele.className = d.clas
var p_ele = document.createElement("p")
if( d.title != null && d.title.length > 0 )
p_ele.innerHTML = d.title
div_ele.appendChild( p_ele )
}
return div_ele
}
function ui_create_title( parent_ele, d )
{
return ui_create_ele( parent_ele, "label", d );
}
function ui_create_button( parent_ele, d )
{
var ele = ui_create_ctl( parent_ele, "button", null, d );
if( ele != null )
{
ele.innerHTML = d.title;
ele.onclick = function() { _ws.send("value " + this.uuId + " i : 1"); }
}
return ele
}
function ui_create_check( parent_ele, d )
{
var ele = ui_create_ctl( parent_ele, "input", d.title, d )
if( ele != null )
{
ele.type = "checkbox";
dom_set_checkbox(ele.id, d.value );
ele.onclick = function() { _ws.send("value" + this.uuId + " b : " + dom_get_checkbox(this.id)); }
}
}
function ui_on_select( ele )
{
var s = "value " + ele.uuId + " i : " + ele.options[ ele.selectedIndex ].appId
_ws.send( s );
}
function ui_create_select( parent_ele, d )
{
var sel_ele = ui_create_ctl( parent_ele, "select", d.title, d );
sel_ele.onchange = function() { ui_on_select(this) }
return sel_ele;
}
function ui_create_option( parent_ele, d )
{
var opt_ele = ui_create_ele( parent_ele, "option", d );
if( opt_ele != null )
{
opt_ele.className = d.clas;
opt_ele.innerHTML = d.title;
}
return opt_ele;
}
function ui_create_string( parent_ele, d )
{
var ele = ui_create_ctl( parent_ele, "input", d.title, d );
if( ele != null )
{
ele.value = d.value;
ele.addEventListener('keyup', function(e) { if(e.keyCode===13){ _ws.send("value" + this.uuId + " s : " + this.value + "\0");} } );
}
}
function ui_number_keyup( e )
{
console.log(e)
if( e.keyCode===13 )
{
var ele = dom_id_to_ele(e.target.id)
console.log(ele.value)
if( ele != null )
_ws.send("value" + ele.uuId + " i : " + ele.value);
}
}
function ui_create_number( parent_ele, d )
{
var ele = ui_create_ctl( parent_ele, "input", d.title, d );
if( ele != null )
{
ele.value = d.value;
ele.maxValue = d.max;
ele.minValue = d.min;
ele.stepValue = d.step;
ele.decpl = d.decpl;
ele.addEventListener('keyup', ui_number_keyup );
}
}
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 );
if( ele != null )
{
ele.max = 100;
ele.maxValue = d.max;
ele.minValue = d.min;
ui_set_progress( ele.id, d.value );
}
}
function ui_create( parentId, ele_type, d )
{
var parent_ele = ui_get_parent(parentId);
if( parent_ele != null )
{
switch( ele_type )
{
case "div":
ui_create_div( parent_ele, d )
break;
case "title":
ui_create_title( parent_ele, d )
break;
case "button":
ui_create_button( parent_ele, d )
break;
case "check":
ui_create_check( parent_ele, d )
break;
case "select":
ui_create_select( parent_ele, d );
break;
case "option":
ui_create_option( parent_ele, d );
break;
case "string":
ui_create_string( parent_ele, d );
break;
case "number":
ui_create_number( parent_ele, d );
break;
case "progress":
ui_create_progress( parent_ele, d );
break;
default:
ui_error("Unknown UI element type: " + ele_type )
}
}
}
function ws_send( d )
{
s = JSON.stringify(d)
//console.log(s)
_ws.send(s)
}
function ws_on_msg( jsonMsg )
{
//console.log(jsonMsg)
d = JSON.parse(jsonMsg.data);
switch( d.op )
{
case 'create':
for (const ele_type in d.value)
{
ui_create( d.parent, ele_type, d.value[ele_type] )
//console.log(`${ele_type}: ${d.value[ele_type]}`);
}
break;
}
}
function ws_on_open()
{
set_app_title( "Connected", "title_connected" );
_ws.send("init")
}
function ws_on_close()
{
set_app_title( "Disconnected", "title_disconnected" );
}
function main()
{
_ws = new WebSocket("ws://127.0.0.1:5687/","ui_protocol")
_ws.onmessage = ws_on_msg
_ws.onopen = ws_on_open
_ws.onclose = ws_on_close;
}

15
html/uiTest/ui.cfg Normal file
View File

@ -0,0 +1,15 @@
{
div: {
title:"My panel",
children: {
button:{ id:myBtnId, title:"Push Me" },
select:{ id:mySelectId, title:"Selector", optionL: { myId0:"Option 0", myId2:"Option 1", myId3:"Option 3" }}
}
}
}
}