a web nodal user interface (NUI) to ImageMagick via busybox httpd's cgi - retour accueil
Anonyme, en lecture seule : git clone git://bebou.netlib.re/NUI-magick
Authentifié·e, en écriture : git clone ssh://git@bebou.netlib.re:1459/srv/git/NUI-magick
Log | Files | Refs | zip | tar.gz |
README (4927B)
1 escapeHTML() {
2 cat | sed -E '
3 s < \< g
4 s > \> g
5 s ^( ..\t)(#.*) \1<span style="opacity:.5">\2</span> g
6 s ^ (..) <span style="opacity:.5">\1</span> g
7 '
8
9 }
10 escapeHTML << README
11 ┌─preview────────┐
12 ┌─>• ██████████████ │
13 │ │ ██ ██ │
14 quelque chose comme ça │ │ ██ hello ██ │
15 │ │ ██ ██ │
16 │ │ ██████████████ │
17 ┌─primitive─┐ │ └────────────────┘
18 │ couleur •─┐ ┌─command───────┐│ ┌─command────┐ ┌─output──────┐
19 └───────────┘ │ ○ magick •┴───┬──>• magick •─>• name.png │
20 ┌─primitive─┐ │ │ │ │ │ │ └─────────────┘
21 │ couleur •┐└──• -background │┌───│──>• -crop │
22 └───────────┘├──>• -fill ││ │ │ +repage │
23 ┌─primitive─┐└──>• -bordercolor ││ │ │ (+) │
24 │ string •───>• -font ││ │ └────────────┘
25 └───────────┘ ┌─>• -size ││ │ ┌─histogram──────┐
26 ┌─primitive─┐ │┌>• -………… ││ └─>•│ ││
27 │ geometry •─┘│ │ (+) ││ │││ │ │ ││││
28 └───────────┘ │ └───────────────┘│ ││││││││││││││││││
29 ┌─primitive─┐ │ ┌─primitive─┐│ └────────────────┘
30 │ geometry •──┘ │ geometry •┘
31 └───────────┘ └───────────┘
32
33 ./NodeMagick.sh lance un serveur web avec busybox httpd et ouvre un navigateur
34
35 Dépendances
36 ˙˙˙˙˙˙˙˙˙˙˙
37 ImageMagick > 6
38 busybox httpd
39 Javascript
40 leaderline → vendor/leader-line.min.js (100ko)
41 plaindraggable → vendor/plain-draggable.min.js (36ko)
42
43 Nomenclature
44 ˙˙˙˙˙˙˙˙˙˙˙˙
45 magick → nœud qui envoie la commande, contient des options
46 option → nœud qui contient une option, contient des valeurs
47 value → nœud qui contient une valeur typée
48
49 data-uuid → uuid d'un nœud
50 data-from → pointeur vers l'uuid d'un nœud
51 data-to → pointeur vers l'uuid d'un nœud
52
53 DOM
54 ˙˙˙
55 <body>
56
57 <main>
58 <magick data-uuid="hello-1" data-from="" data-to="">
59 <ol>
60 <option data-uuid="hello-2">
61 <val data-from="hello-3" data-to=""></val>
62 </option>
63 <option data-from="hello-4"></option>
64 </ol>
65 <viewer>
66 <nav>zoom, code d'erreur…</nav>
67 <img src="/img/hello-1-name" alt="commande magick">
68 <identify></identify>
69 </viewer>
70 </magick>
71
72 <val data-uuid="hello-3">20x20</val>
73 <option data-uuid="hello-4"></option>
74 </main>
75
76 <history></history>
77 <log></log>
78 <shell-representation></shell-representation>
79 </body>
80
81 Versionage
82 ˙˙˙˙˙˙˙˙˙˙
83 L'uuid d'un nœud est le nom du plan de travail et
84 l'incrémentation de la variable globale I.
85
86 La source de vérité de l'état est le __dom__
87 Pour tout changement d'état % debounce() → <history> += url
88
89 État dans l'url
90 ˙˙˙˙˙˙˙˙˙˙˙˙˙˙˙
91 ?date=…&name=…&nodes=document.querySelectorAll('main')
92
93 À faire
94 ˙˙˙˙˙˙˙
95 grep "TODO":
96 $(rg -g "!$0" TODO | sed -E '
97 s@<@\<@g; s@>@\>@g;
98 s@(.*):(.*)@\1: \2@g;
99 ')
100
101 poc
102 [x] générer une image depuis un input
103 [x] interfacer stdin/stdout
104 [x] actualiser la source avec un ?timestamp
105 [x] actualiser magick identify
106 [ ] awk histogramme
107 [ ] brancher cssvarfilledcookies -> Fait dans drafts/front-end
108
109
110 [ ] <magick></magick>
111 [ ] draggable des options dedans et en dehors de <magick>
112 [x] toggle zoomer l'image
113 [x] toggle échantillonage (ma prorpriété css pref ❤)
114 [x] lire \$?
115 [ ] dessiner un histogramme
116 [ ] intégrer l'interface drafts/front-end
117 [ ] <history></history> → martin
118 [ ] lors d'un changement d'état, push dans un localstorage stateStack[]
119 [ ] formater en url
120
121 plus tard
122 [ ] brancher d'autres outils de traitement d'image : jp2a/ascii-image-converter, didder
123 [ ] systèmes de lindenmayer
124 [ ] brancher du shell
125 [ ] permettre des boucles sur |un entier|un dossier|une EXPRAT(^^)|…
126
127 se mettre d'accord sur :
128 [ ] paradigme
129 [ ] spec, graph orienté ?
130 [ ] source de vérité entre le dom | l'url | la requête | le localStorage
131
132 README