Recent

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

tk

  • Sr. Member
  • ****
  • Posts: 367
Re: Modern UI in Lazarus
« Reply #120 on: April 29, 2017, 08:58:57 am »
Does Lazarus have the ability to create modern user interfaces (for example: Modern UI from Microsoft, Material Design from Google)?

What is modern on those experiments, pardon UIs?
You think your app brings more money to you with them?

x2nie

  • Sr. Member
  • ****
  • Posts: 478
  • Impossible=I don't know the way
    • impossible is nothing - www.x2nie.com
Re: Modern UI in Lazarus
« Reply #121 on: April 29, 2017, 10:45:07 am »
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. ..........
For me it's not important to make HTML+ CSS renderer. When I need "modernize UI" i would like to place .........


Wow!  :o So it is now okay to be no full source code, I am not curious any longer.  ::)
your pseudo code is already understandable and amazing !!

When you were logged in, you can see attachments.
Lazarus Trunk @ Windows7 64bit, XP 32bit, Debian under VirtualMachine

kupferstecher

  • Sr. Member
  • ****
  • Posts: 406
Re: Modern UI in Lazarus
« Reply #122 on: April 29, 2017, 11:02:37 am »
I do not understand why you think that internally managed widgets need more CPU-power than widgets which are managed by the OS?
Indeed, especially if I constantly receive emails that fpGUI applications run faster and have much less latency (especially in sound) applications.
It probably was just a lack of understanding~
If the whole window area would be application drawn, then lots of redraws for unchanged areas would occur. On the other hand, when using X11/GDI you probably have a seperate area for each control. But doesn't this mean that the graphic of the controls is managed by the OS again...  :)

first we need an ide, obviously we cannot use lazarus  exept just for text editing and compiling :)
Not so obvious for me. Sure it doesn't work out of the box, but creating a new IDE is a big effort either. And having a seperate IDE is a big disadvantage. Than in the end you have the same situation like msegui and fpgui: Third party projects unrelated to Lazarus.

Groffy

  • Full Member
  • ***
  • Posts: 210
Re: Modern UI in Lazarus
« Reply #123 on: April 29, 2017, 11:17:52 am »
What is modern on those experiments, pardon UIs?
You think your app brings more money to you with them?

Following this discussion and trying to understand what these people are really looking for, this question was always in my head.

There are so many different needs, depending on what kind of application you are going to develop, this discussion can go on forever without any result. "Modern" UI is just what the current OSs are offering to the user and your application is not looking alien to the UI of the OS. Unfortunenately the UI of the OSs are changing more and more rapid...

Regards
Linux Mint 18.3 - KDE / Windows 10 / Lazarus 2.0.6 / trunk -qt

mse

  • Sr. Member
  • ****
  • Posts: 286
Re: Modern UI in Lazarus
« Reply #124 on: April 29, 2017, 01:21:00 pm »
It probably was just a lack of understanding~
It seems so. ;-)
MSEgui creates a bitmap of the size of the updateregion, uses X11/gdi32/gdi+ drawing primitives to paint the widgets which intersect the update region and copies the bitmap masked by the updateregion to the screen. This offers platform-independent flicker free drawing with high performance. For changing a single character in an edit widget the update area can be so little as 14x5 pixels. Window-scrolling is done by block move operations directly in the graphic processor if the graphic system supports it.
A comment about the praised OpenGL:
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.

lainz

  • Hero Member
  • *****
  • Posts: 3699
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #125 on: April 29, 2017, 02:21:17 pm »
If integrating with Electron is not a choice... using fpCEF is the way.

The design is the same HTML, CSS and JS. No need on reinventing the weel. Maybe as suggested the best is to -create- an IDE or -improve- Lazarus to have an HTML designer that at the same time can bind the class methods to the UI. Of course JS glue will be needed.

Else do as you wish as reinvent the wheel.  ::)
« Last Edit: April 29, 2017, 02:32:09 pm by lainz »

Carver413

  • Full Member
  • ***
  • Posts: 119
Re: Modern UI in Lazarus
« Reply #126 on: April 29, 2017, 03:32:38 pm »

OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
While there may be some truth to this it doesn't mean that we need to target opengl specifically but rather modern gpu design which is considerably different then the gdi.
if we focus on a core design that could be used by all then it is a win win for all. the LCL could use it to enhance is custom drawn or replace it Topengl control. fpGui and Msegui could make a backend for it. glscene could be ported to it and it would provide a nice clean design for new development.     

Handoko

  • Hero Member
  • *****
  • Posts: 3759
  • My goal: build my own game engine using Lazarus
Re: Modern UI in Lazarus
« Reply #127 on: April 29, 2017, 04:29:49 pm »
first we need an ide, obviously we cannot use lazarus  exept just for text editing and compiling :)
Not so obvious for me. Sure it doesn't work out of the box, but creating a new IDE is a big effort either. And having a seperate IDE is a big disadvantage. Than in the end you have the same situation like msegui and fpgui: Third party projects unrelated to Lazarus.

Good point.

Maybe we do not need a new IDE. What we need is a layout engine, which build on top of a graphics layer (that handles the drawing directly via OpenGL API). After we managed to build the layout engine, then we build an add-on for Lazarus.

lainz

  • Hero Member
  • *****
  • Posts: 3699
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #128 on: April 29, 2017, 06:40:39 pm »
This is fpCEF, is a bit slower (not that much) than Chrome and Electron but it works perfectly with my web app. Even it loads it through HTTPS.
lainz.github.io/webapps/compras.html

I can store a local copy and load it from disk instead of internet and I have my web app made with FPC. (I can choose any Modern UI, in this case Material Design Lite).

