Discussion :

[diam's]

Bonjour,

Il y a bien longtemps que je ne suis venu sur ce forum, qui a bien changé depuis mon inscription.

Initié à Turbo Pascal, à l'époque de mes études, j'ai par la suite gentiment tripoté Delphi (edition 6PE de mémoire) tout en pratiquant du Visual Basic (et son équivalent sur Open/LibreOffice), et en surveillant Lazarus du coin de l'oeil. Je ne suis pas pro, juste un amateur qui bricole des trucs/outils pour son job et/ou hobby.

Voilà pour "my life", histoire de poser le niveau du gars.

Aujourd'hui, je fais appel à la communauté pour un petit truc probablement tout simple, mais sur lequel je bute.
Pour une petite application de rien du tout, j'aimerais visualiser "en temps réel" les modifs de certaines données via un diagramme "en radar". Je me suis penché sur le TChart, j'ai cherché des composants permettant de réaliser ce graphique (y compris dans le répertoire "components" de Lazarus), mais je n'ai rien trouvé. Idéalement, ce graphique devrait présenter des échelles différentes sur chacune de ses branches (oui, je suis un enquiquineur )

Je ne suis clairement pas assez compétent pour créer un composant à part entière, donc si cela n'existe pas, tant pis, je ferais sans.

Alors, ai-je mal cherché, ou est-ce qu'il n'existe pas encore de solution pour cela ?

Bien à vous,

D.

[Roland Chastain]

Pour une petite application de rien du tout, j'aimerais visualiser "en temps réel" les modifs de certaines données via un diagramme "en radar".

Bonjour ! Personnellement, je ne vois pas trop à quoi correspond votre description. Pourriez-vous donner un échantillon des données et expliquer comment vous souhaitez qu'elles soient représentées ?

[diam's]

bonjour,

Il s'agit tout simplement d'un éditeur de recette (pour la création de bières).
La modification des ingrédients entraine des modifications calculables sur les paramètres physiques du produit : densités pré et post fermentation, taux d'alcool prévisible, couleur, amertumes (la réelle et la perceptible), etc.



Sur ce diagramme, toutes les "branches" ont la même échelle. Or les valeurs ont en réalité des ordres de grandeurs très différents (l'échelle DI peut aller de 1.020 à 1.150, Df de 1.040 à 0.95, couleur de 3 à plus de 100, etc...), puisqu'il ne s'agit pas des mêmes valeurs physiques.

J'ai représenté 3 séries (fictives). L'un donne les valeurs minimum d'un style de recette, l'autre les valeurs maxi, et la troisième les valeurs de la recette en cours. D'un seul coup d'oeil, on identifie les paramètres qui sont "hors style". (je voulais faire des surfaces pour visualiser plus facilement et pas uniquement des contours, mais la série des minimum est dans ce cas invisible)

Edit : mes excuses pour l'oubli de la balise dans le titre, j'ai perdu certaines habitudes.

[Roland Chastain]

Merci pour cette description détaillée. Cette fois, je vois. Je ne sais pas s'il y a un composant pour ça. Même sans composant, ça doit être faisable. Des partants pour un mini-défi ?

[ThWilliam]

Bonjour.

Vite fait, j'ai modifié ta présentation. Ce n'est pas joli, joli, pcq je suis repassé grossièrement sur tes lignes. Mais cela a le mérite d'être plus "lisible".



Si la présentation te satisfait, un simple PaintBox suffit pour la partie graphique.
Dans l'événement OnPaint :
- dessin du bitmap contenant ton "radar"
- tracé du polygone noir (bordure épaisseur 3, fond transparent)
- tracé du polygone magenta (idem)
- tracé du polygone bleu (fond en carrés)

Reste à calculer préalablement les sommets X,Y de chaque polygone : une fonction renvoyant un TPoint pour chaque branche.
Le calcul doit se faire en tenant compte de l'échelle utilisée par chaque branche (ratio entre longueur de branche en pixels et valeurs minimale et maximale). Simple à faire pour les 2 branches verticales. Pour les branches à 60°, un petit calcul de trigo s'impose...

Bien évidemment, on peut créer un composant, mais dans ce cas, ce n'est pas indispensable.

Cordialement
Thierry

[diam's]

j'ai trouvé le composant TQSpiderGraph, un vieux composant sous delphi.

J'ai essayé d'en faire un composant sous Lazarus, mais une lib Delphi me manque : jpeg (notament utilisé pour GRADIENT_FILL_RECT_V et GRADIENT_FILL_RECT_H)

Sauriez-vous quel est l'équivalent de cette librairie sous Lazarus ?

Sinon, la solution évoquée plus haut est effectivement une bonne piste.

[Roland Chastain]

Sauriez-vous quel est l'équivalent de cette librairie sous Lazarus ?

Je ne sais pas. De mon côté j'ai commencé un truc avec Cairo.

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
 
program etoile;
 
uses
  SysUtils, Cairo;
 
(* http://www.eschecs.fr/fichiers/freebasic/cairodll.zip *)
 
type
  TData = array[0..5] of record
    scale, value: integer;
  end;
 
const
  CData: TData = (
    (scale: 100; value: 0),
    (scale: 100; value: 0),
    (scale: 100; value: 0),
    (scale: 100; value: 0),
    (scale: 100; value: 0),
    (scale: 100; value: 0)
  );
 
procedure DrawBackground(c: Pcairo_t; r, g, b, a: double);
var
  i: integer;
begin
  cairo_set_source_rgba(c, r, g, b, a);
  for i := 0 to 5 do
  begin
    cairo_move_to(c, 0.0, 0.0);
    cairo_line_to(c, 1 / 2, 0.0);
    cairo_rotate(c, PI / 3);
  end;
  cairo_stroke(c);
end;
 
procedure DrawData(c: Pcairo_t; aData: TData; r, g, b, a: double);
function X(i: integer; r: double): double; begin result := 0.0 + (1 / 2) * cos(i * (PI / 3)) * r; end;
function Y(i: integer; r: double): double; begin result := 0.0 + (1 / 2) * sin(i * (PI / 3)) * r; end;
var
  i: integer;
begin
  cairo_set_source_rgba(c, r, g, b, a); 
 
  i := 5;
  cairo_move_to(
    c,
    X(i, aData[i].value / aData[i].scale),
    Y(i, aData[i].value / aData[i].scale)
  );
 
  for i := 0 to 5 do
    cairo_line_to(
      c,
      X(i, aData[i].value / aData[i].scale),
      Y(i, aData[i].value / aData[i].scale)
    );
 
  cairo_stroke(c);
end;
 
var
  data: TData;
 
const
  WIDTH = 512;
 
var
  c: Pcairo_t;
  s: Pcairo_surface_t;
  i: integer;
 
begin
  Randomize;
 
  data := CData;
 
  s := cairo_image_surface_create(CAIRO_FORMAT_ARGB32, WIDTH, WIDTH);
  c := cairo_create(s);
 
  cairo_scale(c, WIDTH, WIDTH);
  cairo_translate(c, 1 / 2, 1 / 2);
  cairo_set_source_rgb(c, 1.0, 1.0, 1.0);
  cairo_paint(c);
 
  cairo_set_line_width(c, 1 / 1000);
  DrawBackground(c, 0.0, 0.0, 0.0, 1.0);
 
  cairo_set_line_width(c, 1 / 200);
  for i := Low(data) to High(data) do data[i].value := Random(data[i].scale div 3) + data[i].scale div 3;
  DrawData(c, data, 1.0, 0.0, 0.0, 1.0);
  for i := Low(data) to High(data) do data[i].value := data[i].value + (Random(3) - 1) * data[i].scale div 9;
  DrawData(c, data, 0.0, 1.0, 0.0, 1.0);
  for i := Low(data) to High(data) do data[i].value := data[i].value + (Random(3) - 1) * data[i].scale div 9;
  DrawData(c, data, 0.0, 0.0, 1.0, 1.0);
 
  cairo_surface_write_to_png(s, pchar(ChangeFileExt(ParamStr(0), '.png')));
  cairo_destroy(c);
  cairo_surface_destroy(s);
end.

[ThWilliam]

@Diam's :
D'après ce que j'ai vu dans TQSpiderGraph, l'unité Jpeg ne sert qu'à enregistrer l'image finale en jpeg en utilisant TJpegImage. Tu peux donc gommer... Sinon, sous Lazarus, TJPegImage est déclaré dans l'unité "graphics.pp".
Les fonctions GRADIENT n'ont rien à voir avec l'unité jpeg, ce sont des fonctions API Windows.

@Roland: je ne connais pas Cairo, donc je n'ai pas trop examiné ton code, mais le résultat est beau et très clair.

Cordialement
Thierry

[Roland Chastain]

@Roland: je ne connais pas Cairo, donc je n'ai pas trop examiné ton code, mais le résultat est beau et très clair.

Merci Thierry, pour tes encouragements. Du coup j'ai ajouté un début de légende.

Pour mémoire, l'unité cairo est incluse dans Free Pascal. Il faut seulement se procurer les DLL. Dans le code j'ai mis un lien vers un paquetage "maison" que j'utilise sous Windows.

[Roland Chastain]

La même chose en version "PaintBox". Par contre je n'ai pas encore fait d'essai d'animation.

[Roland Chastain]

Et voici une version animée. J'ai simplement ajouté un Timer, qui modifie la valeur de l'une des trois "étoiles" et appelle la méthode Invalidate de la PaintBox.

[diam's]

Votre rapidité à trouver et proposer une solution ne cessera jamais de m'étonner!

Concernant les fonctions specifiques à windows, je préférerais m'en passer, car idéalement le code sera mis à dispo (la communauté des brasseurs amateurs est très axée partage) et il est possible (certain ?) qu'il sera porté sous Linux.

D'ailleurs, M. Chastain, puis-je m'inspirer de votre code ?

[Roland Chastain]

D'ailleurs, M. Chastain, puis-je m'inspirer de votre code ?

Mais je vous en prie, c'est fait pour ça !

Si je trouve le temps, j'essaierais bien de faire une version BGRABitmap, qui aurait l'avantage de pouvoir être compilée sous Linux.

[Roland Chastain]

Une version BGRABitmap. Pour le fond de l'image (repère et légende), j'ai pris l'image PNG fabriquée avec le programme précédent.

[diam's]

Respect ! Cela répond parfaitement à la problématique. Y'a plus qu'à regarder comment cela fonctionne à tête reposée (le code est très clair et explicite, même pour moi).
Par contre, je n'ai pas l'impression que la modification de la valeur du timer accélère l'animation (à 200 ou à 20 ms, pas de changement perceptible).

Merci, et bravo.

Je tague le "résolu", mais si quelqu'un veut ajouter quelque chose, qu'il n'hésite pas.

PS : si j'arrive à "sortir" ma petite application (le radar n'est que dans la partie esthétique, reste à trouver du temps et à se retrousser les manches maintenant que j'ai à peu prêt tout ce qu'il me faut), je me permettrais d'en faire part sur le forum.

Merci.

[Roland Chastain]

Bonjour !

Pour la valeur du Timer, je crois que je l'ai mise en dur dans le code :

Code :

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

1
2
3
4
procedure TForm1.FormCreate(Sender: TObject);
begin
  ...
  Timer1.Interval := 500;

Attention, j'ai dû faire la même chose à certains endroits avec les dimensions. J'ai supposé que l'image avait une certaine taille.

[diam's]

ah, oui, effectivement...
Je me sens tarte pour le coup

[Alcatîz]

Oh oui, quelle bonne idée ! Tu peux le faire directement sur l'application de téléchargements.

[Roland Chastain]

Bonsoir !

Voici la version BGRABitmap complète : plus besoin du fichier PNG, ou du moins plus besoin de Cairo.