The Definitive State/Color/Icon Guide


Recommended Posts

There's been several discussions in various threads and on github about what to use for the (affectionately named) "colored balls" that represent various states of the server, devices and user shares.  What colors should be used?  What shapes should be used?  What should the rollover say?  What operations can be triggered by clicking one of these balls?

 

First I will document what the code generates, and then some thoughts, and then let's use this thread to come to a consensus on what should be implemented for unRaid-6 'stable' release.

 

Here's what's generated:

 

Array States

'mdColor'   'mdState'

green       STARTED          array started, there is no DISK_INVALID disk
yellow      STARTED          array started, DISK_INVALID disk present, reconstruct may or may not be in progress
red         STOPPED          array stopped


Array Disk States

These states can exist whether array is started or stopped:

'color'     'status'

grey-off    DISK_NP          no disk present, no disk configured
green-on*   DISK_OK          disk present and data is valid
yellow-on*  DISK_INVALID     disk present but not all data valid, reads emulated, writes go through,
                               reconstruct may or may not be active
red-on*     DISK_DSBL        disabled (emulated), old disk still present, no i/o at all to the device
red-off     DISK_NP_DSBL     disabled (emulated), no disk present

These states can exist only when array is stopped:

'color'     'status'

blue-on*    DISK_DSBL_NEW    disabled, new disk present
                             upon Start transitions to DISK_INVALID (see Notes below)
red-off     DISK_NP_MISSING  disk is enabled, but not present
                             upon Start transitions to DISK_NP_DSBL (if only one disk in this state)
red-on*     DISK_WRONG       disk present, but not correct disk
                             upon Start transitions to DISK_INVALID (if only one disk in this state), or
                             transitions to DISK_OK (if multiple disks in this state)
blue-on*    DISK_NEW         new disk
                             upon Start transitions to DISK_OK (caution: assumes partition 1 is completely cleared)

Notes:
1. Colors marked with * can either be -on or -blink depending on device standby state (-blink if in standby).
   Note that when array is Stopped no devices will be in standby state, though user may be able to put device in standby.
2. At most one disk can be in DISK_INVALID, DISK_DSBL, DISK_NP_DSBL, DISK_DSBL_NEW state.
3. If more than one disk in state DISK_NP_MISSING, array can't start.
4. If more then one disk is in state DISK_WRONG we assume user just rearranged slots, we don't actually
   check if it's the exact same set of devices (this should probably be fixed).
5. Upon array Start, if there is a disk in DISK_INVALID state, we kick off a reconstruct.


Cache Disk States

'color'     'status'

grey-off    DISK_NP          no disk present, but not first device of multi-disk pool
grey-off    DISK_OK_NP       no disk present and this is first device of multi-device pool
green-on*   DISK_OK          disk present
blue-on*    DISK_NEW         new disk
                             upon Start transitions to DISK_OK

Notes:
1. Colors marked with * can either be -on or -blink depending on device standby state (-blink if in standby).
   Note that when array is Stopped no devices will be in standby state, though user may be able to put device in standby.
2. The special DISK_OK_NP is necessary because webGui reports all pool info through first device of multi-device pool,
   which is permittted to have no device installed.
3. Upon array Start, if this is a newly created multi-device pool, or count of pool devices changes, a background
   "btrfs balance" operation is initiated, which can fail if pool has shrunk by too many devices.


User Share States

'color'

green                        share directory exists on array disk(s) only
yellow                       share directory exists on array disk(s) and cache disk/pool
red                          share directory exists on cache disk/pool only

 

The idea is that 'color' would be used to generate the name of an icon image file to display for the corresponding state.  For example, orignally "green-on.png" was a green solid ball and "green-blink.png" was a green blinking ball.  Similarly, "red-on.png" was a bright solid red ball and "red-off.png" was a dim solid red ball.

 

You can see in general, "-off" means device is not installed in that slot; and "-on" means device is present, not in standby; and "-blink" means device is present and in standby mode (ie, spun down).

 

As unRaid webGui progressed, people decided they didn't like blinking, and then decided they didn't like just colors.  So efforts have been made to introduce various shapes, symbols, etc. to translate those "color" specifications.

 

Alright, here's your chance to chime in!  Got some ideas?  Let's see your color => image file translations!  If necessary I'm willing to add more states if necessary too.  (For instance for mdColor could generate 'yellow-off' for no reconstruct possible, 'yellow-on' for reconstruct possible but not in progress, and 'yellow-blink' for reconstruct in process.  Reason I didn't do this was, well, didn't need to, but maybe this would be handy if we want to display a different icon for these states.)

Link to comment
  • Replies 91
  • Created
  • Last Reply

Top Posters In This Topic

User Share States

'color'

red                          share directory exists on cache disk/pool only

 

Anyway this can be configurable or changed to blue or magenta?

The only time I want to see red on my screen is if there's a problem I have to handle.

 

This is always going to stick out and make me jump.

 

Perhaps you could name these in such a way for each of the groupings or use directory names so they can be replaced by user packs.

 

icons/

  arraystate/

  arraydiskstate/

  cachediskstate/

  usersharestate/

 

 

 

 

Link to comment

