FlexQoS UI Bandwidth Settings tables

[dave14305]

I would like to combine the two separate tables into one like below. Looking for readability feedback differentiating Download from Upload, or anything else that is less than ideal. For a future update...

 

[Jack Yaz]

i'd recommend striping the rows (or columns) so that it's easier to follow. the querylog table from uidivstats has a function I found online that does it quite nicely

 

[ColinTaylor]

Similar to John's Traditional QoS settings, although I think having the download on the left is more intuitive.

 

[dave14305]

Merlin's Traditional bandwidth page is still mostly the same as John's (i.e. hasn't changed much). I was trying to avoid tables within a table, and avoid repeating the Class names in 2 separate columns, but I see it's far to visually scan left to right and be sure you're in the right spot.

Also experimenting with this view where Download and Upload are in the heading.

Perhaps alternating colors will look better, but this would be the only part of the UI to use it right now, so I'm reluctant to introduce it without being willing to go all-in on it everywhere.

I will keep experimenting and see how it goes. Thanks fellows, and I still welcome more feedback!

 

[ColinTaylor]

Perhaps alternating colors will look better...

Maybe have a double-thick horizontal line separating every second row. Just so the eye tracks more easily across the screen?

 

[L&LD]

For myself, Download and Upload in different colors would work well enough. Along with dark green/light green alternating stripes to highlight rows adequately.

 

[dave14305]

I feel like a kid with a brand new box of 64 Crayola crayons. This is just one idea since I'm now also sorting the classes by user priority instead of a hard-coded order. I can use the colors to carry your eye across. Although I think the gradient looks a little gaudy and washed out. I'm learning CSS as I go here...

 

[dave14305]

Or more subtle with a double width bottom border.

 

[Jack Yaz]

Or more subtle with a double width bottom border.

View attachment 27013

definitely this one vs the first

 

[JGrana]

I agree - except the last two rows need more contrast.

 

[dave14305]

definitely this one vs the first

C’mon, I learned how to use linear-gradient() to make the first one. Don’t hate it just because it’s ugly. But it has no place in the UI among the depressing grays of the Asus UI.

I agree - except the last two rows need more contrast.

I’m open to suggestions on how to achieve that since I’m not a visual kind of guy. I could add another pixel to the height, or go in a different direction. I would like to stay with the existing Merlin colors for the classes.

 

[QuikSilver]

definitely this one vs the first

I agree. While the colors aren't bad, the second one doesn't stand out and makes it still look like a native Merlin option.

 

[chris.at]

I vote for the more colorful version (maybe solid instead of gradient, but that's also quite nice ). It's easier to associate the settings to the list and pie-chart from my point of view.

 

[Lacrocious]

Hi Dave,
I would suggest doing something with the vertical bars that separate the "Bandwidth", "Download", and "Upload" sections. If you are doing colors for the rows, adding color to the column separators will most likely get to be too much. Since you are defining the rows or row borders with color, how about making the column dividers wider between the 3 sections, with the column dividers internal to the "Download" and "Upload" sections staying as is. Don't change the colors of the column dividers. This would stay pretty much with the Merlin look. I didn't find any existing tables with wide columns dividers to differentiate groups of columns, but some tables have wider margins within the cells that tends to separate the columns. You have a lot of information to present and additional width may not be your friend. Personally, I would not use wider cell margins and make the vertical border wider (or add a double border or whatever works) for the dividers between the 3 sections.

I just had another thought. You may not need the full-row colors if you mimic the look of the Class sections of the FlexQOS tab. In the cell with the Class Name, have the rounded corner, class defined background color with white text that you already have in multiple places across FlexQOS. Basically, you could go with that same view anywhere you specify the class (ie: in Rules and AppDef tables, etc. (Yes - going a little crazy here). The rounded-corner class name cell becomes your standard.

Thanks for asking giving thought to our random opinions. Whatever you decide will surely be awesome.
- L

 

[dave14305]

Whatever you decide will surely be awesome.

I'm going to print this out and show my wife.

 

[dave14305]

I've gone ahead and pushed what I have for now to the develop branch. I switched the CSS from a border to a box-shadow. Mostly looks the same but is "within" the box itself.

 

[dave14305]

I just had another thought. You may not need the full-row colors if you mimic the look of the Class sections of the FlexQOS tab. In the cell with the Class Name, have the rounded corner, class defined background color with white text that you already have in multiple places across FlexQOS. Basically, you could go with that same view anywhere you specify the class (ie: in Rules and AppDef tables, etc. (Yes - going a little crazy here). The rounded-corner class name cell becomes your standard.

I tested this at one point, but had doubts about color splashed everywhere. My desire is simply to avoid repeating the Class name twice in the Bandwidth area (once for Download and Upload). Saving that space allows me to add the "effective" bandwidth ranges like Merlin has in Traditional QoS.

Since this is all one table now instead of 2 before, I'm not sure what I can do to separate columns within a single table (meaning I don't know how to do it, not that it can't be done).

And I'm always open to pull requests on Github for anyone wanting to take a stab at it. The more the merrier!

 

[dave14305]

Another variation possible:

 

[dave14305]

It basically comes down to what will it take to best differentiate the download fields from the upload fields? I don't think any of these options really does that yet.

 

[New2This]

Loving this one....