Recent

Author Topic: Material Design  (Read 18712 times)

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #15 on: April 18, 2018, 10:50:18 am »
@lainz
Good idea to do the merge of the color before drawing.  ::)

MergeBGRA merges without gamma correction. I suggest you try MergeBGRAWithGammaCorrection instead. You can put 1 for both weight parameters.
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #16 on: April 18, 2018, 06:43:40 pm »
Thankyou. I will try.

Edit: tested.

@circular, I think that method is not the same as blending?

Because I really get a brighter color, maybe merge is not what I need, but a blend between colors, like a blend when for example I do:

bmp.RoundRectangle(... with color1 alpha 255)
bmp.FillEllipseAntialias(... with color2 alpha less than 255)

is not the same as
MergeBGRAWithGammaCorrection(color1, 1, color2, 1)

?

Edit 2: found it  :)

Code: Pascal  [Select][+][-]
  1. if FPercent < 1 then
  2.   tempColor := FStyleHover.Color
  3. else
  4. begin
  5.   tempColor := FStyleNormal.Color;
  6.   DrawPixelInlineNoAlphaCheck(@tempColor, ColorToBGRA(FStyleHover.Color, alpha));
  7. end;
« Last Edit: April 19, 2018, 01:37:45 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #17 on: April 21, 2018, 03:58:40 am »
* Added a demo on how to use the Tab kind of button. Using a regular TPageControl and hiding the native tabs, you can easily switch them with a material design ones! Is not a component (yet) but maybe in future. You can place tabs at left, top, right and bottom with a simple code.
* Added global variable to switch easily all animations on and off.
* Improved used colors for animated / non animated buttons, now these match.
* Added AutoSize.

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #18 on: April 21, 2018, 09:10:51 am »
@lainz:

Oh I see. Yeah indeed, it is not the same. My mistake I was confusing with merging colors.

You could use an Inline function, however those are rather for internal use.

If you use functions of BGRABlend, then I suggest using the following functions, which are less likely to change with implementation: PutPixels and for other cases you might want to use BlendPixels, BlendPixelsOver.

Code: Pascal  [Select][+][-]
  1. uses BGRABlend;
  2. var tempColor, hoverColor: TBGRAPixel;
  3. begin
  4.     if FPercent < 1 then
  5.       tempColor := FStyleHover.Color
  6.     else
  7.     begin
  8.       tempColor := FStyleNormal.Color;
  9.       hoverColor := ColorToBGRA(FStyleHover.Color, alpha);
  10.       PutPixels(@tempColor, @hoverColor, 1, dmDrawWithTransparency, 255);
  11.     end;
  12. end

Regards
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #19 on: April 21, 2018, 03:12:09 pm »
Thanks. I've changed it.

Edit: I've added a 'Drawings' demo, showing how to draw shadows, I will use that to make the new "emoji" buttons.
« Last Edit: April 21, 2018, 06:16:19 pm by lainz »

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #20 on: April 22, 2018, 11:02:28 pm »
Nice  8)

This bird is a Unicode character  :o

I was thinking, why not put an SVG on the button?
Conscience is the debugger of the mind

Handoko

  • Hero Member
  • *****
  • Posts: 5122
  • My goal: build my own game engine using Lazarus
Re: Material Design
« Reply #21 on: April 23, 2018, 07:49:02 am »
@lainz

Can you add tab stop support?

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #22 on: April 23, 2018, 10:10:01 pm »
Nice  8)

This bird is a Unicode character  :o

I was thinking, why not put an SVG on the button?

Yes, is a character, there are a lot, but for example, some are not included in default Windows 10 fonts, and less are included on Windows 7..

Yes, adding SVG is a good idea.

@lainz

Can you add tab stop support?

Yes, but It will need another button, with the same code plus the tab stop support, because TGraphicControl and TCustomControl are not compatible one with the other.

I already did something like that for BCButton (BDButtonFocus), so I know how to do it, and if I don't remember it well, I can look again at BCButtonFocus code. =)

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #23 on: April 25, 2018, 12:43:01 am »
Hi, I want to say only that maybe It takes a bit more of time to do these improvements. Because I want to start making some small games with Lazarus and BGRABitmap on my free time.

But I will not stop this project because I really like it =)

Any code is welcome, and don't forget that anyone can fork and modify the sources freely.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #24 on: April 26, 2018, 11:48:10 pm »
Hi @Handoko, I've added MDButtonFocus, is basically the same as MDButton, but: transparency: no, focus (TabStop): yes.
It can be 'clicked' with the spacebar / 'enter' (return) keys.
It works better with animations on, with no animations needs to be improved.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #25 on: May 21, 2018, 03:07:00 pm »
New version 0.0.3:
https://github.com/bgrabitmap/materialdesign/releases

* Added Tab kind for button.
* Improved speed of rendering using some techniques.
* Added MDButtonFocus, is the same but with focus support.
* Added globals to handle speed of animation and frequency of update of the animation.
* More test projects.

Thaddy

  • Hero Member
  • *****
  • Posts: 14157
  • Probably until I exterminate Putin.
Re: Material Design
« Reply #26 on: May 21, 2018, 07:17:28 pm »
That's good code... TNX!
Specialize a type, not a var.

lainz

  • Hero Member
  • *****
  • Posts: 4449
    • https://lainz.github.io/
Re: Material Design
« Reply #27 on: May 21, 2018, 08:58:02 pm »
That's good code... TNX!

Thanks. We all should say thanks to @circular, without his library I'm sure I would never have created these components.

circular

  • Hero Member
  • *****
  • Posts: 4181
    • Personal webpage
Re: Material Design
« Reply #28 on: May 22, 2018, 02:44:09 pm »
And thanks to you for making controls out of my library that would be a bit invisible without it.  8)
Conscience is the debugger of the mind

Pascal

  • Hero Member
  • *****
  • Posts: 932
Re: Material Design
« Reply #29 on: May 22, 2018, 04:02:14 pm »
Animation for TMDButton is flickering while animation for TMDButtonFocus works as expected.
« Last Edit: May 22, 2018, 04:05:40 pm by Pascal »
laz trunk x64 - fpc trunk i386 (cross x64) - Windows 10 Pro x64 (21H2)

 

TinyPortal © 2005-2018