Mercurial > hg > xsplines

annotate splines.html @ 6:d3a25d39a6e2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
implement closed x-splines
author Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
date Sun, 26 Aug 2018 10:49:31 -0400
parents a9ffd0bcc292
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
1 <!DOCTYPE html>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
2 <head>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
3 <meta charset="utf-8">
5
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
4 <link rel="stylesheet" href="d3.slider.css" />
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
5 <title>Spline Editor</title>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
6 <style>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
7 body {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
8 font: 13px sans-serif;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
9 position: relative;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
10 width: 960px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
11 height: 500px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
12 padding-left: 100px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
13 padding-top: 100px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
14 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
15
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
16 form {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
17 bottom: 10px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
18 left: 10px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
19 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
20
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
21 rect {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
22 fill: none;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
23 pointer-events: all;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
24 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
25
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
26 circle,
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
27 .line {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
28 fill: none;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
29 stroke: steelblue;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
30 stroke-width: 1.5px;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
31 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
32
5
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
33 .xspline {
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
34 fill: none;
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
35 stroke: red;
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
36 stroke-width: 1.5px;
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
37 }
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
38
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
39 circle {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
40 fill: #fff;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
41 fill-opacity: .2;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
42 cursor: move;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
43 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
44
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
45 .selected {
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
46 fill: #ff7f0e;
3
528f9ff42e9e slider works
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 2
diff changeset
47 fill-opacity: 1;
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
48 stroke: #ff7f0e;
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
49 }
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
50
4
64bf53f0264d css: add some style to main svg
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 3
diff changeset
51 #splines {
64bf53f0264d css: add some style to main svg
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 3
diff changeset
52 border: 1px black solid;
64bf53f0264d css: add some style to main svg
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 3
diff changeset
53 }
64bf53f0264d css: add some style to main svg
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 3
diff changeset
54
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
55 </style>
3
528f9ff42e9e slider works
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 2
diff changeset
56 <script src="d3.v3.min.js"></script>
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
57 <script src="d3.slider.js"></script>
3
528f9ff42e9e slider works
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 2
diff changeset
58
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
59 </head>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
60 <body>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
61 <form>
6
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
62 <input name="approximateButton"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
63 type="button"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
64 value="Approximate all"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
65 onclick="approximate_all()" />
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
66 <input name="sharplyInterpolateButton"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
67 type="button"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
68 value="Sharply interpolate all"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
69 onclick="sharply_interpolate_all()" />
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
70 <input name="interpolateButton"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
71 type="button"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
72 value="Interpolate all"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
73 onclick="interpolate_all()" />
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
74 <input name="toggleClosed"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
75 type="button"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
76 value="Toggle open/closed spline"
d3a25d39a6e2 implement closed x-splines
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 5
diff changeset
77 onclick="toggle_closed()" />
5
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
78 <label for="interpolate">SVG spline type:</label>
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
79 <select id="interpolate"></select><br>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
80 </form>
3
528f9ff42e9e slider works
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 2
diff changeset
81 <div id="splines"></div>
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
82 <div id="slider"></div>
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
83
5
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
84
a9ffd0bcc292 implement everything
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 4
diff changeset
85
3
528f9ff42e9e slider works
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents: 2
diff changeset
86 <script src="splines.js"></script>
2
b94d24316ea8 init D3.js code
Jordi Gutiérrez Hermoso <jordi@ecometrica.com>
parents:
diff changeset
87 </body>