Recent

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

Thaddy

  • Hero Member
  • *****
  • Posts: 14204
  • Probably until I exterminate Putin.
Re: Modern UI in Lazarus
« Reply #165 on: November 20, 2017, 04:36:52 pm »
Well the link works correct, I will check it out again..... Christiano...

But I can't see any contribution to the subject here....

As I stated before (with my two seconds project), as long as you are proficient you can have any "modern" look you want.
I happen to like steampunk...
Specialize a type, not a var.

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #166 on: November 25, 2017, 11:49:05 pm »
Well the link works correct, I will check it out again..... Christiano...

But I can't see any contribution to the subject here....

As I stated before (with my two seconds project), as long as you are proficient you can have any "modern" look you want.
I happen to like steampunk...

I do not agree with you last time, but is true, here is my sample for modern ui. Material Design dialog with BGRAControls. Project attached and screenshot. Requires roboto font installed, you can download it on Windows with SkyFonts application.

Edit: for better looking fonts (at least looks better on Windows) change the font style for each element to fqFineClearTypeRGB.
« Last Edit: November 25, 2017, 11:52:29 pm by lainz »

TheEditor

  • New Member
  • *
  • Posts: 22
Re: Modern UI in Lazarus
« Reply #167 on: November 26, 2017, 03:42:31 am »
I'm a Lazarus newbie who needs a little help. I used fpcupdeluxe to install the BGRA packages, but when I try to run your demo I get a compile error on the Application.Scaled statement. Can't find the Scaled property in lazarus_ui.lpr. I'm thinking something went wrong with the BGRA installation.

Edit: for better looking fonts (at least looks better on Windows) change the font style for each element to fqFineClearTypeRGB.

molly

  • Hero Member
  • *****
  • Posts: 2330
Re: Modern UI in Lazarus
« Reply #168 on: November 26, 2017, 05:54:05 am »
..., but when I try to run your demo I get a compile error on the Application.Scaled statement. Can't find the Scaled property in lazarus_ui.lpr. I'm thinking something went wrong with the BGRA installation.
Nope. Something went wrong with your version of Lazarus ;-)

property scaled was added to TAplication by Ondrej @ revision 54199

Update your Lazarus... (lazarus 1.9 from trunk)
« Last Edit: November 26, 2017, 06:07:58 am by molly »

TheEditor

  • New Member
  • *
  • Posts: 22
Re: Modern UI in Lazarus
« Reply #169 on: November 26, 2017, 09:18:12 pm »
It took awhile, but I got the trunk installed. I installed bgrabitmap installed and was able to run the demo, thanks.

serkank

  • Newbie
  • Posts: 2
Re: Modern UI in Lazarus
« Reply #170 on: May 18, 2018, 03:28:05 pm »
Hi.  i want to make gui with HTML+JAVASCRIPT+CSS  and use this gui with Lazarus..  Is there a library for it ?

For example  if user click HTML button its will call Pascal function...


i was saw lainz wrote somethings about it but i didnt understand good.. 



Phil

  • Hero Member
  • *****
  • Posts: 2737
Re: Modern UI in Lazarus
« Reply #171 on: May 18, 2018, 03:32:22 pm »
Hi.  i want to make gui with HTML+JAVASCRIPT+CSS  and use this gui with Lazarus..  Is there a library for it ?

For example  if user click HTML button its will call Pascal function...


i was saw lainz wrote somethings about it but i didnt understand good..

