* * *

Author Topic: Material Design  (Read 4782 times)

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Material Design
« on: April 06, 2018, 08:36:50 pm »
Hi, this is in an alpha stage, is a set of controls inspired on Material Design. Is open source (LGPL v3) and you can grab it, use it, expand it, share it, etc.

Currently we have:
- MDButton

Download:
https://github.com/bgrabitmap/materialdesign

MDButton Features
- Ripple effect (property Animation)
- Normal Button, Toggle Button, Toggle Group (property Kind)
- Checked property
- Color for each state (Normal, Hover, Active, Disabled)

* Toggle mode works like TToggleBox or a single TCheckBox (with a shape of a button). Put a lot of buttons with Toggle mode and you have a TCheckGroup (maybe in the future we add a method like "Select All", "Unselect All" and "Invert Selection", some handy methods.
* ToggleGroup mode works like a TRadioGroup (you can select only one at a time, and selecting one is mandatory).
* ToggleGroup does not require a parent other than the Form, but if you want to divide between different groups a single TPanel suit the needs, and it does not requires a single line of code to work.
* If you want custom, you can manage the Checked property by yourself.

Next things to add:
- I will try to add images support (like a glyph) with ImageList and ImageIndex, so you can use any image at any given time depending on the state of the button.
- More controls :)

Is in alpha, so there are missing things, is just for testing at this time. I will add propper events and properties in time.

Thanks to @josh for his suggestions and help with ideas!

Thanks for reading. Enjoy!
« Last Edit: April 06, 2018, 08:39:03 pm by lainz »

GetMem

  • Hero Member
  • *****
  • Posts: 3079
Re: Material Design
« Reply #1 on: April 06, 2018, 08:43:26 pm »
After some initial testing this should be an OPM candidate in my opinion.

dsiders

  • Jr. Member
  • **
  • Posts: 51
Re: Material Design
« Reply #2 on: April 06, 2018, 09:05:51 pm »
Hi, this is in an alpha stage, is a set of controls inspired on Material Design. Is open source (LGPL v3) and you can grab it, use it, expand it, share it, etc.

Looks like a nice start. I am curious though... why the dependency on BGRABitmap?
Lazarus 1.8.2 / FPC 3.0.4 / Windows 8.1 64-bit

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #3 on: April 06, 2018, 09:25:28 pm »
After some initial testing this should be an OPM candidate in my opinion.

Thanks. Sure it will need to be added. I'm working slowly after work on this, so maybe it takes a bit more of time but I will send it to you when tested.

Hi, this is in an alpha stage, is a set of controls inspired on Material Design. Is open source (LGPL v3) and you can grab it, use it, expand it, share it, etc.

Looks like a nice start. I am curious though... why the dependency on BGRABitmap?

Thanks. And about BGRABitmap, because is easier to code with it than other libraries, never used AggPas, for example.

Working on the "FPC Paymo Widget" that the company I work assigned to me, I learned a lot more about controls and animations. Also @josh asked for more features to a button control, so I get inspired.

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #4 on: April 08, 2018, 12:41:47 am »
Hi again =)

I'm releasing version 0.0.1 0.0.2 of Material Design package.
https://github.com/bgrabitmap/materialdesign/releases

- MDButton (Normal, Toggle, Toggle Group, Check Box, Radio Button)

It currently has only OnClick event, all others have been not tested. Sure there are missing properties, I'm adding and testing it in time, to ensure everything works fine.

Edit: Notice that for Check Box and Radio Button, your font need to have the unicode characters!

Code: Pascal  [Select]
  1. MDBUTTONBALLOTBOX = '✗'; //'☐';
  2. MDBUTTONBALLOTBOXWITHCHECK = '✓'; //'☑';
  3. MDBUTTONRADIOBUTTON = '🔘';
  4. MDBUTTONRADIOBUTTONCIRCLE = '◯';

But you can change these if you don't like them.

For example to something like this:

Code: Pascal  [Select]
  1. MDBUTTONBALLOTBOX = 'no :v';
  2. MDBUTTONBALLOTBOXWITHCHECK = 'yep:';
  3. MDBUTTONRADIOBUTTON = ':)';
  4. MDBUTTONRADIOBUTTONCIRCLE = ':(';

Edit 2: anything can change from this version to newer versions, so use this with caution.

Edit 3:

Hi, this is in an alpha stage, is a set of controls inspired on Material Design. Is open source (LGPL v3) and you can grab it, use it, expand it, share it, etc.

