simoon
/
tools.cobbled-paths
mirror of https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

home reworked with graphviz explaination

master
Doriane 4 weeks ago
parent
0029b37c4b
commit
b877aafba2
5 changed files with 196 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app.py
  2. 3
      requirements.txt
  3. 43
      static/css/interface.css
  4. 10
      templates/base.html
  5. 215
      templates/index.html

2
app.py
View File

@ -53,7 +53,7 @@ autofix = [
# every arrowshead into lines
[re.compile("[<{]"), "("],
[re.compile("[>}L]"), ")"],
[re.compile("[>}]"), ")"],
[re.compile("[vV]"), "-"],
[re.compile("[\\^]"), "-"],

3
requirements.txt
View File

@ -1,2 +1,3 @@
Flask
requests
requests
vpype

43
static/css/interface.css
View File

@ -204,8 +204,8 @@ aside.left{
================================================= */
.title.font{
padding: 2rem 2rem;
gap: 1rem var(--bar-h);
padding: 2rem 2rem 4rem;
gap: 0 var(--bar-h);
grid-template-columns: repeat(2, calc(50% - calc(var(--bar-h) / 2)));
}
.title .f-ascii{
@ -224,34 +224,23 @@ aside.left{
border: none;
width: auto;
}
.title .special{
grid-column: 1 / -1;
grid-row: 2 / span 1;
}
ul.special{
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
.title svg {
overflow: visible;
max-width: 100%;
grid-column: span 2;
max-height: 24rem;
margin: 0 auto;
}
.special .materiality{
display: block;
border: 1px solid currentColor;
padding: 1rem 2rem;
border-radius: 2rem;
text-decoration: none;
text-align: center;
.title svg a{
fill: var(--c-link);
}
.special .choice{
display: flex;
gap: 1rem;
flex-direction: column;
.title svg a.software{
font-weight: bold;
}
ul.classic{
list-style: initial;
padding: 0 1rem;
margin: 0.5rem 0;
.title .intro{
margin: 1rem auto;
grid-column: span 2;
max-width: 48rem;
}
/* font

10
templates/base.html
View File

@ -26,11 +26,11 @@
<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 == "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>
<li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/">about</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 == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</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 == "image" %}class="active"{% endif %} href="/image.html">image</a></li> -->
</ul>
</nav>

215
templates/index.html
View File

@ -15,50 +15,179 @@
{% include 'logo.svg' %}
</div>
<ul class="special">
<li class="choice">
<div class="materiality"><a href="https://etherpad.org/" target="_blank">Etherpad</a></div>
<div class="materiality"><a href="http://www.figlet.org/" target="_blank">FIGlet</a></div>
</li>
<li>2</li>
<li class="materiality">ASCII</li>
<li>2 <a href="https://ivanceras.github.io/svgbob-editor/" target="_blank">Svgbob.rs</a></li>
<li class="materiality">SVG</li>
<li>2 <a href="https://github.com/abey79/vpype" target="_blank">vpype</a></li>
<li class="materiality">HPGL</li>
</ul>
</div>
<div class="box two-columns">
<div>
<h2>Cobbled paths</h2>
<p>
It is a web interface that brings multiple tools together, to allow experimental and direct collaboration on
pen-plotted drawings by making Ascii art.
</p>
<p>
It makes a way from the blocky discontinuity of Ascii drawings,
to the smoothness of bezier curves,
to an anologic pen-plotter interpretation.
</p>
<p>
Like cobbled paths, none of those technologies are new, and we've been walking on them for years.
</p>
<div class="intro">
<p>
Cobbled Paths is a web interface that brings multiple tools together, to allow experimental and direct collaboration on
pen-plotted drawings by making Ascii art.
</p>
<p>
It makes a way from the blocky discontinuity of Ascii drawings,
to the smoothness of bezier curves,
to an anologic pen-plotter interpretation.
</p>
</div>
<svg viewBox="0.00 0.00 1228.37 384.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 380)">
<!-- DB1 -->
<g id="node1" class="node">
<polygon fill="none" stroke="black" points="107.18,-230 104.18,-234 83.18,-234 80.18,-230 27.18,-230 27.18,-193 107.18,-193 107.18,-230"></polygon>
<text text-anchor="middle" x="67.18" y="-207.8" font-family="Liberation Mono" font-size="14.00">default</text>
</g>
<!-- DB -->
<g id="node4" class="node">
<polygon fill="none" stroke="black" points="394.86,-310.5 391.86,-314.5 370.86,-314.5 367.86,-310.5 272.86,-310.5 272.86,-258.5 394.86,-258.5 394.86,-310.5"></polygon>
<text text-anchor="middle" x="333.86" y="-288.3" font-family="Liberation Mono" font-size="14.00">FIGlet font </text>
<text text-anchor="middle" x="333.86" y="-273.3" font-family="Liberation Mono" font-size="14.00">Catalogue</text>
</g>
<!-- DB1&#45;&gt;DB -->
<g id="edge1" class="edge">
<path fill="none" stroke="black" d="M108.18,-211.5C184.25,-211.5 191.66,-278.09 261.57,-284.07"></path>
<polygon fill="black" stroke="black" points="261.72,-287.58 271.86,-284.5 262.01,-280.59 261.72,-287.58"></polygon>
</g>
<!-- DB2 -->
<g id="node2" class="node">
<polygon fill="none" stroke="black" points="123.68,-376 120.68,-380 99.68,-380 96.68,-376 10.68,-376 10.68,-339 123.68,-339 123.68,-376"></polygon>
<text text-anchor="middle" x="67.18" y="-353.8" font-family="Liberation Mono" font-size="14.00">contributed</text>
</g>
<!-- DB2&#45;&gt;DB -->
<g id="edge2" class="edge">
<path fill="none" stroke="black" d="M125.18,-357.5C194.44,-357.5 198.77,-291.45 261.69,-285.01"></path>
<polygon fill="black" stroke="black" points="262.05,-288.49 271.86,-284.5 261.7,-281.5 262.05,-288.49"></polygon>
</g>
<!-- DB3 -->
<g id="node3" class="node">
<polygon fill="none" stroke="black" points="95.18,-303 92.18,-307 71.18,-307 68.18,-303 39.18,-303 39.18,-266 95.18,-266 95.18,-303"></polygon>
<text text-anchor="middle" x="67.18" y="-280.8" font-family="Liberation Mono" font-size="14.00">JAVe</text>
</g>
<!-- DB3&#45;&gt;DB -->
<g id="edge3" class="edge">
<path fill="none" stroke="black" d="M96.18,-284.5C170.75,-284.5 191.91,-284.5 261.68,-284.5"></path>
<polygon fill="black" stroke="black" points="261.86,-288 271.86,-284.5 261.86,-281 261.86,-288"></polygon>
</g>
<!-- FLF -->
<g id="node8" class="node">
<polygon fill="none" stroke="black" points="728.37,-199.5 623.37,-199.5 623.37,-163.5 728.37,-163.5 728.37,-199.5"></polygon>
<text text-anchor="middle" x="675.87" y="-177.8" font-family="Liberation Mono" font-size="14.00">FIGlet font</text>
</g>
<!-- DB&#45;&gt;FLF -->
<g id="edge8" class="edge">
<path fill="none" stroke="black" d="M395.17,-265.89C442.87,-250.77 510.93,-228.27 569.37,-205.5 590.21,-197.38 595.67,-185.69 613.05,-182.39"></path>
<polygon fill="black" stroke="black" points="613.71,-185.85 623.37,-181.5 613.11,-178.87 613.71,-185.85"></polygon>
</g>
<!-- ETHER -->
<g id="node5" class="node">
<a href="https://etherpad.org/" class="software" target="_blank">
<ellipse fill="none" stroke="black" cx="67.18" cy="-126.5" rx="67.35" ry="30.31"></ellipse>
<text text-anchor="middle" x="67.18" y="-122.8" font-family="Liberation Mono" font-size="14.00">Etherpad</text>
</a>
</g>
<!-- cASCII -->
<g id="node6" class="node">
<ellipse fill="none" stroke="black" cx="333.86" cy="-63.5" rx="84.29" ry="41.02"></ellipse>
<text text-anchor="middle" x="333.86" y="-67.3" font-family="Liberation Mono" font-size="14.00">Free Ascii </text>
<text text-anchor="middle" x="333.86" y="-52.3" font-family="Liberation Mono" font-size="14.00">drawing</text>
<text text-anchor="middle" x="333.86" y="-02.3" font-family="Liberation Mono" font-size="14.00">
<a href="https://www.asciiart.eu/">asciiart.eu</a>
</text>
</g>
<!-- ETHER&#45;&gt;cASCII -->
<g id="edge4" class="edge">
<path fill="none" stroke="black" d="M126.92,-112.52C162.44,-104.06 208.33,-93.14 247.78,-83.75"></path>
<polygon fill="black" stroke="black" points="248.74,-87.12 257.66,-81.4 247.12,-80.31 248.74,-87.12"></polygon>
</g>
<!-- cFLF -->
<g id="node7" class="node">
<ellipse fill="none" stroke="black" cx="333.86" cy="-181.5" rx="90.52" ry="41.02"></ellipse>
<text text-anchor="middle" x="333.86" y="-185.3" font-family="Liberation Mono" font-size="14.00">FIGlet font </text>
<text text-anchor="middle" x="333.86" y="-170.3" font-family="Liberation Mono" font-size="14.00">making</text>
<text text-anchor="middle" x="333.86" y="-120.3" font-family="Liberation Mono" font-size="14.00">
<a href="http://www.jave.de/figlet/figfont.html">FIGfont Specs</a>
</text>
</g>
<!-- ETHER&#45;&gt;cFLF -->
<g id="edge5" class="edge">
<path fill="none" stroke="black" d="M128.57,-139.05C161.9,-145.98 203.99,-154.72 241.28,-162.47"></path>
<polygon fill="black" stroke="black" points="240.65,-165.91 251.16,-164.52 242.08,-159.06 240.65,-165.91"></polygon>
</g>
<!-- ASCII -->
<g id="node9" class="node">
<polygon fill="none" stroke="black" points="703.87,-89.5 647.87,-89.5 647.87,-53.5 703.87,-53.5 703.87,-89.5"></polygon>
<text text-anchor="middle" x="675.87" y="-67.8" font-family="Liberation Mono" font-size="14.00">ASCII</text>
</g>
<!-- cASCII&#45;&gt;ASCII -->
<g id="edge6" class="edge">
<path fill="none" stroke="black" d="M418.04,-65.46C488.11,-67.11 585.1,-69.39 637.56,-70.62"></path>
<polygon fill="black" stroke="black" points="637.66,-74.13 647.74,-70.86 637.83,-67.13 637.66,-74.13"></polygon>
<text text-anchor="middle" x="523.87" y="-73.3" font-family="Liberation Mono" font-size="14.00">/export/txt</text>
</g>
<!-- cFLF&#45;&gt;FLF -->
<g id="edge7" class="edge">
<path fill="none" stroke="black" d="M424.53,-181.5C478.59,-181.5 549.15,-181.5 613.16,-181.5"></path>
<polygon fill="black" stroke="black" points="613.37,-185 623.37,-181.5 613.37,-178 613.37,-185"></polygon>
<text text-anchor="middle" x="523.87" y="-185.3" font-family="Liberation Mono" font-size="14.00">/export/txt</text>
</g>
<!-- FLF&#45;&gt;ASCII -->
<g id="edge9" class="edge">
<a href="http://www.figlet.org/" target="_blank" class="software">
<path fill="none" stroke="black" d="M675.87,-163.31C675.87,-146.02 675.87,-119.77 675.87,-99.76"></path>
<polygon fill="black" stroke="black" points="679.37,-99.66 675.87,-89.66 672.37,-99.66 679.37,-99.66"></polygon>
<text text-anchor="middle" x="665.37" y="-122.8" font-family="Liberation Mono" font-size="14.00">FIGlet &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
</a>
</g>
<!-- SVG -->
<g id="node10" class="node">
<polygon fill="none" stroke="black" points="965.37,-89.5 911.37,-89.5 911.37,-53.5 965.37,-53.5 965.37,-89.5"></polygon>
<text text-anchor="middle" x="938.37" y="-67.8" font-family="Liberation Mono" font-size="14.00">SVG</text>
</g>
<!-- ASCII&#45;&gt;SVG -->
<g id="edge10" class="edge">
<a href="https://ivanceras.github.io/svgbob-editor/" target="_blank" class="software">
<path fill="none" stroke="black" d="M704.26,-71.5C751.43,-71.5 848.02,-71.5 900.86,-71.5"></path>
<polygon fill="black" stroke="black" points="901.13,-75 911.13,-71.5 901.13,-68 901.13,-75"></polygon>
<text text-anchor="middle" x="819.87" y="-80.3" font-family="Liberation Mono" font-size="14.00">svgbob.rs</text>
</a>
<a href="https://ivanceras.github.io/content/Svgbob/Specification.html">
<text text-anchor="middle" x="819.87" y="-55.3" font-family="Liberation Mono" font-size="14.00">svgbob specs</text>
</a>
</g>
<!-- HPGL -->
<g id="node11" class="node">
<polygon fill="none" stroke="black" points="1194.87,-131.5 1140.87,-131.5 1140.87,-95.5 1194.87,-95.5 1194.87,-131.5"></polygon>
<text text-anchor="middle" x="1167.87" y="-109.8" font-family="Liberation Mono" font-size="14.00">HPGL</text>
</g>
<!-- SVG&#45;&gt;HPGL -->
<g id="edge11" class="edge">
<a href="https://github.com/abey79/vpype" target="_blank" class="software">
<path fill="none" stroke="black" d="M965.37,-71.5C1041.56,-71.5 1058.62,-109.81 1129.5,-113.25"></path>
<polygon fill="black" stroke="black" points="1129.79,-116.76 1139.87,-113.5 1129.96,-109.76 1129.79,-116.76"></polygon>
<text text-anchor="middle" x="1040.37" y="-100.3" font-family="Liberation Mono" font-size="14.00">vpype</text>
</a>
</g>
<!-- SVG2 -->
<g id="node12" class="node">
<polygon fill="none" stroke="black" points="1220.37,-59 1115.37,-59 1115.37,0 1220.37,0 1220.37,-59"></polygon>
<text text-anchor="middle" x="1167.87" y="-40.8" font-family="Liberation Mono" font-size="14.00">SVG </text>
<text text-anchor="middle" x="1167.87" y="-25.8" font-family="Liberation Mono" font-size="14.00">simplified </text>
<text text-anchor="middle" x="1167.87" y="-10.8" font-family="Liberation Mono" font-size="14.00">&amp; joined</text>
</g>
<!-- SVG&#45;&gt;SVG2 -->
<g id="edge12" class="edge">
<a href="https://github.com/abey79/vpype" target="_blank" class="software">
<path fill="none" stroke="black" d="M965.37,-71.5C967.2,-71.5 1072.15,-41.32 1105.4,-32.13"></path>
<polygon fill="black" stroke="black" points="1106.59,-35.43 1115.37,-29.5 1104.81,-28.66 1106.59,-35.43"></polygon>
<text text-anchor="middle" x="1040.37" y="-59.3" font-family="Liberation Mono" font-size="14.00">vpype</text>
</a>
</g>
</g>
</svg>
<div class="intro">
<p>
Like cobbled paths, it is a reminder of the permeability between the discrete and the continuous,
and how regular stones can form tortuous paths.
</p>
</div>
<div>
<h2>Handfull links</h2>
<ul class="classic">
<li><a href="http://www.jave.de/figlet/figfont.html">FIGfont Specification</a>, everything about FIGlet font file format</li>
<li><a href="https://ivanceras.github.io/content/Svgbob/Specification.html">Svgbob Specification</a>, character recognized by svgbob and how it operates</li>
<li><a href="">HPGL Specification</a></li>
<li><a href="https://www.asciiart.eu/">asciiart.eu</a>, an ascii art collection</li>
<li><a href="http://www.jave.de/">JavE</a>, an ascii drawing editor</li>
<li><a href="https://adelfaure.net/">adel faure</a>, an ascii artist</li>
</ul>
</div>
Like cobbled paths, none of those technologies are new, and we've been walking on them for years.
Like cobbled paths, it is a reminder of the permeability between the discrete and the continuous,
and how regular stones can form tortuous paths.
</p>
</div>
</div>
{% endblock %}

Write Preview
Loading…
Cancel
Save