Lazarus

Programming => Graphics and Multimedia => Graphics => Topic started by: Wargan on April 13, 2017, 03:06:06 pm

Title: Modern UI in Lazarus
Post by: Wargan on April 13, 2017, 03:06:06 pm
Hello!

Does Lazarus have the ability to create modern user interfaces (for example: Modern UI (https://en.wikipedia.org/wiki/Metro_(design_language)) from Microsoft, Material Design (https://en.wikipedia.org/wiki/Material_Design) from Google)?

Like this (see attachments):
Title: Re: Modern UI in Lazarus
Post by: Zoran on April 13, 2017, 04:12:29 pm
Not out of the box. The simplest way in creating user interface with Lazarus is using LCL, which then use one of its standard back-ends (called widgetsets), which actually means that control design and behaviour (look and feel) is delegated to standard library found on your system (which would be Win32/64 widgetset on Windows, that is Windows native components, and on Linux it would be either Gtk2 or Qt4).

What you can do is make your own controls instead of what LCL offers. You can also use BGRA controls (http://wiki.freepascal.org/BGRAControls). Or you can use fpGui (http://fpgui.sourceforge.net/index.shtml) instead of LCL -- there should be support for themes in fpGui, but you should ask Graeme for details, ask in fpgui support group -- see http://fpgui.sourceforge.net/support.shtml (http://fpgui.sourceforge.net/support.shtml)
Title: Re: Modern UI in Lazarus
Post by: mse on April 13, 2017, 08:27:30 pm
Or you can use fpGui (http://fpgui.sourceforge.net/index.shtml) instead of LCL
Or MSEide+MSEgui. It has excellent skinning support, see TWidget.Frame, TWidget.Face, TFrameComp, TFaceComp, TSkinController...
http://wiki.freepascal.org/MSEide_&_MSEgui
Title: Re: Modern UI in Lazarus
Post by: lainz on April 14, 2017, 01:11:53 am
I use Electron and (any) html+css combination I can imagine / download. You can do the core in freepascal and -try to- link it (.dll / .exe) against the electron app with JavaScript.
Title: Re: Modern UI in Lazarus
Post by: Wargan on April 14, 2017, 07:22:44 am
Many thanks to everyone who wrote the answer!

I think lainz's answer suggested is the best option for me.
Title: Re: Modern UI in Lazarus
Post by: JD on April 17, 2017, 06:30:40 pm
I use Electron and (any) html+css combination I can imagine / download. You can do the core in freepascal and -try to- link it (.dll / .exe) against the electron app with JavaScript.

Do you have a screenshot of the UI of an app you designed this way?

Thanks!
Title: Re: Modern UI in Lazarus
Post by: Blestan on April 17, 2017, 09:25:59 pm
the batlle of the UIs is over ...
lazarus as an ui is deeply rooted in the late '90 ...
unfortunatly lazarus was targgeted as as delphi alternative ....
if you follow ( as i do ) the evelution of lazarus ( and may be of fpc) most of the changes are motivated by the evolution of delphi ... fpc team wants to keep fpc/lazarus as close as possible to delphi ( even in some moments of the evolution the fpc compiler was driven by the ideas of the embracadero team) ... dont get me wrong ...i im using object pascal  for more than 30 yesrs  and i'm still using object pascal  in its fpc implementation to write real world applications ...  but lazarus and its lcl is deeply related  to the idea of the desktop aps in 1995 / 1999 ... exe's running in corporate intraweb accessing db servers in "secure"  environments with low latency .... developping ui for tabular data easy displayable in "grids" ... easy to understand by accountants and data entry personel... sorry this is the truth... even more .. lazarus is  still in total denial of the firemonkey model of delphi ...
 the "biggest" frog jump is to try to implement some kind of altenative of borland's datasnap model...  the idea of data connection -> table/  SQL ( SQL is great !!!!) query -> datasource -> ui components does not evolved in more than 20 years  (try to connect a DB component to mongo or redis; try to sync over the internet a data  model not involving sql backend over a ssl tunnel)... even the lcl alternatives like fpgui ( great work graeme) mse gui are stalled in 1998 ...
believe me object pascal is better than c or c++ or even go  swift as a compiler language paradim .. the problem is that most of the people involed are mostly purely "academicly" interested in prooving that "pascal is equal to c"... come on .. we a ll know  thah pascal is a capable language ... operating systems and low level drivers are writen in pascal.. (early versions of windows and photoshop are wtiten in pascal)
what we need is to escape from the pure academic aproach ... take for example the json parsing in freepascal ... it's oop .. it's cteating classes and objects but its absolutly inadequate in production envenronments... google the implementation in pascal for a such sipmle thing as JWT (json web tokens) and you will end with the feeling that you are in a colege course for "right" programing ...
... so long story short ( about UI) wait for somebody to port CSS/html5  redering to fpc and you will have modern interfaces in lazarus  ... but in the meantime .... keep calm and write awsome apps backends in pascal and relay to js/html for the frontend. the main probles is that "big"companies like ms or fb  or adobe have trouble past with pascal ... no one of them believes that they can build something "new" in pascal ... php exploded in the 2000 because fb adopted it ... js and go is supported by google even by ms in the past 10 years .. adobe abandoned their flash format i favour of html5 for building ui ... nobody is adopting pascal as a paradigm beacause they hate it from the late 80 and the early 90 ... borland was a small spark to prove than pascal in not "only 80" but can live in the 90 .. as an alternative to dBase .... "delphi" was an extention to paradox to build '"fancy" inputs forms in win32   witch was an alternative to access... delphi means "the oracle of delphi" ... connecting to the oracle DB server ...
Title: Re: Modern UI in Lazarus
Post by: Phil on April 17, 2017, 10:45:32 pm
I use Electron and (any) html+css combination I can imagine / download. You can do the core in freepascal and -try to- link it (.dll / .exe) against the electron app with JavaScript.

Do you have a screenshot of the UI of an app you designed this way?

Thanks!

I'm curious about this suggested approach to UI as well. Electron apps tend to be very big since they include both Chromium browser and Node.js. Visual Studio Code, for example, is about 150MB installed on Windows. Is that the price to pay for a more modern UI?

https://electron.atom.io
Title: Re: Modern UI in Lazarus
Post by: lainz on April 17, 2017, 10:53:12 pm
I use Electron and (any) html+css combination I can imagine / download. You can do the core in freepascal and -try to- link it (.dll / .exe) against the electron app with JavaScript.

Do you have a screenshot of the UI of an app you designed this way?

Thanks!

Not now, since I didn't need pascal for such a simple application. But I have this one attached, using Material Design Lite with little modifications. The source code is on my github page, so you can grab the code for running an external application, changing it a bit the output is redirected to the electron application where you can do anything with it (I can imagine a communication with files, you create a file with the data with electron and pass the filename to the pascal application, then the pascal returns in the command line a JSON that you can use). Another way is using a database with electron and process with fpc when needed. So a command line utility will be the case I can do.

Maybe a dll is harder to do, at least I found only for C++ and C# .dll's tutorials to use them with Electron. You will need a header for data-types between electron and fpc.

Edit: I choose Material Design Lite, you can use Angular Material, Bootstrap or buy a theme somewhere.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 17, 2017, 10:58:00 pm
I use Electron and (any) html+css combination I can imagine / download. You can do the core in freepascal and -try to- link it (.dll / .exe) against the electron app with JavaScript.

Do you have a screenshot of the UI of an app you designed this way?

Thanks!

I'm curious about this suggested approach to UI as well. Electron apps tend to be very big since they include both Chromium browser and Node.js. Visual Studio Code, for example, is about 150MB installed on Windows. Is that the price to pay for a more modern UI?

https://electron.atom.io

Is not a big deal when you compress is with LZMA. It reduces the download to about 40mb. TB hard disks.. well except for SSD, at least I don't have a big one.

Well If I need chrome embedded (that never worked for me with Lazarus) is the same.

Visual Studio code is the best JavaScript editor I ever used.
Title: Re: Modern UI in Lazarus
Post by: Noodly on April 17, 2017, 11:43:37 pm
... im using object pascal  for more than 30 yesrs ...

Wow, you must have been in at the very beginning since object pascal first appeared via Apple in 1986. I was first exposed via TP 5.5 in 1989 and later was a beta tester for Delphi in 1994.

After getting back in touch with pascal via Lazarus/FPC, I can see that it took the lead on cross-platform pascal desktop development, but is struggling with Android / iOS / Windows 10 mobile. Having said that, it's a volunteer project that's done amazingly well and can't possibly be the open source, write once, run on any mobile, desktop, world leading development environment that some posters here think it should be ---- without even more skilled and dedicated experts prepared to donate their time.
Title: Re: Modern UI in Lazarus
Post by: Blestan on April 17, 2017, 11:51:14 pm
yes i was using cp/m pascal for apple2 and later turbo pascal3.0 ( remerber 3.0 compile to .com not exe...max64kb... do you remember .ovl for 3.0. :))... i am in the pascal realm for 34years exactly ..since1984
Title: Re: Modern UI in Lazarus
Post by: lainz on April 17, 2017, 11:57:20 pm
yes i was using cp/m pascal for apple2 and later turbo pascal3.0 ( remerber 3.0 compile to .com not exe...max64kb... do you remember .ovl for 3.0. :))... i am in the pascal realm for 34years exactly ..since1984

No one more experienced than you. I agree with your first comment. What I can add is that making html/css for lazarus must be really hard. I'm not an expert with graphics but even with BGRABitmap I can't imagine how to replicate every css stuff. Also html and css are nothing without javascript, so all the way of accessing the DOM must be done in pascal, or implement their own javascript. Else any already made js library will not be usefull at all (let's say angular or react). I can't imagine how much people and time and money you need to do such thing, browsers are doing this for decades and still improving.

Something like that was done by microsoft with WPF, Java with JavaFX and AFAIK Qt also has selectors.
Title: Re: Modern UI in Lazarus
Post by: Noodly on April 18, 2017, 12:01:40 am
yes i was using cp/m pascal for apple2 and later turbo pascal3.0 ( remerber 3.0 compile to .com not exe...max64kb... do you remember .ovl for 3.0. :))... i am in the pascal realm for 34years exactly ..since1984

I remember .ovl, I started in 1987 with TP 3.0 CP/M and MSDOS with inherited .ovl code and was fascinated with TSR techniques (Sidekick!)
Title: Re: Modern UI in Lazarus
Post by: Noodly on April 18, 2017, 12:19:05 am
... I can't imagine how much people and time and money you need to do such thing, browsers are doing this for decades and still improving ...

A few years ago I met the founder / President of a major Asian software development company (10K+ employees) that produced some serious software including the parallel operations of MS SQL Server on behalf of MS. He said he was betting the whole company on HTLM5 (and HTML6 etc whatever). It's obvious when you think about it - there should be one cross-platform UI and browsers are the prime candidates.
Title: Re: Modern UI in Lazarus
Post by: Phil on April 18, 2017, 01:34:57 am
Visual Studio code is the best JavaScript editor I ever used.

Hmm, a 150MB text editor.

Here's an idea. Redo this little Pascal app as an Electron app. All the Pascal does is load a little Web based mapping app into an embedded browser - basically, a dedicated browser that only knows how to do one thing. That should be easy to do as an Electron app. Then create a little 40MB download for us to try out. Note that the Pascal app is only a 139KB download, although for Mac only.

https://macpgmr.github.io/MacXPlatform/WebAppOverview_3.html#EmbeddedBrowser
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 01:42:12 am
Hi Phil that's ok. I will try.
Title: Re: Modern UI in Lazarus
Post by: Phil on April 18, 2017, 01:46:08 am
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.


Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 01:59:14 am
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.

Ok. If I don't get what this app does I will ask you.
Title: Re: Modern UI in Lazarus
Post by: Phil on April 18, 2017, 02:14:01 am
Hi Phil that's ok. I will try.

If you can do that, I might look at trying to add a dynamic library to it when I have some time.

Ok. If I don't get what this app does I will ask you.

The Web app (QxMap) shows how to use the qooxdoo JS UI framework with the OpenLayers JS mapping library. You could dispense with qooxdoo altogether if you can figure out how to integrate OpenLayers with Electron.

Note that the QxMap files could also just be included as part of the Electron app, rather than pulling them from the Web. Same with OpenLayers files (ol.js and ol.css).

The "local" (Pascal) app just uses an embedded WebKit browser to load the Web app.

A variation of QxMap, called QxCast, retrieves data to display on the map by making a request to a FCGI app on a Web server. This FCGI app uses a Pascal dynamic library (ndfd). More details here:

https://macpgmr.github.io/MacXPlatform/PascalDynLibs_3.html#qooxdoo

But if the dynamic library could be included with the Electron app, then it wouldn't need the FCGI app.

Something like that. Hope that makes sense.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 02:58:13 am
Ok. What I did is to replicate the local pascal app.

The file is 'renderer.js':
Code: Javascript  [Select][+][-]
  1. // This file is required by the index.html file and will
  2. // be executed in the renderer process for that window.
  3. // All of the Node.js APIs are available in this process.
  4.  
  5. const qxMapUrl = 'https://macpgmr.github.io/iApps/qxmap/index.html'
  6.  
  7. var locations = [
  8.     {
  9.         name: 'Ouray',
  10.         lat: 38.02,
  11.         lon: -107.67,
  12.         display: '7,792 feet'
  13.     },
  14.     {
  15.         name: 'Silverton',
  16.         lat: 37.81,
  17.         lon: -107.66,
  18.         display: '9,308 feet'
  19.     },
  20.     {
  21.         name: 'Telluride',
  22.         lat: 37.94,
  23.         lon: -107.81,
  24.         display: '8,750 feet'
  25.     }
  26. ]
  27.  
  28. document.location.href = `${qxMapUrl}?locations=${JSON.stringify(locations)}`

That's all to it. But of course we can download that website and run it directly within electron.

This script can be executed for example in chrome console and will work the same as in electron.

These are the steps to get it working under Windows with Electron: (Sorry I only have Windows)

1) Download Electron here (41.1 MB)
https://github.com/electron/electron/releases/download/v1.6.2/electron-v1.6.2-win32-ia32.zip

2) Uncompress it, then in the folder 'resources' create a folder 'app' and put everything from this repository:
https://github.com/electron/electron-quick-start

3) So you have electron_folder/resources/app/renderer.js, in that file paste the code that's up in this post.

4) So you have electron_folder/resources/app/package.json, in that file change this line "name": "electron-quick-start" to read "name": "qxmap" (this is where in Local app data is stored the cache and everything else a browser stores).

Optional:
5) Rename the executable and with a resource editor change the icon / name / version info from the .exe. I use Resource Hacker.

Under mac there's another way to change the icon, under Linux the icon can't be changed.
Title: Re: Modern UI in Lazarus
Post by: Phil on April 18, 2017, 03:10:03 am
Ok. What I did is to replicate the local pascal app.

Very nice. I'll take a look when I have some time.

