Ajouter des zones "cliquables"

[jouffrais]

Insérer une zone qui a une texture et qui déclenche un fichier audio ou un TTS

[fredericbonifas]

Il me faudra les specs de l'élément SVG clickable pour pouvoir le construire

[fredericbonifas]

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="707.1067811865474">

<path d="M 383 65 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" stroke="black" stroke-width="2" fill="none">
  <actions>
    <action filter="f1" protocol="tts" value="texte"/>
  </actions>
</path>

</svg>

[GregIJA]

[1] Avoir la possibilité d'indiquer une liste de "filtres".
Chaque filtre est identifié par son id et son nom.
Un filtre peut être "expandable" (c'est à dire qu'il peut contenir des sous filtres).
Concrètement il faudrait pouvoir générer dans le svg le code xml suivant:

<filters>
    <filter id="f0" name="Aucune interaction" expandable="false"/>
    <filter id="f1" name="filtre numéro 1" expandable="true" />
    <filter id="f2" name="filtre numéro 2" expandable="true" />
</filters>

[2] Pouvoir définir des POIs sur lesquels il est possible d'appliquer un ensemble d'action lancé par double clic.
Pour chaque action l'utilisateur doit pouvoir
1) choisir un filtre parmi la liste de filtres préalablement construite,
2) choisir un protocole (tts ou mp3 pour le moment mais ce sera surement une liste à enrichir),
3) choisir une valeur (une chaîne de caractère).
Ces POI seront défini dans le fichier svg et seront associés à une bounding box rectangulaire correspondant à la zone d'interaction.
L'exemple de code à générer est celui que tu as défini dans le commentaire précédent.
Il faut y rajouter les éléments de la bounding box (x, y, heigth, width en pixels).

[fredericbonifas]

@GregIJA J'ai implémenté une première version des zones interactives.
Pour l'instant les filtres sont écrits en dur dans le SVG, il faudra réfléchir une interface pour pouvoir saisir la liste des filtres.

Ensuite, pour ajouter une interaction sur une forme:

• Dans la page édition, cliquer sur le bouton "interaction"
• Cliquer sur une forme : elle devrait se mettre à clignoter
• Il est possible alors de renseigner les 3 infos : filtre, protocole et valeur
• Les informations sur la bounding box sont remplies automatiquement
• Exporter le SVG

Nous pourrons tester ça demain matin.

[GregIJA]

@fredericbonifas
J'ai pris le temps de regarder. Deux choses:

• à priori on pourra virer la notion de bounding box car je pense pouvoir gérer les polygones (pour le moment laisse comme ça)
• le code généré pour mon polygone est le suivant

d="M359.0097351074219,224.38539123535156L522.6240844726562,261.782958984375L351.53021240234375,448.7707824707031L255.23147583007812,351.537109375L249.62184143066406,243.08416748046875Z"

J'ai l'impression qu'il manque des espaces?
Si je ne dis pas de bêtises pour respecter le svg on devrait plutôt avoir 👍

d="M 359.0097351074219 , 224.38539123535156 L 522.6240844726562 , 261.782958984375 L 351.53021240234375 , 448.7707824707031 L 255.23147583007812 , 351.537109375 L 249.62184143066406 , 243.08416748046875 Z"

(je pense qu'un seul chiffre après la virgule suffit dans la précision)

En tous cas joli boulot ;)

[fredericbonifas]

Merci Greg !

D'après ce que j'ai lu dans les specs du SVG, les espaces peuvent être supprimés:

Superfluous white space and separators such as commas can be eliminated (e.g., "M 100 100 L 200 200" contains unnecessary spaces and could be expressed more compactly as "M100 100L200 200").
http://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation

Si ça te gène pour exploiter le SVG je pourrai regarder comment remettre des espaces.

[grdenis]

Yep bien vu mais effectivement je crois que ça me complique l'extraction
des points.
Sinon faudrait que je regarde si il n'existe pas une librairie qui
convertit un path svg en un tableau de point.
Autre question que j'ai oublié de te demander, tous les objets
"interactibles" seront représentés par un path avec un attribut
class="blink"?
C'est bien cela?
++

2015-05-21 19:00 GMT+02:00 Frederic Bonifas [email protected]:

Merci Greg !

