Recent

Author Topic: Modern UI in Lazarus  (Read 117362 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: 3800
  • 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.
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

winni

  • Hero Member
  • *****
  • Posts: 1992
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: 3563
    • 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: 3800
  • 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 »
https://lainz.github.io/
Download LazPaint https://lazpaint.github.io/
Download BGRABitmap and BGRAControls https://github.com/bgrabitmap

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: 93
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.

mciv

  • New member
  • *
  • Posts: 8
Re: Modern UI in Lazarus
« Reply #251 on: November 09, 2020, 08:50:59 pm »
Hi

I just started with Lazarus. I wanna write game-mod launcher with a graphical user interface based 100% on JPG files - that is when you click a jpg from scrollbox on left it changes displayed jpg in preview area, then clicking the preview pic will copy some ini files to game directory and execute game exe (that part I know how to do). Whole unit (that is logo height + preview picture height) is always 768 since I designed it in 1360x768 resolution in graphic program (all jpgs fit together nicely in terms of proportions). Application is fullscreened with FormActivate doing BorderStyle:=bsNone; WindowState:=wsMaximized; For time being I made it with TImage everywhere with scroll list jpgs onClick activating their corresponding procedures hiding all other preview jpgs and showing the proper one

Code: Pascal  [Select][+][-]
  1. procedure TForm1.ScrollList_JPG_Click_3(Sender: TObject);
  2. begin
  3.   PREVIEW_JPG_1.Hide;
  4.   PREVIEW_JPG_2.Hide;
  5.   PREVIEW_JPG_3.Show;
  6.   PREVIEW_JPG_4.Hide;
  7.   PREVIEW_JPG_5.Hide;
  8.   PREVIEW_JPG_6.Hide;
  9.   PREVIEW_JPG_7.Hide;
  10.   PREVIEW_JPG_8.Hide;
  11.   PREVIEW_JPG_9.Hide;
  12. end;

My goal is that whole composition is always proportionally scaled to 100% screen height and centered (margins being nonrelevant). I've been browsing this forum trying different solutions but nothing seems to work (I understand TImage dimension controls dont't scale bitmap but just the "canvas of control"). For tidiness I like each jpg being an object with it's onclick procedure etc, I also appreciate the fact that jpgs are embedded in lazarus compiled exe and I don't have to keep them as separate files on disk (they won't be big). It would be also nice to have scroller bar being jpg-driven not generic one but that would be more advanced I guess and not really necessary now. Do you have anything in mind which can help? Thanks in advance!

mciv

  • New member
  • *
  • Posts: 8
Re: Modern UI in Lazarus
« Reply #252 on: November 12, 2020, 07:13:16 am »
OK I got this sorted out. I count how many percent of screen an image takes (and should take in any resolution) by dividing image width by screen width in which fullscreen layout was designed (for example 1100/1360), the same with height and top and left positions. Then I activate "stretch" for TImage and apply such code

Code: Pascal  [Select][+][-]
  1. var
  2. Form1: TForm1;
  3. ScreenX,ScreenY: integer;
  4.  
  5. procedure TForm1.FormActivate(Sender: TObject);
  6. begin
  7.   BorderStyle:=bsNone;
  8.   WindowState:=wsMaximized;
  9.   ScreenX:=screen.width;
  10.   ScreenY:=screen.height;
  11.   Logo_Top.Left:=round(ScreenX*0.0955882353);
  12.   Logo_Top.Top:=round(ScreenY*0);
  13.   Logo_Top.Width:=round(ScreenX*0.8088235294);
  14.   Logo_Top.Height:=round(ScreenY*0.21875);
  15.   end;

and the same for other stuff. It would need fixes for different aspect ratios but it's kind of bulletproof for a start. I ain't sure how "Proportional" checkbox works with this solution - height should be dominant.
« Last Edit: November 16, 2020, 08:56:53 am by mciv »

 

TinyPortal © 2005-2018