Recomendations for converting an LCL app to a web based front end

[Flea]

Hi, I am looking for some recommendations for converting an existing LCL based Lazarus GUI to a web based one. Its a kiosk style app and only has 3 screens currently so its a very simple GUI.

I am mainly using Lazarus 4.2. I develop it on Windows mainly (just for ease/speed) and then compile (occasionally debug!) with Lazarus on the Rpi. The app is designed to run on Raspberry Pi OS. The LCL version is OK but lacks a bit of finesse. I have briefly experimented with the different web browsers from here https://wiki.freepascal.org/Webbrowser. Most of them either didn't work or were really very very basic and could not run pages CCS\Javascript.

I would like just to rewrite the front end leaving the back end alone. I was thinking I could get a front end to load in a web browser embedded in the app, and then I just hook into the various events for button clicks etc. Is this easy to achieve? What components would you suggest?

If its easier to develop just under Linux (e.g. Mint) rather than developing in Windows, that's a possibility. I'm also considering deploying to RPi Zero 2W so if a web based front end could work on this, it would be amazing.

Thanks

[egsuh]

Not sure what you want to do.

If you want to move to web instead of Windows/Linux application, you would have to make web application, which is HTML based. Or you can use Figma, etc.

If you want to embed web browser within your app, try WebView4Delphi. There are CEF4 etc., but I think the latter is not easy to implement and deploy.

What you want is to separate server part from GUI, and connect the server via Internet, you have to write web server part --- backend, possibly in FPC/Lazarus.

[Thaddy]

What you want is to separate server part from GUI, and connect the server via Internet, you have to write web server part --- backend, possibly in FPC/Lazarus.

Indeed. It is very helpful to design your application such that all events are assigned over TActionList and TActions, all events.
That already gives you a choice to decouple your interface in such a way that it is easier to translate to a web interface or any other interface.

[Flea]

Hi thanks for the responses egsuh and Thaddy!

I should have explained a little deeper. My app needs to work offline hence connecting to an internet based server is not going to be practical. I will revisit WebView4Delphi and CEF4 as I have tried them before, but one of them didn't seem to work with HTML\CSS\Javascript very well and the other needed a huge amount of deployment files. I just wondered if there was some other component out there for Lazarus that allows you to embed a browser to show basic HTML\CSS\Javascript but has hooks to intercept link\button click events etc.

Maybe I am oversimplifying this request and actually what I need is a full blown browser if I want a browser to show HTML\CSS\Javascript ! In other words, there is no such thing as a simple web browser nowadays!

Yes I was thinking that I would embed a browser in my app. I was hoping that I could have the server and browser all in one app as it were rather than separating them into a server app and a web browser app/page, but I guess this solution has its advantages anyway.

Thanks for your help people! I'll give WebView4Delphi and CEF4 another go.

[cdbc]

Hi
What you're talking about, is giving your application a "Kiosk-Mode" 
I'll bet, @Thaddy has made a few of those over the years 
When you're @Home, your app is connected to its main database, but works seamlessly through a proxy (TClientDataset in Delphi) and thus updates the main database immediately, but when you take your app 'on the road', it still works on its proxy dataset and keeps data there, till you come @Home again, where it then updates / resyncs with the main database...
Regards Benny

[gidesa]

There is a library called webui, with that you can use a browser as a GUI frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

[egsuh]

Hmmmm.. WebView4Delphi can show any web page. So I think it can process HTML / css / javascript fully.

It can be installed from Online Package Manager. You need to do something before run it. Please refer to the demo programs.
And a thing I found was that it works correctly when the browser is focused within your application.

Here's what I have done.

https://forum.lazarus.freepascal.org/index.php/topic,72627.0.html

[egsuh]

There is a library called webui, with that you can use a browser as a GUI frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

I'm reading its website, but it'll take some to understand it.

So, can you kindly explain me what it does briefly?

Does it display my Lazarus application on Web? For example, if I want to make a page which contains an TEdit and TButton, does webUI convert it into a webpage containing <input type=text> and <button>?


I think there were such components on Delhi since at least Delphi 5,  but it was difficult to make it work, so I gave up.

[gidesa]

There is a library called webui, with that you can use a browser as a GUI frontend.
For Windows, Linux, MacOs.
Delphi and Fpc are supported.
see https://webui.me

I'm reading its website, but it'll take some to understand it.

So, can you kindly explain me what it does briefly?

Does it display my Lazarus application on Web? For example, if I want to make a page which contains an TEdit and TButton, does webUI convert it into a webpage containing <input type=text> and <button>?

No, this library doesn't display anything on internet. It's a wrapper between your Pascal program and the browser rendering engine. Various o.s. and browsers are supported, ex. Edge, Chrome, Firefox, etc.
It can be see as a replacement for LCL: instead of having an Lcl form with TEdit and TButton you have an Html page. You have to write the Html/Css, no automatic conversion. Maybe it answers to your request: replacing Lcl with an Html/css renderer.
I attach a simple example. It open a window of default browser, (here Firefox) loading the index.html page. Then the browser act as the Gui, exchanging events with Pascal program.
Note that the example requires webui.pas unit, and webui-2.dll. You have to download them from webgui site.

[egsuh]

It can be see as a replacement for LCL: instead of having an Lcl form with TEdit and TButton you have an Html page. You have to write the Html/Css, no automatic conversion. Maybe it answers to your request: replacing Lcl with an Html/css renderer.

I see. Thanks a lot.  It seems not easy to use, but seems useful when I have simple user interface and complex procedure to run, which would be complex to implement with javascript.

[paweld]

pas2js:
- https://wiki.lazarus.freepascal.org/pas2js
- https://wiki.lazarus.freepascal.org/lazarus_pas2js_integration
- https://wiki.lazarus.freepascal.org/pas2js_designtime
- https://github.com/pascaldragon/Pas2JS_Widget or https://github.com/seryal/Pas2JS_Widget

[kompustelnik]

Check out D2Bridge - https://www.d2bridge.com.br/
I think this is what you're looking for 

[zeljko]

It is windows only framework ?? Why so ?

[kompustelnik]

It is windows only framework ?? Why so ?

Yeah, but you can develop your webapp under Linux in Lazarus and once you compile it you can run the webapp server through WINE.
I did it on Oracle Free Tier VPS (1GB RAM, Ubuntu 22.04 LTS, console only, no desktop) and it works perfectly 

There is D2Docker also, but I didn't touched it yet.

[BlueIcaro]

It is windows only framework ?? Why so ?

Yeah, but you can develop your webapp under Linux in Lazarus and once you compile it you can run the webapp server through WINE.
I did it on Oracle Free Tier VPS (1GB RAM, Ubuntu 22.04 LTS, console only, no desktop) and it works perfectly 

There is D2Docker also, but I didn't touched it yet.

Hello, can you explain how do it?
/BlueIcaro