MobiFlight-Connector icon indicating copy to clipboard operation
MobiFlight-Connector copied to clipboard

Rework the device icons

Open MobiFlight-Admin opened this issue 4 years ago • 8 comments

Is your feature request related to a problem? Please describe. It is time to re-work the device icons in the settings UI.

Describe the solution you'd like They should be bigger. All devices should have their own distinct icon. Icons should relate to their device.

Describe alternatives you've considered Leave it as it is.

Additional context Nothing.

MobiFlight-Admin avatar Aug 01 '21 17:08 MobiFlight-Admin

Äre these PNG or is it easy to render SVG?

tigert avatar Aug 08 '21 22:08 tigert

At the moment they have to be png... but I would create them with a Vector based program like Inkscape and then export them as PNG files.

MobiFlight-Admin avatar Sep 01 '21 14:09 MobiFlight-Admin

I can work on these. Will do them in SVG but align to pixel grid so they look crisp. What size does the list widget expect them in if you specify a larger size?

tigert avatar Jan 04 '22 09:01 tigert

Some ideas for feedback.

Button: image

LED: image

I'm thinking of color coding inputs and outputs so that inputs are for example green, and outputs are red, so it is easier to tell them apart at a glance.

Thinking 24x24 in case you want to rework the ui a bit too, they are done

tigert avatar Jan 06 '22 09:01 tigert

Potentiometer: image

Encoder: image

These are all done in vector so recoloring and tweaks are relatively easy.

tigert avatar Jan 06 '22 10:01 tigert

New approachj, wtih 16x16 icons.

Also trying to have distinct visual silhouettes for icons.

image

(don't mind the labels, those are just random devices on my autopilot panel and dont match the icon types)

"chip" with "I" is input shifter, and the one with "O" is output shifter.

tigert avatar Jan 17 '22 00:01 tigert

i like them! i think color coding would help on top of the shape. the led stands out in style with the gradient. Maybe we can find a representation that is more like the other ones?

DocMoebiuz avatar May 10 '22 19:05 DocMoebiuz

I adding these nice board images made by @tigert, originally mentioned in #756

Uno: board-uno

Mega: board-mega

Mega Mini (we can still show it in a list even though it is just a "mega" technically) board-mega-mini

Pro Micro: board-pro-micro

DocMoebiuz avatar Oct 15 '22 17:10 DocMoebiuz

Adding the icons here.

image

Outputs

Led/output: mobiflight_icon_out_led

Led/7segment: mobiflight_icon_out_7segment

Servo: mobiflight_icon_out_servo

Stepper: mobiflight_icon_out_stepper

LCD Display: mobiflight_icon_out_lcd

Output shift register: mobiflight_icon_out_shifter

Output custom device: mobiflight_icon_out_customdevice

Inputs

Encoder: mobiflight_icon_in_encoder

Button: mobiflight_icon_in_button

Analog input: mobiflight_icon_in_analog

Input shift register: mobiflight_icon_in_shifter

Input multiplexer: mobiflight_icon_in_multiplexer

tigert avatar Nov 11 '23 18:11 tigert

This zip contains the svg files too. mobiflight-icons-2023-11-17.zip

tigert avatar Nov 11 '23 18:11 tigert

updated the analog input icon and the zip

tigert avatar Nov 12 '23 14:11 tigert