FlowgorithmJS/drawLocal.html at master · andreaval/FlowgorithmJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>FlowgorithmJS offline</title>
<metacharset="utf-8">
<scriptsrc="lib/jquery-3.5.0.min.js"></script>
<scriptsrc="flowgorithm.js?016"></script>
<script>
varconfig={};
varxml;
functionloadFile(){
varfile=$('#source').get(0).files[0];
varreader=newFileReader();
reader.addEventListener("load",function(){
xml=reader.result;
config.groupInput=($("input[name='o1']:checked").val()==='1') ? true : false;
config.aH=parseInt($("#o2").val());
config.aT=parseInt($("#o2b").val());
config.itMode=parseInt($("#o3").val());
config.viewDesc=($("input[name='o4']:checked").val()==='1') ? true : false;
config.labelTrue=$("#o5").val();
config.labelFalse=$("#o6").val();
/*$('#f').on("flowgorithmjs:preload",function(){
 alert('preload');
 }).on("flowgorithmjs:postload",function(){
 alert('postload');
 });*/
drawFlowchartFromSource(xml,'#f',config);
$('#choose').removeClass('big');
$('body').addClass('view');
$('title').text($('#f div.title').text());
},false);
if(file){
reader.readAsText(file);
}
}
</script>
<style>
h1{font-size:1.2em}
#choose{width:100%;text-align:right;background:#eee;margin:001em}
#chooselabel{color:#888}
#choose.big{border:1px solid #ddd;padding:5em0;text-align:center;font-size:1.2em;background:none}
#choose.big#source{font-size:1.5em}
#chooseOption .row{border-bottom:1px dotted #ddd;padding:.5em0}
#chooseOptioninput,#chooseOptionselect{font-size:.9em}
body.view#chooseOption{display:none}
body.viewh1{float:left;font-size:1em;margin:.1em.5em}
@media print{
 .noprint{display:none}
body{margin:1.5cm;padding:0}
#fdiv.desc{border:1px solid #333!important;margin:00.5em!important;padding:.3em!important;font-size:.9em}
#fdiv.info{display:none}
#f{page-break-inside:avoid}
svg{height:900px}
@page{margin:0}
 }
</style>
</head>
<body>
<h1class="noprint">Flowgorithm JS Viewer</h1>
<divid="choose" class="big noprint">
<labelfor="source">Select .fprg file</label>
<inputtype="file" onchange="loadFile()" id="source" accept=".fprg">
</div>
<divid="chooseOption" class="noprint">
<divclass="row">
 Grouping consecutive input:
<labelfor="o1">Yes<inputtype="radio" value="1" name="o1" id="o1"></label>
<labelfor="o1b">No<inputtype="radio" value="0" name="o1" id="o1b" checked></label>
</div>
<divclass="row">
<labelfor="o2">Arrow length: <inputtype="number" min="5" max="100" value="12" style="width:50px" name="groupInput" id="o2"></label>
</div>
<divclass="row">
<labelfor="o2b">Arrow tip size: <inputtype="number" min="5" max="100" value="7" style="width:50px" name="groupInput" id="o2b"></label>
</div>
<divclass="row">
<labelfor="o3">Style of pre-conditional iterations:</label>
<selectname="o3" id="o3">
<optionvalue="2" selected>Flowgorithm style</option>
<optionvalue="3">Variant 1</option>
</select>
</div>
<divclass="row">
 Print the description above the flowchart:
<labelfor="o4">Yes<inputtype="radio" value="1" name="o4" id="o4" checked></label>
<labelfor="o4b">No<inputtype="radio" value="0" name="o4" id="o4b"></label>
</div>
<divclass="row">
<labelfor="o2b">Label True: <inputtype="text" value="True" style="width:50px" id="o5"></label>
</div>
<divclass="row">
<labelfor="o2b">Label False: <inputtype="text" value="False" style="width:50px" id="o6"></label>
</div>
</div>
<divid="f"></div>
</body>
</html>