cpee 1.3.102

data/cockpit/contrib/transformation1.xsl

@@ -0,0 +1,264 @@
+    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:d="http://cpee.org/ns/description/1.0">
+      <xsl:output method="text"/>
+      <xsl:strip-space elements="*"/>
+      <xsl:variable name="myspacemultiplier">2</xsl:variable>
+
+      <xsl:template match="/">
+        <xsl:apply-templates select="//d:description"/>
+      </xsl:template>
+
+      <xsl:template match="//d:description">
+        <xsl:apply-templates>
+          <xsl:with-param name="myspace"><xsl:value-of select="-1*$myspacemultiplier"/></xsl:with-param>
+        </xsl:apply-templates>  
+      </xsl:template>
+
+      <xsl:template match="*">
+        <xsl:param name="myspace"/>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:if test="name()='call' or name()='manipulate'">
+          <xsl:choose>  
+            <xsl:when test="@lay">
+              <xsl:text>activity [:</xsl:text>
+              <xsl:value-of select="@id"/>
+              <xsl:text>,</xsl:text>
+              <xsl:value-of select="@lay"/>
+              <xsl:text>]</xsl:text>
+            </xsl:when>
+            <xsl:otherwise>
+              <xsl:text>activity :</xsl:text>
+              <xsl:value-of select="@id"/>
+            </xsl:otherwise>
+          </xsl:choose>
+        </xsl:if>
+        <xsl:if test="name()='call'">
+          <xsl:text>, :call, :</xsl:text>
+          <xsl:value-of select="@endpoint"/>
+          <xsl:apply-templates select="d:parameters"/>
+          <xsl:apply-templates select="d:manipulate" mode="part-of-call">
+            <xsl:with-param name="myspace"><xsl:value-of select="$myspace"/></xsl:with-param>
+          </xsl:apply-templates>
+          <xsl:call-template name="print-newline"/>
+        </xsl:if>
+        <xsl:if test="name()='manipulate'">
+          <xsl:text>, :manipulate</xsl:text>
+          <xsl:call-template name="print-content">
+            <xsl:with-param name="myspace"><xsl:value-of select="$myspace"/></xsl:with-param>
+          </xsl:call-template>
+          <xsl:call-template name="print-newline"/>
+        </xsl:if>
+        <xsl:if test="name()='parallel'">
+          <xsl:text>parallel</xsl:text>
+          <xsl:if test="@wait">
+            <xsl:text> :wait => </xsl:text>
+            <xsl:value-of select="@wait"/>
+          </xsl:if>
+          <xsl:text> do</xsl:text>
+          <xsl:call-template name="print-newline"/>
+          <xsl:apply-templates>
+            <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:apply-templates>
+          <xsl:call-template name="print-space">
+            <xsl:with-param name="i">1</xsl:with-param>
+            <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:call-template>
+          <xsl:text>end</xsl:text>
+          <xsl:call-template name="print-newline"/>
+        </xsl:if>
+        <xsl:if test="name()='loop'">
+          <xsl:text>loop </xsl:text>
+          <xsl:if test="@pre_test">
+            <xsl:text>pre_test{</xsl:text>
+            <xsl:value-of select="@pre_test"/>
+            <xsl:text>} </xsl:text>
+          </xsl:if>
+          <xsl:if test="@post_test">
+            <xsl:text>post_test{</xsl:text>
+            <xsl:value-of select="@post_test"/>
+            <xsl:text>} </xsl:text>
+          </xsl:if>
+          <xsl:text>do</xsl:text>
+          <xsl:call-template name="print-newline"/>
+          <xsl:apply-templates>
+            <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:apply-templates>
+          <xsl:call-template name="print-space">
+            <xsl:with-param name="i">1</xsl:with-param>
+            <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:call-template>
+          <xsl:text>end</xsl:text>
+          <xsl:call-template name="print-newline"/>
+        </xsl:if>
+        <xsl:if test="name()='choose'">
+          <xsl:text>choose do</xsl:text>
+          <xsl:call-template name="print-newline"/>
+          <xsl:apply-templates>
+            <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:apply-templates>
+          <xsl:call-template name="print-space">
+            <xsl:with-param name="i">1</xsl:with-param>
+            <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:call-template>
+          <xsl:text>end</xsl:text>
+          <xsl:call-template name="print-newline"/>
+        </xsl:if>
+      </xsl:template>
+      
+      <xsl:template match="d:alternative">
+        <xsl:param name="myspace"/>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>alternative </xsl:text>
+        <xsl:value-of select="@condition"/>
+        <xsl:text> do</xsl:text>
+        <xsl:call-template name="print-newline"/>
+        <xsl:apply-templates>
+          <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:apply-templates>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>end</xsl:text>
+        <xsl:call-template name="print-newline"/>
+      </xsl:template>
+
+      <xsl:template match="d:otherwise">
+        <xsl:param name="myspace"/>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>otherwise do</xsl:text>
+        <xsl:call-template name="print-newline"/>
+        <xsl:apply-templates>
+          <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:apply-templates>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>end</xsl:text>
+        <xsl:call-template name="print-newline"/>
+      </xsl:template>
+
+      <xsl:template match="d:parallel_branch">
+        <xsl:param name="myspace"/>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>parallel_branch</xsl:text>
+        <xsl:if test="@pass">
+          <xsl:text> </xsl:text>
+          <xsl:value-of select="@pass"/>
+        </xsl:if>
+        <xsl:text> do</xsl:text>
+        <xsl:if test="@local">
+          <xsl:text> |</xsl:text>
+          <xsl:value-of select="@local"/>
+          <xsl:text>|</xsl:text>
+        </xsl:if>
+        <xsl:call-template name="print-newline"/>
+        <xsl:apply-templates>
+          <xsl:with-param name="myspace"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:apply-templates>
+        <xsl:call-template name="print-space">
+          <xsl:with-param name="i">1</xsl:with-param>
+          <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+        </xsl:call-template>
+        <xsl:text>end</xsl:text>
+        <xsl:call-template name="print-newline"/>
+      </xsl:template>
+
+      <xsl:template match="d:parameters">
+        <xsl:apply-templates select="d:*" mode="parameter"/>
+      </xsl:template>
+        
+      <xsl:template match="d:*" mode="parameter">
+        <xsl:text>, :</xsl:text>
+        <xsl:value-of select="name()"/>
+        <xsl:text> => </xsl:text>
+        <xsl:choose>  
+          <xsl:when test="count(*) > 0">
+            <xsl:text>[</xsl:text>
+            <xsl:apply-templates select="d:*" mode="sub-parameter"/>
+            <xsl:text>]</xsl:text>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:text>"</xsl:text>
+            <xsl:value-of select="text()"/>
+            <xsl:text>"</xsl:text>
+          </xsl:otherwise>
+        </xsl:choose>  
+      </xsl:template>
+      
+      <xsl:template match="d:*" mode="sub-parameter">
+        <xsl:text> { :</xsl:text>
+        <xsl:value-of select="name()"/>
+        <xsl:text> => </xsl:text>
+        <xsl:value-of select="text()"/>
+        <xsl:text> }</xsl:text>
+        <xsl:choose>  
+          <xsl:when test=". = ../*[last()]">
+            <xsl:text> </xsl:text>
+          </xsl:when>
+          <xsl:otherwise>
+            <xsl:text>,</xsl:text>
+          </xsl:otherwise>
+        </xsl:choose>  
+      </xsl:template>
+
+      <xsl:template match="d:manipulate" mode="part-of-call">
+        <xsl:param name="myspace"/>
+        <xsl:call-template name="print-content">
+          <xsl:with-param name="myspace"><xsl:value-of select="$myspace"/></xsl:with-param>
+        </xsl:call-template>
+      </xsl:template>
+
+      <xsl:template name="print-content">
+        <xsl:param name="myspace"/>
+        <xsl:if test="text()">
+          <xsl:text> do </xsl:text>
+          <xsl:if test="@output">
+            <xsl:text>|</xsl:text>
+            <xsl:value-of select="@output"/>
+            <xsl:text>|</xsl:text>
+          </xsl:if>
+          <xsl:call-template name="print-newline"/>
+          <xsl:value-of select="text()"/>
+          <xsl:call-template name="print-newline"/>
+          <xsl:call-template name="print-space">
+            <xsl:with-param name="i">1</xsl:with-param>
+            <xsl:with-param name="count"><xsl:value-of select="$myspace+$myspacemultiplier"/></xsl:with-param>
+          </xsl:call-template>
+          <xsl:text>end</xsl:text>
+        </xsl:if>
+      </xsl:template>
+
+      <xsl:template name="print-space">
+        <xsl:param name="i"/>
+        <xsl:param name="count"/>
+        <xsl:if test="$i &lt;= $count">
+          <xsl:text> </xsl:text>
+          <xsl:call-template name="print-space">
+            <xsl:with-param name="i">
+              <xsl:value-of select="$i + 1"/>
+            </xsl:with-param>
+            <xsl:with-param name="count">
+              <xsl:value-of select="$count"/>
+            </xsl:with-param>
+          </xsl:call-template>
+        </xsl:if>
+      </xsl:template>
+      <xsl:template name="print-newline">
+        <xsl:text>
+</xsl:text>
+      </xsl:template>
+
+    </xsl:stylesheet>

