Jackpot / FluidNC WebGUI

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?

4 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.

2 Likes

Thank you @jeyeager

1 Like

Cheers for doing this :grinning:

1 Like

Cool! Thanks!

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

Black text on red background is rough on my eyes.

Makes things hard to read. Needs more contrast. The white text on red reads better

I agree about red being tough on the eyes. Red is tough to put in a color scheme. The V1 logo is using the reddest of reds (#ff0000). It’s especially odd when red has functional meaning like for emergency and stop.

I do think it would help to make the header not as tall. That’s a lot of red. And maybe make the panel headers a different color.

Currently:
image

Smaller header and different color panel headers (not sure about that particular color):
image

The hardest part is done. Modifying colors now is easy. I think I’ll end up putting some kind of key at the top so people can modify the colors themselves. Like right now, if you want to change red to another color, just do a bulk replace of “#ff0000” to the hex color of your choice. I could probably expand on that concept. It might be fun to do that to make the theme match the color of your CNC as an alternative to using a custom logo.

This took 2 seconds and changed a lot more than is visible here:
image

Interesting, I find white on red to be worse.

image

According to this color contrast checker, black on red has better contrast than white on red.
Color Contrast Checker - Coolors


To Doug’s point about too much red, I think I’ll probably change the tabs on the settings page to not be red.

I’m happy to keep making changes if there are suggestions. I’ll try and do what makes sense for default values. If someone wants to tweak it later to their preferences, it shouldn’t be too difficult.

Thanks for the input!

2 Likes