Name: cockpit/lib/wfadaptor-doc/demo1.html 
1:
<!--
2:
  This file is part of CPEE.
3:
 
4:
  CPEE is free software: you can redistribute it and/or modify it under the terms
5:
  of the GNU General Public License as published by the Free Software Foundation,
6:
  either version 3 of the License, or (at your option) any later version.
7:
 
8:
  CPEE is distributed in the hope that it will be useful, but WITHOUT ANY
9:
  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
10:
  PARTICULAR PURPOSE.  See the GNU General Public License for more details.
11:
 
12:
  You should have received a copy of the GNU General Public License along with
13:
  CPEE (file COPYING in the main directory).  If not, see
14:
  <http://www.gnu.org/licenses/>.
15:
-->
16:
 
17:
<html>
18:
  <head>
19:
    <title>WfAdaptor Demo</title>
20:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
21:
    <script type="text/javascript" src="../jquery.min.js"></script>
22:
    <script type="text/javascript" src="../jquery.svgdom.js"></script>
23:
    <script type="text/javascript" src="../underscore.min.js"></script>
24:
    <script type="text/javascript" src="../contextmenu.js"></script>
25:
    <script type="text/javascript" src="../graph.js"></script>
26:
    <script type="text/javascript" src="../wfadaptor.js"></script>
27:
    <script type="text/javascript" src="../../js/wfadaptor.cpee.js"></script>
28:
    <link rel="stylesheet" href="../wfadaptor.css" type="text/css"/>
29:
    <link rel="stylesheet" href="../contextmenu.css" type="text/css"/>
30:
    <script type="text/javascript">
31:
      var adaptor = null;
32:
      var parser = DOMParser();
33:
      function click_update_graph() {
34:
        console.log("Demo: Graph Update");
35:
        var then = new Date();
36:
        adaptor.set_description($('#description').val());
37:
        $('#t_new').text((new Date()).getTime() - then.getTime() + 'ms');
38:
        then = new Date();
39:
        var xml = parser.parseFromString($('#description').val(),"text/xml");
40:
        var g = new WFGraph(xml,xml.documentElement, $("#canvas").get(0));
41:
        var width = g.generateGraph();
42:
        $('#t_old').text((new Date()).getTime() - then.getTime() + 'ms');
43:
      }
44:
      function update_event(element_id, operation) {
45:
        console.log("Demo: update notification [ID: "+element_id+ ", OP: "+operation+"]");
46:
      }
47:
    </script>
48:
  </head>
49:
  <body>
50:
    <table style="background: ThreeDShadow; width: 100%; height: 100%;" border="0">
51:
      <tr>
52:
        <td style="text-align:center; vertical-align:middle"><button type="button" onclick="click_update_graph();">Update Graph >>> </button></td>
53:
        <td style="text-align:center; vertical-align:middle" colspan="2"><b><font size="+2">Workflow Graph</font></b></td>
54:
      </tr>
55:
      <tr height="95%">
