Sign in Join
Wiki copytemporary

BGRAControls: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: BGRAControls

OldNewLine
1+<figure>
2+<img src="bgracontrols.png" title="bgracontrols.png" />
3+<figcaption>bgracontrols.png</figcaption>
4+</figure>
5+
6+## Install
7+
8+Use the [[Online Package Manager]] to get BGRABitmap and BGRAControls.
9+
10+Notice that you must check only the packages "bgrabitmappack.lpk" and "bgracontrols.lpk" in the Online Package Manager. The other packages are optional and may need third party packages / libraries to work (OpenGL and PascalScript).
11+
12+### Optional Components
13+
14+Since v4.4 the components TBCDefaultThemeManager, TBCKeyboard and TBCNumericKeyboard are not installed by default to allow Linux users to get a seamless installation with the Online Package Manager not installing third party stuff. If you want these components turn on the "Register unit" in the package options for each file (bcdefaulthememanager.pas, bckeyboard.pas, bcnumerickeyboard.pas) then compile and rebuild Lazarus. On Linux you need to install libxtst-dev and libgl-dev first.
15+
16+### Website
17+
18+BGRABitmap Organization on GitHub: <https://github.com/bgrabitmap/>
19+
20+## BGRA Controls
21+
22+BGRA Controls is a set of graphical UI elements that you can use with Lazarus LCL applications. Under Linux you need to have installed libxtst-dev and libgl-dev.
23+
24+### TBCButton
25+
26+<figure>
27+<img src="bcbutton.png" title="bcbutton.png" />
28+<figcaption>bcbutton.png</figcaption>
29+</figure>
30+
31+A button control that can be styled through properties for each state like StateClicked, StateHover, StateNormal with settings like gradients, border and text with shadows. You can assign an already made style through the property AssignStyle.
32+
33+### TBCButtonFocus
34+
35+Like TBCButton but it supports focus like normal TButton.
36+
37+### TBCGameGrid
38+
39+<figure>
40+<img src="bcgamegrid.png" title="bcgamegrid.png" />
41+<figcaption>bcgamegrid.png</figcaption>
42+</figure>
43+
44+A grid with custom width and height of items and any number of horizontal and vertical cells that can be drawn with BGRABitmap directly with the OnRenderControl event.
45+
46+### TBCImageButton
47+
48+<figure>
49+<img src="samplebgraimagebutton.png" title="samplebgraimagebutton.png" />
50+<figcaption>samplebgraimagebutton.png</figcaption>
51+</figure>
52+
53+<figure>
54+<img src="samplebgraimagebuttonalpha.png" title="samplebgraimagebuttonalpha.png" />
55+<figcaption>samplebgraimagebuttonalpha.png</figcaption>
56+</figure>
57+
58+A button control that can be styled with one image file, containing the drawing for each state Normal, Hovered, Active and Disabled. It supports 9-slice scaling feature. It supports a nice fading animation that can be turned on.
59+
60+### TBCXButton
61+
62+<figure>
63+<img src="bcxbutton.png" title="bcxbutton.png" />
64+<figcaption>bcxbutton.png</figcaption>
65+</figure>
66+
67+A button control that can be styled by code with the OnRenderControl event. Or even better create your own child control inheriting from this class.
68+
69+### TBCLabel
70+
71+<figure>
72+<img src="bclabel.png" title="bclabel.png" />
73+<figcaption>bclabel.png</figcaption>
74+</figure>
75+
76+A label control that can be styled through properties, it supports shadow, custom borders and background.
77+
78+### TBCMaterialDesignButton
79+
80+A button control that has an animation effect according to Google Material Design guidelines. It supports custom color for background and for the circle animation, also you can customize the shadow.
81+
82+### TBCPanel
83+
84+<figure>
85+<img src="bcpanel.png" title="bcpanel.png" />
86+<figcaption>bcpanel.png</figcaption>
87+</figure>
88+
89+A panel control that can be styled through properties. You can assign an already made style through the property AssignStyle.
90+
91+### TBCRadialProgressBar
92+
93+A progress bar with radial style. You can set the color and text properties as you like.
94+
95+### TBCToolBar
96+
97+A TToolBar with an event OnRedraw to paint it using BGRABitmap. It supports also the default OnPaintButton to customize the buttons drawing. By default it comes with a Windows 7 like explorer toolbar style.
98+
99+### TBCTrackBarUpdown
100+
101+A control to input numeric values with works like a trackbar and a spinedit both in one control.
102+
103+### TBGRAFlashProgressBar
104+
105+<figure>
106+<img src="BC-Bgraflashprogressbar.png" title="BC-Bgraflashprogressbar.png" />
107+<figcaption>BC-Bgraflashprogressbar.png</figcaption>
108+</figure>
109+
110+A progress bar with a default style inspired in the old Flash Player Setup for Windows progress dialog. You can change the color property to have different styles and also you can use the event OnRedraw to paint custom styles on it like text or override the entire default drawing.
111+
112+### TBGRAGraphicControl
113+
114+Is like a paintbox. You can draw with transparency with this control using the OnRedraw event.
115+
116+### TBGRAImageList
117+
118+An image list that supports alpha in all supported platforms.
119+
120+How app looks with TImageList (with transparent icons):
121+
122+<figure>
123+<img src="before-TImageList.png" title="before-TImageList.png" />
124+<figcaption>before-TImageList.png</figcaption>
125+</figure>
126+
127+How app looks with BGRAImageList:
128+
129+<figure>
130+<img src="after-TBGRAImageList.png" title="after-TBGRAImageList.png" />
131+<figcaption>after-TBGRAImageList.png</figcaption>
132+</figure>
133+
134+### TBGRASVGImageList
135+
136+It is located in the BGRA Themes tab.
137+
138+<figure>
139+<img src="bgrasvgimagelist_edit.png" title="bgrasvgimagelist_edit.png" width="450" />
140+<figcaption>bgrasvgimagelist_edit.png</figcaption>
141+</figure>
142+
143+In its properties, one can define the size and a target raster image list (TImageList or TBGRAImageList):
144+
145+<figure>
146+<img src="bgrasvgimagelist_prop.png" title="bgrasvgimagelist_prop.png" width="350" />
147+<figcaption>bgrasvgimagelist_prop.png</figcaption>
148+</figure>
149+
150+This will automatically populate the target image list (here on MacOS, it provides the double sized icons for Retina):
151+
152+<figure>
153+<img src="targetimagelist_edit.png" title="targetimagelist_edit.png" width="350" />
154+<figcaption>targetimagelist_edit.png</figcaption>
155+</figure>
156+
157+### TBGRAImageManipulation
158+
159+<figure>
160+<img src="bgraimagemanipulation.jpg" title="bgraimagemanipulation.jpg" />
161+<figcaption>bgraimagemanipulation.jpg</figcaption>
162+</figure>
163+
164+A tool to manipulate pictures, see the demo that shows all the capability that comes with it.
165+
166+### TBGRAKnob
167+
168+<figure>
169+<img src="BC-Bgraknob.png" title="BC-Bgraknob.png" />
170+<figcaption>BC-Bgraknob.png</figcaption>
171+</figure>
172+
173+A knob that can be styled through properties.
174+
175+### TBGRAResizeSpeedButton
176+
177+A speed button that can resize the glyph to fit in the entire control.
178+
179+### TBGRAShape
180+
181+<figure>
182+<img src="samplebgrashape.png" title="samplebgrashape.png" />
183+<figcaption>samplebgrashape.png</figcaption>
184+</figure>
185+
186+A control with configurable shapes like polygon and ellipse that can be filled with gradients and can have custom borders and many other visual settings.
187+
188+### TBGRASpeedButton
189+
190+<figure>
191+<img src="BGRASpeedButton.png" title="BGRASpeedButton.png" />
192+<figcaption>BGRASpeedButton.png</figcaption>
193+</figure>
194+
195+A speed button that in GTK and GTK2 provides BGRABitmap powered transparency to the glyph.
196+
197+### TBGRASpriteAnimation
198+
199+<figure>
200+<img src="bgraspriteanimation.png" title="bgraspriteanimation.png" />
201+<figcaption>bgraspriteanimation.png</figcaption>
202+</figure>
203+
204+A component that can be used as image viewer or animation viewer, supports the loading of gif files.
205+
206+### TBGRAVirtualScreen
207+
208+Is like a panel. You can draw this control using the OnRedraw event.
209+
210+### TDTAnalogClock
211+
212+A clock.
213+
214+### TDTAnalogGauge
215+
216+A gauge.
217+
218+### TDTThemedClock
219+
220+Another clock.
221+
222+### TDTThemedGauge
223+
224+Another gauge.
225+
226+### TPSImport_BGRAPascalScript
227+
228+A component to load BGRABitmap pascal script utilities.
229+
230+## BGRA Custom Drawn
231+
232+BGRA Custom Drawn is a set of controls inherited from Custom Drawn. These come with a default dark style that is like Photoshop.
233+
234+### TBCDButton
235+
236+A button control that is styled with TBGRADrawer.
237+
238+### TBCDEdit
239+
240+An edit control that is styled with TBGRADrawer.
241+
242+### TBCDStaticText
243+
244+A label control that is styled with TBGRADrawer.
245+
246+### TBCDProgressBar
247+
248+A progress bar control that is styled with TBGRADrawer.
249+
250+### TBCDSpinEdit
251+
252+A spin edit control that is styled with TBGRADrawer.
253+
254+### TBCDCheckBox
255+
256+A check box control that is styled with TBGRADrawer.
257+
258+### TBCRadioButton
259+
260+A radio button that is styled with TBGRADrawer.
261+
262+## Sample code
263+
264+BGRA Controls comes with nice demos to show how to use the stuff and extra things you can use in your own projects.
265+
266+### Pascal Script Library
267+
268+Putting BGRABitmap methods into a .dll with c#, java and pascal headers.
269+
270+### BGRA Ribbon Custom
271+
272+How to create a fully themed window using the controls to achieve a Ribbon like application.
273+
274+### Tests
275+
276+There are test for analog controls (clock and gauge), BC prefixed controls, BGRA prefixed controls, BGRA Custom Drawn controls, how to use Pascal Script and BGRABitmap, bgrascript or how to create your own scripting solution with BGRABitmap.
277+
278+### Tests Extra
279+
280+<figure>
281+<img src="game_maze.png" title="game_maze.png" />
282+<figcaption>game_maze.png</figcaption>
283+</figure>
284+
285+<figure>
286+<img src="game_puzzle.png" title="game_puzzle.png" />
287+<figcaption>game_puzzle.png</figcaption>
288+</figure>
289+
290+<figure>
291+<img src="customdrawnwindows7.png" title="customdrawnwindows7.png" />
292+<figcaption>customdrawnwindows7.png</figcaption>
293+</figure>
294+
295+<figure>
296+<img src="slicescaledtachart.png" title="slicescaledtachart.png" />
297+<figcaption>slicescaledtachart.png</figcaption>
298+</figure>
299+
300+These are extra tests like how to use fading effect, an fpGUI theme, games like maze and puzzle, how we created the material design animation, pix2svg or how to convert a small picture to svg using hexagons, rectangles and ellipses, plugins or how to load .dlls and use into a TBGRAVirtualScreen, rain effect, shadow effect, 9-slice-scaling with Custom Drawn or how to theme with bitmaps an application to look like Windows themes and 9-slice-scaling with charts.
301+
302+## Other units
303+
304+These units come with BGRA Controls and contains more functionality that is sometimes used with the controls, sometimes not but are usefull in some way. Some are listed here, others you can see linked directly with any control like bcrtti, bcstylesform, bctools and bctypes.
305+
306+### BCEffect
307+
308+Fading effect with BGRABitmap.
309+
310+### BCFilters
311+
312+A set of pixel filters to use with BGRABitmap.
313+
314+### BGRAScript
315+
316+Scripting with BGRABitmap, see test project.
317+
318+## Related Articles
319+
320+[[BGRASpriteAnimation]] - Usage of the sprite animation component.
321+
322+[[uE Controls]] - Other controls developed with BGRABitmap.
323+
324+[[BGRABitmap]] - The library used to create this controls.
325+
326+[[LazPaint]] - A paint program developed with Lazarus and BGRABitmap.
327+
328+---
329+*From the Free Pascal wiki, page "BGRAControls", as it stood on 2023-08-13 after a change by Alextpp, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).*
330+Category: BGRAControls
331+Category: Components
332+Category: Graphics

Back to history