Merge branch 'master' of gitlab.constantvzw.org:osp/tools.cobbled-paths

app.py

@@ -165,6 +165,66 @@ def drawing(id):
         params = params,
         svg = svg)
 
+#   __             _                     _    _             
+#  / _| ___  _ __ | |_   _ __ ___   __ _| | _(_)_ __   __ _ 
+# | |_ / _ \| '_ \| __| | '_ ` _ \ / _` | |/ / | '_ \ / _` |
+# |  _| (_) | | | | |_  | | | | | | (_| |   <| | | | | (_| |
+# |_|  \___/|_| |_|\__| |_| |_| |_|\__,_|_|\_\_|_| |_|\__, |
+#                                                     |___/ 
+# 
+# EDITING A FIGGONT ON A PAD TO THEN USE IT
+
+@app.route("/font.html")
+def font():
+
+    params = {
+        'text': request.args.get('t') or 'Cobbled Paths',
+        'pad': request.args.get('p') or 'standard',
+        'weight': request.args.get('w') or '3',
+    }
+    params['pad-full'] = etherpad + prefix + params['pad']
+
+    return render_template(
+        'font.html',
+        title = title,
+        params = params)
+
+@app.route("/writing/<id>")
+def writing(id):
+
+    params = {
+        'text': request.args.get('t') or 'Cobbled Paths',
+        'pad': id or 'standard',
+        'weight': request.args.get('w') or '3',
+    }
+    params['pad-full'] = etherpad + prefix + params['pad']
+
+    # get pad content
+    print('  getting ' + params['pad-full'])
+    pad_export = requests.get(params['pad-full'] + '/export/txt')
+    ascii_input = pad_export.text
+
+    # store as a temporary file
+    print('--- saving figfont as temp ---')
+    (figfont_file, figfont_path) = tempfile.mkstemp(suffix='.flf')
+    print(figfont_path)
+    with open(figfont_path, 'w') as figfont_file:
+        figfont_file.write(ascii_input)
+
+    print('--- opening the figfont ---')
+    f = {}
+    f['ascii'] = text2figlet(params['text'], figfont_path)
+    print(f['ascii'])
+
+    print('--- rendering to svg ---')
+    svg = ascii2svg(f['ascii'], params['weight'])
+
+    return render_template(
+        'drawing.html',
+        title = title,
+        params = params,
+        svg = svg)
+
 #            _        _                        
 #   ___ __ _| |_ __ _| | ___   __ _ _   _  ___ 
 #  / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
@@ -221,12 +281,12 @@ def catalogue():
         params = params)
 
 
-#            _        _                        
+#  _                 _                              _   
-#   ___ __ _| |_ __ _| | ___   __ _ _   _  ___ 
+# | |__  _ __   __ _| |   _____  ___ __   ___  _ __| |_ 
-#  / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
+# | '_ \| '_ \ / _` | |  / _ \ \/ / '_ \ / _ \| '__| __|
-# | (_| (_| | || (_| | | (_) | (_| | |_| |  __/
+# | | | | |_) | (_| | | |  __/>  <| |_) | (_) | |  | |_ 
-#  \___\__,_|\__\__,_|_|\___/ \__, |\__,_|\___|
+# |_| |_| .__/ \__, |_|  \___/_/\_\ .__/ \___/|_|   \__|
-#                             |___/  
+#       |_|    |___/              |_|   
 # 
 # FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
 

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,103 @@
+{% 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>
+
+    <button id="button-svg">generate</button>
+
+    <input class="get-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
+
+    <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');
+          console.log("IFRAME RELOAD");
+          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('input', 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);
+            }
+            console.log(url);
+            // frame.contentWindow.history.replaceState(null, null, url);
+            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="/writing/{{params['pad']}}">
+        </iframe>
+    </div>
+  </div>
+
+{% endblock %}
+