Modern UI in Lazarus

[marcov]

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]

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]

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 

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

[Handoko]

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

[Blestan]

hahaha .... 99.99% will be testers ))
seriously - first we need an ide, obviously we cannot use lazarus  exept just for text editing and compiling

[Handoko]

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.

[JuhaManninen]

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/

[Handoko]

Oops, what a coincidence.

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

What is the mui in Lazarus/LCL MUI interface?

[molly]

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) ?

[Handoko]

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

[molly]

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 

Maybe:
πui ( Platform Independent UI )

That actually sounds good if it wasn't for nui.

It could also stand for Nextgen 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

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]

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?

[marcov]

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]

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.  

[Carver413]

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.