Journal Editeur de SVG Interactif

Posté par . Licence CC by-sa
Tags :
27
7
jan.
2018

Bonjour à tous,

Je vous présente un petit logiciel qui permet de créer des illustrations interactives au format SVG.

L'explication complète : https://mothsart.github.io/editeur-svg-interactif.html

Pour le tester, on peut le faire en live : https://mothsart.github.io/labo/frontend/edit_interactive_svg/
ou en mode offline e téléchargant les sources.

Au départ, c'était voué à l'éducation mais ça peut se destiner à un public bien plus large.

Pour simplifier les choses, il est possible d'utiliser un PPA pour les utilisateurs de Ubuntu : https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration

Je partage car j'envisage de passer le soft en version 1.0.
Je suis donc preneur de toute suggestion : bugs, soucis d'ergonomie etc.

  • # Bravo et mini bug de zoom

    Posté par . Évalué à 5.

    Alors déjà bravo, c'est exactement le genre de logiciel facile à utiliser qui permet à un prof de facilement mettre un peu de dynamisme dans ses outils.

    Alors j'y vais de mon petit rapport de bug tout simple : lorsque l'on clique sur un numéro, on a un beau zoom vers la zone correspondante. Pas de problème. Mais lorsque l'on veut revenir à l'affichage du document complet (en recliquant sur le numéro) il y a une animation de dezoom (très bien !) mais celui-ci est centré sur le centre de l'image complète et non sur la zone que l'on regardait… en gros la "camera" semble se recentrer au milieu de l'image complète puis dézoomer. C'est assez perturbant dans le workflow de présentation, on s'attendrait au retour à avoir simplement le zoom inverse du zoom "à l'aller".

    J'ai tester sur les 2 exemples en ligne «Campement Paléolitique» et «Organes du corps humain».

    On va dire que c'est un souci d'ergonomie sur le résultat et pas sur l'outil en lui-même. Il me faut un peu plus de temps pour tester comme il faut l'outil. J'essaye de faire un retour aussi sur l'outil lui-même dès que possible.

  • # Bien Sympa

    Posté par . Évalué à 4.

    Le résultat est bien sympa !

    Comment tu le positionnes par rapport à Sozi ? Cela pourrait il être complémentaire ?

    Pourrais tu faire apparaître des objet svg dans les zones de texte ?

    • [^] # Re: Bien Sympa

      Posté par . Évalué à 1.

      Par curiosité, j'ai testé l'incorporation de svg à la place d'une image et miracle, le svg est converti en base64.
      C'est une fonctionnalité que j'ignorais et qui est déjà présente (il va falloir que j'en parle dans la doc ainsi que dans le menu d'aide)

      Néanmoins, le greffon d'ajout d'image est vraiment spartiate : il est impossible de redimensionner, déplacer après import.
      Je ne sais pas si ça pourra être résolu : il faudrait que je mettes le nez dans le source de trumbowyg (l'éditeur wysiwyg utilisé)

  • # quelques réponses

    Posté par . Évalué à 3.

    Merci tout d'abord aux aventuriers qui ont testés !
    Si le soft est pas trop mal fini, c'est aussi grâce aux équipes de PrimTux et AbulEdu qui ont testés, conseillés, aiguillés, suggérés !

    Alors j'y vais de mon petit rapport de bug tout simple : lorsque l'on clique sur un numéro, …

    En effet, je vais voir pour modifier ça… c'était au départ plus une fonctionnalité qu'un bug car lorsqu'un indice est très excentré, on ne voit plus une partie des autres indices.

    Je pense que je vais envisager un bouton pour re-centrer l'image. Le plus dur va être de trouver le bon terme et/ou logo.

    Comment tu le positionnes par rapport à Sozi ? Cela pourrait il être complémentaire ?

    Je ne connais Sozi que de nom.
    Du coup, j'ai installé et vois que c'est également un beau projet.
    J'ai pas suffisamment de recul pour dire si on marche sur les mêmes plate-bandes.

    Je dirais que mon soft n'a jamais eu vocation de faire de diaporama.

    Ensuite, ce qui nous différencie à première vue c'est aussi les dépendances : Sozi est lié à Inkscape et Python alors que mon soft se base sur des technos web.

    Bref, même si on peut arriver au même résultat, c'est aussi ça qui fait le libre :

    choisir son outil dans la diversité.

    Pourrais tu faire apparaître des objet svg dans les zones de texte ?

    J'ai intégré un module pour insérer des images un peu en dernière minute.

    Pour une version 2.0, j'ai déjà noté la possibilité de rajouter des vidéos et du son.
    Néanmoins, ça nécessitera de revoir le fichier produit (un zip ou zim) : pour les images, je triche en convertissant en base64.

    Pour du svg, c'est moins compliqué : j'en prend note pour une version intermédiaire.

    • [^] # Re: quelques réponses

      Posté par . Évalué à 2.

      Je ne connais Sozi que de nom.
      Du coup, j'ai installé et vois que c'est également un beau projet.
      J'ai pas suffisamment de recul pour dire si on marche sur les mêmes plate-bandes.

      La dernière version ne dépend plus de inkscape, elle utilise le navigateur pour construire le diaporama et donc des technos web.

      Pour une version 2.0, j'ai déjà noté la possibilité de rajouter des vidéos et du son.
      Néanmoins, ça nécessitera de revoir le fichier produit (un zip ou zim) : pour les images, je triche en convertissant en base64.
      Pour du svg, c'est moins compliqué : j'en prend note pour une version intermédiaire.

      Ça serait vraiment cool et intéressant ! Postes sur linuxfr lorsque tu auras ces possibilités et je me ferais un plaisir de tester intensément ton logiciel !

  • # idées d'améliorations

    Posté par . Évalué à 3.

    Je n'ai pourl'instant regardé que les deux exemples mais après un premier aperçu voici ce que je pourrai proposer comme idées :

    1. Sur la page de pouvoir zoomer/dézoomer avec la molette de la souris
    2. Pouvoir switcher d'une puce numérotée à une autre depuis la souris/clavier (flèches ?)
    • [^] # Re: idées d'améliorations

      Posté par . Évalué à 1.

      Sur la page de pouvoir zoomer/dézoomer avec la molette de la souris

      Pas bête : ça concerne l'éditeur, l'animation finale ou les 2 ?

      Pouvoir switcher d'une puce numérotée à une autre depuis la souris/clavier (flèches ?)

      Ok pour le clavier. Faudra sans doute que je prévois un surlignage pour désigner la puce avec le focus.

      Le switch à la souris ? Tu peux détailler ?

  • # Sortie v 1.0.rc3

    Posté par . Évalué à 2.

    Je viens de sortir une version 1.0.rc3.
    Cette dernière comporte :

    • 1 nouvelle fonctionnalité + 1 correctif concernant le dysfonctionnement signalé par pym.aldebaran:
      La prévisualisation et les fichiers générés comportent désormais un icône "Ajuster la page à l'illustration".
      Le zoom arrière sur un indice reste centré autours de l'indice

    • 1 bug bloquant sous firefox : le fonctionnement du drag and drop des indices est désormais identique à chrome.

    • 1 bug firefox de déplacement du svg lors du retour en mode édition.

    Les deux derniers étant rapportés par Cyril Borne dans une issue github.
    J'encourage d'ailleurs chacun à procéder de cette façon : https://github.com/mothsART/editInteractiveSVG/issues

    J'ai également rafraîchit la doc.
    Le paquet sur le ppa a également été rafraîchit mais le build ne c'est toujours pas terminé : https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration/+builds

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.