Lazarus

Programming => General => Topic started by: axisdj on April 09, 2020, 06:34:18 pm

Title: Custom Drawing user interface
Post by: axisdj on April 09, 2020, 06:34:18 pm
Hello,

I am in the process of becoming comfortable with Lazarus, and making a goal to move from vb6.

In vb6 I was using a library called vbRichClient which wraps the Cairo drawing engine to create custom modern user interface. I use images and then draw buttons/displays on them to give the GUI a modern look

What units/classes are you guys using for custom drawing, I looked at the BGRABitmap and that looks pretty close? any other suggestions?

Thanks
Title: Re: Custom Drawing user interface
Post by: jamie on April 09, 2020, 06:51:37 pm
Can you post an example image to look at of a form with the controls on it?

Not sure where you are going with this but it almost sounds like a Skin interface
Title: Re: Custom Drawing user interface
Post by: axisdj on April 09, 2020, 06:56:38 pm
Jamie Ill send it in a private message.
Title: Re: Custom Drawing user interface
Post by: PascalDragon on April 10, 2020, 10:36:59 am
You could take a look at this (https://forum.lazarus.freepascal.org/index.php/topic,36502.msg354415.html#msg354415). I have not tested it, but at least it looks nice.
Title: Re: Custom Drawing user interface
Post by: furious programming on April 10, 2020, 03:02:26 pm
There are many convenient solutions for creating components with a custom appearance, but none that allow to modify the appearance of the window border or such elements as the main menu bar. And it is a bit sad.
Title: Re: Custom Drawing user interface
Post by: PascalDragon on April 10, 2020, 03:15:16 pm
The border of any window is controlled by the OS, not the application. Nothing stops you from setting your borderstyle to bsNone and draw your own (though you also need to handle window movement yourself then).

Same for the menu: Lazarus relies on the operating system to handle this (e.g. on macOS the menu is located at the top and can't be drawn by the application, and I think in X11 environments that's possible to configure as well). You can always draw your own menu, though your application will look out of place on systems that have the menu bar outside of the client area and thus outside fo your application's influence.
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 06:03:02 pm
there is also the forgotten TForm.shape solution, then you can even draw eggforms  8-) happy easter
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 06:05:04 pm
http://lazplanet.blogspot.com/2014/04/shape-your-form-into-anything.html (http://lazplanet.blogspot.com/2014/04/shape-your-form-into-anything.html)
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 06:18:27 pm
I concentrate on the functionalities of applications BUT when I want the GUI to look pretty fine EASY I personnaly embed my GUI with no border shifted inside a (fake)shadowing alphablended 'shaped' form
... then my GUIs can compete with 'professional' enlighted widgetsets with little minimal effort  :P
Results are impressive / amazing
Title: Re: Custom Drawing user interface
Post by: furious programming on April 10, 2020, 06:37:00 pm
The border of any window is controlled by the OS, not the application.

What about WM_NCPAINT?

Quote
Nothing stops you from setting your borderstyle to bsNone and draw your own (though you also need to handle window movement yourself then).

Yep, but if I set the BorderStyle to bsNone, then I will automatically lose the system context menu, which is available by clicking LMB on the form icon or RMB on caption bar, or by pressing Alt+Space. And, because of this, I will lose the whole system mechanism to moving and resizing the form too.


I'm constantly thinking about custom skin for my application, because I need a dark skin and the controls' appearance similar to those on Windows 10, available on any OS and not dependent on system theme. But, at the same time, I want to use basic LCL controls, because those are used in the whole project.

And I have no idea what to do... Maybe hack/override the current widgetset? 8)
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 07:07:33 pm

What about WM_NCPAINT?


NOT portable. So if you build apps for Windoze only, you can dispatch the 'NC' non client 'WM' windoze(c) messages BUT if you plan to build apps for other OSes, NOWAY

WM_NCxxx simply don't exist on other OSes
Title: Re: Custom Drawing user interface
Post by: furious programming on April 10, 2020, 07:09:17 pm
Windows rocks — again. 8-)
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 07:11:56 pm
Windows rocks — again. 8-)

rock in a torrent  :D :D :D :D :D :D :D :D :D :D :D

