annotation tools for making the iterations publication (Manetta & Jara) - https://iterations.space/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
3.6 KiB
99 lines
3.6 KiB
{% extends "base.html" %}
|
|
{% block head %}
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/curves.css')}}">
|
|
{% endblock %}
|
|
|
|
{% block page %}
|
|
<div class="info">
|
|
<p><strong class="handle">*1</strong>: systematics, temporalities (group formations)</p>
|
|
<p><strong class="annotation">curves</strong>: What curves are used to engage with <strong class="handle">*1</strong>?</p>
|
|
</div>
|
|
<hr>
|
|
<form action="" method="GET">
|
|
<!-- https://spline.technology/demo/# -->
|
|
<div class="modal" id="help-modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="help-close">×</span>
|
|
<p><b>A new spline</b></p>
|
|
<p>Add a new corner point: click. Add a new smooth point, Alt + click, or click and drag.</p>
|
|
<p>Select multiple points: Shift + click.</p>
|
|
<p>Refine a curve: click on the curve and drag.</p>
|
|
<p>Set an explicit tangent: click and drag on the handles. Set axis-aligned: Shift + click. Unset an explicit tangent: drag away.</p>
|
|
<p>Toggle between smooth and corner points: double-click.</p>
|
|
<p>Delete a point: delete (or backspace) key.
|
|
<p>Nudge points by 1 px: arrow keys. Nudge by 10 px: Shift + arrow keys.
|
|
<p>Copyright 2018 Raph Levien</p>
|
|
<p>Github repo: <a href="https://github.com/raphlinus/spline-research">raphlinus/spline-research</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="save-json-modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="save-json-close">×</span>
|
|
<pre id="save-json-content"></pre>
|
|
</div>
|
|
</div>
|
|
<div class="modal" id="load-json-modal">
|
|
<div class="modal-content">
|
|
<span class="close" id="load-json-close">×</span>
|
|
<p><b>Load from JSON</b></p>
|
|
<textarea id="load-text" placeholder="Paste JSON data here..." rows=20></textarea>
|
|
<p><button id="load-button" type="button">Load</button></p>
|
|
</div>
|
|
</div>
|
|
<svg id="s" class="canvas" width="640" height="480" pointer-events="all">
|
|
<path id="ctrlpoly" d="" stroke="none" fill="none" />
|
|
<path id="spline" d="" stroke="black" fill="none" stroke-width="2" />
|
|
<path id="spline2" d="" stroke="blue" fill="none" stroke-width="2" />
|
|
<g id="handles" />
|
|
<g id="plots" />
|
|
</svg>
|
|
<!-- -->
|
|
<input class="ready" type="button" value="ready" onclick="ready()" /><br>
|
|
<textarea id="curve" name="curve" cols="89" rows="10" required></textarea><br>
|
|
<input class="submit" type="submit" value="submit"/>
|
|
<a id="reset" href="/curves/"><input class="reset" type="button" value="reset"></a>
|
|
<hr>
|
|
<div id="curves">
|
|
<h2><strong class="annotation">curves</strong> gathered so far include:</h2>
|
|
<br>
|
|
<table>
|
|
<thead>
|
|
<th>marker</th>
|
|
<th>description</th>
|
|
<th>status</th>
|
|
</thead>
|
|
<tbody>
|
|
{% for x in db.keys() %}
|
|
<tr>
|
|
<td>
|
|
{{ db[x]['curve'] | safe }}
|
|
</td>
|
|
<td>
|
|
<textarea cols="100" rows="25" name="description-{{x}}"></textarea>
|
|
</td>
|
|
<td>
|
|
<select name="status-{{x}}">
|
|
<option value="include" selected="selected">include</option>
|
|
<option value="unsure">unsure</option>
|
|
<option value="delete">delete</option>
|
|
</select>
|
|
</td>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
{% block footer %}
|
|
<script type="text/javascript">
|
|
function ready(){
|
|
var svg = document.getElementById("s").outerHTML;
|
|
// console.log(svg);
|
|
var curve = document.getElementById("curve").innerHTML = svg;
|
|
}
|
|
|
|
</script>
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/bezpath.js')}}"></script>
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/curves.js')}}"></script>
|
|
<script type="text/javascript" src="{{ url_for('static', filename='js/splineui.js')}}"></script>
|
|
{% endblock %}
|