cpee 2.1.93 → 2.1.95

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf5b0ca7b67e6dbadba9928fa0eda969239240a09d0ea58294f7a066e8588899
-  data.tar.gz: e062395a4e937c3911a65631cdef394adebfc69595af72b6fdb2a2e99965479d
+  metadata.gz: 98ec380ca615921ed8c2652802995ab97de7b8a34f34c6a503f60b8f5758dfb9
+  data.tar.gz: b761b0623adf0bb79ccc6506ad5b26c7993b39b4585a88c8311a41172cab8ccb
 SHA512:
-  metadata.gz: fb94ceeb111ba2e7bef92d1916699280192502b15f270d0a80b72b15ffb2d55d650b6ee62e34780ae2caf02193e662eaaa4550bd9f6fefb0663e87c24fc3c9c6
-  data.tar.gz: d107315d6c39cb2f61dbbe7e85efdfc5d1d8b2f9319932376a3fb85d1cf7a6ce569bbd95c887a4201d904ca344da9434b33489c832ead6e44b8beeb34e95ce20
+  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

@@ -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; }

data/cockpit/css/wfadaptor.css

@@ -26,12 +26,6 @@
   --wfadaptor-label: #e4e4e4;
   --wfadaptor-mark: #d4d4d4;
 
-/*--wfadaptor-selected: #f57900;*/
-/*--wfadaptor-hover: #f57900;*/
-
-/*--wfadaptor-selected: #4ee7d1;*/
-/*--wfadaptor-hover: #4ee7d1;*/
-
   --wfadaptor-selected: #000000;
   --wfadaptor-selected-text: #f57900;
   --wfadaptor-hover: #000000;
@@ -46,12 +40,20 @@ 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);
   fill-opacity: 0.2;
@@ -298,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);
@@ -309,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);
@@ -320,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);
@@ -331,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;
@@ -363,7 +361,6 @@ 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);

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-">

data/cockpit/index.html

@@ -41,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"/>
 
@@ -55,12 +57,12 @@
     <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/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 */
@@ -176,10 +178,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>