ascii generation in font tab

8 months ago · 41ee3159d8
4 changed files with 99 additions and 9 deletions
--- a/app.py
+++ b/app.py
@ -212,17 +212,17 @@ def writing(id):
        figfont_file.write(ascii_input)

    print('--- opening the figfont ---')
-    f = {}
-    f['ascii'] = text2figlet(params['text'], figfont_path)
-    print(f['ascii'])
+    ascii = text2figlet(params['text'], figfont_path)
+    print(ascii)

    print('--- rendering to svg ---')
-    svg = ascii2svg(f['ascii'], params['weight'])
+    svg = ascii2svg(ascii, params['weight'])

    return render_template(
-        'drawing.html',
+        'writing.html',
        title = title,
        params = params,
+        ascii = ascii,
        svg = svg)

 #            _        _                        
--- a/static/css/interface.css
+++ b/static/css/interface.css
@ -211,6 +211,10 @@ aside.left{
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
 }
+.f-double{
+    width: 100%;
+    height: 100%;
+}
 hr{
    border: 0;
    border-top: 1px solid black;
--- a/templates/font.html
+++ b/templates/font.html
@ -93,11 +93,9 @@
  <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 class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
    </iframe>
  </div>
-  </div>

 {% endblock %}

--- a/templates/writing.html
+++ b/templates/writing.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="/static/js/FileSaver.js"></script>
+    <style>
+      #save-svg{
+        position: fixed;
+        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;
+      }
+      .double-font{
+        height: 100vh;
+        display: grid;
+        grid-template-rows: 1fr 1fr;
+        gap: 1rem;
+        margin: 0;
+      }
+      .double-font div{
+        background-color: white;
+        border: 1px solid black;
+        overflow: auto;
+        padding: 1rem;
+        font-family: monospace;
+        font-size: 1rem;
+      }
+      .f-ascii{
+        font-family: monospace;
+        font-size: 1rem;
+
+      }
+    </style>
+  </head>
+
+  <body class="double-font">
+
+    <div class="f-svg">
+      {{ svg|safe }}
+    </div>
+
+    <div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
+
+    <button id="save-svg">> SVG</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');
+
+      save_button.addEventListener('click', function(){
+        //get svg element.
+        let svg = document.getElementsByTagName("svg")[0];
+
+        //get svg source.
+        let serializer = new XMLSerializer();
+        let source = serializer.serializeToString(svg);
+
+        let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
+        saveAs(blob, 'cobbled-paths.svg');
+      });
+    </script>
+
+  </body>
+</html>