FlexQoS UI Bandwidth Settings tables

  • ATTENTION! You'll notice a Prefix dropdown when you create a thread. If your post applies to one of the topics listed, please use that Prefix for your post. When browsing the thread list you can use the Prefix to filter the view.
  • ATTENTION! As of November 1, 2020, you are not able to reply to threads 6 months after the thread is opened if there are more than 500 posts in the thread.
    Threads will not be locked, so posts may still be edited by their authors.
    Just start a new thread on the topic to post if you get an error message when trying to reply to a thread.

dave14305

Part of the Furniture
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...

1603054538251.png
 

Jack Yaz

Part of the Furniture
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

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

Untitled.png
 

dave14305

Part of the Furniture
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.

1603061400983.png


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!
 

Attachments

L&LD

Part of the Furniture
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

Part of the Furniture
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...

1603134777698.png
 

JGrana

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

dave14305

Part of the Furniture
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.
 

chris.at

Regular Contributor
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

Occasional Visitor
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

Part of the Furniture
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.

1603406826602.png
 

dave14305

Part of the Furniture
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

Part of the Furniture
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.
 

Latest threads

Sign Up For SNBForums Daily Digest

Get an update of what's new every day delivered to your mailbox. Sign up here!
Top