De l'utilisation de ArcDial

2 pièce(s) jointe(s)

Bonjour,

Toujours dans mes délires de composants FMX (maintenant que j'ai trouvé comment faire des liens) je suis parti sur la création d'un compas "numérique"
Pièce jointe 610929

Cependant je n'arrive pas à maitriser ArcDial. Sur l'image, le bouton pointe au Nord (en fait le 0, obtenu au Nord grâce à une rotation de -90)
Pièce jointe 610930
cependant quand je tourne le bouton vers la droite (vers l'Est donc en théorie) je me retouve avec des valeurs négatives et donc vers l'Ouest !

je m'en suis sorti en multipliant ArcDial.Value par -1 mais est-ce la seule solution ?

// dans ce code test, c'est avant la liaison par livebindings
// en fait c'est pour l'instant sans unité spéciale pour écrire le composant,
// l'objet étant de tester l'affichage (graduations)

hello, je ne sais pas pour ta question, mais ton code me pique les yeux :)

pourquoi détruire et reconstruire tous les éléments à chaque fois ? à vu de nez tu as toujours le même nombre de composants, il suffit donc d'ajuster leurs propriétés non ?

Citation:

Envoyé par Paul TOTH

pourquoi détruire et reconstruire tous les éléments à chaque fois ? à vue de nez tu as toujours le même nombre de composants, il suffit donc d'ajuster leurs propriétés non ?

Comme je l'ai écrit un premier essai, il a l'avantage d'avoir une sensation de défilement horizontal.
Ton nez n'est pas tout à fait assez long, le nombre de composants dépend de la largeur du compas donc en cas de resize c'est à refaire, ne pas oublier que mon objectif est un futur composant (donc une procedure Paint quelque part)

Mais je n'ai pas encore testé en changeant simplement les propriétés lors d'un changement de valeur, pas sûr que l'effet soit identique, wait and see !

Citation:

Envoyé par SergioMaster

je m'en suis sorti en multipliant ArcDial.Value par -1 mais est-ce la seule solution ?

J'ai regardé le code de TArcDial dans l'unité FMX.StdCtrls. Ce sont bien les conventions mathématiques standards qui sont utilisées:
1) les angles sont comptés dans le sens direct, c'est-à-dire dans le sens inverse de celui des aiguilles d'une montre.
2) l'origine des angles (quand on a juste posé le composant sur la fiche) est sur l'axe horizontal dans le sens positif.

Donc, dans l'exemple de SergioMaster, le point "Est" correspond à 0° (Arcdial.Value) et l'angle de "Est" à "Nord" vaut +90°.
Mais ce qui est trompeur et peut faire penser que les angles seraient comptés dans le sens des aiguilles d'une montre, c'est que l'orientation du bouton (Arcdial.RotationAngle) est mesurée par l'angle de la rotation d'ensemble du bouton (matérialisée par le point qu'on entraîne avec la souris). Mais ici intervient un résultat mathématique (contre intuitif mais facile à montrer) : la transformation des coordonnées d'un point dans un repère tournant est la rotation inverse (c'est-à-dire d'angle opposé) de la rotation qui change ce point dans le repère initial. D'où la valeur Arcdial.RotationAngle = - 90° pour faire passer l'origine du bouton de "Est" à "Nord".

(Accessoirement, le code qui donne la valeur de l'angle entre deux points (fonction AngleBetween) me semble inutilement compliqué: il utilise seulement la fonction ArcCos de System.Math en oubliant la fonction AcrTan2 plus adaptée et présente dans la même unité)

Citation:

Envoyé par SergioMaster

Mais je n'ai pas encore testé en changeant simplement les propriétés lors d'un changement de valeur, pas sûr que l'effet soit identique, wait and see !

tu es en FMX, amuse toi aussi avec les TFloatAnimation ;) (bon, ok, ça peut foutre le bordel quand on en fout partout, mais sont sympa des fois)

1 pièce(s) jointe(s)

Bonjour,

@Patrick pas besoin de floatanimation(s), pour le démontrer voilà une petite vidéo de mes ébauches ("Thermomètre", "Spinner" et "Compas")
https://serge-girard.developpez.com/...tsebauche.webm

Et, pour re-répondre @Paul, effectivement si mon nombre de graduation restait toujours identique (une propriété de mon composant) il serait envisageable de jouer sur la propriété des rectangles enfants. Je vais faire un essai.

OK, ce n'est pas encore, loin d'être, une panacée : des composants aboutis.
Seul mon "Thermometre" est dans une unité séparée et dans un dpk. Il y a beaucoup d'amélioration à y apporter :
- des graduations
- un réservoir en bas
- un maximum/minimum de température et bien entendu la prise en compte de ceux-ci

