tools.cobbled-paths/templates/index.html

{% extends "base.html" %}

{% block body %}

        <div class="split-screen title box">
        <div class="f-ascii">
<pre>  .- _--       /.    /.    /.        |\
 (  /|         ||    ||    ||         \\ 
((  ||    / \\ ||/|\ ||/|\ ||  _-_   / \\
((  ||   +| |. |+ || |+ || || || \\ +| |.
 ( / |   || || || |' || |' || ||/   || ||
  -____- \\ /  \\/   \\/   \\ \\ /   \\/ </pre>
        </div>
        <div class="f-svg">
          {% include 'logo.svg' %}
        </div>

        <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 class="scheme" viewBox="0.00 0.00 1228.37 384.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <style>
            .scheme text{
              fill: black !important;
              font-weight: normal !important;
            }
            .scheme a text{
              fill: inherit !important;
              font-weight: inherit !important;
            }
          </style>
          <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-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-size="14.00">FIGlet font </text>
          <text text-anchor="middle" x="333.86" y="-273.3"  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-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-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-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-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-size="14.00">Free Ascii </text>
          <text text-anchor="middle" x="333.86" y="-52.3"  font-size="14.00">drawing</text>
          <text text-anchor="middle" x="333.86" y="-02.3"  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-size="14.00">FIGlet font </text>
          <text text-anchor="middle" x="333.86" y="-170.3"  font-size="14.00">making</text>
          <text text-anchor="middle" x="333.86" y="-120.3"  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-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-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-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-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-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-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-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-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-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-size="14.00">SVG </text>
          <text text-anchor="middle" x="1167.87" y="-25.8"  font-size="14.00">simplified </text>
          <text text-anchor="middle" x="1167.87" y="-10.8"  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-size="14.00">vpype</text>
            </a>
          </g>
          </g>
        </svg>
      <div class="intro">
        <p>
          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 %}