Discussion :

[Rodrigue]

Bonjour,

Je souhaiterais tracer un graphique, une courbe, avec les valeurs reçues depuis un serveur (connexion tcp ou udp) et ce en temps-réel. Par exemple: afficher une température au cours du temps

Est-ce possible avec Flash?
Auriez-vous des exemples?

Je vous remercie par avance!

[CR_Gio]

Bonjoir,

A partir du moment ou tu es sur le www, tu peux dire adieu au temps réelle.
Mais tu peux t'en approcher avec une connection socket ( cf class XMLSocket ) ...

Mais pour ton cas ( une temperature ) je ne pense pas qu'une tel connection te soit d'une réelle utilité -la temperature n'evolue pas très vite dans le temps ... en génerale -

Pour ma part, j'opterai pour une requette (cf class LoadVars) vers le serveur toute les 30seconde ( c deja rapide pour l'evolution d'une temperature )

Pour ce qui est du tracé du graphique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var abscisse:Number=new Number(0);
my_mc.lineStyle(1,0x000000,100);
my_lv:LoadVars=new LoadVars();
my_lv.onLoad=function()
{
  //gestion erreur; cf documentation onLoad()
  if(abscisse==0)
      my_mc.moveTo(abscisse,this.y);
  my_mc.lineTo(abscisse,this.y);
  abscisse+=30;
  //defillment du graphe ....
}
setInterval(my_lv.load("http://www.temperature.com/getC.php"),30000);

Pour la connect socket, c'est le meme procedé.
Pour donner l'impression du temps réelle ( le graphe se dessine continuellement et non par acoup, tu peux faire une fonction(s) qui dessine un segment dans le temps...

[Rodrigue]

Ok, merci bien! J'étais complètement nouveau en Flash (tout du moins en ActionScript). Je viens de feuilleter un bouquin là et ça va mieux ... Je pense que je vais m'en sortir ! Rassure-toi je programme déjà en Java et en C++

Pourrais-tu me dire comment récupérer les dimensions du canvas: la largeur et la hauteur de la scène?

Merci beaucoup!

[CR_Gio]

Dans la class Stage :
Stage.width
Stage.height

[CR_Gio]

j'ai retrouvé une source qui pourrai peut etre t'interrésé :
Ca pourra peut etre te fair gagner du temps.
pour le tracé d'une droite en continue

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
 
/*
 * Copyright the original author or authors.
 * 
 * Licensed under the MOZILLA PUBLIC LICENSE, Version 1.1 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.mozilla.org/MPL/MPL-1.1.html
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
 /**
 * @author CR_Gio
 * @date 07.12.2006
 * @since 0.1
 * @version 0.1
 *
 * Cette class permet de dessiner des lignes (droite) progressivement
 *
 */
 