data/cockpit/contrib/transformation2.xsl

@@ -0,0 +1,10 @@
+<tp:profile xmlns:tp="http://cpee.org/transformation/profile/1.0">
+  <tp:from>
+    <tp:base>http://docs.oasis-open.org/wsbpel/2.0/process/executable</tp:base>
+    <tp:extension>http://www.activebpel.org/2006/09/bpel/extension/query_handling</tp:extension>
+  </tp:from>
+  <tp:to>
+    <tp:dsl>http://sumatra.pri.univie.ac.at:9290/dsl</tp:dsl>
+    <tp:base>http://sumatra.pri.univie.ac.at:9290/base</tp:base>
+  </tp:to>
+</tp:profile>

data/cockpit/css/ui.css

@@ -0,0 +1,155 @@
+#areanew                       { height: 9.6em; } 
+#areanew td:nth-child(1)       { width: 7em; padding-right: 1em; }
+#areanew td:nth-child(3)       { width: 16em; padding-left: 1em; }
+#areanew input                 { width: 100%;  }
+#areanew button[name=base]     { width: 100%;  }
+#areanew button[name=instance] { width: 100%;  }
+
+div.tabbed table.tabbar td.tabbehind input { 
+  border: 0 none; 
+  text-align: right; 
+  width: 100%;
+}
+
+div.tabbed table.tabbar td.tabbehind button {
+  border: 1pt solid buttonshadow;
+  margin-left: 0.5em;
+}
+
+button.highlight { background-color: #cc0000; }
+
+#parameters .tabbelow { height: 9em; min-height: 1.7em; }
+
+#areadataelements { height: 100%; overflow-x: hidden; overflow-y: scroll; }
+#areaendpoints    { height: 100%; overflow: auto; }
+#areaexecution    { height: 9.6em; overflow: auto; }
+
+#areainstance                       { height: 9.6em; overflow: hidden; }
+#areainstance td:nth-child(1)       { padding-right: 0.5em; }
+#areainstance td:nth-child(2)       { padding-right: 0.5em; }
+#areainstance input                 { padding: 0; margin:0; }
+#areainstance button                { white-space:nowrap; }
+#areainstance table.compact.loadsave td:nth-child(4) { padding-left: 0.5em; border-left: 1px solid ButtonShadow; }
+#areainstance table.compact.loadsave td:nth-child(5) { padding-left: 0.5em; }
+#areainstance table.compact.loadsave td:nth-child(6) { padding-left: 0.5em; border-left: 1px solid ButtonShadow; }
+#areainstance table.compact.loadsave tr:nth-child(1) td { padding-top: 0.5em; }
+#areainstance hr { height: 1px; color: ButtonShadow; background-color: ButtonShadow; border: 0 none; padding-bottom: 0; margin-bottom: 0; }
+#areainstance select                { width: 28em; }
+#areainstance input[type=file]      { width: 28em; }
+#areainstance table.compact.loadsave td:nth-child(4) button { height: 4em; }
+#areainstance table.compact.loadsave td:nth-child(6) button { height: 4em; }
+
+#dat_log { width:100%; }
+#dat_log td { vertical-align: top; }
+#dat_log tr:nth-child(odd) { background-color: ButtonFace; color: ButtonText; }
+
+#areadetails { table-layout: fixed; }
+
+#dat_endpoints {
+  border-collapse:collapse;
+  border-spacing:0;
+  border:0 none;
+  margin:0;
+  padding:0;
+  width: 100%;
+}
+#dat_endpoints button                  { border: 1pt solid buttonshadow; padding: 0; }
+#dat_endpoints td:nth-child(1)         { width: 1.2em; font-size: 1.3em; font-weight: bold; }
+#dat_endpoints td:nth-child(2)         { width: 8em; }
+#dat_endpoints td:nth-child(3)         { width: 1em; }
+#dat_endpoints tr:nth-child(odd)       { background-color: ButtonFace; color: ButtonText; }
+#dat_endpoints tr:nth-child(odd) input { background-color: ButtonFace; }
+#dat_endpoints input                   { border: 0 none; padding: 0; margin: 0; }
+#dat_endpoints input:first-child       { border: 0 none; width: 8em; }  
+#dat_endpoints input:last-child        { border: 0 none; width: 100%; }
+
+#dat_dataelements {
+  border-collapse:collapse;
+  border-spacing:0;
+  border:0 none;
+  margin:0;
+  padding:0;
+  width: 100%;
+}
+#dat_dataelements button                  { border: 1pt solid buttonshadow; padding: 0; }
+#dat_dataelements td:nth-child(1)         { width: 1.2em; font-size: 1.3em; font-weight: bold;}
+#dat_dataelements td:nth-child(2)         { width: 8em; }
+#dat_dataelements td:nth-child(3)         { width: 1em; }
+#dat_dataelements tr:nth-child(odd)       { background-color: ButtonFace; color: ButtonText; }
+#dat_dataelements tr:nth-child(odd) input { background-color: ButtonFace; }
+#dat_dataelements input                   { border: 0 none; padding: 0; margin: 0; }
+#dat_dataelements input:first-child       { border: 0 none; width: 8em; }  
+#dat_dataelements input:last-child        { border: 0 none; width: 100%; }
+
+#dat_dsl {
+  margin: 1em;
+  font-family: monospace; 
+  font-size:1.3em;
+}
+
+span.active {
+  font-weight: bold;
+  color: #cc0000;
+}
+span.passive {
+  font-weight: bold;
+  color: #3465a4;
+}
+span.vote {
+  font-weight: bold;
+  color: #73d216;
+}
+
+#detailcolumn { width: 50%; }
+#detailcolumn .column { padding-left: 2em; }
+#graphcolumn { margin: 0; padding: 0; border-right: 1pt solid ButtonShadow; min-width: 9em; }
+#graphcolumn .column { margin: 0; padding: 0; }
+
+.ui-resizable-handle { 
+  z-index: 99999; 
+  color: ButtonShadow;
+  position: absolute;
+  white-space:nowrap;
+}
+.ui-resizable-w { 
+  cursor: w-resize; 
+  -webkit-transform: rotate(90deg); 
+  -webkit-transform-origin: 0% 100%; 
+  -moz-transform: rotate(90deg); 
+  -moz-transform-origin: left bottom; 
+  margin-top: -1em;
+  margin-left: 0.3em;
+}
+.ui-resizable-s { 
+  right:2em;
+  cursor: s-resize; 
+  text-align: right;
+  margin-top: 1.1em;
+}
+
+#dat_details {
+  border-collapse:collapse;
+  border-spacing:0;
+  border:0 none;
+  margin:0;
+  padding:0;
+  width: 100%;
+}
+#dat_details td.del                     { width: 1.2em; }
+#dat_details td.del a                   { font-size: 1.3em; font-weight: bold; }
+#dat_details td.pname                   { width: 7em;    vertical-align: top; }
+#dat_details td.cname                   { width: 10.2em; vertical-align: top; padding-top:0.25em; }
+#dat_details td.sep                     { width: 1em;    vertical-align: top; padding-top:0.25em; }
+#dat_details tr.indent td:nth-child(1)  { padding-left: 2em;}
+#dat_details tr:nth-child(odd) input    { background-color: ButtonFace; }
+#dat_details tr:nth-child(odd) textarea { background-color: ButtonFace; }
+#dat_details tr:nth-child(odd) select   { background-color: ButtonFace; }
+#dat_details tr:nth-child(even) select  { background-color: white; }
+#dat_details input                      { border: 0 none; width: 100%; padding: 0; margin: 0; }
+#dat_details select                     { border: 0 none; width: 100%; padding: 0; margin: 0; }
+#dat_details textarea                   { border: 0 none; width: 100%; padding: 0; margin: 0; }
+#dat_details tr.header td               { padding-bottom:0.2em; padding-top: 0.6em; }
+#dat_details tr.sizer td                { padding:0; margin:0; }
+
+#dat_details tr:nth-child(odd) { background-color: ButtonFace; color: ButtonText; }
+#dat_details .header button { border: 1pt solid buttonshadow; }

