Skins - jhhl/AUMI-Together GitHub Wiki
Skinning system
Many aspects of a UI would be able to be customized for a particular match for the abilities of a user. Skinning underlies a lot of the mechanism of the dynamically created UI system.
While there will be presets of standard color and font schemes, it would be nice to make more arbitrary choices possible to create a skin environment. There should be the usual choices of edge colors, fill colors in lists, with even and odd colors as well as selected and disabled colors or stylings and their pattern equivalents for color blindness or vision impaired UI. There could be light mode and dark mode presets, or generated presets with a color contrast color wheel. Skins might also texture UI elements with svg, bitmap images, tiled patterns.
Skins not only apply to the UI's control elements, but to the sound areas and the cursor.
Another skinning parameter would be related to timing. AUMI's alerts all time out after 3 seconds, and this might need customization as well.
So here's a rough list of UI parameters that could be skinned.
Naming conventions:
abbr | meaning |
---|---|
S | selected |
s | unselected |
E | enabled |
e | un enabled |
V | visible |
v | hidden |
Relationships mean these UI elements are determined together. The visibility is just a way to make some elements disappear if they are conditionally present. That's different from disabling the control, which means it may be a possibility in a situation. These UI parts can also be tagged - which is more flexible than being hierarchical groups. Patterns and images might tile, might be image templates that take fgcolor over bgcolor. Label text or icons is not part of the skin process. The patterns are not meant to be icons, just to be color-indifferent high contrast ways to read the button. For instance, a black and yellow striped pattern or wave pattern.
Type | Name | Relationship | Notes | Values to be set |
---|---|---|---|---|
Button | sEV-edge1 | A | unselected, enabled, visible button | width, color |
Button | SEV-edge1 | A | " | |
Button | eV-edge1 | A | un-enabled things are never selected | " |
Button | v-edge1 | A | invisible things are neither highlighted nor selected | " |
: - : | : - : | : - : | : - : | |
Button | sEV-fill1 | A | fills also go with the button edges | fgcolor, bgcolor, pattern, gradient |
Button | SEV-fill1 | A | " | |
Button | eV-fill1 | A | un enabled things are never selected | " |
Button | v-fill1 | A | invisible things are neither highlighted nor selected | " |