56:
        <td width="40%" style="vertical-align:middle; text-align:center"><!-- {{{ -->
57:
          <textarea style="width:98%;height:98%" id="description">
58:
<description xmlns="http://cpee.org/ns/description/1.0">
59:
  <call/><!--{{{-->
60:
  <call/>
61:
  <call/>
62:
 
63:
<!--  Parallel {{{ -->
64:
  <parallel>
65:
    <parallel_branch>
66:
      <call/>
67:
      <call/>
68:
    </parallel_branch>
69:
    <parallel_branch>
70:
      <call/>
71:
      <call/>
72:
    </parallel_branch>
73:
  </parallel>
74:
 
75:
  <parallel>
76:
    <parallel_branch>
77:
      <call/>
78:
      <choose>
79:
        <alternative>
80:
          <call/>
81:
        </alternative>
82:
        <otherwise>
83:
          <call/>
84:
        </otherwise>
85:
        <alternative>
86:
          <call/>
87:
        </alternative>
88:
      </choose>
89:
    </parallel_branch>
90:
    <parallel_branch>
91:
      <choose>
92:
        <alternative>
93:
          <call/>
94:
        </alternative>
95:
        <otherwise>
96:
          <call/>
97:
        </otherwise>
98:
        <alternative>
99:
          <call/>
100:
        </alternative>
101:
      </choose>
102:
      <call/>
103:
    </parallel_branch>
104:
  </parallel>
105:
 
106:
  <parallel>
107:
    <parallel_branch>
108:
      <call/>
109:
      <parallel>
110:
        <parallel_branch>
111:
          <call/>
112:
        </parallel_branch>
113:
        <parallel_branch>
114:
          <call/>
115:
          <call/>
116:
          <call/>
117:
        </parallel_branch>
118:
      </parallel>
119:
    </parallel_branch>
120:
    <parallel_branch>
121:
      <parallel>
122:
        <parallel_branch>
123:
          <call/>
124:
        </parallel_branch>
125:
        <parallel_branch>
126:
          <call/>
127:
          <call/>
128:
          <call/>
129:
        </parallel_branch>
130:
      </parallel>
131:
      <call/>
132:
    </parallel_branch>
133:
  </parallel>
134:
 
135:
  <parallel>
136:
    <parallel_branch>
137:
      <call/>
138:
      <loop>
139:
        <call/>
140:
        <call/>
141:
        <call/>
142:
      </loop>
143:
    </parallel_branch>
144:
    <parallel_branch>
145:
      <loop>
146:
        <call/>
147:
        <call/>
148:
        <call/>
149:
      </loop>
150:
      <call/>
151:
    </parallel_branch>
152:
  </parallel>
153:
 
154:
  <parallel>
155:
    <loop>
156:
      <call/>
157:
      <parallel_branch>
158:
          <call/>
159:
      </parallel_branch>
160:
    </loop>
161:
  </parallel>
162:
 
163:
  <parallel>
164:
    <loop>
165:
      <parallel_branch>
166:
          <call/>
167:
      </parallel_branch>
168:
      <call/>
169:
    </loop>
170:
  </parallel>
171:
 
172:
  <parallel>
173:
    <loop>
174:
      <parallel_branch>
175:
          <call/>
176:
      </parallel_branch>
177:
    </loop>
178:
  </parallel>
179:
 
180:
  <parallel>
181:
    <parallel_branch>
182:
      <call/>
183:
      <critical>
184:
        <call/>
185:
        <call/>
186:
        <call/>
187:
      </critical>
188:
    </parallel_branch>
189:
    <parallel_branch>
190:
      <critical>
191:
        <call/>
192:
      </critical>
193:
      <call/>
194:
    </parallel_branch>
195:
  </parallel>
196:
<!--  Parallel }}} -->
197:
<!--  Choose {{{ -->
198:
  <choose>
199:
    <alternative>
200:
      <call/>
201:
    </alternative>
202:
    <otherwise>
203:
      <call/>
204:
    </otherwise>
205:
    <alternative>
206:
      <call/>
207:
    </alternative>
208:
  </choose>
209:
 
210:
  <choose>
211:
    <alternative>
212:
      <call/>
213:
      <choose>
214:
        <alternative>
215:
          <call/>
216:
        </alternative>
217:
        <otherwise>
218:
          <call/>
219:
        </otherwise>
220:
      </choose>
221:
    </alternative>
222:
    <otherwise>
223:
      <choose>
224:
        <alternative>
225:
          <call/>
226:
        </alternative>
227:
        <otherwise>
228:
          <call/>
229:
        </otherwise>
230:
      </choose>
231:
      <call/>
232:
    </otherwise>
233:
    <alternative>
234:
      <call/>
235:
    </alternative>
236:
  </choose>
237:
 
238:
  <choose>
239:
    <alternative>
240:
      <call/>
241:
      <loop>
242:
        <call/>
243:
        <call/>
244:
      </loop>
245:
    </alternative>
246:
    <otherwise>
247:
      <loop>
248:
        <call/>
249:
        <call/>
250:
      </loop>
251:
      <call/>
252:
    </otherwise>
253:
    <alternative>
254:
      <call/>
255:
    </alternative>
256:
  </choose>
257:
 
258:
  <choose>
259:
    <alternative>
260:
      <call/>
261:
      <parallel>
262:
        <parallel_branch>
263:
          <call/>
264:
        </parallel_branch>
265:
        <parallel_branch>
266:
          <call/>
267:
        </parallel_branch>
268:
      </parallel>
269:
    </alternative>
270:
    <otherwise>
271:
      <parallel>
272:
        <parallel_branch>
273:
          <call/>
274:
        </parallel_branch>
275:
        <parallel_branch>
276:
          <call/>
277:
        </parallel_branch>
278:
      </parallel>
279:
      <call/>
280:
    </otherwise>
281:
    <alternative>
282:
      <call/>
283:
    </alternative>
284:
  </choose>
285:
 
286:
  <choose>
287:
    <alternative>
288:
      <call/>
289:
      <critical>
290:
        <call/>
291:
        <call/>
292:
      </critical>
293:
    </alternative>
294:
    <otherwise>
295:
      <critical>
296:
        <call/>
297:
        <call/>
298:
      </critical>
299:
      <call/>
300:
    </otherwise>
301:
    <alternative>
302:
      <call/>
303:
    </alternative>
304:
  </choose>
305:
 
306:
 
307:
<!--  Choose }}} -->
308:
  <!-- loop  {{{ -->
309:
  <loop>
310:
    <call/>
311:
    <call/>
312:
  </loop>
313:
  <loop>
314:
    <call/>
315:
    <choose>
316:
      <alternative>
317:
        <call/>
318:
        <choose>
319:
          <alternative>
320:
            <call/>
321:
          </alternative>
322:
          <otherwise>
323:
            <call/>
324:
          </otherwise>
325:
        </choose>
326:
      </alternative>
327:
      <otherwise>
328:
        <choose>
329:
          <alternative>
330:
            <call/>
331:
          </alternative>
332:
          <otherwise>
333:
            <call/>
334:
          </otherwise>
335:
        </choose>
336:
        <call/>
337:
      </otherwise>
338:
    </choose>
339:
  </loop>
340:
  <loop>
341:
    <loop>
342:
      <call/>
343:
      <call/>
344:
    </loop>
345:
  </loop>
346:
  <loop>
347:
    <parallel>
348:
      <parallel_branch>
349:
        <call/>
350:
      </parallel_branch>
351:
      <parallel_branch>
352:
        <call/>
353:
      </parallel_branch>
354:
    </parallel>
355:
  </loop>
356:
  <loop>
357:
    <critical>
358:
      <call/>
359:
      <call/>
360:
    </critical>
361:
  </loop>
362:
  <!-- loop  }}} -->
363:
  <!-- Critical  {{{ -->
364:
  <critical>
365:
    <call/>
366:
    <call/>
367:
  </critical>
368:
  <critical>
369:
    <critical>
370:
      <call/>
371:
      <call/>
372:
    </critical>
373:
  </critical>
374:
  <critical>
375:
    <call/>
376:
    <choose>
377:
      <alternative>
378:
        <call/>
379:
        <choose>
380:
          <alternative>
381:
            <call/>
382:
          </alternative>
383:
          <otherwise>
384:
            <call/>
385:
          </otherwise>
386:
        </choose>
387:
      </alternative>
388:
      <otherwise>
389:
        <choose>
390:
          <alternative>
391:
            <call/>
392:
          </alternative>
393:
          <otherwise>
394:
            <call/>
395:
          </otherwise>
396:
        </choose>
397:
        <call/>
398:
      </otherwise>
399:
    </choose>
400:
  </critical>
401:
  <critical>
402:
    <loop>
403:
      <call/>
404:
      <call/>
405:
      <call/>
406:
    </loop>
407:
  </critical>
408:
  <critical>
409:
    <call/>
410:
    <parallel>
411:
      <parallel_branch>
412:
        <call/>
413:
      </parallel_branch>
414:
      <parallel_branch>
415:
        <call/>
416:
      </parallel_branch>
417:
    </parallel>
418:
  </critical>
419:
  <!-- Critical  }}} -->
420:
 
421:
  <call/><!--}}}-->
422:
</description>
423:
          </textarea>
424:
        </td><!-- }}} -->
