Web based 'modern' UI frontend, packaged into Electron app. It's possible!

Web based 'modern' UI frontend, packaged into Electron app. It's possible!

For context: I've been using a custom non-linuxcnc script based HAL + PyQt5 interface for my lathe to get me an electronic leadscrew UI, no CNC function. Published here (+screenshot):

[url="github.com/tinic/ElectronicLeadscrew">github.com/tinic/ElectronicLeadscrew[/url]

It's ugly, but it works and I use it regularly.

Coming back to this forum couple of weeks ago and seeing @rodw's post about Debian bookworm and its apparent stability I get intrigued. I've been stuck on a 4.x kernel for like 3 years as stability was not there on my Intel J1900 based board. All I can say: Wow, with isolcpu(2,3) that 6.1-rt kernel is rock stable on Debian bookworm! Not only that but now we can suddenly use 'modern' software.

Which leads me to the challenge: Can I build a nice looking and functional UI with stock linuxcnc-2.9 on Debian bookworm? Modern here means something which does not look like something designed in the early 2000s GUI frameworks come and go quicker than I replace my socks. LinuxCNC certainly has its share of difficulties keeping up. I think the saving grace here is that the python interface now looks mature enough (python3!) to do everything a UI needs to do. We should be able to separate UI code completely from core LinuxCNC.

So I am going all in with a Web/JS based frontend, packaged into a 'native' Linux app using Electron. The components of my experiment consist of :

- VSCode
- Electron
- ViteJS
- VueJS
- PrimeVue
- ThreeJS
- Flask

Crazy amount of stuff just to get started. The choices here are pretty much based on me googling for what's 'good' and current. React or Angular would likely work fine too.

Project lives here:

github.com/tinic/el-linuxcnc-electron

There are two python scripts acting as HTTP based API backends. One which handles custom HAL pins and one which takes in LinuxCNC commands, acting as the DISPLAY.

In the first step I recreated my original UI and all its functionality using Vue3+PrimeVue. This has legs, it works and feels great. A leap above what a QT based interface could do IMO.
​​​​
Running this directly on my lathe computer:

This is just after 3 days of fiddling around (at 48 I am not the fastest anymore either . With these dev tools productivity is soo much higher than with something like QtDesigner, a POS IMO. Since we are using HTTP as the interface between LinuxCNC and the UI we can also run the UI remotely in Chrome/Firefox. Which is perfect for development since I can comfortably sit in my office with a large screen:

So what about performance? The resulting Electron app runs on a single core on my Intel J1900. As I poll for positions at 60fps there is expected overhead, after all there is an entire instance of Chromium running + the crazy reactive stuff in the JS frameworks... We hover around 30-40% CPU usage. Good enough for me.

Not wanting to stop here I wanted to see if I could render a backplot client side by loading a .ngc file from the web front end and passing it to the backend. After some wrangling I got that to work. The three.js framework makes rendering trivial, with some nicely anti-aliased and thick lines:

This is just a demo, hence the rainbow Downside here is that this will NOT run a J1900 anymore, the GPU just can't keep up.

So the CNC part is of course not finished and I am actually at a point where I got what I wanted. Now, for folks out there who do LinuxCNC stuff commercially I would recommend to look at this as an alternative. Finding JS engineers will be much easier than have someone fiddle with GTK/Glade/QT. And if the GUI framework changes again, which it will, you still have your HTTP based backend to start from.

 

Hello, where can I find the source code for beauty there...