diff --git a/app.py b/app.py index 7f089f19cb22dfdfa05895d9ea7146040f38e512..06dfeff2171218e71552dab45b6e6eabe53213a3 100644 --- a/app.py +++ b/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 diff --git a/templates/base.html b/templates/base.html index 0980fa11d0667eb65246088d0f5088d410c26396..e4ddc5bc9b52023e84fb33235437b276ed159d92 100644 --- a/templates/base.html +++ b/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> diff --git a/templates/catalogue.html b/templates/catalogue.html index 4e1f5e542ad703f48c0e8d4334bca547751c7a1d..7c297692dc96bd332e75ae23399230ca954455e1 100644 --- a/templates/catalogue.html +++ b/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); diff --git a/templates/draw.html b/templates/draw.html index 60d6735100e09a23ba6a5d385425a2efa3e547cc..a3e90c2bb66e284d14b7c5c1d6015cd4ef1d672f 100644 --- a/templates/draw.html +++ b/templates/draw.html @@ -13,14 +13,14 @@ <button id="button-svg">generate</button> - <!-- <label>weight</label> - <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/> --> + <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" + <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="body-class-check" value="check-text" checked/> --> + <input id="text-checkbox" type="checkbox" class="get-input" + 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> diff --git a/templates/drawing.html b/templates/drawing.html index 767ab41ae5cd70df52bf70f8c9349ab153cc1256..70e385355d4a63b1d022428db992be046953325f 100644 --- a/templates/drawing.html +++ b/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'); diff --git a/templates/font.html b/templates/font.html new file mode 100644 index 0000000000000000000000000000000000000000..bdc66381dd6cf12681cdb22f718255ef4b958e79 --- /dev/null +++ b/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 %} +