All I have to say is I'm green/blue colour-blind, so I really can't see the difference between the two.  Not everyone has the same colourblindness.

 

Well they say ignorance is bliss... but maybe not when it comes to your array!  ;)

Link to comment

so they can be replaced by user packs.

 

sparkly ball icon set......

 

Why did I plant that seed in your mind? What was I thinking?!  :o

 

mouseovers with sound...

 

"AH YEAH" for everything is good

 

"DISCO INFERNO" for things are going wrong

 

I reckon 3:50 on this bit from Stir Crazy for when stuff goes wrong

 

Link to comment

Sort of thinking a little outside the box here.

 

One of the things we all take for granted about font design is that all of the symbols are easily distinguishable, even when they are small. Not saying we should necessarily use characters instead of icons, but I'm not sure we can accomplish distinguish-ability with only 3 symbols or 4 or 5, even if we are only trying to accomodate the more common forms of  color blindness.

 

And trying to get the symbols/colors to have different meanings in different contexts like it seems is currently the case is also a problem.

 

Don't have any specific recommendations at this time but thought these points might be worth considering.

Link to comment

Sort of thinking a little outside the box here.

 

One of the things we all take for granted about font design is that all of the symbols are easily distinguishable, even when they are small. Not saying we should necessarily use characters instead of icons, but I'm not sure we can accomplish distinguish-ability with only 3 symbols or 4 or 5, even if we are only trying to accomodate the more common forms of  color blindness.

 

And trying to get the symbols/colors to have different meanings in different contexts like it seems is currently the case is also a problem.

 

Don't have any specific recommendations at this time but thought these points might be worth considering.

 

 

how about a "switch" for colour blindness sufferers that turns all the icons to purely character based ?

Link to comment

Sort of thinking a little outside the box here.

 

One of the things we all take for granted about font design is that all of the symbols are easily distinguishable, even when they are small. Not saying we should necessarily use characters instead of icons, but I'm not sure we can accomplish distinguish-ability with only 3 symbols or 4 or 5, even if we are only trying to accomodate the more common forms of  color blindness.

 

And trying to get the symbols/colors to have different meanings in different contexts like it seems is currently the case is also a problem.

 

Don't have any specific recommendations at this time but thought these points might be worth considering.

 

 

how about a "switch" for colour blindness sufferers that turns all the icons to purely character based ?

 

What about other icons.

 

Green Check Mark

Yellow Exclamation

RED    Big X

Link to comment

Sort of thinking a little outside the box here.

 

One of the things we all take for granted about font design is that all of the symbols are easily distinguishable, even when they are small. Not saying we should necessarily use characters instead of icons, but I'm not sure we can accomplish distinguish-ability with only 3 symbols or 4 or 5, even if we are only trying to accomodate the more common forms of  color blindness.

 

And trying to get the symbols/colors to have different meanings in different contexts like it seems is currently the case is also a problem.

 

Don't have any specific recommendations at this time but thought these points might be worth considering.

 

 

how about a "switch" for colour blindness sufferers that turns all the icons to purely character based ?

 

What about other icons.

 

Green Check Mark

Yellow Exclamation

RED    Big X

 

an "O" of any colour for no disk present type events

Link to comment

What about other icons.

 

Green Check Mark

Yellow Exclamation

RED    Big X

 

What makes this better than the current set up ?

 

green = circle

yellow = triangle

red =square

 

Also keep in mind there are two types of "red", what about the "blink" state and icons are 16x6 it will loose a lot of detail ...

 

 

Link to comment

I sort of like sparkly's idea about a toggle to go to character-based representations. The mouseover legend would also have to toggle. Whatever we do we should keep the mouseover legend, and maybe have more complete descriptions in the page help.

 

Some more thoughts.

 

A specific symbol should be about a specific concept and that symbol should not be used for a different concept in a different context. Think of the concept as a noun.

 

A specific concept can have modifiers. These can be thought of as adjectives. There could be several ways to convey these modifiers that don't involve colors. For example, blinking or not blinking, darker or lighter, filled or unfilled, combinations of these.

 

I'm not sure why blinking was ever retired except it has a bad reputation in web design. But that reputation is only deserved if it has no meaning.

Link to comment

I'm not sure why blinking was ever retired except it has a bad reputation in web design. But that reputation is only deserved if it has no meaning.

 

Blinking to me means "attention something wrong here", and the flickering makes me "nervous", but besides these personal opinions, there is a practical limitation: animation is only supported in gif format, but gif doesn't support transparent colors, which means that gif images won't work well with both white and black themes.

 

The darker/lighter approach doesn't work well either with the white/black themes. It may work well in one theme, but is totally indistinguishable in the other theme.

 

Link to comment

What about other icons.

 

Green Check Mark

Yellow Exclamation

RED    Big X

 

What makes this better than the current set up ?

 

green = circle

yellow = triangle

red =square

 

Also keep in mind there are two types of "red", what about the "blink" state and icons are 16x6 it will loose a lot of detail ...

 

When I looked at the other shapes in the demo image, some were very hard to distinguish.

I thought it could possibly stand out more.  Plus characters could replace it without color if need be.

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.