What's new

FlexQoS UI Bandwidth Settings tables

  • SNBForums Code of Conduct

    SNBForums is a community for everyone, no matter what their level of experience.

    Please be tolerant and patient of others, especially newcomers. We are all here to share and learn!

    The rules are simple: Be patient, be nice, be helpful or be gone!

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
 
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
 
Similar to John's Traditional QoS settings, although I think having the download on the left is more intuitive.

Untitled.png
 
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

  • 1603061385469.png
    1603061385469.png
    384.8 KB · Views: 198
For myself, Download and Upload in different colors would work well enough. Along with dark green/light green alternating stripes to highlight rows adequately.
 
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
 
I agree - except the last two rows need more contrast.
 
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.
 
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.
 
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.
 
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
 
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!
 
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