Jackpot / FluidNC WebGUI

This is very much a work in progress. Basing the colors off this forum. Changed the font to match as well.

Big fan of dark mode.

Hmm.

I understand this now. Chasing purple is fun.

6 Likes

There’s some tweaking yet to be done but it looks pretty good to me. Anyone on UI V3 want to try it out? I’d appreciate any feedback or suggestions.

  1. Under Dashboard, in the Files panel, upload the .gz file in the attached zip file to Flash.
    theme-V1E_Dark.zip (1.4 KB)
  2. Under Settings → ESP3D Interface → General, click in the Theme field, and select V1E_Dark.
  3. Scroll to the bottom of the page, and click Save.

If there’s any issue with the theme name, I can change it.

5 Likes

Aaah, thats so much better, thankyou
Feedback: On the settings page the selected Tab Background is still blue, so are the Expand and Close panel buttons on the control page.

1 Like

@jeyeager

Your V1E Dark theme looks great.
Would it be much trouble to make one with a white background and black letters?

@Dreyfus I am not seeing any blue on the background or panels.


1 Like

I’m not seeing any blue either.

In the preferences.json that Ryan posted, it has an extra page for the Tablet UI but that doesn’t work and I’m not sure it’s needed. I have an update to correct this:

image

Once I’m done with the dark, I can make a light version. I think making a dark theme is harder than a light theme. My plan is to generally swap black and white, and may lighten the grays. The all white default theme is a bit painful to me. It needs a bit of variation.



Here’s a new update where I tweaked a few more things in addition to getting rid of some blue/purple items.
theme-V1E_Dark.zip (1.7 KB)

  1. The panels had a height of 550px no matter what. This is especially annoying on mobile. They now will size according to contents and the size of the panels next to it. If you order the panels such that shorter panels are together, it consolidates the space nicely.
  2. Add a bit of spacing between the panels. It just felt cramped.

2 Likes

I have a stepper motor that only works when I switch the cable on the jackpot board. Because the error (motor works) when the cable switches, it is the board- right? or could this be a need to update the firmware? I have 3.7.12. I have also tried to figure out exactly how to update the “files” on the controller board, and it is not obvious to me. I can see the board on the computer, but I am missing a step with the update. Not sure if the update will fix the problem anyway. This board is only 2-3 months old.

It’s best if you create your own thread for help with a specific problem you are having with your machine

Here’s a proof of concept that can be done via a theme and uploading an image. It seems like if you hang out here long enough, you’re going to end up with a collection of Jackpots. It would be nice if you could quickly see which machine you are connected to.

This is similar to work in the software world where the UI looks a bit different to distinguish between dev/test/prod environments.

Or it’s fun to just have a fancy logo. So, I took a V1E logo, plus an LR3 logo from @DougJoseph and made an image which I uploaded to the Jackpot. I’m am certainly not a graphic artist.

LowRider v3 Nameplate / Logo-Text, 8 Variations - LowRider CNC / Hardware Development - V1 Engineering Forum

You give that logo a generic name like logo.png. Then update the theme to use that logo. So, you can use the same theme on each machine but upload a different image.

Flash space is at a premium so you can’t get too carried away. I also got it to work using the SD card but I’m curious if there is a downside to that.

It could have a mobile version of the image too that takes up less space. So, when the width gets too small, this could just be the small V1 logo with LR3.

Thoughts?

5 Likes

Cool!

1 Like

You are awesome, that was super fast. I have been running my CNC all day. I will check it out when I get some free time.

2 Likes

I would think it would be better by default to just have the full V1ENGINEERING logo there like at the top of the forum since it’s not just Lowriders using it.

If you can get the SVG and embed it like the FluidNC logo you’ll save some space too

3 Likes

Good suggestion. I couldn’t find an SVG but a full and small logo as PNGs is only 11 KB together.

And thanks for the setup. I’m not sure I would have attempted this otherwise. There’s more going on there than I initially realized.

Switches to the smaller logo if not wide enough.

image

Here’s the latest. I renamed the file so it shows in the UI as “V1E (Dark)” instead of “V1E_Dark”. This means if already added, you’ll have to switch themes (and probably delete the old one). Will also need to upload logo.png and logo_sm.png to the same location.

theme-V1E (Dark).zip (11.6 KB)

3 Likes

V1 LOGO PACK.zip (196.8 KB)

I have this linked somewhere around here.

1 Like

Don’t know why I still have blue bits. Multiple browsers and devices. Maybe I need to reflash.

IMG_2577

1 Like

Ohhh. I can reproduce this by turning on the option to force mobile view. I’ll fix that.

image

Here’s the latest theme update:
theme-V1E.zip (13.8 KB)

  • This adds a light version of the theme. @Britt
  • This fixes the blue buttons and other issues when set to force mobile view. @Dreyfus
  • I kept the existing logo files because the file sizes were larger on the others.
  • There are some other tweaks as well.

3 Likes

Thank you @jeyeager

2 Likes

Cheers for doing this :grinning:

2 Likes

Cool! Thanks!

1 Like

My graphics background leads me to say, “save the red for the V1Logo, so it can stand out.” A lot of red can be tough on the eyes, over time. However, I know that color tastes are very personal, and hopefully easy to edit. Thanks so much for doing this! Great contribution!

2 Likes