D'après ce que j'ai lu dans les specs du SVG, les espaces peuvent être
supprimés:

Superfluous white space and separators such as commas can be eliminated
(e.g., "M 100 100 L 200 200" contains unnecessary spaces and could be
expressed more compactly as "M100 100L200 200").
http://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation
http://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation

Si ça te gène pour exploiter le SVG je pourrai regarder comment remettre
des espaces.

—
Reply to this email directly or view it on GitHub
#50 (comment)
.

[grdenis]

@fredericbonifas
Fred,
Je viens de poursuivre quelques tests.
Voici ce que l'on peut rajouter (y'a pas vraiment d'ordre dans tout ce que je t'ai dit)

(1) un moyen pour moi d'extraire tous les éléments interactifs = je propose que tu mettes dans le path un attribut active="y" lorsque l'élément associé à ce path devient interactif.

<path active="y" class="node_776094765 blink" cx="586.589223517658" cy="331.80552065372467" d="M 586.589223517658 331.80552065372467 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0" name="Le Sylene">
    ....
</path>

(2) tous les "Point d'intérêt" extrait d'OSM qui ont un "name" non vide doivent être automatiquement cliquables. Le filtre associé aura pour id "osm", le protocol sera par défaut "tts" et la value sera équivalente au nom du POI.

<path ... name="Le Sylene">
</path>

doit généré automatiquement le code suivant

<path ... name="Le Sylene">
      <actions>
        <action filter="osm" height="20" protocol="tts" value="Le Sylene" width="20" x="576.5892333984375" y="321.8055419921875"/>
    </actions>
</path>

(3) pour tous tes Path générés, mettre des espaces entre chaque champs de l'attribut "d" pour que je puisse les parser.

(4) bug = lorsque je clic en dehors de la map et que je suis en mode interction, toute la carte clignote.

(5) bug = je suis en mode editable. Je crée 2 cercles. Je clic sur Interaction sur le premier cercle. Je rempli les champs. Je clic sur le 2 eme cercle = les champs ne sont pas vidés.

(6) bug = je suis en mode éditable. Je crée un cercle. Je clic sur interaction sur ce cercle. Je remplis les champs. Je fais un extract = le fichier xml ne contient pas les lignes spécifiques ...

Bon voilà pour l'instant.
Je ne sais pas si tu préfères que je crée une issue pour chaque point la prochaine fois.
++
Greg

[GregIJA]

1 fichier de sortie en XML avec le même nom que le fichier SVG

exemple:

<?xml version="1.0" encoding="UTF-8"?>
<config>
    <filters>
        <filter id="f0" name="Aucune interaction" expandable="false" />
        <filter id="f1" name="Informations" expandable="true" />
    </filters>
    <pois>
            <poi id="id_svg" coord="">
                <actions>
                     <action filter="f1" protocol="tts" value="texte"/>
               </actions>
             <poi/>
    </pois>
</config>

L'attribut coord du POI correspond à la valeur d du path svg : on ne gère que des polygones.

@fredericbonifas = quand on rend interactif un sympbole, un point, un cercle ou une ellipse, on calcul une bounding box et on renvoie dans coord cette bb sous la forme d'un polygone svg.
@fredericbonifas = dans le svg les poi interactifs auront la classe interactive

@grdenis = je vérifie que les MTLine sont bien gérées
@grdenis = Gestion des translations / rotations / scale svg = aller fouiller Batik

@fredericbonifas lorsque je rend un POI interactif le champs valeur prend la valeur

[fredericbonifas]

@grdenis le XML généré devrait être conforme aux specs, mis à part l'entête.

[GregIJA]

@fredericbonifas le fichier xml généré est parfait mais j'ai quelques remarques/ajouts.

Je n'ai pas réussi à intégrer Batik et j'ai abandonné, pour le proto ça ne vaut pas le coup que j'y passe trop de temps ... donc pas de gestion des translations / scale etc.
Donc, pour cette version, pourrais tu générer pour tous les POIs la bounding box associée?
Du coup au final je n'ai plus à aller chercher des infos dans le SVG si je dis pas de bêtise ...

L'autre remarque les actions mais je poursuis dans l'issue #91

[fredericbonifas]

@GregIJA j'ai intégré la bounding box à chaque POI, et gesture=double_tap pour chaque action