Suitability of FreeCAD's architecture for web-based frontend

Here's the place for discussion related to coding in FreeCAD, C++ or Python. Design, interfaces and structures.
badmechanic
Posts: 1
Joined: Sun Aug 30, 2020 2:26 am

Suitability of FreeCAD's architecture for web-based frontend

Postby badmechanic » Sun Aug 30, 2020 2:37 am

Hi,

I'm a software engineer and hobby CAD user. I currently used OnShape exclusively but don't like the closed source nature. There is no way for me to add certain features myself, like the ability to rename multiple parts at once.

Anyway, I know this has been discussed before, but I didn't find a very SWE-focused discussion. Is FreeCAD's architecture suitable for writing a web-based frontend? Is there a summary of the design of the software, data model, parametric solver, etc?

I'm particularly curious about the data model used by FreeCAD vs the data model described by OnShape here: https://onshape-public.github.io/docs/a ... data-model.

One day something like FreeCAD should rule the CAD world. If you look at the programming landscape, we benefit a lot from open source editors and tools. I suspect CAD will, too. To get there, I think a web interface is table stakes.
vocx
Posts: 5068
Joined: Thu Oct 18, 2018 9:18 pm

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby vocx » Sun Aug 30, 2020 6:42 am

badmechanic wrote:
Sun Aug 30, 2020 2:37 am
... To get there, I think a web interface is table stakes.
I don't understand the fascination with web based applications. It seems that it is meant to deliver software as a service and lock customers in. Having the program installed locally is better to make sure it is available without restrictions, like truly free software.

Anyway, I believe what you want is described in many threads:
* Cloud/WebGL/HTML5/Browser ... again
* FreeCAD packaged for web similar to onshape
* [Help wanted] FreeCAD in web browser project. Its not Onshape! And its working.
* JavaScript UI concept (React)
Always add the important information to your posts if you need help. Also see Tutorials and Video tutorials.
To support the documentation effort, and code development, your donation is appreciated: liberapay.com/FreeCAD.
User avatar
vanuan
Posts: 449
Joined: Wed Oct 24, 2018 9:49 pm

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby vanuan » Sun Aug 30, 2020 12:03 pm

badmechanic wrote:
Sun Aug 30, 2020 2:37 am
I'm a software engineer and hobby CAD user. I currently used OnShape exclusively but don't like the closed source nature. There is no way for me to add certain features myself, like the ability to rename multiple parts at once.

Anyway, I know this has been discussed before, but I didn't find a very SWE-focused discussion. Is FreeCAD's architecture suitable for writing a web-based frontend? Is there a summary of the design of the software, data model, parametric solver, etc?

I'm particularly curious about the data model used by FreeCAD vs the data model described by OnShape here: https://onshape-public.github.io/docs/a ... data-model.

One day something like FreeCAD should rule the CAD world. If you look at the programming landscape, we benefit a lot from open source editors and tools. I suspect CAD will, too. To get there, I think a web interface is table stakes.
Hi, I'm a software engineer too. I've just discovered OnShape and it looks awesome. But the price of $1500 per year is just breathtaking.

I've proposed the React+GraphQL UI POC. When creating it, I realized there's no complete up-to-date documentation on FreeCAD's DocumentObject model. And there's no way to generate it. So I drafted this proposal: https://github.com/FreeCAD/FreeCAD-Enha ... ject-model to create a machine-readable structured description of all the object types and properties. Would something like that be similar to OnShape's data model?

The closest documentation on the "data model" that is available now can be found on these pages: I agree that the web interface is a must for a much faster pace of development.
garlicbread
Posts: 11
Joined: Sun Mar 17, 2019 3:55 am

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby garlicbread » Wed Sep 16, 2020 12:09 am

This was something I thought about in the past, but i don't know enough about freecad's front end / back end personally
(I know the backend is python and the frontend is QT / C++)
I'd also imagine it would be quite a lot of work.

