Need ICONS !

jazzed · 2012-05-18 13:58

Hi all you image minded Propeller people.

I have a future project in mind and would like to see if we could come up with some ICONs or small .png pictures to represent the following:

I2C, SPI, Timer, RTC, UART, VGA, TV, KBD, Mouse, PWM, ADC, others - in no special order.

Basically, any device that you can think of that can be attached to or be emulated in a Propeller COG or function should be considered. If it's not your original work, please state where you found it and what license if any applies.

Any input is welcome.

Thanks,
--Steve

pedward · 2012-05-18 14:33

Just some thoughts off the top of my head:

I2C and SPI could just be the letters in stylized manner. These are specific protocols, so clarity is important. For the design language already used by SimpleIDE, have a look at http://www.aha-soft.com/

Timer could be a stopwatch
RTC a wall clock, perhaps with a little can crystal? Or some visual conveyance of a can crystal generating 32Khz?
UART, perhaps 2 arrows of red and blue, pointing left and right, top and bottom with 1010101 next to each arrow tail?
VGA, I'm thinking dsub-15, or just an lcd monitor.
TV, TV with rabbit ears! Need the rabbit ears!
KBD and Mouse are straightforward.
PWM, perhaps a PWM modulated wave, narrow to wide?
ADC could be half a sine wave fading into a bunch of digital bits?
DAC could be bits into wave?
USB (you know there is going to be a C USB implementation at some point), just the standard USB 3 arrow logo, or maybe an icon of a USB connector so the arrows aren't prominent (for trademark reasons).

Inkscape is a good program for doing these, it will save an SVG file that can be rendered at different resolutions and saved as PNGs for SIDE.

jazzed · 2012-05-18 17:04

Good list! Anyone want to try making some pictures?

pedward wrote: »

Just some thoughts off the top of my head:

I2C and SPI could just be the letters in stylized manner. These are specific protocols, so clarity is important. For the design language already used by SimpleIDE, have a look at http://www.aha-soft.com/

Timer could be a stopwatch
RTC a wall clock, perhaps with a little can crystal? Or some visual conveyance of a can crystal generating 32Khz?
UART, perhaps 2 arrows of red and blue, pointing left and right, top and bottom with 1010101 next to each arrow tail?
VGA, I'm thinking dsub-15, or just an lcd monitor.
TV, TV with rabbit ears! Need the rabbit ears!
KBD and Mouse are straightforward.
PWM, perhaps a PWM modulated wave, narrow to wide?
ADC could be half a sine wave fading into a bunch of digital bits?
DAC could be bits into wave?
USB (you know there is going to be a C USB implementation at some point), just the standard USB 3 arrow logo, or maybe an icon of a USB connector so the arrows aren't prominent (for trademark reasons).

Inkscape is a good program for doing these, it will save an SVG file that can be rendered at different resolutions and saved as PNGs for SIDE.

mindrobots · 2012-05-18 17:18

What size should they look "good" at? Do you have a target resolution?

Sounds like a fun escape....for those that need to escape.

pedward · 2012-05-18 17:42

The current icons are 24x24, however 22x22 seems to be a more common dimension.

jazzed · 2012-05-18 17:59

Size?

Well, program icons are usually small, but I need bigger pictures because of all the old ..., err, I mean because of the application.
Bigger ones can always be scaled down pretty easy, but not vis-a-vis.

I'm thinking that 200 px square would be fine.

Thanks,
--Steve

prof_braino · 2012-05-18 18:21

This may seem too obvious, but what it the icons were just the three letters of each thing you are trying to represent? I mean, for TV you could draw a TV, but ADC?
ADC would convey my mental representation of ADC, at least to me. RTC would convey RTC pretty well. PWM? I don't think a picture would be anywhere near as good as the letters PWM.

Note that this is one of the few cases where I would chose any abbreviation over another option.

pedward · 2012-05-18 18:22

The biggest standard size is 256x256 then it scales by a factor of 2 from that. If they are created as SVG to begin with, then you can render them to whatever sizes you want.

lardom · 2012-05-18 18:24

Do you mean something like the symbols used for "USB", etc?

jazzed · 2012-05-18 18:38

lardom wrote: »

Do you mean something like the symbols used for "USB", etc?

Something friendly. peward has some really nice ideas, but they ain't pictures yet.

We can put abbreviation letters down in the corner of pretty pictures.

Just letters like ADC would be fine for a place-holder until something more creative comes along.

256x256 size is fine to me.

The pictures can be .PNG images too. But .JPG won't do.

Thanks,
--Steve

Phil Pilgrim (PhiPi) · 2012-05-18 19:05

Steve,

If you're planning to reduce the icons from 256x256 at some point, please say so. A good icon needs to be designed for the size it will ultimately fit. Resampled icons just look crappy.

-Phil

jazzed · 2012-05-18 19:14

Got any picture ideas Phil? I won't say what it's for yet, but would like some pictures if you got 'em.

rosco_pc · 2012-05-18 19:16

What about these?

Can continue if you like (the white corners that you see are actually transparent, not sure why they show up white here)

jazzed · 2012-05-18 19:35

rosco_pc wrote: »

What about these?

Can continue if you like (the white corners that you see are actually transparent, not sure why they show up white here)

