Discussion :

[gvasseur58]

Apprendre à créer des transitions d'image à image
Avec Lazarus et BGRABitmap


Bonjour à toutes et à tous !


La série de tutoriels inaugurée par celui que vous allez lire est destinée au programmeur soucieux d'exploiter au mieux le graphisme avec Lazarus, mais peut-être aussi à celui qui souhaite découvrir ou collecter des algorithmes pour créer des transitions d'image à image, par exemple pour un diaporama.

Les explications s'appuient sur Free Pascal et la bibliothèque BGRABitmap, tous deux des outils gratuits, open source et multiplateformes qui ont fait leurs preuves, mais elles ne se limitent pas à une illustration de leurs fonctionnalités : les techniques et les raisonnements utilisés devraient être suffisamment commentés pour être exploités par des utilisateurs d'autres langages et d'autres bibliothèques graphiques. Si vous faites partie de cette catégorie de lecteurs, c'est à partir du deuxième tutoriel que vous devriez trouver votre compte, celui en cours expliquant comment installer la bibliothèque et posant les bases d'une application de démonstration.

Si vous utilisez déjà Lazarus, sachez que ce qui va être présenté est compilable sans la moindre modification aussi bien sous Windows que sous Linux, en 32 ou 64 bits.

Pour illustrer le résultat final de la série, à savoir un composant prêt à l'emploi, voici une vidéo qui le montre en action :

Pour lire le tutoriel, c'est ici : https://gilles-vasseur.developpez.co...sitions/bgra1/

Que pensez-vous de ce tutoriel ?
Quelle utilisation faites-vous du graphisme avec Lazarus ?

Retrouvez les meilleurs cours et tutoriels pour apprendre la programmation avec Lazarus.

[BeanzMaster]

Bonjour

Intéressant comme article Gilles, j'ai hâte de lire la suite . Une seule remarque j'ai testé l'exemple 3, sous Windows c'est très fluide, mais sous Linux c'est d'une lenteur déconcertante A vérifier si c'est juste chez moi ou pas. Pour informations je dispose des même version Lazarus et de BGRABitmap sous mes 2 plateformes.

A Bientôt

[Jipété]

j'ai testé l'exemple 3, sous Windows c'est très fluide, mais sous Linux c'est d'une lenteur déconcertante

