cpee 2.1.92 → 2.1.95

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6068f986f407667e9973cecebe9e44f299a4af0d30173394af1767dbb02f9515
-  data.tar.gz: e7450a6cf90f7e4e8552938f75da829f7e9e85bc87b5d9bb5f653432f7b59a31
+  metadata.gz: 98ec380ca615921ed8c2652802995ab97de7b8a34f34c6a503f60b8f5758dfb9
+  data.tar.gz: b761b0623adf0bb79ccc6506ad5b26c7993b39b4585a88c8311a41172cab8ccb
 SHA512:
-  metadata.gz: 3c06d2c59aeea2a90bf3f88ec0aca9d2a1ebae640009d80faf9ad8eeb5e5664109c8a8a49f527c44e222f195e4d357f62917660d2e36671388eb2c79b92412fb
-  data.tar.gz: 9401865c365904c987d743d2e9eaa35953800152d400ce86c78838a76ec6efa73dde341f6ed4ae4cd496b6c7ae3623f706964b097a0200ac38def0e85a0e0241
+  metadata.gz: be8645a1acd70db7c3089eefc5208aaf0dda70818f74b10a4ac6a58d2ee77e26755d8952379b533a8d953f2664d130f11469759d640e0d0fe2e3d2feb6a37223
+  data.tar.gz: 9952f614f80c02377ee78942725d292f4956849e6edfa6b669f784a735e13301874bffc756539436a885b7d69a5bc9d0d26865703428f41084a9fcccc918103d

data/cockpit/css/{resources-label.css → extended_columns-label.css}

