1	cat << %
 2	
 3	<style>
 4	pre{line-height:1}
 5	h2{margin:0}
 6	</style>
 7	<a href="https://web.archive.org/web/20230127095952/https://vltk.vvvvvvaria.org/w/Torn_at_the_seams:_vernacular_approaches_to_teaching_with_computational_tools">Vernacular approaches to teaching with computational tools (archive)</a>
 8	
 9	<h1>Nodal graphical user interface for image magick — <em>towards a nodal shell !</em></h1>
10	<q><a href="https://usage.imagemagick.org/api/#multi-convert">Why do you use multiple "magick" commands</a></q>
11	<pre>
12	            localhost:1312/imagemagick?url-encoded-node-state…¹
13	
14	                                           ┌─preview-A─────⟳┐                 
15	                                       ┌──>• ███████████████ │                 
16	                                       │   │ ██           ██ │                 
17	                                       │   │ ██   hello   ██ │                 
18	                                       │   │ ██   world   ██ │                 
19	                                       │   │ ██           ██ │                 
20	                                       │   │ ███████████████ │                 
21	                                       │   │ RGBA ○• sav. -+ │                 
22	    ┌─primitive─┐                      │   └─┴┴┴┴─┴┴──┴───┴┴─┘                 
23	    │  couleur  •─┐  ┌─command-A─────┐ │  ┌─command-B──┐  ┌─output──────┐     
24	    └───────────┘ │  ○  magick       •─┴─>•  magick    •─>•   name.png  │     
25	    ┌─primitive─┐ │  │               │    │            │  └─────────────┘     
26	    │  couleur  •┐└─>•  -background  │ ┌─>•  -crop     │                      
27	    └───────────┘├──>•  -fill        │ │  │  +repage   │                      
28	    ┌─primitive─┐└──>•  -bordercolor │ │  │   (+)      │                      
29	    │  string   •───>•  -font :label │ │  └────────────┘                      
30	    └───────────┘ ┌─>•  -size        │ │                                      
31	    ┌─primitive─┐ │┌>•  -border      │ │                                      
32	    │  geometry •─┘│ │   (+)         │ │                                      
33	    └───────────┘  │ └───────────────┘ │                                      
34	    ┌─primitive─┐  │     ┌─primitive─┐ │                                      
35	    │  geometry •──┘     │  geometry •─┘                                      
36	    └───────────┘        └───────────┘                                      
37	                                                                            
38	command-A() {
39		magick
40			-background red
41			-fill black
42			-bordercolor blue
43			-font […] label:"hello\\nworld"
44			-size x512
45			-border 40x40
46			PNG:- #(stdout)
47	}
48	
49	command-B() {
50		magick :- #(stdin)
51			-crop
52			-repage
53	}
54	
55	preview-A() {
56		magick :-
57			preview.png
58	}
59	</pre>
60	<p>A nodal interface for image magick. Inside the web, with the help of <a href="https://anseki.github.io/plain-draggable/#development">PlainDraggable</a> and <a href="https://anseki.github.io/leader-line/">LeaderLine</a>.
61	¹Idealy, node state is stored in URL <a href="https://lobste.rs/s/st1mpl/lightest_notes_app_implementation_111">cf</a>
62	
63	refs : interfaces nodales de houdini, substance designer, painter, blender etc…</p>
64	<a href="https://en.wikipedia.org/wiki/Node_graph_architecture">node graph architecture</a>
65	
66	<pre>
67	$(sed -E '
68		s	<	\<	g
69		s	>	\>	g
70	' << HTML
71	
72	                                                ┌─┤/cgi-bin/magick
73	                                                │ │˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙
74	                                                │ │ #!/usr/bin/env sh
75	                                                │ │ magick "\$c" "\$o"
76	                           │<node data-uuid="…" │
77	                           │ hx-trigger="input" ↓
78	                           │ hx-get="/cgi-bin/magick?c=-size 128x128 xc:red"
79	  │<param data-uuid="…">   │  <ul>
80	  │  <input type="color"   │    <li>
81	  │   value="red">•────────┼──────•<input><param>color</param>
82	  │</param>                │    </li>
83	                           │    <li>
84	  │<param data-uuid="…"> ┌─┼──────•<input><param>size</param>
85	  │  <input type="geom." │ │    </li>
86	  │   value="128x128">•──┘ │  </ul>
87	  │</param>                │  <output name="red.png">•──┐
88	                           │</node>                     │
89	                                                        │
90	                  ┌─────────────────────────────────────┘
91	                  │ │<preview>
92	                  └─┼──•<img src="red.png">
93	                    │</preview>
94	
95	magick -size 128x128 xc:red red.png
96	HTML
97	)
98	</pre>
99	</pre>
   100	%