[VCL] Comment faire une barre d'outils skinable comme FireFox ?

**DarkChamallo** · 07/11/2004, 20h31

Salut,

voilà des heures que je cherche en vain...

Comment faire pour avoir dans une appli une barre d'outil comme internet explorer ou mozilla firefox ? Chez eux TOUTES les icones affichées sur les boutons (avec différents états : survolé, désactivé, etc...) sont contenues DANS UN SEUL fichier PNG ou BMP !!!

Comment faire pour qu'au lancement de l'appli tous les boutons de la barre d'outil affichent leurs icone correspondantes contenues dans un seul bitmap ?

Si je n'ai pas été clair, peut-être en regardant ce fichier PNG ce sera plus clair, c'est pas tout à fait un fichier exemplaire mais ça y ressemble :

bref, tout est là dans ce fichier par exemple... alors comment l'exploiter pour l'appli vienne se servir afin d'attribuer à ses boutons de toolbar chaque image correspondante ?

MERCI boooooocouuuuuu par avance paske là je peu plu

Merci

Titre modifié.
Merci de lire les règles du forum.

**tixu** · 07/11/2004, 20h40

il me semble que dans le composant tToolbar (par exemple) on peut choisir plusieur imagelist correspondant a different etats du bouton (survol, disabled etc...)

le fait que les images soient stocké dans une seuls image ne signifie pas qu'on en puisse pas decouper l'image en plusieurs image liste.

dans ton images, il y a 5 bandes, tu peux donc creer tres facilement 5 imagelist simplement en copiant les portions d'images correspondants, à la volée, à l'ouverture du programme.

voici une routine que j'utilise dans un de mes applis

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
procedure assign_icon(list_i:timagelist;filename:string);
var bitfile,bittmp,bittmp2:tbitmap;
    i:integer;
    MyRect,MyOther:TRect;
begin
   bitfile:=tbitmap.create;
   bittmp:=tbitmap.create;
   bittmp2:=tbitmap.create;
 
       bitfile.loadfromfile(filename);
       bittmp.Width:=list_i.width; bittmp.height:=list_i.height;
       bittmp2.Width:=list_i.width; bittmp2.height:=list_i.height;
       for i:= 0 to (bitfile.width div list_i.width) do
       begin
          MyRect :=Rect(i*list_i.width,0,i*list_i.width+list_i.width,list_i.height);
          MyOther :=Rect(0,0,list_i.width,list_i.height);
          bittmp.Canvas.CopyRect(MyOther,Bitfile.Canvas,MyRect);
          bittmp2.canvas.draw(0,0,bittmp);
          Bittmp2.Monochrome :=true;
          list_i.add(bittmp,bittmp2);
       end;
   bitfile.free;
   bittmp.Free;
   bittmp2.Free;
 
end;

**DarkChamallo** · 07/11/2004, 20h52

super la réponse rapide

c'est une astuce dont je n'ai trouvé aucune trace sur le web et je vais tester alors ça

: est-ce comme cela qu'est géré les toolbar de mozilla et compagnie ?

Merci beaucoup en tout cas

8)

**DarkChamallo** · 07/11/2004, 23h22

Génial, après adaptation ça marche du tonnerre !! Avec un Bitmap : tous les boutons + leurs différents états !

8)

Mais...

: J'ai beau triturer dans tous les sens avec ce que j'ai trouvé dans l'aide... je ne parviens pas à rendre transparentes les images sur les boutons de la toolbar... alors que sur un speedbutton c'est géré automatiquement...

Comment faire ? Une idée

:

Merci encore

**Mac LAK** · 07/11/2004, 23h34

Envoyé par DarkChamallo

c'est une astuce dont je n'ai trouvé aucune trace sur le web et je vais tester alors ça

C'est un truc de démomaker, à l'origine. Le coup de "découper" une image à la volée pour en extraire des bitmaps "élémentaires" est plutôt ancienne : milieu des années 80...
A l'époque, on s'en servait notamment sur les machines 16 bits, dans les démos, pour stocker des fontes, le bitmap contenant toutes les lettres de l'alphabet à une position connue, avec une taille connue.

Envoyé par DarkChamallo

est-ce comme cela qu'est géré les toolbar de mozilla et compagnie ?

