BGRA Button Designer App

[circular]

That's right. And the dependency can be more precise. For example :
Normal -> Hover
Normal -> Clicked
Normal -> Focused1 (animation)
Hover -> Focused2 -> Focused hover

So when one defines, in the first place, Normal, it defines the basic look of the button.
Then one modify Clicked, and the button has a basic behavior. Then modify slightly
Hover to have a more advanced behavior. This automatically defines the focused animation
(between Normal and Hover). Then, it is possible to slightly modify Focused1 and Focused2 and
Focused hover if we want it to be different from Normal and Hover.

For example, we can do this by defining a "parent" and "child" class for a button style, with a constructor like "Create(AParent)"

Normal would be created like : Create(nil)
Hover, Clicked and Focused1 would be : Create(Normal)
etc.

[lainz]

I think that we can use TCDControls

I'm already trying to use it with bitmaps:

Code: [Select]

win7button := TBGRABitmapThemeUtil.Create('win7button' + ext, 6, 6, 6);
text is easy too, but see the main body:

Code: [Select]

  { The skinned background}

  if csfEnabled in AState then
  begin
    number := 0; // default
    if csfHasFocus in AState then
      number := 4; // focus - number 5 is for focus glowing animation between 4 & 5
    if csfMouseOver in AState then
      number := 1; // enter
    if csfSunken in AState then
      number := 2; // pressed
  end
  else
    number := 3; // disabled

  win7button.Draw(ADest, 0, 0, ASize.cx, ASize.cy, number);
Maybe creating an object to draw the images of the button and use it whit the drawers (maybe with TComponent) can be a nice idea..

[lainz]

I've finished the 'testbuttoneditor'. It was created using only 2 main functions 'TextShadow' (in the bgratextfx unit of bgrabitmap) and 'DrawButton' (in the bgrasamples unit of bgracontrols).

This is NOT a bgrabutton editor. But I put this in this forum because also is related with bgracontrols and a button designer.

Features:
* Text with opacity and shadow (with opacity, offset and radius).
* Button body with 2 gradients with opacity and 2 directions (horizontal and vertical), also graphic direction.
* Border with 2 colors (Out and Inner) with opacity, you can set width and border size for horizontal and vertical.
* Border style (Round, Bevel and Square).
* Save to file (PNG).

Download:
* In the bgracontrols git repository. You need bgrabitmap of course.

Attached, a screenshot of the app, and the output bitmap. 

Patches are welcome =)

[digeo]

Lainz

Is there a link to download this app as I am a bit lost with git. Maybe from sourceforge? I would like to take a look at it.

[lainz]

Lainz

Is there a link to download this app as I am a bit lost with git. Maybe from sourceforge? I would like to take a look at it.

Download bgracontrols 1.2.1.0.
https://sourceforge.net/projects/bgracontrols/files/?

The changes:
- Added testbuttoneditor
- Added 'LoadFromFile' and 'SaveToFile', 'OnRedraw' and 'OnPlaySound' in tbgraimagebutton
- Changed style in 'Math Game' in testbgracontrols

[digeo]

I made a few updates to buttons.

Changes

• Changed look some
• Added edit box to change button caption
• Added export function to save button to bmp, but for now this is for normal state only
• Added an About box

Download: http://www.digeotek.com/bgra-button-designer

[digeo]

lainz

How can i access the BGRAbitmap part of the button. i want to use this to save it to a bmp file. currently i can only save the bmp of the normal state as i can only get the ABGRA part of the button on the AfterPrepareBGRAButton event,

Code: [Select]

btnClickedAfterPrepareBGRAButton(Sender: TObject; const ABGRA: TBGRABitmap; ARect: TRect; AState: TCustomBGRAButtonState);
i know you can get the hover and clicked states BMP's by hovering and clicking on the button.

[lainz]

lainz

How can i access the BGRAbitmap part of the button. i want to use this to save it to a bmp file. currently i can only save the bmp of the normal state as i can only get the ABGRA part of the button on the AfterPrepareBGRAButton event,

Code: [Select]

btnClickedAfterPrepareBGRAButton(Sender: TObject; const ABGRA: TBGRABitmap; ARect: TRect; AState: TCustomBGRAButtonState);
i know you can get the hover and clicked states BMP's by hovering and clicking on the button.

I have no idea. I've tryed before with no exit.

[lainz]

@digeo

But if you can acces the normal state you also can acces the others in this way:

Create 4 buttons, assign to the first the normal state, in the other in the normal state the hover state, the other: in the normal state the clicked state, and the other in the normal state the normal with button.Enabled set to false.

Then call AfterPrepareBGRAButton event for each button, and you have the 4 bitmaps, all the normal state, but really are different.

Also check the lates bgracontrols git, I've updated the button editor and now it load / save the settings to human readable ini files.

[digeo]

That is exactly what I am doing except I make the 3 state buttons static. The problem is that with the new revision of the app you can change the width and height of the test button and not the 3 state buttons as they are only there to see the different state colors. When the test button size changes, the ABGRA bitmaps of the state buttons is set to the size of the state buttons and the bitmap will not "fit" on the test button. Hope you understand

[lainz]

Seems that BGRAButton needs some refactoring to do the editor in a easy way.

[digeo]

The ABGRA bitmaps of the testbutton states are only assigned when you hover/click on the test button. then i can save the bitmap to file. but you still have to hover and click on the test button everytime a change is made to the design.

Maybe a ABGRA bitmap object/property/record can be added that describes the state bitmap of the button. this property can then  be accessed to save to file.

[lainz]

I'm creating a new bgrabutton 'bgraneobutton', using some of the existing code, with the circular suggestion to do this like css buttons. I'm not the author of bgrabutton so it will take some time.

[Gintas]

The designer app looks really great. I just that main window could be resizable since mine screen is just 768px height and you need to add option to export all state buttons into single image strip for use in games and websites. I am working on similar app for personal use for making "download" and other buttons for websites.

[digeo]

@Gintas

The main purpose I started the designer was a quick editor to do buttons. Then as I progressed more ideas came to light. the window was just big enough to show all the property editors, but then I made it possible to change button width and height. features to improve is a resizable canvas area to enable bigger buttons. The previous posts in this discussion (about 2 up) you will see that Lainz and I is discussing the possibility to enable the saving all three states to bitmaps. Lainz has suggested creating a new button to enable this.

Another improvement i am busy with a simple XML reader/writer to enable text editable saved files for the button design.