Recent

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

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #180 on: November 18, 2019, 11:42:43 pm »
Lainz i want  comunication beetwen Pascal and Web Gui .. 
i dont want Convert Pascal code to Javascript.   

I think its will be more advaged from Lazarus Gui
You can Prepare Gui with HTML , CSS , Javascipt  and Javascript Frameworks  and show Your Gui All in one Form ..

I did not reply to this in time, but now I know how to do it.

Create a command line server with Pascal
https://wiki.lazarus.freepascal.org/fpWeb_Tutorial

That local server must do 2 things:
- Serve the HTML, CSS, JS files
- Serve the Endpoints

Call the endpoints from the HTML site with fetch (or anything else)
https://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

To receive the JSON from the site you can use this
https://wiki.freepascal.org/fcl-json

So basically you can handle business logic and database with Pascal, and only the interface with HTML and JS, without using Pas2JS.

You can use the default browser or ship everything with Electron JS, but normally using the installed browser in the system will do.

Edit: I say local server because is the way I did for a commercial application, the end user PC was the server, but you can put the server application into a web server and call the endpoints the same way.

Edit 2: Better use Electron if your application will also fetch web resources from third party websites from javascript, or you will get CORS problems, tested now with a web app I did with Electron, using it from the serving of files with fpweb causes this kind of problems, with Electron there are no problems on fetching third party websites stuff.
« Last Edit: November 19, 2019, 03:13:43 am by lainz »

tr_escape

  • Sr. Member
  • ****
  • Posts: 432
  • sector name toys | respect to spectre
    • Github:
Re: Modern UI in Lazarus
« Reply #181 on: November 19, 2019, 07:02:20 am »
Your project not worked for me but I little bit modified for my configuration (Lazarus 2.0.6 r62129 FPC 3.0.4 x86_64-win64-win32/win64)

You can find in attach.


zamronypj

  • Full Member
  • ***
  • Posts: 133
    • Fano Framework, Free Pascal web application framework
Re: Modern UI in Lazarus
« Reply #182 on: November 19, 2019, 09:32:12 am »

Edit 2: Better use Electron if your application will also fetch web resources from third party websites from javascript, or you will get CORS problems, tested now with a web app I did with Electron, using it from the serving of files with fpweb causes this kind of problems, with Electron there are no problems on fetching third party websites stuff.

CORS is issue between browser and server. If you fetch data using fphttpclient or curl, it does not matter if server send appropriate CORS header or not.
Fano Framework, Free Pascal web application framework https://fanoframework.github.io
Apache module executes Pascal program like scripting language https://zamronypj.github.io/mod_pascal/
Github https://github.com/zamronypj

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #183 on: November 19, 2019, 02:48:48 pm »

Edit 2: Better use Electron if your application will also fetch web resources from third party websites from javascript, or you will get CORS problems, tested now with a web app I did with Electron, using it from the serving of files with fpweb causes this kind of problems, with Electron there are no problems on fetching third party websites stuff.

CORS is issue between browser and server. If you fetch data using fphttpclient or curl, it does not matter if server send appropriate CORS header or not.

For that I specifically said from JavaScript.

Mocte

  • New Member
  • *
  • Posts: 21
Re: Modern UI in Lazarus
« Reply #184 on: November 20, 2019, 12:52:40 am »
Very nice !  keep going.

After long long time(years) I have few days to build my "dream" of bring modern UI to LCL. I'm not finished yet. But progress is promising.

Inspiration:
https://appstack.bootlab.io/dashboard-default.html

I have two units (cssbase - parsing css, and layouting nodes(elements)) and CSSCtrls (now with only one control TCSSShape).

With only few basic css styles we can create complicated "controls". No more OnPaint for me :).

Working hard (in free time) to finish this my little baby.


Next step is implementing CSS class for better styling control.

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #185 on: November 21, 2019, 12:48:53 am »
Basic css class support done. So adding buttons like in bootstrap is easy https://getbootstrap.com/docs/4.0/components/buttons/ Now I see the light at the end of the tunnel :)