En gros, oui.
T'as deux écoles pour ce genre de truc :
- Soit une image monolithique, avec des emplacements prédéterminés, qui est découpée à la volée à l'initialisation. Inconvénient : la taille des éléments du skin est figée, on ne peut pas (facilement) faire évoluer la "planche" de bitmaps.
- Soit plusieurs fichiers image élémentaires, regroupés ou pas dans une archive plus ou moins propriétaire (parfois, un simple .ZIP renommé), et dans ce cas le programme utilise ce qu'il trouve dans l'archive, en s'adaptant à la taille si besoin est. S'il ne trouve rien, il utilise son bitmap par défaut.
La seconde solution est plus souple, mais demande plus de code et plus de rigueur pour fonctionner.

Envoyé par DarkChamallo

je ne parviens pas à rendre transparentes les images sur les boutons de la toolbar... alors que sur un speedbutton c'est géré automatiquement...

Il faut utiliser des masques pour ça.
Insère tes bitmaps dans le TImageList avec la fonction AddMasked, en spécifiant la couleur du fond dans un TColor. La couleur du fond, tu l'obtiens bêtement soit avec un pixel "connu" (genre "le pixel en haut à gauche est toujours de la couleur du fond"), ou en le calculant "en dur" à partir de ton éditeur d'images préféré et stockant la valeur dans un TColor.

**tixu** · 07/11/2004, 23h56

Pour le mask c'est à ca que cette portion de code sert:

Code :

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

1
2
3
4
 
bittmp2.canvas.draw(0,0,bittmp); 
Bittmp2.Monochrome :=true; 
list_i.add(bittmp,bittmp2);

Mes images sont sur fond blanc( que je definis comme étant la couleur transparente, puis je copie le bitmap avec l'image couleur dans une second bitmap que je transforme en monochrome (N&B).

cette image passée en 2eme parametre du tlistimage.add fait office de masque. Il faut aussi que la propriete "masked" du tlistimage soit à true.

C'est un truc de démomaker, à l'origine. Le coup de "découper" une image à la volée pour en extraire des bitmaps "élémentaires" est plutôt ancienne : milieu des années 80...
A l'époque, on s'en servait notamment sur les machines 16 bits, dans les démos, pour stocker des fontes, le bitmap contenant toutes les lettres de l'alphabet à une position connue, avec une taille connue.

je tire ca du temps ou je faisais des sprites sur amiga

on change pas une methode qui gagne

**Mac LAK** · 08/11/2004, 00h23

Envoyé par tixu

Pour le mask c'est à ca que cette portion de code sert:
<....>

Vi vi vi, mais comme ça semblait ne pas marcher pour DarkChamallo, j'ai pensé à ce truc du MaskColor... Perso, c'est celui que j'utilise, c'est plus simple pour mes besoins (ressources pour composants en général).

[NOSTALGIE]

Envoyé par tixu

je tire ca du temps ou je faisais des sprites sur amiga

on change pas une methode qui gagne

Sprites, fontes bitmap, même combat... Moi c'était plus les fontes ou les tiles... Ah là là, ma bonne dame, c'était l'bon temps !!

[/NOSTALGIE]

**DarkChamallo** · 08/11/2004, 17h34

Excellent, j'utilise finalement addmasked et je donne directement une couleur tel que clNavy pour le Tcolor et ça fonctionne !

Par contre, si mon image de départ est un PNG, j'ai une erreur qui s'affiche... il faut que ce soit absolument du BMP. Est-ce que je perd en qualité ?

MERCii BOCOU en tout cas à tous les deux !

**tixu** · 08/11/2004, 17h43

Envoyé par DarkChamallo

Par contre, si mon image de départ est un PNG, j'ai une erreur qui s'affiche... il faut que ce soit absolument du BMP. Est-ce que je perd en qualité ?

Aucune perte. Les png ou bmp ne sont pas des formats qui degradent l'image, le resutat est donc équivalent.
l'avantage du png est qu'il sait gerer sa propre couche alpha.

si tu veux pourvoir charger du png tu peux passer par la librairie GraphicEx

http://www.soft-gems.net/Graphics.php

**DarkChamallo** · 08/11/2004, 17h51

Alors c'est parfait, encore ET ENCORE un grRRAND : merci

**Mac LAK** · 08/11/2004, 20h05

Pas de quoi, si on ne voulait pas aider, on n'aurait pas posté ! :-D
Effectivement, ton seul problème avec les images au format PNG est que ce format n'est pas supporté en natif par Delphi, mais comme le dit Tixu, c'est pas ce qui manque sur le net... :-D

Attention cependant : je crois (à vérifier) qu'il y a une compression 24 bits en PNG qui est en fait une resucée de JPEG => dégradation d'image assurée.
Par contre, il est certain qu'en 256 couleurs tu auras une paix royale.

PS : Pense à p'tit tag "Résolu", ça f'ra plaisir à tout le monde ! ;-)

