l-atelier-des-chercheurs / dodoc

Conçu pour favoriser les processus réflexifs lors d’activités d’apprentissage, do•doc est un outil ouvert et modulaire qui permet de capturer des médias (photos, vidéos, sons et stop-motion), de les éditer, de les mettre en page et de les publier
https://latelier-des-chercheurs.fr/outils/dodoc
GNU Affero General Public License v3.0
60 stars 11 forks source link

Fonctions supplémentaires pour les formes dans page à page #489

Closed jubonhomme closed 1 year ago

jubonhomme commented 4 years ago

Si je reprends l'exemple d'Excalidraw que je trouve vraiment très fonctionnel... utilisé encore cette semaine en tableau blanc collaboratif lors d'une visio

Ma liste au Père Noël pour les formes dans dodoc :

... je m'arrête là car je me rends compte que je te demande d'intégrer Excalidraw ;) J'imagine que reprendre le code de A-z n'est pas simple...

excalidraw

Pour l'instant c'est déjà super ! https://test.dodoc.fr/test-dodoc-9-1/media/test-pour-utilisation-en-mode-tableau-blanc-20200427-234355-wju*png*txt

Mais comme il reste un peu de place sur le côté... j'en profite ;) Capture d’écran de 2020-04-27 23-47-52

louis-ev commented 4 years ago

Impossible de reprendre le code d’excalidraw, j’ai déjà regardé et il n’a rien à voir, et le stockage des données non plus… La gestion des médias et le collaboratif temps réel que réalise do•doc est un sacré casse-tête qui a demandé de mettre en place un système particulièrement complexe et spécifique, je n’ai pas la possibilité de facilement rapatrier des changements. Le mieux qu’on puisse faire c’est s’inspirer des principes pour les intégrer à notre sauce (et c’est déjà pas mal !). En évitant de créer une usine à gaz trop complexe.

Pour reprendre tes retours :

Ça fait longtemps que Pauline le demande. Il faut que je me penche sérieusement dessus, je n’ai pas pris le temps de réfléchir à la logique. Mais il y a des cas de figure où ça risque de faire des trucs bizarre, car tout est collaboratif. Si plusieurs personnes modifient un média, qu’est-ce qu’on peut considérer comme la dernière action ?

Concrètement il faudrait préciser : annuler un déplacement ? un redimensionnement ? et si j’ai édité un texte et validé, je peux annuler ma modification ? Si tu peux détailler et réfléchir à quelques scénarios précis ça m’aiderai grandement :)

Oui mais pour faire quoi ? Déplacement multiple ? Un groupe ? Quelles actions réalisables ? Et comment faire ça sur tablette ?

Ça c’est à priori pas trop compliqué. Dupliquer, tel quel (mais peut-être en déplacant de qq millimètres), un bloc et son contenu.

Pas très compliqué non plus. Clic droit j’ai toujours un doute car sur le web généralement on y touche pas. J’imagine que dans ce cas ça serait utile.

Assez délicat… j’ai commencé à tester l’intégration de fabricjs pour le bloc dessin, mais au final pour la gestion des formes SVG j’ai préféré réutiliser la logique existante pour les médias. Je trouve que le bloc dessin est pas très très fluide, le fait qu’il y ait une interface différente pour déplacer les contenus. Je préférerai tout faire dans le système "do•doc", mais du coup je sais pas bien comment faire pour répliquer le système de dessin / tracé / courbes… Tu penses quoi du bloc dessin en l’état ? ça fait pas bizarre ces deux modes de calque, medias / dessin ?

Oui, je pense faire un menu qui regroupe tout ça

Voir #486

Alors maintenant il se place au milieu de ton écran et pas en haut à gauche de la page. Du coup tu proposes : je choisis un mode (comme dans excalidraw), ça active la case et change le curseur pour m’indiquer que je vais le placer, puis je drag/drop pour dessiner où je veux dans la taille que je veux. Ça me paraît parfaitement logique oui. Techniquement c’est assez chaud par contre : le média est créé quand ? Les autres utilisateurs le voient à quel moment ? Car s’il est créé qu’à la fin du clic, alors il faut que je créer un faux média pour quand tu le places.

jubonhomme commented 4 years ago

avoir le Ctrl Z pour revenir en arrière sur la / les dernière(s) action(s)

Ça fait longtemps que Pauline le demande. Il faut que je me penche sérieusement dessus, je n’ai pas pris le temps de réfléchir à la logique. Mais il y a des cas de figure où ça risque de faire des trucs bizarre, car tout est collaboratif. Si plusieurs personnes modifient un média, qu’est-ce qu’on peut considérer comme la dernière action ? Concrètement il faudrait préciser : annuler un déplacement ? un redimensionnement ? et si j’ai édité un texte et validé, je peux annuler ma modification ? Si tu peux détailler et réfléchir à quelques scénarios précis ça m’aiderai grandement :)

Si déjà on peut annuler les 2 ou 3 dernières actions ça serait bien... Exemple : je déplace un objet sans le vouloir hop Ctrl Z ! je change de couleur et ça ne va pas hop Ctrl Z et je reviens à la couleur d'origine. J'ai pas compté combien d'actions on peut annuler sur Excalidraw mais on peut revenir en arrière sur un bon nombre d'actions en tout genre (suppression / redimensionnement / déplacement...)

pouvoir faire une sélection multiple avec Maj (Shift)

Oui mais pour faire quoi ? Déplacement multiple ? Un groupe ? Quelles actions réalisables ? Et comment faire ça sur tablette ?