StyleSheet declaration:
Code: Pascal  [Select][+][-]
  1.   FCSS := TCSSStyleSheet.Create(Self);
  2.   FCSS.Style := '.expanded {display:block;} .collapsed {display:none;}' +
  3.     '.btn {margin:10px; padding:5px 10px; cursor:pointer; color:white;}' +
  4.     '.btn-lg {font:20px;}' +
  5.     '.btn-sm {font:7px;}' +
  6.     '.btn-group {border:2px solid black; border-right:0px solid green; margin:0px;}' +
  7.     '.btn-group:last-child {border-right:2px solid black;}' +
  8.     '.btn-primary {background-color: #007BFF;} .btn-primary:hover {background-color: #0069D9;}' +
  9.     '.btn-secondary {background-color: #6C757D;} .btn-secondary:hover {background-color: red;}' +
  10.     '.btn-success {background-color: #28A745;}' +
  11.     '.btn-danger {background-color: #DC3545;}' +
  12.     '.btn-warning {background-color: #FFC107;}' +
  13.     '';      

now we can create some buttons (yes! with group support):
Code: Pascal  [Select][+][-]
  1.   sh.Body.AddNode( HTMLSpan('display:block;font:20px;','Standard'));
  2.   sh.Body.AddNode( HTMLSpan('','Primary').SetClass('btn btn-primary'));
  3.   sh.Body.AddNode( HTMLSpan('','Secondary').SetClass('btn btn-secondary'));
  4.   sh.Body.AddNode( HTMLSpan('','Success').SetClass('btn btn-success'));
  5.   sh.Body.AddNode( HTMLSpan('','Danger').SetClass('btn btn-danger'));
  6.   sh.Body.AddNode( HTMLSpan('','Warning').SetClass('btn btn-warning'));
  7.  
  8.   sh.Body.AddNode( HTMLSpan('display:block;font:20px;','Big'));
  9.   sh.Body.AddNode( HTMLSpan('','Primary').SetClass('btn btn-primary btn-lg'));
  10.   sh.Body.AddNode( HTMLSpan('','Secondary').SetClass('btn btn-secondary btn-lg'));
  11.   sh.Body.AddNode( HTMLSpan('','Success').SetClass('btn btn-success btn-lg'));
  12.   sh.Body.AddNode( HTMLSpan('','Danger').SetClass('btn btn-danger btn-lg'));
  13.   sh.Body.AddNode( HTMLSpan('','Warning').SetClass('btn btn-warning btn-lg'));
  14.   sh.Body.AddNode( HTMLSpan('display:block;',''));
  15.  
  16.   sh.Body.AddNode( HTMLSpan('display:block;font:20px;','Small'));
  17.   sh.Body.AddNode( HTMLSpan('','Primary').SetClass('btn btn-primary btn-sm'));
  18.   sh.Body.AddNode( HTMLSpan('','Secondary').SetClass('btn btn-secondary btn-sm'));
  19.   sh.Body.AddNode( HTMLSpan('','Success').SetClass('btn btn-success btn-sm'));
  20.   sh.Body.AddNode( HTMLSpan('','Danger').SetClass('btn btn-danger btn-sm'));
  21.   sh.Body.AddNode( HTMLSpan('','Warning').SetClass('btn btn-warning btn-sm'));
  22.   sh.Body.AddNode( HTMLSpan('display:block;',''));
  23.  
  24.   sh.Body.AddNode( HTMLSpan('display:block;font:20px;','Group'));
  25.   container := THtmlNode.Create('');
  26.   container.AddNode( HTMLSpan('','Primary').SetClass('btn btn-group btn-primary'));
  27.   container.AddNode( HTMLSpan('','Secondary').SetClass('btn btn-group btn-secondary'));
  28.   container.AddNode( HTMLSpan('','Success').SetClass('btn btn-group btn-success'));
  29.   container.AddNode( HTMLSpan('','Danger').SetClass('btn btn-group btn-danger'));
  30.   container.AddNode( HTMLSpan('','Warning').SetClass('btn btn-group btn-warning'));
  31.   sh.Body.AddNode(container);
  32.  
  33.   sh.Body.ApplyStyles;  
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

rca

  • Jr. Member
  • **
  • Posts: 67