You can now write Web apps (what you're describing) in Pascal. See parts 1 and 4 in Web App Development Overview here:

https://macpgmr.github.io/

(Note you should probably have started a new topic.)

lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #172 on: May 18, 2018, 11:45:24 pm »
If you can make a web application, and forget using Electron at all, do it.

If not (for example your app needs to constantly work with local files), make a node.js app with Lazarus, convert it with Pas2JS, and make the UI with any framework you want (React, Angular, Vue, or Vanilla JS).

serkank

  • Newbie
  • Posts: 2
Re: Modern UI in Lazarus
« Reply #173 on: May 21, 2018, 08:10:48 am »
Thank you phil & Lainz .. 

Quote
If you can make a web application, and forget using Electron at all, do it.

If not (for example your app needs to constantly work with local files), make a node.js app with Lazarus, convert it with Pas2JS, and make the UI with any framework you want (React, Angular, Vue, or Vanilla JS).

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


lainz

  • Hero Member
  • *****
  • Posts: 4460
    • https://lainz.github.io/
Re: Modern UI in Lazarus
« Reply #174 on: May 29, 2018, 08:03:20 pm »
I tested pas2js, and I can't convert a simple project due to dependencies. I don't say that doesn't works, it works but not for the project I wanted to convert, that was using this library (https://github.com/nikosdion/timecode).

I'm using brook framework, you can make an API to retrieve data and do actions in the server, then the GUI can be any website.

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #175 on: November 14, 2019, 09:56:57 am »
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.

Source code to generate "charts" on right side:
Code: Pascal  [Select][+][-]
  1. procedure TForm1.Button1Click(Sender: TObject);
  2. var
  3.   sh: TCSSShape;
  4.   procedure AddChart(AIcon, AIconColor, AValue, AText: String);
  5.   var
  6.     container, icon, body, node: THtmlNode;
  7.     btn: TButton;
  8.   begin
  9.     container := THtmlNode.Create('display:inline-block; background-color:white;margin:20px;padding:20px;border:1px solid #F1F5F9;');
  10.     container.Id := 'container';
  11.       icon := THtmlNode.Create('display:inline-block;');
  12.       icon.Id := 'icon';
  13.       icon.AddNode( HTMLFa('font:40px;padding:10px;color:'+AIconColor+';', AIcon, 'faicon'));
  14.       body := THtmlNode.Create('display:inline-block;');
  15.       body.AddNode( HTMLSpan('display:block;font:20px;color:black;', AValue));
  16.       body.AddNode( HTMLSpan('font:10px;color:rgb(73, 80, 87);', AText));
  17.  
  18.       btn := TButton.Create(Self);
  19.       btn.Caption := 'I''m LCL!';
  20.       btn.AutoSize := True;
  21.       btn.Align := alCustom;
  22.       btn.Parent := HomeScrollBox;
  23.       node := THtmlNode.Create('display:inline-block;margin-left:20px;');
  24.       node.AlignControl := btn;
  25.       body.AddNode(node);
  26.  
  27.       container.AddNode(icon);
  28.     container.AddNode(body);
  29.     sh.Body.AddNode( container);
  30.   end;
  31. begin
  32.   sh := TCSSShape.Create(Self);
  33.   sh.AutoSize := True;
  34.   sh.Top := 0;
  35.   sh.Align := alTop;
  36.   sh.Body.InlineStyle := 'margin:10px;';
  37.     AddChart('f07a', '#47BAC1', '2.562', 'Sales Today');
  38.     AddChart('f201', '#FCC100', '17.212', 'Visitors Today');
  39.     AddChart('f153', '#5FC27E', '$ 24.300', 'Total Earnings');
  40.   sh.Parent := HomeScrollBox;
  41. end;        
In this case there is only one LCL control and 3 main boxes (containers). As  you can see, we can have standard LCL control "inside" non TWinControl (TCSSSHape is TGraphicControl) and CSS control layout even this control correctly!


But Left "menu" is placed on another LCL TScrollBox and each "menu item" is LCL control (TCSSShape). Code to generate this left panel is here:

Code: Pascal  [Select][+][-]
  1.   procedure AddItem(AName: String; AIcon: String);
  2.   var
  3.     Item: TCSSShape;
  4.   begin
  5.     Item := TCSSShape.Create(Self);
  6.     Item.Align := alTop;
  7.     Item.AutoSize := True;
  8.     Item.Body.InlineStyle := 'color:rgb(173, 181, 189);';
  9.     Item.Body.HoverStyle := 'background-color:#2D3646; color:#e9ecef;';
  10.     Item.Body.OnClick := @Button1Click;    // click on whole "button"
  11.  
  12.     if AIcon = '' then AIcon := 'f2b9';
  13.     Item.Body.AddNode( HTMLFa('font:18px;margin-left:20px;', AIcon));  // left category icon
  14.     Item.Body.AddNode( HTMLSpan('font:10px; padding:15px 10px; padding-right:0px;', AName)); // category caption
  15.     Item.Body.AddNode( HTMLFa('font:15px;', 'f107'));               // drop down icon
  16.  
  17.     // some random badges
  18.     if MenuScrollBox.ControlCount mod 4 = 0 then Item.Body.AddNode( HTMLSpan('font:7px;margin-left:10px; padding:2px 5px; color:white; background-color:#47BAC1', 'New'))
  19.     else
  20.     if MenuScrollBox.ControlCount mod 3 = 0 then  Item.Body.AddNode( HTMLSpan('font:7px;margin-left:10px; padding:2px 5px; color:white; background-color:#A180DA', 'Special'));
  21.     Item.Parent := MenuScrollBox;
  22.     Item.Top :=  1000 + MenuScrollBox.ControlCount;
  23.   end;
  24. var
  25.   sh: TCSSShape;
  26. begin
  27.   AddLogo;
  28.   AddItem('Dashboard', 'f080');
  29.   AddItem('Pages','f0f6');
  30.   AddItem('Auth', 'f084');
  31.   AddItem('Layouts', 'f26c');
  32.   AddItem('Forms', 'f2d2');
  33.   AddItem('Icons', 'f08a');
  34.   AddItem('Tables', 'f0ce');
  35.   AddItem('Buttons', 'f0ca');
  36.   AddItem('Calendar', 'f073');
  37.   AddItem('Maps', 'f278');
  38.   AddItem('Settings', 'f013');  

Next step is implementing CSS class for better styling control.
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 #176 on: November 14, 2019, 01:42:03 pm »
Really good =)

