BGRA Controls

[lainz]

@Lainz,@circular, i just want to write to thank you for the time, effort and a lot of knowledge you put into FPC. And give us new tools to developers.

Many others thanks.

Thankyou!

[lainz]

Hi, I'm updating to BGRA-Controls 4.1:
https://github.com/bgrabitmap/bgracontrols/releases

- TBCDPanel: a panel that is not from custom drawn package, but is styled to match our BGRA drawer (dark theme).
- Updated some icons of the package, added missing icons.
- Added default size for all controls that had that stuff missing.
- Added more properties and updated visibility of FBGRA* images in TBCXButton.
- Removed old readme, updated README.md

These are small changes but now is easy to mantain a list of the controls we have thanks to the new readme file:
https://github.com/bgrabitmap/bgracontrols#bgra-controls

The missing icons was a suggestion from circular, that he read on a review.

You can see a review of BGRA-Controls made by third party here:
http://lazarus.developpez.com/actu/103444/Sortie-de-BGRA-Controls-v4-0-une-bibliotheque-de-composants-graphiques-pour-Free-Pascal-Lazarus/

Suggestions and new controls are welcome 

[lainz]

New release BGRA-Controls 4.2:
https://github.com/bgrabitmap/bgracontrols/releases

TBCNumericKeyboard

A panel with numeric buttons to store the input in a string. Then you can use the events to edit it to fit your needs and assign to other controls that value.

TBCRealNumericKeyboard

A panel with numeric buttons to do the real input of the keys on keyboard. What you type is sent to the focused control directly.

TBCDefaultThemeManager

A component to style all the selected buttons in a form with the need to style only a single button. Can be used entirely with code.

[circular]

Theme manager that's great. That will allow easily to have the same style for one form.

[lainz]

Theme manager that's great. That will allow easily to have the same style for one form.

And you can call Apply() for the current form and Apply(AControl: TWinControl) to apply for example in another form or panel. By default it does not iterate through panels in the form, so it will be applied exactly to these controls you want.

[lainz]

Hi, I've added some stuff to BGRA-Controls on Git, like the Material Design colors and an unit contributed by the user esvignolo, that can set automatically the color of the font based on the background (used currently in themes for windows 8 and material design), and a bright function.

You can access the colors adding MaterialColors in uses, and doing something like this:

Code: Pascal  [Select][+][-]

1. MaterialColorsList.KeyData['Red'].M500

to access from a string (so you can use text-based color configuration settings in your application easily)

or

Code: Pascal  [Select][+][-]

1. MaterialRed.M500

to access a color directly.

Each color has 14 shades 50, 100, ... 900, A100, A200, A400 and A700 (taken every single color from the Material Design website).

Because I can't just use the numer I've prefixed them with 'M', so 50 is M50, the 'A' prefixed ones are the same.

If you want to use set-based configuration, all the material design colors was added to the BCSamples unit, together with the Windows 8 colors and other default themes, that are available in the default theme manager.

[lainz]

Hi people fans of BGRABitmap 

Here is BGRA Controls v4.3:
https://github.com/bgrabitmap/bgracontrols/releases/tag/v4.3

* Fix in bcnumerickeyboard
* Added bckeyboard
* Fix in bcimagebutton
* Separated scripting units into a new package
* Added material colors unit
* Updated bcsamples unit
* Removed unnecessary BGRAToColor and ColorToBGRA in all files
* Revised hints (now you get a more clean compile of the package)
* Improved bcmaterialdesignbutton: now it's faster and has AutoSize

Notice that you need at least BGRABitmap 9.2.1 to run this version of BGRA Controls.

The keyboard is a work in progress, but we have a touch keyboard now!

[circular]

I did not realise it was possible to pass parameters with an implicit custom ":=" overload. That's quite convenient

[lainz]

Yes is really good, the one places were I can't replace is where is used as ColorToBGRA(ColorToRGB(SomeColor), SomeAlpha), else I need to create new variables and do SomeBGRAPixel.FromColor(SomeColor, SomeAlpha). I don't know maybe I change these later.

PD: Here is a screenshot of the keyboard.

[circular]

Cool! That's especially useful with a tactile screen like on a smartphone.

[lainz]

I'm learning Java and I found that it contains something called JavaFX where you can make complex UI with CSS, for example things like Material Design can be implemented with no effort and hardware accelerated.

We're far from that but someone can think on a way to make it. Of course if it's hardware accelerated we need to create controls for OpenGL not lazarus LCL controls, and the CSS well, a pain. In fact that BGRABitmap uses CPU it will be only displayed fast but rendered as any other controls.

Then the editor must be done too, we can't use the Lazarus designer.

[circular]

About doing OpenGL controls, maybe we could do it within Lazarus designer. We could have some OpenGL container, and then put controls in them. Those controls would need to be able to display their content with regular Canvas during design time and to use OpenGL at runtime. Maybe not so obvious to do, but with a hybrid canvas that could draw either on LCL Canvas or on OpenGL, that would be kind of possible.

[lainz]

Great idea, that's the way TCustomOpenGLControl works. Just see this line:

Code: Pascal  [Select][+][-]

1. FCanvas: TCanvas; // only valid at designtime

So we can use that canvas in designtime. WMPaint event for normal Canvas (if csDesigning in ComponentState) and DoOnPaint for OpenGL.

I'm not familiar with contexts, we need a single context for all controls or separate contexts?

Code: Pascal  [Select][+][-]

1.   { TCustomOpenGLControl }
2.   { Sharing:
3.     You can share opengl contexts. For example:
4.     Assume OpenGLControl2 and OpenGLControl3 should share the same as
5.     OpenGLControl1. Then set
6.    
7.         OpenGLControl2.SharedControl:=OpenGLControl1;
8.         OpenGLControl3.SharedControl:=OpenGLControl1;
9.  
10.      After this OpenGLControl1.SharingControlCount will be two and
11.      OpenGLControl1.SharingControls will contain OpenGLControl2 and
12.      OpenGLControl3.
13.     }

In the case we need a single context, we can add a property like 'Container: TCustomOpenGLControl' and set it at design time.

[circular]

Yes we need a single context, so that we can draw things over other things using OpenGL. I guess we can design the controls to be within the container so that there is no need to define a property. Like you would do with a panel, except the panel is the OpenGL container.

[lainz]

Got it. I will try to do something. If works you will know 

Edit: I have a main problem and is that the FCanvas is a private declaration, so we can't access it. So the control draws perfect at runtime but in design is just a rectangle with a red cross.