Re: Modern UI in Lazarus
« Reply #186 on: November 21, 2019, 03:02:17 am »
now we can create some buttons (yes! with group support)

@ps

Wow, it's very good.

Congratulations on your excellent work!

Visually gives a modern visual to the programs made with lazarus.

tr_escape

  • Sr. Member
  • ****
  • Posts: 432
  • sector name toys | respect to spectre
    • Github:
Re: Modern UI in Lazarus
« Reply #187 on: November 21, 2019, 06:51:13 am »
Basic css class support done. So adding buttons like in bootstrap is easy https://getbootstrap.com/docs/4.0/components/buttons/ Now I see the light at the end of the tunnel :)

Could you please update your source codes in this forum or github repo,  I would like to test it.

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #188 on: November 21, 2019, 10:51:40 am »
Could you please update your source codes in this forum or github repo,  I would like to test it.
I think there is no mature for github :). Please fix project for your lazarus (I have SVN version).

Updated demo with class support for toglle, added some more comments in code.
Code: Pascal  [Select][+][-]
  1.   Node := THtmlNode(Sender);  // this is 'header' node
  2.   Node.ClassList.Toggle('side-btn-active');
  3.   Node.ApplyStyle;
  4.   Node := Node.GetNext(Node); // next sibling is 'container' (see AddItem in FormCreate)
  5.   Node.ClassList.Toggle('expanded');
  6.   Node.ApplyStyle;
  7.   TCSSShape(Node.RootNode.ParentControl).Changed; // relayout and repaint  

There is few bugs with baseline alignment as you can see in screenshot (I'm new to CSS and HTML, learning with implementation :) )
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 #189 on: November 23, 2019, 01:22:51 am »
What do you think about using BGRABitmap to have more things like SVG support, rounded borders and effects like blur or shadows?

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #190 on: November 23, 2019, 08:40:59 am »
I have this in mind. As you can see in source. I would like to separate calculations and rendering. cssbase.pas only parse css and do layout position. This must be without any dependencies. So we can use this to layout Android, etc controls or in any target. Now I'm starting to work on basic shape (poly path) generation for background, corners (rounded, non same border widths),  etc. There will be final paths to render.

Some cases we can't render using standard TCanvas, or rendering is not smooth (rounded corners). But I would like to do this (only basic rounding). As you can see in attachment. My Idea (for TCanvas) painting is divide required parts into TBitmaps and paint this parts with 4x or 8x size and than scale it down to do some "antialiasing". This is good for example when I create TPanel with CSS support and TPanel is HUGE in size and too often overlayed with many controls and we need paint only 4 small corners :) .

Please look at THTTPFa implementation. SVG (using BGRABitmap) implementation can be similar.

I don't know if will be better to do some support for rendering engine (TRenderLCL, TRenderBGRA ...) or create separate controls (TBGRACssShape ..). Some cases Can't be implemented without advanced renderer. So example Transform, Blur etc. And this enhanced renderer will be cool for as you mentioned SVG support or shadow blur etc. for "smaller" controls . etc. In my point of view this will be nice to have.

I would like to combine LCL with CSS in many cases:

1. Only "style" support as

  TCSSButton.CSS.InlineStyle := 'color:red;margin:30px;';
  TCSSButton.ApplyStyle;  //-> this will use CSS as parameters for LCL control -> Self.Font.Color := clRed; Self.BorderSpacing.Left := 30px; Self.BorderSpacing.Right := 30px; ...

2. layouter
  TCSSPanel.CSS.InlineStyle := 'display:flex';  // -> Panel have custom AlignControls and
 
3. OnPaint replacement in any LCL control
   TListBoxItem for example. Use CSS layout and css rendering to Measure Height, and in OnPaint to render.

4. Enhanced control (like in source code is TCSSShape)

5. As Helper for custom Controls
   For example I would like to create TButton with Top text, left Icon, right icon and etc. I can create classic control with "css inside"
Code: Pascal  [Select][+][-]
  1.    TMyCoolButton = class(TCustomButton)
  2.    private
  3.      Froot,
  4.      FLeftIcon,
  5.      FRightIcon, FTopText: THtmlNode;
  6.   ...
  7.      procedure CalculatePrefferedSize ( .... )
  8.      begin
  9.        Froot.LayouTo(AWidth, AHeight);
  10.      end;
  11.      procedure Paint ( .... ); override;
  12.      begin
  13.        Froot.PaintTo(Self.Canvas, ClientRect);
  14.      end;
  15.     procedure SetIconColor(AValue: TColor);
  16.     begin
  17.       FLeftIcon.InlineStyle := 'color:#' + LCLToHtml(AValue);
  18.       FRoot.Changed;
  19.     end;
  20.  
  21.   published
  22.     property TopText: String read ... write ;
  23.     property LeftIconColor: TColor read write ;

6. etc :)
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