dynamic class FlowLines
{
/**##########################################################################
#                             Propriétés
###########################################################################*/
 
	/**
	* Permet de donner un nom unique au clip contenant les lignes
	*/
	static var whatForm:Number=new Number(0);
 
	/**
	* Stoque l'occurence du clip contenant les lignes
	*/
	private var draw:MovieClip;
 
	/**
	* Determine la ligne en court de tracé
	*/
	private var i:Number;
 
	/**
	* Stoque les coordonnées suivant l'axe des abscice des lignes
	*/
	private var pointx:Array;
 
	/**
	* Stoque les coordonnées suivant l'axe des ordonnées des lignes
	*/
	private var pointy:Array;
 
	/**
	* Stoque l'identifiant du timer
	*/
	private var intervalID:Number;
 
	/**
	* Determine si le tracage est en court
	*/
	private var finish:Boolean;
 
	/**
	* Determine la vitesse de rafraichissent
	*/
	private var speed:Number;
 
	/**
	* Determine le pas d'incrementation : precission
	*/
	private var delta:Number;
 
	/**
	* Stoque le coeficient directeur de la ligne en court
	*/
	private var angle:Number;
 
	/**
	* Stoque la longeur de la ligne en court
	*/
	private var module:Number;
 
	/**
	* Stoque la progression du tracé de la ligne en court (longeur)
	*/
	private var raiseModule:Number;
 
	/**
	* Correction bug sous MTASC 1.12 : setInterval ne reconnait pas this
	*/
	private var objectClass:FlowLines;
 
 
 
/**##########################################################################
#                        Fonction constructeur
###########################################################################*/
 
	/**
	 * Cette class permet de construit un editeur de texte
	 * 
	 * @param mc MovieClip type : clip parent de l'editbox
	 * @return classType
	 */
	function FlowLines(mc:MovieClip/* point[] */)
	{
		objectClass=this;
		finish=true;
		i=0;
		speed=10;
		delta=4;
		raiseModule=0;
		pointx=new Array(0);
		pointy=new Array(0);
 
		draw=mc.createEmptyMovieClip("draw"+whatForm, mc.getNextHighestDepth());
		whatForm++;
	}
 
 
 
/**##########################################################################
#                                Méthodes
###########################################################################*/
 
	/**
	 * Cette methode permet d'initialiser la vitesse et la precision du "tracage"
	 * 
	 * @param delta type Number : progression du "tracage" (px)
	 * @param refresh type Number : intervale de temps (ms) entre chaque progression du "tracage"
	 * etc ...
	 * @return void
	 */
	public function configTrace(delta:Number, refresh:Number, thickness:Number, rgb:Number, alpha:Number):Void
	{
		speed=refresh;
		delta=delta;
		draw.lineStyle(thickness, rgb, alpha);
	}
/*      
	public set refresh(vitesse:Number)
	{
 
	}
	public get refresh():Number
	{
	}
 
	public set precision(pas:Number)
	{
	}
	public get precision():Number
	{
	}
 
	public set epaisseur(strong:Number)
	{
	}
	public get epaisseur():Number
	{
	}
 
	public set couleur(color:Number)
	{
	}
	public get couleur():Number
	{
	}
*/
	/**
	 * Cette methode permet d'initialiser les ligne a tracer
	 * 
	 * @param x type Array : coordonnées des points à tracer sur l'axe x
	 * @param y type Array : coordonnées des points à tracer sur l'axe y
	 * @return boolean : retourne false si les tableaux n'ont pas la meme taille
	 */
	public function initTrace(x:Array, y:Array):Boolean
	{
		if(x.length!=y.length)
			return false;
		pointx=x;
		pointy=y;
		findEquation();
		draw.lineStyle(1, 0x000000, 100);
		draw.moveTo(pointx[0], pointy[0]);
 
		return true;
	}
 
	/**
	 * Cette methode permet de demarer le "tracage"
	 * 
	 * @return void
	 */
	public function startTrace():Void
	{
		if(!finish)
			intervalID=setInterval(objectClass, "raiseLine", speed);
	}
 
	/**
	 * Cette methode permet d'arreter le "tracage"
	 * 
	 * @return void
	 */
	public function stopTrace():Void
	{
		if(!finish)
			clearInterval(intervalID);
	}
 
	/**
	 * Cette methode permet d'effacer les lignes
	 * 
	 * @return void
	 */
	public function clearTrace():Void
	{
		draw.clear();
	}
 
	/**
	 * Cette methode permet de calculer les caracteristique de la ligne
	 * 
	 * @return Boolean : retourne false si l'équation n'est pas résolue
	 */
/*correctife a effectuer */
/* ajouter une methode qui determine si l'equation est determinable et envoie a findEquation (x1,y1) (x2,y2) */
	private function findEquation():Boolean
	{
		var px:Number;
		var py:Number;
 
		if( ! ( ( (pointx.length-1)>i ) && ( pointx.length==pointy.length ) ) )
		{
			finish=true;
			return false;
		}
 
		px=new Number(pointx[i+1]-pointx[i]);
		py=new Number(pointy[i+1]-pointy[i]);
 
		module=Math.sqrt(px*px+py*py);
 
		if(py==0)
			angle=Math.acos(px/module);
		else
			angle=Math.acos(px/module)*py/Math.abs(py);
 
		finish=false;
		return true;
	}
 
	/**
	 * 
	 * Cette methode permet de tracer le segment suivant de la ligne en court
	 *
	 * @return void
	 */
	/*
	 * correctife
	 * Peut etre en public ...
	 * Permetrait de commander la progression du dessin manuellement a (voir)
	 * ajouter une methode pour commander le renouvellement de la progression (commander manuellement ?)
	 */
	private function raiseLine():Void
	{
		raiseModule=raiseModule+delta;
		if(raiseModule>module)
		{
			draw.lineTo(pointx[i+1],pointy[i+1]);
			clearInterval(intervalID);
			i++;
			if(findEquation())
			{
				raiseModule=0;
				startTrace();
			}
			else
				onComplete();
 
		}
		else
		{
			onProgress();
			draw.lineTo(raiseModule*Math.cos(angle)+pointx[i],raiseModule*Math.sin(angle)+pointy[i]);
		}
	}
 
	public function onProgress()
	{
	}
	public function onComplete()
	{
	}
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
		var x:Array=new Array(200,300,350,300,200,100,50,100,200);
		var y:Array=new Array(350,300,200,100,50,100,200,300,350);
 
		var my_form:FlowLines=new FlowLines(_root);
		my_form.configTrace(1, 100, 1, 0x000000, 100);//valeur par default
		my_form.initTrace(x, y);
		my_form.startTrace();

Petite demo en ligne


Merci de respecter la licence.

[Rodrigue]

Super merci beaucoup ! Exactement ce qui me fallait...

C'est moi où l'autocomplétion n'est pas gérée dans Flash? J'ai fouillé un peu partout mais je n'ai trouvé nul part où je pouvais l'activer...

[Rodrigue]

ok pour l'autocomplétion, j'ai trouvé! Je cliquais sur le bouton mais ça ne marchait pas (p-e un mini bug ), en fin je suis passé par le menu déroulant à droite et ça fonctionne pour les classes natives mais pas pour les classes personnelles

[CR_Gio]

c'est a toi de créer le complètement automatique.
Tu peux t'aider des sharedObject, mais si c'est pour des mot de pass, je ne pense pas que ce soit tres sécurisé ...

[Rodrigue]

Je voulais parler du menu contextuel qui apparaît lorsqu'on faite par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Stage.

C'est plus facile, je n'ai pas besoin de connaître par coeur les noms de méthode

[Rodrigue]

Voici le style de graphique que je souhaiterais générer:
http://www.fusioncharts.com/GalleryChart.asp?id=31

J'ai regardé ton code source, j'ai compris comment ça fonctionnait merci (je n'oublierai pas de la licence)