Schéma dynamique en PHP

[Alastor]

Bonjour à tous,

 

je suis face à une (petite) problématique.

 

On m'a donné un schéma complexe sous forme d'image PNG, et j'aimerais (tout du moins mon boss aimerait ^^) le passer sous forme de page Web avec une partie interactive, par exemple j'aimerais afficher des infos lorsque je passe ma souris sur une des flèches, etc.

 

Je ne sais pas trop par où commencer.

Je pensais essayer de convertir voire de recréer ce schéma avec InkScape histoire d'avoir du SVG et pouvoir retravailler ce que je veux dessus, et pour la suite coder en PHP/JavaScript pour toute la partie dynamique, mais est-ce que la méthode est bonne ?

 

C'est la première fois que je bosse sur un sujet comme ça donc je tatonne un peu.

Et désolé, mais pour des raisons pro je ne peux pas vous joindre le schéma, pour info ça ressemble beaucoup à un diagramme UML complexe (une vingtaine d'objets + les flèches qui vont avec).

 

Merci d'avance pour le coup de main :)

[RinDman]

Un schéma avec annotation ? Et celui qui crée ce PNG, il pourrait pas le générer en PDF ? Ou même en XML ( les nouveaux formats supportent ce genre de fonctionnalité )

 

En gros, tu veux faire de la reconnaissance de forme ( c'est normé les couleurs des rectangles avec ou sans bord arrondis ? )

 

 

http://libgd.bitbucket.org/

 

J'ai trouvé cette bibliothèque disponible en php (  penser à débloquer la limite mémoire ) ou en c je crois. ça permet de traiter l'image.

[seboss666]

Je dirais qu'il n'y a pas besoin de PHP pour ça, l'outil map pourrait suffire (avec une pointe de JS pour la gestion des popups) : http://www.w3schools.com/TAGS/tag_map.asp

[Alastor]

Merci pour vos réponses.

 

@RinDman :

Il n'y a pas d'annotations sur les schéma, juste des titres et des numéros sur les flèches écrits en "dur", dont j'aimerais pouvoir me débarrasser si possible.

Sinon, les rectangles sont de couleur sans bords arrondis.

Je vais checker la bibliothèque pour voir ce que je peux en tirer.

 

@seboss666 :

Edit : au temps pour moi, j'avais lu en diagonale l'utilisation de map/area, ça peut effectivement le faire si j'arrive à récupérer le schéma sans les couleurs et les annotations.

[Alastor]

Bon, je reviens avec du nouveau.

 

J'ai pu récupérer le schéma originel qui avait été fait avec Gliffy.

Je l'ai donc retouché pour enlever ce dont je n'avais pas besoin (numéros, légendes, ...) puis je l'ai exporté en SVG pour essayer de voir si je pouvais facilement travailler dessus.

Et... c'est chaud. Le schéma est vraiment complexe (c'est un diagramme de flux inter-applications), du coup le SVG est très volumineux, et ça va être une tare pas possible pour pouvoir rendre tout ça interactif (le but étant d'aller piocher dans nos outils de dispo/perf la valeur d'un flux particulier puis de l'afficher en rouge/vert selon la valeur).

 

Je pense donc abandonner cette possibilité qui me parait vraiment trop fastidieuse...

Si quelqu'un a une bonne solution, parce que là je sèche un peu.

[maximeK]

Salut,

 

comment est ton fichier SVG ? 

 

comme ceci :

<rect id="flux1" x="0%" y="0%" width="100%" height="100%" style="fill: blue;"/>

Si oui, tu peux y acceder comme ceci :

document.getElementById('flux1')

Et avec ca tu peux mettre tout le JS que tu veux pour avoir les datas et le rendre dynamique, mais te fait pas d'illusion, tu va devoir reconstruire tout ton SVG pour que sa marche.

[Alastor]

Salut,

 

comment est ton fichier SVG ? 

 

comme ceci :

<rect id="flux1" x="0%" y="0%" width="100%" height="100%" style="fill: blue;"/>

Si oui, tu peux y acceder comme ceci :

document.getElementById('flux1')

Et avec ca tu peux mettre tout le JS que tu veux pour avoir les datas et le rendre dynamique, mais te fait pas d'illusion, tu va devoir reconstruire tout ton SVG pour que sa marche.

 

Merci pour ta réponse maximeK.

 

En effet, le SVG est bien comme tu l'as décrit, mais je n'ai pas de balise id ni de balise name, c'est un peu plus compliqué pour y accéder avec JS du coup...

 

Je suis en train de voir si je peux simplifier un peu tout ça, mais je me doute bien qu'il faudra que je recrée le SVG complètement oui ^^