Typically these days for User Interfaces web based stuff seems to be the way to go
But it doesn't need to be sitting on a web-server or browsed via a web-browser it can be made to look just like a normal application
(for an example of what I mean see - https://github.com/jgraph/drawio-desktop/releases)

The main advantages tend to be the shear number of UI libraries now out there is immense.
And the use of single page applications removes the need for page loading making things look just like a proper desktop application.

CefPython / Eel

One of the biggest challenges though if the whole UI was replaced would be implementing Cad related functionality such as the sketcher
So a better approach might be to try and do parts of if piecemeal using the QT Webengine
If you ever decided to try and replace the QT GUI Frontend completely then one idea would be Eel or cefpython

* https://github.com/cztomczak/cefpython
* https://github.com/samuelhwilliams/Eel

I think Eel just launches Chrome in application mode for the UI
where cefpython instead uses the same cef library that chrome uses and is more of a standalone app approach.
Electron tends to be a bit of a memory hog by comparison.

Language / Typescript

I would also be tempted to try and go for typescript over JavaScript
just because it's type safe and prevents things like randomly assigning an integer to a string property in a class etc
It also supports prototyping and has more of a object orientated feel to it similar to other languages.

Licences

Another consideration is also licence compatibility
I believe freecad is LGPLv2 / CCv3

* https://wiki.freecadweb.org/Licence
* https://www.gnu.org/licenses/license-list.en.html

Libs

For a 3D engine for example there is babylonjs which is licenced under Apache 2.0
I think it's more of a gaming library by design but I think others have used it for commercial cad browsing google.

* https://www.babylonjs.com/

Someone put a sketcher together here which I think is licenced under GPLv3
It's a bit crude but you'd probably need something like this

* http://web-cad.org/?sample
* https://github.com/xibyte/jsketcher

For a general UI in terms of buttons / frames etc one thought would be Quasar (MIT Licence)
Although that is a Vue based framework instead of React (I tend to prefer Vue personally since each component is compartmentalised as a vue file)

* https://quasar.dev/
* https://quasarframework.github.io/quasa ... kdown/docs

For a draggable grid layout

* https://node-projects.github.io/dock-spawn-ts/ (MIT Licence)
* http://golden-layout.com/examples/ (MIT Licence)
* https://dsmorse.github.io/gridster.js/ (MIT Licence)

I've had compatibility issues with golden layout in the past with the UI so dock-spawn-ts might be worth a look at
User avatar
vanuan
Posts: 449
Joined: Wed Oct 24, 2018 9:49 pm

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby vanuan » Wed Sep 16, 2020 7:24 am

garlicbread wrote:
Wed Sep 16, 2020 12:09 am
This was something I thought about in the past, but i don't know enough about freecad's front end / back end personally
(I know the backend is python and the frontend is QT / C++)
I'd also imagine it would be quite a lot of work.
No, there's no distinction between frontend and backend. Both Python and C++ can be used to develop both UI and the Object model.

Everything is a lot of work when you start.

I suggest starting with some basic Python script:

Code: Select all

import sys  
sys.path = # FreeCAD*.so dirs or setup using PYTHONPATH variable

from PySide2.QtWidgets import QApplication

import FreeCADGui

app = QApplication(sys.argv)
FreeCADGui.showMainWindow(True)

sys.exit(app.exec_())
From here, you can either use Qt's web capabilities or run a separate binary with a browser or use some python bindings for a browser.

In any case, you need html/js/css served from somewhere. I suggest starting a local web server.
You also need a way to call functions, retrieve and upload data to the FreeCAD document object model. I suggest using a local web server for that as well.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am
Typically these days for User Interfaces web based stuff seems to be the way to go
But it doesn't need to be sitting on a web-server or browsed via a web-browser it can be made to look just like a normal application
(for an example of what I mean see - https://github.com/jgraph/drawio-desktop/releases)
This is an Electron app which is based on a web browser (chromium). I'm pretty sure it uses a web server. The source code references Google App Engine, which is a platform to create web servers.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am
And the use of single page applications removes the need for page loading making things look just like a proper desktop application.
Well, the initial SPA page still need to be loaded from somewhere. But yeah, usually you don't need multiple html pages. But it doesn't mean you can get away with static content. You still need to load data. JavaScript can't write to the FreeCAD file directly. It needs to go through Python or C++.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am

CefPython / Eel

One of the biggest challenges though if the whole UI was replaced would be implementing Cad related functionality such as the sketcher
So a better approach might be to try and do parts of if piecemeal using the QT Webengine
If you ever decided to try and replace the QT GUI Frontend completely then one idea would be Eel or cefpython

* https://github.com/cztomczak/cefpython
* https://github.com/samuelhwilliams/Eel

I think Eel just launches Chrome in application mode for the UI
where cefpython instead uses the same cef library that chrome uses and is more of a standalone app approach.
Electron tends to be a bit of a memory hog by comparison.
Yes, Qt WebEngine is the easiest to do.
The difference between Electron and python bindings is just that electron uses NodeJS while python bindings can be run in the same process as FreeCAD. I doubt there would be any memory differences in a large desktop app. NodeJS memory overhead is only noticeable for small apps. With all the equivalent python modules I doubt there will be much difference in memory consumption.

Requiring user to install Chrome to run a desktop app is kind of lame.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am
Language / Typescript

I would also be tempted to try and go for typescript over JavaScript
just because it's type safe and prevents things like randomly assigning an integer to a string property in a class etc
It also supports prototyping and has more of a object orientated feel to it similar to other languages.
Yeap, go for it. But TypeScript requires a lot of confidence and patience. JavaScript might be faster to implement. Also, there's a lot more JS developers than TypeScript ones.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am
Licences

Another consideration is also licence compatibility
I believe freecad is LGPLv2 / CCv3

* https://wiki.freecadweb.org/Licence
* https://www.gnu.org/licenses/license-list.en.html
This should not be an issue. FreeCAD is not AGPL, so if you introduce a http/websocket API you can use whatever license you want.
garlicbread wrote:
Wed Sep 16, 2020 12:09 am

Libs
I think it's too early to consider UI libs. You need to define an architecture first. Then work on POC. Then find somebody to collaborate with.

The simplest POC would be WebGL export. Some people already tried: https://forum.freecadweb.org/viewtopic. ... &start=120
garlicbread
Posts: 11
Joined: Sun Mar 17, 2019 3:55 am

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby garlicbread » Wed Sep 16, 2020 3:12 pm

vanuan wrote:
Wed Sep 16, 2020 7:24 am
From here, you can either use Qt's web capabilities or run a separate binary with a browser or use some python bindings for a browser.

In any case, you need html/js/css served from somewhere. I suggest starting a local web server.
You also need a way to call functions, retrieve and upload data to the FreeCAD document object model. I suggest using a local web server for that as well.
Yes I agree you'd need to run a minimal web server
Probably bottle or Flask (Flask seems to be more popular one) from python.
That would also allow communication between the client js side to the server side which would be the python back end.
With a Qt WebEngineView to view the contents.
I think WebView uses WebKit, while WebEngineview uses the Chromium renderer similar to Electron which is the better one
Which I think is now possible now that 0.19 is moving to Qt5

For the actual webcontent I'd probably go with webpack to build / compile everything into a minimal set of files.
vanuan wrote:
Wed Sep 16, 2020 7:24 am
This is an Electron app which is based on a web browser (chromium). I'm pretty sure it uses a web server. The source code references Google App Engine, which is a platform to create web servers.
This is true, I was just trying to highlight that it wouldn't need to be just in a web browser like with onshape.
In that you could have something that looks just like a stand-alone application without it appearing to be a website.
(for some folks when you mention web they automatically think it has to be browser only)
vanuan wrote:
Wed Sep 16, 2020 7:24 am
Well, the initial SPA page still need to be loaded from somewhere. But yeah, usually you don't need multiple html pages. But it doesn't mean you can get away with static content. You still need to load data. JavaScript can't write to the FreeCAD file directly. It needs to go through Python or C++.
Yes this is also true, what I was trying to highlight is that it wouldn't be press a button then have the whole frame reload / refresh each time, like you get with some of the older type of websites. This is something that someone coming from a c++ development background might not be aware of (I'd imagine a lot of the freecad devs are more c++ than web based).
vanuan wrote:
Wed Sep 16, 2020 7:24 am
This should not be an issue. FreeCAD is not AGPL, so if you introduce a http/websocket API you can use whatever license you want.
Ok that's good to know, I wasn't sure if there would be licence implications if you're using web libs from freecad
vanuan wrote:
Wed Sep 16, 2020 7:24 am
I think it's too early to consider UI libs. You need to define an architecture first. Then work on POC. Then find somebody to collaborate with.

The simplest POC would be WebGL export. Some people already tried: https://forum.freecadweb.org/viewtopic. ... &start=120
That looks interesting I like the look of

https://x-ryl669.github.io/freecadWebExport/
User avatar
vanuan
Posts: 449
Joined: Wed Oct 24, 2018 9:49 pm

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby vanuan » Wed Sep 16, 2020 3:54 pm

Do you need any help? Have you looked into my repo? https://github.com/Vanuan/FreeCADjs
User avatar
vanuan
Posts: 449
Joined: Wed Oct 24, 2018 9:49 pm

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby vanuan » Wed Sep 16, 2020 10:11 pm

garlicbread
Posts: 11
Joined: Sun Mar 17, 2019 3:55 am

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby garlicbread » Fri Sep 18, 2020 3:19 pm

This was an attempt someone made at modernising the UI using QT
https://github.com/HakanSeven12/Modern-UI

I couldn't get it working under windows although some of the python code / callbacks may be of interest

I'm looking at putting a demo of my own together as an addon, not sure how far I'll get, currently looking at the debugging of python and JS under VSCode based on some other templates I've done in the past.
garlicbread
Posts: 11
Joined: Sun Mar 17, 2019 3:55 am

Re: Suitability of FreeCAD's architecture for web-based frontend

Postby garlicbread » Sun Sep 20, 2020 6:05 pm

I also noticed this as another thread about a more modern UI
I think this one uses QML which is Qt's Markup combined with Javascript

* https://forum.freecadweb.org/viewtopic.php?f=34&t=23053

So then I asked is it possible to run QT apps within a web browser
It turns out you may be able to do this (starting with Qt5.13 onwards it appears to be a supported solution)
By compiling the UI into webassembly

* https://doc.qt.io/qt-5/wasm.html
* https://wiki.qt.io/Qt_for_WebAssembly#K ... form_notes
* https://www.qt.io/qt-examples-for-webassembly

So I'm wondering if a combination of QML / JS / TS / whatever JS libs you want
and running that as a native or webassembly application would be the better way forward.

* There would be a fair bit of work porting the existing C++ / QT across to QML but it looks like someone has already made a partial attempt (I think one of the issues is that he isn't that familiar with Javascript)
* You'd still have the QT controls
* If compiled to webassembly you'd have something that could run in a web browser (you'd still need a python server backend running)
* There would be the option to use the gazzillions of JS libs available under npm for addons for example.
* You might gain more interest from developers on the outside that are already familiar with web technologies for the UI side of things.
* It might provide a smoother transition if some of the existing controls / code could be re-used (I'm not sure if that's possible with QML)

You could ether run sections within the QML Javascript hosting environment (I think it has no DOM for info - https://doc.qt.io/qt-5/qtqml-javascript ... nment.html
This shouldn't need a server backend since QT would be handling that.

Or run sections that need a DOM (say a 3rd party JS lib from npm) within a WebEngineView - https://doc.qt.io/qt-5/qml-qtwebengine- ... eview.html
This would need a server backend of flask or something.

Getting that all to work and build would be the tricky part but I think overall it might be a better way forward since Qt is more of a desktop type of UI
I'd be interested in seeing if there was some way to integrate with webpack for building the UI on the fly and using stuff like TS or babel and how QML Styling works (if there's a way to use CSS or SCSS)