Mais Gouyon s'en est déjà chargé . La discussion qui s'en est suivi vous expliquera la suite ;)

Voici mon composant test

Code:

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
unit CThermometre;
 
interface
 
uses
  System.SysUtils, System.Classes, System.UITypes,
  FMX.Types, FMX.Controls, FMX.Objects,FMX.Graphics,
  Data.Bind.Components;
 
type
  [ObservableMembers('Progress',false)]
  TThermometre = class(TRectangle)
  private
    FProgress: integer;
    procedure SetProgress(const Value: integer);
    procedure ObserverToggle(const AObserver: IObserver; const Value: Boolean);
    { Déclarations privées }
  protected
    { Déclarations protégées }
    function CanObserve(const ID: Integer): Boolean; override;  { declaration is in System.Classes }
    procedure ObserverAdded(const ID: Integer; const Observer: IObserver); override; { declaration is in System.Classes }
    procedure OnResize;
  public
    constructor Create(AOwner: TComponent); override;
    function Paint: Boolean; reintroduce;
    { Déclarations publiques }
  published
    { Déclarations publiées }
    property Progress : integer {read FProgress} write SetProgress;
  end;
 
procedure Register;
 
implementation
 
procedure Register;
begin
  RegisterComponents('Samples', [TThermometre]);
end;
 
{ TRectangle1 }
 
function TThermometre.CanObserve(const ID: Integer): Boolean;
begin
 case ID of
    TObserverMapping.EditLinkID, TObserverMapping.ControlValueID:
      Result := True;
  else
    Result := False;
  end;
end;
 
constructor TThermometre.create(AOwner: TComponent);
var pos : single;
    aBrush : TBrush;
begin
  if not(csloading in ComponentState) then
  begin
    inherited;
    width:=30;
    height:=110;
    Xradius:=10;
    Yradius:=10;
    FProgress:=50;
    pos:=0.5;
    if pos=1 then pos:=1-0.000001;
    aBrush:=TBrush.Create(TBrushKind.Gradient,Talphacolors.null);
    try
      aBrush.Gradient.StartPosition.X:=0.5;
      aBrush.Gradient.StartPosition.Y:=1;
      aBrush.Gradient.StopPosition.X:=0.5;
      aBrush.Gradient.StopPosition.Y:=0;
      aBrush.Gradient.Points.Clear;
      aBrush.Gradient.Points.Add;
      aBrush.Gradient.Points[0].Color:=Talphacolors.red;
      aBrush.Gradient.Points[0].Offset:=0;
      aBrush.Gradient.Points.Add;
      aBrush.Gradient.Points[1].Color:=Talphacolors.red;
      aBrush.Gradient.Points[1].Offset:=pos;
      aBrush.Gradient.Points.Add;
      aBrush.Gradient.Points[2].Color:=Talphacolors.null;
      aBrush.Gradient.Points[2].Offset:=pos+0.000001;
      aBrush.Gradient.Points.Add;
      aBrush.Gradient.Points[3].Color:=Talphacolors.null;
      aBrush.Gradient.Points[3].Offset:=1;
      Fill:=aBrush;
    finally
     aBrush.Free;
    end;
  end;
end;
 
procedure TThermometre.ObserverAdded(const ID: Integer;
  const Observer: IObserver);
begin
  if ID = TObserverMapping.EditLinkID then
    Observer.OnObserverToggle := ObserverToggle;
end;
 
procedure TThermometre.ObserverToggle(const AObserver: IObserver;
  const Value: Boolean);
var
  LEditLinkObserver: IEditLinkObserver;
begin
  if Value then
  begin
    if Supports(AObserver, IEditLinkObserver, LEditLinkObserver) then
      Enabled := not LEditLinkObserver.IsReadOnly;
  end
  else
    Enabled := True;
end;
 
procedure TThermometre.OnResize;
begin
Paint;
end;
 
function TThermometre.Paint: Boolean;
var pos : single;
begin
BeginUpDate;
pos:=(FProgress/100);
if pos=1 then pos:=1-0.000001;
 
Fill.Gradient.Points.Clear;
Fill.Gradient.Points.Add;
Fill.Gradient.Points[0].Color:=Talphacolors.red;
Fill.Gradient.Points[0].Offset:=0;
Fill.Gradient.Points.Add;
Fill.Gradient.Points[1].Color:=Talphacolors.red;
Fill.Gradient.Points[1].Offset:=pos;
Fill.Gradient.Points.Add;
Fill.Gradient.Points[2].Color:=Talphacolors.null;
Fill.Gradient.Points[2].Offset:=pos+0.000001;
Fill.Gradient.Points.Add;
Fill.Gradient.Points[3].Color:=Talphacolors.null;
Fill.Gradient.Points[3].Offset:=1;
 
