Add files via upload

hendrikfolkerts · Sep 19, 2019 · 3c557ee · 3c557ee
commit 3c557ee
Show file tree

Hide file tree

Showing 14 changed files with 4,087 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+SESViewEl - System Entity Structure View Electron
+--------------------------------------------------------------------------------------------------------------------------
+
+The software SESViewEl has been developed by the research group Computational
+Engineering and Automation (CEA) at Wismar University of Applied Sciences.
+The app SESViewEl starts a socket server on port 54545.
+When a System Entity Structure (SES) coded as XML is sent to the server (e.g. from SESToPy), the SES is presented as tree.
+See the documentation of SESToPy for details on the description of the SES in the XML format.
+SESViewEl is developed with Node.js 10.15.3 and electron as UI.
+Visual Studio Code 1.38.0 is used as development editor.
+All dependencies and their versions can be seen in the package.json / package-lock.json .
+--------------------------------------------------------------------------------------------------------------------------
+
+Execute
+Change into the directory of SESViewEl and execute
+npm install
+All necessary packages are installed.
+
+Then SESViewEl can be started with
+npm start
+
+In case there is an error, please reinstall electron with the command
+npm install electron --save-dev --save-exact
+
+SESViewEl can be built for a platform with the command
+npm run dist
diff --git a/aspect.png b/aspect.png
diff --git a/descriptive.png b/descriptive.png
diff --git a/entity.png b/entity.png
diff --git a/i2rightarrow.png b/i2rightarrow.png
diff --git a/index.css b/index.css
@@ -0,0 +1,80 @@
+body {
+	background-color: LightGrey;
+	-webkit-app-region: drag;
+}
+
+#exit {
+	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
+	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
+	box-shadow:inset 0px 1px 0px 0px #ffffff;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #969696), color-stop(1, #c9c9c9));
+	background:-moz-linear-gradient(top, #969696 5%, #c9c9c9 100%);
+	background:-webkit-linear-gradient(top, #969696 5%, #c9c9c9 100%);
+	background:-o-linear-gradient(top, #969696 5%, #c9c9c9 100%);
+	background:-ms-linear-gradient(top, #969696 5%, #c9c9c9 100%);
+	background:linear-gradient(to bottom, #969696 5%, #c9c9c9 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#c9c9c9',GradientType=0);
+	background-color:#969696;
+	-moz-border-radius:6px;
+	-webkit-border-radius:6px;
+	border-radius:6px;
+	border:1px solid #dcdcdc;
+	display:inline-block;
+	cursor:pointer;
+	color:#000000;
+	font-family:Arial;
+	font-size:12px;
+	font-weight:bold;
+	padding:6px 24px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #ffffff;	
+}
+
+#exit:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c9c9c9), color-stop(1, #969696));
+	background:-moz-linear-gradient(top, #c9c9c9 5%, #969696 100%);
+	background:-webkit-linear-gradient(top, #c9c9c9 5%, #969696 100%);
+	background:-o-linear-gradient(top, #c9c9c9 5%, #969696 100%);
+	background:-ms-linear-gradient(top, #c9c9c9 5%, #969696 100%);
+	background:linear-gradient(to bottom, #c9c9c9 5%, #969696 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9c9c9', endColorstr='#969696',GradientType=0);
+	background-color:#c9c9c9;
+}
+
+#exit:active {
+	position:relative;
+	top:1px;
+}
+
+.node:hover image{
+  cursor: pointer;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: rgb(0, 0, 0);
+  stroke-width: 1.5px;
+}
+
+.tooltip {
+	position: absolute;
+	text-align: center;
+	width: auto;
+	height: 12px;
+	padding: 4px;
+	margin-top: -20px;
+	font: 10px sans-serif;
+	background: rgb(253, 253, 253);
+	pointer-events: none;
+	border-style: "solid";
+	border-width: "0.5px";
+  }
+
+.GraphBackground{
+	border-style: "solid";
+	border-width: "0.5px";
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>SESViewEl</title>
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <p><center><h3>SESViewEl - System Entity Structure View in Node.js / Electron</h3></center></p>
+    <p align="right">A socket server is started on port 54545. SESToPy can connect to this server now. Exit the program here: <input name="exit" id="exit" type="button" size="20" value="Exit"></p>
+
+    <!--
+    We are using Node.js <script>document.write(process.versions.node)</script>,
+    Chromium <script>document.write(process.versions.chrome)</script>,
+    and Electron <script>document.write(process.versions.electron)</script>.
+    -->
+
+    <div style="display:inline-block;" id="globals"></div>
+  </body>
+
+  <script>
+    //requires for this file
+    //module provides an asynchronous network API
+    var net = require('net');
+    //module for the creation of an application
+    const remote = require('electron').remote;
+    //module for the libraries for printing the graph
+    var d3 = require("d3");
+    //script for creating d3 trees from the XML
+    var conv = require('./xml_converter');
+    //script for the presentation of the graph
+    var presenter  = require('./presentation')
+
+    //event listener on exit button
+    document.querySelector('#exit').addEventListener('click', exitFun);
+
+    //start the server
+    server();
+
+    //--------------------------------------------------------------------
+
+    //presentation with d3
+
+    //set the dimensions and margins of the diagram
+    var margin = {top: 60, right: 90, bottom: 30, left: 90},
+        width  = 1200 - margin.left - margin.right,
+        height = 800 - margin.top - margin.bottom;
+
+    //append the svg object to the body of the page
+    //appends a 'group' element to 'svg'
+    //moves the 'group' element to the top left margin
+    var svg = d3.select("body").append("svg")
+                .attr("width", width + margin.right + margin.left)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var div = d3.select("body").append("div")
+                .attr("class", "tooltip")
+                .style("display", "none");
+
+    // declares a tree layout and assigns the size
+    var treemap = d3.tree().size([width, height]);
+    //w and h are turned, since the presentation is turned
+
+    //--------------------------------------------------------------------
+
+    //presentation of the globals
+    function presGlob(sesvars, semcons) {
+      var show_globals = [];
+      show_globals.push('<table border=0>');
+        show_globals.push('<thead>');
+          show_globals.push('<tr><th align=left bgcolor=#AAAAAA>SES variables</th><th align=left bgcolor=#AAAAAA>semantic conditions</th></tr>');
+        show_globals.push('</thead>');
+        show_globals.push('<tbody>');
+          show_globals.push('<tr><td bgcolor=#AAAAAA>' + sesvars + '</td><td bgcolor=#AAAAAA>' + semcons +'</td></tr>');
+        show_globals.push('</tbody>');
+      show_globals.push('</table>');
+
+      var globEl = document.getElementById("globals");
+      globEl.innerHTML = show_globals;
+    }
+
+    //--------------------------------------------------------------------
+
+    function server() {
+      // Keep track of the clients
+      var clients = [];
+
+      // Start a TCP Server
+      net.createServer(function (socket) {
+
+        // Identify this client
+        socket.name = socket.remoteAddress + ":" + socket.remotePort;
+
+        // Put this new client in the list
+        clients.push(socket);
+
+        // Handle incoming messages from clients.
+        socket.on('data', function (data) {
+          //read question and create reply
+          var rcvstring = new TextDecoder("utf8").decode(data);  //decode
+          //execute xml tree to d3 tree conversion
+          var retval = conv.treeData(rcvstring);
+          var treeDat = retval[0];
+          var sesvars = retval[1];
+          var semcons = retval[2]; 
+          //execute script for presentation
+          presenter.createPicture(treeDat);
+          //execute function for presentation of the globals
+          presGlob(sesvars, semcons);
+        });
+
+        // Remove the client from the list when it leaves
+        socket.on('end', function () {
+          clients.splice(clients.indexOf(socket), 1);
+        });
+
+      }).listen(54545);
+    }
+
+    function exitFun() {
+        const remote = require('electron').remote;
+        let w = remote.getCurrentWindow();
+        w.close();
+    }
+
+  </script>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,87 @@
+// Modules to control application life and create native browser window
+const {app, BrowserWindow, globalShortcut} = require('electron')
+const path = require('path');
+
+//########################################################################
+//This is own content of modules that need to be required for this file
+//const { dialog } = require('electron')
+
+//########################################################################
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow
+
+function createWindow () {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    frame: true,
+    width: 1250,
+    height: 1000,
+    resizable: true,
+    //show: false,
+    center: true,
+    backgroundColor: '#312450',
+    icon: path.join(__dirname, 'i2rightarrow.png')
+  })
+
+  globalShortcut.register('f5', function() {
+		console.log('f5 is pressed')
+		mainWindow.reload()
+	})
+
+  // and load the index.html of the app.
+  mainWindow.loadFile('index.html')
+
+  // Open the DevTools.
+  //mainWindow.webContents.openDevTools()
+
+  //########################################################################
+  //This is own content (which shall be loaded at startup)
+  //console.log(dialog.showOpenDialog({ properties: ['openFile', 'openDirectory', 'multiSelections'] }))
+
+  //########################################################################
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null
+  })
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow)
+
+//########################################################################
+//This is own content
+
+//This method is called after the window is created
+app.on('browser-window-created',function(e,window) {
+  window.setMenu(null);
+});
+
+//########################################################################
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
diff --git a/multiaspect.png b/multiaspect.png