Print

Please login or register.
1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[markf2748]

BACKGROUND.  AFAICT, there are three source image files used for checkboxes by different parts of the MC GUI.  Some names may vary, but I find this to be typical:

(1) OptionsTree.png.  Ten subimages which include two for checkboxes (unchecked and checked).
Mousever:  No.
Usage:  Throughout the first and second sublevels of the Options Tree. 
Also in Selected View Tab > hover > Customize View… > Settings pane.
File Locations:  Either
(a) …/Data/Default Art/OptionsTree.png
(b) /Data/Custom Art/OptionsTree.png
(c) Skin directory and called out in file main.xml:
     <ART>...<Entry Name="OptionsTree" Bitmap="OptionsTree.png" NumberImages="10" />…</ART>

(2) smallicons.png.  Includes three images:  Unchecked, GrayedCheck, Checked. 
Mouseover:  No.
Usage:  In full blown usage, GrayedCheck is the “master” checkbox, which responds to and controls the “servant” checkboxes:  Options > Library & Folders > Handheld > rightmost panel.
Unchecked/Checked images can also appear without a grayed checkbox, as in DSP tab “DSP Studio…”.
File Locations:  Either
(a) …/Data/Default Art/smallicons.png
(b) …/Data/Custom Art/smallicons.png
(c) Skin directory and called out in file main.xml:
     <ART> … <Entry Name="SmallIcons" Bitmap="Art_SmallIcons.png" /> …</ART>

The associated resource file images.xml must be located in the respective directory
(a) …/Data/Default Resources/images.xml
(b) …/Data/Custom Resources/images.xml
(c)   Skin directory.
File images.xml contains references to the three checkbox images:
<Unchecked>p</Unchecked>
<GrayedCheck>q</GrayedCheck>
<Checked>r</Checked>
where p,q,r = index integers pointing to image locations inside file smallicons.png.

(3) Frame_CheckBox.png.  Eight subimages paired into four "groups" UP, OVER, DOWN, DISABLED.  Each pair contains an unchecked and a checked image (see document Standard View Skinning SDK).
Mouseover:  Yes. Includes two OVER mouseover images, but is buggy (see below).
Usage:  Most separate Dialogue Windows launched from the Options Window (with the exception of Options > Audio > Settings > DSP & output format…, which contains checkboxes of Type (2)). 
Examples:
Options > Encoding > Audio: File Conversion > Encoder: ... > Encoder Settings   
Options > File Types > File Association
Options > General > Playing Now Popup...
Options > Library & Folders > Manage Library Fields > (varies with the selected Field)
etc.
File Location:  The skin’s main directory.  Called out in file main.xml: 
<FRAME> … <Entry Name="CheckBox" Bitmap="Frame_CheckBox.png" NumberImages="8" Scale="3" /> …</FRAME>

BUG:  Files (1) and (2) work perfectly.  File (3) has a mouseover bug:

When the dialog window is first opened, moussing over a checkbox brings up the mouseover image as expected, for both checked and unchecked boxes.
Once a checkbox has been selected, the mouseover image remains activated for that checkbox until another active point in the window is selected, at which time the stuck mouseover image reverts to normal and the mouseover image gets stuck at the new active point (if the new active point is a checkbox).

Instead, the mouseover should revert to a normal non-mouseover state display as soon as the mouse moves away from the checkbox.

Win 11 Pro | MC 33.0.43

[Matt]

We're using when DrawState_Over when GetHasFocus() returns true. So once the control is focused, it always draws that way.

If you press tab, it will move the focus to a different control and remove the focus drawing.

It's fuzzy whether this is right or wrong to me.

[markf2748]

We're using when DrawState_Over when GetHasFocus() returns true. So once the control is focused, it always draws that way.

If you press tab, it will move the focus to a different control and remove the focus drawing.

Thanks for the clarification.  Confirmed tab action.

It's fuzzy whether this is right or wrong to me.

As a mouse user who virtually never uses tabs to move around these menus, the current action strikes me as really odd, hence my calling it a bug.

Would anyone object if the mouseover behavior was changed to what is generally expected for mouse motion?  I don't see how that would inadvertently affect the use of tabs, as long as moving by tabs activates the new checkbox, as it does now.  In a worst case, if mouse is left sitting over a checkbox, and then tabs move the focus point, then there is the possibility of two mouseover images.  I don't think that is very objectionable, and it is what happens now anyway.

[Matt]

Well if you use tab it's nice to see what control has the focus.

[markf2748]

Well if you use tab it's nice to see what control has the focus.

Then just move the mouse off the checkbox.  With current action, tabbing gives you two focus images as long as mouse sits over another checkbox, but the one reached by tab is the only one that responds to an Enter hit.

[Matt]

Please explain your proposal in more detail. I haven't thought of an approach without a hole. Thanks.

[markf2748]

Please explain your proposal in more detail. I haven't thought of an approach without a hole. Thanks.

Consider a user who prefers to change checkboxes with a mouse.  This user clicks in CheckBox 1, then moves the mouse somewhere else in the window.  After the click and mouse move, CheckBox 1 "should" no longer display a mouseover image.  If user moves mouse to CheckBox 2, then Box 2 shows mouseover image, but gains "full" focus only when CheckBox 2 is clicked. User moves mouse off CheckBox 2, then CheckBox 2 no longer shows mouseover image.  This user is oblivious to any notion of focus beyond the mouse's current position.

Now I realize this is not consistent with always seeing where the focus is, especially when using tabs. If the mouseover image is used to show focus, then focus takes precedence over the mouse location.  In this case, "Mouseover" image is somewhat of a misnomer, since once focus is established it switches to a "Focus Indicator" image.  This change in behavior, in addition to my prior expectations re mousing around, are what confused me, resulting in a Bug call.

I was led to worrying about this when thinking about how mouseover should work with top level Tree Expand/Collapse buttons.  But that is likely a different situation, since tabbing is not involved.  I think the only purpose of the mouseover image in that case is to simply respond to mouse position (though presumably it can be designed to be button state sensitive as well).

Perhaps the contradiction could be resolved with an option to show the OVER image either for Focus or for Mouse Position wherever the distinction arises.

I must say, this was quite an exercise in learning about MC checkboxes, so maybe that information will be useful to others, assuming it is mostly correct.    I investigated this in order to learn how to implement new custom checkbox images uniformly through the entire MC UI.  I've now done so, and will append the additional images to my thread over in the Third Party Skins forum https://yabb.jriver.com/interact/index.php/topic,140089.0.html .
 

[Frobozz]

Windows UI and UX design and implementation does get complicated. There are entire books written about how to implement and best practices.

There are many things that have to be taken into account. Like how would the UI element and behavior work with a touchscreen input? How would the UI element and behavior work with a screen reader for visually impaired users? Having UI elements and behavior depend on mouseover events is not going to work for touchscreen users and screen reader users.

One big test for UI element design is to run the app with those UI designs with a screen reader. If you can then the UI design in on the right track. If you can't then the UI is not doing things the right way.

If you want to have fun try navigating and using different applications using a screen reader like Narrator or NVDA. And then think about how well the UI does or doesn't work with a screen reader.

A guide for using Microsoft's Narrator screen reader: https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1