fixed catalogue, put back reload script indication

This commit is contained in:
Doriane 2024-06-09 15:33:32 +02:00
parent de02a8e855
commit 60ff896fc0
20 changed files with 1128 additions and 411 deletions

142
app.py
View File

@ -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')
parse_collection()
app.run(debug=True, host='0.0.0.0')

207
iceberg/42.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 380 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 354 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 276 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 363 KiB

199
iceberg/metascriipt.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 5.2 KiB

176
iceberg/out.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 6.3 KiB

View File

@ -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;
}
.draw .f-ascii{
padding: 0;
}
.draw .f-svg{
padding: 0;
}
.f-svg iframe{
border: none !important;
width: 100%;
height: 100%;
display: block;
}
.figfont{
.write .font{
grid-template-columns: 32rem 1fr;
}
.reload::after{
content: 'reload';
position: absolute;
inset: 0;
background-color: rgba(0,0,205,0.2);
z-index: 999;
pointer-events: none;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
/* catalogue
================================================= */
.catalogue .font{
grid-template-columns: 1fr;
}
details{
position: relative;
z-index: 999;
}
details[open] > summary{
background-color: var(--c-link);
}
summary{
padding: 0.5rem 1rem;
background: black;
color: white;
cursor: pointer;
white-space: nowrap;
padding-right: 3rem;
}
summary span{
display: inline-block;
position: absolute;
right: 0.5rem;
}
summary + div{
position: absolute;
left: 100%;
top: 0;
}
.collection{
width: 75vw;
display: flex;
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;
}

View File

@ -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>

View File

@ -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 %}
{% endfor %}
</div>
</details>
<script>
<label>input</label>
<input class="get-input" id="text-input" type="text" value="{{params['text']}}" data-name="t" data-frame="svg-iframe"/>
</script>
<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 %}

View File

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

View File

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

View File

@ -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");
}

View File

@ -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;
}
})

37
templates/image.html Normal file
View File

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

View File

@ -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(){