@@ -1,3 +1,7 @@
+svg.displaylabel {
+  pointer-events: none;
+}
+
 svg.displaylabel .displaylabel {
   fill: var(--wfadaptor-background);
   fill-opacity:1;

data/cockpit/css/ui.css

@@ -33,7 +33,7 @@ body {
 
 #instance ui-content { height: 6em; }
 
-#areanew td:nth-child(2)       { padding-top: 0.4em; padding-bottom: 0.4em; }
+#areanew td:nth-child(2)       { padding-top: 0.2em; padding-bottom: 0.2em; }
 #areanew td:nth-child(1)       { width: 7em; padding-right: 1em; }
 #areanew td:nth-child(3)       { width: 16em; padding-left: 1em; }
 #areanew input                 {
@@ -46,8 +46,8 @@ body {
   -webkit-box-sizing: border-box;
 }
 
-#areanew button[name=base]     { width: 100%; padding: 0.5em 1em; margin-bottom: 0.1em; }
-#areanew button[name=instance] { width: 100%; padding: 0.5em 1em; }
+#areanew button[name=base]     { width: 100%; padding: 0.3em 1em; margin-bottom: 0.1em; }
+#areanew button[name=instance] { width: 100%; padding: 0.3em 1em; }
 
 ui-tabbed ui-tabbar ui-behind button {
   margin-left: 0.5em;
@@ -107,7 +107,8 @@ ui-tabbed ui-tabbar ui-behind button {
 #areainstance div.section:nth-child(1) button[name=loadtestsetfile] { white-space: normal; width: 10em; height: 3.5em; margin-left: 0.2em; }
 #areainstance div.section:nth-child(1) button[name=loadmodelfile]   { white-space: normal; width: 10em; height: 2em;   margin-top: 0.2em; }
 
-#areainstance div.section:nth-child(2) button                       { white-space: normal; width: 6em; height: 5.7em; vertical-align: middle; margin: 0; padding: 0; }
+#areainstance div.section:nth-child(2) button[name=savebpmnfile]    { white-space: normal; width: 7em; height: 2em;   margin-top: 0.2em; }
+#areainstance div.section:nth-child(2) button                       { white-space: normal; width: 7em; height: 3.5em; vertical-align: middle; margin: 0; padding: 0; }
 
 #areainstance div.section:nth-child(3)                                { overflow-y: scroll; overflow-x: hidden; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; }
 #areainstance div.section:nth-child(3) strong                         { margin:0; padding:0; white-space: normal; font-size: 0.7em; }
@@ -124,7 +125,7 @@ ui-tabbed ui-tabbar ui-behind button {
 #areaexecution table.x-ui-compact tbody.exe tr:first-child td { padding-top: 0.5em; }
 #areaexecution table.x-ui-compact tbody.exe { border-top: 1px solid var(--x-ui-border-color); }
 
-#areaexecution table.x-ui-compact tbody.exe td { height: 2.2em; }
+#areaexecution table.x-ui-compact tbody.exe td { height: 2em; }
 
 #arealog > div {  padding-left: 1em; padding-top: 1em; }
 

data/cockpit/css/wfadaptor.css

@@ -23,21 +23,36 @@
   --wfadaptor-highlight: #0081c7;
   --wfadaptor-base: #000000;
   --wfadaptor-base-light: #A9A9A9;
-  --wfadaptor-label: #d4d4d4;
+  --wfadaptor-label: #e4e4e4;
   --wfadaptor-mark: #d4d4d4;
-  --wfadaptor-selected: #f57900;
-  --wfadaptor-hover: #f57900;
+
+  --wfadaptor-selected: #000000;
+  --wfadaptor-selected-text: #f57900;
+  --wfadaptor-hover: #000000;
+
   --wfadaptor-stripe: #e9e9e9;
   --wfadaptor-background: #ffffff;
-  --wfadaptor-menu: #ef2929;
   --wfadaptor-border: #a1a1a1;
+  --wfadaptor-important: #ef2929;
 }
 
 svg {
   display:inline;
   margin:0;
   padding:0;
+  font-family: adawaita-sans;
+  user-select: none;
+}
+
+svg .duration {
+  stroke: var(--wfadaptor-label);
+}
+
+/*
+svg [style*='--custom-color'] {
+	fill: url(#custom-gradient);
 }
+*/
 
 svg rect.group {
   fill: var(--wfadaptor-highlight);
@@ -88,11 +103,6 @@ svg g.vote .execstylethin {
   stroke-linejoin:round;
 }
 
-svg .menu {
-  fill: var(--wfadaptor-menu) !important;
-  fill-opacity:1 !important;
-}
-
 svg line.edge, svg path.edge {
   stroke-opacity:1;
   stroke: var(--wfadaptor-base);
@@ -166,9 +176,6 @@ svg .greyfat {
   stroke-opacity:1;
   stroke-dasharray:none;
 }
-svg .standfat.menu {
-  stroke: var(--wfadaptor-menu);
-}
 svg .normal {
   fill: var(--wfadaptor-base);
   fill-opacity:1;
@@ -232,10 +239,10 @@ svg.labelsrow text.label {
   cursor: pointer;
 }
 svg.labelsrow text.label:hover, svg.labelsrow text.label.hover {
-  fill: var(--wfadaptor-selected);
+  fill: var(--wfadaptor-selected-text);
 }
 svg text.label.selected {
-  fill: var(--wfadaptor-selected);
+  fill: var(--wfadaptor-selected-text);
 }
 svg .selected .markstyle {
   stroke: var(--wfadaptor-selected);
@@ -243,7 +250,8 @@ svg .selected .markstyle {
   stroke-linejoin:round;
   stroke-miterlimit:4;
   stroke-opacity:1;
-  stroke-dasharray:none;
+  stroke-dasharray: 1,2;
+  stroke-width: 1.6;
 }
 
 svg .unknown {
@@ -277,38 +285,6 @@ svg .standwithout {
 svg .standtrans {
   fill: var(--wfadaptor-background);
 }
-svg text.normal {
-  font-size:20px;
-  font-style:normal;
-  font-variant:normal;
-  font-weight:bold;
-  font-stretch:normal;
-  text-align:center;
-  line-height:125%;
-  writing-mode:horizontal-tb;
-  text-anchor:middle;
-  color: var(--wfadaptor-base);
-  fill: var(--wfadaptor-base);
-  fill-opacity:1;
-  stroke:none;
-  font-family: adawaita-sans;
-}
-svg text.inverted {
-  font-size:20px;
-  font-style:normal;
-  font-variant:normal;
-  font-weight:bold;
-  font-stretch:normal;
-  text-align:center;
-  line-height:125%;
-  writing-mode:horizontal-tb;
-  text-anchor:middle;
-  color: var(--wfadaptor-background);
-  fill: var(--wfadaptor-background);
-  fill-opacity:1;
-  stroke:none;
-  font-family: adawaita-sans;
-}
 
 svg text.super {
   font-size:11px;
@@ -324,7 +300,6 @@ svg text.super {
   fill: var(--wfadaptor-base);
   fill-opacity:1;
   stroke:none;
-  font-family: adawaita-sans;
 }
 svg tspan.exec {
   fill: var(--wfadaptor-exec-active-text);
@@ -335,7 +310,6 @@ svg tspan.exec {
   stroke-linecap:round;
   stroke-linejoin:round;
   paint-order: stroke markers fill;
-  font-family: adawaita-sans;
 }
 svg tspan.active {
   fill: var(--wfadaptor-exec-active-text);
@@ -346,7 +320,6 @@ svg tspan.active {
   stroke-linecap:round;
   stroke-linejoin:round;
   paint-order: stroke markers fill;
-  font-family: adawaita-sans;
 }
 svg tspan.vote {
   fill: var(--wfadaptor-exec-vote-text);
@@ -357,7 +330,6 @@ svg tspan.vote {
   stroke-linecap:round;
   stroke-linejoin:round;
   paint-order: stroke markers fill;
-  font-family: adawaita-sans;
 }
 svg tspan.colon {
   display: none;
@@ -366,40 +338,6 @@ svg tspan.necessary {
   display: inline;
 }
 
-svg text.normallarge {
-  font-size:25px;
-  font-style:normal;
-  font-variant:normal;
-  font-weight:bold;
-  font-stretch:normal;
-  text-align:center;
-  line-height:125%;
-  writing-mode:horizontal-tb;
-  text-anchor:middle;
-  color: var(--wfadaptor-base);
-  fill: var(--wfadaptor-base);
-  fill-opacity:1;
-  stroke:none;
-  font-family: adawaita-sans;
-}
-
-svg text.small {
-  font-size:14px;
-  font-style:normal;
-  font-variant:normal;
-  font-weight:bold;
-  font-stretch:normal;
-  text-align:center;
-  line-height:125%;
-  writing-mode:horizontal-tb;
-  text-anchor:middle;
-  color: var(--wfadaptor-base);
-  fill: var(--wfadaptor-base);
-  fill-opacity:1;
-  stroke:none;
-  font-family: adawaita-sans;
-}
-
 svg text.label {
   font-size:14px;
   font-style:normal;
@@ -423,29 +361,11 @@ svg text.label.standalone {
   stroke-linecap:round;
   stroke-linejoin:round;
   paint-order: stroke markers fill;
-  font-family: adawaita-sans;
 }
 svg text.label.rotate {
   transform: translateY(10px) rotate(-30deg);
 }
 
-svg text.smaller {
-  font-size:12px;
-  font-style:normal;
-  font-variant:normal;
-  font-weight:bold;
-  font-stretch:normal;
-  text-align:center;
-  line-height:125%;
-  writing-mode:horizontal-tb;
-  text-anchor:middle;
-  color: var(--wfadaptor-base);
-  fill: var(--wfadaptor-base);
-  fill-opacity:1;
-  stroke:none;
-  font-family: adawaita-sans;
-}
-
 #arrow {
   stroke: var(--wfadaptor-base);
   stroke-width: 2;
@@ -458,11 +378,13 @@ svg g.element[element-id].hover {
 
 svg g.element[element-id].hover .hoverstyle {
   stroke: var(--wfadaptor-hover);
-  stroke-width: 3;
+  stroke-dasharray: 1,2;
+  stroke-width: 1.6;
 }
 svg g.element[element-id].hover .hoverstylethin {
   stroke: var(--wfadaptor-hover);
-  stroke-width: 2;
+  stroke-dasharray: 1,2;
+  stroke-width: 1.6;
 }
 svg g.element[element-id].hover > text.label {
   color: var(--wfadaptor-selected);

data/cockpit/david.html

@@ -0,0 +1,292 @@
+<!--
+  This file is part of CPEE.
+
+  CPEE is free software: you can redistribute it and/or modify it under the terms
+  of the GNU General Public License as published by the Free Software Foundation,
+  either version 3 of the License, or (at your option) any later version.
+
+  CPEE is distributed in the hope that it will be useful, but WITHOUT ANY
+  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+  PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License along with
+  CPEE (file COPYING in the main directory).  If not, see
+  <http://www.gnu.org/licenses/>.
+-->
+
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <title>CPEE Cockpit</title>
+
+    <!-- libs, do not modify. When local than load local libs. -->
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
+    <script type="text/javascript" src="/js_libs/util.js"></script>
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
+
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
+
+    <script type="text/javascript" src="/js_libs/uidash.js"></script>
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
+
+    <script type="text/javascript" src="https://lehre.bpm.in.tum.de/~ge64teg/bachelor-thesis/build-bpmn.js"></script>
+
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
+    <link   rel="stylesheet"      href="/js_libs/uidash.css" type="text/css"/>
+
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
+
+    <!-- modelling ui -->
+    <script type="text/javascript" src="js/wfadaptor.js"></script>
+    <link rel="stylesheet" href="css/wfadaptor.css" type="text/css" data-include-export="true"/>
+
+    <!-- custom stuff, play arround  -->
+    <script type="text/javascript" src="js/ui.js"></script>
+    <script type="text/javascript" src="js/instance.js"></script>
+    <script type="text/javascript" src="js/details.js"></script>
+    <script type="text/javascript" src="js/parameters.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
+    <script type="text/javascript" src="js/modifiers.js"></script>
+    <script type="text/javascript" src="themes/base.js"></script>
+    <link rel="stylesheet" href="css/ui.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
+    <style>
+      /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
+      /* shit balls, no elegance is left in this world */
+    </style>
+  </head>
+  <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
+     <div id='disclaimer' class='hidden'> <!--{{{-->
+       <h1>Disclaimer</h1>
+
+       <p>
+         We use reasonable care in creating and presenting the functionality
+         found in this demonstrator. It is provided purely for demonstration purposes
+         and you should seek further guidance and make independent enquiries
+         before relying upon it.
+       </p>
+
+       <p>
+         All functionality included in this demonstrator is subject to change
+         without notice. We make no representation or warranty whatsoever
+         regarding the completeness, accuracy, adequacy, suitability or
+         operation of this demonstrator, or of the results it produces.
+       </p>
+
+       <p>
+         We assume no responsibility for process instances created with this
+         demonstrator and disclaim all liability arising from negligence or
+         otherwise in respect of such process instances. We will not be liable
+         for any damages (including, without limitation, damages for any
+         consequential loss or loss of business opportunities or projects, or
+         loss of profits) howsoever arising from use of or inability to use
+         this demonstrator, or from any action or omission taken as a result of
+         using this demonstrator.
+       </p>
+
+       <p>
+         This demonstrator is hosted in Austria. All liability is excluded to the extent
+         permitted by law including any implied terms. Any interpretation of its
+         content, claims or disputes (of whatever nature and not limited to contractual
+         issues) shall be subject to the exclusive jurisdiction of the Austrian Courts
+         under Austrian law.
+       </p>
+
+       <p>
+         All actions performed while using this demonstrator will be logged, including
+         the IP address of the user.
+       </p>
+
+       <p>
+         <input id='iagree' type='checkbox'/><label for='iagree'><strong>OK, I Agree with this terms. I will be a happy person, and do no evil.</strong></label>
+       </p>
+       <p>
+        <button id='icontinue' disabled='disabled'>Continue</button>
+       </p>
+    </div> <!--}}}-->
+
+    <div class='hidden' id='relaxngworker'></div>
+
+    <div class='menu' id='templates'></div>
+    <div class='menu' id='modeltypes'></div>
+
+    <template id="label">
+      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0; left: 0;" class="displaylabel">
+        <g transform="translate(1 %%1) rotate(-%%2)">
+          <rect class="displaylabel" width="200" height="14" x="8" y="0" rx="5" ry="5"/>
+          <path class="displaylabel" d="M10,13 0,13 8,8"/>
+          <path class="displaylabelinner" d="M10,11.5 8.5,11.5 8.5,9.5 10,9.5"/>
+          <text class="label" x="18" y="10">aaaa</text>
+        </g>
+      </svg>
+    </template>
+
+    <ui-tabbed id="instance">
+      <ui-tabbar>
+        <ui-tab class="switch"                                                ></ui-tab>
+        <ui-tab class=""                data-tab="new"       id="tabnew"      >New</ui-tab>
+        <ui-tab class="inactive hidden" data-tab="instance"  id="tabinstance" >Instance</ui-tab>
+        <ui-tab class="inactive hidden" data-tab="execution" id="tabexecution">Execution</ui-tab>
+        <ui-behind                                                            ><a style='display:none' target='_blank' id='current-instance'></a><a style='display:none' target='_blank' id='current-instance-properties'>P</a><a style='display:none' target='_blank' id='current-instance-subscriptions'>S</a><a style='display:none' target='_blank' id='current-instance-callbacks'>C</a></ui-behind>
+        <ui-last                                                              ><a class="logo" href=".."></a></ui-last>
+      </ui-tabbar>
+      <ui-content>
+        <ui-area data-belongs-to-tab="new" id="areanew"> <!--{{{-->
+          <table class='x-ui-layout'>
+          <tr>
+            <td>Resources:</td>
+            <td><input name="res-url" type="text" value=""/></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Engine:</td>
+            <td><input name="base-url" type="text" value=""/></td>
+            <td><button name="base">create new instance</button></td>
+          </tr>
+          <tr>
+            <td>Instance:</td>
+            <td><input name="instance-url" type="text" value=""/></td>
+            <td><button name="instance">monitor instance</button></td>
+          </tr>
+          </table>
+        </ui-area> <!--}}}-->
+        <ui-area data-belongs-to-tab="instance" id="areainstance" class="inactive"> <!--{{{-->
+          <div>
+            <div class='section'>
+              <div>
+                <form id='fuckchrome'>
+                  <input type='file' name='testsetfile' id='testsetfile'/>
+                </form>
+                <button title='a template includes various settings, subscriptions or a (partial) model' name="loadtestset">load template</button><button title='a testset includes various settings, subscriptions or a model' name="loadtestsetfile">load testset</button>
+              </div>
+              <div>
+                <input type='file' name='modelfile' id='modelfile'/>
+                <button title='a standalone process model is only loadable if the currently loaded testset sucessfully prepared the current instance for the type of model' name="loadmodelfile">load model</button>
+              </div>
+            </div><div class='section'>
+              <div>
+                <a id="savetestsetfile" href="" download=""></a>
+                <a id="savesvgfile" href="" download=""></a>
+                <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
+                <button title='the SVG contains the graphical repesentation of the CPEE tree as you see it on the screen' name="savesvgfile">save svg<br>graph</button>
+              </div>
+              <div>
+                <a id="savebpmnfile" href="" download=""></a>
+                <button title='the BPMN includes a graphical representation that can be loaded in Signavio and Camundal' name="savebpmnfile">save BPMN</button>
+              </div>
+            </div><div class='section' id='modifiers'>
+              <template id="item">
+                <div>
+                  <div class='title'><strong></strong></div>
+                  <div class='select'><select></select></div>
+                  <div class='additional'></div>
+                </div>
+              </template>
+            </div>
+          </div>
+        </ui-area> <!--}}}-->
+        <ui-area data-belongs-to-tab="execution" id="areaexecution" class='inactive'> <!--{{{-->
+          <table class='x-ui-compact'>
+            <tbody class='debug'>
+              <tr>
+                <td>Debugging:</td>
+                <td><input type="checkbox" name="votecontinue"/></td>
+              </tr>
+            </tbody>
+            <tbody class='exe'>
+              <tr>
+                <td>State:</td>
+                <td id='state'>
+                  <span id="state_text"></span>
+                  <span id="state_any" style='display:none'>
+                    <span> ⇒ </span>
+                    <button name="state_start" title='start' style='display:none'>Start</button>
+                    <button name="state_stop" title='stop' style='display:none'>Stop</button>
+                    <span id="state_extended" style='display:none'>
+                      <span> / </span>
+                      <button name="state_abandon" title='abandon' style='display:none'>Abandon</button>
+                    </span>
+                  </span>
+                </td>
+              </tr>
+              <tr>
+                <td>Continue:</td>
+                <td id='votes'></td>
+              </tr>
+            </tbody>
+          </table>
+        </ui-area> <!--}}}-->
+      </ui-content>
+    </ui-tabbed>
+
+    <ui-tabbed class="hidden" id='parameters'>
+      <ui-tabbar>
+        <ui-tab class="switch"                                               ></ui-tab>
+        <ui-tab class=""         data-tab="dataelements" id="tabdataelements">Data Objects</ui-tab>
+        <ui-tab class="inactive" data-tab="endpoints"    id="tabendpoints"   >Endpoints</ui-tab>
+        <ui-tab class="inactive" data-tab="attributes"   id="tabattributes"  >Attributes</ui-tab>
+        <ui-behind                                                           ></ui-behind>
+      </ui-tabbar>
+      <ui-content>
+        <ui-area data-belongs-to-tab="dataelements" id="areadataelements"> <!--{{{-->
+          <button title='add entry'><span>New</span></button>
+          <div id="dat_dataelements"></div>
+        </ui-area> <!--}}}-->
+        <ui-area data-belongs-to-tab="endpoints" id="areaendpoints" class="inactive"> <!--{{{-->
+          <button title='add entry'><span>New</span></button>
+          <div id="dat_endpoints"></div>
+        </ui-area> <!--}}}-->
+        <ui-area data-belongs-to-tab="attributes" id="areaattributes" class="inactive"> <!--{{{-->
+          <button title='add entry'><span>New</span></button>
+          <div id="dat_attributes"></div>
+        </ui-area> <!--}}}-->
+      </ui-content>
+    </ui-tabbed>
+
+    <ui-resizehandle class="hidden">drag to resize</ui-resizehandle>
+
+    <ui-rest id="main" class="hidden">
+      <ui-tabbar>
+        <ui-before                                                 ></ui-before>
+        <ui-tab class=""         data-tab="details" id="tabdetails">Graph</ui-tab>
+        <ui-tab class="inactive" data-tab="dsl"     id="tabdsl"    >Description</ui-tab>
+        <ui-tab class="inactive" data-tab="log"     id="tablog"    >Log</ui-tab>
+        <ui-behind                                                 ><a style='display:none' target='_blank' id='current-track'>T</a><a style='display:none' target='_blank' id='current-graph'>G</a></ui-behind>
+      </ui-tabbar>
+      <ui-content>
+        <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
+          <div id="modelling">
+            <div id='graphgrid'>
+              <div class="resource-label" style="display: none"></div>
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' width='1' height='1'></svg>
+            </div>
+          </div>
+        </ui-area>
+        <ui-resizehandle data-belongs-to-tab="details" data-label="drag to resize"></ui-resizehandle>
+        <ui-area data-belongs-to-tab="details" id="detailcolumn">
+          <div id="dat_details" class='x-ui-layout'></div>
+        </ui-area>
+        <ui-area data-belongs-to-tab="dsl" id="areadsl" class="inactive"></ui-area>
+        <ui-area data-belongs-to-tab="log" id="arealog" class="inactive"> <!--{{{-->
+          <div>Persistent Log: <a style='display:none' target='_blank' id='current-log'></a> [<a style='display:none' target='_blank' id='shifted-log'>S</a>]</div>
+          <table id="dat_log" class="x-ui-layout"></table>
+        </ui-area> <!--}}}-->
+      </ui-content>
+    </ui-rest>
+
+  </body>
+</html>

data/cockpit/edit.html

@@ -19,6 +19,7 @@
   <head>
     <meta charset="utf-8"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="icon" type="image/png" href="/favicon.png">
     <title>CPEE Cockpit</title>
 
     <!-- libs, do not modify. When local than load local libs. -->
@@ -40,6 +41,8 @@
     <script type="text/javascript" src="/js_libs/uidash.js"></script>
     <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    <script type="text/javascript" src="/js_libs/build-bpmn.js"></script>
+
     <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
     <link   rel="stylesheet"      href="/js_libs/uidash.css" type="text/css"/>
 
@@ -54,13 +57,13 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="js/edit.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
@@ -174,10 +177,16 @@
                 <button title='a standalone process model is only loadable if the currently loaded testset sucessfully prepared the current instance for the type of model' name="loadmodelfile">load model</button>
               </div>
             </div><div class='section'>
-              <a id="savetestsetfile" href="" download=""></a>
-              <a id="savesvgfile" href="" download=""></a>
-              <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
-              <button title='a testset includes various settings, subscriptions and a model' name="savesvgfile">save svg<br>graph</button>
+              <div>
+                <a id="savetestsetfile" href="" download=""></a>
+                <a id="savesvgfile" href="" download=""></a>
+                <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
+                <button title='the SVG contains the graphical repesentation of the CPEE tree as you see it on the screen' name="savesvgfile">save svg<br>graph</button>
+              </div>
+              <div>
+                <a id="savebpmnfile" href="" download=""></a>
+                <button title='the BPMN includes a graphical representation that can be loaded in Signavio and Camundal' name="savebpmnfile">save BPMN</button>
+              </div>
             </div><div class='section' id='modifiers'>
               <template id="item">
                 <div>

data/cockpit/graph.html

@@ -55,11 +55,11 @@
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="css/graph.css" type="text/css"/>
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">