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 = {}
+    ascii = text2figlet(params['text'], figfont_path)
-    f['ascii'] = text2figlet(params['text'], figfont_path)
+    print(ascii)
    print(f['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 class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
        <iframe 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>