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

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

Annonce

PRIMTUX2 EST DISPONIBLE SUR SOURCEFORGE.
Somme MD5: f4a4f6523990258fd9653ff78f2fb3d4

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

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

é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 049

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 : 854

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 : 13

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 : 13

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 049

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 : 854

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 : 13

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 : 854

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 : 13

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 : 13

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 049

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 : 13

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 049

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 : 13

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 : 13

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 049

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

Pied de page des forums