data/cockpit/index.html

@@ -0,0 +1,241 @@
+<!--
+  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 http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>CPEE Cockpit</title>
+
+    <!-- libs, do not modify -->
+
+    <script type="text/javascript" src="lib/jquery.min.js"></script>
+    <script type="text/javascript" src="lib/jquery.svgdom.js"></script>
+    <script type="text/javascript" src="lib/jquery-ui.custom.min.js"></script>
+    <script type="text/javascript" src="lib/util.js"></script>
+    <script type="text/javascript" src="lib/printf.js"></script>
+    <script type="text/javascript" src="lib/strftime.min.js"></script>
+    <script type="text/javascript" src="lib/parsequery.js"></script>
+    <script type="text/javascript" src="lib/underscore.min.js"></script>
+    <script type="text/javascript" src="lib/jquery.caret.min.js"></script>
+
+    <script type="text/javascript" src="lib/contextmenu.js"></script>
+    <script type="text/javascript" src="lib/wfadaptor.js"></script>
+    <script type="text/javascript" src="lib/ui.js"></script>
+
+    <link rel="stylesheet" href="lib/wfadaptor.css" type="text/css"/>
+    <link rel="stylesheet" href="lib/contextmenu.css" type="text/css"/>
+    <link rel="stylesheet" href="lib/ui.css" type="text/css"/>
+
+    <!-- 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/wfadaptor.cpee.js"></script>
+    <link rel="stylesheet" href="css/ui.css" type="text/css"/>
+    <link rel="stylesheet" href="css/ui.css" type="text/css"/>
+  </head>
+  <body>
+    <!-- The following six are templates that get used during ui generation, change them carefully -->
+    <table id="dat_template_pair" class='hidden'> <!--{{{-->
+      <tr class="pair">
+        <td class='del'><a href='' tabindex='-1' title='Delete Item (Ctrl-D)'>✖</a></td>
+        <td class='pname'><input pattern="[a-zA-Z][a-zA-Z0-9_]*" placeholder='fill in name...' type='text' class='pair_name' value=''/></td>
+        <td class='sep'>⇒</td>
+        <td class='pvalue'><input placeholder='fill in value...' class='pair_value' value=''/></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_sizer" class='hidden'> <!--{{{-->
+      <tr class='sizer'>
+        <td class='del'></td>
+        <td class='pname'></td>
+        <td class='sep'></td>
+        <td class='value'></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_input" class='hidden'> <!--{{{-->
+      <tr>
+        <td class='cname' colspan='2'><strong class="prop_name"></strong></td>
+        <td class='sep'>⇒</td>
+        <td class='value'><input type="text" class="prop_value" value=""/></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_readonly" class='hidden'> <!--{{{-->
+      <tr>
+        <td class='cname' colspan='2'><strong class="prop_name"></strong></td>
+        <td class='sep'>⇒</td>
+        <td class='value'><input type="text" readonly='readonly' class="prop_value" value=""/></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_area" class='hidden'> <!--{{{-->
+      <tr>
+        <td class='cname' colspan='2'><strong class="prop_name"></strong></td>
+        <td class='sep'>⇒</td>
+        <td class='value'><textarea rows='3' class="prop_value"></textarea></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_header" class='hidden'> <!--{{{-->
+      <tr class='header'>
+        <td colspan='4'><strong class="header_value"></strong> <button title='Ctrl-N while editing entry'>New</button></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_line" class='hidden'> <!--{{{-->
+      <tr>
+        <td class='cname' colspan='2'></td>
+        <td class='sep'>⇒</td>
+        <td class='value'><em class="line_main"></em><em>:</em> <span class='line_text'></span></td>
+      </tr>
+    </table> <!--}}}-->
+    <table id="prop_template_select" class='hidden'> <!--{{{-->
+      <tr>
+        <td class='cname' colspan='2'><strong class="prop_name"></strong></td>
+        <td class='sep'>⇒</td>
+        <td class='value'><select class="prop_value"></select></td>
+      </tr>
+    </table> <!--}}}-->
+
+    <div class="tabbed" id="instance">
+      <table class="tabbar">
+        <tr>
+          <td class="tab switch"                            ><h1></h1></td>
+          <td class="tab"                 id="tabnew"       ><h1>New</h1></td>
+          <td class="tab inactive hidden" id="tabinstance"  ><h1>Instance</h1></td>
+          <td class="tab inactive hidden" id="tabexecution" ><h1>Execution</h1></td>
+          <td class="tabbehind"><input name="current-instance" type="text" value="" readonly='readonly'/></td>
+        </tr>
+        <tr class="border hidden"><td colspan="5"></td></tr>
+      </table>
+      <div class="tabbelow">
+        <div id="areanew"> <!--{{{-->
+          <table class='layout'>
+          <tr>
+            <td>Base Url:</td>
+            <td><input name="base-url" type="text" value=""/></td>
+            <td><button name="base">create new instance</button></td>
+          </tr>
+          <tr>
+            <td>Instance Url:</td>
+            <td><input name="instance-url" type="text" value=""/></td>
+            <td><button name="instance">monitor instance</button></td>
+          </tr>
+          </table>
+        </div> <!--}}}-->
+        <div id="areainstance" class="inactive"> <!--{{{-->
+          <table class='compact info'>
+          <tr>
+            <td>Instance Url:</td>
+            <td></td>
+            <td id='current-instance'></td>
+          </tr>
+          <tr>
+            <td>Vote to Continue:</td>
+            <td></td>
+            <td><input type="checkbox" name="votecontinue"/></td>
+          </tr>
+          <tr>
+            <td>Vote to Stop:</td>
+            <td></td>
+            <td><input type="checkbox" name="votestop"/></td>
+          </tr>
+          </table>
+          <hr></hr>
+          <table class='compact loadsave'>
+          <tr>
+            <td><select name="testset-names"></select></td>
+            <td><button name="loadtestset">load from testset</button></td>
+            <td rowspan='3'></td>
+            <td rowspan='3'><button name="savetestset">save testset</button></td>
+            <td rowspan='3'></td>
+            <td rowspan='3'><button name="savesvg">save svg graph</button></td>
+          </tr>
+          <tr>
+            <td><input type='file' id='testsetfile'/></td>
+            <td><button name="loadtestsetfile">load from testset</button></td>
+          </tr>
+          </table>
+          <form id='saveform' method='post' target='_blank' action=''>
+            <input type='hidden' name='content' content=''/>
+          </form>
+        </div> <!--}}}-->
+        <div id="areaexecution" class='inactive'> <!--{{{-->
+          <table>
+            <tbody id="state"></tbody>
+            <tbody id="votes"></tbody>
+          </table>
+        </div> <!--}}}-->
+      </div>
+    </div>
+
+    <div class="tabbed hidden" id='parameters'>
+      <table class="tabbar">
+        <tr>
+          <td class="tab switch"                       ><h1></h1></td>
+          <td class="tab"          id="tabdataelements"><h1>Data Elements</h1></td>
+          <td class="tab inactive" id="tabendpoints"   ><h1>Endpoints</h1></td>
+          <td class="tabbehind"><button title='Ctrl-N while editing entry'>New</button><button title='Ctrl-S while editing entry'>Save</button></td>
+        </tr>
+        <tr class="border hidden"><td colspan="4"></td></tr>
+      </table>
+      <div class="tabbelow">
+        <div id="areadataelements"> <!--{{{-->
+          <table id="dat_dataelements"></table>
+        </div> <!--}}}-->
+        <div id="areaendpoints" class='inactive'> <!--{{{-->
+          <table id="dat_endpoints"></table>
+        </div> <!--}}}-->
+        <span id='handle1' class="ui-resizable-handle ui-resizable-s">drag to resize</span>
+      </div>
+    </div>
+
+    <div id="main" class="tabbed rest hidden">
+      <table class="tabbar">
+        <tr>
+          <td class="tabbefore"></td>
+          <td class="tab"          id="tabdetails"><h1>Graph</h1></td>
+          <td class="tab inactive" id="tabdsl"    ><h1>Description</h1></td>
+          <td class="tab inactive" id="tablog"    ><h1>Log</h1></td>
+          <td class="tabbehind"><button title='Ctrl-S while editing entry'>Save</button></td>
+        </tr>
+        <tr class="border hidden"><td colspan="3"></td></tr>
+      </table>
+      <table class="tabbelow columns" id="areadetails">
+        <tr>
+          <td id='graphcolumn'> <!--{{{-->
+            <div class='column'>
+              <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>
+          </td> <!--}}}-->
+          <td id="detailcolumn"> <!--{{{-->
+            <span id='handle2' class="ui-resizable-handle ui-resizable-w">drag to resize</span>
+            <div class='column'>
+              <table id="dat_details"></table>
+            </div>
+          </td> <!--}}}-->
+        </tr>
+      </table>
+      <div class="tabbelow">
+        <div id="areadsl" class="inactive"></div>
+        <div id="arealog" class="inactive"> <!--{{{-->
+          <table id="dat_log" class="layout">
+          </table>
+        </div> <!--}}}-->
+      </div>
+    </div>
+
+  </body>
+</html>