Linux en MV ? Si oui, je l'ai remarqué aussi avec d'autres projets : dans le host Linux le projet va très bien, et dans une MV Linux (où j'ai la dernière version de Laz/Fpc) ça rame d'une manière impressionnante.

[gvasseur58]

Une seule remarque j'ai testé l'exemple 3, sous Windows c'est très fluide, mais sous Linux c'est d'une lenteur déconcertante

Comme Jipété l'a écrit ci-dessus, il semblerait que ce soit sur les machines virtuelles que se pose le problème. Avec une mémoire réservée au graphisme souvent ridicule, ce n'est pas forcément étonnant. Mais il y a peut-être d'autres raisons, car voici le composant en action sous Linux Ubuntu Studio avec Oracle VM VirtualBox à jour :

On voit que les transitions sont plutôt rapides (à vrai dire, la boucle comporte 72 pas, mais la différence avec 100 n'est pas considérable), mais qu'il y a parfois un petit problème en fin de transition (un freeze bref mais visible).

J'attends confirmation de la source du problème !

Gilles

[Jipété]

Avec une mémoire réservée au graphisme souvent ridicule, ce n'est pas forcément étonnant.

OMG tu as surement raison : dans mes MV, pour ne pas pomper les ressources du host, je n'attribue en général que 64 à 128 Mo.
Promis, la prochaine machine je l'achète avec 16 Go minimum (là je n'ai que 4).


-- Un aparté purement esthétique --

Je sais bien que les machines peuvent tout faire, mais est-il alors nécessaire de tout faire puis tout montrer ?

Je ne parle pas de ta démo, qui est une démo, justement, mais c'est elle qui me met la puce à l'oreille et la larme à l'œil.
On ne voit plus que ça partout à la téloche, maintenant, et ça se répand à toute allure, le moindre petit sujet devient un calvaire visuel et sonore :
entre les transitions d'un plan à l'autre à coups d'effets parasite, flash de couleurs, tournage de pages, déformations d'image, et le rajout de bruits pour accentuer, bien marquer l'effet visuel, passer du temps devant cet appareil devient une torture audio-visuelle.

Juste parce que les nouvelles consoles de montage permettent ces effets ? Mais à part du brouillage visuel et de la pollution sonore, ces ajouts n'apportent rien.

C'est Saint-Ex' qui disait

La perfection, ce n'est pas quand il n'y a plus rien à rajouter, c'est quand il n'y a plus rien à enlever.

Donc virez-nous tous ces effets de transitions et les documentaires gagneront en lisibilité et et fluidité du message passé.

Sur Arte ils s'amusent même à utiliser des polices pourries, pour perdre en lisibilité : on marche sur la tête, là ! Une police est là pour qu'on puisse bien lire le message qu'elle a à transmettre et surtout, qu'elle se fasse oublier.
Les graveurs de caractères depuis 500 ans doivent se retourner dans leur tombe et maudire ces machines modernes et les imbéciles incultes qui les utilisent si mal, s'imaginant que puisqu'on peut tout faire alors il faut tout faire, même si c'est du grand n'importe quoi.

À croire que les mecs ne regardent pas les documents qu'ils produisent...

[BeanzMaster]

Comme Jipété l'a écrit ci-dessus, il semblerait que ce soit sur les machines virtuelles que se pose le problème. Avec une mémoire réservée au graphisme souvent ridicule, ce n'est pas forcément étonnant. Mais il y a peut-être d'autres raisons, car voici le composant en action sous Linux Ubuntu Studio avec Oracle VM VirtualBox à jour :


On voit que les transitions sont plutôt rapides (à vrai dire, la boucle comporte 72 pas, mais la différence avec 100 n'est pas considérable), mais qu'il y a parfois un petit problème en fin de transition (un freeze bref mais visible).

J'attends confirmation de la source du problème !

Gilles

Bonjour malheureusement ce n'est pas une MV.

Mon système Linux :
Manjaro avec KDE et carte graphique NVidia GTX 1070 8Go et tous les drivers sont parfaitement installés

Je n'ai pas testé d'autres projets utilisant BGRABitmap mais le problème vient surement de lui. Avec le projet sur lequel je travaille actuellement j'ai un perte de vitesse sous Linux de l'ordre de 4/5 fps comparé à Windows pour un affichage d'un bitmap dans une fenêtre en 1024x768. C'est à dire pas grand chose. Avec BGRABitmap et ton exemple je peux compter les minutes. Donc serait ce dût à l'utilisation de KDE ? j'en doute

Je vais faire d'autre test avec BGRABitmap je te tiens au courant.

Jérôme

[BeanzMaster]

Me revoilà, le coupable c'est le TImage. En le remplaçant par un simple TPanel c'est tout bon la vitesse est identique à Windows

Voici les changements que j'ai effectué :

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
type
 
  { TMainForm }
 
  TMainForm = class(TForm)
    btnGo: TButton;
    cbOpacity: TCheckBox;
    imgFrom: TImage;
    imgTo: TImage;
    lblSpeed: TLabel;
    imgResult: TPanel; // Remplacement du TImage
    tbarSpeed: TTrackBar;
    procedure btnGoClick(Sender: TObject);
    procedure cbOpacityChange(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FormDestroy(Sender: TObject);
    procedure imgResultPaint(Sender: TObject);
    procedure tbarSpeedChange(Sender: TObject);
  private
    fBGRAFrom, fBGRATo: TBGRABitmap;
    LBGRATemp: TBGRABitmap; // Ajout du tampon pour l'animation
    fSpeed: Byte;
    fStep: Byte;
    fWithOpacity: Boolean;
    procedure SetSpeed(AValue: Byte);
    procedure SetWithOpacity(AValue: Boolean);
  public
    function Opacity(Up: Boolean = True): Byte;
    property Speed: Byte read fSpeed write SetSpeed default C_DefaultSpeed;
    property WithOpacity: Boolean read fWithOpacity write SetWithOpacity;
  end;    
 
procedure TMainForm.btnGoClick(Sender: TObject);
// *** dessin ***
var
 
  LY, LX: Integer;
begin
  btnGo.Enabled := False;
 
  try
    LX := 0;
    LY := 0;
    fStep := 0;
    repeat
      Inc(fStep);
      LBGRATemp.FillRect(ClientRect, BGRABlack);
      LBGRATemp.PutImage(0, 0, fBGRAFrom, dmSet, Opacity(False));
      // traitement ici...
     // LY := - imgResult.ClientHeight + imgResult.ClientHeight * fStep div 100; // OVERDOWN
      LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
      imgResult.Repaint;
      Application.ProcessMessages; // Envoi du message pour redessiner le TPanel imgResult
      sleep(100 - fSpeed);
    until fStep = 100;
  finally
   //
    btnGo.Enabled := True;
  end;
end;
 
procedure TMainForm.FormCreate(Sender: TObject);
// *** construction des objets de travail ***
begin
  Caption := rsTestName;
  fBGRAFrom := TBGRABitmap.Create(imgFrom.Picture.Bitmap);
  BGRAReplace(fBGRAFrom, fBGRAFrom.Resample(imgResult.ClientWidth, imgResult.ClientHeight));
  fBGRATo := TBGRABitmap.Create(imgTo.Picture.Bitmap);
  BGRAReplace(fBGRATo, fBGRATo.Resample(imgResult.ClientWidth, imgResult.ClientHeight));
  fSpeed := C_DefaultSpeed;
  tbarSpeed.Position:= Speed;
  LBGRATemp := TBGRABitmap.Create(imgResult.ClientWidth, imgResult.ClientHeight, BGRABlack); // Creation du tampon
end;
 
procedure TMainForm.FormDestroy(Sender: TObject);
// *** destruction des objets de travail ***
begin
  fBGRAFrom.Free;
  fBGRATo.Free;
  LBGRATemp.Free; // Liberation du tampon
end;
 
procedure TMainForm.imgResultPaint(Sender: TObject);
begin
    LBGRATemp.Draw(imgResult.Canvas, 0, 0); // Transfert du tampon à la surface d'affichage
end;

[BeanzMaster]

Le mieux serait de passer par un timer, et plus besoin du OnPaint du TPanel

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
type
 
  { TMainForm }
 
  TMainForm = class(TForm)
    btnGo: TButton;
    cbOpacity: TCheckBox;
    imgFrom: TImage;
    imgTo: TImage;
    lblSpeed: TLabel;
    imgResult: TPanel;
    tbarSpeed: TTrackBar;
    Timer1: TTimer;
    procedure btnGoClick(Sender: TObject);
    procedure cbOpacityChange(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    procedure FormDestroy(Sender: TObject);
    procedure tbarSpeedChange(Sender: TObject);
    procedure Timer1StartTimer(Sender: TObject);
    procedure Timer1StopTimer(Sender: TObject);
    procedure Timer1Timer(Sender: TObject);
  private
    fBGRAFrom, fBGRATo: TBGRABitmap;
    LBGRATemp: TBGRABitmap;
    LY, LX: Integer;
    fSpeed: Byte;
    fStep: Byte;
    fWithOpacity: Boolean;
    procedure SetSpeed(AValue: Byte);
    procedure SetWithOpacity(AValue: Boolean);
  public
    function Opacity(Up: Boolean = True): Byte;
    property Speed: Byte read fSpeed write SetSpeed default C_DefaultSpeed;
    property WithOpacity: Boolean read fWithOpacity write SetWithOpacity;
  end;

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
procedure TMainForm.btnGoClick(Sender: TObject);
// *** dessin ***
begin
  Timer1.Interval:= (101-Speed); // 101 car l'interval ne doit pas être à zero
  Timer1.Enabled:= true; 
end;
 
procedure TMainForm.Timer1StartTimer(Sender: TObject);
begin
  LX := 0;
  LY := 0;
  fStep := 0;
  btnGo.Enabled := False;
end;
 
procedure TMainForm.Timer1StopTimer(Sender: TObject);
begin
  btnGo.Enabled := True;
end;
 
procedure TMainForm.Timer1Timer(Sender: TObject);
begin
  Inc(fStep);
  LBGRATemp.FillRect(ClientRect, BGRABlack);
  LBGRATemp.PutImage(0, 0, fBGRAFrom, dmSet, Opacity(False));
   // traitement ici...
   LY := - imgResult.ClientHeight + imgResult.ClientHeight * fStep div 100; // OVERDOWN
  LBGRATemp.PutImage(LX, LY, fBGRATo, dmDrawWithTransparency, Opacity);
  LBGRATemp.Draw(imgResult.Canvas, 0, 0);
  if fstep = 100 then Timer1.Enabled:=false;
end;

EDIT : Petite video de demonstration

[gvasseur58]

Bravo

J'aurais dû m'en douter, car ce TImage est une source continuelle de problèmes. Heureusement, le composant lui-même est un descendant de TGraphicControl fonctionnant avec un TTimer, d'où la fluidité des transitions, même sous un Linux en VM. Le composant final n'a aucun besoin d'un composant TImage pour s'afficher, ce qui est une bonne nouvelle (dans un premier temps, il a même été descendant de TPaintBox, un composant beaucoup plus léger - d'ailleurs, il faudrait voir s'il ne convient pas lui aussi, le TPanel étant à mon goût trop généraliste et pas spécialement prévu pour afficher des images).

En revanche, je ne vais pas adopter dans les exemples le TTimer (qui est bien sûr la solution choisie pour le composant), car je souhaite que le lecteur se concentre sur les transitions et non sur leur déroulement. En particulier, afin d'éviter des chevauchements et des problèmes de synchronisation (particulièrement sensibles avec Windows cette fois-ci), il faut travailler avec des états, ce que je présenterai bien plus tard... Le code que tu présentes a en effet un défaut : si tu as pensé à éviter une valeur nulle pour le déclenchement de l'événement OnTimer, il reste un problème en suspens pour les vitesses rapides : que se passe-t-il si l'intervalle du timer est très proche, voire supérieur au temps de réalisation de la transition ? Il faut penser aux rotations plutôt chronophages, par exemple. De plus, l'intervalle du TTimer est imprécis et l'expérience montre qu'en dessous de 10ms, l'utilisateur rencontre (souvent) des problèmes de synchronisation.

Je vais cependant, grâce à toi, ajouter une note dans le tutoriel et te citer comme collaborateur.

Ce qui m'ennuie le plus, c'est que je suis devant un cruel dilemme : simplement signaler la modification ou revoir les 4 tutoriels qui sont déjà rédigés avec leurs 40 exemples .

Bonne journée,

Gilles

[Jipété]

Dans le chapitre II-B du tuto [EDIT : et dans celui de Johann aussi /EDIT], il faudrait rajouter une ligne :

Nous avons seulement à demander sa compilation en cliquant sur l'icône marquée « Compiler ». En quelques secondes, le tour est joué !

Désormais, si nous désirons utiliser cette bibliothèque, nous procéderons comme indiqué ci-après

.

avec la limitation de l'impossibilité d'utiliser le pas-à-pas pour débugger un truc tordu

Protocole de test : deux boutons dans le même projet.
Un bouton qui appelle la boîte de dialogue OpenFile et si réussite, appelle image := TBGRAAnimatedGif.Create(od.FileName);.
Le point d'arrêt est sur cette ligne et le mode "pas-à-pas approfondi" n'ouvre pas BRGAAnimatedGif.pas, même en rajoutant des points d'arrêt sur les procédures Create.
Un autre bouton de contrôle se contente de faire ShowMessage('bidon'); et le mode "pas-à-pas approfondi" sur cette ligne ouvre bien messagedialogs.inc.

@Jipété
C'est écrit par quelqu'un qui travaille sous Windows.

La typographie se joue de ces querelles de clochers,

Par contre, je n'ai pas trouvé une seule occurrence du mot TBGRAVirtualScreen dans les deux tutos, composant utilisé dans testgif/project2, qui m'a fait misérer ce matin, et je ne sais donc toujours pas ce que c'est que ce truc.
C'est ce manque de doc qui m'a fait abandonner cette suite (plus le fait que j'utilise très peu le graphisme, malgré les impressions), déjà installée il y a pas mal d'années (version 7.2).