Sinon, Tixu et moi on se met à parler de nos jeunes années sur machines 8 et 16 bits et des trucs et astuces à Tonton Marcel utilisés à l'époque...

**DarkChamallo** · 18/01/2005, 22h56

Bon, j'ai mis "résolu", j'avais oublié...
Mais en fait je reviens sur ce post car je me rend compte que Firefox gère les PNG avec une sorte de antialiasing dirait-on ?

Si on regarde les images PNG de ses toolbar (exemple : cute) elles ont des grossiers effets d'escaliers alors que lorsque c'est affiché tout est lissé, antialisingué, bref nickel... J'aimerai comprendre comment faire.

Peut-être est-ce dans un fichier ini de l'archive des thèmes qu'une indication est donnée à firefox de lisser les icones ? Ou est-ce la façon d'appliquer le masque ? Je ne sais point

:

Merci en tout cas...

**Mac LAK** · 18/01/2005, 23h50

Si c'est juste un antialias que tu veux, c'est pas les algos qui manquent sur le net... Après, faut voir aussi comment tu le fais (et pourquoi !).

Déjà, si tu "zoome" tes boutons (x2 par exemple) pour faire de gros boutons, l'AA est facile à appliquer à cette étape. Je dirais même qu'il vaut mieux le faire si tu ne veux pas avoir un résultat dégueu ! ;-)

Sinon, tu dois faire un masque du bitmap, et tu n'effectue l'AA que sur le contour. Ca revient à l'appliquer sur tout pixel non-masqué ayant un pixel masqué dans son 4-voisinage (Haut/Bas/Gauche/Droite), et à ne pas en faire si son 4-voisinage n'est composé que de pixels non-masqués.

Pourquoi 4-voisinage et pas 8-voisinage ? Parcequ'avec 4, c'est plus simple à calculer et que le bord subissant l'AA est moins "large", donc le bitmap est aussi moins "flou" sur ses bords, tout simplement.

Sinon, je pense que le lissage de Firefox doit certainement être automatique, surtout si les bitmaps affichés ne sont pas à l'échelle 1:1 mais 2:1 par exemple.

Est-ce plus clair pour toi ?

**DarkChamallo** · 19/01/2005, 17h42

heu...

bin oué ça doit être la réponse mais ja rien compri

Je crois qu'effectivement d'une image il faut faire son masque et que le contour de ce masque doit être AA avant d'être appliqué à l'image... ?

Bon, je vais essayer de trouver un tuto là dessus, ça m'aidera à y voir plus clair...

car le fait d'avoir des boutons sans effet d'escalier ça serait cool. Par exemple le logiciel Nero ne le fait pas pour ses boutons et c'est très moche !

A suivre... Merci

**Mac LAK** · 19/01/2005, 19h52

Envoyé par DarkChamallo

bin oué ça doit être la réponse mais ja rien compri

Où as-tu décroché exactement ? Moi, je veux bien te détailler la procédure, mais vu que ça peut prendre aussi bien 10 lignes que 10 pages, il me faut savoir QUOI détailler...

Envoyé par DarkChamallo

Je crois qu'effectivement d'une image il faut faire son masque et que le contour de ce masque doit être AA avant d'être appliqué à l'image... ?

Normalement, le masque, tu l'as déjà. On prend souvent soit une couleur arbitraire non-utilisée (en général une moche, comme clFuschia), soit la couleur du premier pixel en haut à gauche.
Ensuite, c'est pas le contour qui subit l'AA (ça ne sert à rien, ces pixels ne sont justement pas affichés !! ;-)), c'est les pixels voisins du contour, ce qui est tout à fait différent.

Envoyé par DarkChamallo