avra

  • Hero Member
  • *****
  • Posts: 2514
    • Additional info
Re: Modern UI in Lazarus
« Reply #191 on: November 23, 2019, 01:10:21 pm »
Some cases we can't render using standard TCanvas, or rendering is not smooth (rounded corners). But I would like to do this (only basic rounding). As you can see in attachment. My Idea (for TCanvas) painting is divide required parts into TBitmaps and paint this parts with 4x or 8x size and than scale it down to do some "antialiasing".
Antialiased drawing would probably be much faster then nonantialiased drawing big then scaling down. Here are some hints:
https://delphi-kb.blogspot.com/2007/11/draw-antialiased-circles.html
https://duckduckgo.com/?q=antialiased+drawing+delphi

Btw. Nice work  ;)
ct2laz - Conversion between Lazarus and CodeTyphon
bithelpers - Bit manipulation for standard types
pasettimino - Siemens S7 PLC lib

Thaddy

  • Hero Member
  • *****
  • Posts: 14201
  • Probably until I exterminate Putin.
Re: Modern UI in Lazarus
« Reply #192 on: November 23, 2019, 01:39:39 pm »
Antialiased drawing would probably be much faster then nonantialiased drawing big then scaling down. Here are some hints:
Well, no: it is in any way often based on a form of oversampling, either through some complex mathematics directly and / or drawing big.
Specialize a type, not a var.

avra

  • Hero Member
  • *****
  • Posts: 2514
    • Additional info
Re: Modern UI in Lazarus
« Reply #193 on: November 24, 2019, 12:56:13 am »
Antialiased drawing would probably be much faster then nonantialiased drawing big then scaling down. Here are some hints:
Well, no: it is in any way often based on a form of oversampling, either through some complex mathematics directly and / or drawing big.
I wouldn't call subpixel calculation of DeltaX and DeltaY for coloring pixels in integer based coordinating system a complex math. We just need to antialias drawing of a small 1/4 circle in 4 corners of a rectangle (or draw full circle and then copy 1/4 of the circle to each corner). How can that be slower then drawing the same without aliasing in a big scale and then rescalling it down? Besides that, rescaling would also make our straight lines being antialiased too, and that might not be what we want. And what about quality of rescaling? We would need rescaling to be eye pleasing, and high quality rescaling algorithms are so much slower then the fast ones.
http://en.wikipedia.org/wiki/Xiaolin_Wu%27s_line_algorithm
http://www.google.com/search?q=Xiaolin%20Wu%20circle
https://yellowsplash.wordpress.com/2009/10/23/fast-antialiased-circles-and-ellipses-from-xiaolin-wus-concepts/
« Last Edit: November 24, 2019, 01:12:53 am by avra »
ct2laz - Conversion between Lazarus and CodeTyphon
bithelpers - Bit manipulation for standard types
pasettimino - Siemens S7 PLC lib

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #194 on: November 24, 2019, 11:49:02 am »
My firends. Speed is not crucial for me now. Why?
1. in many scenarios there will be very small rounding corners (buttons, decorations...).
2. i'm caching this rendered "corners" (this is not good for overlayed nodes ...)
3. there is no line painting! Rounded corners are not lines, or ellipses! We must paint poly. (see target-borders.png)
4. for other advanced painting we must use BRGB, AggPas ... (alphablending, blur etc.)

Please look at example from first antialiasing implementation. Blue rectangle in debug mode is TBitmap painted 8x size and down scaled.
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

 

TinyPortal © 2005-2018