diff --git a/app.py b/app.py index 3c30a89c8bf6936b6df8b8cdc15445ea9867ebf8..9d34b60b5b247bc6c96a93e2c78fe807389f7938 100644 --- 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) # _ _ diff --git a/static/css/interface.css b/static/css/interface.css index 8e2bbfa0f18c0ab749b546d109fbbe85b871df9a..72a86b2e32806b2cb9c03e5de51965805450d92b 100644 --- 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; diff --git a/templates/font.html b/templates/font.html index bdc66381dd6cf12681cdb22f718255ef4b958e79..540ce82baf588430939d29c5ace1186ddf10121b 100644 --- a/templates/font.html +++ b/templates/font.html @@ -93,10 +93,8 @@ <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> + <iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}"> + </iframe> </div> {% endblock %} diff --git a/templates/writing.html b/templates/writing.html new file mode 100644 index 0000000000000000000000000000000000000000..bd602ed704b49c1b2cf17ba96d86897a500f411e --- /dev/null +++ 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> \ No newline at end of file