mirror of
https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git
synced 2024-12-21 12:10:48 +01:00
Merge branch 'master' of gitlab.constantvzw.org:osp/tools.cobbled-paths
This commit is contained in:
commit
b81705d105
72
app.py
72
app.py
@ -165,6 +165,66 @@ def drawing(id):
|
||||
params = params,
|
||||
svg = svg)
|
||||
|
||||
# __ _ _ _
|
||||
# / _| ___ _ __ | |_ _ __ ___ __ _| | _(_)_ __ __ _
|
||||
# | |_ / _ \| '_ \| __| | '_ ` _ \ / _` | |/ / | '_ \ / _` |
|
||||
# | _| (_) | | | | |_ | | | | | | (_| | <| | | | | (_| |
|
||||
# |_| \___/|_| |_|\__| |_| |_| |_|\__,_|_|\_\_|_| |_|\__, |
|
||||
# |___/
|
||||
#
|
||||
# EDITING A FIGGONT ON A PAD TO THEN USE IT
|
||||
|
||||
@app.route("/font.html")
|
||||
def font():
|
||||
|
||||
params = {
|
||||
'text': request.args.get('t') or 'Cobbled Paths',
|
||||
'pad': request.args.get('p') or 'standard',
|
||||
'weight': request.args.get('w') or '3',
|
||||
}
|
||||
params['pad-full'] = etherpad + prefix + params['pad']
|
||||
|
||||
return render_template(
|
||||
'font.html',
|
||||
title = title,
|
||||
params = params)
|
||||
|
||||
@app.route("/writing/<id>")
|
||||
def writing(id):
|
||||
|
||||
params = {
|
||||
'text': request.args.get('t') or 'Cobbled Paths',
|
||||
'pad': id or 'standard',
|
||||
'weight': request.args.get('w') or '3',
|
||||
}
|
||||
params['pad-full'] = etherpad + prefix + params['pad']
|
||||
|
||||
# get pad content
|
||||
print(' getting ' + params['pad-full'])
|
||||
pad_export = requests.get(params['pad-full'] + '/export/txt')
|
||||
ascii_input = pad_export.text
|
||||
|
||||
# store as a temporary file
|
||||
print('--- saving figfont as temp ---')
|
||||
(figfont_file, figfont_path) = tempfile.mkstemp(suffix='.flf')
|
||||
print(figfont_path)
|
||||
with open(figfont_path, 'w') as figfont_file:
|
||||
figfont_file.write(ascii_input)
|
||||
|
||||
print('--- opening the figfont ---')
|
||||
f = {}
|
||||
f['ascii'] = text2figlet(params['text'], figfont_path)
|
||||
print(f['ascii'])
|
||||
|
||||
print('--- rendering to svg ---')
|
||||
svg = ascii2svg(f['ascii'], params['weight'])
|
||||
|
||||
return render_template(
|
||||
'drawing.html',
|
||||
title = title,
|
||||
params = params,
|
||||
svg = svg)
|
||||
|
||||
# _ _
|
||||
# ___ __ _| |_ __ _| | ___ __ _ _ _ ___
|
||||
# / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
|
||||
@ -221,12 +281,12 @@ def catalogue():
|
||||
params = params)
|
||||
|
||||
|
||||
# _ _
|
||||
# ___ __ _| |_ __ _| | ___ __ _ _ _ ___
|
||||
# / __/ _` | __/ _` | |/ _ \ / _` | | | |/ _ \
|
||||
# | (_| (_| | || (_| | | (_) | (_| | |_| | __/
|
||||
# \___\__,_|\__\__,_|_|\___/ \__, |\__,_|\___|
|
||||
# |___/
|
||||
# _ _ _
|
||||
# | |__ _ __ __ _| | _____ ___ __ ___ _ __| |_
|
||||
# | '_ \| '_ \ / _` | | / _ \ \/ / '_ \ / _ \| '__| __|
|
||||
# | | | | |_) | (_| | | | __/> <| |_) | (_) | | | |_
|
||||
# |_| |_| .__/ \__, |_| \___/_/\_\ .__/ \___/|_| \__|
|
||||
# |_| |___/ |_|
|
||||
#
|
||||
# FIGLET 2 SVGBOB INTERACTIVE CATALOGUE
|
||||
|
||||
|
@ -26,7 +26,8 @@
|
||||
<ul>
|
||||
<li><a href="/">index</a></li>
|
||||
<li><a href="/draw.html">draw</a></li>
|
||||
<li><a href="/catalogue.html">catalogue</a></li>
|
||||
<li><a href="/font.html">font</a></li>
|
||||
<!-- <li><a href="/catalogue.html">catalogue</a></li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
@ -35,9 +35,6 @@
|
||||
window.history.replaceState(null, null, url);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggle_class(classname, val){
|
||||
if(val){
|
||||
document.body.classList.add(classname);
|
||||
|
@ -13,14 +13,14 @@
|
||||
|
||||
<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"/> -->
|
||||
<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"
|
||||
<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/> -->
|
||||
<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){
|
||||
@ -66,6 +66,21 @@
|
||||
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>
|
||||
</header>
|
||||
|
||||
|
@ -10,6 +10,17 @@
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
.svgbob text {
|
||||
font-family: monospace !important;
|
||||
font-weight: bold !important;
|
||||
fill: red !important;
|
||||
}
|
||||
.svgbob text{
|
||||
visibility: hidden;
|
||||
}
|
||||
body.check-text .svgbob text{
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@ -18,7 +29,20 @@
|
||||
{{ svg|safe }}
|
||||
|
||||
<button id="save-svg">> SVG</button>
|
||||
<!-- <button>> HPGL</button> -->
|
||||
|
||||
<script>
|
||||
function get2bodyclass(){
|
||||
const url = new URL(window.location.href);
|
||||
let checked = url.searchParams.get("c");
|
||||
if(checked == "false"){
|
||||
document.body.classList.remove("check-text");
|
||||
}
|
||||
else{
|
||||
document.body.classList.add("check-text");
|
||||
}
|
||||
}
|
||||
get2bodyclass();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let save_button = document.getElementById('save-svg');
|
||||
|
103
templates/font.html
Normal file
103
templates/font.html
Normal file
@ -0,0 +1,103 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block body_class %}draw{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<header class="controls">
|
||||
<label>etherpad</label>
|
||||
<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>
|
||||
|
||||
<input class="get-input" type="text" value="{{params['text']}}" 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="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('input', 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">
|
||||
<iframe class="f-ascii" id="pad-iframe" src="{{params['pad-full']}}">
|
||||
</iframe>
|
||||
<div class="f-svg">
|
||||
<iframe id="svg-iframe" src="/writing/{{params['pad']}}">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user