Or you can use fpGui (http://fpgui.sourceforge.net/index.shtml) instead of LCLOr MSEide+MSEgui. It has excellent skinning support, see TWidget.Frame, TWidget.Face, TFrameComp, TFaceComp, TSkinController...
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.
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 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 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
... im using object pascal for more than 30 yesrs ...
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
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 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 ...
Visual Studio code is the best JavaScript editor I ever used.
Hi Phil that's ok. I will try.
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.
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.
Ok. What I did is to replicate the local pascal app.
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.
Then create a little 40MB download for us to try out.
That's already possible. Easy.
What do you mean by the word "already"?Something like this (http://fpgui.sourceforge.net/) or this (http://www.msegui.com/) perhaps ?
That's already possible. Easy.
What do you mean by the word "already"?
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....
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.
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.
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
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 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.
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:-)
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.
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..
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
I found some principles of modern design UI [...]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...
Damn, wait for interesting suggestions how to implement it on Lazarus/FPC :-\
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.
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.
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 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.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.
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.
Once more, such a tool for Free Pascal exists already:
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.
Quote from the wiki page:
http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overviewQuoteFor 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)?I don't know.
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)?
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.
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 think that real cross platform solutions are difficult to achieve with native controls, especially for complex desktop applications.+1
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.
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.
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.
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.
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.
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.
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.
Sometimes they manage to keep up for a short while, but in the mid-long term, atrophy sets in.+1
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).
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).
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 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.
> 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.
Did you mean solutions such as AVG Anti Virus 2017 using chromiumembedded, AngularJS and jQuery?
I have attached an image showing that information.
Mac OS X Lion (This is really awesome)
http://www.alessioatzeni.com/mac-osx-lion-css3/
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.
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.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".
It is a fact. I tried both approaches.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.
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.
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):
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. ....
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.
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/
Both fpGUI and MSEgui have experimental OpenGL backends. Both toolkits are design to be flexible in that sense and configurable at compile time.
- 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.
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.
- 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.
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.
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.
4. Create visual components for it (TmuiButton, TmuiLabel, TmuiPanel, ...)Good luck for your project but your choice of naming is not good.
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.
Platform independent GUI sounds good. But some (bad people) may call it Pig UI.:)
Maybe:That actually sounds good if it wasn't for nui (https://en.wikipedia.org/wiki/Natural_user_interface).
πui ( Platform Independent UI )
You know pi is related with science. The invention of pi make a lot of technologies become possible: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.
https://en.wikipedia.org/wiki/Pi
Why nobody wants to improve LCL?
There are 2 ways to create a modern UI in Lazarus.Hey, that (second choice) is cool !!
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. ....
your proof picture is beautiful for my eyes. Is there any source code to try?
As the author of fpGUI ToolkitThe first version of fpGUI was written by Sebastian Günther back in 2000.
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)?
There are 2 ways to create a modern UI in Lazarus.Hey, that (second choice) is cool !!
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. ....
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 .........
It probably was just a lack of understanding~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.
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.
What is modern on those experiments, pardon UIs?
You think your app brings more money to you with them?
It probably was just a lack of understanding~It seems so. ;-)
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.
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
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.
The first version of fpGUI was written by Sebastian Günther back in 2000.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.
Funny how you can take someone else's work, make a few changes and suddenly you are the author.
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).
A comment about the praised OpenGL:+1
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
A comment about the praised OpenGL:+1
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
After working with OpenGL for the last few months I definitely feel that pain.
... So what we are discussing, in particular?Nope, it was a bit out of topic (from original poster to tenth page).
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?
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:
type TMuiComponent = class() // accurate inheritance should be clarified published property Appearance: TStringList read FAppearance write SetAppearance; end; type TMuiForm = class(TMuiComponent) //... end; type TMuiButton = class(TMuiComponent) //... end;
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
TMuiForm { width: 640px; height: 480px; caption: 'Test caption'; isVisible: true; position: [poDesktopCenter]; }
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...
Do you guys think there could a LCL to BGRAControls conversion? Either runtime (so one does not need to patch forms) or designtime?
@malcomePascal was published in 1970. It's old as hell :D.
JavaScript is modern, Pascal is not modern?
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...)Quote@malcomePascal was published in 1970. It's old as hell :D.
JavaScript is modern, Pascal is not modern?
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.
@ThaddyTrue. The most annoying thing was the low quality monitor though. After 1-2 hours of programming your eyes/head "exploded".
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...)
Quote@ThaddyTrue. The most annoying thing was the low quality monitor though. After 1-2 hours of programming your eyes/head "exploded".
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...)
And there were some reasonable suggestions right here: 8-)
- Using Lazarus + LCL + CSS <---- I loveit
- ...
Quote@malcomePascal was published in 1970. It's old as hell :D.
JavaScript is modern, Pascal is not modern?
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.
And it looks like there's no 'easy' way :P... 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.
I might be wrong but you don't need to use much of fancy stuff to draw unlit gui elements?A comment about the praised OpenGL:+1
OpenGL for widgetset drawing is a nightmare to work with. There are uncountable different versions with different extensions, limitations and bugs.
After working with OpenGL for the last few months I definitely feel that pain.
And it looks like there's no 'easy' way :PIn MSEgui there is a single TWidget type, there is no distinction between TGraphicControl and TWinControl like in Delphi.
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)
MSEgui supports it and AFAIK Lazarus and fpGUI too.
- elements have pivot and anchors and can adjust when parent is being resized (and I mean every element not some)
All three support component scaling AFAIK. MSEgui can rotate text by the text flags tf_rotate90, tf_rotate180.
- scale, rotate elements
MSEgui has virtual fonts for the purpose, fpGUI has a similar concept AFAIK, Lazarus I don't know.
- dynamic font size as a bonus
MSEide allows to store ad hoc combined widgets in "component store" for future reuse.[/list]
- easily build your own components by stacking together bunch of primitive ones (which requires all of the above)
sounds like it's only flaw is looking like it's '90 againAnd it looks like there's no 'easy' way :PIn MSEgui there is a single TWidget type, there is no distinction between TGraphicControl and TWinControl like in Delphi.
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)
http://wiki.freepascal.org/MSEide_&_MSEgui#Architecture_overviewQuoteMSEgui supports it and AFAIK Lazarus and fpGUI too.
- elements have pivot and anchors and can adjust when parent is being resized (and I mean every element not some)
QuoteAll three support component scaling AFAIK. MSEgui can rotate text by the text flags tf_rotate90, tf_rotate180.
- scale, rotate elements
QuoteMSEgui has virtual fonts for the purpose, fpGUI has a similar concept AFAIK, Lazarus I don't know.
- dynamic font size as a bonus
QuoteMSEide allows to store ad hoc combined widgets in "component store" for future reuse.[/list]
- easily build your own components by stacking together bunch of primitive ones (which requires all of the above)
Somehow I can't imagine it. Can you show how your dreamed GUI looks in Unity or in UE?https://play.google.com/store/apps/details?id=com.laggyluk.tabster
And what should the app do?
sounds like it's only flaw is looking like it's '90 againIt's completely up to you or your designer how it looks. Please remember TFrame, TFace, TFrameComp, TFaceComp, TFaceList and TSkinController.
https://play.google.com/store/apps/details?id=com.laggyluk.tabsterIt says there is a windows version on your website but I cant see it there ?
Somehow I can't imagine it. Can you show how your dreamed GUI looks in Unity or in UE?https://play.google.com/store/apps/details?id=com.laggyluk.tabster
And what should the app do?
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.
Forgot to update the description, my website no longer hosts it.https://play.google.com/store/apps/details?id=com.laggyluk.tabsterIt says there is a windows version on your website but I cant see it there ?
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.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 :-*
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.
My BGRA example:Cool, where can I check out your game?
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.
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...
Edit: for better looking fonts (at least looks better on Windows) change the font style for each element to fqFineClearTypeRGB.
..., 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 ;-)
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..
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 ..
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.
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.
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.
now we can create some buttons (yes! with group support)
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.I think there is no mature for github :). Please fix project for your lazarus (I have SVN version).
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:
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.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.That is also a form of oversampling. That was my point.
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"
TMyCoolButton = class(TCustomButton) private Froot, FLeftIcon, FRightIcon, FTopText: THtmlNode; ... procedure CalculatePrefferedSize ( .... ) begin Froot.LayouTo(AWidth, AHeight); end; procedure Paint ( .... ); override; begin Froot.PaintTo(Self.Canvas, ClientRect); end; procedure SetIconColor(AValue: TColor); begin FLeftIcon.InlineStyle := 'color:#' + LCLToHtml(AValue); FRoot.Changed; end; published property TopText: String read ... write ; 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.Yes. I have many complex controls like more buttons "inside", hover links etc. and when I would like to change something it's ...
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 :)
you can create any control with easy. For example TEdit with icon, help text and rounded corners :)
{ TCSSEdit } TCSSEdit = class(TCSSShape) private FEdit: TEdit; protected procedure SetParent(NewParent: TWinControl); override; public constructor Create(AOwner: TComponent); override; end;
and implementation:
procedure TCSSEdit.SetParent(NewParent: TWinControl); begin inherited SetParent(NewParent); if Assigned(NewParent) then FEdit.Parent := NewParent; end; constructor TCSSEdit.Create(AOwner: TComponent); begin inherited Create(AOwner); FEdit := TEdit.Create(Self); FEdit.BorderStyle := bsNone; // remove native UI frame 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 Body.AddNode( HTMLFa('', 'f002')); // nice search icon Body.AddNode( HTMLSpan('margin-left:10px;', 'Search here:')); // move text 10px away from icon Body.AddNode( HTMLDiv('padding-top:5px;', '').SetAlignControl(FEdit)); // make space 5 px from search "text" and place our TEdit. end;
That's all (yes we can override focus) :)
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 :).
Github repository seems empty :olook for the dev branch on github !
Github repository seems empty :olook for the dev branch on github !
About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.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 :)
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/
Wow!! I'm impressed!!!About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.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 :)
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/
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.You must place 'fontawesome-webfont.ttf into your project dir (https://fontawesome.com/v4.7.0/assets/font-awesome-4.7.0.zip)
@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
@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?There will be same problems (onmouse enter/leave, and repainting whole scrollbox ...). Take a look attachment (no time to style :) )
@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
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
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.
it is nice tool , the demos which are in this thread it is not working , i tried them many times on windows ,when you open the lpi it doesnt show any unit or formAbout modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.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 :)
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/
I do not see anything extra ordinary so you should be more specific.
Adjust colors and use custom glyphs for buttons, the graphic effects are images I guess.
In many cases you need to turn off theme support in project options. That way you disable System Operating System default styles and can use your own colors for everything.
I just can show you a little how I mean it with a project I did long ago by turning runtime themes off (built with Delphi)
There I do have more control over the used colors.
hi.Simply by using the menu designer?
how to add submenu inside sub menu like this picture
Thank You
the menu is like this pictureThat's a tree view.
That's right, like that. by using css componentsCSS is out of the question, I believe. Procedural theming is what you can do instead. At least I haven't found any component with such a capability yet. I'm not sure how flexible the standard TTreeView in this regard, but VirtualTreeview (https://wiki.lazarus.freepascal.org/VirtualTreeview) should be doable. If you don't want to it yourself but are willing to spend some money, TMS FNC UI Pack (https://www.tmssoftware.com/site/tmsfncuipack.asp?s=fnctreeview#features) has a nice one.
thank's
About modern UI. Instead of reinventing the wheel, maybe better make wrapper for existing HTML render engines.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 :)
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/
I like Lazarus the way it is. ...
Hello.
For fun and personal development, I made a small package of visual components that mimic Fluent Design from Microsoft. And I'm attaching a few screenshots. Is this interesting to anyone now, or is it hopelessly outdated?
It's not outdated, is used currently in Windows 11, with some modifications.What I mean is this: everyone is talking about CSS, HTML5.
This is very interesting for me. How did you do that? @hedgehogFor rendering I used
Hello.
For fun and personal development, I made a small package of visual components that mimic Fluent Design from Microsoft. And I'm attaching a few screenshots. Is this interesting to anyone now, or is it hopelessly outdated?
I have uploaded the package to GitHub:
https://github.com/hedgehog344/FluentControls
Don't take it too seriously :)
This is just a demonstration, and it was done quickly, dirty, and ineptly.
Is this compatible with LCL, or is OpenGL only?If I understood your question correctly...
Cool.Is this compatible with LCL, or is OpenGL only?If I understood your question correctly...
Yes, it is compatible with LCL.
On Windows, Direct2D (if available) or GDI+ is used for rendering.
And what's used in Linux and macOS?Reading the rendering package, seems like only Windows and Linux are supported. The only macOS related string I can find is "darwin", and it's only in the networking package. So, assume this doesn't compile on macOS.
I have uploaded the package to GitHub:
https://github.com/hedgehog344/FluentControls
Don't take it too seriously :)
This is just a demonstration, and it was done quickly, dirty, and ineptly.
@Lainz: https://github.com/PierceNg/fpwebview
@Lainz: https://github.com/PierceNg/fpwebviewI tried to compile demo https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli (https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli),
@Lainz: https://github.com/PierceNg/fpwebviewI tried to compile demo https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli (https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli),
It gives error importing external symbols.
note:
the dll's & lib are for x64
note:@Lainz: https://github.com/PierceNg/fpwebviewI tried to compile demo https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli (https://github.com/PierceNg/fpwebview/tree/master/demo/browser_cli),
It gives error importing external symbols.
the dll's & lib are for x64
I've compiled the demo from the first folder, the one that opens freepascal website, you need to use the compile.bat in Windows.
Please report that bug in the issues of the project at github.