limetech Posted May 28, 2015 Share Posted May 28, 2015 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.) Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 about the only thing i can add is for the icons to be slightly larger and for similar colours to have very different shapes. Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 circles for everything is well (circles a perfect shape) triangles for warnings (fairly universal warning sign) squares for serious shit (denotes stop/stopped) Quote Link to comment
bonienl Posted May 28, 2015 Share Posted May 28, 2015 As a starter here are the current symbols. Quote Link to comment
HellDiverUK Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment
WeeboTech Posted May 28, 2015 Share Posted May 28, 2015 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/ Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 on the array states have three different shapes, any type of colour blindness solved that way. Quote Link to comment
CHBMB Posted May 28, 2015 Share Posted May 28, 2015 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! Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 i'm not colour blind, just a tad regular blind, lol. and i'm always squinting at the icons on the share page, i can't tell the difference between the red and yellow triangles solely down to their size. Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 so they can be replaced by user packs. sparkly ball icon set...... Quote Link to comment
bonienl Posted May 28, 2015 Share Posted May 28, 2015 circles for everything is well (circles a perfect shape) triangles for warnings (fairly universal warning sign) squares for serious shit (denotes stop/stopped) This is my thinking too ... Quote Link to comment
CHBMB Posted May 28, 2015 Share Posted May 28, 2015 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?! Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 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?! mouseovers with sound... "AH YEAH" for everything is good "DISCO INFERNO" for things are going wrong Quote Link to comment
CHBMB Posted May 28, 2015 Share Posted May 28, 2015 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?! 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 Quote Link to comment
trurl Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 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 ? Quote Link to comment
interwebtech Posted May 28, 2015 Share Posted May 28, 2015 Don't recall if it shows an icon or not but what about array is in "maintenance mode"? Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 even if i can't add anything constructive in terms of design, i like that this is being thought about. it's very important as it's the "shop window" for new users. Quote Link to comment
WeeboTech Posted May 28, 2015 Share Posted May 28, 2015 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 Quote Link to comment
sparklyballs Posted May 28, 2015 Share Posted May 28, 2015 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 Quote Link to comment
bonienl Posted May 28, 2015 Share Posted May 28, 2015 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 ... Quote Link to comment
trurl Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment
bonienl Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment
WeeboTech Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment
WeeboTech Posted May 28, 2015 Share Posted May 28, 2015 gif doesn't support transparent colors I remember doing transparent background colors with gifs years ago. Am I missing something? Quote Link to comment
Recommended Posts
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.