diff --git a/app.py b/app.py index 045b28d084c175577afd43c97329834a6c09175b..50ecb2ee14f3eddbf1b3877f82d28318ee252cde 100644 --- a/app.py +++ b/app.py @@ -165,6 +165,20 @@ def drawing(id): params = params, svg = svg) +@app.route("/font.html") +def font(): + + params = { + 'pad': request.args.get('p') or 'default', + 'weight': request.args.get('w') or '3', + } + params['pad-full'] = etherpad + prefix + params['pad'] + + return render_template( + 'font.html', + title = title, + params = params) + # _ _ # ___ __ _| |_ __ _| | ___ __ _ _ _ ___ # / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \ 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..5aee8d43f1792b65874c780104573acc7526e53c --- /dev/null +++ b/templates/font.html @@ -0,0 +1,99 @@ +{% 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> + + <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/> + + <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" 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'); + 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> + + <div class="font"> + <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}"> + </iframe> + <div class="f-svg"> + <iframe id="svg-iframe" src="/drawing/{{params['pad']}}"> + </iframe> + </div> + </div> + +{% endblock %} +