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