Intéractivité entre tableau et graph dans un PDF. – RÉSOLU

[nabnub]

Bonjour tout le monde,

Je met à jour un problème que j’avais essayer de résoudre il y a plusieurs mois mais j’avais fini par abondonné car quelqu’un m’avait dit que c’était impossible :

Le scénario est le suivant : est-il possible dans un pdf d’avoir un tableau et un graph interactive, ie j’ai un tableau ou je peux saisir des valeurs et visualiser le tout sur un graph qui réagit instantanément.

la réponse est apparement : oui

hier je suis tombé sur ce site: http://pdfdevjunkie.host.adobe.com/example_FlexChartFromTable.shtml

ou le gars explique quelque détails techniques et offre un exemple et les codes (du xml je crois?)

sources:

http://pdfdevjunkie.host.adobe.com/downloads/Acrobat_FlexChartFromTable.zip

exemple:

http://pdfdevjunkie.host.adobe.com/pdf/FlexChartInPDF.pdf

donc comme vous pouvez le constater en chageant les valeurs les lignes du graph bougent, c’est extraordinaire non?

j’aimerai savoir si j’ai bien compris le concept avant de questionner sur la solution de mon probleme:

http://s17.postimage.org/r9czgoqe7/flex_chart.jpg

il faut créer dans adobe flash builder le fichier .swf qui ici s’appel Acrobat_FlexChartFromTable
qui est “juste” le fond d’un graph

une fois le swf inséré dans le pdf: dans les propriétés de ce swf => sources, chargés le fichier defaultChartData.xml

puis dans chaque champs du tableau mettre le code suivant:

Code:

var annot = getAnnotsRichMedia(0)[0];
if ( annot )
{
    annot.callAS( “changeData”, event.target.name, event.target.value);
}

qu’en pensez-vous? ai-je bien compris ou ….?

il ya plein de documentation qui offre déja les différents code pour différent type de graph,
a mon avis il faut juste cherhcher le code qui convient le mieux à votre situation et… essayer de le faire fonctionner dans son pdf
http://www.adobe.com/devnet/flex/testdrive/articles/6_add_charts2.html

par exemple: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_09.html
                    http://www.adobe.com/devnet/flex/testdrive/articles/6_add_charts2.html
                    et plein d’autre

car voici ma situation

j’ai ce formulaire: http://cjoint.com/?BKopTTYyKbG (par souci de simplicité j’ai supprimé tout les champs inutile à la résolution du probleme)

jusqu’a présent pour illustrer les donnés saisies chaque jour (en vert et rouge), j’attend la fin du mois pour recevoir les formulaires, puis j’utilise excel pour créer le graph, j’enregistre le graph en temps que fichier pdf, puis je reviens sur le formulaire et j’insère le graph en bas du tableau en utilisant l’outil  “Stamp” d’Acrobat

donc je voudrais savoir si je peux vraiment arriver a réaliser un graph interactive dans mon formulaire? et si quelqu’un veut bien me donner les indications nécessaires pour y parvenir?

Sujet

[Merlin]

Bonjour et bienvenue,

Je connais ce document mais je n’ai jamais vraiment compris comment il fonctionnait, faute de connaître Flash, Flex et leurs langages de programmation.

Par-contre ce qui est certain aujourd’hui c’est que Flash est une technologie du passé, et que personne ne sait de quoi sera fait l’avenir, surtout pas Adobe.
Tout ce qu’on en sait c’est qu’il ne passera pas par les mobiles non plus…
:Euuuh:  :bonjour:

Donc je ne peux que te conseiller un développement basé sur JavaScript.
:bonjour:

[maxwyss]

Il y a deux possibilités, les deux demandent de la programmation:

a) Inserer un objet Flash, et faire lacommunication entre les champs du fichier et cet objet Flash (si je me souviens correctement, il faudrait Flex Builder pour quelques composants)

b) Il y a une metode non-documentée en Acrobat JavaScript, nommée createIcon(), avec laquelle on peut peindre directement en utilisant les codes PDF. D.P. Story, professeur emeritié de l’université de Akron, OH a publié des essais; il faudrait chercher un peu pour les trouver. Un example est http://www.math.uakron.edu/~dpstory/tutorial/demos/graphPDF.pdf

Si c’est serieux, je pourrais aider; pour des informations supplémentaires ou un devis, contactez-moi en privé.