Earlier I downloaded Electron and launched the Electron.app (I'm on Mac). It had a place where you're supposed to drag and drop your app. I had no idea what that means and still don't relative to your instructions, so some investigation is needed (maybe next weekend).

If a dynamic library is included, it would supply the "display" values, rather than hardwiring them the way I did in the example.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 03:49:38 am
Quote
Earlier I downloaded Electron and launched the Electron.app (I'm on Mac). It had a place where you're supposed to drag and drop your app. I had no idea what that means and still don't relative to your instructions, so some investigation is needed (maybe next weekend).

That's for example if you have the 'app' folder in my instructions somewhere. So you drag that folder to the window and it will run into a separate process.

Seems that on mac you need to follow the steps, but with another folder structure, see here:
https://github.com/electron/electron/blob/master/docs/tutorial/application-distribution.md#application-distribution
Title: Re: Modern UI in Lazarus
Post by: Phil on April 18, 2017, 04:01:20 am
That's for example if you have the 'app' folder in my instructions somewhere. So you drag that folder to the window and it will run into a separate process.

Ah yes, I think I see what going on. I had downloaded the "prebuilt binaries". Essentially what you do is customize these with your own "app".

Still, it looks like a minimum installed footprint of 115MB for an Electron app on Mac.

Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 04:13:57 am
I've not played too much with it. You need to know that there's database support, file handling and so on. Plus any html, css and javascript you can get online.

All the electron users want to the file size goes down. But seems not possible at this time. At least if I distribute the app with an installer under Windows the user needs to dowload less than 50 MB.

Currently I'm learning on doing web apps, not local web apps like electron ones. If I don't need the user file system everything works fine.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 18, 2017, 09:33:35 am
QT is going in the direction of a more web like rendering model too. There might be possibilities there for such GUIs that integrate well with Lazarus.

I don't like distributing components like Chrome that go swiftly through new new versions and have long security bulletins attached to it.

That installer that you make today is outdated tomorrow.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 09:38:38 am
Borderless panels, a well-chosen set of fonts and hey presto: modern UI? It's all there... E.g. stick to the color tables that Google recommends and you're half way there..
Or am I missing something ??!! (not really)
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 18, 2017, 11:02:33 am
Then create a little 40MB download for us to try out.

A 40MB archived file for a text editor is still pretty darn big. EditPad Pro (a commercial text editor I often use) is a 11MB archived download with a ton of functionality, regex engine, theme and scheme engine, included and complete CHM help, build-in FTP client etc. The executable is 9MB, the rest is help and scheme support resources.

My accounting package does even better. It is a full blown accounting package with time management and reporting and is a mere 8MB installed!

Coincidently, both these applications were developed with Delphi.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 11:13:37 am
Yes, Phil, .... Try Geany...
Title: Re: Modern UI in Lazarus
Post by: jacmoe on April 18, 2017, 11:24:04 am
A modern UI ?
Use Qt/GTK and handle the style in your OS.
And you're 90% there.

Using web technology (Electron) is such a hack. Chrome is an OS in itself, .. and what you will get is your small application wrapped in a giant kitchen sink.
Title: Customizable framework on Lazarus
Post by: Wargan on April 18, 2017, 11:36:58 am
Gentlemens, what do you think about the idea of creating a customizable UI framework on FPC / Lazarus, similar to the same Qt Gui?
I mean that at the moment Windows is the most common OS in the world, so it's not necessary that such a framework is cross-platform (If this in some way interferes)

What is a customizable framework? I understand it this way: the ability to create applications with themes. This is the cornerstone in the development. Custom themes for controls (like BGRA Controls), forms and other UI elements (in web design, this is called the front-end (https://en.wikipedia.org/wiki/Front_and_back_ends))
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 11:41:21 am
That's already possible. Easy.
Title: Re: Modern UI in Lazarus
Post by: Wargan on April 18, 2017, 11:43:16 am
That's already possible. Easy.

What do you mean by the word "already"?
Title: Re: Modern UI in Lazarus
Post by: molly on April 18, 2017, 11:53:55 am
What do you mean by the word "already"?
Something like this (http://fpgui.sourceforge.net/) or this (http://www.msegui.com/) perhaps ?

In case not, then i'm sure there are plenty of other projects around that fit your description
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 11:59:51 am
That's already possible. Easy.

What do you mean by the word "already"?

Even the original design of Borland's VCL and thereby the LCL of Lazarus was originally designed so separate user-interface from business (database) logic.
It s merely the fact that Borland designers did not ENFORCE that, that we still have the distinction between the VB trained screen-drawers guild and professionals.
And it is easy.. I simply can not respect PROGRAMMERS that only look at DESIGN. Designers can't program, programmers can usually not design.
In the case of Delphi and Lazarus programmers (that population is rather unbalanced between computer scientists and screen drawers with nothing in between) why don't you simply have a look at everything that's already there? BtBtn, panels, borders, forms, in general EVERYTHING you need to have a modern look.

You're lazy, y'all....

Sorry, but THAT is the case.
Title: Re: Modern UI in Lazarus
Post by: Wargan on April 18, 2017, 12:24:48 pm
I simply can not respect PROGRAMMERS that only look at DESIGN. Designers can't program, programmers can usually not design.

The design of the program is as important as its coding (IMHO)
Syndrome of dull design - the trouble of single programmers
Title: Re: Modern UI in Lazarus
Post by: Wargan on April 18, 2017, 01:23:06 pm
In the case of Delphi and Lazarus programmers (that population is rather unbalanced between computer scientists and screen drawers with nothing in between) why don't you simply have a look at everything that's already there? BtBtn, panels, borders, forms, in general EVERYTHING you need to have a modern look.

You're lazy, y'all....

I'm talking about the problem of creating applications with a customizable interface, globally ... How can applications with the most lame interface help in creating a good, friendly UI?
---
Not at all lazy  :P. Before I talked about the idea of the UI framework, I studied the materials, incl. proposed by the participants of the forum. Alas, there is nothing suitable on FPC/Lazarus :(
Title: Re: Customizable framework on Lazarus
Post by: Graeme on April 18, 2017, 02:54:12 pm
What is a customizable framework? I understand it this way: the ability to create applications with themes.
As Thaddy already mentioned, that is easily possible today (and yesterday, and 5 years ago) with fpGUI Toolkit - a 100% cross-platform GUI toolkit implemented in pure Object Pascal - talking directly to the underlying windowing systems. :)  No 3rd party dependencies like GTK2, QT etc.

Here is a list of themes included as standard with fpGUI. The fpGUI community has created many many more such themes.
  http://geldenhuys.co.uk/~graemeg/themes/start.html (http://geldenhuys.co.uk/~graemeg/themes/start.html)
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 03:45:46 pm
Go and make the first post screenshots with any of the libraries mentioned. Even not being lazy these are a hard work with the available tools in Lazarus.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 03:59:23 pm
Go and make the first post screenshots with any of the libraries mentioned. Even not being lazy these are a hard work with the available tools in Lazarus.

Oh well. dunno what you want but this  took two! seconds...: with standard LCL
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 04:02:50 pm
Go and make the first post screenshots with any of the libraries mentioned. Even not being lazy these are a hard work with the available tools in Lazarus.

Oh well. dunno what you want but this  took two! seconds...: with standard LCL

LOL you're being funny.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 04:12:03 pm
Go and make the first post screenshots with any of the libraries mentioned. Even not being lazy these are a hard work with the available tools in Lazarus.

Oh well. dunno what you want but this  took two! seconds...: with standard LCL

LOL you're being funny.

I am also a bit serious and telling the truth.... Now add a bitbtn to the left... make it flat... etc... It's all there...
 O:-) O:-) O:-) And it really took two seconds. Took me more to take the screenshot,save and post it...
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 04:18:26 pm
I will not change you and you will not change me, so is up to anyone to choose what to do with their time and choose their tools. Phil show me a map made entirely with JavaScript that loads some coordinates in the program window and wanted a cross platform way to display it, instead of using a mac only approach. Even in my signature I don't have an electron link but a BGRAControls (working on it since I started using Lazarus) / BGRABitmap one that's pure lazarus.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 04:56:37 pm
I will not change you and you will not change me, so is up to anyone to choose what to do with their time and choose their tools. Phil show me a map made entirely with JavaScript that loads some coordinates in the program window and wanted a cross platform way to display it, instead of using a mac only approach. Even in my signature I don't have an electron link but a BGRAControls (working on it since I started using Lazarus) / BGRABitmap one that's pure lazarus.
I have a google maps piece  written entirely in KOL (34 K only) and can do the same in about any language at the low level. Just with the google stuff. I can also do the same with OpenMap. What's wrong with you? Somebody has to write the low-level. That's the point. You can never ever make a career out of programming if you rely on other people to do the difficult stuff, go to your boss and demand a raise.

At least I did some of that  "difficult" stuff.. as did plenty of people on this forum... Silly.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 05:02:08 pm
I did also components for UI, but if I can use an already made solution I will choose it.

Edit: for example this small website:
https://lainz.github.io/webapps/compras.html

Do it exactly pixel by pixel with lazarus. Of course is possible but what is the cost on developing each component.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 05:07:13 pm
Lainz. I know that. Then look at my simple example for a modern UI. I don't always ignore you, you know that..... 8-) O:-)
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 05:13:06 pm
Lainz. I know that. Then look at my simple example for a modern UI. I don't always ignore you, you know that..... 8-) O:-)

Really I'm interested in doing it with Lazarus entirely: you get a faster UI plus a faster backend code and a lower file size.

I'm stuck with study that maybe I will leave or do it more sparely since I need to find a job, so my time is limited as everyone else.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 05:25:27 pm
Lainz. I know that. Then look at my simple example for a modern UI. I don't always ignore you, you know that..... 8-) O:-)

Really I'm interested in doing it with Lazarus entirely: you get a faster UI plus a faster backend code and a lower file size.

I'm stuck with study that maybe I will leave or do it more sparely since I need to find a job, so my time is limited as everyone else.

Well my somewhat - I raised the kid - stepson does this (with a university degree for it):
https://www.artstation.com/artist/piotrtekien
And http://www.swiftfreeze.com/ which I bought for him a couple of years ago.
I do simply what I do here....programming....
He doesn't even know how to program anymore...  :P 8-)
Form and implementation are separate things....
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 05:55:39 pm
My opinion is biased since im a graphic designer first. Then web developer. Then programmer.

Sometimes i forget that i can work in any field but that these are not the same..
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 05:57:41 pm
My opinion is biased since im a graphic designer first. Then web developer. Then programmer.

Sometimes i forget that i can work in any field but that these are not the same..

Ok. Fair. Any comments on my Piotr?  >:D
Title: Re: Modern UI in Lazarus
Post by: lainz on April 18, 2017, 06:02:51 pm
My opinion is biased since im a graphic designer first. Then web developer. Then programmer.

Sometimes i forget that i can work in any field but that these are not the same..

Ok. Fair. Any comments on my Piotr?  >:D

Amazing job. He sure paints better than me.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on April 18, 2017, 06:06:33 pm
You are a better programmer... 8) Now contact him and make a REAL UI. Do it proper, make it programmable O:-) >:D and I am happy... Then you ... Oh well..
[edit] But he finished a game....
Title: Some principles of modern design UI (links)
Post by: Wargan on April 21, 2017, 06:39:20 am
I found some principles of modern design UI:

https://designmodo.com/flat-design-principles/ (https://designmodo.com/flat-design-principles/)
http://techstream.org/Web-Development/Core-Principles-of-Flat-Design (http://techstream.org/Web-Development/Core-Principles-of-Flat-Desig)

Damn, wait for interesting suggestions how to implement it on Lazarus/FPC  :-\
Title: Re: Modern UI in Lazarus
Post by: Pascal on April 21, 2017, 07:31:10 pm
I am also interested in a mondern UI framework.

Is there a way to make Lazarus look like Visual Studio Code?
I can change the colors of the editor but the rest stays the same.

Title: Re: Modern UI in Lazarus
Post by: jmpessoa on April 21, 2017, 09:05:58 pm

Yes,

Try:

https://github.com/FlKo/LazarusDockedDesktops
Title: Re: Modern UI in Lazarus
Post by: Pascal on April 21, 2017, 09:20:47 pm
Yes, i know but i am more interested in changing the colors of the UI.
Title: Re: Modern UI in Lazarus
Post by: majid.ebru on April 21, 2017, 10:09:40 pm
see this (https://theroadtodelphi.com/delphi-ide-theme-editor/)
Title: Re: Some principles of modern design UI (links)
Post by: kupferstecher on April 21, 2017, 10:18:29 pm
I found some principles of modern design UI [...]

Damn, wait for interesting suggestions how to implement it on Lazarus/FPC  :-\
I don't see why you couldn't implement a "flat design" with Lazarus. The web technologies are optimized for it and there are more crappy, ugly websites out there then good looking and usable ones. What I want to say is that there is no such thing as 'out of the box'. You mentioned Microsoft's Modern UI, this is a mega large company and they even struggle with their own design standard. Just look around in the windows control panel...

I wonder if you even designed a 'modern user interface' in any language/framework before. The screenshots you attached contain lots of symbols/icons which have to be created individually. The links to the pages about flat design that you postet have a quite different flavour than the screenshots of the UI-Toolkits. The former ones need a lot of custom design, the latter ones are more or less just colored rectangles and thus easy to implement with the LCL.

What the LCL in my opinion really lacks is transparency for controls.

I also don't know how to implement smooth animations, but not sure if this easily possible or not.

Regards
Title: Re: Modern UI in Lazarus
Post by: trayres on April 21, 2017, 10:44:47 pm
Is transparency for the controls on the roadmap? Could we start a fundraiser for that?
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 22, 2017, 03:54:49 am
Is there a way to make Lazarus look like Visual Studio Code?
I can change the colors of the editor but the rest stays the same.

No you can't. With Lazarus IDE you can only change the editor syntax highlighting colors. As for any LCL based applications (that includes Lazarus IDE), you can't theme the UI separately from the OS theme. One of the many issues I have with LCL (1). If only Lazarus IDE was written in fpGUI, then everything would be 100% themeable - independent of the OS.

(1) - back in 2006 I wrote a commercial app for a client. They wanted to customise
        the look of the application to stand out from other applications or the OS itself.
        It wasn't possible then, and still isn't today. Luckily shortly afterwards they
        decided to port everything to fpGUI. Attached or some of the theme samples
        we prototyped for them. Those themes would be applied to the project even
        if the program ran on Linux or Windows.
Title: Re: Modern UI in Lazarus
Post by: valdir.marcos on April 22, 2017, 09:19:33 am
Is there a way to make Lazarus look like Visual Studio Code?
I can change the colors of the editor but the rest stays the same.

No you can't. With Lazarus IDE you can only change the editor syntax highlighting colors. As for any LCL based applications (that includes Lazarus IDE), you can't theme the UI separately from the OS theme. One of the many issues I have with LCL. If only Lazarus IDE was written in fpGUI, then everything would be 100% themeable - independent of the OS.

Is it possible to build a cross-platform solution in Lazarus Component Library (LCL) similar to Delphi FireMonkey?
http://stackoverflow.com/questions/21515576/how-to-programmatically-change-the-fontcolor-of-a-tlabel
Code: Pascal  [Select][+][-]
  1. Label1.StyledSettings := Label1.StyledSettings - [TStyledSetting.FontColor, TStyledSetting.Size];
  2. Label1.FontColor := TAlphaColors.Aquamarine;
  3. Label1.Font.Size := 14;
  4.  
  5. Label2.StyledSettings := Label1.StyledSettings - [TStyledSetting.FontColor, TStyledSetting.Size];
  6. Label2.FontColor := TAlphaColors.Dodgerblue;
  7. Label2.Font.Size := 16;

Or similar to Delphi VCL Styles?
VCL in XE7: Styles
http://blog.marcocantu.com/blog/2014-september-vcl-xe7-styles.html

Tuning VCL Styles for Forms and Controls
https://edn.embarcadero.com/article/42812
Title: Re: Modern UI in Lazarus
Post by: Zoran on April 22, 2017, 12:56:21 pm

Or similar to Delphi VCL Styles?
VCL in XE7: Styles
http://blog.marcocantu.com/blog/2014-september-vcl-xe7-styles.html

Tuning VCL Styles for Forms and Controls
https://edn.embarcadero.com/article/42812

I didn't know about VCL "styles".
Now I am very interested -- does VCL now draws controls from scratch or there is a way to apply this "style" on native Windows controls? Does anybody know? What do you think?
Title: Re: Some principles of modern design UI (links)
Post by: Wargan on April 22, 2017, 01:42:25 pm
I don't see why you couldn't implement a "flat design" with Lazarus. The web technologies are optimized for it and there are more crappy, ugly websites out there then good looking and usable ones. What I want to say is that there is no such thing as 'out of the box'. You mentioned Microsoft's Modern UI, this is a mega large company and they even struggle with their own design standard. Just look around in the windows control panel...

I wonder if you even designed a 'modern user interface' in any language/framework before. The screenshots you attached contain lots of symbols/icons which have to be created individually. The links to the pages about flat design that you postet have a quite different flavour than the screenshots of the UI-Toolkits. The former ones need a lot of custom design, the latter ones are more or less just colored rectangles and thus easy to implement with the LCL.

You do not quite understand me.
My idea is not that you need to make applications in the Modern UI style.
My idea is that it is possible (and necessary) to create a flexible framework for creating modern interfaces, for example the Modern interface. It's really modern. It really will be powerful. I see - on FreePascal, if such a project is implemented, then our community will compete with technologies such as XAML (https://en.wikipedia.org/wiki/Extensible_Application_Markup_Language), Java (https://en.wikipedia.org/wiki/Java_(programming_language)) or even node.js (for creating interfaces) (https://en.wikipedia.org/wiki/Node.js).

It sounds like a utopia (https://en.wikipedia.org/wiki/Utopia_(disambiguation)), but it's possible.

Lazarus at the moment is not the best editor in the world, Freepascal is not a recognized and well-known compiler, but they hides a huge potential.
So let's make Lazarus great again
.
Title: Re: Some principles of modern design UI (links)
Post by: Carver413 on April 22, 2017, 04:57:27 pm
You do not quite understand me.
My idea is not that you need to make applications in the Modern UI style.
My idea is that it is possible (and necessary) to create a flexible framework for creating modern interfaces, for example the Modern interface. It's really modern. It really will be powerful. I see - on FreePascal, if such a project is implemented, then our community will compete with technologies such as XAML (https://en.wikipedia.org/wiki/Extensible_Application_Markup_Language), Java (https://en.wikipedia.org/wiki/Java_(programming_language)) or even node.js (for creating interfaces) (https://en.wikipedia.org/wiki/Node.js).
It sounds like a utopia (https://en.wikipedia.org/wiki/Utopia_(disambiguation)), but it's possible.

Lazarus at the moment is not the best editor in the world, Freepascal is not a recognized and well-known compiler, but they hides a huge potential.
So let's make Lazarus great again
.

You are not the first to suggest such an Idea, nor will you be the last. but they all end up the same, no one is really interested enough to join your cause so you will have to mostly do it alone and try to gain support along the way.if still interested then I would focus on the graphic core for now and not worry about the rest. modern design will require something like modern opengl,vulkan,directx,metal. anything less would be a waste of time.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 22, 2017, 06:05:03 pm
The core problem with such reasoning is that to become popular you have to do more than getting on par with other offerings at a later time. Even then, the other offerings will be still be from more popular parties, there will be more stuff to find etc etc.

That is of course assuming you will get on par the first time (we are still working on Delphi compatibility, 20 years after it was decided to pursue it)

I think any big effort should be focussed on people who actually use Lazarus, rather than gunning for big external hordes that never come.

Title: Re: Modern UI in Lazarus
Post by: lainz on April 22, 2017, 10:17:12 pm
I personally will not do nothing since:
- For complex UI I use HTML.
- For any 'old looking' software native look is almost right.

And I recommend anyone interested really on making the UI suite or whatever:
- Look at any existing UI things (BGRAControls, Custom Drawn, 'AT' prefixed controls, fpGUI, any existing Delphi control that's freely available).

So you don't need to do everything from scratch, for example I made a dark theme for custom drawn with bgrabitmap: "BGRA Custom Drawn". Doing that I never write a single line of code of functionality, I focused on UI looking only, since custom drawn already works (well not 100% but works).

That's my advise.
Title: Re: Modern UI in Lazarus
Post by: mse on April 23, 2017, 07:37:15 am
Once more, such a tool for Free Pascal exists already:
http://forum.lazarus-ide.org/index.php/topic,36502.msg243396.html#msg243396
Title: Re: Modern UI in Lazarus
Post by: kupferstecher on April 23, 2017, 10:03:01 am
Once more, such a tool for Free Pascal exists already:

Quote from the wiki page:
http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overview
Quote
For the individual GUI elements no operating system resources are required - only the main windows are known to the operating system. The entire processing of external events (keyboard, mouse, focus control ...) happens within MSEgui on a Pascal level.
How about the performance here? I'd think that OS-managed applications are faster, as the OS can use the GPU for overlaying (But no idea).

Is Java doing it the same way (self-managing its application window)?
Title: Re: Modern UI in Lazarus
Post by: mse on April 23, 2017, 11:26:48 am

Quote from the wiki page:
http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overview
Quote
For the individual GUI elements no operating system resources are required - only the main windows are known to the operating system. The entire processing of external events (keyboard, mouse, focus control ...) happens within MSEgui on a Pascal level.
How about the performance here? I'd think that OS-managed applications are faster, as the OS can use the GPU for overlaying (But no idea).
MSEgui uses the drawing primitives of the OS, X11 on Linux and FreeBSD and gdi32/gdi+ on Windows. The drawing primitives often are hardware accelerated. There is also an experimental OpenGL backend, an EGL/GLES backend is planned.
MSEgui applications normally are (much) faster and need less resources than Lazarus programs. MSEide for example is absolutely usable on an old Raspberry Pi 2.
Quote
Is Java doing it the same way (self-managing its application window)?
I don't know.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 23, 2017, 02:44:57 pm
How about the performance here? I'd think that OS-managed applications are faster, as the OS can use the GPU for overlaying (But no idea).

GDI hardly uses GPU. Since Vista the desktop is doublebuffer on the OS level though and the composition of those double buffers uses GPU.

In general, I wouldn't worry about that. Modern UI is mostly empty monochromic  coloured space, that is fast on nearly everything. Antialiased font rendering is usually the most expensive of GUI anyway nowadays, not straight painting.

Modern UI was developed in the hope that one single application would work for various screenformats (PC- Tablet - telephone) without designing screens for every application.

In practice, most mobile screens are still manually designed though, to make the most of the available surface area. (though maybe that will change in time since mobile resolutions are growing fast)

Quote
Is Java doing it the same way (self-managing its application window)?

Swing did. I believe AWT tried to be a bit more

Note that Delphi's Windows 10 controls are modelled after their UWP app counterparts but are afaik also for quite a large part ownerdrawn. Ownerdrawn within the LCL/VCL framework though, not a 3rd party library with its own philosophies like MSIDE.
Title: Re: Modern UI in Lazarus
Post by: kupferstecher on April 23, 2017, 10:16:10 pm
mse and marcov, thanks for your explanations.

I always wondered why an application would need the help of the OS to manage the controls inside its own window. From application side it doesn't seem easier than just drawing the complete window. Especially in the case of Lazarus, where different systems have to be supported. Using the native style sure is one reason, but it would be imaginable that the OS passes a bitmap of e.g. a button to the application, which puts it whereever it likes. So I still think it might be a performance question, in the past more than today with the high performing CPUs and large memories.

My conclusion is: Native controls are preferable for (complex) desktop applictations and a self managed application is preferable on small devices with simple UIs.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 23, 2017, 10:30:55 pm
I always wondered why an application would need the help of the OS to manage the controls inside its own window. From application side it doesn't seem easier than just drawing the complete window.

There is more to a control than just straight drawing.  Consistent theming, keyboard and mouse support (drag, copy/paste etc), assistive technologies etc etc, are typically better with OS controls, adapting to OS font and DPI support.

Also, in the case of remote UI, native controls don't necessarily have to copy the bitmap over the wire. This is very noticable when e.g. using browsers (which are mostly owner drawn) with slow (or high latency) terminal services and internet connections. However that was for NT4,W2k and a bit XP. However I wonder how much is left of that with all the added theming (also for native widgets)
Title: Re: Modern UI in Lazarus
Post by: mse on April 24, 2017, 07:43:25 am
My conclusion is: Native controls are preferable for (complex) desktop applictations and a self managed application is preferable on small devices with simple UIs.
I think that real cross platform solutions are difficult to achieve with native controls, especially for complex desktop applications. There are too much limitations with the native widgets approach IMO.
I do not understand why you think that internally managed widgets need more CPU-power than widgets which are managed by the OS?
BTW, MSEgui applications use the X11 protocol and don't draw client side pixmaps which must be transferred pixel by pixel over the network in remote case. There is also MSEifirem which connects MSEgui clients and servers by a byte stream without the need to transfer graphic data.
http://mseide-msegui.sourceforge.net/pics/mseifiremote.mpeg
10'000 MSEgui buttons on a form:
http://mseide-msegui.sourceforge.net/pics/tenthousandbuttons.mpeg
https://gitlab.com/mseide-msegui/mseuniverse/tree/master/testcase/benchmark/runtimebutton
Title: Re: Modern UI in Lazarus
Post by: Pascal on April 24, 2017, 11:14:49 am
I would like to see a UI framework which can be used in web apps and native desktop apps.
One source compiled for either web or desktop (write once compile anywhere).
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 24, 2017, 11:42:10 am
I think that real cross platform solutions are difficult to achieve with native controls, especially for complex desktop applications.
+1
Just see all the inconsistencies in LCL, and also the reason why there is a "Restricted" tab in the Object Inspector of Lazarus IDE. MSEgui and fpGUI don't have such restrictions or inconsistencies across platforms.

Quote
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.
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 24, 2017, 11:44:58 am
I would like to see a UI framework which can be used in web apps and native desktop apps.
Yes, it existed since 1995.... Java Applets! The true "compile once, run everywhere" solution. Also Java applications can be written to run as a desktop application and as a Applet - without difficulty.
Title: Re: Modern UI in Lazarus
Post by: Pascal on April 24, 2017, 01:08:10 pm
Yes, it existed since 1995.... Java Applets! The true "compile once, run everywhere" solution. Also Java applications can be written to run as a desktop application and as a Applet - without difficulty.

Graeme  %),

that's not what i wanted to hear.   >:(
Title: Re: Modern UI in Lazarus
Post by: lainz on April 24, 2017, 02:58:07 pm
At least with HTML you can simulate any skin you want. Then code "native" at the server of your choice. Run anywhere. For desktops apps pack the html in Electron and run Win, Mac, Linux.

Metro UI (Windows 10)
https://metroui.org.ua/inputs.html

Material Design (Android)
https://getmdl.io/components/#textfields-section

Mac OS X Lion (This is really awesome)
http://www.alessioatzeni.com/mac-osx-lion-css3/
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 24, 2017, 05:27:13 pm
that's not what i wanted to hear.   >:(
:)  The more I use Java the more I get impressed. Just the other day I reused *.class files (I didn't have the source) in a new program. Those class files dated back to  2005. I didn't think they were going to work with my new code from 2017 - yet they worked without problems. Talk about backwards compatibility!! Plus the debugging is brilliant, IDE's are fantastic, just about anything you can think of that you want to write (libraries and such) - more than likely somebody has already done that in Java. The Java ecosystem is massive. Slowly but surely Java is becoming my new favourite development environment. Saying that, I'll definitely not say goodbye to Object Pascal any time soon - I have too many existing applications implemented in it and that I use and maintain daily.
Title: Re: Modern UI in Lazarus
Post by: valdir.marcos on April 24, 2017, 06:58:15 pm
The core problem with such reasoning is that to become popular you have to do more than getting on par with other offerings at a later time. Even then, the other offerings will be still be from more popular parties, there will be more stuff to find etc etc.

That is of course assuming you will get on par the first time (we are still working on Delphi compatibility, 20 years after it was decided to pursue it)

I think any big effort should be focussed on people who actually use Lazarus, rather than gunning for big external hordes that never come.

+1

Maybe time has arrived to FPC and Lazarus stop pursuing Delphi compatibility and start making its own path.

Other open source projects have done that before and succeeded, such as Firebird from Interbase, MariaDB from MySQL, LibreOffice from OpenOffice, etc.

I have nothing against implementing in FPC and Lazarus good features from other programming languages and IDEs, including Delphi. Almost all programming languages and IDEs do that.

FPC and Lazarus are already a better solution than Delphi. I know many people and companies here in Brazil that are migrating from old and new versions of Delphi, Clipper, Visual Basic and Visual Fox Pro to Lazarus. In the same way, I hardly hear about people leaving Lazarus in favor of Idera Embarcadero Delphi or Microsoft Visual Studio.

There is no silver bullet, but Lazarus sure is an excellent solution for many needs of many people and many companies.

I still miss FPC and Lazarus being more taught in technical schools, colleges and universities. Mostly, IT students here in Brazil learn Java, C/C++/C# and PHP, not Pascal.
Title: Re: Modern UI in Lazarus
Post by: valdir.marcos on April 24, 2017, 07:06:23 pm
I personally will not do nothing since:
- For complex UI I use HTML.
- For any 'old looking' software native look is almost right.

At least with HTML you can simulate any skin you want. Then code "native" at the server of your choice. Run anywhere. For desktops apps pack the html in Electron and run Win, Mac, Linux.

Did you mean solutions such as AVG Anti Virus 2017 using chromiumembedded, AngularJS and jQuery?

I have attached an image showing that information.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 24, 2017, 07:16:20 pm
I think that real cross platform solutions are difficult to achieve with native controls, especially for complex desktop applications.
+1
Just see all the inconsistencies in LCL, and also the reason why there is a "Restricted" tab in the Object Inspector of Lazarus IDE. MSEgui and fpGUI don't have such restrictions or inconsistencies across platforms.

Similarly, most owner drawn efforts are only a weak copy of the native look and feel of native widgets. Sometimes they manage to keep up for a short while, but in the mid-long term, atrophy sets in.
Title: Re: Modern UI in Lazarus
Post by: wp on April 24, 2017, 07:26:22 pm
Sometimes they manage to keep up for a short while, but in the mid-long term, atrophy sets in.
+1

And sometimes I think if all the efforts put into the latest glitter of user interfaces would be put into the quality of the programs we would be amazed how fast, reliable and secure software can be.
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 24, 2017, 07:37:02 pm
Similarly, most owner drawn efforts are only a weak copy of the native look and feel of native widgets. Sometimes they manage to keep up for a short while, but in the mid-long term, atrophy sets in.
You are living in some dream world it seems. Lets agree to disagree. Lazarus can't keep up either. Always behind VCL or FMX. Lazarus can't even keep up with its own lcl-xxx widgetsets (my comment about inconsistencies).

As for custom controls (as seen for VCL, LCL, fpGUI, MSEgui, .NET etc).... There is a reason companies like TMS, Raize and the hunderds or thousands of other ISV's are still in business - developing better controls than what Microsoft, Embarcadero and the like could come up with. Even Delphi/CodeGear/Embarcadero conceded that fact by opting to use Virtual Treeview in the IDE instead of the default TTreeview or TListView. Hell, closer to home (Lazarus IDE) also uses custom controls to overcome the limitations of the native controls.

I believe you are (or were) actively working with Delphi in your day job. How many commercial Delphi programs do you know that use the standard TDBGrid component - instead of what TMS and others have to offer. In my 10+ of working with Delphi (I don't any more), every Delphi project I worked on used 3rd party custom controls for Grids, Listviews, Treeviews etc. More often than not.
Title: Re: Modern UI in Lazarus
Post by: marcov on April 24, 2017, 07:47:50 pm
Similarly, most owner drawn efforts are only a weak copy of the native look and feel of native widgets. Sometimes they manage to keep up for a short while, but in the mid-long term, atrophy sets in.
You are living in some dream world it seems. Lets agree to disagree. Lazarus can't keep up either. Always behind VCL or FMX. Lazarus can't even keep up with its own lcl-xxx widgetsets (my comment about inconsistencies).

True, but that is not due LCL's choices. Are MSIDE and fpgui really that much better? IMHO not, not even close.

So it is not a question of direction, but rather manpower

Title: Re: Modern UI in Lazarus
Post by: Pascal on April 24, 2017, 08:26:01 pm
And sometimes I think if all the efforts put into the latest glitter of user interfaces would be put into the quality of the programs we would be amazed how fast, reliable and secure software can be.

You are right and that's why we need a modern UI framework which helps to make the data/business model more independant from the UI. While the UI still is very customizable (by user and developer) and looks the same on every system.
I often spend more time on UI parts to realize the look and feel i want to have. I do not want to make compromises on the way my program looks and behaves.
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 24, 2017, 11:04:19 pm
You are right and that's why we need a modern UI framework which helps to make the data/business model more independent from the UI. While the UI still is very customizable (by user and developer) and looks the same on every system.
And I've implemented both of those solutions already. Here are the short answers for both the above statements. Then I'll follow on with the detailed answers.


Both have been used in multiple commercial applications over the years, so they have more than proved themselves worthy.

Now the longer answer... This is in fact a copy-and-paste of a similar reply I gave to somebody else 3 days ago in the fpgui.support newsgroup.
Quote
> Why doesn't fpGUI have DB-aware components?

fpGUI has had brilliant database support for many years - it is
accomplished via the tiOPF framework. If you haven't heard of tiOPF
(Techinsite Object Persistence Framework), it became open source since
1999 and supports both Delphi and Free Pascal compilers. It has been
used in commercial environments before then, and still used today.

tiOPF abstracts away the technicals of database work and frees up the
dependency on a specific set of database components (eg: SqlDB, ZEOS,
IBX etc). tiOPF gives an OOP interface into data persistence.

  http://www.tiopf.com (http://www.tiopf.com)

The support newsgroup is also hosted by me on this server (http://tiopf.sourceforge.net/Support.shtml).

Adding to that, tiOPF had from the very early days its own set of
advanced GUI controls to allow the end-user to interact with the data. I
got tried of porting that code between VCL, CLX (Kylix) and LCL, and at the
time LCL's compatibility with VCL was not very good. So I came up with a
new solution - using yet more Design Patterns (tiOPF has a fantastic array
of design patterns usage). The Mediator and Observer
design patterns to be specific.

I implemented what I called Model-GUI-Mediator (MGM for short). It's an
interface that allows any no-DB components to become "object aware" and
allows for bi-directional updates. All without needing to create yet
more descendant components. Because most of the MGM implementation is
actually non-GUI code, it is also very well unit tested - like the rest
of the tiOPF framework (1800+ unit tests run every 3 hours, 24/7).
Anyway, I also implemented VCL, LCL and fpGUI support for
Model-GUI-Mediator - a very thin layer, so very easy to add new
components or other toolkit support.

So simple component like Edit, ComboBox or even TreeView, StringGrid etc
can now observe data and do bi-directional updates.

As I mentioned, tiOPF also hides the details of specific database
components. So once you wrote your application with tiOPF, if you wanted
to switch between SqlDB components to ZEOS components, simply change one
compiler define and recompile your project. There is NO other code
changes necessary.

And there is ever more. tiOPF also supports 3-tier database access.
Again, simply change one compiler define and recompile your project, and
then suddenly your program changes from a Client/Server design to a
3-tier design. tiOPF includes is own generic Application Server
application, which uses Indy for HTTP support. Data and queries get
wrapped in XML and compressed before it is sent over the wire.
Encryption can be enabled too. I've tested and used this between
continents, and the remote persistence performance is very impressive.

I've been using tiOPF in many commercial environments for 15 years now,
and it works brilliantly.

If you want to find out more about tiOPF, have a look at the website,
and post any questions in the tiopf.support newsgroup. Myself and others
will be happy to answer any questions.

Anyway, this is the reason why you don't see any DB-aware components in
tiOPF. It simply isn't needed, and a much better solution exists - in
the form of tiOPF and MGM.


Now as I mentioned, I've been using tiOPF and MGM together for many years in commercial applications. tiOPF perfectly guides the developer into having clear separation between the UI layer, Business layer and the Storage/Persistence layer. RAD style development on the other hand guides developers in totally the opposite direction - near 100% of the time mixing UI layer and Business layer and hard-coding to a specific set of database components and database table structure. RAD is great for prototyping, but definitely not good for long term support and development of ever growing applications.

For a more in-depth description of RAD vs OPF, take a look at this page from the tiOPF website:

   http://tiopf.sourceforge.net/Doc/Concepts/1_WhatIsAnOPF.shtml (http://tiopf.sourceforge.net/Doc/Concepts/1_WhatIsAnOPF.shtml)

I hope this information helps you.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 24, 2017, 11:24:09 pm
Did you mean solutions such as AVG Anti Virus 2017 using chromiumembedded, AngularJS and jQuery?

I have attached an image showing that information.

Exactly that. Is not Electron but it uses the same core: Chromium. AngularJS and JQuery are both compatible software. Maybe they use JQuery to run already made components that can be acquired from the web. Then AngularJS (1.x) to do for example the same you can do with lazarus: connecting the code and the UI, that's possible with pure JS but AngularJS helps a lot and reduces a lot the lines of code.
Title: Re: Modern UI in Lazarus
Post by: Phil on April 25, 2017, 12:57:02 am
Mac OS X Lion (This is really awesome)
http://www.alessioatzeni.com/mac-osx-lion-css3/

I'm still planning to try out Electron when I have some time, to see how it works on Mac, try to add a dynamic library to it, and try it out as a server Web app.

The "Lion" stuff looks okay...  for Lion. That is OS X from 5 versions back if I'm counting correctly. Couldn't find anything up-to-date on that site though.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 25, 2017, 03:12:13 am
Mac OS X Lion (This is really awesome)
http://www.alessioatzeni.com/mac-osx-lion-css3/

I'm still planning to try out Electron when I have some time, to see how it works on Mac, try to add a dynamic library to it, and try it out as a server Web app.

The "Lion" stuff looks okay...  for Lion. That is OS X from 5 versions back if I'm counting correctly. Couldn't find anything up-to-date on that site though.

About my own plans of using a command line application: for some reason the Windows 10 antivirus deletes my executable compiled with FPC. That exe only does some writeln()... with a json inside... strange. I need to try again maybe, but if being deleted because executed several times to quick shows that is not a good idea..

Yes, some of these menu items says 2012.. BTW I've seen only few of these sites, another is this:
https://kexanie.github.io/csswin10/

and this (but seems that it uses "only" bitmaps):
http://desktop.trovster.com/desktop/#

stuff  :o
http://codepen.io/ozer/pen/ckwyd
http://codepen.io/pedox/pen/ehgld
https://codepen.io/znak/pen/ntsdy
http://codepen.io/paddykontschak/pen/JALeB
Title: Re: Modern UI in Lazarus
Post by: mse on April 25, 2017, 07:35:29 am
You are living in some dream world it seems. Lets agree to disagree. Lazarus can't keep up either. Always behind VCL or FMX. Lazarus can't even keep up with its own lcl-xxx widgetsets (my comment about inconsistencies).

True, but that is not due LCL's choices. Are MSIDE and fpgui really that much better? IMHO not, not even close.
Yes they are. Because it is much simpler to build a high quality cross platform toolkit with the techniques used in fpGUI and MSEide+MSEgui than the techniques used by Lazarus.
I don't understand why you constantly fight against our alternatives. We invest huge time and effort into the projects on behalf of the Free Pascal users. As a Free Pascal core member you should  appreciate our commitment instead to battle against it.
BTW my IDE is is spelled "MSEide".
Title: Re: Modern UI in Lazarus
Post by: marcov on April 25, 2017, 10:15:56 am
Yes they are. Because it is much simpler to build a high quality cross platform toolkit with the techniques used in fpGUI and MSEide+MSEgui than the techniques used by Lazarus.

Opinion not fact.

Quote
I don't understand why you constantly fight against our alternatives. We invest huge time and effort into the projects on behalf of the Free Pascal users. As a Free Pascal core member you should  appreciate our commitment instead to battle against it.
BTW my IDE is is spelled "MSEide".

I do, I just don't like the way they are advocated by attacking Lazarus at every turn in discussions where  such opinions or alternatives were not even asked for, misrepresenting own opinion as universal facts.

If these projects were really that great, they didn't need that kind of advocacy.
Title: Re: Modern UI in Lazarus
Post by: ps on April 25, 2017, 10:32:14 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. But there are too many challenges for me. So concept is helded for now.


Title: Re: Modern UI in Lazarus
Post by: mse on April 25, 2017, 10:48:27 am
Yes they are. Because it is much simpler to build a high quality cross platform toolkit with the techniques used in fpGUI and MSEide+MSEgui than the techniques used by Lazarus.

Opinion not fact.

It is a fact. I tried both approaches.
Title: Re: Modern UI in Lazarus
Post by: wp on April 25, 2017, 10:54:39 am
The word "fact" has several alternative meanings these days.
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 25, 2017, 10:59:25 am
Yes they are. Because it is much simpler to build a high quality cross platform toolkit with the techniques used in fpGUI and MSEide+MSEgui than the techniques used by Lazarus.

Opinion not fact.


The fact is that neither fpGUI nor MSEgui suffer the inconsistencies so evident in LCL. That's enough proof for me. Also considering that I've used both LCL and fpGUI it multiple commercial applications for many years I feel very confident in knowing what I'm talking about. No guesswork required

Obviously you disagree with all this (as always), and I bet you have never actually used fpGUI or MSEgui in a commercial environment either (or any project for that matter). So that says a lot about your "one sided argument" without actually knowing the alternatives. But that's just my opinion. ;)
Title: Re: Modern UI in Lazarus
Post by: SunyD on April 25, 2017, 12:35:09 pm
Hello!

Does Lazarus have the ability to create modern user interfaces (for example: Modern UI (https://en.wikipedia.org/wiki/Metro_(design_language)) from Microsoft, Material Design (https://en.wikipedia.org/wiki/Material_Design) from Google)?

Like this (see attachments):

These are internet pages. You can do this with Lazarus. You have the choice between InternetExplorer,  Qt-Webkit,  GTK-Webkit,  Cacao-Webkit.
You can do this even with TFrameViewer. I use this technique with some of my applications.
Title: Re: Modern UI in Lazarus
Post by: x2nie on April 25, 2017, 01:50:07 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?
Title: Re: Modern UI in Lazarus
Post by: marcov on April 25, 2017, 02:54:53 pm
Afaik QT has some CSS like properrty system nowadays.
Title: Re: Modern UI in Lazarus
Post by: lainz on April 25, 2017, 03:51:01 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?

It's ok. But you have to code every css feature you need. And that doesn't give you the controls, only the drawing, then you need to create the controls also.
Title: Re: Modern UI in Lazarus
Post by: x2nie on April 25, 2017, 04:17:11 pm
It's ok. But you have to code every css feature you need. And that doesn't give you the controls, only the drawing, then you need to create the controls also.


Actually there was controls (for Delphi) built from HTML. Even, it acts like just in normal html, plus support additional custom control (or TWinControl?)
made by someone. But it doesn't support CSS3 nor CSS2.
It is not WebBrowser, it just html-viewer. I might be wrong, because I tried it years ago; today it possible improved
>> https://sourceforge.net/projects/htmlviewer/
Title: Re: Modern UI in Lazarus
Post by: lainz on April 25, 2017, 05:36:36 pm
It's ok. But you have to code every css feature you need. And that doesn't give you the controls, only the drawing, then you need to create the controls also.


Actually there was controls (for Delphi) built from HTML. Even, it acts like just in normal html, plus support additional custom control (or TWinControl?)
made by someone. But it doesn't support CSS3 nor CSS2.
It is not WebBrowser, it just html-viewer. I might be wrong, because I tried it years ago; today it possible improved
>> https://sourceforge.net/projects/htmlviewer/

The problem -again- is that there are 3 things needed to work with existing stuff: html, css and js. If you miss one then all existing components, styles, are not usable at all.
Title: Re: Modern UI in Lazarus
Post by: Wargan on April 28, 2017, 01:03:33 pm
So, I did not go to the forum much time and was very surprised by how many ideas were voiced about my topic. As it turned out, this issue is very interesting for programmers on FPC.
I hope, here we discuss the conceptual questions of how the future framework will look on Lazarus / FPC.

Gentlemen, how do you see the method of drawing UI? I think we should not do it like the others do. We must come up with something of our own. Something that should be very fast, should be easily customizable to the needs of the graphic designer, should be understandable and freely distributed.

Given my knowledge of programming, I think there are several options:
Title: Re: Modern UI in Lazarus
Post by: Graeme on April 28, 2017, 01:21:24 pm
  • Drawing elements and controls using DirectX / OpenGL. Fast and modern. But the GPU will be loaded, not the CPU. In addition, you will need bindings to libraries (such as ZenGL, for example) and a lot of new code. A lot of code, very much.
Both fpGUI and MSEgui have experimental OpenGL backends. Both toolkits are design to be flexible in that sense and configurable at compile time.

Quote
  • Drawing elements and controls using GDI. Old and, moreover, very inhibited method. It has one plus - it's much easier to do using standard drawing tools, such as Canvas. But with a complex interface, the performance will fall dramatically, I guarantee this.
As the author of fpGUI Toolkit (and as Martin - author of MSEgui will tell you the same), your statement about a fall in performance is absolute rubbish. In fact, I have had numerous people tell me that they are ecstatic about the performance of fpGUI and latency reduction they experienced compared to LCL for the same application. This was apparently very noticeable in video and sound intensive applications.

Title: Re: Modern UI in Lazarus
Post by: Handoko on April 28, 2017, 01:27:48 pm
Given my knowledge of programming, I think there are several options:
  • Drawing elements and controls using DirectX / OpenGL. Fast and modern. But the GPU will be loaded, not the CPU. In addition, you will need bindings to libraries (such as ZenGL, for example) and a lot of new code. A lot of code, very much.
  • Drawing elements and controls using GDI. Old and, moreover, very inhibited method. It has one plus - it's much easier to do using standard drawing tools, such as Canvas. But with a complex interface, the performance will fall dramatically, I guarantee this.
  • CSS & HTML + JS. In fact - again dirty copying from Electron.

I vote for OpenGL.

It is fast, cross-platform, has good backwards compatibility and almost all VGAs support it (except very old VGAs). Also with some efforts we can port it to support Android (OpengGL ES).
Title: Re: Modern UI in Lazarus
Post by: marcov 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.
Title: Re: Modern UI in Lazarus
Post by: lainz 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).
Title: Re: Modern UI in Lazarus
Post by: Blestan 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
Title: Re: Modern UI in Lazarus
Post by: Handoko 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
Title: Re: Modern UI in Lazarus
Post by: Blestan 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 :)
Title: Re: Modern UI in Lazarus
Post by: Handoko 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.
Title: Re: Modern UI in Lazarus
Post by: JuhaManninen 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/
Title: Re: Modern UI in Lazarus
Post by: Handoko 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?
Title: Re: Modern UI in Lazarus
Post by: molly on April 28, 2017, 04:41:35 pm
What is the mui in Lazarus/LCL MUI interface?
here (https://en.wikipedia.org/wiki/Magic_User_Interface) and here (http://www.sasg.com/mui/). It is a lazarus widgetset implementation for amiga-like systems using mui as backend.

Current status can be read here (http://fpcaroswiki.alb42.de/index.php?title=LCL_status).

Platform independent GUI (PiGUI) ?
Title: Re: Modern UI in Lazarus
Post by: Handoko 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
Title: Re: Modern UI in Lazarus
Post by: molly 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 (https://en.wikipedia.org/wiki/Natural_user_interface).

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.
Title: Re: Modern UI in Lazarus
Post by: JuhaManninen 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?
Title: Re: Modern UI in Lazarus
Post by: marcov 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.
Title: Re: Modern UI in Lazarus
Post by: ps 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.  
Title: Re: Modern UI in Lazarus
Post by: Carver413 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.
Title: Re: Modern UI in Lazarus
Post by: tk on April 29, 2017, 08:58:57 am
Does Lazarus have the ability to create modern user interfaces (for example: Modern UI (https://en.wikipedia.org/wiki/Metro_(design_language)) from Microsoft, Material Design (https://en.wikipedia.org/wiki/Material_Design) from Google)?

What is modern on those experiments, pardon UIs?
You think your app brings more money to you with them?
Title: Re: Modern UI in Lazarus
Post by: x2nie 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 !!

Title: Re: Modern UI in Lazarus
Post by: kupferstecher 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.
Title: Re: Modern UI in Lazarus
Post by: Groffy 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
Title: Re: Modern UI in Lazarus
Post by: mse 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.
Title: Re: Modern UI in Lazarus
Post by: lainz 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.  ::)
Title: Re: Modern UI in Lazarus
Post by: Carver413 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.     
Title: Re: Modern UI in Lazarus
Post by: Handoko 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.
Title: Re: Modern UI in Lazarus
Post by: lainz 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 ;)
Title: Re: Modern UI in Lazarus
Post by: lainz 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.
Title: Re: Modern UI in Lazarus
Post by: Graeme 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.
Title: Re: Modern UI in Lazarus
Post by: Graeme 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.
Title: Re: Modern UI in Lazarus
Post by: Graeme 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.
Title: Re: Modern UI in Lazarus
Post by: marcov 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? :-)
Title: Re: Modern UI in Lazarus
Post by: Wargan 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...
Title: Re: Modern UI in Lazarus
Post by: Wargan on May 01, 2017, 08:09:08 am
UPDATE: Some links on the GUI topic (if interested):

https://habrahabr.ru/post/244281/  russian
https://habrahabr.ru/post/276747/  russian

http://searchwindevelopment.techtarget.com/definition/GUI  english
Title: Re: Modern UI in Lazarus
Post by: Abelisto on May 01, 2017, 09:58:58 am
There are ten pages already so I beg you pardon for repetition if any.

"Modern UI" is something abstract as for me. There are several UI kinds:

- Command line and TUI for devices without graphics (Midnight Commander, FP IDE and so on)
- Classic desktop. DoubleCommander, LazPaint or Lazarus itself, really cool and handy applications where I can not imagine how to apply the kind of UI suggested in the first posts
- Games UI with rich graphics and effects
- Web UI which actually is an interactive documents where anything could be anywhere and each new site is the some kind of a "Point-and-click" quest
- Mobile UI, designed for extreme conditions like small screens, excessive light, shaking, controlling only by one-two fingers
- "Toys", some crazy mix of the last two-three ones. The modern antiviruses for Windows like Comodo is the good example I think  :)

So what we are discussing, in particular?
Title: Re: Modern UI in Lazarus
Post by: x2nie on May 01, 2017, 10:25:30 am
... So what we are discussing, in particular?
Nope, it was a bit out of topic (from original poster to tenth page).
I think the summary is: what way we can achieve a good looking GUI, using Lazarus/FeePascal.
And there were some reasonable suggestions right here: 8-)
Title: Re: Modern UI in Lazarus
Post by: marcov on May 01, 2017, 10:36:51 am
There are ten pages already so I beg you pardon for repetition if any.

"Modern UI" is something abstract as for me. There are several UI kinds:

- Command line and TUI for devices without graphics (Midnight Commander, FP IDE and so on)
- Classic desktop. DoubleCommander, LazPaint or Lazarus itself, really cool and handy applications where I can not imagine how to apply the kind of UI suggested in the first posts
- Games UI with rich graphics and effects
- Web UI which actually is an interactive documents where anything could be anywhere and each new site is the some kind of a "Point-and-click" quest
- Mobile UI, designed for extreme conditions like small screens, excessive light, shaking, controlling only by one-two fingers
- "Toys", some crazy mix of the last two-three ones. The modern antiviruses for Windows like Comodo is the good example I think  :)

So what we are discussing, in particular?

More importantly there are also radically different ways of achieving goals, namely doing so with existing desktop tools (LCL,LCL-customdrawn,fpgui,msegui,TV/FV) which will always be "less weblike" OR

moving to something much closer to a webbrowser. Either by making something new that is closer to the web browser rendering model or instantiating full browsers within your application.

A possible hybrid is QT Quick.  Maybe fpgui and msegui have different rendering models that are adaptable enough.
Title: Re: Modern UI in Lazarus
Post by: lainz on May 01, 2017, 03:04:24 pm
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...

Hi, please I'm not the original author of BGRAControls, thanks first to Dibo, Circular and all the contributors. I'm working in other projects that's the reason I didn't add new components recently to this package.
Title: Re: Modern UI in Lazarus
Post by: MISV on May 22, 2017, 06:25:17 pm
Do you guys think there could a LCL to BGRAControls conversion? Either runtime (so one does not need to patch forms) or designtime?

Title: Re: Modern UI in Lazarus
Post by: lainz on May 25, 2017, 12:27:21 am
Do you guys think there could a LCL to BGRAControls conversion? Either runtime (so one does not need to patch forms) or designtime?

Not possible.
Title: Re: Modern UI in Lazarus
Post by: lainz on May 25, 2017, 03:39:12 am
I continue the discussion of using Electron for the UI here:
https://forum.lazarus.freepascal.org/index.php?topic=36994.msg247319#msg247319
Title: Re: Modern UI in Lazarus
Post by: malcome on May 26, 2017, 06:40:49 am
JavaScript is modern, Pascal is not modern?
Title: Re: Modern UI in Lazarus
Post by: GetMem on May 26, 2017, 07:02:18 am
Quote
@malcome
JavaScript is modern, Pascal is not modern?
Pascal was published in 1970. It's old as hell :D.
Now seriously, by "modern" they are referring to the GUI not the language itself. You now that win10-ish look: few colors, very ugly icons, etc. I'm old enough to remember the 16 colors era, which slowly but steadily evolved to true colors, transparency etc. Personally I don't like the "Modern UI"(feel free to disagree with me), but I do understand the reason why it become main stream: nowadays you have to run operating systems on devices with low resources, so less color is actually good.
Title: Re: Modern UI in Lazarus
Post by: Thaddy on May 26, 2017, 07:12:11 am
Quote
@malcome
JavaScript is modern, Pascal is not modern?
Pascal was published in 1970. It's old as hell :D.
Now seriously, by "modern" they are referring to the GUI not the language itself. You now that win10-ish look: few colors, very ugly icons, etc. I'm old enough to remember the 16 colors era, which slowly but steadily evolved to true colors, transparency etc. Personally I don't like the "Modern UI"(feel free to disagree with me), but I do understand the reason why it become main stream: nowadays you have to run operating systems on devices with low resources, so less color is actually good.
Those devices have probably more resources than our first PC's. You were lucky to have CGA (16 colors,but restricted to 160X100 pixels I believe) I started with a Hercules card (1 color since black isn't a color + tricks...)
Title: Re: Modern UI in Lazarus
Post by: GetMem on May 26, 2017, 07:23:20 am
Quote
@Thaddy
Those devices have probably more resources than our first PC's. You were lucky to have CGA (16 colors,but restricted to 160X100 pixels I believe) I started with a Hercules card (1 color since black isn't a color + tricks...)
True. The most annoying thing was the low quality monitor though. After 1-2 hours of programming your eyes/head "exploded".
Title: Re: Modern UI in Lazarus
Post by: Abelisto on May 26, 2017, 12:16:54 pm
Quote
@Thaddy
Those devices have probably more resources than our first PC's. You were lucky to have CGA (16 colors,but restricted to 160X100 pixels I believe) I started with a Hercules card (1 color since black isn't a color + tricks...)
True. The most annoying thing was the low quality monitor though. After 1-2 hours of programming your eyes/head "exploded".

My first home PC was with CGA/Hercules card/monitor (I don't remember how it was switched, by mode command probably). And Hercules was excellent, no any tiredness of eyes.

About the topic, there is one sad life story... There was a cute desktop application, pgAdminIII, built on wxWidgets library (something like LCL/VCL for C++) and it works well on any popular OSes. But once some developers makes decision to move it to "modern technologies". They worked hard for a long time and rewrote it from scratch on Python+JS+CSS+HTML+Webkit. And for now, pgAminIV, is ambiguously huge, slow, uncomfortable and glitch. IMHO trying to make desktop applications on the WEB technologies is the wrong way.

Actually, there is yet another application, FreeDownloadManager, where UI was switched to Chromium embedded, with ambiguous resources usage, slow, poor UI (but, yes, modern), and after that I just dropped to use it (remember please, it is my IMHO :o) )

And there were some reasonable suggestions right here: 8-)
  • Using Lazarus + LCL + CSS <---- I loveit
  • ...

