WebUI-3 release 3.0.0-4b1-FluidNC

I just published a new WebUI-3 with a few fixes.

Most notably:

  • Handles validation errors with new properties added in latest FluidNC version that made it impossible to save config edits
  • Settings page now has buttons pinned to be always visible, making it easier to save changes
4 Likes

Am I missing something? I thought the save buttons would always be displayed?
image


Not sure how I feel about this one. That’s a bit impacting.
image

It messed up the formatting of my HoldMonitor extension with or without my theme. It also means the panels on the Settings pages are taller as well. Since you’re using “!important” on those styles, that might make it challenging to override.

The bottom row of buttons will always be displayed. Not always showing the “Save” button.

I got sick of having to scroll all the way to the bottom to get to the buttons when I just changed something simple at the top

3 Likes

Yea, I don’t like this. I fixed the issue with my HoldMonitor extension, but extension height was already a pain to deal with because they’re rendered in an iframe. I’m having trouble getting the scrollbar to go away on my JoyJog extension. I can probably hide the scrollbar, but I feel like this is going to cause grief on extensions in general.

I went to test out Luc’s Click2Go extension, and I couldn’t since the scrollbars are hidden.

I’ll have to take a closer look later.

Luc’s styles are littered with !important so it wasn’t necessarily intentional, but probably some mixture of copy/paste and moving things around testing.

I’ve removed those for now and it seems ok, but I’m not a SASS expert, so I don’t know why he chose to do things the way he did.

You can pick the artifact here if you want to test

In it’s current state, the standard UI didn’t fit. You can see it in the issue that was filed. It needed to be able to go bigger.

I can’t test and support all extensions/themes that are out there.

While I won’t intentionally do things that will break them, making the default distribution work correctly has to take precedence. PR’s are welcome if you see something that helps accomodate both.

This extension never worked right for me in the default theme on an iPad.

Trying to use it just constantly moved the whole panel up and down like it was scrolling rather than letting me grab the control itself

Going bigger isn’t the issue. The issue is with the shrinking.

100% agree. I’ll figure something out.

The panels not scrolling on the Settings page is an issue though unrelated to extensions/themes. I’m guessing that came about with your pinning the buttons to the bottom changes.

I understand and agree. I know that my themes do some extra things that are totally on me. Messing with extension panel height is a more base functionality thing though. You can’t change that with extension styles.

Interesting. Unfortunately, I don’t own any Apple products to figure this out. Hmm, I guess I may have access to an iPad. I know that one of the changes Luc made awhile ago so extensions stayed loaded when changing tabs causes some strange things. Like sometimes before I scroll or resize the page, the headers are cut off. As soon as I scroll, it’s fine:

The scrolling should be fixed, I think, in that last commit.

Have a look and see if it’s better. If so, I’ll replace the release with it

Well, I can scroll now but there’s an interesting collection of scrollbars. Also, I can’t see the buttons at all on mobile.

Makes panel extensions smaller… Note it’s only like that if the extensions are on their own line. Otherwise, they pick up the height from their built-in neighbors.

Playing in devtools, it looks like it just needs a min-height on the panel class to be 550px, it’s currently 300px.
image

My theme allows for the other panels to be smaller, but I’m basically overriding it based on ID for each of the existing panels. The extension panels have to be a fixed size (although going larger is fine) since they can’t resize based on content.

What device are you on?

I don’t see that here at all on any of the device emulators

This is on the Settings tab.

Samsung S24 using Chrome. This is scrolled all the way to the bottom.

Strange.

S20 Ultra emulator in Chrome

Web dev gets really annoying sometimes.

1 Like

That might be an understatement…

2 Likes

Do you remember why the iframe was introduced? What did we gain from it?

Well, I’m not 100% sure they didn’t alway use iframes, but the odd behavior I mentioned happened after this:

Make extra Content persistent by luc-github · Pull Request #398 · luc-github/ESP3D-WEBUI

It used to be if you switched tabs, the extension would go away, so when you go back, it reloads. I looked at it awhile ago but don’t remember all the details. It does some really weird things. I think it’s rendering it off in a separate div and then on load/scroll/resize, it’s using absolute positioning to display it.

You can try this one.

I made an attempt to get it to size the iframe to it’s content on load…

If this works, the next step will be to try to keep it sized dynamically on resize too

nvmd… I found an extension to test with and it didn’t work…

Hi Mike. I’m probably submitting a PR in the near future to make some changes to better handle extension panel sizing. I just want to make sure anything I change is in line with intent. To ensure there is nothing specific to my extensions or themes, I’m testing with the default styling and a test extension that is just a div set to 100% height and width with a border. This release is usable with my stuff, but I get some scrollbars.

I was looking at this issue to increase the dashboard panel height.
[FEATURE REQUEST] Increase Panel Height in Dashboard · Issue #3 · michmela44/ESP3D-WEBUI

The associated commit has this comment:
Fix #3 make panels able to stretch larger, and also shrink down to content

I assume that just means that it shrinks back down to normal size if it doesn’t need that extra height in the jog panel?

Any thoughts on if I try and make changes to allow them to fit the panel content? My theme did this for panels like Status and other short panels. If not, I will try to make changes that still allow my theme to override that.

I just know the goal used to be to keep this as close to Luc’s version as possible but it seems with the last release or two, it has deviated from that. Not an issue but wanted to get your input before I did anything.

The main thing I’m looking to fix (which I figured out), is to allow the extension to use the full width available, resizing as the page is resized.

It seems WebUI v3 is getting close to being the V1 default version, so I was hoping to deal with some of this stuff before then.

1 Like

I have no issue waiting. No rush on my end.

1 Like