Author Topic: Possible to say port LCL Custom Drawn to HTML5 Canvas?  (Read 2023 times)


  • Full Member
  • ***
  • Posts: 119
Possible to say port LCL Custom Drawn to HTML5 Canvas?
« on: January 01, 2022, 08:33:27 pm »
I know it's a long shot, but since custom drawn technically doesn't use any OS-dependent widgetset and instead draws everything itself, would it be possible to say implement each widget in this interface using a HTML5 Canvas for each widget, or for the entire form?  Sure, at this point it wouldn't really be an "HTML Form" application, but porting actual LCL applications which use this Interface would be easy.

I can see that existing Pas2JS widget libraries seem to be using regular HTML controls, alongside CSS to style them.  While this is a great approach, it will make incorporating some of the more complex LCL widgets in pure HTML a bit difficult.  I think trying to port the LCL Custom Drawn Interface to Pas2JS using an HTML5 Canvas might be a great idea to get the ball rolling faster.  With this Interface we wouldn't need to sacrifice as much when porting Lazarus programs over to the Web.  It will also enable much more complex functionalities and control over say using an HTML-based form solution.

The first approach is to use a separate HTML5 Canvas for each LCL Custom Drawn widget.  This will make it possible to still design site using HTML and CSS, and we could re-use existing HTML elements.  Although, this will mean slightly less control over the presentation, as each widget is them fully contained in the HTML5 Canvas drawing area.

The second approach is to make the TForm literally the HTML5 Canvas, and we draw each widget as it is seen in the Designer onto the HTML5 Canvas.  This enables the TForm to look almost exactly the same in every single browser and device.  A Window event in the browser could trigger the TForm.onResize event, and would work exactly as it does in desktop Lazarus apps, so the app will be-able to scale to various form-factors, just as we currently do on the Desktop and on Android.

I believe the second approach will lead to a much better developer and end-user experience.  If a developer say doesn't want a end-user to easily copy text and images from the Application, this is 100% do-able with using a full page HTML5 Canvas TForm, as it will work just as it does in a Desktop app.

Anyways, what do you guys think of this?  And has this been discussed before?

Quick Edit: I noticed that I brought this up before actually. :D,44735.0.html
« Last Edit: January 01, 2022, 08:37:00 pm by kveroneau »


TinyPortal © 2005-2018