Ici on n'a que votre IP, votre pseudo et votre adresse mail que nous ne traitons pas.
Quand vous êtes enregistrés, une seule requête permet de vous afficher les messages que vous n'avez pas lus.
Primtux8 est arrivée! Rendez-vous ici
Vous pouvez désormais vous inscrire librement en cliquant sur "S'enregistrer".

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
éditeur Wysiwyg d'illustrations interactives
#1
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/frontend...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/frontend...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
Répondre
#2
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.
Répondre
#3
Idem quand je mets un svg, j'ai une erreur 405 ???
Répondre
#4
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.
Répondre
#5
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 ?
Répondre
#6
J'arrive à une interface d'édition, mais si le titre de la légende s'affiche, je n'ai pas la description.
Répondre
#7
Idem, on a un 1 qui s'active et ensuite plus possible de faire autre chose !!!
Répondre
#8
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.
Répondre
#9
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 ???
Répondre
#10
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.
Répondre
#11
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 !
Répondre
#12
Ç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.

https://youtu.be/cpRwhCMuLoQ
Répondre
#13
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é ?
Répondre
#14
Oui je pense qu'on peut supprimer "Legend" et au lieu du bouton "Add", mettre "Add legend" par exemple.
Répondre
#15
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é.
Répondre
#16
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
Répondre
#17
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/frontend...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.
Répondre
#18
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/frontend...ctive_svg/
Répondre
#19
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 !!!!
Répondre
#20
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.
Répondre
#21
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.
Répondre
#22
Quand je mets cette image: https://vignette2.wikia.nocookie.net/alt...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.
Répondre
#23
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.
Répondre
#24
En local:
[Image: Sélection_123.png]
En ligne avec l'image que j'ai chargée:
[Image: Sélection_124.png]
Répondre
#25
Bon, après quelques semaines d'absences (rempli par des vacances et la rentrée), voici les quelques correctifs attendus pour une version 0.42.
J'ai fini par m'y attarder la semaine dernière mais j'ai eu des gros moments de solitude devant certains bugs...

Voici les bugs résolus :

* l'anomalie d'ouverture en mode offline sous firefox.

* un soucis d'export en mode offline sous firefox.

* correctif sur les tailles de police sur Firefox : Gecko ne supporte pas les polices de moins de 7px sur des balises svg <text>
Du coup, j'ai trouvé une grosse triche en mettant systématiquement une valeur supérieur et en utilisant la fonction scale().
C'est moche, chiant à maintenir mais ça marche.

* le soucis de changement de couleur des boutons de l'éditeur :

Tu es un farceur, Steph : le fichier que tu m'as communiqué contient une balise <style> avec des règles globales.
Du coup, ces règles s'appliquent sur les icônes (svg) de l'éditeur!
Du coup, ça ouvre bien évidement une brèche difficile à colmater correctement : j'ai décidé, à contre-cœur de supprimer pour l'instant ce qui est contenu dans cette balise.
Je n'ai pas encore trouvé de solutions simples pour gérer ce cas. (je vais sans doute m'en remettre à des forums dédiés)

Néanmoins, merci : je n'aurais sans doute pas mis la main dessus avant un bon moment!

* les tailles des index sont désormais calculés proportionnellement au viewbox (une zone d'affichage) : ton image s'affiche désormais bien, Steph :
ça m'a mis le doigt sur plusieurs soucis non anticipés et délicats :
- des éléments sont hors du cadre de la viewbox avec des coordonnées négatives (corrigé : on en tenait pas compte et le fichier importé n'était pas centré, entraînant toute une série d'anomalies) : je me suis créé des fichiers d'exemples pour prendre en compte ses cas de figure.

- que ce passe-t-il quand le document importé a déjà un viewbox ?
Perso, je faisais toute mes réalisations sous Inkscape : à la création de mon doc, je lui donnais une taille sans vraiment m'y attarder (Inkscape prend en réalité ces valeurs pour renseigner le viewbox du fichier généré même si à l'édition on peut allègrement visualiser tout ce qui l'y a entours de cette zone) et je finis souvent par une réalisation qui sort du cadre.
Mon raisonnement était donc le suivant : je recalcule mon viewbox non plus à partir des données fourni par Inkscape mais à partir des tailles de mon illustration.
2 soucis avec ce raisonnement :
- si il y a des éléments imperceptibles à l’œil nu (éléments masqués, trop petits pour être visible sans zoom), que faire ?
L'utilisateur final aura l'impression que l'éditeur n'arrive pas à centrer son image alors que le vrai soucis est lié au nettoyage préalable de son illustration. Voir l'exemple ...
: je me suis bien tiré les cheveux avec avant de comprendre que j'avais oublié de supprimer des tout petits éléments hors du cadre.
- si le viewbox transmis dans le fichier est effectivement la zone que l'on veut afficher, que faire ?

Pour ce dilemne, je vais proposer un message d'avertissement avec un explicatif pour la v1.
Pour une v2, il faudra que j'envisage un dialogue intermédiaire quand le viewbox du fichier est différent du viewbox calculé et proposer des choix possibles et une prévisualisation.

J'ai aussi découvert avec stupeur que le mode offline n'est pas possible sur Chrome ! (bizarre, google semble faire tout pour qu'on ne puisse pas utiliser des apps en off)
Je vais également passer par un forum de dev pour m'en assurer...
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)