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