HTH.

Max Wyss.

[nabnub]

Salut,

merci pour les infos,

en utilisant simplement les sources que j’ai posté plus haut j’ai réussit a faire ça:        http://cjoint.com/?BKpmS04qVpn  

ça marche en tout cas mais bon la légende n’est pas bonne, et les 5 derniers champs ne sonr pas prit en compte

maintenant j’aimerai bien pouvoir utiliser cette méthode et l’appliquer à mon form

j’ai essayé donc sous adobe flash builder de créer un flex project,

image du dossier et de ses fichiers:

http://s15.postimage.org/yyzi9n3q3/Untitled.jpg

puis j’ai utilisé le code que le gars propose (Acrobat_FlexChartFromTable.mxml)
et j’ai essayé de la modifier

par contre l’autre code (defaultChartData.xml) je ne comprend pas vraiment ce qu’il fait mais je sais qu’on l’utilise comme je l’ai expliqué plus haut,
car en effet dans le code du fichier Acrobat_FlexChartFromTable.mxml
on trouve ceci

Code:

private function loadDefaultXML():void
{
var req:URLRequest = new URLRequest(“defaultChartData.xml”);
var loader:URLLoader = new URLLoader(req);
loader.addEventListener(“complete”, xmlLoaded);
}

donc voici les modifications que j’ai apportés

Code:

layout=”absolute” width=”600″ height=”600″
creationComplete=”init()” applicationComplete=”stage.scaleMode = StageScaleMode.EXACT_FIT;”>

{
//Inject the JavaScript functions we need to interface with the RMA
//You can find the scripts below in the “acroJSFunctions” string object
ExternalInterface.call(“eval”, acroJSFunctions);
//set up callback for upadtes
//the format script in each of the fields uses callAS to send the field name and it’s value to the RMA
//the function for this callback then modifies the XML that drives the chart.
ExternalInterface.addCallback(“changeData”, changeData);
//set up callbacks for commenting
ExternalInterface.addCallback( “multimedia_getState”, getState );
ExternalInterface.addCallback(“multimedia_setState”, setState);
loadDefaultXML();
} private function loadDefaultXML():void
{
var req:URLRequest = new URLRequest(“defaultChartData.xml”);
var loader:URLLoader = new URLLoader(req);
loader.addEventListener(“complete”, xmlLoaded);
} private function xmlLoaded(event:Event):void
{
chartData = new XML(event.target.data);
loadDataFromAcroFields();
}
private function loadDataFromAcroFields():void
{
//get the values from the PDF
//
var c:int;
var r:int;
for (c=0;c<2;c++)
{
for (r=0;r<16;r++)
{     
var result:String = ExternalInterface.call(“getFieldValue”,r, c);
chartData.children()[r].children()[c] = int(result);
}
}
}  private function changeData(name:String, value:String):void
{
//this function gets called when the field value in the PDF file changes
//look in the format script for the field in the PDF.
//the field name is in the form “table.r.c” where r is the row number and c is the column.
//So the first field in the table would be called “table.0.0”
//By splitting the string into an array, I can modify the corresponding element in the XML object that drives the chart.
var fieldNameArray:Array = name.split(“.”);
var row:int = int(fieldNameArray[1]);
var column:int = int(fieldNameArray[2]);
var val:int = int(value);
chartData.children()[row].children()[column] = val
}  private function getState():String
{
//store the chart data XML
return chartData.toString();
} private function setState(stateData:String):Boolean
{
chartData = new XML(stateData);
var c:int;
var r:int;
for (c=0;c<2;c++)
{
for (r=0;r<16;r++)
{     
var fieldVal:String = chartData.children()[r].children()[c].toString();
var result:String = ExternalInterface.call(“setFieldValue”,r, c, fieldVal);
}
} return true;
}
]]>

{
fieldName=”table.”+row+”.”+column;
fieldValue = this.getField(fieldName).value;
return fieldValue;
} function setFieldValue(row, column, value)
{
fieldName=”table.”+row+”.”+column;
this.getField(fieldName).value = value;
} ]]>

  left=”10″ top=”10″ right=”10″ bottom=”10″>









   

donc comme vous pouvez le voir dans l’image plus haut, pleins de fichier sont crées et notament le flash  Acrobat_FlexChartFromTable.swf

