diff --git a/app.py b/app.py
index dce53a129e213258192647b6191fe4346b861e1f..342a7b90a150c1326e0f5bff02b1c229014e7f5a 100644
--- a/app.py
+++ b/app.py
@@ -6,7 +6,7 @@ import sys
import tempfile
import io
import requests
-from svg_to_hpgl import svgToHPGL
+# from svg_to_hpgl import svgToHPGL
app = Flask(__name__)
@@ -20,21 +20,20 @@ prefix = 'cobbled-pad-'
# VARIABLES 4 CATALOGUE
# ------------------------------
-output = {
+collection = {
'stroke': { 'ascii': ' | ' , 'fonts': [] },
'script': { 'ascii': ' _/' , 'fonts': [] },
'block': { 'ascii': '|_|' , 'fonts': [] },
'outline': { 'ascii': '/ /' , 'fonts': [] },
'effect': { 'ascii': ': :' , 'fonts': [] },
- 'pattern': { 'ascii': ')()' , 'fonts': [] },
+ 'pattern': { 'ascii': '(((' , 'fonts': [] },
- # 'fill': { 'ascii': '_/', 'fonts': {} },
+ 'fill': { 'ascii': '###' , 'fonts': [] },
+ '3d': { 'ascii': '_|/' , 'fonts': [] },
- # 'directions': { 'ascii': '_/', 'fonts': {} },
- # '3d': { 'ascii': '_/', 'fonts': {} },
-
- # 'frame': { 'ascii': '_/', 'fonts': {} },
- # 'code': { 'ascii': '_/', 'fonts': {} },
+ # 'directions': { 'ascii': '_/', 'fonts': [] },
+ # 'frame': { 'ascii': '_/', 'fonts': [] },
+ # 'code': { 'ascii': '_/', 'fonts': [] },
}
databases = {
'default': 'fonts made by the figlet developpers and given with the program, early 1993',
@@ -128,6 +127,33 @@ def make_figfont(ascii):
figfont_file.write(ascii)
return figfont_path
+def parse_collection():
+ # walk in the figlet font directory
+ for root, dirs, files in os.walk(fonts_directory):
+ for name in files:
+
+ (basename, ext) = os.path.splitext(name)
+ if ext in possible_extensions:
+
+ figfont = os.path.join(root, name)
+ print(figfont)
+
+ # get font databases out of first folder
+ database = root.split('/')[-2]
+ # get font type out of last folder
+ type = root.split('/')[-1]
+
+ # only include selected types
+ if type in collection:
+
+ f = {}
+ f['name'] = name
+ f['database'] = database
+ f['figfont'] = figfont
+
+ # sort them by type
+ collection[type]['fonts'].append(f)
+
# ROUTES
# ------------------------------
@@ -161,7 +187,7 @@ def index():
def draw():
params = {
- 'pad': request.args.get('p') or 'default',
+ 'pad': request.args.get('p') or 'index',
'weight': request.args.get('w') or '3',
}
params['pad-full'] = etherpad + prefix + params['pad']
@@ -209,7 +235,7 @@ def font():
params = {
'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
- 'pad': request.args.get('p') or 'standard',
+ 'pad': request.args.get('p') or 'font_index',
'weight': request.args.get('w') or '3',
}
params['pad-full'] = etherpad + prefix + params['pad']
@@ -224,28 +250,38 @@ def writing(id):
params = {
'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
- 'pad': id or 'standard',
+ 'pad': id or 'ascriipt',
'weight': request.args.get('w') or '3',
}
- params['pad-full'] = etherpad + prefix + params['pad']
-
- pad_answer = get_pad(params['pad-full'])
- # TODO: only create new file if content of pad changed
- # store as a temporary file
-
- if pad_answer[0]:
- ascii = pad_answer[1]
- figfont = make_figfont(ascii)
+ if '.flf' in params['pad']:
+ # it's not a pad it's a local figfont file
+ figfont = '/'.join(params['pad'].split('_'))
figlet_answer = text2figlet(params['text'], figfont)
+
if figlet_answer[0]:
ascii = figlet_answer[1]
svg = ascii2svg(figlet_answer[1], params['weight'])
else:
ascii = svg = figlet_answer[1]
-
+
else:
- ascii = svg = pad_answer[1]
+ # we compile a figfont from a pad
+ params['pad-full'] = etherpad + prefix + params['pad']
+ pad_answer = get_pad(params['pad-full'])
+
+ if pad_answer[0]:
+ ascii = pad_answer[1]
+ figfont = make_figfont(ascii)
+
+ figlet_answer = text2figlet(params['text'], figfont)
+ if figlet_answer[0]:
+ ascii = figlet_answer[1]
+ svg = ascii2svg(figlet_answer[1], params['weight'])
+ else:
+ ascii = svg = figlet_answer[1]
+ else:
+ ascii = svg = pad_answer[1]
return render_template(
'writing.html',
@@ -263,52 +299,21 @@ def writing(id):
#
# FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
-# @app.route("/catalogue.html")
-# def catalogue():
+@app.route("/catalogue.html")
+def catalogue():
-# # text and weight as get parameter
-# params = {
-# 'text': request.args.get('t') or 'Echoes',
-# 'weight': request.args.get('w') or '3',
-# }
-
-# # walk in the figlet font directory
-# for root, dirs, files in os.walk(fonts_directory):
-# for name in files:
-
-# (basename, ext) = os.path.splitext(name)
-# if ext in possible_extensions:
-
-# figfont = os.path.join(root, name)
-# print(figfont)
-
-# # get font category out of last folder
-# catalogue = root.split('/')[-2]
-# type = root.split('/')[-1]
-# if type in output:
-
-# f = {}
-# output[type]['fonts'].append(f)
-# f['name'] = name
-# f['catalogue'] = catalogue
-# f['ascii'] = text2figlet(params['text'], figfont)
-# f['svg'] = ascii2svg(f['ascii'], params['weight'])
-
-# # regex auto_fix
-# f['ascii_fix'] = ascii_autofix(f['ascii'])
-
-# if f['ascii'] != f['ascii_fix']:
-# f['autofix'] = True
-# f['ascii_fix_indication'] = autofix_indication(f['ascii_fix'])
-# f['svg_fix'] = ascii2svg(f['ascii_fix'], params['weight'])
-
-# return render_template(
-# 'catalogue.html',
-# title = title,
-# databases = databases,
-# output = output,
-# params = params)
+ # text and weight as get parameter
+ params = {
+ 'text': request.args.get('t') or 'the quick brown fox jumps over the lazy dog',
+ 'weight': request.args.get('w') or '3',
+ }
+ return render_template(
+ 'catalogue.html',
+ title = title,
+ databases = databases,
+ collection = collection,
+ params = params)
# _ _ _
# | |__ _ __ __ _| | _____ ___ __ ___ _ __| |_
@@ -371,4 +376,5 @@ def hpgl (id):
return r
if __name__ == '__main__':
- app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
+ parse_collection()
+ app.run(debug=True, host='0.0.0.0')
\ No newline at end of file
diff --git a/iceberg/42.svg b/iceberg/42.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7a9eecaa00d2f517c14e119902c20c7449e8f190
--- /dev/null
+++ b/iceberg/42.svg
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="504"
+ height="432"
+ class="svgbob"
+ version="1.1"
+ id="svg231"
+ sodipodi:docname="42.svg"
+ inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview231"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showgrid="false"
+ inkscape:zoom="0.58925565"
+ inkscape:cx="32.244069"
+ inkscape:cy="336.01714"
+ inkscape:window-width="1854"
+ inkscape:window-height="968"
+ inkscape:window-x="0"
+ inkscape:window-y="34"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg231" />
+ <style
+ id="style1">.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+ stroke: black;
+ stroke-width: 2;
+ stroke-opacity: 1;
+ fill-opacity: 1;
+ stroke-linecap: round;
+ stroke-linejoin: miter;
+}
+
+.svgbob text {
+ white-space: pre;
+ fill: black;
+ font-family: Iosevka Fixed, monospace;
+ font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+ stroke: none;
+ fill: white;
+}
+
+.svgbob .broken {
+ stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+ fill: black;
+}
+
+.svgbob .bg_filled {
+ fill: white;
+ stroke-width: 1;
+}
+
+.svgbob .nofill {
+ fill: white;
+}
+
+.svgbob .end_marked_arrow {
+ marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+ marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+ marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+ marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+ marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+ marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+ marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+ marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+ marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+ marker-start: url(#big_open_circle);
+}
+
+</style>
+ <defs
+ id="defs4">
+ <marker
+ id="arrow"
+ viewBox="-2 -2 8 8"
+ refX="4"
+ refY="2"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse"
+ preserveAspectRatio="xMidYMid">
+ <polygon
+ points="0,0 0,4 4,2 0,0"
+ id="polygon1" />
+ </marker>
+ <marker
+ id="diamond"
+ viewBox="-2 -2 8 8"
+ refX="4"
+ refY="2"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <polygon
+ points="0,2 2,0 4,2 2,4 0,2"
+ id="polygon2" />
+ </marker>
+ <marker
+ id="circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="3"
+ markerHeight="3"
+ orient="auto-start-reverse"
+ preserveAspectRatio="xMidYMid">
+ <circle
+ cx="4"
+ cy="4"
+ r="2"
+ class="filled"
+ id="circle2" />
+ </marker>
+ <marker
+ id="open_circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="0.001"
+ markerHeight="0.001"
+ orient="auto-start-reverse"
+ preserveAspectRatio="xMidYMid">
+ <circle
+ cx="4"
+ cy="4"
+ r="2"
+ class="bg_filled"
+ id="circle3" />
+ </marker>
+ <marker
+ id="big_open_circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="1"
+ markerHeight="1"
+ orient="auto-start-reverse"
+ preserveAspectRatio="xMidYMid"
+ markerUnits="strokeWidth">
+ <circle
+ cx="-4"
+ cy="4"
+ r="3"
+ class="bg_filled"
+ id="circle4"
+ transform="scale(-1,1)" />
+ </marker>
+ </defs>
+ <g
+ id="g232"
+ style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+ transform="translate(49.274397,38.772256)">
+ <path
+ id="line147"
+ style="stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none"
+ d="M 340,176 C 340,176 340.61267,181.40467 340,184 C 337.94503,192.705 328,199.05573 328,208 C 328,213.96285 333.33333,218.66667 336,224 M 340,160 C 340,160 340.61267,165.40467 340,168 C 337.94503,176.705 335.60845,187.29772 328,192 C 324.5974,194.10292 318.82843,194.82843 316,192 C 312.22876,188.22876 316,176 316,176 M 200,176 C 202.66667,181.33333 202.03715,192 208,192 C 213.96285,192 213.33333,181.33333 216,176 M 224,176 C 226.66667,181.33333 226.9277,188.86515 232,192 C 238.80521,196.20585 249.19479,196.20585 256,192 C 266.1446,185.73029 261.8554,166.26971 272,160 C 277.67101,156.49513 287.28595,155.28595 292,160 C 299.54247,167.54247 284.45753,184.45753 292,192 C 294.82843,194.82843 300.5974,194.10292 304,192 C 311.60845,187.29772 313.94503,176.705 316,168 C 316.61267,165.40467 316,160 316,160 M 172,176 C 172,176 168.22876,188.22876 172,192 C 174.82843,194.82843 180.5974,194.10292 184,192 C 196.68075,184.16286 189.09288,152 204,152 C 212.94427,152 208.39155,171.29772 216,176 C 218.2684,177.40195 221.7316,177.40195 224,176 C 229.0723,172.86515 226.9277,163.13485 232,160 C 236.5368,157.1961 248,160 248,160 M 124,176 C 124,176 120.22876,188.22876 124,192 C 126.82843,194.82843 132.5974,194.10292 136,192 C 146.1446,185.73029 141.8554,166.26971 152,160 C 157.67101,156.49513 167.28595,155.28595 172,160 C 173.88562,161.88562 172.61267,165.40467 172,168 C 169.94503,176.705 167.60845,187.29772 160,192 C 157.7316,193.40195 154.2684,193.40195 152,192 C 146.9277,188.86515 146.66667,181.33333 144,176 M 92,192 C 92,192 106.32899,195.50487 112,192 C 119.60845,187.29772 121.94503,176.705 124,168 C 125.83802,160.21401 124,144 124,144 M 112,160 H 136 M 48,176 C 50.666667,170.66667 50.927699,163.13485 56,160 C 59.402603,157.89708 65.171573,157.17157 68,160 C 75.542472,167.54247 60.457528,184.45753 68,192 C 70.828427,194.82843 76.597397,194.10292 80,192 C 87.608452,187.29772 89.945027,176.705 92,168 C 92.612674,165.40467 90.114382,161.88562 92,160 C 94.828427,157.17157 101.89708,156.5974 104,160 C 107.13485,165.0723 98.666667,170.66667 96,176 M 44,176 C 44,176 47.771236,163.77124 44,160 C 41.171573,157.17157 35.402603,157.89708 32,160 C 26.927699,163.13485 26.666667,170.66667 24,176 M 0,176 C 2.6666667,170.66667 2.9276986,163.13485 8,160 C 11.402603,157.89708 17.171573,157.17157 20,160 C 23.771236,163.77124 20,176 20,176 M 340,224 C 340,224 332.45753,199.54247 340,192 C 344.71405,187.28595 354.32899,195.50487 360,192 C 365.0723,188.86515 362.9277,179.13485 368,176 C 371.4026,173.89708 380,176 380,176 M 380,144 C 380,144 368.68629,180.68629 380,192 C 382.82843,194.82843 388.5974,194.10292 392,192 C 397.0723,188.86515 397.33333,181.33333 400,176 M 344,176 C 346.66667,170.66667 346.9277,163.13485 352,160 C 354.2684,158.59805 357.7316,158.59805 360,160 C 365.0723,163.13485 365.33333,170.66667 368,176 M 368,160 H 392"
+ sodipodi:nodetypes="caaccaaaccaccaaaaaaaccaaaaaaccaaaaaaaccaaccccaaaaaaaccaaccaaccaaaccaaccaaccc" />
+ </g>
+ <circle
+ style="fill:#010101;fill-opacity:1;stroke:none;stroke-width:15;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:none;stroke-dashoffset:0.739727;stroke-opacity:1"
+ id="path239"
+ cx="361.164"
+ cy="181.78899"
+ r="9" />
+</svg>
diff --git "a/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png" "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c8c9f1953c130908367b15fcc91f4776314f7d37
Binary files /dev/null and "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-20 01-05-06.png" differ
diff --git "a/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png" "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b13faa84e6e23ebdfb97978d2a6428f96bced858
Binary files /dev/null and "b/iceberg/Capture d\342\200\231\303\251cran de 2024-02-24 15-42-20.png" differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..483019ae22d54beada0ba46b153a5ccb0d7f7bd3
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..f59c88ffaba4aeb42ee1f545388154af98b3bbc8
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png differ
diff --git a/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png b/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png
new file mode 100644
index 0000000000000000000000000000000000000000..14769d9ba12a1e8edc43913d98f697e88bd43d49
Binary files /dev/null and b/iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png differ
diff --git "a/iceberg/besan\303\247on/full-pic.png" "b/iceberg/besan\303\247on/full-pic.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d3d332b2fd6842904bc10a5a43e74b267327a0e3
Binary files /dev/null and "b/iceberg/besan\303\247on/full-pic.png" differ
diff --git "a/iceberg/besan\303\247on/small-pic.png" "b/iceberg/besan\303\247on/small-pic.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e2b8eae5c8c86e21593939b2ea7166e4b38d7df7
Binary files /dev/null and "b/iceberg/besan\303\247on/small-pic.png" differ
diff --git a/iceberg/metascriipt.svg b/iceberg/metascriipt.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2d9362cb77782a1b90c47e29688614c2cd07fa2f
--- /dev/null
+++ b/iceberg/metascriipt.svg
@@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ width="466.47998"
+ height="120"
+ class="svgbob"
+ version="1.1"
+ id="svg70"
+ sodipodi:docname="metascriipt.svg"
+ inkscape:version="1.3.1 (9b9bdc1480, 2023-11-25, custom)"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <sodipodi:namedview
+ id="namedview70"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:showpageshadow="2"
+ inkscape:pageopacity="0.0"
+ inkscape:pagecheckerboard="0"
+ inkscape:deskcolor="#d1d1d1"
+ showgrid="false"
+ showguides="true"
+ inkscape:zoom="1.4142136"
+ inkscape:cx="214.60691"
+ inkscape:cy="8.4852814"
+ inkscape:window-width="1854"
+ inkscape:window-height="968"
+ inkscape:window-x="0"
+ inkscape:window-y="34"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg70" />
+ <style
+ id="style1">.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+ stroke: black;
+ stroke-width: 2;
+ stroke-opacity: 1;
+ fill-opacity: 1;
+ stroke-linecap: round;
+ stroke-linejoin: miter;
+}
+
+.svgbob text {
+ white-space: pre;
+ fill: black;
+ font-family: Iosevka Fixed, monospace;
+ font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+ stroke: none;
+ fill: white;
+}
+
+.svgbob .broken {
+ stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+ fill: black;
+}
+
+.svgbob .bg_filled {
+ fill: white;
+ stroke-width: 1;
+}
+
+.svgbob .nofill {
+ fill: white;
+}
+
+.svgbob .end_marked_arrow {
+ marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+ marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+ marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+ marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+ marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+ marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+ marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+ marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+ marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+ marker-start: url(#big_open_circle);
+}
+
+</style>
+ <defs
+ id="defs4">
+ <marker
+ id="arrow"
+ viewBox="-2 -2 8 8"
+ refX="4"
+ refY="2"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <polygon
+ points="4,2 0,0 0,4 "
+ id="polygon1" />
+ </marker>
+ <marker
+ id="diamond"
+ viewBox="-2 -2 8 8"
+ refX="4"
+ refY="2"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <polygon
+ points="4,2 2,4 0,2 2,0 "
+ id="polygon2" />
+ </marker>
+ <marker
+ id="circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <circle
+ cx="4"
+ cy="4"
+ r="2"
+ class="filled"
+ id="circle2" />
+ </marker>
+ <marker
+ id="open_circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <circle
+ cx="4"
+ cy="4"
+ r="2"
+ class="bg_filled"
+ id="circle3" />
+ </marker>
+ <marker
+ id="big_open_circle"
+ viewBox="0 0 8 8"
+ refX="4"
+ refY="4"
+ markerWidth="7"
+ markerHeight="7"
+ orient="auto-start-reverse">
+ <circle
+ cx="4"
+ cy="4"
+ r="3"
+ class="bg_filled"
+ id="circle4" />
+ </marker>
+ </defs>
+ <path
+ id="line70"
+ style="fill:none;stroke:#000000;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none"
+ class="solid"
+ d="M 384.99072,60 V 68 L 372.99072,92 L 380.99072,108 M 360.99072,60 V 76 H 372.99072 L 384.99072,52 V 44 M 336.99072,60 V 76 H 348.99072 L 360.99072,52 V 44 M 412.99072,60 L 404.99072,76 H 384.99072 V 108 M 444.99072,60 L 436.99072,76 H 424.99072 V 28 M 388.99072,60 L 396.99072,44 H 404.99072 L 412.99072,60 H 424.99072 M 192.99072,60 V 76 H 204.99072 L 224.99072,36 L 236.99072,60 L 228.99072,76 L 220.99072,60 M 244.99072,60 L 252.99072,76 H 276.99072 L 292.99072,44 H 312.99072 V 76 H 324.99072 L 336.99072,52 V 44 M 268.99072,44 H 252.99072 L 244.99072,60 H 236.99072 M 164.99072,60 L 172.99072,76 H 180.99072 L 192.99072,52 V 44 H 172.99072 L 156.99072,76 H 144.99072 V 60 M 144.99072,28 V 52 L 132.99072,76 H 112.99072 M 116.99072,60 L 124.99072,44 H 112.99072 V 52 L 100.99072,76 H 88.990723 V 44 H 76.990723 L 68.990723,60 M 64.990723,60 V 44 H 52.990723 L 44.990723,60 M 20.990723,60 L 28.990723,44 H 40.990723 V 60 M 412.99072,44 H 436.99072 M 360.99072,40 V 36 M 336.99072,40 V 36 M 132.99072,44 H 156.99072"
+ sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" />
+ <rect
+ style="fill:none;stroke:none;stroke-width:8;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0.739727"
+ id="rect70"
+ width="466.47998"
+ height="120"
+ x="0"
+ y="0" />
+</svg>
diff --git a/iceberg/out.svg b/iceberg/out.svg
new file mode 100644
index 0000000000000000000000000000000000000000..c2eb6023215841219754c066371d61f676c24e81
--- /dev/null
+++ b/iceberg/out.svg
@@ -0,0 +1,176 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="408" height="128" class="svgbob">
+ <style>.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
+ stroke: black;
+ stroke-width: 2;
+ stroke-opacity: 1;
+ fill-opacity: 1;
+ stroke-linecap: round;
+ stroke-linejoin: miter;
+}
+
+.svgbob text {
+ white-space: pre;
+ fill: black;
+ font-family: Iosevka Fixed, monospace;
+ font-size: 14px;
+}
+
+.svgbob rect.backdrop {
+ stroke: none;
+ fill: white;
+}
+
+.svgbob .broken {
+ stroke-dasharray: 8;
+}
+
+.svgbob .filled {
+ fill: black;
+}
+
+.svgbob .bg_filled {
+ fill: white;
+ stroke-width: 1;
+}
+
+.svgbob .nofill {
+ fill: white;
+}
+
+.svgbob .end_marked_arrow {
+ marker-end: url(#arrow);
+}
+
+.svgbob .start_marked_arrow {
+ marker-start: url(#arrow);
+}
+
+.svgbob .end_marked_diamond {
+ marker-end: url(#diamond);
+}
+
+.svgbob .start_marked_diamond {
+ marker-start: url(#diamond);
+}
+
+.svgbob .end_marked_circle {
+ marker-end: url(#circle);
+}
+
+.svgbob .start_marked_circle {
+ marker-start: url(#circle);
+}
+
+.svgbob .end_marked_open_circle {
+ marker-end: url(#open_circle);
+}
+
+.svgbob .start_marked_open_circle {
+ marker-start: url(#open_circle);
+}
+
+.svgbob .end_marked_big_open_circle {
+ marker-end: url(#big_open_circle);
+}
+
+.svgbob .start_marked_big_open_circle {
+ marker-start: url(#big_open_circle);
+}
+
+</style>
+ <defs>
+ <marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+ <polygon points="0,0 0,4 4,2 0,0"></polygon>
+ </marker>
+ <marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+ <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
+ </marker>
+ <marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+ <circle cx="4" cy="4" r="2" class="filled"></circle>
+ </marker>
+ <marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+ <circle cx="4" cy="4" r="2" class="bg_filled"></circle>
+ </marker>
+ <marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+ <circle cx="4" cy="4" r="3" class="bg_filled"></circle>
+ </marker>
+ </defs>
+ <rect class="backdrop" x="0" y="0" width="408" height="128"></rect>
+ <line x1="8" y1="16" x2="0" y2="32" class="solid"></line>
+ <line x1="104" y1="48" x2="128" y2="48" class="solid"></line>
+ <line x1="316" y1="44" x2="316" y2="40" class="solid end_marked_open_circle"></line>
+ <line x1="368" y1="48" x2="392" y2="48" class="solid"></line>
+ <g>
+ <line x1="12" y1="16" x2="60" y2="16" class="solid"></line>
+ <line x1="12" y1="16" x2="12" y2="80" class="solid"></line>
+ <line x1="36" y1="16" x2="36" y2="80" class="solid"></line>
+ <line x1="60" y1="16" x2="60" y2="80" class="solid"></line>
+ <line x1="84" y1="48" x2="96" y2="48" class="solid"></line>
+ <line x1="84" y1="48" x2="84" y2="56" class="solid"></line>
+ <line x1="84" y1="56" x2="72" y2="80" class="solid"></line>
+ <line x1="96" y1="48" x2="88" y2="64" class="solid"></line>
+ <line x1="60" y1="80" x2="72" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <path d="M 208,16 A 16,16 0,0,0 208,32" class="nofill"></path>
+ <path d="M 208,16 A 16,16 0,0,1 208,32" class="nofill"></path>
+ <line x1="208" y1="32" x2="184" y2="80" class="solid"></line>
+ <line x1="208" y1="32" x2="232" y2="80" class="solid"></line>
+ <line x1="272" y1="48" x2="292" y2="48" class="solid"></line>
+ <line x1="272" y1="48" x2="256" y2="80" class="solid"></line>
+ <line x1="292" y1="48" x2="292" y2="80" class="solid"></line>
+ <line x1="232" y1="80" x2="256" y2="80" class="solid"></line>
+ <line x1="316" y1="48" x2="316" y2="56" class="solid"></line>
+ <line x1="316" y1="56" x2="304" y2="80" class="solid"></line>
+ <line x1="292" y1="80" x2="304" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="116" y1="32" x2="116" y2="56" class="solid"></line>
+ <line x1="116" y1="56" x2="104" y2="80" class="solid"></line>
+ <line x1="84" y1="80" x2="104" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="144" y1="48" x2="164" y2="48" class="solid"></line>
+ <line x1="144" y1="48" x2="128" y2="80" class="solid"></line>
+ <line x1="164" y1="48" x2="164" y2="56" class="solid"></line>
+ <line x1="164" y1="56" x2="152" y2="80" class="solid"></line>
+ <line x1="136" y1="64" x2="144" y2="80" class="solid"></line>
+ <line x1="144" y1="80" x2="152" y2="80" class="solid"></line>
+ <line x1="116" y1="64" x2="116" y2="80" class="solid"></line>
+ <line x1="116" y1="80" x2="128" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="232" y1="48" x2="248" y2="48" class="solid"></line>
+ <line x1="232" y1="48" x2="216" y2="80" class="solid"></line>
+ <path d="M 200,64 A 16,16 0,0,0 200,80" class="nofill"></path>
+ <line x1="200" y1="80" x2="216" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="352" y1="48" x2="360" y2="48" class="solid"></line>
+ <line x1="352" y1="48" x2="344" y2="64" class="solid"></line>
+ <line x1="360" y1="48" x2="368" y2="64" class="solid"></line>
+ <line x1="380" y1="32" x2="380" y2="80" class="solid"></line>
+ <line x1="368" y1="64" x2="380" y2="64" class="solid"></line>
+ <line x1="380" y1="80" x2="392" y2="80" class="solid"></line>
+ <line x1="400" y1="64" x2="392" y2="80" class="solid"></line>
+ <line x1="340" y1="80" x2="360" y2="80" class="solid"></line>
+ <line x1="368" y1="64" x2="360" y2="80" class="solid"></line>
+ <line x1="340" y1="80" x2="340" y2="112" class="solid"></line>
+ </g>
+ <g>
+ <line x1="340" y1="48" x2="340" y2="56" class="solid"></line>
+ <line x1="340" y1="56" x2="328" y2="80" class="solid"></line>
+ <line x1="316" y1="64" x2="316" y2="80" class="solid"></line>
+ <line x1="316" y1="80" x2="328" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="164" y1="64" x2="164" y2="80" class="solid"></line>
+ <line x1="164" y1="80" x2="176" y2="80" class="solid"></line>
+ <line x1="184" y1="64" x2="176" y2="80" class="solid"></line>
+ </g>
+ <g>
+ <line x1="340" y1="64" x2="340" y2="72" class="solid"></line>
+ <line x1="340" y1="72" x2="328" y2="96" class="solid"></line>
+ <line x1="328" y1="96" x2="336" y2="112" class="solid"></line>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/static/css/interface.css b/static/css/interface.css
index d27881819c0120eaeabf4919c97c74f37666a886..0c1c5bb44439c12de690d820dfc26b673cd251cb 100644
--- a/static/css/interface.css
+++ b/static/css/interface.css
@@ -41,23 +41,34 @@ p{
body{
margin-top: calc(var(--bar-h) * 1);
}
+body.write,
body.catalogue,
body.draw{
margin-top: calc(var(--bar-h) * 2);
}
+body.write .font,
+body.catalogue .font,
+body.draw .font{
+ height: calc(100vh - var(--bar-h) * 2);
+ grid-template-rows: 1fr;
+ box-sizing: border-box;
+}
+
+body > .tabs{
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 99999;
+}
nav ul,
.controls{
box-sizing: border-box;
- position: fixed;
width: 100%;
- z-index: 999;
display: flex;
align-items: center;
}
-nav ul{
- top: 0;
-}
+
nav ul li{
flex-grow: 1;
}
@@ -83,12 +94,13 @@ nav ul a.active{
================================================= */
.controls{
+ position: fixed;
gap: 0.5rem;
top: var(--bar-h);
background-color: var(--c-back);
- border-bottom: 1px solid black;
- padding: 0rem 2rem;
+ padding: 0rem 1rem;
height: var(--bar-h);
+ z-index: 99;
}
h1,h2{
@@ -100,7 +112,9 @@ input, button{
strong{
font-weight: bold;
}
-
+#text-input{
+ width: 26em;
+}
.controls hr{
display: block !important;
border: none;
@@ -128,41 +142,13 @@ label{
flex: 1 1 0%;
}
-.legend::before{
- content: '';
- width: 1em;
- height: 1em;
- border-radius: 50%;
- background-color: var(--c);
- margin-right: 0.5em;
- display: inline-block;
- vertical-align: middle;
-}
-
-/* CATEGORIES
- ================================================= */
-
-summary{
- padding: 1rem 2rem;
- background: black;
- color: white;
- border-bottom: whitesmoke solid 1px;
- cursor: pointer;
- position: sticky;
- top: calc(var(--bar-h) * 2);
-
- z-index: 99;
-}
-
-
-
/* one font block */
.font{
display: grid;
- grid-template-columns: repeat(2, calc(50% - 1rem));
- gap: 0.5rem 2rem;
- padding: 0.5rem 2rem 1rem;
+ grid-template-columns: repeat(2, calc(50% - 0.5rem));
+ gap: 1rem;
+ padding: 0 1rem 1rem;
position: relative;
}
@@ -194,23 +180,31 @@ aside.left{
.f-ascii{
font-family: monospace;
font-size: 1rem;
- padding: 1rem;
background-color: white;
overflow: auto;
line-height: 1;
-
- grid-column: 1 / span 1;
- grid-row: 2 / span 1;
}
.f-svg{
padding: 1rem;
background-color: white;
overflow: auto;
-
- grid-column: 2 / span 1;
- grid-row: 2 / span 1;
}
+.f-ascii,
+.f-svg{
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ grid-row: 1 / span 1;
+ border: 1px solid black;
+}
+.f-svg iframe{
+ border: none !important;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
.f-double{
width: 100%;
height: 100%;
@@ -226,25 +220,10 @@ hr{
hr:last-of-type{
display: none;
}
-summary + hr{
- display: none;
-}
svg{
overflow: visible;
}
-/* catalogue colors */
-.font h2::before{
- content: '';
- width: 1em;
- height: 1em;
- border-radius: 50%;
- background-color: var(--c);
- margin-right: 0.5em;
- display: inline-block;
- vertical-align: middle;
-}
-
/* autofix colors */
.fix-label{
border-bottom: solid limegreen 3px;
@@ -325,51 +304,82 @@ ul.classic{
margin: 0.5rem 0;
}
-/* DRAW
+/* font
================================================= */
-.draw .font{
- height: calc(100vh - var(--bar-h) * 2);
- grid-template-rows: 1fr;
- box-sizing: border-box;
- padding: 1rem 2rem;
-}
-.draw .f-ascii,
-.draw .f-svg{
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- grid-row: 1 / span 1;
- border: 1px solid black;
+.write .font{
+ grid-template-columns: 32rem 1fr;
}
-.draw .f-ascii{
- padding: 0;
+
+/* catalogue
+ ================================================= */
+
+.catalogue .font{
+ grid-template-columns: 1fr;
}
-.draw .f-svg{
- padding: 0;
+
+details{
+ position: relative;
+ z-index: 999;
}
-.f-svg iframe{
- border: none !important;
- width: 100%;
- height: 100%;
- display: block;
+details[open] > summary{
+ background-color: var(--c-link);
}
-.figfont{
- grid-template-columns: 32rem 1fr;
+summary{
+ padding: 0.5rem 1rem;
+ background: black;
+ color: white;
+ cursor: pointer;
+ white-space: nowrap;
+ padding-right: 3rem;
}
-
-.reload::after{
- content: 'reload';
+summary span{
+ display: inline-block;
position: absolute;
- inset: 0;
- background-color: rgba(0,0,205,0.2);
- z-index: 999;
- pointer-events: none;
- color: white;
+ right: 0.5rem;
+}
+summary + div{
+ position: absolute;
+ left: 100%;
+ top: 0;
+}
+.collection{
+ width: 75vw;
display: flex;
- justify-content: center;
- align-items: center;
- font-weight: bold;
+ flex-wrap: wrap;
+}
+.collection > .figfont{
+ padding: 0.5rem 1rem;
+ background: lightgray;
+ cursor: pointer;
+ white-space: nowrap;
+ box-sizing: border-box;
+ outline: 1px solid black;
+ outline-offset: -0.5px;
+}
+.figfont:hover{
+ color: var(--c-link);
+}
+/* catalogue colors */
+.figfont::before{
+ content: '';
+ width: 0.75em;
+ height: 0.75em;
+ border-radius: 50%;
+ background-color: var(--c);
+ margin-right: 0.5em;
+ display: inline-block;
+ vertical-align: middle;
+}
+.legend::before{
+ content: '';
+ width: 1em;
+ height: 1em;
+ border-radius: 50%;
+ background-color: var(--c);
+ margin-right: 0.5em;
+ display: inline-block;
+ vertical-align: middle;
}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 19b91b2387a25b86e47d4648954fe6dfadb495f0..6aa467d4437f14484782823b2639b8524f258bbf 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -22,12 +22,13 @@
<body class="{% block body_class %}{% endblock %}">
- <nav>
+ <nav class="tabs">
<ul>
<li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/"> index</a></li>
<li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">draw</a></li>
- <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li>
<li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">catalogue</a></li>
+ <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">font</a></li>
+ <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li>
</ul>
</nav>
@@ -35,5 +36,4 @@
</body>
-</html>
-
+</html>
\ No newline at end of file
diff --git a/templates/catalogue.html b/templates/catalogue.html
index 7c297692dc96bd332e75ae23399230ca954455e1..78addbe7f300568dd858332d7314c49675b737a2 100644
--- a/templates/catalogue.html
+++ b/templates/catalogue.html
@@ -4,102 +4,125 @@
{% block body %}
- <header class="controls">
- <label>text</label>
- <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
- <button onClick="window.location.reload();">generate</button>
-
- <hr>
-
- <label>weight</label>
- <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>
-
- <label class="fix-label" for="fix-checkbox"
- title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
- autofix</label>
- <input id="fix-checkbox" type="checkbox"
- class="body-class-check" value="check-fix" checked/>
-
- <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/>
-
- <script>
- let inputs = document.getElementsByClassName('get-input');
- for(let input of inputs){
- input.addEventListener('input', function(){
- const url = new URL(window.location.href);
- url.searchParams.set(input.dataset.name, input.value);
- window.history.replaceState(null, null, url);
- });
- }
- function toggle_class(classname, val){
- if(val){
- document.body.classList.add(classname);
- }
- else{
- document.body.classList.remove(classname);
- }
- }
- let body_class_checkboxes = document.getElementsByClassName("body-class-check");
- for(let checkbox of body_class_checkboxes){
- let classname = checkbox.value;
- checkbox.addEventListener('input', function(){
- toggle_class(classname, checkbox.checked);
- });
- toggle_class(classname, checkbox.checked);
- }
- </script>
- </header>
-
- <div class="box">
- {% for catalogue, legend in databases.items() %}
- <div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div>
- {% endfor %}
- </div>
-
- {% for type, type_data in output.items()%}
+ <header class="controls">
+ <label>figfont</label>
+ <details>
+ <summary>mini</summary>
+ <div>
+ {% for type, type_data in collection.items()%}
<details>
- <summary>{{type}} {{type_data['ascii']}}</summary>
-
- {% for catalogue in databases.keys() %}
- {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
- {% for f in fonts %}
- <div class="font {{f['catalogue']}}">
-
- <h2>{{f['name']}} ({{f['catalogue']}})</h2>
-
- <div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div>
- <div class="f-svg">{{f['svg']|safe|escape}}</div>
-
- {% if f['autofix'] %}
- <div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div>
- <div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div>
- {% endif %}
-
- <aside class="left">
- <!-- title="display the font metadata, embedded inside of the figlet file" -->
- <button>INFO ?</button>
- </aside>
-
- <aside class="right">
- <button>> SVG</button>
- <button>> HPGL</button>
- </aside>
-
- </div>
- {% endfor %}
- <hr>
+ <summary>{{type}} <span>{{type_data['ascii']}}</span></summary>
+ <div class="collection">
+ {% for database in databases.keys() %}
+ {% set fonts = type_data['fonts']|selectattr('database', 'equalto', database) %}
+ {% for f in fonts %}
+ <div value="{{f['figfont']}}" class="{{f['database']}} figfont">{{f['name']}}</div>
{% endfor %}
-
+ {% endfor %}
+ </div>
</details>
- {% endfor %}
-
- <script>
-
- </script>
+ {% endfor %}
+ </div>
+ </details>
+
+ <label>input</label>
+ <input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
+
+ <label for="upper-checkbox">uppercase</label>
+ <input id="upper-checkbox" type="checkbox"/>
+
+ <hr>
+
+ <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="fix-label" for="fix-checkbox"
+ title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
+ autofix</label>
+ <input id="fix-checkbox" type="checkbox"
+ class="body-class-check" value="check-fix" checked/>
+
+ <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/>
+
+ </header>
+
+ <div class="font catalogue" id="main">
+ <iframe class="f-double" id="svg-iframe" src="/writing/{{ 'db/default/stroke/mini.flf'.split('/') | join('_') }}">
+ </iframe>
+ </div>
+
+ <script>
+ let button_svg = document.getElementById('button-svg');
+ let svg_iframe = document.getElementById('svg-iframe');
+ let pad_iframe = document.getElementById('pad-iframe');
+
+ let new_url = new URL(svg_iframe.src);
+
+ 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;
+ }
+
+ // --- svg generation button
+ button_svg.addEventListener('click', function(){
+ svg_iframe.src = new_url;
+ document.getElementById('main').classList.add("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);
+ }
+ new_url = url;
+ });
+ }
+
+ let upper_checkbox = document.getElementById('upper-checkbox');
+ let text_input = document.getElementById('text-input');
+ upper_checkbox.addEventListener('change', function(){
+ if(upper_checkbox.checked){
+ text_input.value = text_input.value.toUpperCase();
+ let frame = document.getElementById("svg-iframe");
+ const url = new URL(frame.src);
+ url.searchParams.set(text_input.dataset.name, text_input.value);
+ new_url = url;
+ }
+ else{
+ text_input.value = text_input.value.toLowerCase();
+ let frame = document.getElementById("svg-iframe");
+ const url = new URL(frame.src);
+ url.searchParams.set(text_input.dataset.name, text_input.value);
+ new_url = url;
+ }
+ })
+
+ svg_iframe.addEventListener("load", function() {
+ document.getElementById('main').classList.remove("reload");
+ });
+</script>
{% endblock %}
diff --git a/templates/deprecated_catalogue.html b/templates/deprecated_catalogue.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c297692dc96bd332e75ae23399230ca954455e1
--- /dev/null
+++ b/templates/deprecated_catalogue.html
@@ -0,0 +1,105 @@
+{% extends "base.html" %}
+
+{% block body_class %}catalogue{% endblock %}
+
+{% block body %}
+
+ <header class="controls">
+ <label>text</label>
+ <input class="get-input" type="text" value="{{params['text']}}" data-name="t"/>
+ <button onClick="window.location.reload();">generate</button>
+
+ <hr>
+
+ <label>weight</label>
+ <input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w"/>
+
+ <label class="fix-label" for="fix-checkbox"
+ title="custom regex to try to map unrecognized character to ones that are processed by svgbob">
+ autofix</label>
+ <input id="fix-checkbox" type="checkbox"
+ class="body-class-check" value="check-fix" checked/>
+
+ <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/>
+
+ <script>
+ let inputs = document.getElementsByClassName('get-input');
+ for(let input of inputs){
+ input.addEventListener('input', function(){
+ const url = new URL(window.location.href);
+ url.searchParams.set(input.dataset.name, input.value);
+ window.history.replaceState(null, null, url);
+ });
+ }
+ function toggle_class(classname, val){
+ if(val){
+ document.body.classList.add(classname);
+ }
+ else{
+ document.body.classList.remove(classname);
+ }
+ }
+ let body_class_checkboxes = document.getElementsByClassName("body-class-check");
+ for(let checkbox of body_class_checkboxes){
+ let classname = checkbox.value;
+ checkbox.addEventListener('input', function(){
+ toggle_class(classname, checkbox.checked);
+ });
+ toggle_class(classname, checkbox.checked);
+ }
+ </script>
+ </header>
+
+ <div class="box">
+ {% for catalogue, legend in databases.items() %}
+ <div class="legend {{catalogue}}"><strong>{{catalogue}}</strong> {{legend}}</div>
+ {% endfor %}
+ </div>
+
+ {% for type, type_data in output.items()%}
+ <details>
+ <summary>{{type}} {{type_data['ascii']}}</summary>
+
+ {% for catalogue in databases.keys() %}
+ {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
+ {% for f in fonts %}
+ <div class="font {{f['catalogue']}}">
+
+ <h2>{{f['name']}} ({{f['catalogue']}})</h2>
+
+ <div class="f-ascii"><pre>{{f['ascii']|safe|escape}}</pre></div>
+ <div class="f-svg">{{f['svg']|safe|escape}}</div>
+
+ {% if f['autofix'] %}
+ <div class="f-ascii fix"><pre>{{f['ascii_fix_indication']|safe|escape}}</pre></div>
+ <div class="f-svg fix">{{f['svg_fix']|safe|escape}}</div>
+ {% endif %}
+
+ <aside class="left">
+ <!-- title="display the font metadata, embedded inside of the figlet file" -->
+ <button>INFO ?</button>
+ </aside>
+
+ <aside class="right">
+ <button>> SVG</button>
+ <button>> HPGL</button>
+ </aside>
+
+ </div>
+ {% endfor %}
+ <hr>
+ {% endfor %}
+
+ </details>
+ {% endfor %}
+
+ <script>
+
+ </script>
+
+{% endblock %}
+
diff --git a/templates/draw.html b/templates/draw.html
index a3e90c2bb66e284d14b7c5c1d6015cd4ef1d672f..6f6a81349e6fb5e8b3868f08c4f1fe3fa7530579 100644
--- a/templates/draw.html
+++ b/templates/draw.html
@@ -20,71 +20,10 @@
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="t" 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>
+ class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe" checked/>
</header>
- <div class="font">
+ <div class="font reload" id="main">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
</iframe>
<div class="f-svg">
@@ -93,5 +32,77 @@
</div>
</div>
+ <script>
+ let button_pad = document.getElementById('button-pad');
+ let button_svg = document.getElementById('button-svg');
+ let svg_iframe = document.getElementById('svg-iframe');
+ let pad_iframe = document.getElementById('pad-iframe');
+
+ let new_url = new URL(svg_iframe.src);
+
+ 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;
+ }
+
+ // --- pad go button
+ button_pad.addEventListener('click', function(){
+ 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('/');
+
+ new_url = new URL(svg_iframe.src);
+
+ document.getElementById('main').classList.add("reload");
+ svg_iframe.src = svg_src;
+ });
+
+ // --- svg generation button
+ button_svg.addEventListener('click', function(){
+ svg_iframe.src = new_url;
+ document.getElementById('main').classList.add("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);
+ }
+ new_url = url;
+ });
+ }
+
+ svg_iframe.addEventListener("load", function() {
+ document.getElementById('main').classList.remove("reload");
+ });
+</script>
+
{% endblock %}
diff --git a/templates/drawing.html b/templates/drawing.html
index 70e385355d4a63b1d022428db992be046953325f..f34a745ec0ed68ca35153025bb38c7e32e9ead6e 100644
--- a/templates/drawing.html
+++ b/templates/drawing.html
@@ -21,6 +21,9 @@
body.check-text .svgbob text{
visibility: visible;
}
+ input, button{
+ font-family: monospace;
+ }
</style>
</head>
@@ -28,12 +31,13 @@
{{ svg|safe }}
- <button id="save-svg">> SVG</button>
+ <button id="save-svg">get SVG</button>
<script>
function get2bodyclass(){
const url = new URL(window.location.href);
- let checked = url.searchParams.get("c");
+ let checked;
+ checked = url.searchParams.get("c");
if(checked == "false"){
document.body.classList.remove("check-text");
}
diff --git a/templates/font.html b/templates/font.html
index 749e75aa57aecc9847919f17cb343e6e63d16535..9b814962235c0b7175dfcfe0a895329d4acea436 100644
--- a/templates/font.html
+++ b/templates/font.html
@@ -1,6 +1,6 @@
{% extends "base.html" %}
-{% block body_class %}draw{% endblock %}
+{% block body_class %}write{% endblock %}
{% block body %}
@@ -9,15 +9,16 @@
<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>
-
+ <label>input</label>
<input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
<label for="upper-checkbox">uppercase</label>
<input id="upper-checkbox" type="checkbox"/>
+ <hr>
+
+ <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"/>
@@ -26,74 +27,9 @@
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('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);
- }
- console.log(url);
- // frame.contentWindow.history.replaceState(null, null, url);
- frame.src = url
- });
- }
- </script>
</header>
- <div class="font figfont reload" id="main">
+ <div class="font reload" id="main">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
</iframe>
<iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">
@@ -106,6 +42,8 @@
let svg_iframe = document.getElementById('svg-iframe');
let pad_iframe = document.getElementById('pad-iframe');
+ let new_url = new URL(svg_iframe.src);
+
function updateGET(frame, param, value){
// object from GET parameters
let [base_src, params_src] = frame.src.split("?");
@@ -135,19 +73,21 @@
svg_src[svg_src.length-1] = value;
svg_src = svg_src.join('/');
+ new_url = new URL(svg_iframe.src);
+
document.getElementById('main').classList.add("reload");
svg_iframe.src = svg_src;
-
});
// --- svg generation button
button_svg.addEventListener('click', function(){
+ svg_iframe.src = new_url;
document.getElementById('main').classList.add("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('change', function(){
let frame = document.getElementById(input.dataset.frame);
@@ -159,9 +99,7 @@
else{
url.searchParams.set(input.dataset.name, input.value);
}
- // frame.contentWindow.history.replaceState(null, null, url);
- document.getElementById('main').classList.add("reload");
- frame.src = url;
+ new_url = url;
});
}
@@ -173,16 +111,14 @@
let frame = document.getElementById("svg-iframe");
const url = new URL(frame.src);
url.searchParams.set(text_input.dataset.name, text_input.value);
- document.getElementById('main').classList.add("reload");
- frame.src = url
+ new_url = url;
}
else{
text_input.value = text_input.value.toLowerCase();
let frame = document.getElementById("svg-iframe");
const url = new URL(frame.src);
url.searchParams.set(text_input.dataset.name, text_input.value);
- document.getElementById('main').classList.add("reload");
- frame.src = url
+ new_url = url;
}
})
diff --git a/templates/image.html b/templates/image.html
new file mode 100644
index 0000000000000000000000000000000000000000..d2ba06283a1e061e47f470d81f93f34e492daad7
--- /dev/null
+++ b/templates/image.html
@@ -0,0 +1,37 @@
+{% extends "base.html" %}
+
+{% block body_class %}image{% endblock %}
+
+{% block body %}
+
+ <header class="controls">
+ <button id="button-image">import image</button>
+
+ <hr>
+
+ <button id="button-svg">generate</button>
+
+ <input class="get-input" id="text-input" type="text" value=" ()/\|'-._=+" 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="t" data-frame="svg-iframe" checked/>
+
+ </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 %}
+
diff --git a/templates/writing.html b/templates/writing.html
index 46aa591f5a6305e247ee13f8368d5aa0a055802a..0e08a0b3dd8b8017dddd7397fd5d63968cba56ef 100644
--- a/templates/writing.html
+++ b/templates/writing.html
@@ -44,6 +44,9 @@
.f-svg svg{
overflow: visible;
}
+ input, button{
+ font-family: monospace;
+ }
</style>
</head>
@@ -55,7 +58,7 @@
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
- <button id="save-svg">> SVG</button>
+ <button id="save-svg">get SVG</button>
<script>
function get2bodyclass(){