@markus.hardardt/js_hmi 1.0.0

package/src/BrowserMain.js

@@ -0,0 +1,132 @@
+(function (root) {
+    "use strict";
+
+    // create 'hmi' environment object
+    const hmi = {};
+    // debug brakeports
+    hmi.debug_breakpoint = window.debug_breakpoint;
+    // here we add our libraries
+    hmi.lib = {};
+    // load Mathematics
+    hmi.lib.Mathematics = root.Mathematics;
+    hmi.lib.JsonFX = root.JsonFX;
+    hmi.lib.exec = root.Executor;
+    hmi.lib.regex = root.Regex;
+    // here all droppables will be stored
+    hmi.droppables = {};
+
+    hmi.env = {
+        isInstance: instance => false, // TODO: Implement isInstance(instance)
+        isSimulationEnabled: () => false // TODO: Implement isSimulationEnabled()
+    };
+
+    // add hmi-object-framweork
+    hmi.create = (object, element, onSuccess, onError, initData) =>
+        ObjectLifecycleManager.create(object, element, onSuccess, onError, hmi, initData);
+    hmi.destroy = ObjectLifecycleManager.destroy;
+    hmi.showPopup = (config, onSuccess, onError) =>
+        ObjectLifecycleManager.showPopup(hmi, config, onSuccess, onError);
+    hmi.showDefaultConfirmationPopup = (config, onSuccess, onError) =>
+        ObjectLifecycleManager.showDefaultConfirmationPopup(hmi, config, onSuccess, onError);
+    // all static files have been loaded and now we create the hmi.
+    $(() => {
+        const tasks = [];
+        tasks.parallel = false;
+
+        const dataConnector = new DataConnector.ClientConnector();
+        hmi.env.data = dataConnector;
+
+        let webSocketSessionConfig = undefined;
+        // Load web socket session config from server
+        tasks.push((onSuccess, onError) => Client.fetch('/get_web_socket_session_config', undefined, response => {
+            webSocketSessionConfig = JSON.parse(response);
+            console.log('Loaded web socket session configuration successfully. Session ID:', webSocketSessionConfig.sessionId);
+            onSuccess();
+        }, error => {
+            console.error(`Error loading web socket session configuration: ${error}`);
+            onError(error);
+        }));
+
+        let webSocketConnection = undefined;
+        tasks.push((onSuccess, onError) => {
+            try {
+                webSocketConnection = new WebSocketConnection.ClientConnection(document.location.hostname, webSocketSessionConfig, {
+                    heartbeatInterval: 2000,
+                    heartbeatTimeout: 1000,
+                    reconnectStart: 1000,
+                    reconnectMax: 32000,
+                    OnOpen: () => {
+                        console.log(`web socket client opened (sessionId: '${WebSocketConnection.formatSesionId(webSocketConnection.SessionId)}')`);
+                        dataConnector.OnOpen();
+                    },
+                    OnClose: () => {
+                        console.log(`web socket client closed (sessionId: '${WebSocketConnection.formatSesionId(webSocketConnection.SessionId)}')`);
+                        dataConnector.OnClose();
+                    },
+                    OnError: error => {
+                        console.error(`error in connection (sessionId: '${WebSocketConnection.formatSesionId(webSocketConnection.SessionId)}') to server: ${error}`);
+                    }
+                });
+                dataConnector.Connection = webSocketConnection;
+                onSuccess();
+            } catch (error) {
+                onError(error);
+            }
+        });
+        // load client config
+        let config = false;
+        tasks.push((onSuccess, onError) => {
+            Client.fetch('/get_client_config', null, response => {
+                config = JSON.parse(response);
+                onSuccess();
+            }, onError);
+        });
+        // prepare content management system
+        tasks.push((onSuccess, onError) => hmi.cms = new ContentManager.Instance(onSuccess, onError));
+        tasks.push((onSuccess, onError) => {
+            const languages = hmi.cms.GetLanguages();
+            if (Array.isArray(languages) && languages.length > 0) {
+                hmi.languages = languages;
+                hmi.language = languages[0];
+                onSuccess();
+            } else {
+                onError('no languages available');
+            }
+        });
+        let rootObject = null;
+        tasks.push((onSuccess, onError) => {
+            const params = new URLSearchParams(root.location.search);
+            const view = params.get('view');
+            const defaultObject = { text: `view: '${view}' is not available` };
+            console.log(`view: '${view}'`);
+            if (view) {
+                hmi.cms.GetObject(view, hmi.language, ContentManager.PARSE, object => {
+                    if (object !== null && typeof object === 'object' && !Array.isArray(object)) {
+                        rootObject = object;
+                    } else {
+                        rootObject = { text: `view: '${view}' is not a visual object` }; // TODO: Implement 'better' info object
+                    }
+                    onSuccess();
+                }, error => rootObject = { text: `Failed loading view: '${view}' because of error: ${error}` });  // TODO: Implement 'better' info object
+            } else {
+                rootObject = ContentEditor.create(hmi);
+                onSuccess();
+            }
+        });
+        tasks.push((onSuccess, onError) => {
+            Client.startRefreshCycle(config.requestAnimationFrameCycle, () => ObjectLifecycleManager.refresh(new Date()));
+            onSuccess();
+        });
+        // load hmi
+        Executor.run(tasks, () => {
+            Object.seal(hmi);
+            const body = $(document.body);
+            body.empty();
+            body.addClass('hmi-body');
+            hmi.create(rootObject, body, () => console.log('js hmi started'), error => console.error(error));
+            body.on('unload', () => {
+                hmi.destroy(rootObject, () => console.log('js hmi stopped'), error => console.error(error));
+            });
+        }, error => console.error(error));
+    });
+}(globalThis));