Looks like a nice start. I am curious though... why the dependency on BGRABitmap?

If you can or want, you can change the Paint event, is the only that uses BGRABitmap! And have your own painting...

Edit: v0.0.2
Added methods SelectAll, UnselectAll, InvertSelection and GetSelected. Added standard published properties of button. BugFixes. Var instead of Const in global glyphs.
« Last Edit: April 09, 2018, 01:45:46 am by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #5 on: April 16, 2018, 03:25:33 am »
Added 'Tab' kind of button


circular

  • Hero Member
  • *****
  • Posts: 2726
    • Personal webpage
Re: Material Design
« Reply #6 on: April 17, 2018, 12:49:36 pm »
Looks nice  :)
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #7 on: April 17, 2018, 05:02:49 pm »
Looks nice  :)

Thanks! A bit slow on Linux, maybe using a TTimer is not quite right.. I need to test some code you created for BCEffect unit (Fading), that uses TDateTime instead. And see if that works better.

circular

  • Hero Member
  • *****
  • Posts: 2726
    • Personal webpage
Re: Material Design
« Reply #8 on: April 17, 2018, 07:17:45 pm »
If TTimer is slow, one remedy is to make more movement between frames. Another remedy is to have more frames, however that may use much CPU.
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #9 on: April 17, 2018, 07:40:21 pm »
Yes, it's already with a lot of frames, every 15 ms, to get a bit more than 60fps.

And more movement between frames, it can be, I need to test that the movement remain smooth.

About the calculation of alpha channel, it is very costly right? Because the animation on a really big button is really fast (drawing growing circle, is all what animation does at start), until the fading time comes, when every frame alpha channel is changed from 255 down to 0. It needs to fill everything and that becomes somewhat slow.

Code: Pascal  [Select]
  1. bmp.FillEllipseAntialias(FCX, FCY, iTemp,
  2.             iTemp, ColorToBGRA(FStyleHover.Color, alpha));

alpha is always 255 until the fading time comes.

Pascal

  • Hero Member
  • *****
  • Posts: 665
Re: Material Design
« Reply #10 on: April 17, 2018, 09:06:25 pm »
Maybe there is chance to build a bunch of visual componets which all use OpenGL for drawing? Maybe a complete widgetset.
If i may dream: With remote capabilities (Simple client which shows the UI and a server program on a different machine which handles the client UI)
laz trunk - fpc trunk 32bit - Windows 10 Pro x64 (1803)

circular

  • Hero Member
  • *****
  • Posts: 2726
    • Personal webpage
Re: Material Design
« Reply #11 on: April 17, 2018, 09:40:24 pm »
@Lainz
Drawing with alpha is slower because it implies merging the pixels instead of replacing them. But is it the reason here, I don't know. What if you keep the same alpha all the way?

@Pascal
We already thought of that. Using pure OpenGL does not really provide antialiasing (even if they are some tricks that can be used).
Conscience is the debugger of the mind

Trenatos

  • Sr. Member
  • ****
  • Posts: 369
  • Software developer - Open source contributor
    • MarcusFernstrom.com
Re: Material Design
« Reply #12 on: April 17, 2018, 10:14:18 pm »
Nice going!

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #13 on: April 17, 2018, 10:33:36 pm »
@Lainz
Drawing with alpha is slower because it implies merging the pixels instead of replacing them. But is it the reason here, I don't know. What if you keep the same alpha all the way?

The final part of the animation is a fading, like this button:
https://material.angular.io/components/button/overview

The circle grows where you clicked until the width of the button, then it fades away, that's the part when alpha is used. But thinking it better, you're right. We can calculate a single color (a blend between the background and the circle color), and keep the alpha 255 always.

How I can calculate a blend between two colours, using a % or an alpha value?

lainz

  • Hero Member
  • *****
  • Posts: 2768
  • I'm coding :)
    • Lainz
Re: Material Design
« Reply #14 on: April 18, 2018, 04:44:48 am »
@circular, I did like this to use always an opaque color, instead of alpha, but I'm not sure if it's right..

Code: Pascal  [Select]
  1. tempColor := MergeBGRA(FStyleNormal.Color, ColorToBGRA(FStyleHover.Color, alpha));
  2. tempColor.Alpha := 255;

FStyleNormal.Color is the base color, and FStyleHover.Color is the fading.

If I'm not wrong, it's somewhat lighter now... so I'm doing it wrong?

How I can calculate a blend between two colours, using a % or an alpha value?

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus