Recent

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

marcov

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8715
  • FPC developer.
Re: Modern UI in Lazarus
« Reply #105 on: April 28, 2017, 02:47:13 pm »
Note that it is more than just painting pixels in the same way.

The rules for positioning items and the nearly default vertical scroll option for html documents must get their place if this is going to succeed.

lainz

  • Hero Member
  • *****
  • Posts: 3696
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #106 on: April 28, 2017, 03:10:24 pm »
Note that it is more than just painting pixels in the same way.

The rules for positioning items and the nearly default vertical scroll option for html documents must get their place if this is going to succeed.

And just painting pixels in the same way is not easy (and painting as fast). For example chrome uses Skia Graphics Library https://skia.org/

Of course the rules must be the same, else we don't get a compatible design. Even if doesn't support javascript, have a way of accessing the DOM and the style with pure pascal (with all JS methods to do porting of existing code possible).

Blestan

  • Sr. Member
  • ****
  • Posts: 461
Re: Modern UI in Lazarus
« Reply #107 on: April 28, 2017, 03:12:55 pm »
all of you that are saying that css/html rendering must be implemented from scratch are trying to reinvent the wheel :))) or at least skia ... the rendering engine of chrome ... pretty big task without the support of some of the major players  >:D

the only reasonable way to go is opengl as backend and on top of that to build gui elements not dependent of any os specifics like fluid gui in the pixel32 editor years ago...
i contacted several times the author of pixel32 t ask if he can open source the gui but without any success
« Last Edit: April 28, 2017, 03:21:55 pm by Blestan »
Speak postscript or die!
Translate to pdf and live!

Handoko

  • Hero Member
  • *****
  • Posts: 3752
  • My goal: build my own game engine using Lazarus
Re: Modern UI in Lazarus
« Reply #108 on: April 28, 2017, 03:21:57 pm »
I think we should create a team to handle this massive project.

I can be a tester for Linux (Ubuntuish) machines.

We need:
- Lead Programmer / Team Leader
- Graphics-related programmers
- Testers from different OSes
- Documentation editors
- lots of programmers
« Last Edit: April 28, 2017, 03:28:34 pm by Handoko »

Blestan

  • Sr. Member
  • ****
  • Posts: 461
Re: Modern UI in Lazarus
« Reply #109 on: April 28, 2017, 03:54:01 pm »
hahaha .... 99.99% will be testers :)))
seriously - first we need an ide, obviously we cannot use lazarus  exept just for text editing and compiling :)
Speak postscript or die!
Translate to pdf and live!

Handoko

  • Hero Member
  • *****
  • Posts: 3752
  • My goal: build my own game engine using Lazarus
Re: Modern UI in Lazarus
« Reply #110 on: April 28, 2017, 04:10:00 pm »
Yes, we need a new IDE for it. To make it easier, the new IDE should be build using a new graphics layer. So, the steps could be like this:

1. Choose a graphics library (OpenGL, DirectX, ...)
2. Build a graphics layer (to handle the basic drawing we need)
3. Build a new IDE using that graphics layer
4. Create visual components for it (TmuiButton, TmuiLabel, TmuiPanel, ...)

Edited:
It should be a layout layer before we build the IDE, so the IDE is built on the graphics and layout layers.
« Last Edit: April 28, 2017, 04:49:11 pm by Handoko »

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 3817
  • I like bugs.
Re: Modern UI in Lazarus
« Reply #111 on: April 28, 2017, 04:30:37 pm »
4. Create visual components for it (TmuiButton, TmuiLabel, TmuiPanel, ...)
Good luck for your project but your choice of naming is not good.
It would be confused with LCL's MUI widgetset.
See:
 http://bugs.freepascal.org/view.php?id=31186
 http://free-pascal-lazarus.989080.n3.nabble.com/Lazarus-Initial-NoGUI-LCL-support-for-Amiga-Systems-td4050658.html
 https://blog.alb42.de/
Mostly Lazarus trunk on Manjaro Linux.

Handoko

  • Hero Member
  • *****
  • Posts: 3752
  • My goal: build my own game engine using Lazarus
Re: Modern UI in Lazarus
« Reply #112 on: April 28, 2017, 04:36:21 pm »
:-\ Oops, what a coincidence.

mui = Modern UI (as suggested by this thread's title).

What is the mui in Lazarus/LCL MUI interface?

molly

  • Hero Member
  • *****
  • Posts: 2345
Re: Modern UI in Lazarus
« Reply #113 on: April 28, 2017, 04:41:35 pm »
What is the mui in Lazarus/LCL MUI interface?
here and here. It is a lazarus widgetset implementation for amiga-like systems using mui as backend.

Current status can be read here.

Platform independent GUI (PiGUI) ?
« Last Edit: April 28, 2017, 04:49:20 pm by molly »

Handoko

  • Hero Member
  • *****
  • Posts: 3752
  • My goal: build my own game engine using Lazarus
Re: Modern UI in Lazarus
« Reply #114 on: April 28, 2017, 05:04:16 pm »
Platform independent GUI sounds good. But some (bad people) may call it Pig UI.

Maybe:
πui ( Platform Independent UI )

You know pi is related with science. The invention of pi make a lot of technologies become possible:
https://en.wikipedia.org/wiki/Pi
« Last Edit: April 28, 2017, 05:06:18 pm by Handoko »

molly

  • Hero Member
  • *****
  • Posts: 2345
Re: Modern UI in Lazarus
« Reply #115 on: April 28, 2017, 05:10:25 pm »
Platform independent GUI sounds good. But some (bad people) may call it Pig UI.
:)

Although i wouldn't mind, with a nice logo of ms. piggy for advertisement and recognition  :D

Quote
Maybe:
πui ( Platform Independent UI )
That actually sounds good if it wasn't for nui.

It could also stand for Nextgen UI

Quote
You know pi is related with science. The invention of pi make a lot of technologies become possible:
https://en.wikipedia.org/wiki/Pi
I am aware. Pi could also be confused with another part of science in that it also used when pico comes to play, e.g. minimal.

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 3817
  • I like bugs.
Re: Modern UI in Lazarus
« Reply #116 on: April 28, 2017, 05:17:07 pm »
Magic UI is better than modern UI. :)

Anyway, people always want to create new code instead of improving existing. For example there are many custom drawn GUI libs already.

LCL architecture could be improved, too. Its basic design philosophy is to use native widgets instead of custom drawn. It sure has challenges but it also has benefits. The popular wxWidgets lib uses the same idea.

LCL design should be improved so that new widgetsets are easier to implement. Now there are historical remains from Windows programming and other complications.

Maybe the form designer could support the other XML based layout systems. The designer with its anchors is already very advanced.

Why nobody wants to improve LCL?
« Last Edit: April 28, 2017, 05:22:26 pm by JuhaManninen »
Mostly Lazarus trunk on Manjaro Linux.

marcov

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8715
  • FPC developer.
Re: Modern UI in Lazarus
« Reply #117 on: April 28, 2017, 05:29:23 pm »
Why nobody wants to improve LCL?

The problems of existing packages are clear, the problems of hypothetical future packages can be easily ignored or ridiculed.

ps

  • Full Member
  • ***
  • Posts: 129
    • CSS
Re: Modern UI in Lazarus
« Reply #118 on: April 28, 2017, 06:50:47 pm »
There are 2 ways to create a modern UI in Lazarus.
1. components /UI/Frameworks based on "custom paint"
2. implement basic CSS drawing and positioning around LCL
A long time ago I tried the second method. And it's quite easy to implement basic drawing using CSS. ....
Hey, that (second choice) is cool !!
your proof picture is beautiful for my eyes. Is there any source code to try?

Sorry no source available now. I must finish one project then I can make some public code (and remove my buggy agglite modified renderer).
For me it's not important to make HTML+ CSS renderer. When I need "modernize UI" i would like to place nice progress bar (and don't want to code it for days), i would like place SynEdit(BorderStyle=bsNone) on nice box with rounded rectangles with border =2px with shadows.  Like JavaFX or QT.

My vision is something like this:
Code: Pascal  [Select][+][-]
  1. Btn1.SetCSSStyle('background-color:#FF00FF;');
  2.  
  3. ->
  4.  
  5. Btn.Color :=$00FF00FF;

Code: Pascal  [Select][+][-]
  1. Btn1.SetCSSStyle('background-color:#FF00FF; border: solid #009bfc 1px;');
  2.  
  3. ->
  4.  
  5. Btn.Color :=$00FF00FF;
  6. Btn.Canvas.Pen.Color := $009bfc;
  7. Btn.Canvas.Rectangle(Btn.Rect);

Code: Pascal  [Select][+][-]
  1. Btn1.SetCSSStyle('background-color:#FF00FF; border: solid #009bfc 1px; border-radius: 12px;');
  2.  
  3. ->
  4.  
  5. Btn.Color :=$00FF00FF;
  6. Btn.Canvas.Pen.Color := $009bfc;
  7. Btn.Canvas.Rectangle(Btn.Rect);
  8.  
  9. // now we must use advanced renderer to render border-radius (but only for 10% of render frame)
  10. RenderCSS( Btn.Canvas, ... {tons of parameters here to render only needed parts and clipped frames (in this scenario only rounds ....)});
  11.  
Small simple CSS/box model implementation: https://github.com/pst2d/csscontrols/tree/dev

Carver413

  • Full Member
  • ***
  • Posts: 119
Re: Modern UI in Lazarus
« Reply #119 on: April 29, 2017, 01:50:40 am »
As the author of fpGUI Toolkit
The first version of fpGUI was written by Sebastian Günther back in 2000.
Funny how you can take someone else's work, make a few changes and suddenly you are the author.

 

TinyPortal © 2005-2018