there are so many holes of securities in that torrent, and so many (especialy multithreding) leaks that made me call it 'windoze'
Title: Re: Custom Drawing user interface
Post by: 440bx on April 10, 2020, 07:14:43 pm
NOT portable.
That depends on the definition of portable.  My definition of portable is: put it on a USB drive and run it without any "unusual" dependencies such as a C runtime library (dll), IOW, a stand alone program.

WM_NCxxx simply don't exist on other OSes
There are other O/Ss ? ... good to know.
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 10, 2020, 07:18:08 pm
98% servers run UNIX systems
77% smartphones run UNIX systems

so if you talk 'windoze' to me i can return the 'compliment'
A Writer said 'Mind is just like parachute! it only works when you open it'!

so talking your windoze crap 'only' is closing the parachute  on your side :P :P :P
Title: Re: Custom Drawing user interface
Post by: 440bx on April 10, 2020, 07:25:42 pm
A Writer said 'Mind is just like parachutte! it only works when you open it'!
That's true but, for peace of mind it's better to stay in the airplane (parachutes fail sometimes with results that are not particularly pretty.)
Title: Re: Custom Drawing user interface
Post by: winni on April 10, 2020, 07:37:46 pm
The border of any window is controlled by the OS, not the application. Nothing stops you from setting your borderstyle to bsNone and draw your own (though you also need to handle window movement yourself then).
 

Hi!

Very simple solution:

Code: Pascal  [Select][+][-]
  1. procedure TForm1.FormPaint(Sender: TObject);
  2. const BorderCol = clRed;
  3. begin
  4. canvas.pen.width := 5;
  5. canvas.Pen.Color := BorderCol;
  6. canvas.Rectangle(2,2,width -2, height - 2 );
  7. end;        

Winni
Title: Re: Custom Drawing user interface
Post by: furious programming on April 10, 2020, 08:17:32 pm
there are so many holes of securities in that torrent, and so many (especialy multithreding) leaks that made me call it 'windoze'

Hmm... interesting... but who cares?

Anyway, this has nothing to do with the problem raised in this thread, so do not do offtop, and even more do not start another storm about the superiority of one OS over the other — I'm too old for this crap.

Very simple solution: […]

