@markus.hardardt/js_hmi 1.0.0

package/ext/jquery/layout-default-latest.css

@@ -0,0 +1,228 @@
+/*
+ * Default Layout Theme
+ *
+ * Created for jquery.layout 
+ *
+ * Copyright (c) 2010 
+ *   Fabrizio Balliano (http://www.fabrizioballiano.net)
+ *   Kevin Dalman (http://allpro.net)
+ *
+ * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
+ * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
+ *
+ * Last Updated: 2010-02-10
+ * NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
+ */
+
+/*
+ *	DEFAULT FONT
+ *	Just to make demo-pages look better - not actually relevant to Layout!
+ */
+/*
+body {
+	font-family: Geneva, Arial, Helvetica, sans-serif;
+	font-size:   100%;
+	*font-size:  80%;
+}
+*/
+
+/*
+ *	PANES & CONTENT-DIVs
+ */
+.ui-layout-pane { /* all 'panes' */
+  /* background:  #FFF; TODO Hm 2014-05-21 */ 
+	border:		1px solid #BBB;
+  /* padding: 10px; TODO Hm 2014-05-21 */ 
+  /* overflow:  auto; TODO Hm 2014-05-23 */
+  overflow: hidden !important;
+  
+	/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+	   otherwise you may get double-scrollbars - on the pane AND on the content-div
+	   - use ui-layout-wrapper class if pane has a content-div
+	   - use ui-layout-container if pane has an inner-layout
+	*/
+	}
+	/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+	.ui-layout-content {
+    /* padding: 10px; TODO Hm 2014-05-21 */
+		position:	relative; /* contain floated or positioned elements */
+		overflow:	auto; /* add scrolling to content-div */
+	}
+
+/*
+ *	UTILITY CLASSES
+ *	Must come AFTER pane-class above so will override
+ *	These classes are NOT auto-generated and are NOT used by Layout
+ */
+.layout-child-container,
+.layout-content-container {
+	padding:	0;
+	overflow:	hidden;
+}
+.layout-child-container {
+	border:		0; /* remove border because inner-layout-panes probably have borders */
+}
+.layout-scroll {
+	overflow:	auto;
+}
+.layout-hide {
+	display:	none;
+}
+
+/*
+ *	RESIZER-BARS
+ */
+.ui-layout-resizer	{ /* all 'resizer-bars' */
+  /* background:    #DDD;  TODO Hm 2014-05-21 */
+	border:			1px solid #BBB;
+	border-width:	0;
+	}
+	.ui-layout-resizer-drag {		/* REAL resizer while resize in progress */
+	}
+	.ui-layout-resizer-hover	{	/* affects both open and closed states */
+	}
+	/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+		otherwise color shifts while dragging when bar can't keep up with mouse */
+	.ui-layout-resizer-open-hover ,	/* hover-color to 'resize' */
+	.ui-layout-resizer-dragging {	/* resizer beging 'dragging' */
+		background: #C4E1A4;
+	}
+	.ui-layout-resizer-dragging {	/* CLONED resizer being dragged */
+		border: 	 1px solid #BBB;
+	}
+	.ui-layout-resizer-north-dragging,
+	.ui-layout-resizer-south-dragging {
+		border-width:	1px 0;
+	}
+	.ui-layout-resizer-west-dragging,
+	.ui-layout-resizer-east-dragging {
+		border-width:	0 1px;
+	}
+	/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+	.ui-layout-resizer-dragging-limit {	/* CLONED resizer at min or max size-limit */
+		background: #E1A4A4; /* red */
+	}
+
+	.ui-layout-resizer-closed-hover	{ /* hover-color to 'slide open' */
+		background: #EBD5AA;
+	}
+	.ui-layout-resizer-sliding {	/* resizer when pane is 'slid open' */
+		opacity: .10; /* show only a slight shadow */
+		filter:  alpha(opacity=10);
+		}
+		.ui-layout-resizer-sliding-hover {	/* sliding resizer - hover */
+			opacity: 1.00; /* on-hover, show the resizer-bar normally */
+			filter:  alpha(opacity=100);
+		}
+		/* sliding resizer - add 'outside-border' to resizer on-hover 
+		 * this sample illustrates how to target specific panes and states */
+		.ui-layout-resizer-north-sliding-hover	{ border-bottom-width:	1px; }
+		.ui-layout-resizer-south-sliding-hover	{ border-top-width:		1px; }
+		.ui-layout-resizer-west-sliding-hover	{ border-right-width:	1px; }
+		.ui-layout-resizer-east-sliding-hover	{ border-left-width:	1px; }
+
+/*
+ *	TOGGLER-BUTTONS
+ */
+.ui-layout-toggler {
+	border: 1px solid #BBB; /* match pane-border */
+	background-color: #BBB;
+	}
+	.ui-layout-resizer-hover .ui-layout-toggler {
+		opacity: .60;
+		filter:  alpha(opacity=60);
+	}
+	.ui-layout-toggler-hover , /* need when NOT resizable */
+	.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
+		background-color: #FC6;
+		opacity: 1.00;
+		filter:  alpha(opacity=100);
+	}
+	.ui-layout-toggler-north ,
+	.ui-layout-toggler-south {
+		border-width: 0 1px; /* left/right borders */
+	}
+	.ui-layout-toggler-west ,
+	.ui-layout-toggler-east {
+		border-width: 1px 0; /* top/bottom borders */
+	}
+	/* hide the toggler-button when the pane is 'slid open' */
+	.ui-layout-resizer-sliding  .ui-layout-toggler {
+		display: none;
+	}
+	/*
+	 *	style the text we put INSIDE the togglers
+	 */
+	.ui-layout-toggler .content {
+		color:			#666;
+		font-size:		12px;
+		font-weight:	bold;
+		width:			100%;
+		padding-bottom:	0.35ex; /* to 'vertically center' text inside text-span */
+	}
+
+/*
+ *	PANE-MASKS
+ *	these styles are hard-coded on mask elems, but are also 
+ *	included here as !important to ensure will overrides any generic styles
+ */
+.ui-layout-mask {
+	border:		none !important;
+	padding:	0 !important;
+	margin:		0 !important;
+	overflow:	hidden !important;
+	position:	absolute !important;
+	opacity:	0 !important;
+	filter:		Alpha(Opacity="0") !important;
+}
+.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
+	top:		0 !important;
+	left:		0 !important;
+	width:		100% !important;
+	height:		100% !important;
+}
+div.ui-layout-mask {}		/* standard mask for iframes */
+iframe.ui-layout-mask {}	/* extra mask for objects/applets */
+
+/*
+ *	Default printing styles
+ */
+@media print {
+	/*
+	 *	Unless you want to print the layout as it appears onscreen,
+	 *	these html/body styles are needed to allow the content to 'flow'
+	 */
+	html {
+		height:		auto !important;
+		overflow:	visible !important;
+	}
+	body.ui-layout-container {
+		position:	static !important;
+		top:		auto !important;
+		bottom:		auto !important;
+		left:		auto !important;
+		right:		auto !important;
+		/* only IE6 has container width & height set by Layout */
+		_width:		auto !important;
+		_height:	auto !important;
+	}
+	.ui-layout-resizer, .ui-layout-toggler {
+		display:	none !important;
+	}
+	/*
+	 *	Default pane print styles disables positioning, borders and backgrounds.
+	 *	You can modify these styles however it suit your needs.
+	 */
+	.ui-layout-pane {
+		border:		none !important;
+		background:	 transparent !important;
+		position:	relative !important;
+		top:		auto !important;
+		bottom:		auto !important;
+		left:		auto !important;
+		right:		auto !important;
+		width:		auto !important;
+		height:		auto !important;
+		overflow:	visible !important;
+	}
+}

