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