éditeur Wysiwyg d'illustrations interactives

[mothsart]

Voici une version 0.5.1 avec au menu :

- une zone de messages d'avertissements lors d'un import + un dialogue disponible avec des explications détaillés sur l'anomalie rencontrée (voir exemple https://mothsart.github.io/static/images...rnings.png) :
- quand le document importé utilise des balises <script> : le code javascript est supprimé.
- quand le document importé utilise des balises <style> avec du CSS : les règles css sont désormais toutes préfixés afin d'éviter de perturber l'interface utilisateur.
- quand le fichier importé comporte un viewbox explicitement rempli et que celui est différent de celui calculé. (voir exemple : https://mothsart.github.io/static/images...iewbox.png)
- le mode Debug a été étoffé pour prendre en compte l'ensemble des exemples des anomalies constatées jusqu'à présent. (ça permet de me constituer un mémo, d'éviter les régressions etc.)
- Correctif : les boutons graphiquements désactivées (disabled) étaient encore actifs.
- quelques retouches graphiques et plusieurs correctifs mineurs

[Steph]

Ça devient très intéressant. Toutefois:
- Dans la boîte d'édition du texte de présentation, le texte sélectionné n'est pas surligné.
- Serait-il possible d'insérer une vidéo?
- Il n'a pas voulu de mon png, j'ai du le transformer en svg.

[mothsart]

la sélection du texte : effectivement, je devrais corriger ça pour la prochaine version.
pour ce qui est des insertions d'images (png) ou vidéo, ça n'a pas vraiment été prévu pour ça...
Le but du soft étant de convertir un fichier svg statique en une illustration interactive au format html.
Pour les images, c'est sans doute possible de tricher en incorporant mon image dans ma balise <svg>... je vais réfléchir à la faisabilité mais ça attendra un peu :
là, je suis en train de mettre en place l'internationalisation avec la traduction en français.
Parallèlement à ça, j'étoffe ma batterie d'exemples avec des svg récupérés sur openclipart.

Pour la vidéo, je suis un peu plus réticent :
1. parce que c'est pas possible de mettre de la vidéo dans du <svg> et que du coup ça m'oblige à remanier le soft dans sa globalité
2. j'arrive pas à comprendre l'utilité sur un format déjà animé : si t'as un exemple, je suis preneur !

[Steph]

Je ne parle pas de remplacer du svg par de la vidéo, mais de pouvoir mettre un lien vers une vidéo dans la description avec la vidéo qui s'affiche (pareil avec du mp3), comme dans un article de wordpress. Le but est de bien sûr étoffer les explicitations: je mets un numéro sur les Alpes, en cliquant dessus je peux voir des explications, des liens, des images, mais si j'ai une vidéo sur la formation des Alpes, ça serait bien qu'elle s'affiche dans le cadre de la description, sans qu'elle soit incorporée au html.

[mothsart]

Ok, je comprend mieux le besoin.
Effectivement, je n'avais pas réfléchit aussi loin : j'ai choisi un éditeur minimaliste pour qu'il soit pas trop dur à intégrer et qu'il permette d'éditer un descriptif avec un peu de mise en forme.
Pas sur qu'il soit adapté pour le coup : faut soit que je le remplace par un autre soit que je l'adapte.

Le besoin est assez simple, effectivement : la réalisation, elle est hautement plus complexe.
Pour l'instant, le soft produit du html avec tout à l’intérieur. (le javascript et le css mis inline dans le document sont la valeur ajouté)
Pour les images, j'y avais pas encore trop réfléchit mais c'est possible de les sérialiser pour qu'elles soient dans le même fichier.
L'intérêt d'un fichier unique en HTML c'est bien évidement de pouvoir le partager et de l'ouvrir simplement via un navigateur et ça juste marche. (en offline en plus)
Si il y a des sons ou vidéos rattachés, ça veut dire soit :
1. communiquer une archive et la manip devient plus complexe.
On peut envisager, dans ce cas de figure, et dans le cadre de PrimTux, de créer un nom d'archive (par exemple : .anim) et de lui attribuer un script déclencheur qui ferait à peu près ça :
je copie le .anim (qui est en réalité un zip : même astuce que les .odt), je le décompresse dans un espace "temp" et je lance firefox en pointant sur l'index.html
2. afficher le contenu multimédia se trouvant en réalité sur un site externe :
- faut être en connecté pour accéder à la ressource
- faut que la ressource soit encore présente/disponible

[mothsart]

Bon, après quelques recherches, il existe bien un format d'archive du HTML appelé ZIM

Je suis assez effaré que ça soit si impopulaire en 2017.

[Steph]

Le zim est utilisé pour vikidia... hors ligne: kiwix l'utilise: http://mirror3.kiwix.org/zim/

[mothsart]

C'est l'indifférence des navigateurs par rapport à ce format qui m'étonne. Kiwix c'est une adaptation du coeur de firefox : c'est dommage que ça n'ai pas profité directement à firefox.

[mothsart]

Version 1.0.beta :

Je met à disposition une nouvelle version qui intègre désormais la traduction (il manque encore la traduction du sélecteur de couleur et de l'éditeur de texte : ça nécessitera de bien configurer les greffons).
Le logiciel est désormais disponible en 2 langues : anglais et français avec la détection de la langue du navigateur.
Je n'ai pas mis de sélecteur de langue pour ceux qui souhaitrais en changer : ça ne me passairais pas pertinent mais j'ai peut-être tord (ça ne demanderais pas beaucoup d'efforts).
C'était la dernière fonctionnalité majeur que je souhaitais intégrer avant une 1.0.
De coup, je rentre (enfin) dans la phase d'un produit en béta.

Qu'est-ce que ça entraine :

1. Plus aucune demande de nouvelles fonctionnalités ne seront intégrées dans cette version.
On aura a disposition une version certe encore spartiate mais néanmoins fonctionnel.
2. Création de 2 nouvelles branches 1.x et 2.x afin de prendre en compte des évolutions futures.
3. Intégration de nouveaux fichiers d'exemples (réalisations persos, fichier provenant d'openclipart, etc.) : le but est de débusquer la moindre anomalie.
4. éliminer un à un les derniers bugs jusqu'à une version RC.
5. Ma concentration sur un vrai dialogue d'aide.

Cette version a déjà mis le doigt sur 2 nouvelles anomalies mentionnées à l'utilisateur sous forme d'avertissement :

- quand le fichier svg contient une ou plusieurs balises <mask> (ça fait disparaitre des objets et l'on peut avoir l'impression que le viewbox est mal calculé)
- quand le fichier svg contient une ou plusieurs balises <clipPath> (même problématique que la balise <mask>)

[Philippe Dpt35]

Je n'ai pas mis de sélecteur de langue pour ceux qui souhaitrais en changer : ça ne me passairais pas pertinent mais j'ai peut-être tord (ça ne demanderais pas beaucoup d'efforts).

Comme il semble y avoir des demandes pour l'intégration de logiciels d'apprentissage de l'anglais, est-ce que de pouvoir choisir la langue dans les applications (même si leur but premier n'est pas l'apprentissage de l'anglais) ne serait pas intéressant ?

[mothsart]

Steph, tu me parlais dans un autre topic d'imagier :

J'ai fait un rapide prototype : c'est à peut prêt à ça que tu t'attends : https://mothsart.github.io/labo/frontend..._book.html

On clique sur le nom d'un thème, ça agrandi les miniatures.
On clique sur une miniature et on affiche l'illustration interactive correspondante.

C'est bien évidement un prototype, ça fonctionne mal, c'est positionné à l'arache et j'ai vulgairement recopié des images.

[Steph]

Bien foutu, l'esprit est là. Est-ce que le prof lambda sera capable de créer ce sommaire?

[mothsart]

Hé non, c'est là tout le dilemne : ça nécessite au minima de créer les balises html et si l'on veut transférer l'imagier, penser à copier toute l'arborecence.
Je suis partagé par l'idée de créer un soft complémentaire :
dans ce cas là, est-ce que je reste dans le cadre d'une appli web ou plutôt du gtk (plus rapide à réaliser à mon sens) ?
Soit d'intégrer dans l'éditeur : ça fait un soft pour tout faire mais ça peut vite se transformer en usine à gaz et ça nécessite de tout casser donc pas avant une v1.x voir v2...
Enfin, la notion d'arborescence reste entière dans tous les cas et l'étape "archive" ou fichier zim devient une nécessité.

[Steph]

Dans ce cas je pense qu'il vaut lieux rester sans cette arborescence. On a quand même une liste déroulante dans l'application.

[Steph]

Tu nous fais un petit paquet?

[mothsart]

Voici le paquet :https://cloud.indie.host/s/AMG9oHCGaThgeuo

J'ai rajouté quelques infos importantes comme la licence (BSD) et un logo.

Je devrais fournir une version RC dans les jours qui viennent avec un mini-tuto (dans le dialogue d'aide).

N'hésitez pas à me faire des retours : j'ai malheureusement fait un peu dans la précipitation.

[mothsart]

On passe à la version 1.0.rc1

https://cloud.indie.host/s/Bjp5R1CtwQoLPRA

Les changements :

- visibilité du texte sélectionné sur l'editeur WYSIWYG (principalement pour firefox en mode offline)
- Divers travaux minimes mais néanmoins chronophage d'unification de l'affichage de Chrome et Firefox.
- gestion de la traduction via un script perso plutôt qu'une extension de vuejs : évite des libs complémentaires exclusivement pour ça.
- ajout d'un sélecteur de langue (pour répondre à la demande de Philippe)
- ré-ajustement la taille de la sidebar (éviter les retours à la lignes sur des traductions plus longues)
- la traduction du sélecteur de couleur et de l'éditeur de texte.
- ajout d'une fonctionnalité qui me paraissait urgente : la possibilité de sélectionner une image dans l'éditeur (converti en base64 pour pouvoir être incluse dans l'export d'un unique fichier .html)
(judicieusement suggéré par Steph)
- l'ajout d'un vrai dialogue d'aide (tuto) traduit en français et anglais avec quelques imprim-écrans. (il faudra sans doute que je l'étoffe)

[mothsart]

Une version rc2.

- rajouts d'un exemple d'illustration interactive :
- sur la météo
- correctifs mineurs d'affichages :
- prévisualisation du nom du fichier en base de la sidebar mal géré en français
- correctif mineur : quand on zoom puis qu'on passe sur le détail d'un autre indice, le zoom est concervé : c'est potentiellement génant car on ne sait pas forcément sur quel indice à lieu le zoom.
Le correctif s'occupe de désactiver le zoom dès que l'on passe sur le détail d'un autre indice.
- La version RC2 est désormais empaqueté et disponible sur un PPA
- on zoom sur un indice, on passe sur la prévisualisation et on revient sur le mode d'édition : le zoom est appliqué mais pas le déplacement.
Solution délicate sur chrome (son fonctionnement reste incompréhensible).
- Correctif : le zoom sur un indice avec un viewbox erroné ne fonctionne pas bien.
- Correctif : quand on supprime un indice ou le détail est ouvert, il est impossible d'accéder au détail d'un autre indice.
- Message d'erreur lorsqu'un fichier n'est pas reconnu à l'import.
- Correctif d'une régression lié au module i18n : le titre par défaut (un placeholder) doit disparaitre dans le dialogue d'édition quand le champ prend le focus
- Possibilité de déplacer un indice pendant un zoom + pendant un zoom, le curseur de la souris ne devrait pas être en mode "pointeur".
- Anomalie : création d'un indice lorsqu'il y a un zoom
Le passage sur le détail du nouvel indice ne désactive pas le zoom

Le paquet est dispo : https://cloud.indie.host/s/R6jrYAAc2rF5cQF

Je précise que la version en ligne est également à jour : https://mothsart.github.io/labo/frontend...active_svg

[mothsart]

Je viens de rajouter un nouvel exemple avec des fruits en anglais.

[mothsart]

Nouvelle version 1.0.rc3 !
Le paquet est dispo : https://cloud.indie.host/s/zcmL3IGVcFtk54Z

Le détail : http://linuxfr.org/nodes/113469/comments/1726569

[mothsart]

J'ai un mini bug à traiter (graphique et qui ne se déclenche que dans un cas précis) avant d'officialiser avec une version 1.0.
Une fois celle-ci empaqueté, serait-il possible de la mettre dans la PrimTux 3 ? Vu que c'est que du html/css/js, ça ne nécessite pas de compilation par achi.

[Steph]

Bien sûr, j'en ferai un paquet, je pensais même t'avoir déjà demandé où tu en étais pour savoir si on l'intégrait ou pas. Ce qu'il faudra c'est multiplier les exemples, on pourra les ajouter au fur et à mesure des mises à jour du .deb.

[mothsart]

Le paquet avait déjà été fait et communiqué un peu plus haut...
Normalement, c'est clé en main.
Désormais, le mieux est de ce baser sur le paquet dans le ppa : https://launchpad.net/~jerem-ferry/+arch...lustration
Pour ce qui est des exemples : les envies ne manque pas. J'ai pas mal de trucs en chantier mais vu que les crayonnés me mette moins du 10ème du temps... ça tarde.
Je me forme également sur Blender car j'aimerais varier les genres.
Je pense que je ferais des 1.x juste pour des correctifs mineurs et du contenu.

[Steph]

Comme c'était "RC" je ne l'avais pas inclus, je le prends donc.

[Steph]

C'est pas accueil, c'est edit, et il a d'autres choses à faire que de rédiger des textes, on ne surcharge pas les développeurs!