Oui surtout pour du déplacement multiple en effet, et aussi pour du redimensionnement en taille d'un ensemble d'objets. Sur tablette on peut imaginer placer un doigt d'un côté et faire glisser son doigt de manière à encadrer la zone de sélection de plusieurs objets à la fois et on relâche pour sélectionner. Puis on repose le doigt et on déplace (et avec deux doigts en pinçant ou écartant on réduit ou agrandit) Un nouveau clic du doigt et on désélectionne. Un peu comme à la souris avec le maintient du clic gauche. voir vidéo en dessous Exemple : https://test.dodoc.fr/test-dodoc-9-1/media/excalidraw-selection-multiple-1*webm*txt

Voir aussi : http://fabricjs.com/manage-selection

pouvoir dupliquer une forme (bouton droit et / ou picto avec les boutons couleur fond et contour)

Ça c’est à priori pas trop compliqué. Dupliquer, tel quel (mais peut-être en déplacant de qq millimètres), un bloc et son contenu. pouvoir supprimer une forme directement au clavier touche Suppr (ou menu bouton droit) Pas très compliqué non plus. Clic droit j’ai toujours un doute car sur le web généralement on y touche pas. J’imagine que dans ce cas ça serait utile.

Je rassemble les deux fonctions qui sont liées pour moi. Excalidraw propose les deux options : les deux boutons à gauche dans le menu (c'est visible tout de suite) mais aussi en raccourci clic droit Exemple : https://test.dodoc.fr/test-dodoc-9-1/media/excalidraw-dupliquer-supprimer*webm*txt

avoir des flèches ou lignes en plusieurs points (plusieurs clics) façon Courbes de Bézier et du coup pouvoir utiliser une courbe pour faire une forme fermée en rattachant le dernier point au premier

Assez délicat… j’ai commencé à tester l’intégration de fabricjs pour le bloc dessin, mais au final pour la gestion des formes SVG j’ai préféré réutiliser la logique existante pour les médias. Je trouve que le bloc dessin est pas très très fluide, le fait qu’il y ait une interface différente pour déplacer les contenus. Je préférerai tout faire dans le système "do•doc", mais du coup je sais pas bien comment faire pour répliquer le système de dessin / tracé / courbes… Tu penses quoi du bloc dessin en l’état ? ça fait pas bizarre ces deux modes de calque, medias / dessin ?

Oui j'imagine qu'il n'est pas simple de mixer des bouts de codes avec des approches complètement différentes, et je te rejoins sur le fait de s'inspirer des fonctions d'autres appli mais de tout faire dans le système dodoc. J'avoue que j'ai beaucoup plus de mal avec la recette "bloc dessin", les tracés à la souris ne sont pas top sur le rendu ça fait plus gribouillage que dessin. Je préfère les Courbes de Bézier par exemple ou au moins avec un lissage. De même le système de gestion de la profondeur des objets dans dodoc est plus simple que le système par calque du bloc dessin ou il faut jongler d'un à l'autre car les objets sont séparés par type sur chaque calque... je ne suis pas un grand fan. Mais maintenant que les outils "formes" sont aussi présent dans le "page à page" je ne vois pas forcément l'intérêt de conserver les deux recettes, surtout avec deux interfaces différentes qui font quasi la même chose. Comme je le disais, je trouve Excalidraw déjà très riche et suffisant pour une utilisation courante. Si je veux un vrai logiciel de dessin vectoriel je me tourne vers Inkscape. Un peu comme pour les médias images : avec la rotation / la découpe / la couleur et la luminosité / transparence / réduction de la taille du fichier (compression) ça couvre 90% des cas, c'est ce que je fais habituellement avec la visionneuse Shotwell sous ubuntu. Sinon je passe sur Gimp.

Si tu arrivais à ajouter un outil de "courbe" par un bouton (crayon) comme les flèches ou les formes au menu "forme" dans le "page à page", perso je ne garderai que cette recette.

Allez ! J'en remets une couche avec Excalidraw ;) https://test.dodoc.fr/test-dodoc-9-1/media/courbes-excalidraw*webm*txt

Comment ils arrivent à faire ça ?? je n'en sais rien mais je trouve ça top ! Ce ne sont pas de vraies courbes de Bézier modifiables mais plus des lignes multipoints avec lissage. Ça fait l'affaire et je trouve le rendu beaucoup plus beau et utilisable par des élèves que le tracé à la souris. Même Framavectoriel ne sais pas faire à ma connaissance.

déporter les boutons de couleur fond et couleur contour sur le côté pour les voir en continu... j'aime bien avoir quelques boutons qui restent visibles.... surtout qu'ils servent pour toutes les formes

Oui, je pense faire un menu qui regroupe tout ça

Super

gestion de la transparence (0-100%)

Voir #486

J'avais pas recherché ;), mais oui +1

jubonhomme commented 4 years ago

Je viens de fouiller un peu dans git Excalidraw... ils utilisent ça visiblement https://roughjs.com/ https://github.com/pshihn/rough/wiki

Et la partie sur les courbes est visible ici https://glitch.com/~rough-basic-canvas

jubonhomme commented 1 year ago

Les principales fonctions sont maintenant dans la V10 de dodoc Il manquerait juste le tracé à la main pour être complet mais je ferme cette issue qui ne correspond plus au dev de la v10. L'exemple de tldraw https://www.tldraw.com/ serait plus intéressant au niveau fonctionnement.

ajout de formes rond / carré / ligne / flèche couleur et bordure coins arrondis etc ...

image