package/ui/hmi_styles.css

@@ -0,0 +1,333 @@
+.empty {
+  
+}
+
+/*
+We need to set on both - 'html' and 'body'- the dimension to 100% 
+to make our hmi fit info the whole window.    
+*/
+html {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* overwrite default in ./node_modules/jquery-ui-dist/jquery-ui.css because of dark background */
+.ui-dialog .ui-dialog-content {
+	position: relative;
+	border: 0;
+	padding: .5em 1em;
+	background: #F0F0F0;
+	overflow: auto;
+}
+
+.hmi-body {
+  font-family: 'Verdana';
+  font-size: 12px;
+  color: #000000;
+  background: #eeeeee;
+}
+
+.hmi-light {
+  background: #F0F0F0;
+}
+
+.hmi-dark {
+  background: #E1E1E1;
+}
+
+.hmi-button-disabled {
+  color: #D0D0D0;
+}
+
+.hmi-cursor-pointer {
+  cursor: pointer;
+}
+
+.hmi-border {
+  border-style: solid;
+  border-width: 2px;
+  border-left-color: #b3b3b3;
+  border-right-color: #b3b3b3;
+  border-top-color: #b3b3b3;
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 6px;
+}
+
+.hmi-border-embossed {
+  border-style: solid;
+  border-width: 2px;
+  border-left-color: #cdcdcd;
+  border-right-color: #c0c0c0;
+  border-top-color: #dadada;
+  border-bottom-color: #b3b3b3;
+  -webkit-border-radius: 6px;
+}
+
+.hmi-border-engraved {
+  border-style: solid;
+  border-width: 2px;
+  border-left-color: #c0c0c0;
+  border-right-color: #cdcdcd;
+  border-top-color: #b3b3b3;
+  border-bottom-color: #dadada;
+  -webkit-border-radius: 6px;
+}
+
+.hmi-selected {
+  background: -webkit-linear-gradient(top, #aaaaaaaa, #777777);
+  background-color: #aaaaaaaa;
+}
+
+table.dataTable tbody tr.row_selected {
+  background-color: lightgrey !important;
+  color: black !important;
+}
+
+.border-round {
+  -webkit-border-radius: 10px;
+}
+
+.cm-matchhighlight {
+	/* this must  be transparent because otherwise we cannot see selection highlighting on search-and-replace */
+	background-color: rgba(0,255,0,0.247)
+}
+
+.CodeMirror-selection-highlight-scrollbar {
+	background-color: green
+}
+
+.cm-s-default .cm-comment {
+  color: #67B97B;
+}
+
+/*
+.body-export {
+  font-family: 'Verdana';
+  font-size: 13px;
+  color: #000000;
+  background: #FFFFFF;
+  margin: 0;
+  padding: 0;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.headerlogo {
+  background-image: url('Logo.png');
+  background-repeat: no-repeat;
+  min-height: 100%;
+  -webkit-user-select: none;
+  user-select: none;
+}
+*/
+.dateImg {
+  background-image: url('Kalender.png');
+  background-repeat: no-repeat;
+  -webkit-user-select: none;
+  user-select: none;
+}
+/*
+.diagnosticHeader {
+  margin-left: 274px;
+  border-spacing: 0px;
+}
+*/
+.default-data-field {
+  text-align: right;
+  padding-right: 2px;
+  padding-left: 2px;
+}
+
+.default-data-field-value {
+  font-size: 22px;
+}
+
+.default-border-box {
+  box-sizing: border-box;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+/*
+.defaultbutton {
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-weight: bold;
+  line-height: 25px;
+  cursor: pointer;
+}
+*/
+
+.defaultcheckbutton {
+  text-align: left;
+  text-decoration: none;
+  display: inline-block;
+  font-weight: bold;
+  line-height: 25px;
+  cursor: pointer;
+}
+
+.highlighted-white {
+  background: -webkit-linear-gradient(top, rgb(180, 180, 180),
+    rgb(255, 255, 255));
+  background-color: rgb(180, 180, 180);
+}
+
+.highlighted-grey {
+  background: -webkit-linear-gradient(top, rgb(85, 85, 85),
+    rgb(136, 136, 136));
+  background-color: rgb(85, 85, 85);
+}
+
+.highlighted-grey-dark {
+  background: -webkit-linear-gradient(top, rgb(24, 24, 24),
+    rgb(42, 42, 42));
+  background-color: rgb(85, 85, 85);
+}
+
+.highlighted-green {
+  background: -webkit-linear-gradient(top, rgb(0, 98, 0), rgb(0, 242, 0));
+  background-color: rgb(0, 170, 0);
+}
+
+.highlighted-green-dark {
+  background: -webkit-linear-gradient(top, rgb(0, 32, 0), rgb(0, 64, 0));
+  background-color: rgb(0, 170, 0);
+}
+
+.highlighted-red {
+  background: -webkit-linear-gradient(top, rgb(98, 0, 0), rgb(242, 0, 0));
+  background-color: rgb(170, 0, 0);
+}
+
+.highlighted-red-dark {
+  background: -webkit-linear-gradient(top, rgb(32, 0, 0), rgb(64, 0, 0));
+  background-color: rgb(170, 0, 0);
+}
+
+.highlighted-blue {
+  background: -webkit-linear-gradient(top, rgb(0, 0, 98), rgb(0, 0, 242));
+  background-color: rgb(0, 0, 170);
+}
+
+.highlighted-blue-dark {
+  background: -webkit-linear-gradient(top, rgb(0, 0, 32), rgb(0, 0, 64));
+  background-color: rgb(0, 0, 170);
+}
+
+.highlighted-yellow {
+  /*background: -webkit-linear-gradient(top, rgb(117, 87, 0), rgb(245, 153, 0));
+  background-color: rgb(235, 143, 0);*/
+  background: -webkit-linear-gradient(top, rgb(100, 100, 0),
+    rgb(245, 245, 0));
+  background-color: rgb(235, 143, 0);
+}
+
+.highlighted-yellow-dark {
+  background: -webkit-linear-gradient(top, rgb(70, 32, 0), rgb(180, 64, 0));
+  background-color: rgb(235, 143, 0);
+}
+
+.background-red-light {
+  background: rgb(255, 127, 127);
+}
+
+.default-background-white {
+  background: white;
+  color: black;
+}
+
+.default-background-hover {
+  background: rgb(70, 75, 78) !important;
+}
+
+.overflow-hidden {
+  /* be carefull with this: draggables might be invisible and - even worse - not droppable on buttons! */
+  overflow: hidden !important;
+}
+
+.default-scroll-container {
+  overflow: auto;
+}
+
+.defaultcontainer {
+  display: block;
+  position: absolute;
+  height: auto;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-style: solid;
+  border-width: 2px;
+  border-bottom-color: rgb(76, 76, 76);
+  border-right-color: rgb(76, 76, 76);
+  border-top-color: rgb(38, 37, 40);
+  border-left-color: rgb(38, 37, 40);
+  -webkit-border-radius: 6px;
+  background: rgb(46, 45, 48);
+  padding: 2px;
+}
+
+/* TODO remove if realy not used ??? */
+.defaultblock {
+  display: block;
+  position: absolute;
+  height: auto;
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
+/* TODO remove if still unused */
+.defaultpanel {
+  /*
+   display: block;
+   position: absolute;
+   height: auto;
+   bottom: 0;
+   top: 0;
+   left: 0;
+   right: 0;
+   margin-top: 2px;
+   margin-bottom: 2px;
+   margin-right: 2px;
+   margin-left: 2px;
+   */
+  border-style: solid;
+  border-width: 2px;
+  border-bottom-color: rgb(38, 37, 40);
+  border-right-color: rgb(38, 37, 40);
+  border-top-color: rgb(76, 76, 76);
+  border-left-color: rgb(76, 76, 76);
+}
+
+/* TODO remove if still unused */
+.defaultpanelborder {
+  border-style: solid;
+  border-width: 2px;
+  border-bottom-color: rgb(38, 37, 40);
+  border-right-color: rgb(38, 37, 40);
+  border-top-color: rgb(76, 76, 76);
+  border-left-color: rgb(76, 76, 76);
+  padding: 2px;
+}
+
+.rotate180 {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}

package/ui/scrollbar-desktop.css

@@ -0,0 +1,117 @@
+/* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar {
+  width: 22px;
+  height: 22px;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+  background: url('arrow-up.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+  background: url('arrow-down.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+  background: url('arrow-left.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+  background: url('arrow-right.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgb(56,55,58);
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: rgb(46,45,48);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  background: url('arrow-up-down.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  background: url('arrow-left-right.png') no-repeat;
+  background-size: 18px 18px;
+  background-position: center;
+  min-height: 22px;
+  min-width: 22px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: rgb(56,55,58);
+}
+
+.ui-dialog.ui-widget-content {
+  background: rgb(42,42,42);
+}

package/ui/scrollbar-touch.css

@@ -0,0 +1,117 @@
+/* this targets the default scrollbar (compulsory) */
+::-webkit-scrollbar {
+  width: 42px;
+  height: 42px;
+}
+
+::-webkit-scrollbar-button:vertical:decrement {
+  background: url('arrow-up.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:vertical:increment {
+  background: url('arrow-down.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:horizontal:decrement {
+  background: url('arrow-left.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-button:horizontal:increment {
+  background: url('arrow-right.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgb(56,55,58);
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color: rgb(46,45,48);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  background: url('arrow-up-down.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  background: url('arrow-left-right.png') no-repeat;
+  background-size: 38px 38px;
+  background-position: center;
+  min-height: 42px;
+  min-width: 42px;
+  background-color: rgb(56,55,58);
+  border-style: solid;
+  border-width: 2px;
+  border-top-color: rgb(76,76,76);
+  border-left-color: rgb(76,76,76);
+  border-bottom-color: rgb(38,37,40);
+  border-right-color: rgb(38,37,40);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: rgb(56,55,58);
+}
+
+.ui-dialog.ui-widget-content {
+  background: rgb(42,42,42);
+}