Recent

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

ps

  • Full Member
  • ***
  • Posts: 131
    • CSS
Re: Modern UI in Lazarus
« Reply #240 on: May 24, 2020, 06:49:38 am »
I can look into int.

Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

lainz

  • Hero Member
  • *****
  • Posts: 3763
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #241 on: May 24, 2020, 01:59:20 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.

I can look into int.

Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion

Hi, I asked @circular the author of BGRABitmap that he can give you a proper answer. Unfortunatelly I have no idea, I'm just a simple user of his library, and don't know the details.

winni

  • Hero Member
  • *****
  • Posts: 1901
Re: Modern UI in Lazarus
« Reply #242 on: May 24, 2020, 03:29:10 pm »
Hi!

Clip a Polygon - or whatever you need:

Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. var tmp : TBGRABitmap;
  3.     poly : ArrayOfTPointF;
  4. begin
  5. tmp := TBGRABitmap.create (width, height, cssWhite);
  6. setLength(Poly,3);
  7. poly[0] := PointF(10,10);
  8. Poly[1] := PointF (tmp.width -10,10);
  9. Poly[2] := PointF (10,Tmp.height - 10);
  10. tmp. ClipRect := Rect (0,0,tmp.width - 100, tmp.height);
  11. tmp.DrawPolygonAntialias(poly,cssBlack,3,cssRed);
  12. tmp.Draw (canvas,0,0);
  13. tmp.free;
  14. end;                      

Winni

ps

  • Full Member
  • ***
  • Posts: 131
    • CSS
Re: Modern UI in Lazarus
« Reply #243 on: May 24, 2020, 04:03:14 pm »
Clip a Polygon - or whatever you need:
Thank's but it's only rect, we need clip region (points of polygon). Tomorow I look into TBGRABitmap
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

circular

  • Hero Member
  • *****
  • Posts: 3508
    • Personal webpage
Re: Modern UI in Lazarus
« Reply #244 on: May 24, 2020, 05:07:03 pm »
BGRABitmap doesn't do polygonal clipping as such. Though you can achieve the same effect by using masks.

Code: Pascal  [Select][+][-]
  1. uses BGRABitmap, BGRABitmapTypes, BGRAGrayscaleMask;
  2.  
  3. { TForm1 }
  4.  
  5. procedure TForm1.FormPaint(Sender: TObject);
  6. var tmp, layer: TBGRABitmap;
  7.     mask: TGrayscaleMask;
  8.     poly : ArrayOfTPointF;
  9. begin
  10.   layer := TBGRABitmap.Create(clientwidth, clientheight, BGRAPixelTransparent);
  11.   setLength(Poly,3);
  12.   poly[0] := PointF(10, 10);
  13.   Poly[1] := PointF(layer.width-10, 10);
  14.   Poly[2] := PointF(10, layer.height-10);
  15.   layer.DrawPolygonAntialias(poly, cssBlack, 3, cssRed);
  16.  
  17.   mask := TGrayscaleMask.Create(clientwidth, clientheight, TByteMask.New(0));
  18.   mask.FillEllipseAntialias(mask.Width/2-0.5, mask.Height/2-0.5,
  19.                             mask.Width/2, mask.Height/2, TByteMask.New(255));
  20.   layer.ApplyMask(mask);
  21.   mask.Free;
  22.  
  23.   tmp := TBGRABitmap.create (clientwidth, clientheight, cssWhite);
  24.   tmp.PutImage(0,0, layer, dmDrawWithTransparency);
  25.   tmp.Draw (canvas,0,0);
  26.   tmp.free;
  27. end;  
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 3763
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #245 on: May 24, 2020, 10:04:23 pm »
I tried to add BGRABitmap to CSS_package but I did it badly, at least to try.  :)

Things are drawn antialiased, but badly, seems that I did not setup the brush correctly... also it's slow because it creates and releases a bitmap each time, must be created and destroyed anywhere else only when neccessary.

Code: Pascal  [Select][+][-]
  1. bmp := TBGRABitmap.Create(TargetCanvas.Width, TargetCanvas.Height, BGRAPixelTransparent);
  2.     bmp.DrawPolygonAntialias(Ta, AColor);
  3.     bmp.Draw(ACanvas, 0, 0, False);
  4.     bmp.Free;
  5.     //TargetCanvas.Polygon(Ta);

Edit: oops, like a newby error, I created the bitmap with the size of the entire canvas each time it needs to draw  :-[

It should be replacing the ACanvas like ABGRABitmap, so instead of passing the canvas parameter in the drawing function, it must pass the BGRABitmap and draw into it, then when all the drawings are done in the TBGRABitmap, draw that to the final canvas.  :)

In other words: the bitmap must be created only once with the size of the target canvas, then draw in the BGRABitmap object, draw to final canvas and free it.
« Last Edit: May 24, 2020, 11:52:06 pm by lainz »

fabiopesaju

  • Jr. Member
  • **
  • Posts: 79
Re: Modern UI in Lazarus
« Reply #246 on: September 12, 2020, 02:08:46 am »
please, i would like to know about the progress of this project...

ps

  • Full Member
  • ***
  • Posts: 131
    • CSS
Re: Modern UI in Lazarus
« Reply #247 on: September 25, 2020, 11:16:32 am »
fabiopesaju: development is paused (no free time :( ). In November I will continue to work on this project.
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

alaa123456789

  • Jr. Member
  • **
  • Posts: 87
Re: Modern UI in Lazarus
« Reply #248 on: September 25, 2020, 02:35:58 pm »
hey all , it seems interesting subject  :D , especially LCL + Css
but could we please make it more simple for the JR guys like me , how to implement this from a to z (installation to small sample)

thanks
Alaa

Onur2x

  • New Member
  • *
  • Posts: 10
Re: Modern UI in Lazarus
« Reply #249 on: September 25, 2020, 08:45:14 pm »
https://github.com/Onur2x/onurcomp
It's an unfinished project but I haven't been able to deal with it lately. you can check it. Uses bgrabitmap.

tr_escape

  • Sr. Member
  • ****
  • Posts: 411
  • sector name toys | respect to spectre
    • Github:
Re: Modern UI in Lazarus
« Reply #250 on: September 25, 2020, 10:07:56 pm »
https://github.com/Onur2x/onurcomp
It's an unfinished project but I haven't been able to deal with it lately. you can check it. Uses bgrabitmap.

Dear Onur,

My humble advice do not use your native language in your global components like as:

https://github.com/Onur2x/onurcomp/blob/b76aca20f1a317e871a0cf5114c3d16bb37df79c/onurbutton.pas#L974

instead of use as possible as do you in English like as below:

Code: Pascal  [Select][+][-]
  1.     property ONBASILI: TONCUSTOMCROP read FBasili write FBasili;
  2.     property ONUZERINDE: TONCUSTOMCROP read FUzerinde write FUzerinde;
  3.     property ONPASIF: TONCUSTOMCROP read FPasif write FPasif;
  4.  

--->

Code: Pascal  [Select][+][-]
  1.     property ONPRESSED: TONCUSTOMCROP read FPressed write FPressed;
  2.     property ONOVER: TONCUSTOMCROP read FOver write FOver;
  3.     property ONPASIVVE: TONCUSTOMCROP read FPasivve write FPasivve;
  4.  

Because you have to repeat again why did you create your variable or methods to other people.

Have a good coding.

 

TinyPortal © 2005-2018