package/main.js

@@ -0,0 +1,307 @@
+(function () {
+    "use strict";
+    const {
+        Client, // direct access: const Client = require('@markus.hardardt/js_utils/src/Client.js');
+        Executor, // direct access: const Executor = require('@markus.hardardt/js_utils/src/Executor.js');
+        HashLists, // direct access: const HashLists = require('@markus.hardardt/js_utils/src/HashLists.js');
+        JsonFX, // direct access: const JsonFX = require('@markus.hardardt/js_utils/src/JsonFX.js');
+        Mathematics, // direct access: const Mathematics = require('@markus.hardardt/js_utils/src/Mathematics.js');
+        ObjectPositionSystem, // direct access: const ObjectPositionSystem = require('@markus.hardardt/js_utils/src/ObjectPositionSystem.js');
+        Regex, // direct access: const Regex = require('@markus.hardardt/js_utils/src/Regex.js');
+        Server, // direct access: const Server = require('@markus.hardardt/js_utils/src/Server.js');
+        Sorting, // direct access: const Sorting = require('@markus.hardardt/js_utils/src/Sorting.js');
+        SqlHelper, // direct access: const SqlHelper = require('@markus.hardardt/js_utils/src/SqlHelper.js');
+        Utilities, // direct access: const Utilities = require('@markus.hardardt/js_utils/src/Utilities.js');
+        Core, // direct access: const Core = require('@markus.hardardt/js_utils/src/Core.js');
+        WebServer, // direct access: const WebServer = require('@markus.hardardt/js_utils/src/WebServer.js');
+        ContentManager, // direct access: const ContentManager = require('@markus.hardardt/js_utils/src/ContentManager.js');
+        Common, // direct access: const Common = require('@markus.hardardt/js_utils/src/Common.js');
+        ObjectLifecycleManager, // direct access: const ObjectLifecycleManager = require('@markus.hardardt/js_utils/src/ObjectLifecycleManager.js');
+        DataPoint, // direct access: const DataPoint = require('@markus.hardardt/js_utils/src/DataPoint.js');
+        TargetSystem, // direct access: const TargetSystem = require('@markus.hardardt/js_utils/src/TargetSystem.js');
+        WebSocketConnection, // direct access: const WebSocketConnection = require('@markus.hardardt/js_utils/src/WebSocketConnection.js');
+        DataConnector, // direct access: const DataConnector = require('@markus.hardardt/js_utils/src/DataConnector.js');
+        md5, // direct access: const md5 = require('@markus.hardardt/js_utils/ext/md5.js'); // external
+        addStaticWebServerJsUtilsFiles
+    } = require('@markus.hardardt/js_utils/js_utils.js');
+
+    // debug
+    const s_verbose_sql_queries = !true;
+
+    // load configurations
+    const db_access = require('./config/db_access.json');
+    const db_config = require('./config/db_config.json');
+
+    // Determine config file
+    var configFile = './config.json';
+    if (process.argv.length > 2 && /\.json$/.test(process.argv[2])) {
+        configFile = /^\.\//.test(process.argv[2]) ? process.argv[2] : './' + process.argv[2];
+    }
+    const config = require(configFile);
+
+    // create 'hmi' environment object
+    const hmi = {}; // TODO: -> "sys"
+    // here we add our libraries
+    hmi.lib = {};
+    // load Mathematics
+    hmi.lib.Mathematics = Mathematics;
+    hmi.lib.JsonFX = JsonFX;
+    hmi.lib.exec = Executor;
+    hmi.lib.regex = Regex;
+    hmi.lib.sql = SqlHelper;
+    // add hmi-object-framweork
+    hmi.create = (object, element, onSuccess, onError, initData) => ObjectLifecycleManager.create(object, element, onSuccess, onError, hmi, initData);
+    hmi.destroy = ObjectLifecycleManager.destroy;
+    hmi.env = {
+        isInstance: instance => false, // TODO: Implement isInstance(instance)
+        isSimulationEnabled: () => false // TODO: Implement isSimulationEnabled()
+    };
+
+    // Prepare web server
+    const minimized = true;
+    const webServer = new WebServer.Server({ secureKeyFile: config.secureKeyFile, secureCertFile: config.secureCertFile });
+    webServer.RandomFileIdEnabled = false;
+    webServer.SetTitle('js hmi');
+    webServer.AddStaticDir('./images', 'images');
+    webServer.PrepareFavicon('images/favicon.ico');
+    webServer.AddStaticFile('./ui/hmi_styles.css');
+    webServer.AddStaticFile('./node_modules/jquery/dist/' + (minimized ? 'jquery.min.js' : 'jquery.js'));
+    webServer.AddStaticFile('./node_modules/jquery-ui-dist/' + (minimized ? 'jquery-ui.min.css' : 'jquery-ui.css'));
+    webServer.AddStaticFile('./node_modules/jquery-ui-dist/' + (minimized ? 'jquery-ui.min.js' : 'jquery-ui.js'));
+    // Note: The next css file references png files by relative paths. Because 'media' is the common root, we must not scramble deeper folders.
+    webServer.AddStaticFile('./node_modules/datatables/media', minimized ? 'css/jquery.dataTables.min.css' : 'css/jquery.dataTables.css');
+    webServer.AddStaticFile('./node_modules/datatables/media', minimized ? 'js/jquery.dataTables.min.js' : 'js/jquery.dataTables.js');
+    // Note: Don't use this extension! Shows paging even if not configured and every second page is empty.
+    // webServer.AddStaticFile('./node_modules/datatables.net-scroller/js/dataTables.scroller.js');
+    // Note: The next css file references png files by relative paths. Because 'dist' is the common root, we must not scramble deeper folders.
+    webServer.AddStaticFile('./node_modules/jquery.fancytree/dist', minimized ? 'skin-lion/ui.fancytree.min.css' : 'skin-lion/ui.fancytree.css');
+    webServer.AddStaticFile('./node_modules/jquery.fancytree/dist/' + (minimized ? 'jquery.fancytree-all.min.js' : 'jquery.fancytree-all.js'));
+    webServer.AddStaticFile('./ext/jquery/jquery.ui.touch-punch.js');
+    webServer.AddStaticFile('./ext/jquery/jquery.transform2d.js');
+    webServer.AddStaticFile('./ext/jquery/ajaxblob.js');
+    webServer.AddStaticFile('./ext/jquery/layout-default-latest.css');
+    webServer.AddStaticFile('./ext/jquery/jquery.layout-latest.js');
+    webServer.AddStaticFile('./ext/jquery/dataTables.pageResize.min.js');
+    webServer.AddStaticFile('./ext/jquery/dataTables.scrollResize.min.js');
+    /*
+    webServer.AddStaticFile('./ext/jquery/jquery.transform2d.js');
+    webServer.AddStaticFile('./ext/jquery/ajaxblob.js');
+    webServer.AddStaticFile('./ext/jquery/layout-default-latest.css');
+    webServer.AddStaticFile('./ext/jquery/jquery.layout-latest.js');
+    webServer.AddStaticFile('./ext/jquery/dataTables.pageResize.min.js');
+    webServer.AddStaticFile('./ext/jquery/dataTables.scrollResize.min.js');
+    */
+    // TODO: https://codemirror.net/docs/migration/   --> CodeMirror.fromTextArea
+    webServer.AddStaticFile('./node_modules/codemirror/lib/codemirror.css');
+    webServer.AddStaticFile('./node_modules/codemirror/lib/codemirror.js');
+    webServer.AddStaticFile('./node_modules/codemirror/mode/javascript/javascript.js');
+    webServer.AddStaticFile('./node_modules/codemirror/mode/xml/xml.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/edit/matchbrackets.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/edit/closebrackets.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/search/search.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/dialog/dialog.css');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/dialog/dialog.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/search/searchcursor.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/search/match-highlighter.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/hint/show-hint.css');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/hint/show-hint.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/hint/javascript-hint.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/scroll/annotatescrollbar.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/search/matchesonscrollbar.js');
+    webServer.AddStaticFile('./node_modules/codemirror/addon/search/matchesonscrollbar.css');
+
+    webServer.AddStaticFile('./node_modules/file-saver/dist/' + (minimized ? 'FileSaver.min.js' : 'FileSaver.js'));
+    webServer.AddStaticFile('./node_modules/js-beautify/js/lib/beautify.js');
+    webServer.AddStaticFile('./node_modules/js-beautify/js/lib/beautify-html.js');
+    webServer.AddStaticFile('./node_modules/js-beautify/js/lib/beautify-css.js');
+    addStaticWebServerJsUtilsFiles(webServer);
+    // add the final static file: our hmi main loader
+    webServer.AddStaticFile('./src/BrowserMain.js');
+    // No content - will be generated at runtime inside browser
+    webServer.SetBody('');
+
+    /* let body = ''; // TODO Handle CodeMirror v5 -> v6 issues
+    body += '<script type="module">\n';
+    body += 'import { attachBrowserFeatures } from "./src/Client.js";\n';
+    body += 'import "./src/ObjectLifecycleManager.js";\n';
+    body += 'attachBrowserFeatures(window.ObjectLifecycleManager);\n';
+    //body += 'const olm = new ObjectLifecycleManager();\n';
+    body += '</script>\n';
+    webServer.SetBody(body); */
+    // deliver main config to client
+    webServer.Post('/get_client_config', (request, response) => response.send(JSON.stringify({
+        requestAnimationFrameCycle: config.clientRequestAnimationFrameCycle
+    })));
+
+    // prepare content management system
+    // we need the handler for database access
+    // TODO: reuse or remove    const sqlHelper = new SqlHelper.Connector(db_access, s_verbose_sql_queries);
+    const sqlAdapterFactory = SqlHelper.getAdapterFactory(db_access, s_verbose_sql_queries);
+    // we directly replace our icon directory to make sure on server and client
+    // (with debug proxy too) our icons will be available
+    db_config.icon_dir = '/' + webServer.AddStaticDir(db_config.icon_dir) + '/';
+    db_config.jsonfx_pretty = config.jsonfx_pretty === true;
+    // TODO: reuse or remove hmi.cms = new ContentManager(sqlHelper.createAdapter, db_config);
+    hmi.cms = new ContentManager.Instance(sqlAdapterFactory, db_config);
+    // we need access via ajax from clients
+    webServer.Post(ContentManager.GET_CONTENT_DATA_URL, (request, response) => {
+        hmi.cms.HandleRequest(request.body,
+            result => response.send(JSON.stringify(result)),
+            error => response.send(JSON.stringify(error.toString()))
+        );
+    });
+    // the tree control requests da via 'GET' so we handle those request
+    // separately
+    webServer.Get(ContentManager.GET_CONTENT_TREE_NODES_URL, (request, response) => {
+        hmi.cms.HandleFancyTreeRequest(request.query.request, request.query.path,
+            result => response.send(JSON.stringify(result)),
+            error => response.send(JSON.stringify(error.toString()))
+        );
+    });
+    function addStaticFiles(file) {
+        if (Array.isArray(file)) {
+            for (var i = 0, l = file.length; i < l; i++) {
+                addStaticFiles(file[i]);
+            }
+        } else if (typeof file === 'string' && file.length > 0) {
+            webServer.AddStaticFile(file);
+        }
+    }
+    addStaticFiles(config.staticClientFiles);
+    webServer.AddStaticFile(config.touch ? config.scrollbar_hmi : config.scrollbar_config);
+
+    // debug stuff start
+    const DataIds = Object.freeze({ b: 'test:b', i: 'test:i', f: 'test:f', t: 'test:t' });
+    const test_subscriptions = {};
+    test_subscriptions[DataIds.b] = { value: false, onRefresh: null };
+    test_subscriptions[DataIds.i] = { value: 0, onRefresh: null };
+    test_subscriptions[DataIds.f] = { value: 1.618, onRefresh: null };
+    test_subscriptions[DataIds.t] = { value: 'hello world', onRefresh: null };
+    const test_dataPoints = {
+        onOperationalStateChanged: null,
+        IsOperational: true,
+        SubscribeOperationalState: onOperationalStateChanged => { 
+            test_dataPoints.onOperationalStateChanged = onOperationalStateChanged;
+            onOperationalStateChanged(true);
+        },
+        UnsubscribeOperationalState: onOperationalStateChanged => test_dataPoints.onOperationalStateChanged = null,
+        GetType: dataId => { },
+        SubscribeData: (dataId, onRefresh) => {
+            test_subscriptions[dataId].onRefresh = onRefresh;
+            onRefresh(test_subscriptions[dataId].value);
+        },
+        UnsubscribeData: (dataId, onRefresh) => test_subscriptions[dataId].onRefresh = null,
+        Read: (dataId, onResponse, onError) => test_subscriptions[dataId].value,
+        Write: (dataId, value) => setTestValue(dataId, value)
+    };
+    function setTestValue(dataId, value) {
+        test_subscriptions[dataId].value = value;
+        if (test_subscriptions[dataId].onRefresh) {
+            test_subscriptions[dataId].onRefresh(value);
+        }
+    }
+    setInterval(() => {
+        setTestValue(DataIds.b, Math.random() >= 0.5);
+        setTestValue(DataIds.i, test_subscriptions[DataIds.i].value + 1);
+        setTestValue(DataIds.f, Math.random());
+        setTestValue(DataIds.t, `Hello world! ${Math.random()}`);
+    }, 500);
+    const test_dataPointsCollection = new DataPoint.Collection();
+    test_dataPointsCollection.Parent = test_dataPoints;
+    setTimeout(() => { // TODO: Renove when tested and running
+        test_dataPointsCollection.Parent = null;
+        test_dataPointsCollection.Parent = test_dataPoints;
+    }, 5000)
+    // debug stuff end
+
+    const router = new DataPoint.Router();
+    router.GetDataAccessObject = dataId => {
+        const match = /^([a-z0-9_]+):.+$/i.exec(dataId);
+        if (!match) {
+            throw new Error(`Invalid id: '${dataId}'`);
+        } else {
+            switch (match[1]) {
+                case 'test':
+                    return test_dataPointsCollection; // test_dataPoints;
+                default:
+                    throw new Error(`Invalid prefix '${match[1]}' id: '${dataId}'`);
+            }
+        }
+    };
+    router.IsOperational = true; // TODO: Handle this (but when and how?)
+    hmi.env.data = router;
+
+    const dataConnectors = {};
+
+    const tasks = [];
+
+    // Prepare web socket server
+    let webSocketServer = undefined;
+    webServer.Post('/get_web_socket_session_config',
+        (request, response) => response.send(JSON.stringify(webSocketServer.CreateSessionConfig()))
+    );
+    tasks.push((onSuccess, onError) => {
+        try {
+            webSocketServer = new WebSocketConnection.Server(config.webSocketPort, {
+                secure: webServer.IsSecure,
+                autoConnect: config.autoConnect,
+                closedConnectionDisposeTimeout: config.closedConnectionDisposeTimeout,
+                OnOpen: connection => {
+                    console.log(`web socket client opened (sessionId: '${WebSocketConnection.formatSesionId(connection.SessionId)}')`);
+                    const dataConnector = new DataConnector.ServerConnector();
+                    dataConnector.Parent = router;
+                    dataConnector.Connection = connection;
+                    dataConnector.SendDelay = config.sendDelay;
+                    dataConnector.SubscribeDelay = config.subscribeDelay;
+                    dataConnector.UnsubscribeDelay = config.unsubscribeDelay;
+                    dataConnector.SetDataPoints([
+                        { id: DataIds.b, type: Core.DataType.Boolean },
+                        { id: DataIds.i, type: Core.DataType.Int64 },
+                        { id: DataIds.f, type: Core.DataType.Double },
+                        { id: DataIds.t, type: Core.DataType.String }
+                    ]);
+                    dataConnectors[connection.SessionId] = dataConnector;
+                    dataConnector.OnOpen();
+                },
+                OnReopen: connection => {
+                    console.log(`web socket client reopened (sessionId: '${WebSocketConnection.formatSesionId(connection.SessionId)}')`);
+                    const dataConnector = dataConnectors[connection.SessionId];
+                    dataConnector.OnReopen();
+                },
+                OnClose: connection => {
+                    console.log(`web socket client closed (sessionId: '${WebSocketConnection.formatSesionId(connection.SessionId)}')`);
+                    const dataConnector = dataConnectors[connection.SessionId];
+                    dataConnector.OnClose();
+                },
+                OnDispose: connection => {
+                    console.log(`web socket client disposed (sessionId: '${WebSocketConnection.formatSesionId(connection.SessionId)}')`);
+                    const dataConnector = dataConnectors[connection.SessionId];
+                    dataConnector.OnDispose();
+                    delete dataConnectors[connection.SessionId];
+                    dataConnector.Connection = null;
+                    dataConnector.Parent = null;
+                },
+                OnError: (connection, error) => {
+                    console.error(`error in connection (sessionId: '${WebSocketConnection.formatSesionId(connection.SessionId)}') to server: ${error}`);
+                }
+            });
+            onSuccess();
+        } catch (error) {
+            onError(error);
+        }
+    });
+
+    tasks.push((onSuccess, onError) => {
+        Server.startRefreshCycle(config.serverCycleMillis, () => ObjectLifecycleManager.refresh(new Date()));
+        onSuccess();
+    });
+
+    tasks.push((onSuccess, onError) => {
+        webServer.Listen(config.webServerPort, () => {
+            console.log(`js hmi web server listening on port: ${config.webServerPort}`);
+            onSuccess();
+        });
+    });
+
+    Executor.run(tasks, () => Object.seal(hmi), error => console.error(error));
+}());

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@markus.hardardt/js_hmi",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "codemirror": "^5.52.2",
+    "datatables": "^1.10.18",
+    "file-saver": "^2.0.5",
+    "jquery": "^3.7.1",
+    "jquery-ui-dist": "^1.13.3",
+    "jquery.fancytree": "^2.38.5",
+    "js-beautify": "^1.15.4"
+  }
+}