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 %}
+