Compare commits

...

2 Commits

Author SHA1 Message Date
Doriane a16e0457d4 now with jp2a 2 months ago
Doriane 66c1dcf682 gitignore 2 months ago
  1. 1
      .gitignore
  2. 5
      README.md
  3. 95
      app.py
  4. 2
      deprecated/deprecated_catalogue.html
  5. 44
      static/css/basics.css
  6. 98
      static/css/interface.css
  7. 55
      static/js/export_interface.js
  8. 71
      static/js/generate_interface.js
  9. 2
      templates/base.html
  10. 2
      templates/catalogue.html
  11. 72
      templates/draw.html
  12. 84
      templates/drawing.html
  13. 2
      templates/font.html
  14. 21
      templates/iframe/double.html
  15. 15
      templates/iframe/drawing.html
  16. 27
      templates/image.html
  17. 2
      templates/index.html
  18. 9
      templates/partials/export_interface.html
  19. 88
      templates/writing.html

1
.gitignore

@ -0,0 +1 @@
static/upload

5
README.md

@ -61,11 +61,10 @@ Please follow the [installation instructions](https://github.com/abey79/vpype#in
* reload bug in draw * reload bug in draw
* image tab * image tab
* better * group all js in js folder
* default dic in one place
* input listen when opening page (for browser history remember) * input listen when opening page (for browser history remember)
* factorise JS
* factorise CSS
* show font-info file * show font-info file
--> -->

95
app.py

@ -82,6 +82,25 @@ def text2figlet(text, figfont):
return answer return answer
def image2ascii(img, chars, width):
print('--- JP2A SUBPROCESS')
jp2a = subprocess.run([
"jp2a", img, "--background=light", "--width="+width, "--chars="+chars],
stdout = subprocess.PIPE, stderr = subprocess.PIPE, text=True)
# "--background", "light",
# "--width", width,
# "--chars", chars
print(jp2a)
if jp2a.returncode == 0:
answer = (True, jp2a.stdout)
else:
answer = (False, jp2a.stderr)
return answer
def ascii2svg(ascii, weight='2', scale='1'): def ascii2svg(ascii, weight='2', scale='1'):
if ascii: if ascii:
print('--- SVGBOB SUBPROCESS') print('--- SVGBOB SUBPROCESS')
@ -272,11 +291,12 @@ def drawing(id):
svg = pad_answer[1] svg = pad_answer[1]
return render_template( return render_template(
'drawing.html', 'iframe/drawing.html',
title = title, title = title,
params = params, params = params,
svg = svg) svg = svg)
# __ _ _ _ # __ _ _ _
# / _| ___ _ __ | |_ _ __ ___ __ _| | _(_)_ __ __ _ # / _| ___ _ __ | |_ _ __ ___ __ _| | _(_)_ __ __ _
# | |_ / _ \| '_ \| __| | '_ ` _ \ / _` | |/ / | '_ \ / _` | # | |_ / _ \| '_ \| __| | '_ ` _ \ / _` | |/ / | '_ \ / _` |
@ -340,7 +360,7 @@ def writing(id):
ascii = svg = pad_answer[1] ascii = svg = pad_answer[1]
return render_template( return render_template(
'writing.html', 'iframe/double.html',
title = title, title = title,
params = params, params = params,
ascii = ascii, ascii = ascii,
@ -395,6 +415,77 @@ def specimen(type):
params = params, params = params,
svg = svg) svg = svg)
# _
# (_)_ __ ___ __ _ __ _ ___
# | | '_ ` _ \ / _` |/ _` |/ _ \
# | | | | | | | (_| | (_| | __/
# |_|_| |_| |_|\__,_|\__, |\___|
# |___/
#
# jp2a to svgbob
upload_folder = os.path.join('static', 'upload')
app.config['UPLOAD'] = upload_folder
@app.route("/image.html", methods=['GET', 'POST'])
def image():
# ()/\|'-._=+
params = {
'weight': request.args.get('w') or '2',
'chars': request.args.get('c') or " _|+#",
'width': request.args.get('width') or "120"
}
if request.method == 'POST':
file = request.files['img']
filename = file.filename
file.save(os.path.join(app.config['UPLOAD'], filename))
img = os.path.join(app.config['UPLOAD'], filename)
return render_template('image.html',
title = title,
img = img,
filename = filename,
params = params)
return render_template(
'image.html',
title = title,
img = os.path.join(app.config['UPLOAD'], 'default.jpg'),
filename = 'default.jpg',
params = params)
@app.route("/drawing-image/<id>")
def drawing_image(id):
params = {
'filename': id or 'default.jpg',
'weight': request.args.get('w') or '2',
'chars': request.args.get('chars') or " _|+#",
'width': request.args.get('width') or "120",
}
if params['filename'] == 'default.jpg':
ascii = svg = ''
elif '.' in params['filename']:
img = os.path.join(app.config['UPLOAD'], params['filename'])
answer, ascii = image2ascii(img, params['chars'], params['width'])
if answer:
svg = ascii2svg(ascii, params['weight'])
else:
ascii = svg = answer
return render_template(
'iframe/double.html',
title = title,
params = params,
ascii = ascii,
svg = svg)
# _ _ _ # _ _ _
# | |__ _ __ __ _| | _____ ___ __ ___ _ __| |_ # | |__ _ __ __ _| | _____ ___ __ ___ _ __| |_
# | '_ \| '_ \ / _` | | / _ \ \/ / '_ \ / _ \| '__| __| # | '_ \| '_ \ / _` | | / _ \ \/ / '_ \ / _ \| '__| __|

2
deprecated/deprecated_catalogue.html

@ -67,7 +67,7 @@
{% for catalogue in databases.keys() %} {% for catalogue in databases.keys() %}
{% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %} {% set fonts = type_data['fonts']|selectattr('catalogue', 'equalto', catalogue) %}
{% for f in fonts %} {% for f in fonts %}
<div class="font {{f['catalogue']}}"> <div class="split-screen {{f['catalogue']}}">
<h2>{{f['name']}} ({{f['catalogue']}})</h2> <h2>{{f['name']}} ({{f['catalogue']}})</h2>

44
static/css/basics.css

@ -1,4 +1,11 @@
:root{
--bar-h: 3rem;
--c-link: blue;
--c-back: whitesmoke;
--c-default: black;
--c-contributed: palegreen;
--c-jave: mediumpurple;
}
body{ body{
font-family: monospace; font-family: monospace;
@ -6,6 +13,15 @@ body{
line-height: 1.45; line-height: 1.45;
} }
button, input[type="submit"], input[type="file"]{
background-color: var(--c-link);
border: none;
border-radius: 5em;
padding: 0.5em 1em;
color: white;
}
a{ a{
color: var(--c-link); color: var(--c-link);
} }
@ -49,22 +65,27 @@ label, input{
position: fixed; position: fixed;
top: 0.5rem; top: 0.5rem;
right: 0.5em; right: 0.5em;
width: fit-content;
margin-left: auto;
} }
#save-buttons > input, #save-buttons > input,
#save-buttons > button, #save-buttons > button,
#save-buttons > label{ #save-buttons > label{
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
margin-left: auto; }
#save-buttons.direct{
top: calc(var(--bar-h) * 2 + 0.5rem);
right: 1.5em;
} }
.double-font{ .double{
height: 100vh; height: 100vh;
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1rem; gap: 1rem;
margin: 0; margin: 0;
} }
.double-font > div{ .double > div{
background-color: white; background-color: white;
border: 1px solid black; border: 1px solid black;
overflow: auto; overflow: auto;
@ -72,9 +93,20 @@ label, input{
font-family: monospace; font-family: monospace;
font-size: 1rem; font-size: 1rem;
} }
.double .f-ascii{
font-size: 0.5rem;
}
.double svg{
transform-origin: top left;
transform: scale(0.5);
}
.f-ascii{ .f-ascii{
font-family: monospace; font-family: monospace;
font-size: 1rem; font-size: .875rem;
background-color: white;
overflow: auto;
line-height: 1.2;
} }

98
static/css/interface.css

@ -1,12 +1,4 @@
:root{
--bar-h: 3rem;
--c-link: blue;
--c-back: whitesmoke;
--c-default: black;
--c-contributed: palegreen;
--c-jave: mediumpurple;
}
.default{ .default{
--c: var(--c-default); --c: var(--c-default);
} }
@ -20,14 +12,6 @@ body{
background-color: var(--c-back); background-color: var(--c-back);
} }
button{
background-color: var(--c-link);
border: none;
border-radius: 5em;
padding: 0.5em 1em;
color: white;
}
img{ img{
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -39,18 +23,6 @@ img{
body{ body{
margin-top: calc(var(--bar-h) * 1); 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{ body > .tabs{
position: fixed; position: fixed;
@ -144,7 +116,7 @@ nav ul a.active{
/* one font block */ /* one font block */
.font{ .split-screen{
display: grid; display: grid;
grid-template-columns: repeat(2, calc(50% - 0.5rem)); grid-template-columns: repeat(2, calc(50% - 0.5rem));
gap: 1rem; gap: 1rem;
@ -152,13 +124,47 @@ nav ul a.active{
position: relative; position: relative;
} }
.font aside{ .split-screen aside{
position: absolute; position: absolute;
bottom: 0.5rem; bottom: 0.5rem;
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
} }
body.write .split-screen,
body.catalogue .split-screen,
body.image .split-screen,
body.draw .split-screen{
height: calc(100vh - var(--bar-h) * 2);
grid-template-rows: 1fr;
box-sizing: border-box;
}
body.write,
body.catalogue,
body.image,
body.draw{
margin-top: calc(var(--bar-h) * 2);
}
body.image .f-image,
body.image .f-ascii{
grid-row: auto;
grid-column: 1;
}
body.image .f-svg{
grid-row: -1 / 1;
grid-column: 2;
}
body.image .f-image img{
width: 100%;
height: 100%;
object-fit: contain;
filter: grayscale(1);
}
aside.right{ aside.right{
right: 2.5rem; right: 2.5rem;
} }
@ -166,30 +172,25 @@ aside.left{
right: calc(50vw + 1.5rem); right: calc(50vw + 1.5rem);
} }
.font h2{ .split-screen h2{
font-size: 0.875rem; font-size: 0.875rem;
grid-column: 1 / -1; grid-column: 1 / -1;
font-weight: normal; font-weight: normal;
} }
.f-ascii{
font-family: monospace;
font-size: 1rem;
background-color: white;
overflow: auto;
line-height: 1; .f-image,
} .f-ascii,
.f-svg{ .f-svg{
background-color: white; background-color: white;
overflow: auto; overflow: auto;
}
.f-ascii,
.f-svg{
height: 100%; height: 100%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
grid-row: 1 / span 1; grid-row: 1 / span 1;
border: 1px solid black; border: 1px solid black;
font-family: monospace;
font-size: 1rem;
line-height: 1;
} }
.f-svg iframe{ .f-svg iframe{
border: none !important; border: none !important;
@ -198,19 +199,24 @@ aside.left{
display: block; display: block;
} }
body.image .split-screen{
grid-template-columns: 1fr 2fr;
}
.f-double{ .f-double{
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.font:first-of-type{ .split-screen:first-of-type{
margin-top: 1rem; margin-top: 1rem;
} }
/* TITLE /* TITLE
================================================= */ ================================================= */
.title.font{ .title.split-screen{
padding: 2rem 2rem 4rem; padding: 2rem 2rem 4rem;
gap: 0 var(--bar-h); gap: 0 var(--bar-h);
grid-template-columns: repeat(2, calc(50% - calc(var(--bar-h) / 2))); grid-template-columns: repeat(2, calc(50% - calc(var(--bar-h) / 2)));
@ -235,7 +241,7 @@ aside.left{
overflow: visible; overflow: visible;
max-width: 100%; max-width: 100%;
grid-column: span 2; grid-column: span 2;
max-height: 24rem; max-height: 21rem;
margin: 0 auto; margin: 0 auto;
} }
.title svg a{ .title svg a{
@ -282,14 +288,14 @@ aside.left{
/* font /* font
================================================= */ ================================================= */
.write .font{ .write .split-screen{
grid-template-columns: 32rem 1fr; grid-template-columns: 32rem 1fr;
} }
/* catalogue /* catalogue
================================================= */ ================================================= */
.catalogue .font{ .catalogue .split-screen{
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }

55
static/js/export_interface.js

@ -0,0 +1,55 @@
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);
}
let save_button_svg = document.getElementById('save-svg');
save_button_svg.addEventListener('click', function(){
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
svg_url = '/svg/' + name,
a = document.createElement('a');
a.href = svg_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
let save_button_hpgl = document.getElementById('save-hpgl');
save_button_hpgl.addEventListener('click', function () {
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
hpgl_url = '/hpgl/' + name,
a = document.createElement('a');
a.href = hpgl_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});

71
static/js/generate_interface.js

@ -0,0 +1,71 @@
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
if(button_pad){
button_pad.addEventListener('click', function(){
let input = document.getElementById(button_pad.dataset.use);
let value = input.value;
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_src);
svg_iframe.src = new_url;
document.getElementById('main').classList.add("reload");
});
}
// --- svg generation button
if(button_svg){
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");
});

2
templates/base.html

@ -31,7 +31,7 @@
<li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">ASCII draw</a></li> <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">ASCII draw</a></li>
<li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">FIGfont catalogue</a></li> <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">FIGfont catalogue</a></li>
<li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</a></li> <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</a></li>
<!-- <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li> --> <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li>
<li><a {% if request.url_rule.endpoint == "gallery" %}class="active"{% endif %} href="/gallery.html">gallery</a></li> <li><a {% if request.url_rule.endpoint == "gallery" %}class="active"{% endif %} href="/gallery.html">gallery</a></li>
</ul> </ul>
</nav> </nav>

2
templates/catalogue.html

@ -55,7 +55,7 @@
</header> </header>
<div class="font catalogue reload" id="main"> <div class="split-screen catalogue reload" id="main">
<iframe class="f-double" id="svg-iframe" <iframe class="f-double" id="svg-iframe"
src="/writing/{{ 'static/db/default/stroke/script.flf'.split('/') | join('$') }}"> src="/writing/{{ 'static/db/default/stroke/script.flf'.split('/') | join('$') }}">
</iframe> </iframe>

72
templates/draw.html

@ -18,7 +18,7 @@
</header> </header>
<div class="font reload" id="main"> <div class="split-screen reload" id="main">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}"> <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
</iframe> </iframe>
<div class="f-svg"> <div class="f-svg">
@ -27,75 +27,7 @@
</div> </div>
</div> </div>
<script> <script src="/static/js/generate_interface.js"></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 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_src);
svg_iframe.src = new_url;
document.getElementById('main').classList.add("reload");
});
// --- 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 %} {% endblock %}

84
templates/drawing.html

@ -1,84 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
</head>
<body>
{{ svg|safe }}
<div id="save-buttons">
<label for="text-checkbox"
title="display the remaining text and markers in the svg output in red">
preview</label>
<input id="text-checkbox" type="checkbox" class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe"/>
<button id="save-svg">get SVG</button>
<button id="save-hpgl">get HPGL</button>
</div>
<script>
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>
<script>
let save_button_svg = document.getElementById('save-svg');
save_button_svg.addEventListener('click', function(){
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
svg_url = '/svg/' + name,
a = document.createElement('a');
a.href = svg_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
let save_button_hpgl = document.getElementById('save-hpgl');
save_button_hpgl.addEventListener('click', function () {
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
hpgl_url = '/hpgl/' + name,
a = document.createElement('a');
a.href = hpgl_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
</script>
</body>
</html>

2
templates/font.html

@ -23,7 +23,7 @@
</header> </header>
<div class="font reload" id="main"> <div class="split-screen reload" id="main">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}"> <iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
</iframe> </iframe>
<iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}"> <iframe class="f-double" id="svg-iframe" src="/writing/{{params['pad']}}">

21
templates/iframe/double.html

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
</head>
<body class="double">
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
<div class="f-svg">
{{ svg|safe }}
{% include 'partials/export_interface.html' %}
</div>
</body>
</html>

15
templates/iframe/drawing.html

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
</head>
<body>
{{ svg|safe }}
{% include 'partials/export_interface.html' %}
</body>
</html>

27
templates/image.html

@ -5,33 +5,32 @@
{% block body %} {% block body %}
<header class="controls"> <header class="controls">
<button id="button-image">import image</button>
<form action="{{ url_for('image') }}" enctype="multipart/form-data" method="POST">
<input name="img" type="file"/>
<input type="submit"/>
</form>
<hr> <hr>
<button id="button-svg">generate</button> <button id="button-svg">generate</button>
<input class="get-input" style="width: 8rem;" id="text-input" type="text" value="{{params['chars']}}" data-name="chars" data-frame="svg-iframe"/>
<input class="get-input" id="text-input" type="text" value=" ()/\|'-._=+" data-name="t" data-frame="svg-iframe"/> <label>width</label>
<input class="get-input" type="range" min="40" max="320" step="20" value="{{params['width']}}" data-name="width" data-frame="svg-iframe"/>
<label>weight</label> <label>weight</label>
<input class="get-input" type="range" min="1" max="8" value="{{params['weight']}}" data-name="w" data-frame="svg-iframe"/> <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> </header>
<div class="font"> <div class="split-screen reload" id="main">
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}"> <div class="f-image"><img src="{{img}}"></div>
<iframe id="svg-iframe" class="f-double" src="/drawing-image/{{filename}}">
</iframe> </iframe>
<div class="f-svg">
<iframe id="svg-iframe" src="/drawing/{{params['pad']}}">
</iframe>
</div>
</div> </div>
<script src="/static/js/generate_interface.js"></script>
{% endblock %} {% endblock %}

2
templates/index.html

@ -2,7 +2,7 @@
{% block body %} {% block body %}
<div class="font title box"> <div class="split-screen title box">
<div class="f-ascii"> <div class="f-ascii">
<pre> .- _-- /. /. /. |\ <pre> .- _-- /. /. /. |\
( /| || || || \\ ( /| || || || \\

9
templates/partials/export_interface.html

@ -0,0 +1,9 @@
<div id="save-buttons" {% if zone == "direct" %}class="direct"{% endif %}>
<label for="text-checkbox"
title="display the remaining text and markers in the svg output in red">
preview</label>
<input id="text-checkbox" type="checkbox" class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe"/>
<button id="save-svg">get SVG</button>
<button id="save-hpgl">get HPGL</button>
</div>
<script src="/static/js/export_interface.js"></script>

88
templates/writing.html

@ -1,88 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/static/js/FileSaver.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/basics.css" />
<link rel="stylesheet" type="text/css" href="/static/css/svg.css" />
</head>
<body class="double-font">
<div class="f-svg">
{{ svg|safe }}
<div id="save-buttons">
<label for="text-checkbox"
title="display the remaining text in the svg output in red">
preview</label>
<input id="text-checkbox" type="checkbox" class="body-class-check" value="check-text" data-name="c" data-frame="svg-iframe"/>
<button id="save-svg">get SVG</button>
<button id="save-hpgl">get HPGL</button>
</div>
</div>
<div class="f-ascii"><pre>{{ ascii|safe }}</pre></div>
<script>
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>
<script>
let save_button_svg = document.getElementById('save-svg');
save_button_svg.addEventListener('click', function(){
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
svg_url = '/svg/' + name,
a = document.createElement('a');
a.href = svg_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
let save_button_hpgl = document.getElementById('save-hpgl');
save_button_hpgl.addEventListener('click', function () {
let url = document.URL,
parts = url.split('/'),
name = parts[parts.length-1],
hpgl_url = '/hpgl/' + name,
a = document.createElement('a');
a.href = hpgl_url;
a.setAttribute('download', 'download');
if (document.createEvent) {
const event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
a.dispatchEvent(event);
}
else {
a.click();
}
});
</script>
</body>
</html>
Loading…
Cancel
Save