It works perfectly with High DPI, fpCEF does it automatically.

I need to create a class to communicate it with JS and that's all. I can move my JS code to Pascal and improve the speed (that's already fast).

Edit: I'm playing youtube videos from FPC ;)
« Last Edit: April 29, 2017, 07:24:05 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 3699
  • Leandro Diaz
Re: Modern UI in Lazarus
« Reply #129 on: April 29, 2017, 07:12:23 pm »
Another screenshot of fpCEF, a WebGL game compiled into asm.js (Currently the version of fpCEF doesn't support web-assembly, but it will when updated to latest chrome).

I can play 3D games made with Unity with an FPC application. How much more you need =) Reinvent the wheel to make this possible...

Edit: Compressed with LZMA the final size is 33.3 MB, less than Electron.
« Last Edit: April 29, 2017, 07:21:49 pm by lainz »

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: Modern UI in Lazarus
« Reply #130 on: April 30, 2017, 12:08:10 pm »
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.
You clearly don't know the full history. Sebastian might have started the initial fpGUI project, but soon abandoned it (about 2 years later). I discovered it in 2004/5 and started working on it as it was incomplete and the idea of a custom drawn toolkit fitted my needs. About a year later I realised that much of the design did not work well for real-world applications. So I did a total rewrite from the ground up. Everything is in the Git history. The code before the rewrite is in the v0.4-maint branch (still compilable and runnable today). Everything after that is my own work, so yes, I am the author of fpGUI (13 years and counting). Saying that I have also had tons of small and large contributions - so it is a community effort, but I'm the main driving force.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: Modern UI in Lazarus
« Reply #131 on: April 30, 2017, 12:16:31 pm »
If the whole window area would be application drawn, then lots of redraws for unchanged areas would occur. On the other hand, when using X11/GDI you probably have a seperate area for each control. But doesn't this mean that the graphic of the controls is managed by the OS again...  :)
Not at all. fpGUI's "maint" branch of v1.4.x release uses a window handle per widget. Meaning each widget is its own window and receives its own events from the OS. Easier to implement with less code, but causes more work to get it consistent across different windowing systems (X11 vs GDI don't also do things the same way).

In the fpGUI "develop" branch we now have "alien windows". Only the top level window has a window handle. Widgets are "virtual windows", or just rectanglular areas drawn by the top level window. fpGUI now does all the event processing for widgets. More work to implement, but faster rendering with less OS resources. This makes for a much more consistent result across windowing systems.

fpGUI doesn't render areas that are not visible or that have not changed. It optimises invalidate areas and only renders what is needed.

The OS doesn't have anything to do with the look or behaviour of fpGUI. Everything is done by fpGUI itself. The OS windowing system simply gives access to a Window and gives some top-level events (eg: initial display, closing, resizing). fpGUI does everything else.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

Graeme

  • Hero Member
  • *****
  • Posts: 1430
    • Graeme on the web
Re: Modern UI in Lazarus
« Reply #132 on: April 30, 2017, 12:18:39 pm »
A comment about the praised OpenGL:
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
+1
After working with OpenGL for the last few months I definitely feel that pain.
--
fpGUI Toolkit - a cross-platform GUI toolkit using Free Pascal
http://fpgui.sourceforge.net/

marcov

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 8728
  • FPC developer.
Re: Modern UI in Lazarus
« Reply #133 on: April 30, 2017, 07:05:23 pm »
A comment about the praised OpenGL:
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
+1
After working with OpenGL for the last few months I definitely feel that pain.

So, you decided to migrate to Vulkan? :-)

Wargan

  • New Member
  • *
  • Posts: 48
    • 'This way' site
Re: Modern UI in Lazarus
« Reply #134 on: May 01, 2017, 08:01:10 am »
So, I see our topic a little bit moving towards the flood (((
The other day I tried to work with the library BGRAControls (great respect lainz). It was cool! Despite the fact that this framework is still a beta version (no offense, lainz), you can start working with it.

After thinking, I thought that the initial option might be something between CSS & LCL;)
For example, so. A certain parent class (let's call it TMUIComponent) for visual components has the property self.Appearance (or something like that). This is a set of TStringList with lines of CSS-code. For example:

Code: Pascal  [Select][+][-]
  1. type TMuiComponent = class() // accurate inheritance should be clarified
  2.   published
  3.     property Appearance: TStringList read FAppearance write SetAppearance;
  4. end;
  5.  
  6. type TMuiForm = class(TMuiComponent)
  7.   //...
  8. end;
  9.  
  10. type TMuiButton = class(TMuiComponent)
  11.   //...
  12. end;
  13.  

Each control, including forms and possibly dialogs, inherits this class.

The main CSS code can be attached to the application as a resource (for example, the styles.css file). In this file, the appearance for controls, forms, etc., as well as their behavior when hovering the mouse, clicking, and other events in the UI can be registered.

An example of how I see styles through CSS.
Styles.css
Code: CSS  [Select][+][-]
  1. TMuiForm
  2. {
  3.         width: 640px;
  4.         height: 480px;
  5.         caption: 'Test caption';
  6.         isVisible: true;
  7.         position: [poDesktopCenter];
  8. }
  9.  

I attached screenshots of the programs made with BRGAControls. One program is mine - (Just for fun;)), one of the demos.

P.s. It would be interesting if smart and quick peoples from big corporations read this topic and are preparing to release a new commercial product, hahaha...
Lazarus 1.8RC5+ FPC 3.0.4.
Windows 7 x32, RAM 3 Gb.

 

TinyPortal © 2005-2018