Recent

Author Topic: Modern UI in Lazarus  (Read 190344 times)

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #225 on: April 28, 2020, 08:41:32 pm »
@lainz: nice, but this is not correct way how to work with LCL

WHY?

1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #226 on: April 28, 2020, 08:46:08 pm »
they are scattered throughout this post, here are two links. When I tried one of them, I was having a hard time getting the glyphs working as @ps shows in his screenshots and haven't had too much time to look more into it.
You must place 'fontawesome-webfont.ttf into your project dir (https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip)

This ugly code is in cssctrls.pas :)
Code: Pascal  [Select][+][-]
  1.   // TODO: this is not best way!
  2.   if FileExists(Application.Location + 'fontawesome-webfont.ttf') then  FAFont.Name :=  Application.Location + 'fontawesome-webfont.ttf';
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

mr-highball

  • Full Member
  • ***
  • Posts: 233
    • Highball Github
Re: Modern UI in Lazarus
« Reply #227 on: April 28, 2020, 09:21:48 pm »
Ahh good to know, thanks @ps

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #228 on: April 28, 2020, 10:53:31 pm »
@lainz: nice, but this is not correct way how to work with LCL

WHY?

1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423

Thanks, I found it slow. Nothing like real HTML, CSS.

Seems that the design of the LCL based on the VCL is something that is not meant to be used like that.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #229 on: April 29, 2020, 05:07:56 am »
@lainz: nice, but this is not correct way how to work with LCL

WHY?

1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423

Maybe you can modify it using your css library?

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #230 on: April 29, 2020, 08:33:46 am »
Maybe you can modify it using your css library?
There will be same problems (onmouse enter/leave, and repainting whole scrollbox ...). Take a look attachment (no time to style :) )
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #231 on: April 29, 2020, 04:13:48 pm »
@lainz:
Here you are styled version. (Search don't work yet). Please note you must build project as release verision due autosize degug slow down while resizing. Without TWinControl sizing performance is nice :)

There is some nice CSS positiong (nearly impossible to do with LCL).

Maybe next level is generate HTML/CSS and build for desktop and for web with PS2JS :)
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #232 on: April 29, 2020, 04:21:29 pm »
And for all :)

There is multiple TCSSShape placed on TScrollbox. Each TCSSShape is LCL control, there is no web page. We can render so small LCL controls with CSS only as bacground color, or border line or do more complex painting like in this example. TCSSSHape support on hover and clicking by native.

THtmlNode  can be used as renderer anywhere (OnPaint, OnDrawItem ... etc.).
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #233 on: April 29, 2020, 08:11:40 pm »
Ok, @lainz here you are full version with search fixed. And others can use it as example :)

In code there is one bug. In CSS all class priority is as typed, but I have implementation with sort by name (A,B...Z) so little trick is used for naming of class like here to highlight nodes:

Instead of name "selected" I'm using "zselected" due this bug :(

Code: Pascal  [Select][+][-]
  1.         if Pos( LowerCase(edtSearch.Text), LowerCase(Node.Text)) > 0 then begin
  2.           Result := True;
  3.           Node.ClassList.Add('zselected');
  4.         end else Node.ClassList.Remove('zselected');  
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #234 on: April 30, 2020, 06:18:58 pm »
Cool. Thanks =)

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #235 on: May 01, 2020, 02:53:15 pm »
You are welcome. I have fixed control alignment in CSS so you can check new "feature" in your app with integrated search box with tags filter. So easy so simple with few lines of code.

Latest CSS lib is required to test this.
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #236 on: May 01, 2020, 03:17:10 pm »
Wow =) That's really cool.

bpp

  • New Member
  • *
  • Posts: 16
Re: Modern UI in Lazarus
« Reply #237 on: May 12, 2020, 06:35:22 pm »
Hi!

Is it correct, use TPanels to build simple flat menus like we saw on first post?

It's look's modern to me, and easy to do...

Any cons?

Thanks

Thaddy

  • Hero Member
  • *****
  • Posts: 14205
  • Probably until I exterminate Putin.
Re: Modern UI in Lazarus
« Reply #238 on: May 12, 2020, 06:59:07 pm »
You can also use clickable regions. That only requires a canvas. Or even a framebuffer.
PointInRect etc...very lightweight too at the expense of taking some more time to get it right, and no visual components. But it works.
« Last Edit: May 12, 2020, 07:03:14 pm by Thaddy »
Specialize a type, not a var.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #239 on: May 23, 2020, 09:57:34 pm »
@ps really nice, I've created a bug report to see if you're interested on using BGRABitmap to draw, to add more things like gradients, antialiasing and transparency.

We're working on a set of controls for MSEide and LCL, but I think that we can speed up the development if we use your library. Is more easy to composite things with your CSS library.

 

TinyPortal © 2005-2018