Interesting. If you were to add "pins" to them how would that look? Basically looking for "pin place holders" like circles, etc....
I mean, a SPI bus can have 4 pins. An SQI or QuadSPI bus can have 6 pins. An I2C bus can have 2 pins. SD Card ?

Thanks,
--Steve

rosco_pc · 2012-05-18 19:42

You're thinking on something like this:

jazzed · 2012-05-18 19:51

rosco_pc wrote: »

You're thinking on something like this: ...

Yes, but i feel the need for a geometric shaped connection point. Just lines don't seem obvious enough.

rosco_pc · 2012-05-18 19:56

Not sure what you mean with that. Can you give an example?

Is this more what you mean?

pedward · 2012-05-18 22:13

Here's an attempt at some icons, the source files are SVG format:

JonnyMac · 2012-05-18 22:48

1-Wire, anyone? A couple of us have written PASM drivers that could easily port to PropGCC.

rosco_pc · 2012-05-18 23:42

Some of my other attempts

pedward · 2012-05-19 00:52

Based on some of Rosco's examples, I tweaked mine to be like this:

pedward · 2012-05-19 01:49

More:

lardom · 2012-05-19 06:49

Pedward's icon @ #22 communicates ADC well. Switching the symbols would convey DAC.
I'd like to know if these icons would gain universal usage?

prof_braino · 2012-05-19 08:19

pedward wrote: »

Based on some of Rosco's examples, I tweaked mine to be like this:

I like the way these are looking, but what is the purple one to represent? Is this two two way digital? If so I liked the blue and red arrows version.

Or is it PWM? I would think the letters PWM or the varied width square waves would be clearer.

jazzed · 2012-05-19 09:38

prof_braino wrote: »

I like the way these are looking, but what is the purple one to represent? Is this two two way digital? If so I liked the blue and red arrows version.

Or is it PWM? I would think the letters PWM or the varied width square waves would be clearer.

I agree, that one is not very intuitive. On a GUI we can use a tool-tip for "hover help" which can clear up confusion, but the graphic should try a little harder.
In some of these actually putting the abbreviation in a very clear font would help. I'm thinking of rosco_pc's DAC icon for example.

Over all I think this is all shaping up pretty good. I really like the color shading on some of the examples. And the "pin holes" are very good.

Now imagine a DIP Propeller chip in the center of a canvas where you can drag and drop these components and make connections.

JonnyMac · 2012-05-19 09:46

When I worked for Toro we had a guideline that stated a graphic -- if not obvious from the jump -- only needed to be explained once. It's tough with such small glyphs to convey a lot of complex information. Also, the smaller the icon, the less colorful it should be; shading and gradients look fine on big graphics, but tend not to work on very small ones.

jazzed · 2012-05-19 09:58

I think peward's pictures are about the right size for an application canvas drag/drop. A small version of each without shading/extra letters or normal size could be dragged from a "list" widget. The end result canvas would have the larger pictures.

I'm wondering if we should have a color code classifications. That is have something in line with the OBEX categories. The "Tool" and "All" categories would probably not apply.

Data Storage
RAM, EEPROM, flash, hard drive...

Tool
Helpful function, language, development aid...

Display
TV, VGA, LCD, LED, VFD, printer...

Human Input
Keyboard, mouse, joystick, game pad...

Protocol
SPI, 1-Wire, I2C, asynchronous serial...

Math
Floating point, PID, trigonometry, physics...

Motor Control
Servo, stepper, standard motor...

Sensor
Temperature, light, proximity, position...

Signal Generation & Processing
Pulse, pwm, digital or analog output...

Speech & Sound
Sound generation and processing...

Fun
Fun demo, game, handy trick...

View All Objects
This category contains all objects...

pedward · 2012-05-19 10:19

The 1010 was for serial, I tried 2 arrows but it got too busy at 24px. I wanted to label ADC/DAC, but again they get too busy at 24px.

The pin spacing should be uniform so dragging onto a graphic will work, I'll correct those. I have an idea for a new serial icon I'll post later.

The colors for different functions were chosen to differentiate the modules, to further communicate difference.

Since Steve is talking GUI and drag/drop, I would suggest that the icons are upsized from "toolbar" size to at least 32x32, then the labels will come through better, if 48x48, then even more detail can be used.

prof_braino · 2012-05-19 14:04

Different color background is a good idea. The least busy looking ones are my favorites so far.

a guideline that stated a graphic -- if not obvious from the jump -- only needed to be explained once

Does this mean after you explain it once, you can assume that you never need to explain it again? Or does it mean if find you need to explain it once, prepare to have to explain it at least once to every single person that runs across it? I would say the former is less true, and the later is more true. In fact, it it needs to be explained at all, the "picture is worth a thousand words" has fallen apart. In those rare cases, maybe a graphic is not the way to go.

JonnyMac · 2012-05-19 15:41

The world is not a perfect place, and often the size allowance for a graphic does not allow a perfect representation. As has been pointed out, most OS's have "flyover tips" and that tip should elicit, "Oh, I get it now!" from the new user.

pedward · 2012-05-19 17:48

Steve, here's a question that came up: Since you proffered the idea of dragging "modules" onto pins, should the icons be proportional in size to the pins they use?

For instance, SPI uses 4 pins and I2C uses 2, so logically SPI would be twice the size of I2C.

Does this make sense? The icons would then represent the pin usage and the more complicated modules would get more real estate for labels.

Need ICONS !

Comments