425:
        <td style="vertical-align: top"><!-- {{{ -->
426:
          <h3>New Graph Version -> Built-Time:<span id="t_new">00</span></h3>
427:
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="600" width="300" xmlns:xlink="http://www.w3.org/1999/xlink" id="drawing_area">
428:
          </svg>
429:
        </td><!-- }}} -->
430:
        <td style="vertical-align: top"><!-- {{{ -->
431:
          <h3>Old Graph Version -> Built-Time:<span id="t_old">00</span></h3>
432:
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="600" width="300" xmlns:xlink="http://www.w3.org/1999/xlink">
433:
            <defs><!-- {{{ -->
434:
              <symbol id="call" class="clickable"><!-- {{{ -->
435:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
436:
                <text class="normal" transform='translate(15,21)'>c</text>
437:
              </symbol><!-- }}} -->
438:
              <symbol id="manipulate" class="clickable"><!-- {{{ -->
439:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
440:
                <text class="normal" transform='translate(15,21)'>m</text>
441:
              </symbol><!-- }}} -->
442:
              <symbol id="callinject" class="clickable"><!-- {{{ -->
443:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
444:
                <text class="normal" transform='translate(15,21)'>c</text>
445:
                <circle cx="28" cy="27" r="9" class="stand"></circle>
446:
                <text class="small" transform='translate(28,32)'>i</text>
447:
              </symbol><!-- }}} -->
448:
              <symbol id="callmanipulate" class="clickable"><!-- {{{ -->
449:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
450:
                <text class="normal" transform='translate(15,21)'>c</text>
451:
                <circle cx="28" cy="28" r="9" class="stand"></circle>
452:
                <text class="small" transform='translate(28,32)'>m</text>
453:
              </symbol><!-- }}} -->
454:
              <symbol id="choose" class="clickable"><!-- {{{ -->
455:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
456:
                <text class="normal" transform='translate(15,21)'>σ</text>
457:
              </symbol><!-- }}} -->
458:
              <symbol id="alternative" class="clickable"><!-- {{{ -->
459:
                <circle cx="15" cy="15" r="14" class="standwithout"></circle>
460:
                <text class="normal" transform='translate(15,20)'>{..}</text>
461:
              </symbol><!-- }}} -->
462:
              <symbol id="otherwise" class="clickable"><!-- {{{ -->
463:
                <circle cx="15" cy="15" r="14" class="standwithout"></circle>
464:
                <text class="normal" transform='translate(15,20)'>{⁎}</text>
465:
              </symbol><!-- }}} -->
466:
              <symbol id="parallel" class="clickable"><!-- {{{ -->
467:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
468:
                <text class="normal" transform='translate(15,21)'>||</text>
469:
              </symbol><!-- }}} -->
470:
              <symbol id="parallel_branch" class="clickable"><!-- {{{ -->
471:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
472:
                <text class="normal" transform='translate(15,21)'>|</text>
473:
              </symbol><!-- }}} -->
474:
              <symbol id="critical" class="clickable"><!-- {{{ -->
475:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
476:
                <text class="normal" transform='translate(16.5,21.5)'>⚠</text>
477:
              </symbol><!-- }}} -->
478:
              <symbol id="loop" class="clickable"><!-- {{{ -->
479:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
480:
                <text class="normallarge" transform='translate(15,23)'>↺</text>
481:
              </symbol><!-- }}} -->
482:
              <symbol id="end"><!-- {{{ -->
483:
                <circle cx="15" cy="15" r="14" class="stand"></circle>
484:
                <circle cx="15" cy="15" r="11" class="stand"></circle>
485:
                <text class="normal" transform='translate(15,21)'>Ω</text>
486:
              </symbol><!-- }}} -->
487:
              <marker id="arrow" viewBox="0 0 10 10" refX="24" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4.5" markerHeight="4.5">
488:
                <path d="m 2 2 l 6 3 l -6 3 z"></path>
489:
              </marker>
490:
            </defs><!-- }}} -->
491:
            <g id="canvas">
492:
              <g id="blocks"></g>
493:
              <g id="lines"></g>
494:
              <g id="symbols"></g>
495:
            </g>
496:
          </svg>
497:
        </td><!-- }}} -->
498:
      </tr>
499:
    </table>
500:
    <script type="text/javascript">
501:
      var then = new Date();
502:
      adaptor = new WfAdaptor();
503:
      create_cpee_elements(adaptor);
504:
      adaptor.set_svg_container($('#drawing_area'));
505:
      adaptor.set_description($('#description').val(), true);
506:
      
507:
      $('#t_new').text((new Date()).getTime() - then.getTime() + 'ms');
508:
      adaptor.notify = update_event;
509:
      then = new Date();
510:
      var xml = parser.parseFromString($('#description').val(),"text/xml");
511:
      var g = new WFGraph(xml,xml.documentElement, $("#canvas").get(0));
512:
      var width = g.generateGraph();
513:
      $('#t_old').text((new Date()).getTime() - then.getTime() + 'ms');
514:
      //console.log(adaptor.get_description());
515:
    </script>
516:
  </body>
517:
</html>