mirror of
https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git
synced 2024-12-21 12:10:48 +01:00
fixed catalogue, put back reload script indication
This commit is contained in:
Doriane
parent
de02a8e855
commit
60ff896fc0
142
app.py
142
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')
|
||||
parse_collection()
|
||||
app.run(debug=True, host='0.0.0.0')
|
||||
207
iceberg/42.svg
Normal file
207
iceberg/42.svg
Normal 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 |
BIN
iceberg/Capture d’écran de 2024-02-20 01-05-06.png
Normal file
BIN
iceberg/Capture d’écran de 2024-02-20 01-05-06.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
iceberg/Capture d’écran de 2024-02-24 15-42-20.png
Normal file
BIN
iceberg/Capture d’écran de 2024-02-24 15-42-20.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png
Normal file
BIN
iceberg/Screenshot 2024-03-30 at 16-34-12 Cobbled paths.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
BIN
iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png
Normal file
BIN
iceberg/Screenshot 2024-03-30 at 16-39-06 Cobbled paths.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
BIN
iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png
Normal file
BIN
iceberg/Screenshot 2024-03-30 at 16-44-16 Cobbled paths.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
BIN
iceberg/besançon/full-pic.png
Normal file
BIN
iceberg/besançon/full-pic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
iceberg/besançon/small-pic.png
Normal file
BIN
iceberg/besançon/small-pic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 KiB |
199
iceberg/metascriipt.svg
Normal file
199
iceberg/metascriipt.svg
Normal 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
176
iceberg/out.svg
Normal 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 |
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
@ -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 %}
|
||||
|
||||
|
||||
105
templates/deprecated_catalogue.html
Normal file
105
templates/deprecated_catalogue.html
Normal 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 %}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
@ -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
37
templates/image.html
Normal 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 %}
|
||||
|
||||
@ -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(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user