imagemagick_nodal.body.sh
1 cat << %
2
3 <style>
4 h2{margin:0}
5 iframe{background:var(--08-WHITE)}
6 </style>
7
8 <h1>Nodal graphical user interface for image magick — <em>towards a nodal shell !</em></h1>
9 <iframe style="width:80%; height:15lh" src="http://git.bebou.netlib.re/NUI-magick/log.html"></iframe>
10 <a style="margin-bottom:1lh;margin-top:-1lh;text-align:center;display:block" href="http://git.bebou.netlib.re/NUI-magick/log.html">git</a>
11
12 <ul>
13 <li><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></li>
14 <li><q><a href="https://usage.imagemagick.org/api/#multi-convert">Why do you use multiple "magick" commands</a></q></li>
15 <li>Xavier Lambein <a href="https://fosdem.org/2026/schedule/event/MMW9JC-paw/">PAW, a programmable DAW</a> FOSSDEM 2026</li>
16 <li>Ale Rimoldi <a href="https://www.youtube.com/watch?v=oPqz0m7v6gg"> Ceci n’est pas une pipe</a> – LGM 2013</li>
17 <li>interfaces nodales de houdini, substance designer, painter, blender etc…</li>
18 <li><a href="https://en.wikipedia.org/wiki/Node_graph_architecture">node graph architecture</a></li>
19 <li><a href="https://en.wikipedia.org/wiki/Bidirectional_transformation">Bidirectional transformation</a></li>
20 <li><a href="https://imagemagick.org/script/command-line-options.php#list">imagemagick command line options</a></li>
21 <li><a href="https://anseki.github.io/plain-draggable/#development">PlainDraggable</a></li>
22 <li><a href="https://lobste.rs/s/st1mpl/lightest_notes_app_implementation_111">store data in url</a></li>
23 </ul>
24
25 <pre>
26 localhost:1312/imagemagick?url-encoded-node-state…¹
27
28 ┌─preview-A─────⟳┐
29 ┌──>• ███████████████ │
30 │ │ ██ ██ │
31 │ │ ██ hello ██ │
32 │ │ ██ world ██ │
33 │ │ ██ ██ │
34 │ │ ███████████████ │
35 │ │ RGBA ○• sav. -+ │
36 ┌─primitive─┐ │ └─┴┴┴┴─┴┴──┴───┴┴─┘
37 │ couleur •─┐ ┌─command-A─────┐ │ ┌─command-B──┐ ┌─output──────┐
38 └───────────┘ │ ○ magick •─┴─>• magick •─>• name.png │
39 ┌─primitive─┐ │ │ │ │ │ └─────────────┘
40 │ couleur •┐└─>• -background │ ┌─>• -crop │
41 └───────────┘├──>• -fill │ │ │ +repage │
42 ┌─primitive─┐└──>• -bordercolor │ │ │ (+) │
43 │ string •───>• -font :label │ │ └────────────┘
44 └───────────┘ ┌─>• -size │ │
45 ┌─primitive─┐ │┌>• -border │ │
46 │ geometry •─┘│ │ (+) │ │
47 └───────────┘ │ └───────────────┘ │
48 ┌─primitive─┐ │ ┌─primitive─┐ │
49 │ geometry •──┘ │ geometry •─┘
50 └───────────┘ └───────────┘
51
52 command-A() {
53 magick
54 -background red
55 -fill black
56 -bordercolor blue
57 -font […] label:"hello\\nworld"
58 -size x512
59 -border 40x40
60 PNG:- #(stdout)
61 }
62
63 command-B() {
64 magick :- #(stdin)
65 -crop
66 -repage
67 }
68
69 preview-A() {
70 magick :-
71 preview.png
72 }
73 </pre>
74
75
76 <pre>
77 $(sed -E '
78 s < \< g
79 s > \> g
80 ' << HTML
81
82 ┌─┤/cgi-bin/magick
83 │ │˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙
84 │ │ #!/usr/bin/env sh
85 │ │ magick "\$c" "\$o"
86 │<node data-uuid="…" │
87 │ hx-trigger="input" ↓
88 │ hx-get="/cgi-bin/magick?c=-size 128x128 xc:red"
89 │<param data-uuid="…"> │ <ul>
90 │ <input type="color" │ <li>
91 │ value="red">•────────┼──────•<input><param>color</param>
92 │</param> │ </li>
93 │ <li>
94 │<param data-uuid="…"> ┌─┼──────•<input><param>size</param>
95 │ <input type="geom." │ │ </li>
96 │ value="128x128">•──┘ │ </ul>
97 │</param> │ <output name="red.png">•──┐
98 │</node> │
99 │
100 ┌─────────────────────────────────────┘
101 │ │<preview>
102 └─┼──•<img src="red.png">
103 │</preview>
104
105 magick -size 128x128 xc:red red.png
106 HTML
107 )
108 </pre>
109 </pre>
110 %
Nodal graphical user interface for image magick — towards a nodal shell !
git
localhost:1312/imagemagick?url-encoded-node-state…¹
┌─preview-A─────⟳┐
┌──>• ███████████████ │
│ │ ██ ██ │
│ │ ██ hello ██ │
│ │ ██ world ██ │
│ │ ██ ██ │
│ │ ███████████████ │
│ │ RGBA ○• sav. -+ │
┌─primitive─┐ │ └─┴┴┴┴─┴┴──┴───┴┴─┘
│ couleur •─┐ ┌─command-A─────┐ │ ┌─command-B──┐ ┌─output──────┐
└───────────┘ │ ○ magick •─┴─>• magick •─>• name.png │
┌─primitive─┐ │ │ │ │ │ └─────────────┘
│ couleur •┐└─>• -background │ ┌─>• -crop │
└───────────┘├──>• -fill │ │ │ +repage │
┌─primitive─┐└──>• -bordercolor │ │ │ (+) │
│ string •───>• -font :label │ │ └────────────┘
└───────────┘ ┌─>• -size │ │
┌─primitive─┐ │┌>• -border │ │
│ geometry •─┘│ │ (+) │ │
└───────────┘ │ └───────────────┘ │
┌─primitive─┐ │ ┌─primitive─┐ │
│ geometry •──┘ │ geometry •─┘
└───────────┘ └───────────┘
command-A() {
magick
-background red
-fill black
-bordercolor blue
-font […] label:"hello\nworld"
-size x512
-border 40x40
PNG:- #(stdout)
}
command-B() {
magick :- #(stdin)
-crop
-repage
}
preview-A() {
magick :-
preview.png
}
┌─┤/cgi-bin/magick
│ │˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙
│ │ #!/usr/bin/env sh
│ │ magick "$c" "$o"
│<node data-uuid="…" │
│ hx-trigger="input" ↓
│ hx-get="/cgi-bin/magick?c=-size 128x128 xc:red"
│<param data-uuid="…"> │ <ul>
│ <input type="color" │ <li>
│ value="red">•────────┼──────•<input><param>color</param>
│</param> │ </li>
│ <li>
│<param data-uuid="…"> ┌─┼──────•<input><param>size</param>
│ <input type="geom." │ │ </li>
│ value="128x128">•──┘ │ </ul>
│</param> │ <output name="red.png">•──┐
│</node> │
│
┌─────────────────────────────────────┘
│ │<preview>
└─┼──•<img src="red.png">
│</preview>
magick -size 128x128 xc:red red.png