-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathdrawLocal.html
98 lines (98 loc) · 3.99 KB
/
drawLocal.html
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>
<meta charset="utf-8">
<script src="lib/jquery-3.5.0.min.js"></script>
<script src="flowgorithm.js?016"></script>
<script>
var config = {};
var xml;
function loadFile(){
var file = $('#source').get(0).files[0];
var reader = new FileReader();
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:0 0 1em}
#choose label{color:#888}
#choose.big{border:1px solid #ddd;padding:5em 0;text-align:center;font-size:1.2em;background:none}
#choose.big #source{font-size:1.5em}
#chooseOption .row{border-bottom:1px dotted #ddd;padding:.5em 0}
#chooseOption input,#chooseOption select{font-size:.9em}
body.view #chooseOption{display:none}
body.view h1{float:left;font-size:1em;margin:.1em .5em}
@media print{
.noprint{display:none}
body{margin:1.5cm;padding:0}
#f div.desc{border:1px solid #333 !important;margin:0 0 .5em!important;padding:.3em !important;font-size:.9em}
#f div.info{display:none}
#f{page-break-inside:avoid}
svg{height:900px}
@page{margin:0}
}
</style>
</head>
<body>
<h1 class="noprint">Flowgorithm JS Viewer</h1>
<div id="choose" class="big noprint">
<label for="source">Select .fprg file</label>
<input type="file" onchange="loadFile()" id="source" accept=".fprg">
</div>
<div id="chooseOption" class="noprint">
<div class="row">
Grouping consecutive input:
<label for="o1">Yes<input type="radio" value="1" name="o1" id="o1"></label>
<label for="o1b">No<input type="radio" value="0" name="o1" id="o1b" checked></label>
</div>
<div class="row">
<label for="o2">Arrow length: <input type="number" min="5" max="100" value="12" style="width:50px" name="groupInput" id="o2"></label>
</div>
<div class="row">
<label for="o2b">Arrow tip size: <input type="number" min="5" max="100" value="7" style="width:50px" name="groupInput" id="o2b"></label>
</div>
<div class="row">
<label for="o3">Style of pre-conditional iterations:</label>
<select name="o3" id="o3">
<option value="2" selected>Flowgorithm style</option>
<option value="3">Variant 1</option>
</select>
</div>
<div class="row">
Print the description above the flowchart:
<label for="o4">Yes<input type="radio" value="1" name="o4" id="o4" checked></label>
<label for="o4b">No<input type="radio" value="0" name="o4" id="o4b"></label>
</div>
<div class="row">
<label for="o2b">Label True: <input type="text" value="True" style="width:50px" id="o5"></label>
</div>
<div class="row">
<label for="o2b">Label False: <input type="text" value="False" style="width:50px" id="o6"></label>
</div>
</div>
<div id="f"></div>
</body>
</html>