xinyiman

  • Hero Member
  • *****
  • Posts: 2256
    • Lazarus and Free Pascal italian community
Re: Modern UI in Lazarus
« Reply #177 on: November 14, 2019, 01:46:07 pm »
Really nice. Is there a test to try?

Win10, Ubuntu and Mac
Lazarus: 2.1.0
FPC: 3.3.1

ps

  • Full Member
  • ***
  • Posts: 136
    • CSS
Re: Modern UI in Lazarus
« Reply #178 on: November 14, 2019, 07:49:06 pm »
Thank's guys. Source code will be released here: https://github.com/pst2d/csscontrols this weekend. Whole lib is less than 2000 lines of code. It's less than my stanard TCustomButton with 2-glyphs. I can't believe that I have no time for this for 4 years ...
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 #179 on: November 18, 2019, 09:08:34 pm »
No time for full github release. Please look at attachments. All source code with this example is here. Don't forget download fontawesome-webfont.ttf (4.7) into \lazarus\dashboard example directory. Maybe there is time to create new topic :)

Little example how to create "expand" function for subitems ... CSS + LCL rules! :)

Code: Pascal  [Select][+][-]
  1. procedure TForm1.OnItemClick(Sender: TObject);
  2. var
  3.   Node: THtmlNode;
  4. begin
  5.   Node := THtmlNode(Sender);  // this is 'header' node
  6.   Node := Node.GetNext(Node); // next sibling is 'container' (see AddItem in FormCreate) with "display:none"
  7.   if Node.CompStyle.Display = cdtBlock then       // change current computed style
  8.     Node.CompStyle.Display := cdtNone
  9.   else
  10.     Node.CompStyle.Display := cdtBlock;
  11.   Node.Style.Display := Node.CompStyle.Display;   // change "default" style (after no more :hover)
  12.   TCSSShape(Node.RootNode.ParentControl).Changed; // relayout and repaint
  13. end;  

Font download link: https://fontawesome.com/v4.7.0/get-started/?utm_source=fontawesome4.7
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

 

TinyPortal © 2005-2018