Improved the form to change the drawing configuration

Author: andreaval

drawLocal.html

@@ -6,17 +6,17 @@
   <script src="lib/jquery-3.3.1.min.js"></script>
   <script src="flowgorithm.js?014"></script>
   <script>
-    var config = {
-        itMode: 2
-    };
+    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 = $("#o1").is(":checked") ? true : false;
+            config.groupInput = ($("input[name='o1']:checked").val()==='1') ? true : false;
             config.aH = parseInt($("#o2").val());
+            config.itMode = parseInt($("#o3").val());
+            config.viewDesc = ($("input[name='o4']:checked").val()==='1') ? true : false;
             drawFlowchartFromSource(xml,'#f',config);
             $('#choose').removeClass('big');
             $('body').addClass('view');
@@ -33,6 +33,8 @@
     #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{
@@ -53,8 +55,27 @@ <h1 class="noprint">Flowgorithm JS Viewer</h1>
         <input type="file" onchange="loadFile()" id="source" accept=".fprg">
     </div>
     <div id="chooseOption" class="noprint">
-        <label for="o1"><input type="checkbox" value="1" name="groupInput" id="o1" checked> Grouping consecutive input</label><br>
-        <label for="o2">Arrows height: <input type="number" min="1" max="100" value="12" name="groupInput" id="o2"></label>
+        <div class="row">
+            Grouping consecutive input: 
+            <label for="o1">Yes<input type="radio" value="1" name="o1" id="o1" checked></label>
+            <label for="o1b">No<input type="radio" value="0" name="o1" id="o1b"></label>
+        </div>
+        <div class="row">
+            <label for="o2">Distance between shapes: <input type="number" min="1" max="100" value="12" style="width:50px" name="groupInput" id="o2"></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>
+                <option value="1">Variant 2</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>
     <div id="f"></div>
 </body>