voici le fichier, qui lorsqu’on l’ouvre affiche bien le graph que je souhaite:http://cjoint.com/?BKpmZL7Oupc
(je trouve bizzare que le fichier fasse que 84KB, car le swf du gars fait 447KB ??!?)

donc j’ai inséré ce swf  dans le pdf et puis dans ses propriétés =>source => j’ai ajouté le fichier defaultChartData.xml

et donc le message d’erreur suivant apparait: voici le form http://cjoint.com/?BKpmUzHRx7h

Error #2032: Stream Error. URL: file://PDFMedia032480/g/textLayout_2.0.0.232.swf

dois-je plutot m’orienter vers les forums de adobe flex?

merci en tout cas

[alex]

Une autre voie consiste à manipuler directement des annotations (ici des traits) sans passer par la fenêtre flash.
1-Sous Acrobat PRO, placer et dimensionner le champ “Graphes” à votre convenance, c’est lui qui va accueillir les graphes.
2-Créer autant d’annotations de type trait que requis, ici 12. Seule contrainte, insérer “GrapheAbracadabra” comme subject afin de les reconnaître. Ces annotations n’ont pas à être placées, il suffit de les créer, le script fait le reste (je les ai créé par script mais parce que je suis paresseux).
Un seul script est à la peine (Test()), il est lancé à chaque saisie de données dans le tableau.
Pour l’instant, une seule courbe, mais rien de plus facile que d’en superposer d’autres.
Voir document joint assez basique…

[attachment deleted by admin]

[nabnub]

merci du partage

la méthode est trés intéressante

mais, pour le plaisir du chalenge, j’aimerai bien pouvoir parvenir à utiliser la méthode utilisant le flash, car c’est une opportunité de plus pour apprendre et faire des recherhces etc…

[alex]

Oui, il faut t’intéresser au groupe dit des “tontons flexeurs”:
http://groups.adobe.com/group/504

[nabnub]

lol,

je vais y jeter un coup d”oeil

merci bien

[maxwyss]

@alex: J’ai vraiment oublié la possibilité des annotations qui, en fait, permettraient d’utiliser du texte si necessaire.

Un petit problème existe avec les annotations: Même si elles sont generés readonly, elles ne sont pas, et elles sont accessibles par la sequence tab. Il faut donc prendre des mesures pour qu’elles ne soient pas accessibles. Et egalement, même si generés readonly, ils peuvent être déplacées. Auquel cas, il suffit de placer un champ transparent et readonly en dessus.

HTH

Max Wyss.

[alex]

@max:
Attention, la propriété readonly s’écrit readOnly pour les annotations ( et non pas readonly comme pour les champs) et le SDK précise:
If true, the annotation should display but not interact with the user.
Je viens donc de tester, et effectivement même si la séquence TAB passe sur les segments de la courbe (les annotations), on ne peut pas les déplacer.
Mais tu as raison, il faudrait placer un champ transparent ou un calque au dessus des annotations…
On pourrait aussi assez facilement créer une animation en .js équivalente à celle obtenue en flash…
Enfin, il faudrait généraliser à N courbes…

[maxwyss]

@alex: Merci pour lacorrection; je n’ètais pas assez precis…

Il y a cette discrepance entre la documentation at la realité; j’ai deposé des bug reports et des feature requests avec Adobe… peut-être au cours de la prochaine decennie, ça va être corrigé…

Concernant la documentation “readOnly”; c’est correct dans le PDF qui fait part de la documentation du SDK pour Acrobat 10 (la version couramment disponible; il semble qu’ils unt quelques delais avec la version pour Acrobat 11.

Max Wyss.

[nabnub]

Salut tout le monde,

j’ai résolu le probleme,

j’ai juste un souci avec les couleurs, je ne sais pas comment on fait, et puis j’aimerai essayer d’avoir un meilleur design par la suite

voici le résultat obtenu: http://cjoint.com/?BKqk0DXZtWA

merci pour toute les infos

[Merlin]

Salut,

Je viens juste de recroiser par hasard cette page qui donne quelques bonnes bases :
http://blogs.adobe.com/acdc/2008/06/acrobat_9_is_shipping_and_here.html

:bonjour:

[Merlin]

voici le résultat obtenu: http://cjoint.com/?BKqk0DXZtWA

:bravo:    :bonjour:

[Auteur]

Réponses