La nouvelle distribution éducative pour débutants et initiés.

Vous n'êtes pas identifié(e).

Annonce

PRIMTUX2 i386 EST DISPONIBLE SUR SOURCEFORGE.
Somme MD5: 44a284a6732f1519c98f96723f7f7c44

#1 12-02-2017 14:38:40

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

éditeur Wysiwyg d'illustrations interactives

Bonjour, je reviens après quelques mois (cf : http://forum.primtux.fr/viewtopic.php?id=714) avec une version béta de mon éditeur Wysiwyg d'illustrations interactives.

Les objectifs derrière cet éditeur et son développement :

- créer des illustrations interactives avec toujours le même gabarit : une légende contenant des indices titrés et un descriptif pour une zone de l'illustration.
- permettre des zooms sur les zones décrites
- avoir un contenu responsive (vu que le contenu est pleinement vectoriel, pourquoi s'en priver)
- être simple d'utilisation et productif pour enrichir une illustration à vocation pédagogique.
- utilisation hors ligne et intégré dans une distribution via un paquet .deb

La version de démo (qui sera mise à jour à chaque incrément) est disponible ici : https://mothsart.github.io/labo/fronten … ctive_svg/

Ca fonctionne ainsi :

1. On glisse et on dépose (ou on choisi via son explorateur de fichiers) son fichier svg statique. (si possible sans animation et javascript)
On arrive sur une  interface nous permettant d'éditer ce fichier.
Un exemple est disponible : https://mothsart.github.io/labo/fronten … nt.min.svg

2. On ajoute des indices dans la légende. Ces derniers s'affichent également sur notre illustration.

3. On les positionnes au gré de nos envies (en restant appuyé sur le clic gauche) sur l'indice à déplacer.

4. Chaque clic sur un indice ouvre une zone supplémentaire permettant d'attribuer une couleur, un titre, une description ainsi que le pourcentage de zoom.

5. L'accès au bouton "show" nous permet de visualiser le rendu final. (avec les animations sur les indices si le zoom a été paramètré).

6. Il est possible de changer l'odre de nos indices et d'en supprimer ainsi que de les afficher ou non. (pratique si l'on ne veut se concentrer que sur un éventail précis)

6. Le bouton save permet de convertir notre travail en un fichier html. (équivalent au mode "rendu")

7. Si l'on veut repartir d'une feuille blanche, il suffit de cliquer sur "Delete".

Le soft est encore a ses balbutiements mais j'ai besoin d'avoir des retours sur l'ergonomie afin de le stabiliser.


Evolution en vue d'une version 1.0 : peu de débordement afin de livrer dans 10 jours max (fin de mes vacances)

- changement ergonomique important : la zone d'édition au clic sur un indice ne sera plus en bas à droite mais disponible via une menu déroulant sur l'indice lui même.
(J'ai déjà chargé des amis de tester l'interface sans aide et le point bloquant se trouvait à ce niveau)
- affichage du titre et de la description sur le rendu.
- export potable
- I18n : un applicatif en français et anglais
- Une masse de bugs subtiles à résoudre pour un produit stable.

Evolution en vue d'une version 2.0 (rien n'est figé dans le marbre)

- Menu option :
    - gérer avec précision les temps d'animation (zoom, apparition de la description)
- mode "rendu tuiles" : permet de voir d'un coup d'oeil l'aperçu après zoom de l'ensemble des indices.
- une vrai gestion de l'historique de modification et bouton "annuler" et "rétablir" (undo/redo).
- un format d'édition.
- des raccourcis clavier
- la création d'un nouvelle indice lui attribut une couleur par défaut (un random sur une liste de couleurs non présente)
- des vérifications
- réflexion sur un usage avec une interface tactile

Hors ligne

#2 12-02-2017 18:07:41

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

Salut,
ça promet... Mais je n'arrive pas à éditer l'exemple, l'image s'affiche et c'est tout. J'ai une erreur 405 (not allowed) quand je glisse un svg.

Hors ligne

#3 12-02-2017 19:05:38

zoom61
Modérateur
Inscription : 07-09-2015
Messages : 904

Re : éditeur Wysiwyg d'illustrations interactives

Idem quand je mets un svg, j'ai une erreur 405 ???

Hors ligne

#4 12-02-2017 20:56:33

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Effectivement, c'est embêtant : serait-t-il possible de mettre la main sur le SVG posant soucis et la version du navigateur utilisé ?
J'imagine que vous glissez bien le fichier sur la zone de drag (les pointillés se transforment en ligne continue) ?
Si jamais c'est lié à l'hébergeur (github) : j'envisagerais de déplacer cette démo ailleurs.

Hors ligne

#5 12-02-2017 21:01:22

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Révision : je viens de tester avec Firefox et j'ai effectivement ce soucis : tant qu'il n'est pas officiellement réglé, serais-t-il possible de tester sur chrome pour l'instant ?

Hors ligne

#6 12-02-2017 21:30:38

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

J'arrive à une interface d'édition, mais si le titre de la légende s'affiche, je n'ai pas la description.

Hors ligne

#7 13-02-2017 13:32:37

zoom61
Modérateur
Inscription : 07-09-2015
Messages : 904

Re : éditeur Wysiwyg d'illustrations interactives

Idem, on a un 1 qui s'active et ensuite plus possible de faire autre chose !!!

Hors ligne

#8 14-02-2017 10:45:27

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Steph : le descriptif n'est tout simplement pas visible en mode "view".

zoom61 : je ne suis pas sur de comprendre mais je me suis rendu compte que les checkboxs sur les indices sont une mauvaise idée tel quel : ils servent pour l'instant à afficher mais aussi à supprimer un indice. C'est en cours de résolution.

Dans tous les cas, merci de vos essais successifs : comme dit, c'est vraiment une béta et j'ai passé pas mal de temps à faire et refaire pour avoir une ergonomie user-friendly (ce qui me semble la base).
Le retour que je désirais c'était un aval sur le fonctionnement globale pour m'éviter des allez-retour avec une tonne de correctifs inutiles.

Hors ligne

#9 14-02-2017 11:02:14

zoom61
Modérateur
Inscription : 07-09-2015
Messages : 904

Re : éditeur Wysiwyg d'illustrations interactives

mothsart a écrit :

Dans tous les cas, merci de vos essais successifs : comme dit, c'est vraiment une béta et j'ai passé pas mal de temps à faire et refaire pour avoir une ergonomie user-friendly (ce qui me semble la base).
Le retour que je désirais c'était un aval sur le fonctionnement globale pour m'éviter des allez-retour avec une tonne de correctifs inutiles.

Bon, voici mes retours, les indices s'ajoutent, mais impossible de mettre un titre ??? et la couleur n'est modifiable que sur le premier, ensuite pour les autres cela ne fonctionne pas.
Une fois la conversion en html, j'ai un truc bizarre, car j'ai les indices 1, 2 et 3 et dans la page html, j'ai 2, 3 et 4 ???

Hors ligne

#10 14-02-2017 13:33:44

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

zoom61 a écrit :

Bon, voici mes retours, les indices s'ajoutent, mais impossible de mettre un titre ??? et la couleur n'est modifiable que sur le premier, ensuite pour les autres cela ne fonctionne pas.

C'est possible mais mal pensé  ça nécessite d'afficher le bon indice, de le sélectionnez et de changer son titre (avec le bouton "edit description" qui devrait s'appeler "edit title and description") et sa couleur.

Pour ce qui est de a conversion en html, c'est pas au point et je ne m'y concentrerais qu'en toute fin.

Hors ligne

#11 22-02-2017 00:03:11

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

MAJ (0.1) Les évolutions : (Désolé du retard : je suis parti en vacances avec mon ordi portable sans le cable d'alim = le boulet)

- Mise en place d'un dépôt dédié : https://github.com/mothsART/editInteractiveSVG
Pour le tester en local (si y'en a qui veulent aider au dev) : un "python -m http.server" vous donnera satisfaction.

- Utilisable via Firefox : résolution du soucis de 501 lors d'un drag & drop d'un fichier SVG.
- Changement important sur le fonctionnement de l'ergonomie (j'espère la dernière) :
On peut désormais afficher (œil ouvert/fermé) les indices (pour le drag and drop) et les sélectionner (checkbox) en vue de les supprimer.
Une zone d'édition est disponible à partir d'un carrousel : celà évite à mon sens un grand nombre de confusion.
- Visibilité du commentaire lorsque l'on passe en mode "show";


Ces motifs ont sans doute entraînées des bugs sournois qu'il me faut répertorier puis résoudre.
Github permet de créer des issues pour les plus geeks d'entre vous. Pour les autres, le forum sera suffisant, je m’occuperais de les remonter moi-même.

Il me reste des points encore non satisfaisants :
- le drag and drop d'un indice n'est pas intuitif : je vois bien une mise en surbrillance sur le dernier indice affiché.
- la possibilité via des champs textes de déplacer au pixel près un indice.

Tout conseil/critique est bien entendu bon à prendre !

Hors ligne

#12 22-02-2017 09:48:16

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

Ça avance... Bon alors voilà des tests sous chromium, je pense qu'une vidéo parle mieux dans ce cas:
- On n'a pas l'éditeur pour la description.
- Le 1 se désactive quand on met un 2: le 1 devient 2.
- Les descriptions se mélangent.
- On croit qu'il faut écrire là où il y a "Legend".
- À un moment je n'ai pas pu décoller mon 2 de la souris.

Hors ligne

#13 23-02-2017 17:53:23

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Merci pour ton retour.

Pour la légende, que me suggères-tu ? Je le supprime ?

Pour la question sur l'éditeur de la description : y'a un truc bizarre sur ta vidéo : la police (les icônes) ne s'affiche pas et du coup c'est juste inutilisable !

Tu peux me dire si c'est toujours le cas et si oui : quel version de chromium utilisé ?

Dernière modification par mothsart (23-02-2017 18:02:17)

Hors ligne

#14 23-02-2017 17:58:34

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

Oui je pense qu'on peut supprimer "Legend" et au lieu du bouton "Add", mettre "Add legend" par exemple.

Hors ligne

#15 23-02-2017 18:11:03

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Pour le soucis sur les polices, c'est un oubli des fonts en woff, ttf etc. (woff2 n'étant supporté que dans une version récente de chromium).
Je viens de mettre à jour uniquement pour résoudre ce point : j'espère que ça l'a solutionné.

Hors ligne

#16 26-02-2017 16:38:00

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

MAJ (0.2) Principalement de la stabilisation :

- Un texte explicatif du projet : https://mothsart.github.io/editeur-svg-interactif.html

- correctifs sur la gestion des polices : utilisation de woff, ttf, svg et eot en complément de woff2
=> ça doit corriger le soucis d'édition sur la description.
- Suppression du titre non explicite "Legend" et au lieu du bouton "Add", intitulé "Add to legend"
- Ajout d'un dialogue "About" et "Help" : contenu à écrire en vue de la 1.0
- Correctif mineur sur l'affichage multiple des indices
- Correctifs divers sur la suppression d'un indice
- Correctif sur le zoom
- L'ajout d'un indice se fait bien après les autres (plus de confusion de ce style : Le 1 se désactive quand on met un 2: le 1 devient 2.)
- léger soucis lors de la sélection d'un fichier (choose a file) : la zone de détection du lien était trop petite.
- signalement d'un soucis sur la sélection d'un fichier (sans drag n drop) : la zone de drag (en bleu) est désormais cliquable sur toute sa surface.
Le comportement du drag n drop ne change pas.
- il n'est plus possible de sélectionner plusieurs fichiers.
En revanche, le drag n drop de plusieurs fichiers (hautement déconseillé) à pour impact de ne prendre en compte que le premier fichier trouvé. (pas vraiment de contrôle la dessus)
Pour pallier à ce désagrément : le nom du fichier chargé reste visible. (en bas à gauche)
J'envisagerais peut-être à l'avenir un message d'erreur dès qu'on est sur du drag n drop multiple pour éviter les faux semblants. (ex: on drag 2 fichiers très proches par mégarde : lequel est le bon ?)
- les descriptions ne se mélangent plus.

Voilà, c'est sans doute pas parfait mais ça avance wink

Hors ligne

#17 26-02-2017 19:28:25

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

Oui ça avance:
1. Tests sous chromium:

- Le 2 arrive bien après le 1, on a bien l'affichage de la légende
- Je n'arrive pas à faire zoomer sur le point comme dans ton exemple ( https://mothsart.github.io/labo/fronten … ctive_svg/ ). Le zoom de l'éditeur agrandit l'image et rien ne se passe en show hormis l'affichage de la légende.

2. Tests sous firefox:

- La fusion 1/2 existe encore.

3. Autres remarques:
- Le point qui active le bouton devrait être plus présent: on se demande pourquoi on ne voit pas le point sur l'image quand on ne coche pas.
- Le lien présent dans la légende de ton exemple devrait s'ouvrir dans un nouvel onglet.

Hors ligne

#18 20-06-2017 21:57:20

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Après de longs mois d'absence, je reviens aux nouvelles.

C'est une version que je qualifierais d'intermédiaire qui est basé principalement sur la mise à disposition d'exemples.

Voici les évolutions significatives :

1. Un import d'exemples remplis aléatoirement => j'ai retroussé les manches et j'ai créé un peu d'entropie pour rajouter des indices avec de la sélection auto, de la couleur, un titre, un commentaire et une valeur de zoom.
C'était un investissement utile car désormais je peux "piloter" une grande partie des actions de l'interface :
conséquence : je suis plus productifs, ça à relevé plein de bugs que je me suis empressé de corriger, le code est mieux structuré et rien ne m'interdit de mettre des tests unitaires et fonctionnel à l'avenir.
Les exemples mis à dispo sont des créations perso.
2. Une détection de la luminance d'un indice : si il est trop sombre, le texte est en blanc.
3. La création d'un indice lui attribut automatiquement une couleur choisi aléatoirement dans un tableau de 64 valeurs + j'évite que la même couleur soit présente 2 fois.
4. Drag and drop fluide et sans bugs. (ou moins, lol)
5. un vrai export avec un fichier html généré exploitable.
6. stabilisation

Les limitations :

- il n'est pas possible de faire du drag and drop quand on change le zoom : c'est un comportement que j'ai forcé car ça nécessite pleins d'ajustements qui ne me semble pas impératif à ce stade du projet.

La suite :

- je vais me concentrer sur des exemples concrets pour les utilisateurs et garder une stack avec de l'entropie pour mes besoins.
le but est de créer une illustration interactive à partir de l'outil d'une traite sans bugs (et sans astuces de contournement)
- des correctifs : y'a encore pleins de petites choses à peaufiner mais ça commence enfin à être mineur.

Le tout est disponible sur la même URL : https://mothsart.github.io/labo/fronten … ctive_svg/

Hors ligne

#19 15-07-2017 07:58:33

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Sortie de la version 0.4 !

Les Nouvelles fonctionnalités :

* Mise en place d'un mode débug et release :

- le mode débug utilise des exemples générés aléatoirement
- le mode release utilise 2 exemples avec des contenus pertinents provenant de fichiers générés à partir de l'éditeur (donc produit par mes soins via l'éditeur et exporté au format html).

- import de fichiers finaux : au format HTML => on peut de ce fait ré-éditer un fichier que l'on a précédemment exporté.

Une trentaine de Bugs résolus.

Les bugs non résolus :

* Sur Firefox : les indices débordent : lié à un bug du moteur Gecko : taille conditionné par une taille minimum. (valeur en préférence)
* Sur Firefox, le drag des indices nécessite un relâchement de la souris puis un nouveau clic pour le drop.

Ce qu'il reste à faire pour une version 1.0 :

* i18n : une vrai interface disponible dans plusieurs langues.

* un vrai dialogue d'aide

* une phase de stabilisation : plus de nouvelles fonctionnalités à intégrer ... on part à la chasse aux derniers bugs !!!!

Dernière modification par mothsart (15-07-2017 08:07:47)

Hors ligne

#20 18-07-2017 18:53:11

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Je viens de publier une 0.4.1 qui corrige 2 bugs bloquants :

- le re-import d'un fichier après suppression ne fonctionnait pas bien
- l'import d'un fichier svg ou l'attribut viewbox n'est pas ou mal renseigné posait soucis : le responsive était par conséquent mal géré.
=> le correctif va donc renseigner cet attribut par introspection des tailles du fichier svg.

Hors ligne

#21 19-07-2017 15:51:25

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

En fait hors ligne ça ne fonctionne pas?
Je n'ai pas de numéro sur l'image quand j'ajoute un point et je n'ai pas non plus les boutons de l'éditeur de texte.

Hors ligne

#22 19-07-2017 15:54:29

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

Quand je mets cette image: https://vignette2.wikia.nocookie.net/al … 0806073431
dans l'éditeur en ligne, pareil je n'ai pas de bouton sur la carte et les icônes de l'éditeur de texte sont blanches.

Hors ligne

#23 19-07-2017 17:34:52

mothsart
Membre
Inscription : 31-10-2016
Messages : 53

Re : éditeur Wysiwyg d'illustrations interactives

Merci Steph pour les retours !!!

En effet, ton image a des tailles bien plus grande dans le viewbox que celles que j'avais testé précédemment.
La taille de mes index (boutons sur la carte) ont été naïvement codé en dur alors qu'elles devraient être calculé proportionnellement aux tailles du viewbox.

Tu peux t'en rendre compte en zoomant sur un index : par exemple "10000" et ton index s'affichera...

Je vais corriger ça dans une version 0.4.2

Qu'appelle-tu hors ligne ? En récupérant le source et en lançant l'index dans un navigateur ?

Si oui, ça n'a effectivement pas été réfléchi en ce sens (en local, je test avec un mini-serveur => python -m http.server) : je regarde si c'est possible...

Enfin, pour les icônes de l'éditeur, je ne suis pas sur de comprendre.

Hors ligne

#24 19-07-2017 17:51:49

Steph
Administrateur
Inscription : 03-06-2015
Messages : 3 471

Re : éditeur Wysiwyg d'illustrations interactives

En local:
Sélection_123.png
En ligne avec l'image que j'ai chargée:
Sélection_124.png

Hors ligne

Pied de page des forums