Recent

Poll

You consider buying a Material Design components for Lazarus?

Yes
14 (53.8%)
No
12 (46.2%)

Total Members Voted: 25

Author Topic: Poll: You will buy a Material Design UI pack for Lazarus?  (Read 8440 times)

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Poll: You will buy a Material Design UI pack for Lazarus?
« Reply #15 on: December 19, 2017, 05:17:55 pm »
Don't waste your time on specific design, there is lot's of "themes" etc. with bitmap style.

It's good idea to start with Canvas and implement basic CSS Box model painting (I started this long time ago, but now don't have time(ouch that MacOS bug is from that times :) ). With few lines of code there is very nice result. I can support you with ideas :) and maybe with code etc. But only with open source :)

In my research it's good to start renderer logic with Css2Vector -> TryVector2canvas (if there is only basic painting method's like FillRect, Rectangle (horizontal, vertical lines) and if this fail than render whole canvas as buffered bitmap. This method is required because there is no full 3D support for UI. (last renderer could be anyting like aggpas or bgrabitmap).

For example edit box can be painted by widgetset (but frame (boxshadow) can be painted wit cached bitmap).

90% of Modern (web) UI is only in with colors and rounded borders (and with little gradinet help) ... and of course with typo ...
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

JD

  • Hero Member
  • *****
  • Posts: 1848
Re: Poll: You will buy a Material Design UI pack for Lazarus?
« Reply #16 on: December 19, 2017, 05:18:22 pm »
I'm interested too.

JD
Windows - Lazarus 2.1/FPC 3.2 (built using fpcupdeluxe),
Linux Mint - Lazarus 2.1/FPC 3.2 (built using fpcupdeluxe)

mORMot; Zeos 8; SQLite, PostgreSQL & MariaDB; VirtualTreeView

lainz

  • Hero Member
  • *****
  • Posts: 4468
    • https://lainz.github.io/
Re: Poll: You will buy a Material Design UI pack for Lazarus?
« Reply #17 on: December 19, 2017, 05:29:28 pm »
Don't waste your time on specific design, there is lot's of "themes" etc. with bitmap style.

Yes, because that I decided to focus on BGRAControls. There is a bitmap theme already working for Custom Drawn: Custom Drawn Windows 7 (Is not just Windows 7, it can use any bitmap theme you have, you can grab the bitmaps from any ".msstyle").

It's good idea to start with Canvas and implement basic CSS Box model painting (I started this long time ago, but now don't have time(ouch that MacOS bug is from that times :) ). With few lines of code there is very nice result. I can support you with ideas :) and maybe with code etc. But only with open source :)

In my research it's good to start renderer logic with Css2Vector -> TryVector2canvas (if there is only basic painting method's like FillRect, Rectangle (horizontal, vertical lines) and if this fail than render whole canvas as buffered bitmap. This method is required because there is no full 3D support for UI. (last renderer could be anyting like aggpas or bgrabitmap).

For example edit box can be painted by widgetset (but frame (boxshadow) can be painted wit cached bitmap).

90% of Modern (web) UI is only in with colors and rounded borders (and with little gradinet help) ... and of course with typo ...

Well BGRABitmap has 3D, not accelerated but is something, but I did not see too much 3D UI's.

These rounded borders are already available in BGRAControls.

I'm finding ways to improve BGRAControls right now. Today I improved the Custom Drawn theme selection with BCDefaultThemeManager, so it's more easily to switch between Custom Drawn themes.

Changing the font to Roboto is quite easy to do =)

I already have a panel with Shadow in BGRAControls, that's drawn with a Bitmap.

With BGRAControls, LCL and Custom Drawn we have:
- ListBox (Custom drawn of item)
- ToolBar (Custom drawn of toolbar and tool buttons)
- Button (BCButton, BCImageButton, Custom Drawn Button, and many others)
- Label (BCLabel, default LCL Label is already customizable)
- Panel (BCPanel, default LCL Panel is already customizable)
- ProgressBar (BGRAFlashProgressBar, Custom Drawn progress bar, BCRadialProgressBar)
- CheckBox (Custom Drawn)
- RadioButton (Custom Drawn)
- TrackBar (Custom Drawn)
- Edit (Custom Drawn)
- Numeric Edit (TrackBar from BGRAControls, and the one in Custom Drawn needs a fix)

Missing:
- Menu, MenuItem
- ComboBox (Maybe already available in another 3rd party packages)
- Anything else..

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Poll: You will buy a Material Design UI pack for Lazarus?
« Reply #18 on: December 19, 2017, 05:54:53 pm »
3D =  GPU HW acceleration painting (lines, gradients etc.), all webbrowsers are using it.

I'm working on modern UI for our application, and with modern UX, like one page, one form etc.. So our one page can be 4.000x30.000 pixels where this is TScollBox with borders, with colors, and on top of this there is TPanels and TLabels and TButtons. And it's impossible paint all of this controls with bitmap buffers.

For example: when user is over panel and I need to change box shadow value ("3D" like material UI design") I need only render and repaint only affected borders (top, left, bottom , right) and not whole frame, especially when I need to do this in 30fps.
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

turrican

  • Full Member
  • ***
  • Posts: 133
  • Pascal is my life.
    • Homepage
Re: Poll: You will buy a Material Design UI pack for Lazarus?
« Reply #19 on: December 19, 2017, 06:09:37 pm »
3D =  GPU HW acceleration painting (lines, gradients etc.), all webbrowsers are using it.

I'm working on modern UI for our application, and with modern UX, like one page, one form etc.. So our one page can be 4.000x30.000 pixels where this is TScollBox with borders, with colors, and on top of this there is TPanels and TLabels and TButtons. And it's impossible paint all of this controls with bitmap buffers.

For example: when user is over panel and I need to change box shadow value ("3D" like material UI design") I need only render and repaint only affected borders (top, left, bottom , right) and not whole frame, especially when I need to do this in 30fps.

It's very useful when the framework is well designed. But for Firemonkey framework for example is a very bad example because controls are very slow 30fps<

 

TinyPortal © 2005-2018