Close

Icons for everyone

A project log for RemuterMCS

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

WJCarpenterWJCarpenter 03/20/2021 at 02:070 Comments

I picked out the UI icons for microphone, camera, and speakers. There are zillions of icons to look through at https://thenounproject.com/, all of which are better than I could make myself, even for this fairly simple shapes. I fiddled with different choices quite a bit by viewing them on the M5StickC display. To make it easy to try things, I wrote a simple sketch IconsAtPlay that is a bit too long to show here. It displays the icons in multiple ways, in both 80x80 and 40x40 sizes.

To make it simple to get the sizes I needed in uniform square backgrounds, I started with SVGs and converted them to XBMs with everybody's favorite graphics manipulation tool, ImageMagick.

I was originally going to overlay a "?" for the unknown status and a circle-slash for disabled status, but I didn't like the look of it. Instead, I just draw a diagonal line a few pixels wide for disabled status. I also draw a 1-pixel box around the icon when that target has focus on the user interface. The target with focus uses the 80x80 icon size, and the other targets use the 40x40 size.

Here is a photo of the device (mocked up with the IconsAtPlay sketch) showing microphone muted, camera enabled, and speakers in an unknown state. The microphone target has focus.

Below are the original forms of the icon graphics. All of the icons are licensed under Creative Commons 3.0. They're displayed here in black on a transparent background. I provide the colors when I render them on the device. 

Microphone: Microphone by Chunk Icons from the Noun Project
https://thenounproject.com/icon/829069/

Camera:     webcam by Kawalan Icon from the Noun Project

https://thenounproject.com/icon/2131644/

Speaker:    Speaker by Alex Arseneau from the Noun Project

https://thenounproject.com/icon/872876/

Discussions