chekcbox and weight

app.py

@@ -165,6 +165,20 @@ def drawing(id):
         params = params,
         svg = svg)
 
+@app.route("/font.html")
+def font():
+
+    params = {
+        'pad': request.args.get('p') or 'default',
+        'weight': request.args.get('w') or '3',
+    }
+    params['pad-full'] = etherpad + prefix + params['pad']
+
+    return render_template(
+        'font.html',
+        title = title,
+        params = params)
+
 #            _        _                        
 #   ___ __ _| |_ __ _| | ___   __ _ _   _  ___ 
 #  / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \

templates/base.html

@@ -26,7 +26,8 @@
       <ul>
           <li><a href="/">index</a></li>
           <li><a href="/draw.html">draw</a></li>
-          <li><a href="/catalogue.html">catalogue</a></li>
+          <li><a href="/font.html">font</a></li>
+          <!-- <li><a href="/catalogue.html">catalogue</a></li> -->
       </ul>
     </nav>
 

templates/catalogue.html

@@ -35,9 +35,6 @@
                     window.history.replaceState(null, null, url);
                 });
             }
-        </script>
-
-        <script>
             function toggle_class(classname, val){
                 if(val){
                     document.body.classList.add(classname);

templates/draw.html

@@ -13,14 +13,14 @@
 
     <button id="button-svg">generate</button>
 
-    <!-- <label>weight</label>
+    <label>weight</label>
-    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/> -->
+    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
 
-    <!-- <label  class="text-label" for="text-checkbox"
+    <label  class="text-label" for="text-checkbox"
             title="display the remaining text in the svg output in red">
             output text</label>
-    <input  id="text-checkbox" type="checkbox" 
+    <input  id="text-checkbox" type="checkbox" class="get-input"
-            class="body-class-check" value="check-text" checked/> -->
+            class="body-class-check" value="check-text" data-name="t" data-frame="svg-iframe" checked/>
 
     <script>
         function updateGET(frame, param, value){
@@ -66,6 +66,21 @@
             svg_iframe.contentWindow.location.reload();
         });
 
+        // --- get-input but on the pad and checkbox but on the pad
+        let inputs = document.getElementsByClassName('get-input');
+        for(let input of inputs){
+          input.addEventListener('change', function(){
+            let frame = document.getElementById(input.dataset.frame);
+            const url = new URL(frame.src);
+            if(input.type == 'checkbox'){
+              url.searchParams.set(input.dataset.name, input.checked);
+            }
+            else{
+              url.searchParams.set(input.dataset.name, input.value);
+            }
+            frame.src = url;
+          });
+        }
     </script>
   </header>
 

templates/drawing.html

@@ -10,6 +10,17 @@
         top: 0.5em;
         right: 0.5em;
       }
+      .svgbob text {
+        font-family: monospace !important;
+        font-weight: bold !important;
+        fill: red !important;
+      }
+      .svgbob text{
+        visibility: hidden;
+      }
+      body.check-text .svgbob text{
+          visibility: visible;
+      }
     </style>
   </head>
 
@@ -18,7 +29,20 @@
     {{ svg|safe }}
 
     <button id="save-svg">> SVG</button>
-    <!-- <button>> HPGL</button> -->
+
+    <script>
+      function get2bodyclass(){
+        const url = new URL(window.location.href);
+        let checked = url.searchParams.get("c");
+        if(checked == "false"){
+          document.body.classList.remove("check-text");
+        }
+        else{
+          document.body.classList.add("check-text");
+        }
+      }
+      get2bodyclass();
+    </script>
 
     <script>
       let save_button = document.getElementById('save-svg');

templates/font.html

@@ -0,0 +1,99 @@
+{% extends "base.html" %}
+
+{% block body_class %}draw{% endblock %}
+
+{% block body %}
+
+  <header class="controls">
+    <label>etherpad</label>
+    <input id="pad-name" type="text" value="{{params['pad']}}" data-name="p"/>
+    <button id="button-pad" data-use="pad-name">go</button>
+
+    <hr>
+    
+    <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
+
+    <button id="button-svg">generate</button>
+
+    <label>weight</label>
+    <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/>
+
+    <label  class="text-label" for="text-checkbox"
+            title="display the remaining text in the svg output in red">
+            output text</label>
+    <input  id="text-checkbox" type="checkbox" class="get-input"
+            class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
+
+    <script>
+        function updateGET(frame, param, value){
+            // object from GET parameters
+            let [base_src, params_src] = frame.src.split("?");
+            let params = new URLSearchParams(params_src);
+            // update param
+            params.set(param, value);
+            // reconstituate URL
+            let new_src = base_src + "?" + params.toString();
+            // set and refresh
+            frame.src = new_src;
+        }
+
+        let button_pad = document.getElementById('button-pad');
+        let button_svg = document.getElementById('button-svg');
+        
+        // --- pad go button
+        button_pad.addEventListener('click', function(){
+            let svg_iframe = document.getElementById('svg-iframe');
+            let pad_iframe = document.getElementById('pad-iframe');
+            let input = document.getElementById(button_pad.dataset.use);
+            let value = input.value;
+            let param = input.dataset.name;
+
+            let pad_src = pad_iframe.src;
+            pad_src = pad_src.split('-');
+            pad_src[pad_src.length-1] = value;
+            pad_src = pad_src.join('-');
+            pad_iframe.src = pad_src;
+
+            let svg_src = svg_iframe.src;
+            svg_src = svg_src.split('/');
+            svg_src[svg_src.length-1] = value;
+            svg_src = svg_src.join('/');
+            svg_iframe.src = svg_src;
+
+        });
+
+        // --- svg generation button
+        button_svg.addEventListener('click', function(){
+            let svg_iframe = document.getElementById('svg-iframe');
+            svg_iframe.contentWindow.location.reload();
+        });
+
+        // --- get-input but on the pad and checkbox but on the pad
+        let inputs = document.getElementsByClassName('get-input');
+        for(let input of inputs){
+          input.addEventListener('change', function(){
+            let frame = document.getElementById(input.dataset.frame);
+            const url = new URL(frame.src);
+            if(input.type == 'checkbox'){
+              url.searchParams.set(input.dataset.name, input.checked);
+            }
+            else{
+              url.searchParams.set(input.dataset.name, input.value);
+            }
+            frame.src = url;
+          });
+        }
+    </script>
+  </header>
+
+  <div class="font">
+    <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
+    </iframe>
+    <div class="f-svg">
+        <iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
+        </iframe>
+    </div>
+  </div>
+
+{% endblock %}
+