Somewhere it is already done on the OS (desktop environment) level: https://developer.gnome.org/gtk3/stable/chap-css-overview.html (or just search for "gtk css")
(Yes, I know about Linux place on the desktops market, it is really sad...)
Title: Re: Modern UI in Lazarus
Post by: lainz on May 26, 2017, 03:27:23 pm
Quote
@malcome
JavaScript is modern, Pascal is not modern?
Pascal was published in 1970. It's old as hell :D.
Now seriously, by "modern" they are referring to the GUI not the language itself. You now that win10-ish look: few colors, very ugly icons, etc. I'm old enough to remember the 16 colors era, which slowly but steadily evolved to true colors, transparency etc. Personally I don't like the "Modern UI"(feel free to disagree with me), but I do understand the reason why it become main stream: nowadays you have to run operating systems on devices with low resources, so less color is actually good.

Even Material Design Lite runs slowly on my Android device when full of animated controls. On the other hand there are modern video games with nothing lite, but GB of download and need of the newest graphics cards, also for the UI.

I'm not that old, I can remember the Win95 at 640x480 256 colors, but nothing older. Even that icons was not aimed to be flat, these was 3d like, but 16x16 pixels or 32x32.

The ugly icons is because vector icons can be scaled at any resolution, like fonts. And of course are easier to create.