And very limited solution. Please, read this post (https://forum.lazarus.freepascal.org/index.php/topic,49261.msg356683.html#msg356683) carefully (second paragraph). 8)
Title: Re: Custom Drawing user interface
Post by: Otto on April 10, 2020, 09:55:16 pm
[...]
What about WM_NCPAINT?
[...]

In my opinion, such a solution should be adequate to axisdj in his request:

[...]
I am in the process of becoming comfortable with Lazarus, and making a goal to move from vb6.
[...]
he says he wants to "migrate" from vb6 to FPC; vb6 was usually used to produce executables for Windows.

Otto.
Title: Re: Custom Drawing user interface
Post by: PascalDragon on April 11, 2020, 02:20:29 pm
The border of any window is controlled by the OS, not the application.

What about WM_NCPAINT?

As mentioned this isn't cross platform and especially on Linux with X11 dealing with the Window Managers can be quite a mess...

Quote
Nothing stops you from setting your borderstyle to bsNone and draw your own (though you also need to handle window movement yourself then).

Yep, but if I set the BorderStyle to bsNone, then I will automatically lose the system context menu, which is available by clicking LMB on the form icon or RMB on caption bar, or by pressing Alt+Space. And, because of this, I will lose the whole system mechanism to moving and resizing the form too.

That's what I meant with though you also need to handle window movement yourself then.

NOT portable.
That depends on the definition of portable.  My definition of portable is: put it on a USB drive and run it without any "unusual" dependencies such as a C runtime library (dll), IOW, a stand alone program.

440bx, please, I know you are rather Windows centered, but even you should be aware that “portable” on this forum more often than not means “cross platform”.

[...]
What about WM_NCPAINT?
[...]

In my opinion, such a solution should be adequate to axisdj in his request:

[...]
I am in the process of becoming comfortable with Lazarus, and making a goal to move from vb6.
[...]
he says he wants to "migrate" from vb6 to FPC; vb6 was usually used to produce executables for Windows.

But axisdj should know the limitations they're facing right away and maybe pursue a better/different way from the start. Otherwise they'll come along in a few months, ask how to do that on Linux (cause they've discovered, hey, with Lazarus one can also do Linux programs!) and then we say, “though luck, axisdj, that won't work on Linux or at least will be very specific to the window manager”.

Don't take me wrong, there is nothing bad about making an application that's only supposed to work on a specific set of platforms. But if one doesn't need to restrict oneself unnecessarily, why do it?
Title: Re: Custom Drawing user interface
Post by: winni on April 11, 2020, 02:44:59 pm
Hi!

* You dont have to disable the borderstyle to bsNone to draw your own border.

* In gtk2 the LCL draws over the theme - look at the attached image.
   This from KDE Plasma, theme "Altes Büro" with my code from above.

Winni
Title: Re: Custom Drawing user interface
Post by: jamie on April 11, 2020, 03:12:27 pm
You can get a Device Context to the Window border, in fact that is how the menus and title bar are maintain via the OS..

 Also you can handle the WM_NCPAINT message so there isn't really too much if an issue here except with the fact that Lazarus filters the WM_NCPAINT message and thus makes that kind of a trap..
 
   yes I know you can hook it...

Title: Re: Custom Drawing user interface
Post by: winni on April 11, 2020, 03:16:12 pm
Hi!

In Linux there is no  WM_NCPAINT

Winni
Title: Re: Custom Drawing user interface
Post by: jamie on April 11, 2020, 04:10:11 pm
I understand but that does not mean the widgets can't simulate one like it does now...

 Also using the GetWindowDC over GetDC should work in other widgets.

 The only difference is the GetWindowDC  offsets the 0,0 and size to the start of the window frame over what GetDC does …

 basics of DC configurations...

 with the WM_PAINT the DC offered up has the offset placed in it already for the client area.. where as the WM_NCPAINT has it for the whole frame.
Title: Re: Custom Drawing user interface
Post by: lainz on April 11, 2020, 04:45:52 pm
I use BGRAControls  :D

Check this custom drawn window, of course it has no menu, it's a ribbon style
https://raw.githubusercontent.com/bgrabitmap/bgracontrols/dev-bgracontrols/docs/img/bgraribbon.png
Title: Re: Custom Drawing user interface
Post by: furious programming on April 12, 2020, 12:24:47 am
As mentioned this isn't cross platform and especially on Linux with X11 dealing with the Window Managers can be quite a mess...

There is a huge difference between ”is controlled by the system” and ”is not cross-platform”. It is not true that the application can't control the rendering of the window border, but it is a pity that only on Windows platform.

IMO no matter what we have now, Lazarus needs a skinning system. There is a lot of people that needs this great functionality, including me — native controls with non-native appearance, like in RAD Studio (https://www.youtube.com/watch?v=KWet5vijpyw). Not only for created projects, but also for IDE itself — I dream of a dark theme similar to that used by VS.

But I know that implementing such a system is a long and hard job and you guys have a million things to implement and fix, so I won't complain that there are no skins support. Maybe in the future. 8)
Title: Re: Custom Drawing user interface
Post by: lainz on April 12, 2020, 03:34:31 am
As mentioned this isn't cross platform and especially on Linux with X11 dealing with the Window Managers can be quite a mess...

There is a huge difference between ”is controlled by the system” and ”is not cross-platform”. It is not true that the application can't control the rendering of the window border, but it is a pity that only on Windows platform.

IMO no matter what we have now, Lazarus needs a skinning system. There is a lot of people that needs this great functionality, including me — native controls with non-native appearance, like in RAD Studio (https://www.youtube.com/watch?v=KWet5vijpyw). Not only for created projects, but also for IDE itself — I dream of a dark theme similar to that used by VS.

But I know that implementing such a system is a long and hard job and you guys have a million things to implement and fix, so I won't complain that there are no skins support. Maybe in the future. 8)

Once I said that, and they say that Lazarus must look native.
Title: Re: Custom Drawing user interface
Post by: eljo on April 12, 2020, 07:09:37 am
As mentioned this isn't cross platform and especially on Linux with X11 dealing with the Window Managers can be quite a mess...

There is a huge difference between ”is controlled by the system” and ”is not cross-platform”. It is not true that the application can't control the rendering of the window border, but it is a pity that only on Windows platform.

IMO no matter what we have now, Lazarus needs a skinning system. There is a lot of people that needs this great functionality, including me — native controls with non-native appearance, like in RAD Studio (https://www.youtube.com/watch?v=KWet5vijpyw). Not only for created projects, but also for IDE itself — I dream of a dark theme similar to that used by VS.

But I know that implementing such a system is a long and hard job and you guys have a million things to implement and fix, so I won't complain that there are no skins support. Maybe in the future. 8)

Once I said that, and they say that Lazarus must look native.
That imply that they can't enable disable skins as requested which might say more about the team.
Title: Re: Custom Drawing user interface
Post by: mercurhyo on April 12, 2020, 08:52:26 am

Hmm... interesting... but who cares?

Noone cares :D war is (if there was a war) over for about 10 years. Since

94% not 98% pardon me, servers, 100% intelligent cars, 77% smartphones, 100% GPS, China (1/3 of mankind) and most industrial robotics (idk percentage yet but assume much more than 95%) are based on nix systems. That means windows has become a sort of niche for deskies computers and lapies-topies ...LOL that is why i did not upgrade my seven  :P

don't worry about my parachute  :D

back to the subject, ... yep it would be fun for lazarus to have its own 'firemonkey' skins like delphi... but due to lhe constraints on the dev team, lack of time and resources, I don't think it would be possible in a near future.
Title: Re: Custom Drawing user interface
Post by: PascalDragon on April 12, 2020, 11:18:08 am
back to the subject, ... yep it would be fun for lazarus to have its own 'firemonkey' skins like delphi... but due to lhe constraints on the dev team, lack of time and resources, I don't think it would be possible in a near future.

@anyone who wants custom themeing in LCL:
Lazarus and the LCL are open source. So why not give the dev team a break (as many said, they have enough to work on already) and implement that yourself and provide that as a patch? It might need a few revisions if the implementation doesn't match the dev team's expectations (so don't give up right away), but in the end everyone might profit from that. :) (a first step might be to improve the custom drawn controls as they can be used with the native widgetsets as well)
Title: Re: Custom Drawing user interface
Post by: furious programming on April 12, 2020, 12:29:46 pm
Noone cares :D

So stop continuing this childish discussion.


Once I said that, and they say that Lazarus must look native.

Must? Because what? At most should, but I can't agree with that anyway. Maybe I should throw Lazarus in the trash, install Visual Studio and start programming in C#? Microsoft doesn't have such stupid restrictions and knows well that a lot of developers need a dark IDE.

Everything is slowly moving towards dark themes — operating systems, web browser skins and site rendering modes, websites themselves, etc. It's high time to adapt, because not everyone likes when the screen burns his eyes with bright colors. Changing the color scheme for source code editor only is not a solution.


Lazarus and the LCL are open source. So why not give the dev team a break (as many said, they have enough to work on already) and implement that yourself and provide that as a patch?

I don't have enough knowledge in the field of LCL internals and platforms to program such a mechanism. And probably a lot of Lazarus users also do not have such knowledge. Understanding hundreds of thousands of lines of code would take months or even years. But LCL dev team has such knowledge and are competent in this field to program skinning system in a much shorter time than someone from the outside (like me).

Reason enough? 8)
Title: Re: Custom Drawing user interface
Post by: jamie on April 12, 2020, 03:14:30 pm
all that is required is to implement more OwnerDraw options in the controls and you make any one of them look like a skin..

 There are only few that don't have that option at this point.

 There is a package called "CustomDrawn" that has some controls in it but it isn't fully implemented, work stopped on it at some point but It has some interfaces for various targets
Title: Re: Custom Drawing user interface
Post by: lainz on April 12, 2020, 05:09:20 pm
We're working since a lot of years on BGRAControls.

We miss only:
- Menu
- Popup Menu
- Edit
- Tab Control (but already done in other packages)

ListBox can be owner drawn, we already made a combobox combining a button and a listbox-

I've added checkbox and radiobutton, that can be themed. We have a numeric edit as well, a progress bar, SVG viewer, image viewer, gif viewer, radial progress bar, a lot of buttons, some with animations as well.

If more people wants to contribute their controls we can add it to the package =)

Custom Drawn package is not updated anymore. I did a full theme for custom drawn, that's available with BGRAControls as well, all with bitmaps like Windows does since it got themes.
Title: Re: Custom Drawing user interface
Post by: furious programming on April 12, 2020, 10:48:11 pm
@lainz: what about skinning the window itself? I mean window border and border content.
Title: Re: Custom Drawing user interface
Post by: lainz on April 13, 2020, 01:15:04 am
@lainz: what about skinning the window itself? I mean window border and border content.

You can use any control for that, buttons and panels for example
https://raw.githubusercontent.com/bgrabitmap/bgracontrols/dev-bgracontrols/docs/img/bgraribbon.png

About any other shape, only possible on Windows AFAIK. But rectangles with custom borders like in the picture works in all major platforms.
Title: Re: Custom Drawing user interface
Post by: furious programming on April 13, 2020, 02:04:53 am
You can use any control for that, buttons and panels for example

That was what I was afraid of.

But even if I set BorderStyle on bsNone and reconstruct the window border, there will still be elements that will be rendered in accordance with the system theme, e.g. the border of the context menu. I would have to reconstruct everything, and it's definitely unprofitable, so it's a shame to even think about it.
Title: Re: Custom Drawing user interface
Post by: lainz on April 13, 2020, 02:17:49 am
I got it, like the different position of close buttons between windows and linux, for example, and the style.
Title: Re: Custom Drawing user interface
Post by: lainz on April 13, 2020, 02:22:14 am
What do you want is to apply a Windows Style file to the entire application, so even dialogs are themed.

There are commercial things to do that in every language, of course commercial, I don't find one for lazarus, and you?
Title: Re: Custom Drawing user interface
Post by: furious programming on April 13, 2020, 12:33:40 pm
What do you want is to apply a Windows Style file to the entire application, so even dialogs are themed.

Exactly. Everything should be possible to be themed — every single part of every single object (component and form).

Quote
There are commercial things to do that in every language, of course commercial, I don't find one for lazarus, and you?

Unfortunately, I didn't find anything sensible either — that's why I'm begging for a skinning system. 8)


Here it should be noted that such a skinning system should work slightly differently than the one known from RAD Studio, mainly because of heaviness and resourcefulness.

First of all, because rendering the interface entirely based on a set of PNG images (worse 32-bit) is inefficient on Windows, so the interface can flicker on weaker computers. Secondly, because it makes no sense to render single-color elements (e.g. component backgrounds) using images, since the same can be achieved using primitives, e.g. Canvas.Rectangle or Canvas.FillRect methods, saving a lot of computing power — which I belive is not possible in RAD Studio. The same for simple gradients — there is a Canvas.GradientFill method, which is much faster than the rendering of stretched image.

In addition, changing the theme should not force the form to be recreated (destroyed and recreated), because it significantly reduces the usability of this system.
Title: Re: Custom Drawing user interface
Post by: PascalDragon on April 13, 2020, 02:17:13 pm
Lazarus and the LCL are open source. So why not give the dev team a break (as many said, they have enough to work on already) and implement that yourself and provide that as a patch?

I don't have enough knowledge in the field of LCL internals and platforms to program such a mechanism. And probably a lot of Lazarus users also do not have such knowledge. Understanding hundreds of thousands of lines of code would take months or even years. But LCL dev team has such knowledge and are competent in this field to program skinning system in a much shorter time than someone from the outside (like me).

Reason enough? 8)

Then learn about it. Both projects, FPC and Lazarus are always in need of new people. And do you think I had a clue about compiler development when I handed in my first patches? No, but that didn't stop me. I'm also not firm in working inside the Lazarus IDE, but that didn't stop me to recently propose a patch for an extension (https://bugs.freepascal.org/view.php?id=36654) and have another (https://lists.lazarus-ide.org/pipermail/lazarus/2019-November/237254.html) in the pipeline that could improve things for component developers in the future.
Title: Re: Custom Drawing user interface
Post by: krolikbest on April 14, 2020, 08:11:03 pm
Nice discussion under the influence of which I thought that I would make a borderless GUI for my applications on Windows and RPi. The similar code example you can find everywhere over internet. In fact in this example there is only a little my effort to create simply form and test it on Win and RPi platform.
Here you can see the result of yesterday's experimentation: https://www.youtube.com/watch?v=RLMNBb2-Yjk (https://www.youtube.com/watch?v=RLMNBb2-Yjk)
TinyPortal © 2005-2018