Device user interface

A project log for RemuterMCS

Remote control for muting and unmuting the microphone, camera, and speakers

WJCarpenterWJCarpenter 03/06/2021 at 03:290 Comments

Here are my initial thoughts for how to operate the RemuterMCS device. I may have to adjust these later when I see how they feel in practice.

Without adding any hardware, the M5StickC has:

I don't think the power button can be used for anything other than on/off. I might be wrong about that, but I'm not planning to use it. One of the annoyances of the M5StickC is remembering at a glance which side button is the power button and which is the not-the-power button. If I figure out that I can detect presses of the power button, I'll probably make it the equivalent of the mode button. (M5Stack provides an example that looks like it detects power button presses with an IRQ in this sketch BtnIrq.ino.)

M5Stack also has an updated version of this device, the M5StickC Plus. One difference is a larger screen (135*240). Another difference is a higher capacity battery. I don't think those would make any difference in how I design the UI (except for maybe using larger icons; 135x135 and 52x52). It has a built-in buzzer, which might be good for additional confirmation feedback. I don't have any of these devices on-hand, so any contemplation of adapting to use them will wait until after I have the basic project wrapped up.

I plan to use the display for always showing icons for the 3 targets that can be controlled: microphone, camera, speakers. I'll display them in that order, with microphone closest to the big button. Since the icons are square-ish, and since only one target can have focus at a time, I'm planning to display an 80x80 icon for the focused target and 40x40 icons for the non-focused target. Regardless of the size, and regardless of the focus, the icons will use a blue color for the target in the enabled state (microphone, camera, or speakers turned on) and orange for disabled. There is a third state, "unknown", applicable when things first start up, for which I'll use some kind of gray color. Depending on whether I can find the right artwork, I may display a slash for disabled features or a question mark for unknown state; that's in addition to the colors. When the display is turned on for any reason, a timeout counter of a few seconds starts. When the timeout expires, the display is switched off to save battery power.

(Why blue and orange? The traditional colors would be green and red, but that's a disadvantage for a significant  part of the population with red-green color vision deficiency, aka color blindness. That doesn't affect me, but why should I arbitrarily make things difficult for them? Quite a bit of info about CVD here and there. I'll do some tuning later to figure exactly which RGB values to use for the blue, orange, and gray.)

The action button is for disabling or enabling the currently focused target. One click disables it, and a double click enables. For example, single clicking would mute the microphone and double clicking would unmute it. Using separate actions means you don't have to mentally keep track of what state things are in. The most common thing will be muting and unmuting the microphone, so it's natural to keep that focused most of the time. Single or double clicking the action button can happen without even looking at the device. When the action button is pressed (either single or double click), the display will be turned on if it's not already on. How do you remember single versus double click? "Mute" is a single syllable and "unmute" is two syllables; it's destiny!

The small button on the side is the mode button. On this device, it's kind of awkward to press that button compared to the big action button. It's very stiff and not in a great position. It's used to select which target is in focus for the action button. Each press is one step through the cycle, focusing for microphone, then  camera, then speakers, then microphone, .... If the display is off, the first press of the mode button turns the display on but does not change the focus. So it can be used to turn the display on to check status.

Notice the contrast between the action button and the mode button when the display is off. The action button performs its action as well as turning on the display. The mode button only turns on the display. The inconsistency is intentional.

The red LED is turned on when either of the buttons is pressed and is turned off when neither button is pressed. That's typically when a just-pressed button is released. You should see two distinct flashes when you double-click one of the buttons.