Currently I use a software made with Electron that's Gitkraken and of course my own software.

When Modern UI get's replaced with something else... and so on.
Title: Re: Modern UI in Lazarus
Post by: laggyluk on May 31, 2017, 11:45:51 am
... So what we are discussing, in particular?
Nope, it was a bit out of topic (from original poster to tenth page).
I think the summary is: what way we can achieve a good looking GUI, using Lazarus/FeePascal.
And it looks like there's no 'easy' way :P
What I understand by modern UI, apart from the looks is:
I've been using Unity and UE4 for couple of years and funny thing, they are game engines not desktop program 'designers' like Lazarus. And yet it's quite easy to create GUI for desktop app in them that is way closer to my vision than anything I can make in Lazarus  :(
So yeah, my idea of modern UI is ability to build what I think would work best for given scenario, not what I'm allowed to build within tight design constrains.

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.
I might be wrong but you don't need to use much of fancy stuff to draw unlit gui elements?
Title: Re: Modern UI in Lazarus
Post by: mse on May 31, 2017, 02:03:22 pm
And it looks like there's no 'easy' way :P
What I understand by modern UI, apart from the looks is:

  • ability to nest one element in another without much restriction to their type (i.e place panel in label)
In MSEgui there is a single TWidget type, there is no distinction between TGraphicControl and TWinControl like in Delphi.
http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overview
Quote
  • elements have pivot and anchors and can adjust when parent is being resized (and I mean every element not some)
MSEgui supports it and AFAIK Lazarus and fpGUI too.
Quote
  • scale, rotate elements
All three support component scaling AFAIK. MSEgui can rotate text by the text flags tf_rotate90, tf_rotate180.
Quote
  • dynamic font size as a bonus
MSEgui has virtual fonts for the purpose, fpGUI has a similar concept AFAIK, Lazarus I don't know.
Quote
  • easily build your own components by stacking together bunch of primitive ones (which requires all of the above)
MSEide allows to store ad hoc combined widgets in "component store" for future reuse.[/list]
Title: Re: Modern UI in Lazarus
Post by: Thaddy on May 31, 2017, 02:28:46 pm
So... basically.... a frame?
Title: Re: Modern UI in Lazarus
Post by: laggyluk on May 31, 2017, 02:58:53 pm
    And it looks like there's no 'easy' way :P
    What I understand by modern UI, apart from the looks is:

    • ability to nest one element in another without much restriction to their type (i.e place panel in label)
    In MSEgui there is a single TWidget type, there is no distinction between TGraphicControl and TWinControl like in Delphi.
    http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overview
    Quote
    • elements have pivot and anchors and can adjust when parent is being resized (and I mean every element not some)
    MSEgui supports it and AFAIK Lazarus and fpGUI too.
    Quote
    • scale, rotate elements
    All three support component scaling AFAIK. MSEgui can rotate text by the text flags tf_rotate90, tf_rotate180.
    Quote
    • dynamic font size as a bonus
    MSEgui has virtual fonts for the purpose, fpGUI has a similar concept AFAIK, Lazarus I don't know.
    Quote
    • easily build your own components by stacking together bunch of primitive ones (which requires all of the above)
    MSEide allows to store ad hoc combined widgets in "component store" for future reuse.[/list]
    sounds like it's only flaw is looking like it's '90 again
    Title: Re: Modern UI in Lazarus
    Post by: Paul_ on May 31, 2017, 04:03:06 pm
    Somehow I can't imagine it. Can you show how your dreamed GUI looks in Unity or in UE?
    And what should the app do?



    Title: Re: Modern UI in Lazarus
    Post by: laggyluk on May 31, 2017, 04:54:55 pm
    Somehow I can't imagine it. Can you show how your dreamed GUI looks in Unity or in UE?
    And what should the app do?
    https://play.google.com/store/apps/details?id=com.laggyluk.tabster

    For example. First I've tried to make it in Lazarus but ended up using Unity. And for the better, single click deployment for multiple platforms. This still is programmer art but I pretty much achieved what I was after.

    Title: Re: Modern UI in Lazarus
    Post by: mse on May 31, 2017, 05:19:11 pm
    sounds like it's only flaw is looking like it's '90 again
    It's completely up to you or your designer how it looks. Please remember TFrame, TFace, TFrameComp, TFaceComp, TFaceList and TSkinController.
    Title: Off-topic
    Post by: sky_khan on May 31, 2017, 05:20:41 pm
    https://play.google.com/store/apps/details?id=com.laggyluk.tabster
    It says there is a windows version on your website but I cant see it there ?
    Title: Re: Modern UI in Lazarus
    Post by: lainz on May 31, 2017, 05:26:15 pm
    Somehow I can't imagine it. Can you show how your dreamed GUI looks in Unity or in UE?
    And what should the app do?
    https://play.google.com/store/apps/details?id=com.laggyluk.tabster

    For example. First I've tried to make it in Lazarus but ended up using Unity. And for the better, single click deployment for multiple platforms. This still is programmer art but I pretty much achieved what I was after.

    I want to try the windows version, but I can't find it on your website.

    I also use Unity, for games, and I like also the simplicity to make it cross platform with just switching the target and 'build', but not played too much with the UI features, but I can understand is not so easy. Well in fact making an UI is not easy, you need always a right tool to make it, a framework or something else, maybe in the Unity store there's something to do it more quickly or less painfull.

    But better than the Android designer is, I tried to make something with it like I do with html and was painfull and I did not reach my goal.

    I think you can do that in lazarus with BGRABitmap, at least withouth testing your app only seeing what it looks, but is not as simple as in unity :) So even Unity is easier to use for this UI.
    Title: Re: Modern UI in Lazarus
    Post by: Handoko on May 31, 2017, 05:43:30 pm
    Unity game engine is primarily used to develop games, they put efforts on appearance. So no wonder their UI is easy to use and looks good.

    Lazarus and Free Pascal is general purpose programming tool. As its motto says "write once, compile anywhere", they put efforts on cross-platform and cross compiling. Also because Delphi has big influence in Pascal world, Lazarus/FPC put some efforts too to adopt and make it compatible with Delphi features.
    Title: Re: Off-topic
    Post by: laggyluk on May 31, 2017, 05:58:28 pm
    https://play.google.com/store/apps/details?id=com.laggyluk.tabster
    It says there is a windows version on your website but I cant see it there ?
    Forgot to update the description, my website no longer hosts it.
    here's link to windows build but it's older than android version.
    http://laggyluk.com/files/Tabster_win_0.33.zip

    Title: Re: Modern UI in Lazarus
    Post by: laggyluk on May 31, 2017, 06:19:32 pm
    Unity game engine is primarily used to develop games, they put efforts on appearance. So no wonder their UI is easy to use and looks good.

    Lazarus and Free Pascal is general purpose programming tool. As its motto says "write once, compile anywhere", they put efforts on cross-platform and cross compiling. Also because Delphi has big influence in Pascal world, Lazarus/FPC put some efforts too to adopt and make it compatible with Delphi.
    Yeah I get that. But I also think that it is important to be able to make software look good and modern if need be. In the end why devs work on Lazarus for free? Because it's fun for them and they create something that other people want to use. And I think more people would use it if result would be more pretty  :-*
    Title: Re: Modern UI in Lazarus
    Post by: Paul_ on May 31, 2017, 08:28:31 pm
    @laggyluk thank you for example.

    As Lainz said, you can do same app with BGRA + standart components. Perhaps creation in Unity is faster and more user friendly, you can also say: "making games in Unity is 1000x simpler than in C++" but I don't know if it can be compared in this way. You will find the limits very soon. On the other hand, if you know programming language there will be no big difference if we speak about Windows/Linux desktop app.

    My BGRA example:
    https://i.imgur.com/CLfXbjs.png

    What could be better in combination Lazarus/BGRA and UI design:
    - standardization of BGRAcontrols, more components, better work with "canvas" etc.
    - special window where you can quickly define component design- colors, size, labels, fonts (now you must such search and search in object inspector, e.g. define every button state, it's very slow)
    - working pre-defined styles/designs and their application to existing components
    - make anchoring and placement on Form much simpler and faster

    But it is non-commercial product, people put their free time into it. That's big difference. Engines as Unity or UE, which are here for years and which are really expensive on development had no proper UI until last 1-3 years? Before there was maybe menu button, healthbar a ammunition counter.. :) And they still have a problems with some things - it's very hardware-intensive render GUI in games, DPI & scaling or so.





    Title: Re: Modern UI in Lazarus
    Post by: laggyluk on May 31, 2017, 11:05:16 pm
    My BGRA example:
    https://i.imgur.com/CLfXbjs.png

    But it is non-commercial product, people put their free time into it. That's big difference. Engines as Unity or UE, which are here for years and which are really expensive on development had no proper UI until last 1-3 years? Before there was maybe menu button, healthbar a ammunition counter.. :) And they still have a problems with some things - it's very hardware-intensive render GUI in games, DPI & scaling or so.
    Cool, where can I check out your game?

    As you've said, those game engines got their new UI subsystems quite recently but similarly  to Firemonkey they show that UI design process and results can be better than they used to be.
    Title: Re: Modern UI in Lazarus
    Post by: Paul_ on June 01, 2017, 12:52:51 am
    This is only "launcher" for one old game. Anyway BGRA is fine and there is potencial how you can have modern style.

    (I'm making game but it's at the beginning so far :))



    Title: Re: Modern UI in Lazarus
    Post by: cbsistem on November 20, 2017, 01:35:06 pm
    you could use RAUDUS, it has several visual themes.

    check out http://raudus.com

    Cristiano
    Title: Re: Modern UI in Lazarus
    Post by: Thaddy 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...
    Title: Re: Modern UI in Lazarus
    Post by: lainz 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.
    Title: Re: Modern UI in Lazarus
    Post by: TheEditor 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.
    Title: Re: Modern UI in Lazarus
    Post by: molly 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 (https://svn.freepascal.org/cgi-bin/viewvc.cgi?view=revision&root=lazarus&revision=54199)

    Update your Lazarus... (lazarus 1.9 from trunk)
    Title: Re: Modern UI in Lazarus
    Post by: TheEditor 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.
    Title: Re: Modern UI in Lazarus
    Post by: serkank 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.. 


    Title: Re: Modern UI in Lazarus
    Post by: Phil 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.)
    Title: Re: Modern UI in Lazarus
    Post by: lainz 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).
    Title: Re: Modern UI in Lazarus
    Post by: serkank 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 ..

    Title: Re: Modern UI in Lazarus
    Post by: lainz 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.
    Title: Re: Modern UI in Lazarus
    Post by: ps 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.
    Title: Re: Modern UI in Lazarus
    Post by: lainz on November 14, 2019, 01:42:03 pm
    Really good =)
    Title: Re: Modern UI in Lazarus
    Post by: xinyiman on November 14, 2019, 01:46:07 pm
    Really nice. Is there a test to try?

    Title: Re: Modern UI in Lazarus
    Post by: ps 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 ...
    Title: Re: Modern UI in Lazarus
    Post by: ps 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
    Title: Re: Modern UI in Lazarus
    Post by: lainz 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.
    Title: Re: Modern UI in Lazarus
    Post by: tr_escape 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.

    Title: Re: Modern UI in Lazarus
    Post by: zamronypj 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.
    Title: Re: Modern UI in Lazarus
    Post by: lainz 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.
    Title: Re: Modern UI in Lazarus
    Post by: Mocte 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.
    Title: Re: Modern UI in Lazarus
    Post by: ps 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;  
    Title: Re: Modern UI in Lazarus
    Post by: rca 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.
    Title: Re: Modern UI in Lazarus
    Post by: tr_escape 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.
    Title: Re: Modern UI in Lazarus
    Post by: ps 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 :) )
    Title: Re: Modern UI in Lazarus
    Post by: lainz 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?
    Title: Re: Modern UI in Lazarus
    Post by: ps 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 :)
    Title: Re: Modern UI in Lazarus
    Post by: avra 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  ;)
    Title: Re: Modern UI in Lazarus
    Post by: Thaddy 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.
    Title: Re: Modern UI in Lazarus
    Post by: avra 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/
    Title: Re: Modern UI in Lazarus
    Post by: ps 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.
    Title: Re: Modern UI in Lazarus
    Post by: Thaddy on November 24, 2019, 11:54:51 am
    I wouldn't call subpixel calculation of DeltaX and DeltaY for coloring pixels in integer based coordinating system a complex math. 
    That is also a form of oversampling. That was my point.
    Title: Re: Modern UI in Lazarus
    Post by: marcov on November 24, 2019, 12:03:41 pm
    Really cool stuff. Looks really good!
    Title: Re: Modern UI in Lazarus
    Post by: lainz on November 24, 2019, 01:39:58 pm
    I would like to combine LCL with CSS in many cases:

    ...

    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 ;

    Cool. I like the idea of custom controls with this. So we can have regular controls that can be placed directly on the form without code.

    Is not hard to create checkbox, radiobutton, combobox (we created these for bgracontrols too) with styles, but with CSS will be another story.

    Edit: Is not hard to put it at github (at any stage, I put things that are simply toy applications so what's the problem  :D ), so I don't need to patch my installation and can do a fetch to get the latest version, please  :)
    Title: Re: Modern UI in Lazarus
    Post by: ps on November 30, 2019, 01:08:28 pm
    Cool. I like the idea of custom controls with this. So we can have regular controls that can be placed directly on the form without code.
    Is not hard to create checkbox, radiobutton, combobox (we created these for bgracontrols too) with styles, but with CSS will be another story.
    Edit: Is not hard to put it at github (at any stage, I put things that are simply toy applications so what's the problem  :D ), so I don't need to patch my installation and can do a fetch to get the latest version, please  :)
    Yes. I have many complex controls like more buttons "inside", hover links etc. and when I would like to change something it's ...

    ok. github will be shortly. I have some progress with borders (without antialiasing). It was really hard for me to do this and have correct css corners (too many math for me :) ).
    Title: Re: Modern UI in Lazarus
    Post by: gii on November 30, 2019, 02:21:20 pm
    Do you have plans to support other components like TEdit, TComboBox and TDBGrid?
    Title: Re: Modern UI in Lazarus
    Post by: ps on November 30, 2019, 09:26:38 pm
    you can create any control with easy. For example TEdit with icon, help text and rounded corners :)

    Code: Pascal  [Select][+][-]
    1.   { TCSSEdit }
    2.  
    3.   TCSSEdit = class(TCSSShape)
    4.   private
    5.     FEdit: TEdit;
    6.   protected
    7.     procedure SetParent(NewParent: TWinControl); override;
    8.   public
    9.     constructor Create(AOwner: TComponent); override;
    10.   end;  

    and implementation:

    Code: Pascal  [Select][+][-]
    1. procedure TCSSEdit.SetParent(NewParent: TWinControl);
    2. begin
    3.   inherited SetParent(NewParent);
    4.   if Assigned(NewParent) then FEdit.Parent := NewParent;
    5. end;
    6.  
    7. constructor TCSSEdit.Create(AOwner: TComponent);
    8. begin
    9.   inherited Create(AOwner);
    10.   FEdit := TEdit.Create(Self);
    11.   FEdit.BorderStyle := bsNone;  // remove native UI frame
    12.   Body.InlineStyle := 'padding:10px;margin:10px; border:3px solid #0060DF;border-radius:10px; background-color:white;'; // create border 3px outter margin 10px and inner padding 10px
    13.   Body.AddNode( HTMLFa('', 'f002'));  // nice search icon
    14.   Body.AddNode( HTMLSpan('margin-left:10px;', 'Search here:'));   // move text 10px away from icon
    15.   Body.AddNode( HTMLDiv('padding-top:5px;', '').SetAlignControl(FEdit)); // make space 5 px from search "text" and place our TEdit.
    16. end;      

    That's all (yes we can override focus) :)
    Title: Re: Modern UI in Lazarus
    Post by: gii on November 30, 2019, 10:25:06 pm
    you can create any control with easy. For example TEdit with icon, help text and rounded corners :)

    Code: Pascal  [Select][+][-]
    1.   { TCSSEdit }
    2.  
    3.   TCSSEdit = class(TCSSShape)
    4.   private
    5.     FEdit: TEdit;
    6.   protected
    7.     procedure SetParent(NewParent: TWinControl); override;
    8.   public
    9.     constructor Create(AOwner: TComponent); override;
    10.   end;  

    and implementation:

    Code: Pascal  [Select][+][-]
    1. procedure TCSSEdit.SetParent(NewParent: TWinControl);
    2. begin
    3.   inherited SetParent(NewParent);
    4.   if Assigned(NewParent) then FEdit.Parent := NewParent;
    5. end;
    6.  
    7. constructor TCSSEdit.Create(AOwner: TComponent);
    8. begin
    9.   inherited Create(AOwner);
    10.   FEdit := TEdit.Create(Self);
    11.   FEdit.BorderStyle := bsNone;  // remove native UI frame
    12.   Body.InlineStyle := 'padding:10px;margin:10px; border:3px solid #0060DF;border-radius:10px; background-color:white;'; // create border 3px outter margin 10px and inner padding 10px
    13.   Body.AddNode( HTMLFa('', 'f002'));  // nice search icon
    14.   Body.AddNode( HTMLSpan('margin-left:10px;', 'Search here:'));   // move text 10px away from icon
    15.   Body.AddNode( HTMLDiv('padding-top:5px;', '').SetAlignControl(FEdit)); // make space 5 px from search "text" and place our TEdit.
    16. end;      

    That's all (yes we can override focus) :)

    Amazing!

    Got any predictions for the official release?
    Title: Re: Modern UI in Lazarus
    Post by: RazorGrass on December 07, 2019, 03:21:11 pm
    Hi ps,
    Any update on the GitHub? Or, how can one download this and start to learn/use it?

    RazorGrass
    Title: Re: Modern UI in Lazarus
    Post by: ps on December 09, 2019, 12:38:27 pm
    This is only work in progress version. I would like to have some basic features before official release. I can place unstable version here if is needed ...

    Here is some example of progress with "display:flex" support. As you can see text-align is needed to make it beautiful.

    Code: Pascal  [Select][+][-]
    1.  
    2. { TCSSCalendar }
    3.  TCSSCalendar = class(TCSSShape)
    4.   private
    5.     FActiveMonth,
    6.     FActiveDay: TDateTime;
    7.     procedure Changed;
    8.     procedure GoNextMonth(Sender: TObject);
    9.     procedure GoPrevMonth(Sender: TObject);
    10.   public
    11.     constructor Create(AOwner: TComponent); override;
    12.   end;
     
    and full source:
    Code: Pascal  [Select][+][-]
    1. procedure TCSSCalendar.Changed;
    2. var
    3.   Node: THtmlNode;
    4.   I, X: Integer;
    5.   DayLoop,
    6.   FirstDay: TDateTime;
    7.   W,
    8.   AYear, AMonth, ADay,
    9.   Year, Month, Day: Word;
    10.   Style: String;
    11.   fs: TFormatSettings;
    12. begin
    13.   // date time calculations
    14.   DecodeDate(FActiveDay, AYear, AMonth, ADay);
    15.   FirstDay := EncodeDate(AYear, AMonth, 1);
    16.   FirstDay := IncDay(FirstDay, - DayOfWeek(FirstDay) +1);
    17.   w := WeekOfTheYear(FirstDay);
    18.   fs := DefaultFormatSettings;
    19.  
    20.   // build top navigation section:  Month Year  < >
    21.   Body.InlineStyle := 'width:400px; background-color: white;margin:10px;padding:5px;';
    22.   Body.Clear;
    23.   Node := HTMLDiv('display:flex;color:#808080;', '');
    24.   Node.AddNode( HTMLDiv('flex-grow:1;padding:5px;')
    25.     .AddNode( HTMLSpan('font:18px;font-weight:bold;color:black;', fs.LongMonthNames[AMonth] ))
    26.     .AddNode( HTMLSpan('font:18px;color:#F0403C;margin-left:5px;', AYear.ToString))
    27.     );
    28.   Node.AddNode( HTMLFa('font:12px;padding:5px;cursor:pointer;', 'f053').SetOnClick(@GoPrevMonth).SetHover('color:#2AAEF5;'));               // prev month button
    29.   Node.AddNode( HTMLFa('font:12px;padding:5px;cursor:pointer;', 'f054').SetOnClick(@GoNextMonth).SetHover('color:#2AAEF5;'));               // next month button
    30.   Body.AddNode(Node);
    31.  
    32.   // build day names header
    33.   Node := HTMLDiv('display:flex;font-weight:bold;color:#999999;', '');
    34.   Node.AddNode( HTMLSpan('width:50px;', 'CW'));
    35.   for X := 0 to 6 do
    36.     Node.AddNode( HTMLSpan('flex-grow:1;margin:2px auto;', AnsiUpperCase(fs.ShortDayNames[DayOfWeek( IncDay(FirstDay,X))])));
    37.   Body.AddNode(Node);
    38.  
    39.   DayLoop := FirstDay;
    40.   // build week rows
    41.   for I := 0 to 5 do begin
    42.     Node := HTMLDiv('display:flex;', '').SetHover('background-color:#F2F2F2;border-radius:8px;color:#2AAEF5;');
    43.     Node.AddNode( HTMLSpan('width:30px;color:#999999;font-weight:bold;padding:5px;margin-right:5px;border-right:2px solid #E5E5E5;', (w + I).ToString));
    44.     // build days in columns
    45.     for X := 0 to 6 do begin
    46.       DecodeDate(DayLoop, Year, Month, Day);
    47.       Style := 'font:13px;color:black;flex-grow:1;';
    48.       if Month <> AMonth then Style := Style + 'color:#E5E5E5;';     // make days from different month less visible
    49.       Node.AddNode( HTMLSpan(Style, AddChar('0',(Day).ToString, 2)).SetHover('background-color:#2AAEF5;color:white;border-radius:5px;cursor:pointer;'));
    50.       DayLoop := IncDay(DayLoop);
    51.     end;
    52.     Body.AddNode(Node);
    53.   end;
    54.   InvalidatePreferredSize;
    55.   AdjustSize;
    56.   Invalidate;
    57. end;
    58.  
    59. procedure TCSSCalendar.GoNextMonth(Sender: TObject);
    60. begin
    61.   FActiveDay := IncMonth(FActiveDay, 1);
    62.   Changed;
    63. end;
    64.  
    65. procedure TCSSCalendar.GoPrevMonth(Sender: TObject);
    66. begin
    67.   FActiveDay := IncMonth(FActiveDay, -1);
    68.   Changed;
    69. end;  
    70.  
    71. constructor TCSSCalendar.Create(AOwner: TComponent);
    72. begin
    73.   inherited Create(AOwner);
    74.   FActiveDay := Now;
    75.   FActiveMonth := Now;
    76.   Changed;
    77. end;  
    78.    
    Title: Re: Modern UI in Lazarus
    Post by: ps on December 12, 2019, 05:33:45 pm
    My friends I'm completely lost ...

    It's really hard to fight with bugs in LCL and nobody cares  :'( . Maybe it's time to move project to Delphi/FMX? Or can somebody  fix few bugs for me? :)

    https://bugs.freepascal.org/view.php?id=36186
    https://bugs.freepascal.org/view.php?id=32934
    https://bugs.freepascal.org/view.php?id=36187
    https://bugs.freepascal.org/view.php?id=34829
    https://bugs.freepascal.org/view.php?id=36423
    https://bugs.freepascal.org/view.php?id=36286

    BTW I have next little progress with lot of bugs fixed. Next step will be border-shadow and it will be done for first release.
    In attachments there is little "more desktop like"  example with component TCSSCalendar (yes this calendar compoment have 150 lines of code).

    It's easy to create complex controls and side effect we can "style" it :) (or change behavior)

    Title: Re: Modern UI in Lazarus
    Post by: garlar27 on December 12, 2019, 06:34:45 pm
    I can help you only with control layout change (32934, 36187). To avoid that sort of problems, I use the anchor properties (the anchor editor or by code).
    Title: Re: Modern UI in Lazarus
    Post by: FTurtle on December 12, 2019, 07:55:58 pm
    As for bug https://bugs.freepascal.org/view.php?id=32934

    See example in wiki:
    https://wiki.lazarus.freepascal.org/Example:_Anchors._How_to_reliably_align_dynamically_created_controls_under_changing_visibility

    P.S. It is a good idea always use anchors instead align.
    Title: Re: Modern UI in Lazarus
    Post by: ps on December 15, 2019, 10:32:33 pm
    Thank's guys. Borderspacing is "removed" with margin (we don't need to use it). But it's bug for LCL. My initial idea was to set borderspacing with CSS, this is impossible due bug. But this 3 bugs is most important for me (it's possible contact Lazarus devs?):  ;)
    https://bugs.freepascal.org/view.php?id=36423 (this is huge performance impact for all controls in LCL)
    https://bugs.freepascal.org/view.php?id=36286 (maybe I can found another solution, but how?)
    https://bugs.freepascal.org/view.php?id=34829 (this is nearly show stopper for Cocoa apps :( )

    But I have some GOOD news :). Now we have better renderer than Chrome! (or I have luck for finding bugs :) ).

    PS: delphihtmlcomponents.com demo editor was used to test (maybe viewer have better results, I don't have this lib).
    Code: Text  [Select][+][-]
    1. <html lang=en>
    2.  <body>
    3. <div style="display:inline-block;background-color:#5B6DCD;border:35px solid green; border-top:15px solid red;border-bottom:5px solid red;margin:30px;padding:30px;border-radius:10px 15px 20px 125px;">
    4.   <div style="display:inline-block;background-color:red;color:white;border:3px solid white;padding:20px;margin:30px;">Hi there!</div>
    5.   <div style="display:inline-block;background-color:blue;color:white;border:3px solid white;padding:20px;margin:10px auto;width:10%;text-align:center;">10%</div>
    6.   <div style="display:inline-block;background-color:red;color:white;border:3px solid white;padding:20px;margin:30px;">Hi there!</div>
    7.   <div style="display:block;background-color:blue;color:white;border:3px solid white;padding:20px;margin:10px auto; width:50%;"><div style="display:block;border:3px solid red;padding:30px;">i'm inside</div><div style="display:inline-block;border:3px solid olive;padding:10px;">me too</div><div style="display:inline-block;border:13px solid white;padding:20px;border-bottom-right-radius:100px 60px;border-top:12px solid red;border-right:1px solid white;">me too</div></div>
    8.   <div style="display:inline-block;background-color:red;color:white;border:3px solid white;padding:20px;margin:30px;">Hi there!</div>
    9.   <div style="display:inline-block;background-color:red;color:white;border:3px solid white;padding:30px;margin:30px;border-top-right-radius:30px 60px;border-right:15px solid gray;">Hi there!</div>
    10.   <div style="display:inline-block;background-color:red;color:white;border:3px solid white;padding:20px;margin:30px;">Hi there!</div>
    11. </div>
    12.  
    13. <h1>test</h1>
    14. </body>
    15. </html>
    Title: Re: Modern UI in Lazarus
    Post by: lainz on December 15, 2019, 11:08:59 pm
    Congratulations, this is the missing component in Lazarus  :)
    Title: Re: Modern UI in Lazarus
    Post by: ps on December 18, 2019, 08:48:05 pm
    Congratulations, this is the missing component in Lazarus  :)
    It's far away from perfect. But good for start :). Firefox have 15 000 lines of code only for borders. My little lib is whole 2.500 :).
    Now I can say I hate CSS, why we can set width in percentage for children based on future width of parent(calculated from childrens) ??? ... 

    Source code is here: https://github.com/pst2d/csscontrols. Test app is in attachment. It will be fine if someone can test it under different platforms (Cocoa/Linux/Raspberry Pi ...). Thanks' all.

    Next step will be basic documentation and vacation :)
    Title: Re: Modern UI in Lazarus
    Post by: jomDA on February 22, 2020, 12:58:07 pm
    I tested all the samples from the post on Windows 10 V1909 and Lazarus 2.0.6.

    Really cool, i mean very good stuff! Thank you very much! ;D

    But there are some fault:
    1) I can't test the samples direct?! I need allways to start a new project and than copy the unit1.pas and .lfm. It looks like changes in project LPI?
    2)  If there are more than 10 controls on the form and you move the mouse over text or buttons it's flicker. In the past i develope a lot with Turbo Delphi (2006 and VCL) and this was not a problem?
    3) The calendar example looks bad (see the picture in attachment)

    I will check some improvements and than send a reply.

    See also my last post to modern UI:
    https://forum.lazarus.freepascal.org/index.php/topic,48523.msg350299.html#msg350299
    Title: Re: Modern UI in Lazarus
    Post by: ps on February 22, 2020, 01:31:49 pm
    1) there is no samples on github yet
    2) it's lazarus bug for all controls placed on scrollbox. You can set doublebuffered to true, or fix LCL bug :)  https://bugs.freepascal.org/view.php?id=36423
    3) this is "little big" problem.  I have no solution for this. Because in CSS "classic" browser there is allways one main control (browser window). But with LCL main controls can be TButton/TPanel. And size can be calculated like this:

    Control.Width := 300px;
    Control.Style := 'width:150px';
    Control.AutoSize := True;
    Control.Alignt := alTop;
    etc. etc.

    Calendar control don't follow new updates :( No time for check. Github updated.
    Title: Re: Modern UI in Lazarus
    Post by: jomDA on February 22, 2020, 06:47:57 pm
    Thank you for the answer.
    at 2) I will see on some tests with the default sample canvas_test and your bug sample, how complex is it to find a improvement. With this samples i will see also the differents from the known solutions for Windows (in Delphi VCL).
    at 3) In the moment i dont't now how render Lazarus the controls. In the past (Turbo Delphi with VCL on Windows) a control was drawing from Windows, so the VCL was only a adapter to the windows messages (like WM_PAINT or WM_MOUSEMOVE see info on MS: https://docs.microsoft.com/en-us/windows/win32/winmsg/about-messages-and-message-queues)
    Title: Re: Modern UI in Lazarus
    Post by: AT on March 20, 2020, 09:09:28 pm
    Github repository seems empty  :o
    Last post on this topic is only a few months back. Has this idea/project been killed?
    Thanks!
    Title: Re: Modern UI in Lazarus
    Post by: af0815 on March 20, 2020, 09:12:52 pm
    Github repository seems empty  :o
    look for the dev branch on github !
    Title: Re: Modern UI in Lazarus
    Post by: AT on March 20, 2020, 11:21:05 pm
    Github repository seems empty  :o
    look for the dev branch on github !

    Yupp! That works  :D Thanks...
    Title: Re: Modern UI in Lazarus
    Post by: Dibo on March 25, 2020, 04:44:24 pm
    About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.
    https://sciter.com/ (too bad that on linux it is based on GTK, not on low level X11)
    http://www.litehtml.com/
    https://lexborisov.github.io/Modest/
    https://ultralig.ht/
    Title: Re: Modern UI in Lazarus
    Post by: ps on March 25, 2020, 06:53:11 pm
    About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.
    https://sciter.com/ (too bad that on linux it is based on GTK, not on low level X11)
    http://www.litehtml.com/
    https://lexborisov.github.io/Modest/
    https://ultralig.ht/
    Too "fat" for me and lack of modern layout styles (display:flex;, correct border-radius rendering, etc.). With little updated my lib I can migrate our outdated app into this nice looking modern app :)
    Title: Re: Modern UI in Lazarus
    Post by: Dibo on March 25, 2020, 07:07:18 pm
    @ps. Didn't read all pages in this topic but noticed your posts and what I understood, you are working on some kind of CSS rendering component? Is there any official wiki? Where I can get source?
    Title: Re: Modern UI in Lazarus
    Post by: ps on March 25, 2020, 07:31:00 pm
    There is no official wiki or doc just now (no time). Few demos you can found in this thread and lib is here: https://github.com/pst2d/csscontrols/tree/dev . This is only "work in progress version".
    Title: Re: Modern UI in Lazarus
    Post by: garlar27 on April 15, 2020, 03:23:25 pm
    About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.
    https://sciter.com/ (too bad that on linux it is based on GTK, not on low level X11)
    http://www.litehtml.com/
    https://lexborisov.github.io/Modest/
    https://ultralig.ht/
    Too "fat" for me and lack of modern layout styles (display:flex;, correct border-radius rendering, etc.). With little updated my lib I can migrate our outdated app into this nice looking modern app :)
    Wow!! I'm impressed!!!
    This is awesome! Did you test it with the FPC and Lazarus Release Candidates???
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 17, 2020, 11:06:36 pm
    garlar27: Sure.  I'm working with latest SVN Lazarus.
    Title: Re: Modern UI in Lazarus
    Post by: andersonscinfo on April 25, 2020, 06:07:13 pm
    I couldn't find a demo. I really wanted to be able to test it, it's beautiful
    Title: Re: Modern UI in Lazarus
    Post by: mr-highball on April 25, 2020, 07:34:18 pm
    I couldn't find a demo. I really wanted to be able to test it, it's beautiful

    they are scattered throughout this post, here are two links. When I tried one of them, I was having a hard time getting the glyphs working as @ps shows in his screenshots and haven't had too much time to look more into it.
    https://forum.lazarus.freepascal.org/index.php/topic,36502.msg342561.html#msg342561
    https://forum.lazarus.freepascal.org/index.php/topic,36502.msg343391.html#msg343391
    Title: Re: Modern UI in Lazarus
    Post by: lainz on April 26, 2020, 03:25:09 pm
    Check out the Clone Controls, WYSWYG already available in Lazarus, with the power of LCL!
    https://forum.lazarus.freepascal.org/index.php/topic,49528.0.html

    Any LCL control can be used!
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 28, 2020, 08:41:32 pm
    @lainz: nice, but this is not correct way how to work with LCL

    WHY?

    1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

    2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

    3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 28, 2020, 08:46:08 pm
    they are scattered throughout this post, here are two links. When I tried one of them, I was having a hard time getting the glyphs working as @ps shows in his screenshots and haven't had too much time to look more into it.
    You must place 'fontawesome-webfont.ttf into your project dir (https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip)

    This ugly code is in cssctrls.pas :)
    Code: Pascal  [Select][+][-]
    1.   // TODO: this is not best way!
    2.   if FileExists(Application.Location + 'fontawesome-webfont.ttf') then  FAFont.Name :=  Application.Location + 'fontawesome-webfont.ttf';
    Title: Re: Modern UI in Lazarus
    Post by: mr-highball on April 28, 2020, 09:21:48 pm
    Ahh good to know, thanks @ps
    Title: Re: Modern UI in Lazarus
    Post by: lainz on April 28, 2020, 10:53:31 pm
    @lainz: nice, but this is not correct way how to work with LCL

    WHY?

    1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

    2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

    3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423

    Thanks, I found it slow. Nothing like real HTML, CSS.

    Seems that the design of the LCL based on the VCL is something that is not meant to be used like that.
    Title: Re: Modern UI in Lazarus
    Post by: lainz on April 29, 2020, 05:07:56 am
    @lainz: nice, but this is not correct way how to work with LCL

    WHY?

    1. on mouse enter/leave don't work as expected with scrollbox. (try to point to "link" and do mouse wheel ... link is still underline ..) (see this BUG/Feature: https://bugs.freepascal.org/view.php?id=36286). I'm frustrated with this behavior.

    2. using TWinControl (TBCPanel) and then resize it is hell slow! (try to resize your app on windows, and try to resize web source). 90 % performance problem is resizing TWinControl (or changing position). Maybe it's time to own controls for TControl (I hope so)

    3. you are not using autosize just now, but when you try (for multiline descriptions etc.) you will end with this bug: https://bugs.freepascal.org/view.php?id=36423

    Maybe you can modify it using your css library?
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 29, 2020, 08:33:46 am
    Maybe you can modify it using your css library?
    There will be same problems (onmouse enter/leave, and repainting whole scrollbox ...). Take a look attachment (no time to style :) )
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 29, 2020, 04:13:48 pm
    @lainz:
    Here you are styled version. (Search don't work yet). Please note you must build project as release verision due autosize degug slow down while resizing. Without TWinControl sizing performance is nice :)

    There is some nice CSS positiong (nearly impossible to do with LCL).

    Maybe next level is generate HTML/CSS and build for desktop and for web with PS2JS :)
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 29, 2020, 04:21:29 pm
    And for all :)

    There is multiple TCSSShape placed on TScrollbox. Each TCSSShape is LCL control, there is no web page. We can render so small LCL controls with CSS only as bacground color, or border line or do more complex painting like in this example. TCSSSHape support on hover and clicking by native.

    THtmlNode  can be used as renderer anywhere (OnPaint, OnDrawItem ... etc.).
    Title: Re: Modern UI in Lazarus
    Post by: ps on April 29, 2020, 08:11:40 pm
    Ok, @lainz here you are full version with search fixed. And others can use it as example :)

    In code there is one bug. In CSS all class priority is as typed, but I have implementation with sort by name (A,B...Z) so little trick is used for naming of class like here to highlight nodes:

    Instead of name "selected" I'm using "zselected" due this bug :(

    Code: Pascal  [Select][+][-]
    1.         if Pos( LowerCase(edtSearch.Text), LowerCase(Node.Text)) > 0 then begin
    2.           Result := True;
    3.           Node.ClassList.Add('zselected');
    4.         end else Node.ClassList.Remove('zselected');  
    Title: Re: Modern UI in Lazarus
    Post by: lainz on April 30, 2020, 06:18:58 pm
    Cool. Thanks =)
    Title: Re: Modern UI in Lazarus
    Post by: ps on May 01, 2020, 02:53:15 pm
    You are welcome. I have fixed control alignment in CSS so you can check new "feature" in your app with integrated search box with tags filter. So easy so simple with few lines of code.

    Latest CSS lib is required to test this.
    Title: Re: Modern UI in Lazarus
    Post by: lainz on May 01, 2020, 03:17:10 pm
    Wow =) That's really cool.
    Title: Re: Modern UI in Lazarus
    Post by: bpp on May 12, 2020, 06:35:22 pm
    Hi!

    Is it correct, use TPanels to build simple flat menus like we saw on first post?

    It's look's modern to me, and easy to do...

    Any cons?

    Thanks
    Title: Re: Modern UI in Lazarus
    Post by: Thaddy on May 12, 2020, 06:59:07 pm
    You can also use clickable regions. That only requires a canvas. Or even a framebuffer.
    PointInRect etc...very lightweight too at the expense of taking some more time to get it right, and no visual components. But it works.
    Title: Re: Modern UI in Lazarus
    Post by: lainz on May 23, 2020, 09:57:34 pm
    @ps really nice, I've created a bug report to see if you're interested on using BGRABitmap to draw, to add more things like gradients, antialiasing and transparency.

    We're working on a set of controls for MSEide and LCL, but I think that we can speed up the development if we use your library. Is more easy to composite things with your CSS library.
    Title: Re: Modern UI in Lazarus
    Post by: ps on May 24, 2020, 06:49:38 am
    I can look into int.

    Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

    https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion
    Title: Re: Modern UI in Lazarus
    Post by: lainz on May 24, 2020, 01:59:20 pm
    @ps really nice, I've created a bug report to see if you're interested on using BGRABitmap to draw, to add more things like gradients, antialiasing and transparency.

    We're working on a set of controls for MSEide and LCL, but I think that we can speed up the development if we use your library. Is more easy to composite things with your CSS library.

    I can look into int.

    Have you any polygon clipping support? It's important for box shadows. I'm currently searching for solution how to implement this. (clip plygon -> render shape with blur). I'm afraid do this in css lib instead of rendering lib due clip aliasing.

    https://skia.org/user/api/bmh_SkCanvas?cl=9919#clipRegion

    Hi, I asked @circular the author of BGRABitmap that he can give you a proper answer. Unfortunatelly I have no idea, I'm just a simple user of his library, and don't know the details.
    Title: Re: Modern UI in Lazarus
    Post by: winni on May 24, 2020, 03:29:10 pm
    Hi!

    Clip a Polygon - or whatever you need:

    Code: Pascal  [Select][+][-]
    1. procedure TForm1.Button1Click(Sender: TObject);
    2. var tmp : TBGRABitmap;
    3.     poly : ArrayOfTPointF;
    4. begin
    5. tmp := TBGRABitmap.create (width, height, cssWhite);
    6. setLength(Poly,3);
    7. poly[0] := PointF(10,10);
    8. Poly[1] := PointF (tmp.width -10,10);
    9. Poly[2] := PointF (10,Tmp.height - 10);
    10. tmp. ClipRect := Rect (0,0,tmp.width - 100, tmp.height);
    11. tmp.DrawPolygonAntialias(poly,cssBlack,3,cssRed);
    12. tmp.Draw (canvas,0,0);
    13. tmp.free;
    14. end;                      

    Winni
    Title: Re: Modern UI in Lazarus
    Post by: ps on May 24, 2020, 04:03:14 pm
    Clip a Polygon - or whatever you need:
    Thank's but it's only rect, we need clip region (points of polygon). Tomorow I look into TBGRABitmap
    Title: Re: Modern UI in Lazarus
    Post by: circular on May 24, 2020, 05:07:03 pm
    BGRABitmap doesn't do polygonal clipping as such. Though you can achieve the same effect by using masks.

    Code: Pascal  [Select][+][-]
    1. uses BGRABitmap, BGRABitmapTypes, BGRAGrayscaleMask;
    2.  
    3. { TForm1 }
    4.  
    5. procedure TForm1.FormPaint(Sender: TObject);
    6. var tmp, layer: TBGRABitmap;
    7.     mask: TGrayscaleMask;
    8.     poly : ArrayOfTPointF;
    9. begin
    10.   layer := TBGRABitmap.Create(clientwidth, clientheight, BGRAPixelTransparent);
    11.   setLength(Poly,3);
    12.   poly[0] := PointF(10, 10);
    13.   Poly[1] := PointF(layer.width-10, 10);
    14.   Poly[2] := PointF(10, layer.height-10);
    15.   layer.DrawPolygonAntialias(poly, cssBlack, 3, cssRed);
    16.  
    17.   mask := TGrayscaleMask.Create(clientwidth, clientheight, TByteMask.New(0));
    18.   mask.FillEllipseAntialias(mask.Width/2-0.5, mask.Height/2-0.5,
    19.                             mask.Width/2, mask.Height/2, TByteMask.New(255));
    20.   layer.ApplyMask(mask);
    21.   mask.Free;
    22.  
    23.   tmp := TBGRABitmap.create (clientwidth, clientheight, cssWhite);
    24.   tmp.PutImage(0,0, layer, dmDrawWithTransparency);
    25.   tmp.Draw (canvas,0,0);
    26.   tmp.free;
    27. end;  
    Title: Re: Modern UI in Lazarus
    Post by: lainz on May 24, 2020, 10:04:23 pm
    I tried to add BGRABitmap to CSS_package but I did it badly, at least to try.  :)

    Things are drawn antialiased, but badly, seems that I did not setup the brush correctly... also it's slow because it creates and releases a bitmap each time, must be created and destroyed anywhere else only when neccessary.

    Code: Pascal  [Select][+][-]
    1. bmp := TBGRABitmap.Create(TargetCanvas.Width, TargetCanvas.Height, BGRAPixelTransparent);
    2.     bmp.DrawPolygonAntialias(Ta, AColor);
    3.     bmp.Draw(ACanvas, 0, 0, False);
    4.     bmp.Free;
    5.     //TargetCanvas.Polygon(Ta);

    Edit: oops, like a newby error, I created the bitmap with the size of the entire canvas each time it needs to draw  :-[

    It should be replacing the ACanvas like ABGRABitmap, so instead of passing the canvas parameter in the drawing function, it must pass the BGRABitmap and draw into it, then when all the drawings are done in the TBGRABitmap, draw that to the final canvas.  :)

    In other words: the bitmap must be created only once with the size of the target canvas, then draw in the BGRABitmap object, draw to final canvas and free it.
    Title: Re: Modern UI in Lazarus
    Post by: fabiopesaju on September 12, 2020, 02:08:46 am
    please, i would like to know about the progress of this project...
    Title: Re: Modern UI in Lazarus
    Post by: ps on September 25, 2020, 11:16:32 am
    fabiopesaju: development is paused (no free time :( ). In November I will continue to work on this project.
    Title: Re: Modern UI in Lazarus
    Post by: alaa123456789 on September 25, 2020, 02:35:58 pm
    hey all , it seems interesting subject  :D , especially LCL + Css
    but could we please make it more simple for the JR guys like me , how to implement this from a to z (installation to small sample)

    thanks
    Alaa
    Title: Re: Modern UI in Lazarus
    Post by: Onur2x on September 25, 2020, 08:45:14 pm
    https://github.com/Onur2x/onurcomp
    It's an unfinished project but I haven't been able to deal with it lately. you can check it. Uses bgrabitmap.
    Title: Re: Modern UI in Lazarus
    Post by: tr_escape on September 25, 2020, 10:07:56 pm
    https://github.com/Onur2x/onurcomp
    It's an unfinished project but I haven't been able to deal with it lately. you can check it. Uses bgrabitmap.

    Dear Onur,

    My humble advice do not use your native language in your global components like as:

    https://github.com/Onur2x/onurcomp/blob/b76aca20f1a317e871a0cf5114c3d16bb37df79c/onurbutton.pas#L974

    instead of use as possible as do you in English like as below:

    Code: Pascal  [Select][+][-]
    1.     property ONBASILI: TONCUSTOMCROP read FBasili write FBasili;
    2.     property ONUZERINDE: TONCUSTOMCROP read FUzerinde write FUzerinde;
    3.     property ONPASIF: TONCUSTOMCROP read FPasif write FPasif;
    4.  

    --->

    Code: Pascal  [Select][+][-]
    1.     property ONPRESSED: TONCUSTOMCROP read FPressed write FPressed;
    2.     property ONOVER: TONCUSTOMCROP read FOver write FOver;
    3.     property ONPASIVVE: TONCUSTOMCROP read FPasivve write FPasivve;
    4.  

    Because you have to repeat again why did you create your variable or methods to other people.

    Have a good coding.
    Title: Re: Modern UI in Lazarus
    Post by: mciv on November 09, 2020, 08:50:59 pm
    Hi

    I just started with Lazarus. I wanna write game-mod launcher with a graphical user interface based 100% on JPG files - that is when you click a jpg from scrollbox on left it changes displayed jpg in preview area, then clicking the preview pic will copy some ini files to game directory and execute game exe (that part I know how to do). Whole unit (that is logo height + preview picture height) is always 768 since I designed it in 1360x768 resolution in graphic program (all jpgs fit together nicely in terms of proportions). Application is fullscreened with FormActivate doing BorderStyle:=bsNone; WindowState:=wsMaximized; For time being I made it with TImage everywhere with scroll list jpgs onClick activating their corresponding procedures hiding all other preview jpgs and showing the proper one

    Code: Pascal  [Select][+][-]
    1. procedure TForm1.ScrollList_JPG_Click_3(Sender: TObject);
    2. begin
    3.   PREVIEW_JPG_1.Hide;
    4.   PREVIEW_JPG_2.Hide;
    5.   PREVIEW_JPG_3.Show;
    6.   PREVIEW_JPG_4.Hide;
    7.   PREVIEW_JPG_5.Hide;
    8.   PREVIEW_JPG_6.Hide;
    9.   PREVIEW_JPG_7.Hide;
    10.   PREVIEW_JPG_8.Hide;
    11.   PREVIEW_JPG_9.Hide;
    12. end;

    My goal is that whole composition is always proportionally scaled to 100% screen height and centered (margins being nonrelevant). I've been browsing this forum trying different solutions but nothing seems to work (I understand TImage dimension controls dont't scale bitmap but just the "canvas of control"). For tidiness I like each jpg being an object with it's onclick procedure etc, I also appreciate the fact that jpgs are embedded in lazarus compiled exe and I don't have to keep them as separate files on disk (they won't be big). It would be also nice to have scroller bar being jpg-driven not generic one but that would be more advanced I guess and not really necessary now. Do you have anything in mind which can help? Thanks in advance!
    Title: Re: Modern UI in Lazarus
    Post by: mciv on November 12, 2020, 07:13:16 am
    OK I got this sorted out. I count how many percent of screen an image takes (and should take in any resolution) by dividing image width by screen width in which fullscreen layout was designed (for example 1100/1360), the same with height and top and left positions. Then I activate "stretch" for TImage and apply such code

    Code: Pascal  [Select][+][-]
    1. var
    2. Form1: TForm1;
    3. ScreenX,ScreenY: integer;
    4.  
    5. procedure TForm1.FormActivate(Sender: TObject);
    6. begin
    7.   BorderStyle:=bsNone;
    8.   WindowState:=wsMaximized;
    9.   ScreenX:=screen.width;
    10.   ScreenY:=screen.height;
    11.   Logo_Top.Left:=round(ScreenX*0.0955882353);
    12.   Logo_Top.Top:=round(ScreenY*0);
    13.   Logo_Top.Width:=round(ScreenX*0.8088235294);
    14.   Logo_Top.Height:=round(ScreenY*0.21875);
    15.   end;

    and the same for other stuff. It would need fixes for different aspect ratios but it's kind of bulletproof for a start. I ain't sure how "Proportional" checkbox works with this solution - height should be dominant.
    TinyPortal © 2005-2018