EndUpdate;
result:=true;
end;
 
procedure TThermometre.SetProgress(const Value: integer);
begin
  if FProgress<>Value then
   begin
    FProgress := Value;
    Paint;
   end;
end;
 
 
 
initialization
 
Data.Bind.Components.RegisterValuePropertyName
  (TArray<TClass>.create(TThermometre), 'Progress', 'FMX');
 
finalization
 
Data.Bind.Components.UnregisterValuePropertyName
  (TArray<TClass>.create(TThermometre));
end.

Mon seul objectif de départ était de trouver un moyen de faire des liens LinkPropertyToField plutôt que LinkControlToField entre composants et données
(toute la différence entre Field1 vers Progress des "thermomètres" et Field1 ver SelectedValue) de fil en aiguille j'en ai concoté plusieurs.

Pièce jointe 610975

La documentation de base ne proposait que le LinkControlToField (bidirectionnel) en utilisant Data.Bind.Components.RegisterObservableMember. J'ai longtemps pensé q'une option aurait permis de changer (autrement que dans le code) le type de liaison. Après m'être acharné sur cette idée, et une fouille approfondie des sources, j'ai découvert qu'il fallait utiliser un autre type "d'enregistrement" (terme à trouver) : Data.Bind.Components.RegisterValuePropertyName.
Ceci pourrait faire l'objet d'une FAQ, quoique je ne soit pas sûr que ce soit une Question Fréquente :lol:

1 pièce(s) jointe(s)

tient, j'ai fait un test rapide

c'est un mélange de canvas et de composants qui peut s'adapter facilement en tout canvas

le principe est de dessiner sur un bitmap tout le cadran, puis de l'afficher dans deux TImage qui scroll dans un layout en clipping :)

Pièce jointe 610977

Citation:

Envoyé par Paul TOTH

le principe est de dessiner sur un bitmap tout le cadran, puis de l'afficher dans deux TImage qui scroll dans un layout en clipping :)

Merci, cette technique servirait très bien dans le cadre d'une utilisation de style (FMX) dans un composant. Une piste que je n'ai pas encore creusée n'en étant pour l'instant qu'aux liaisons

Bonjour à tous et bonne année

C'est amusant mais je pensais compléter ma collection de composant avec un truc dans ce genre.

Ce qu'il faut savoir avec les angles c'est que c'est un peu chiant à gérer en général il faut se fixer un domaine (0-360 ou -180 +180) et quelque soit la valeur entrée la remettre dans ce domaine. Après il faut gérer le problème des angles situés à proximité des limites extérieures du domaine.

Ensuite pour ce qui est de l'affichage j’essaie dans la mesure du possible de paramétrer au maximum pour que l'utilisateur puisse adapter au mieux l'affichage en fonction de son usage.
Par exemple combien de degrés sont affiché dans ton rectangle, combien de degré représente une graduation...
Ensuite pour ce qui est de l'affichage je dessine tout dans une bitmap que j'affiche ensuite dans mon rectangle.

Citation:

Envoyé par Gouyon

Bonjour à tous et bonne année

Meilleurs vœux

Citation:

C'est amusant mais je pensais compléter ma collection de composant avec un truc dans ce genre.

en fait c'est parce-que la liaison que je t'avais proposé aux départ pour tes composants était bidirectionnelle que je me suis lancé le défi de fin d'année

Citation:

Ensuite pour ce qui est de l'affichage j’essaie dans la mesure du possible de paramétrer au maximum pour que l'utilisateur puisse adapter au mieux l'affichage en fonction de son usage.
Par exemple combien de degrés sont affiché dans ton rectangle, combien de degré représente une graduation...

ça, c'est une étape que je n'avais bien sûr pas encore franchie : les propriétés, bien sûr que je le ferai quand il s'agira d'écrire l'unité composant. La question était plus sur la gestion des angles (chiante) d'ArcDial qu'autre chose

Citation:

Ensuite pour ce qui est de l'affichage je dessine tout dans une bitmap que j'affiche ensuite dans mon rectangle.

Oui, j'ai regardé tes sources ;) la technique proposée par Paul est une solution, envisageable même en tant que style (juste avant le réveillon j'ai même entraperçu comment faire :yaisse2:)