Nodal graphical user interface for image magick — towards a nodal shell !
git- Vernacular approaches to teaching with computational tools (archive)
Why do you use multiple "magick" commands
- Xavier Lambein PAW, a programmable DAW FOSSDEM 2026
- Ale Rimoldi Ceci n’est pas une pipe – LGM 2013
- interfaces nodales de houdini, substance designer, painter, blender etc…
- node graph architecture
- Bidirectional transformation
- imagemagick command line options
- PlainDraggable
- store data in url
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