Jackpot / FluidNC WebGUI

Created a PR to resolve these issues in the tablet extension. We’ll see where that goes.

Load GCode Dropdown Updates by jeyeager65 · Pull Request #1 · MitchBradley/WebUI-tablet-extension (github.com)

Here’s a zip of the build with those updates if anyone wants to try it.
tablet.html.gz.zip (15.8 KB)

3 Likes

Mitch didn’t want the folders at the top so I changed the sorting and it was merged. While I’ve been a software dev for a long time, that’s my first contribution to anything on GitHub. Cool.

Releases · MitchBradley/WebUI-tablet-extension (github.com)

8 Likes

Glad it went well for a first open source contribution
Sometimes the devs aren’t too “open” and it’s a quite bitter feeling when you just wanted to genuinely share your work and efforts

3 Likes

Yea, open source seems to come with its share of drama. There seems to be a bit of an odd relationship between the ESP32 WebUI and FluidNC projects, but this is off by itself.

For my changes, it was pretty obvious how it intended to work, it was just broken. I took a bit of liberty pulling the gcode file extensions from preferences.json for file filtering, but it seemed logical.

At work there are a number of applications I have some level of ownership of and I can be rather protective of changes that deviate from my vision or that are done without comprehending the system as a whole. Usually there is discussion and guidance to keep other devs within those bounds. So, I can understand the complications associated with accepting changes and it seems like the open source model can amplify this.

3 Likes

Awesome! Congratulations

2 Likes

Yes, congrats, and thanks! Cool.

1 Like

Had another PR merged that added full screen mode and fixed a minor issue with the menu.

4 Likes

Hi there! I’ve been following this post for a few days and some things seem to go over my head.

I want to install WebUI 3. What do I need to do?

I already upgraded the firmware to v3.7.17
Do I need to back something up? or it all stays after I change to the new webUI? I don’t want to lose my macros or squaring configs.
And what if I want to get back to my current version in case something is not working as intended?

Make sure you download all the files on the Flash before you upgrade so you can revert back to V2 if you want.

The WebuiV2 macros don’t work with WebuiV3. You will have to redo them.

2 Likes

your config.yaml stays the same, you’ll want to back up and remove all the other files from the flash.

If you are using a V1 machine, you can get the initial setup of your machine from here:

Latest version of the WebUI v3 for FluidNC can be found here:

If you are using custom macros, you’ll need to redefine them, but the V1 starter files will have some examples to help you.

2 Likes

Thank you so much! I really wanted to be able to do this. Now I wish I could map every single button from the UI to the controller like macros and Probe

1 Like

You can. On the Settings tab → ESP3D Interface → Macros. You can specify the Key for macros. I assume you could create a probe macro and assign a key to that as well.

I didn’t go that far, but this is what I did:

3 Likes

Sweet, I will! Who needs a pendant now

Well, until your phone/tablet screen turns off and you need to open it back up on your phone for the controller to work…

1 Like

I strapped together an old desktop computer in the garage next to the machine and it is always on, so that shouldn’t be a problem. I’ll see if I can modify the Jog panel font a little so I can easily see the numbers from far away without having to increase the whole site or change to the tablet tab

2 Likes

Should be pretty easy to create a tiny theme to do this. Let me know if you need a hand.

1 Like

So, I’ve been doing some stuff.

All files in the zip should be uploaded to flash. Then select theme or add extension.

I was trying to wrap up some things before I leave for vacation.

I updated the theme to use variables which makes it easy to make a dark theme in your own colors.

For example, this is the top of the V1E Dark theme:

/***** COLORS *****/
:root {
    --primary: #003c63;       /* Primary Color - Header Background */
    --secondary: #476b7d;     /* Secondary Color - Panel Header */
    --bkgd: #090909;          /* Page Body Background Color */
    --panelbkgd: #212121;     /* Panel Body Background Color */
    --buttonbkgd: #3b3b3b;    /* Button Background Color */
    --highlight: #0072bc;     /* Selected/Active Color */
    --logo: url("fluidnc.png");      /* Logo on Flash - 30px height, max 250px width */
    --logosmall: url("fluidnc.png"); /* Small Logo on Flash - 30px height */
}

And the only difference with the FluidDark theme is the top section:

/***** COLORS *****/
:root {
    --primary: #5c0000;       /* Primary Color - Header Background */
    --secondary: #7c1006;     /* Secondary Color - Panel Header */
    --bkgd: #090909;          /* Page Body Background Color */
    --panelbkgd: #212121;     /* Panel Body Background Color */
    --buttonbkgd: #3b3b3b;    /* Button Background Color */
    --highlight: #ff0000;     /* Selected/Active Color */
    --logo: url("logo.png");         /* Logo on Flash - 30px height, max 250px width */
    --logosmall: url("logo-sm.png"); /* Small Logo on Flash - 30px height */
}

I updated the themes to also style the tablet extension.

I made a pretty fun change to the tablet extension. If you add it as a page, it shows up on the Extra Pages on the header. However, if you take the same exact file but add it as a panel, it will show up on the dashboard but only show the file picker, gcode, and visualizer.

Where it gets really fun is when you click the [ ] button. Clicking that will take it full screen, and when on a tablet or PC, it will show the full tablet view.

I plan on submitting a PR for the tablet extension, but I didn’t get there yet. I’m also working to get my creations into a GitHub repo.

8 Likes

Outstanding work!!

2 Likes

@vicious1 Do you have any objection to me putting the V1E theme in my own repo? I just want to be respectful of name and logos. I can put something in the readme if that helps.

1 Like

Not at all, please do!

4 Likes