Bon, je vais essayer de trouver un tuto là dessus, ça m'aidera à y voir plus clair...

Bon courage, un tuto sur ce genre de trucs, je ne suis même pas sûr que ça existe. Je sais comment faire parceque j'ai une formation d'imagerie et que c'est une solution "logique", mais pour chopper un tuto...

Envoyé par DarkChamallo

car le fait d'avoir des boutons sans effet d'escalier ça serait cool. Par exemple le logiciel Nero ne le fait pas pour ses boutons et c'est très moche !

Boaf, je ne trouve pas... Faut dire aussi qu'en 1280x1024, c'est pas franchement flagrant non plus.
De toutes façons, tu n'as que deux solutions :
- Faire un AA sur le bitmap lors du dessin, mais ça oblige à connaître la couleur de fond de la barre d'outils (et si elle a changé, c'est immonde comme résultat).
- Faire un AA "dynamique" à l'affichage, en proposant quand même à l'utilisateur le choix de l'appliquer ou pas (certains n'aiment pas cet effet "flou").

J'attends tes questions si tu en as.

**DarkChamallo** · 19/01/2005, 21h20

Super sympas de ta part, je suis tombé sur la bonne personne on dirait

Alors en fait (avec mes mots) voilà ce que je voudrais réussir :

- créer un bouton au format PNG (ça c'est bon) avec un bord grossier, comme celui de Qute pour Firefox ci-dessous

- l'intégrer dans un ImageList sous delphi (ça ça va aussi)

- intégrer aussi le masque (j'ai vu sur le web une procédure qui prend en fait le bitmap qu'on utilise, le convertissant en monochrome : cela donne le masque) mais c'est pas clair pour moi à 100% cette partie là

- faire qu'au moment de l'affichage sur un Speedbutton le bitmap et son masque fusionnent de telle sorte que le bord jadis grossier de l'image soit alors antialiasingué en fonction de la couleur d'arrière plan de la Form (clair sur XP, gris sous W98, etc...)

Ci-dessous l'exemple de Qute pour Firefox : de gauche à droite on a : l'image d'origine (PNG), l'image finale (BMP sur SpeedButton)

Le masque j'imagine que c'est la partie noire qu'il faut étendre d'1 pixel et sur laquelle il faut faire un bord progressif, nan ? Et là je ne sais pas comment...

Voilà, je suis touché de ton attention, je ne sais pas si j'ai été clair, merci d'avance

NB : je n'aurai pas besoin de zoomer, je ne voudrais utiliser les images qu'à taille réelle

**lil_jam63** · 19/01/2005, 21h44

Fais un antialiasing sur ton bitmap masque avant de le fusionner avec l'image normale, voilà une procedure qui te serviras

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
 
procedure Antialiasing(Image: TImage; Percent: Integer);
type
  TRGBTripleArray = array[0..32767] of TRGBTriple;
  PRGBTripleArray = ^TRGBTripleArray;
var
  SL, SL2: PRGBTripleArray;
  l, m, p: Integer;
  R, G, B: TColor;
  R1, R2, G1, G2, B1, B2: Byte;
begin
  with Image.Canvas do
  begin
    Brush.Style  := bsClear;
    Pixels[1, 1] := Pixels[1, 1];
    for l := 0 to Image.Height - 1 do
    begin
      SL := Image.Picture.Bitmap.ScanLine[l];
      for p := 1 to Image.Width - 1 do
      begin
        R1 := SL[p].rgbtRed;
        G1 := SL[p].rgbtGreen;
        B1 := SL[p].rgbtBlue;
 
        // Left
        if (p < 1) then m := Image.Width
        else
          m := p - 1;
        R2 := SL[m].rgbtRed;
        G2 := SL[m].rgbtGreen;
        B2 := SL[m].rgbtBlue;
        if (R1 <> R2) or (G1 <> G2) or (B1 <> B2) then
        begin
          R := Round(R1 + (R2 - R1) * 50 / (Percent + 50));
          G := Round(G1 + (G2 - G1) * 50 / (Percent + 50));
          B := Round(B1 + (B2 - B1) * 50 / (Percent + 50));
          SL[m].rgbtRed := R;
          SL[m].rgbtGreen := G;
          SL[m].rgbtBlue := B;
        end;
 
        //Right
        if (p > Image.Width - 2) then m := 0
        else
          m := p + 1;
        R2 := SL[m].rgbtRed;
        G2 := SL[m].rgbtGreen;
        B2 := SL[m].rgbtBlue;
        if (R1 <> R2) or (G1 <> G2) or (B1 <> B2) then
        begin
          R := Round(R1 + (R2 - R1) * 50 / (Percent + 50));
          G := Round(G1 + (G2 - G1) * 50 / (Percent + 50));
          B := Round(B1 + (B2 - B1) * 50 / (Percent + 50));
          SL[m].rgbtRed := R;
          SL[m].rgbtGreen := G;
          SL[m].rgbtBlue := B;
        end;
 
        if (l < 1) then m := Image.Height - 1
        else
          m := l - 1;
        //Over
        SL2 := Image.Picture.Bitmap.ScanLine[m];
        R2  := SL2[p].rgbtRed;
        G2  := SL2[p].rgbtGreen;
        B2  := SL2[p].rgbtBlue;
        if (R1 <> R2) or (G1 <> G2) or (B1 <> B2) then
        begin
          R := Round(R1 + (R2 - R1) * 50 / (Percent + 50));
          G := Round(G1 + (G2 - G1) * 50 / (Percent + 50));
          B := Round(B1 + (B2 - B1) * 50 / (Percent + 50));
          SL2[p].rgbtRed := R;
          SL2[p].rgbtGreen := G;
          SL2[p].rgbtBlue := B;
        end;
 
        if (l > Image.Height - 2) then m := 0
        else
          m := l + 1;
        //Under
        SL2 := Image.Picture.Bitmap.ScanLine[m];
        R2  := SL2[p].rgbtRed;
        G2  := SL2[p].rgbtGreen;
        B2  := SL2[p].rgbtBlue;
        if (R1 <> R2) or (G1 <> G2) or (B1 <> B2) then
        begin
          R := Round(R1 + (R2 - R1) * 50 / (Percent + 50));
          G := Round(G1 + (G2 - G1) * 50 / (Percent + 50));
          B := Round(B1 + (B2 - B1) * 50 / (Percent + 50));
          SL2[p].rgbtRed := R;
          SL2[p].rgbtGreen := G;
          SL2[p].rgbtBlue := B;
        end;
      end;
    end;
  end;
end;

tu lui passe en paramètre le TImage qui contient ton masque et le taux comme ceçi

Code :

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

1
2
 
Antialiasing(Image1, 80);

biensur, j'imagine que ton masque se trouve déja dans un TBitmap, auquel cas il te faudra légèrement modifier cette procedure pour prendre un TBitmap en paramètre à la place du TImage

**DarkChamallo** · 20/01/2005, 09h48

Cool

Hé bien j'essaie ça dès aujourd'hui si j'ai le temps !

...

Ca y est j'ai essayé...

j'ai une erreur qui me dit "Indice ligne hors limites" apparemment sur

Code :

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

"Antialiasing(Image1, 80);"

En fait j'ai tout simplement mis un composant image sur une Form, j'y ai mis avec Picture une image bmp, j'ai ajouté la procédure comme il faut et je l'ai appelé sur un click de Button, histoire de tester l'astuce..

:

**DarkChamallo** · 20/01/2005, 11h03

je viens de voir d'autres posts mais les systèmes antialias que j'ai trouvé sont compliqués, je cherche juste à avoir le même résultat que ça :

...mais que pour le contour, pas pour l'intérieur de l'image, sinon évidemment elle devient floue ! Et je n'utilise pas de redimensionnement et tout le tralala...

Et bien bref je n'ai pas trouvé de solution pour appliquer un tout ptit anticrénelage de rien du tout sur le bord d'une image

**Mac LAK** · 20/01/2005, 19h22

OK. La méthode dont je te parle dans ce post fait ce que tu attends : un AA uniquement sur le contour.

Un AA est toujours un peu compliqué de toutes façons, mais dans un cas comme le tien, on peut quand même un peu "simplifier" le truc.

Comme je te l'ai dit, je veux bien détailler, dis-moi simplement ce que tu ne comprends pas dans ce que j'ai dit, OK ?

[VCL] Comment faire une barre d'outils skinable comme FireFox ?

Composants VCL Delphi

Discussions similaires

Partager

Partager