Ways of making new style design

[aradeonas]

Hi,

Its been a while I'm interest in making new style designs with Lazarus.
For years I was making classic UI like all we done,Just a windows style and maximum a them like Delphi's AlphaSkin or things like that.
But UI designing is changing,I see shots that I have no good idea to how make them live.
Now I think with BGRABitmap and its control may it be possible but how?How that it have speed,design be possible and many other things that is important to make these controls and styles live.
I know its possible with other languages specialty web programing but how in Lazarus?Is it even wisely to do this in Lazarus?
Here is a sample shot,Tell me what you think?Is it possible,what ways do you think is better?

PS,Yes I know we can make controls like BGRABitmap's control and I made some test controls but I want to it be clear the best way for start.

[Basile B.]

Aren't these kind of apps made with WPF ?
You need a vectorial 2d framework like FMX (with animations, rotation, scaling, etc). Also note that the flat design, even if visually appealling, is actually a hidden constraint related to the performances (the same with bevels, effects, blur, color gradients, shadows, etc would be slow as hell).

[felipemdc]

lcl-customdrawn documentation: http://wiki.freepascal.org/Lazarus_Custom_Drawn_Controls

You need to write your own drawer.

[aradeonas]

Yes but not just it.
You need a vectorial 2d framework like FMX
Vectorial maybe but I want to know is it possible to do it with Lazarus?I like here,I don't like to leave my favorite language unless there is no way.

[aradeonas]

@felipemdc it seems you know lcl-customdrawn.are you sure Its possible to make something like sample shot with it?

[skalogryz]

Yes but not just it.
You need a vectorial 2d framework like FMX

AggPas?

[felipemdc]

@felipemdc it seems you know lcl-customdrawn.are you sure Its possible to make something like sample shot with it?

That depends on what you mean by "Its possible to make something like sample shot with it"

Yes, it offers the framework, base construction, to allow you to write the drawer in a vectorial way, to make flexible, sizable controls with any look, including the one you mentioned.

No, it's not just 2 lines of code. Its now a 100% ready solution which looks like what you want.

You actually need to write the drawer, like I said.

There are several example drawers, for Windows 2000 look, Windows XP look, etc. You need to add a drawer with the look that you want, and he can implement the look using TCanvas.Line and similar LCL API calls.

[aradeonas]

Lovely Aggpas.I had good time with it in Delphi but its didn't hear any news from it lately an also last time I check making control with it is very hard because of source documentation and its structure but probably Im wrong.
Is there any one who know or made any controls that made with it?

[felipemdc]

Here is the source code for win XP look:

http://svn.freepascal.org/cgi-bin/viewvc.cgi/trunk/lcl/customdrawn_winxp.pas?view=markup&root=lazarus

You need to create a unit like this one, but with your own look.

Every drawer inherits from the "common" drawer, which draws a win 2000 style, which might also be useful to study:

http://svn.freepascal.org/cgi-bin/viewvc.cgi/trunk/lcl/customdrawn_common.pas?view=markup&root=lazarus

[aradeonas]

Thank you very much,I'm going to check with it.
There isn't speed problem with coustomdrawn as Basile B said?
I ask because I just know it from it's wiki and and screenshots.

[Xirax]

Maybe sysrpl can help.He's working on Codebot that I think it can useful for custom UI.

[aradeonas]

Interesting.
I'm installing fpGUI.

PS,your avatar reminds me sternas from pilotlogic.

[lainz]

Code: [Select]

https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary/attachments/184703
That's a website

And that UI looks really simple to do.

You can use Custom Drawn or BGRA-Controls. I can imagine how to do that with these two.

You can use Custom Drawn with BGRABitmap. BGRABitmap is somewhat slower but easier to use. There are ready to use functions with rounded rectangles (mostly used in all the buttons I see here) and everything else.

There are some drawers I did for Custom Drawn that comes with BGRA-Controls. These use Bitmaps to look perfectly the same. Is the same technique that Windows uses for their UI elements starting from Windows XP.

The thing I see is that there are a lot of different buttons and panels.

Left sidebar:
- Dark Gray background
- Vertical toolbar with buttons

Top:
- Search input
- Big icons buttons

Toolbar:
- 2 kind of buttons: tabs and rounded

Content:
- Social buttons
- Other rounded buttons (same look as toolbar ones)
- Other less rounded buttons (edit, copy)
- Inputs

A lot of panels here and there.

Ok you need:
- Different drawers for each button or a new property to change the look inside the same drawer.
- Inputs
- Different drawers for each panel or a new property to change the look inside the same drawer.

IMHO create your own controls with BGRABitmap from scratch. You can do it everything in your own way.

[aradeonas]

Thank you very much.
You clear it for me.

[lainz]

I'm now trying lubuntu and some of my custom components works really slow. Take that in consideration also if you want to make something cross platform.