Plover could use more art #263

Open
morinted opened this Issue Sep 25, 2015 · 109 comments

Comments

Projects
None yet
@morinted
Member

morinted commented Sep 25, 2015

Right now the red "P" doesn't mean anything and is used arbitrarily as an indicator for Plover being on and off. A couple things that I don't like about the P:

  • It is low resolution which looks bad on high density displays
  • Red/green colorblind users probably don't benefit from the color change indication
  • The red and green are very visually intense!
  • Having the icon and the indicator being the same logo means that you may assume that Plover is always "off" because in your task bar and on your desktop, it is the red P.

I think that the Plover art could:

  • Have more than just color to indicate its status
  • Have a separate application icon. Status != application
  • Use some of the Plover branding (which is still up in the air at this point, apart from Delores)

I'll be talking a little bit with my friend Jeff to see if he can fit this into his free time, but any contributions and suggestions are totally welcome.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

Ideas for an icon? The icon doesn't have to be the same as the indicator for on/off. Because if it is, then you associate Plover's icon with "on" or "off", which doesn't make sense. Also, in OS X and Windows, the icon is the red P, while in Linux it's the green one...

All right, let's see. Eclipse has their logo

Very abstract, kind of ugly and outdated. I wouldn't pursue this. What about ProCAT Winner?

I'd say that's a little better. At least they have their brand. No idea if they use that on the desktop though or if it's just box art.

Plover can obviously use a Plover bird, or it can be more abstract and professional such as a steno machine. Anything from a cartoon rendition to a general flat-style shape. Ideally it would be simple but recognizable. Any ideas for a launcher icon that would make you happy each time you see it? :)

Member

morinted commented Sep 28, 2015

Ideas for an icon? The icon doesn't have to be the same as the indicator for on/off. Because if it is, then you associate Plover's icon with "on" or "off", which doesn't make sense. Also, in OS X and Windows, the icon is the red P, while in Linux it's the green one...

All right, let's see. Eclipse has their logo

Very abstract, kind of ugly and outdated. I wouldn't pursue this. What about ProCAT Winner?

I'd say that's a little better. At least they have their brand. No idea if they use that on the desktop though or if it's just box art.

Plover can obviously use a Plover bird, or it can be more abstract and professional such as a steno machine. Anything from a cartoon rendition to a general flat-style shape. Ideally it would be simple but recognizable. Any ideas for a launcher icon that would make you happy each time you see it? :)

@lifton

This comment has been minimized.

Show comment
Hide comment
@lifton

lifton Sep 28, 2015

Member

How about a stylized single steno key?

Member

lifton commented Sep 28, 2015

How about a stylized single steno key?

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

I'd also like to leave a callback to the old Plover logo drafts from the blog post which are:

Plover birds

Then there's Dolores who you can see in all her one-pose glory:

Dolores

Member

morinted commented Sep 28, 2015

I'd also like to leave a callback to the old Plover logo drafts from the blog post which are:

Plover birds

Then there's Dolores who you can see in all her one-pose glory:

Dolores

@lifton

This comment has been minimized.

Show comment
Hide comment
@lifton

lifton Sep 28, 2015

Member

Maybe Dolores with squinted eyes and lightning in the background.

Member

lifton commented Sep 28, 2015

Maybe Dolores with squinted eyes and lightning in the background.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

I like the idea of a single steno key. Jeff was toying with adding a simple beak and eyes to turn steno keys into mascots. (you could add a tail and make a stenosaurus...)

Member

morinted commented Sep 28, 2015

I like the idea of a single steno key. Jeff was toying with adding a simple beak and eyes to turn steno keys into mascots. (you could add a tail and make a stenosaurus...)

@morinted morinted added this to the plover-next milestone Sep 28, 2015

@Dapperpoe

This comment has been minimized.

Show comment
Hide comment
@Dapperpoe

Dapperpoe Sep 28, 2015

OK Teddy asked my to design a mascot for plover. The idea is to have Dolores the mascot bird interact with steno keys as if they are objects. I'm going to make a handful of these.
If you have any ideas for more objects for Dolores to interact with just post them. Right now It's surf board and door.
These are concept sketches, I'll post finished inked versions later on.

ploverbird

OK Teddy asked my to design a mascot for plover. The idea is to have Dolores the mascot bird interact with steno keys as if they are objects. I'm going to make a handful of these.
If you have any ideas for more objects for Dolores to interact with just post them. Right now It's surf board and door.
These are concept sketches, I'll post finished inked versions later on.

ploverbird

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

Steno keys aren't usually that long >> stenoboard

Can you make that idea work with stumpier keys?

Member

morinted commented Sep 28, 2015

Steno keys aren't usually that long >> stenoboard

Can you make that idea work with stumpier keys?

@Dapperpoe

This comment has been minimized.

Show comment
Hide comment
@Dapperpoe

Dapperpoe Sep 28, 2015

Just going off the images you sent me originally. No problems designing around something smaller though.

Just going off the images you sent me originally. No problems designing around something smaller though.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

Stenosaurus is a good one to base it off of, too. Take a look at these keys steno saurus

Member

morinted commented Sep 28, 2015

Stenosaurus is a good one to base it off of, too. Take a look at these keys steno saurus

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 28, 2015

Member

I have to say I like the elegance and simplicity of the current
P-in-teal-key favicon on the Plover blog. That was your design, right, Ted?
Nice and clean.

On Mon, Sep 28, 2015 at 12:53 AM, Ted Morin notifications@github.com
wrote:

Stenosaurus is a good one to base it off of, too. Take a look at these
keys [image: steno saurus]
https://camo.githubusercontent.com/2c9721361b49f0c4c76d1683f4f8401e4906bb72/687474703a2f2f322e62702e626c6f6773706f742e636f6d2f2d746e6653734c4952425f382f553436664f67434c3558492f41414141414141414156772f4c57623175486d654c6e342f73313630302f323031342d30362d30322b31372e32382e33342e6a7067


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 28, 2015

I have to say I like the elegance and simplicity of the current
P-in-teal-key favicon on the Plover blog. That was your design, right, Ted?
Nice and clean.

On Mon, Sep 28, 2015 at 12:53 AM, Ted Morin notifications@github.com
wrote:

Stenosaurus is a good one to base it off of, too. Take a look at these
keys [image: steno saurus]
https://camo.githubusercontent.com/2c9721361b49f0c4c76d1683f4f8401e4906bb72/687474703a2f2f322e62702e626c6f6773706f742e636f6d2f2d746e6653734c4952425f382f553436664f67434c3558492f41414141414141414156772f4c57623175486d654c6e342f73313630302f323031342d30362d30322b31372e32382e33342e6a7067


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 28, 2015

Member

Yup, but I don't think I could make it look good at anything above 16x16.
@Dapperpoe, could you create a larger version of the favicon on the Plover
blog?

Member

morinted commented Sep 28, 2015

Yup, but I don't think I could make it look good at anything above 16x16.
@Dapperpoe, could you create a larger version of the favicon on the Plover
blog?

@morinted

This comment has been minimized.

Show comment
Hide comment
Member

morinted commented Sep 28, 2015

Favicon

@nelstrom

This comment has been minimized.

Show comment
Hide comment
@nelstrom

nelstrom Sep 29, 2015

(So the Plover bird icon is called Dolores? You learn something new everyday!)

It's cute how Dolores feathers make out the steno keyboard, with the highlighted feathers spelling out the stroke for the word 'Plover'. How about making the status indicator spell out the strokes for the words "on" and "off"?

(So the Plover bird icon is called Dolores? You learn something new everyday!)

It's cute how Dolores feathers make out the steno keyboard, with the highlighted feathers spelling out the stroke for the word 'Plover'. How about making the status indicator spell out the strokes for the words "on" and "off"?

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 29, 2015

Member

Yep! Longest one-stroke name I could think of: TKHRORS. (':

I like that idea, though I'm not sure how big the indicator would have to
be to make that clearly visible. Something to play around with, certainly.

On Tue, Sep 29, 2015 at 9:45 AM, Drew Neil notifications@github.com wrote:

(So the Plover bird icon is called Dolores? You learn something new
everyday!)

It's cute how Dolores feathers make out the steno keyboard, with the
highlighted feathers spelling out the stroke for the word 'Plover'. How
about making the status indicator spell out the strokes for the words "on"
and "off"?


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 29, 2015

Yep! Longest one-stroke name I could think of: TKHRORS. (':

I like that idea, though I'm not sure how big the indicator would have to
be to make that clearly visible. Something to play around with, certainly.

On Tue, Sep 29, 2015 at 9:45 AM, Drew Neil notifications@github.com wrote:

(So the Plover bird icon is called Dolores? You learn something new
everyday!)

It's cute how Dolores feathers make out the steno keyboard, with the
highlighted feathers spelling out the stroke for the word 'Plover'. How
about making the status indicator spell out the strokes for the words "on"
and "off"?


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 29, 2015

Member

I only worry that for first-time Plover users, they won't know any theory and OF and OPB aren't intuitive. I remember the first time I loaded Plover, and I probably wouldn't have liked that.

The other direction would be turning Plover's on/off button into a regular switch a material switch

Member

morinted commented Sep 29, 2015

I only worry that for first-time Plover users, they won't know any theory and OF and OPB aren't intuitive. I remember the first time I loaded Plover, and I probably wouldn't have liked that.

The other direction would be turning Plover's on/off button into a regular switch a material switch

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 29, 2015

Member

What do y'all think of the Plover Rainmeter skin design?

http://plover.stenoknight.com/2015/06/beautiful-plover-skin-for-rainmeter.html

On Tue, Sep 29, 2015 at 3:22 PM, Ted Morin notifications@github.com wrote:

I only worry that for first-time Plover users, they won't know any theory
and OF and OPB aren't intuitive. I remember the first time I loaded Plover,
and I probably wouldn't have liked that.

The other direction would be turning Plover's on/off button into a regular
switch [image: a material switch]
https://camo.githubusercontent.com/ccca1f6aa291cda01462ed3d1702c3e32acd452a/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f696d616765732f636f6d706f6e656e74732d73776974636865732d7377697463682d6465736b746f702d66696e676572746f7563685f6c617267655f78686470692e706e67


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 29, 2015

What do y'all think of the Plover Rainmeter skin design?

http://plover.stenoknight.com/2015/06/beautiful-plover-skin-for-rainmeter.html

On Tue, Sep 29, 2015 at 3:22 PM, Ted Morin notifications@github.com wrote:

I only worry that for first-time Plover users, they won't know any theory
and OF and OPB aren't intuitive. I remember the first time I loaded Plover,
and I probably wouldn't have liked that.

The other direction would be turning Plover's on/off button into a regular
switch [image: a material switch]
https://camo.githubusercontent.com/ccca1f6aa291cda01462ed3d1702c3e32acd452a/687474703a2f2f6d6174657269616c2d64657369676e2e73746f726167652e676f6f676c65617069732e636f6d2f696d616765732f636f6d706f6e656e74732d73776974636865732d7377697463682d6465736b746f702d66696e676572746f7563685f6c617267655f78686470692e706e67


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 29, 2015

I'm a fan of minimalist artwork. Here's some sketches of a super simple Plover tray icon. It would be awesome to see some variations on this theme. A link to the SVG file is here, open in inkscape and zoom out: https://www.dropbox.com/s/d4jlj7t44w9egfo/plovericons.svg?dl=0

example-1

Here's how it might look on OSX, enabled:

image4358

image4358-2

And Ubuntu:
image4418-3

gcr commented Sep 29, 2015

I'm a fan of minimalist artwork. Here's some sketches of a super simple Plover tray icon. It would be awesome to see some variations on this theme. A link to the SVG file is here, open in inkscape and zoom out: https://www.dropbox.com/s/d4jlj7t44w9egfo/plovericons.svg?dl=0

example-1

Here's how it might look on OSX, enabled:

image4358

image4358-2

And Ubuntu:
image4418-3

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 29, 2015

Member

I really like the elegance of your keyboard design, but I feel like the X
conveys "error" more than "Plover is currently off". I like the idea of the
solid keyboard with dark grey keys indicating "Plover on" and the outlined
keyboard with white keys indicating "Plover off", though.

On Tue, Sep 29, 2015 at 6:31 PM, gcr notifications@github.com wrote:

I'm a fan of minimalist artwork. Here's some sketches:

[image: example-1]
https://cloud.githubusercontent.com/assets/45252/10180054/2d43899e-66d8-11e5-9e40-62ae3ec2c477.png

Here's how it might look on OSX, enabled:

[image: image4358]
https://cloud.githubusercontent.com/assets/45252/10180065/34b5b2ec-66d8-11e5-8a4a-8a9599d241bc.png

[image: image4358-2]
https://cloud.githubusercontent.com/assets/45252/10180067/3a67b1ae-66d8-11e5-8062-592c144f7c3f.png

And Ubuntu:
[image: image4418-3]
https://cloud.githubusercontent.com/assets/45252/10180078/487ac81c-66d8-11e5-9c07-a927234a9d1a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 29, 2015

I really like the elegance of your keyboard design, but I feel like the X
conveys "error" more than "Plover is currently off". I like the idea of the
solid keyboard with dark grey keys indicating "Plover on" and the outlined
keyboard with white keys indicating "Plover off", though.

On Tue, Sep 29, 2015 at 6:31 PM, gcr notifications@github.com wrote:

I'm a fan of minimalist artwork. Here's some sketches:

[image: example-1]
https://cloud.githubusercontent.com/assets/45252/10180054/2d43899e-66d8-11e5-9e40-62ae3ec2c477.png

Here's how it might look on OSX, enabled:

[image: image4358]
https://cloud.githubusercontent.com/assets/45252/10180065/34b5b2ec-66d8-11e5-8a4a-8a9599d241bc.png

[image: image4358-2]
https://cloud.githubusercontent.com/assets/45252/10180067/3a67b1ae-66d8-11e5-8062-592c144f7c3f.png

And Ubuntu:
[image: image4418-3]
https://cloud.githubusercontent.com/assets/45252/10180078/487ac81c-66d8-11e5-9c07-a927234a9d1a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 29, 2015

Member

Sorry, I meant to say the keyboard with solid black keys indicating "Plover
on" and the keyboard with white keys outlined in black indicating "Plover
off".

On Tue, Sep 29, 2015 at 6:33 PM, Mirabai Knight mkk@stenoknight.com wrote:

I really like the elegance of your keyboard design, but I feel like the X
conveys "error" more than "Plover is currently off". I like the idea of the
solid keyboard with dark grey keys indicating "Plover on" and the outlined
keyboard with white keys indicating "Plover off", though.

On Tue, Sep 29, 2015 at 6:31 PM, gcr notifications@github.com wrote:

I'm a fan of minimalist artwork. Here's some sketches:

[image: example-1]
https://cloud.githubusercontent.com/assets/45252/10180054/2d43899e-66d8-11e5-9e40-62ae3ec2c477.png

Here's how it might look on OSX, enabled:

[image: image4358]
https://cloud.githubusercontent.com/assets/45252/10180065/34b5b2ec-66d8-11e5-8a4a-8a9599d241bc.png

[image: image4358-2]
https://cloud.githubusercontent.com/assets/45252/10180067/3a67b1ae-66d8-11e5-8062-592c144f7c3f.png

And Ubuntu:
[image: image4418-3]
https://cloud.githubusercontent.com/assets/45252/10180078/487ac81c-66d8-11e5-9c07-a927234a9d1a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 29, 2015

Sorry, I meant to say the keyboard with solid black keys indicating "Plover
on" and the keyboard with white keys outlined in black indicating "Plover
off".

On Tue, Sep 29, 2015 at 6:33 PM, Mirabai Knight mkk@stenoknight.com wrote:

I really like the elegance of your keyboard design, but I feel like the X
conveys "error" more than "Plover is currently off". I like the idea of the
solid keyboard with dark grey keys indicating "Plover on" and the outlined
keyboard with white keys indicating "Plover off", though.

On Tue, Sep 29, 2015 at 6:31 PM, gcr notifications@github.com wrote:

I'm a fan of minimalist artwork. Here's some sketches:

[image: example-1]
https://cloud.githubusercontent.com/assets/45252/10180054/2d43899e-66d8-11e5-9e40-62ae3ec2c477.png

Here's how it might look on OSX, enabled:

[image: image4358]
https://cloud.githubusercontent.com/assets/45252/10180065/34b5b2ec-66d8-11e5-8a4a-8a9599d241bc.png

[image: image4358-2]
https://cloud.githubusercontent.com/assets/45252/10180067/3a67b1ae-66d8-11e5-8062-592c144f7c3f.png

And Ubuntu:
[image: image4418-3]
https://cloud.githubusercontent.com/assets/45252/10180078/487ac81c-66d8-11e5-9c07-a927234a9d1a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 29, 2015

Member

Maybe a stenokeyboard with a connected or broken wire to indicate connected/disconnected (would also make the icon square with the added height)

Member

morinted commented Sep 29, 2015

Maybe a stenokeyboard with a connected or broken wire to indicate connected/disconnected (would also make the icon square with the added height)

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 29, 2015

A few more tries

path4657

gcr commented Sep 29, 2015

A few more tries

path4657

@gcr

This comment has been minimized.

Show comment
Hide comment

gcr commented Sep 29, 2015

path4694

@nelstrom

This comment has been minimized.

Show comment
Hide comment
@nelstrom

nelstrom Sep 30, 2015

I quite like the way that Screenflow shows its status in the menu bar. The one on the right means that screenflow is recording:

screenflow-status

Maybe Plover could do something similar. When Plover is disabled, the icon could be the outline of a single key. When Plover is active, the icon could change to contain an asterisk.

I quite like the way that Screenflow shows its status in the menu bar. The one on the right means that screenflow is recording:

screenflow-status

Maybe Plover could do something similar. When Plover is disabled, the icon could be the outline of a single key. When Plover is active, the icon could change to contain an asterisk.

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 30, 2015

Ha! I love that idea. It also makes a visual pun with the asterisk key in the center of the steno machine.

g4161

gcr commented Sep 30, 2015

Ha! I love that idea. It also makes a visual pun with the asterisk key in the center of the steno machine.

g4161

@nelstrom

This comment has been minimized.

Show comment
Hide comment
@nelstrom

nelstrom Sep 30, 2015

@gcr that looks good!

@gcr that looks good!

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 30, 2015

Member

Man you are great at this gcr. Can you make a version like that but with a
standard height key for my curiosity?

On Wed, Sep 30, 2015, 8:53 AM gcr notifications@github.com wrote:

Ha! I love that idea. It also makes a visual pun with the asterisk key in
the center of the steno machine.

[image: g4161]
https://cloud.githubusercontent.com/assets/45252/10193371/a7d8d8c6-6750-11e5-8863-6c76486d8a0a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Member

morinted commented Sep 30, 2015

Man you are great at this gcr. Can you make a version like that but with a
standard height key for my curiosity?

On Wed, Sep 30, 2015, 8:53 AM gcr notifications@github.com wrote:

Ha! I love that idea. It also makes a visual pun with the asterisk key in
the center of the steno machine.

[image: g4161]
https://cloud.githubusercontent.com/assets/45252/10193371/a7d8d8c6-6750-11e5-8863-6c76486d8a0a.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 30, 2015

Oh dear. What is the standard height of a key? Like a height/width ratio of 3/2 or something including the rounded tip?

I'll sketch something when I get home tonight.

gcr commented Sep 30, 2015

Oh dear. What is the standard height of a key? Like a height/width ratio of 3/2 or something including the rounded tip?

I'll sketch something when I get home tonight.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Sep 30, 2015

Member

Not sure, but go check the Stenosaurus blog and maybe copy Lifton's designs.

On Wed, Sep 30, 2015, 10:05 AM gcr notifications@github.com wrote:

Oh dear. What is the standard height of a key? Like a height/width
ratio of 3/2 or something including the rounded tip?


Reply to this email directly or view it on GitHub
#263 (comment)
.

Member

morinted commented Sep 30, 2015

Not sure, but go check the Stenosaurus blog and maybe copy Lifton's designs.

On Wed, Sep 30, 2015, 10:05 AM gcr notifications@github.com wrote:

Oh dear. What is the standard height of a key? Like a height/width
ratio of 3/2 or something including the rounded tip?


Reply to this email directly or view it on GitHub
#263 (comment)
.

@lifton

This comment has been minimized.

Show comment
Hide comment
@lifton

lifton Sep 30, 2015

Member

@gcr This is the post you probably want to look at:

http://stenosaurus.blogspot.com/2014/02/keyboard-design.html

The first image in particular as the dimensions of the keys being used in the Stenosaurus.

Member

lifton commented Sep 30, 2015

@gcr This is the post you probably want to look at:

http://stenosaurus.blogspot.com/2014/02/keyboard-design.html

The first image in particular as the dimensions of the keys being used in the Stenosaurus.

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 30, 2015

More sketches! The aspect ratio of Josh's keys is 1.47:1. These aren't exact but they're a bit closer.

Inkscape SVG: https://www.dropbox.com/s/xvdwoiqkv8ecjt4/steno-keys.svg?dl=0

rect4143

(i hereby assign the copyright of this work, and all other works I post in this thread, to the Plover developers)

gcr commented Sep 30, 2015

More sketches! The aspect ratio of Josh's keys is 1.47:1. These aren't exact but they're a bit closer.

Inkscape SVG: https://www.dropbox.com/s/xvdwoiqkv8ecjt4/steno-keys.svg?dl=0

rect4143

(i hereby assign the copyright of this work, and all other works I post in this thread, to the Plover developers)

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 30, 2015

Member

Ooh!! I really like the engraved effect! That's gorgeous.

On Wed, Sep 30, 2015 at 7:20 PM, gcr notifications@github.com wrote:

More sketches! The aspect ratio of Josh's keys is 1.47:1. These aren't
exact but they're a bit closer.

Inkscape SVG:
https://www.dropbox.com/s/xvdwoiqkv8ecjt4/steno-keys.svg?dl=0

[image: rect4143]
https://cloud.githubusercontent.com/assets/45252/10209330/38402b2e-67a8-11e5-8098-4e487d5e421a.png

(i hereby assign the copyright of this work, and the ones I posted above,
to the Plover developers)


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 30, 2015

Ooh!! I really like the engraved effect! That's gorgeous.

On Wed, Sep 30, 2015 at 7:20 PM, gcr notifications@github.com wrote:

More sketches! The aspect ratio of Josh's keys is 1.47:1. These aren't
exact but they're a bit closer.

Inkscape SVG:
https://www.dropbox.com/s/xvdwoiqkv8ecjt4/steno-keys.svg?dl=0

[image: rect4143]
https://cloud.githubusercontent.com/assets/45252/10209330/38402b2e-67a8-11e5-8098-4e487d5e421a.png

(i hereby assign the copyright of this work, and the ones I posted above,
to the Plover developers)


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Sep 30, 2015

Using the "P" font from the Plover blog:

rect5069

I really like all of the ideas from the thread! I don't mean to like encourage a certain style of logo. Just throwing sketches out there. If anyone wants to take this and run with it, by all means! Or doing something completely different is awesome too -- just brainstorming

gcr commented Sep 30, 2015

Using the "P" font from the Plover blog:

rect5069

I really like all of the ideas from the thread! I don't mean to like encourage a certain style of logo. Just throwing sketches out there. If anyone wants to take this and run with it, by all means! Or doing something completely different is awesome too -- just brainstorming

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Sep 30, 2015

Member

All these sketches are fantastic! Thanks so much for working on this!

The Plover font is Butterbrotpapier, btw:
http://www.dafont.com/butterbrotpapier.font

On Wed, Sep 30, 2015 at 7:41 PM, gcr notifications@github.com wrote:

Using the "P" font from the Plover blog:

[image: rect5069]
https://cloud.githubusercontent.com/assets/45252/10209574/e52c5e00-67aa-11e5-8ca5-7e62f26c941d.png

I really like all of the ideas from the thread! I don't mean to like
encourage a certain style of logo. Just throwing sketches out there. If
anyone wants to take this and run with it, by all means!


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Sep 30, 2015

All these sketches are fantastic! Thanks so much for working on this!

The Plover font is Butterbrotpapier, btw:
http://www.dafont.com/butterbrotpapier.font

On Wed, Sep 30, 2015 at 7:41 PM, gcr notifications@github.com wrote:

Using the "P" font from the Plover blog:

[image: rect5069]
https://cloud.githubusercontent.com/assets/45252/10209574/e52c5e00-67aa-11e5-8ca5-7e62f26c941d.png

I really like all of the ideas from the thread! I don't mean to like
encourage a certain style of logo. Just throwing sketches out there. If
anyone wants to take this and run with it, by all means!


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Oct 1, 2015

Member

Could I see a render of the P in Roboto Mono? Might be good to decide on a nice fixed width font for strokes in our art.

Member

morinted commented Oct 1, 2015

Could I see a render of the P in Roboto Mono? Might be good to decide on a nice fixed width font for strokes in our art.

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Oct 1, 2015

Member

I'm fond of Inconsolata, when it comes to fixed width fonts.

On Thu, Oct 1, 2015 at 11:35 AM, Ted Morin notifications@github.com wrote:

Could I see a render of the P in Roboto Mono? Might be good to decide on a
nice fixed width font for strokes in our art.


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Oct 1, 2015

I'm fond of Inconsolata, when it comes to fixed width fonts.

On Thu, Oct 1, 2015 at 11:35 AM, Ted Morin notifications@github.com wrote:

Could I see a render of the P in Roboto Mono? Might be good to decide on a
nice fixed width font for strokes in our art.


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Oct 2, 2015

Here's the P in Inconsolata, Roboto Mono, and Roboto Mono Lowercase. (If anyone else wants to play around, this is all in the .svg I linked above)

text4760

I notice zero difference between the first two (other than the scale difference). The lowercase version looks kind of interesting though.

gcr commented Oct 2, 2015

Here's the P in Inconsolata, Roboto Mono, and Roboto Mono Lowercase. (If anyone else wants to play around, this is all in the .svg I linked above)

text4760

I notice zero difference between the first two (other than the scale difference). The lowercase version looks kind of interesting though.

@lifton

This comment has been minimized.

Show comment
Hide comment
@lifton

lifton Oct 5, 2015

Member

I like the blank key for off and the asterisk key for on. Having the same
key with different shading for on and off has always struck me as confusing.

On Thu, Oct 1, 2015 at 9:02 AM, Mirabai Knight notifications@github.com
wrote:

I'm fond of Inconsolata, when it comes to fixed width fonts.

On Thu, Oct 1, 2015 at 11:35 AM, Ted Morin notifications@github.com
wrote:

Could I see a render of the P in Roboto Mono? Might be good to decide on
a
nice fixed width font for strokes in our art.


Reply to this email directly or view it on GitHub
<
#263 (comment)

.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com


Reply to this email directly or view it on GitHub
#263 (comment)
.

Member

lifton commented Oct 5, 2015

I like the blank key for off and the asterisk key for on. Having the same
key with different shading for on and off has always struck me as confusing.

On Thu, Oct 1, 2015 at 9:02 AM, Mirabai Knight notifications@github.com
wrote:

I'm fond of Inconsolata, when it comes to fixed width fonts.

On Thu, Oct 1, 2015 at 11:35 AM, Ted Morin notifications@github.com
wrote:

Could I see a render of the P in Roboto Mono? Might be good to decide on
a
nice fixed width font for strokes in our art.


Reply to this email directly or view it on GitHub
<
#263 (comment)

.

Mirabai Knight, CCP, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com


Reply to this email directly or view it on GitHub
#263 (comment)
.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Jan 30, 2016

Member

Just thinking that if we are to support more versions and different layouts, it might be best to avoid being layout specific. I like the single keys because they don't have an inherent layout. Is there some sort of universal symbol for chording?

Member

morinted commented Jan 30, 2016

Just thinking that if we are to support more versions and different layouts, it might be best to avoid being layout specific. I like the single keys because they don't have an inherent layout. Is there some sort of universal symbol for chording?

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 16, 2016

Member

I'll try that out next.

Member

morinted commented Feb 16, 2016

I'll try that out next.

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 16, 2016

Member

I think having the checkbox text change as the box is un/checked is a bit confusing. Whatever the text, though, the checkbox is a lot clearer than the old button, especially with the window title to confirm what happens when you un/tick the box.

Member

jeremy-w commented Feb 16, 2016

I think having the checkbox text change as the box is un/checked is a bit confusing. Whatever the text, though, the checkbox is a lot clearer than the old button, especially with the window title to confirm what happens when you un/tick the box.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 17, 2016

Member

Okay, @benoit-pierre suggested maybe using groups, so I decided to test that out.

screen shot 2016-02-17 at 2 04 33 pm

screen shot 2016-02-17 at 2 04 00 pm

screen shot 2016-02-17 at 2 03 58 pm

Member

morinted commented Feb 17, 2016

Okay, @benoit-pierre suggested maybe using groups, so I decided to test that out.

screen shot 2016-02-17 at 2 04 33 pm

screen shot 2016-02-17 at 2 04 00 pm

screen shot 2016-02-17 at 2 03 58 pm

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 17, 2016

Member

Clearly needs a little refinement on Windows:

capture

Member

morinted commented Feb 17, 2016

Clearly needs a little refinement on Windows:

capture

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 17, 2016

Member

I like the way that shows the toggle, though. It’s very clear. It’s weird to me to have the button be below the static text, though; I want to be able to scan across the top line and see important buttons, and then information (current state, About… button) in the line below.

Actually, everything below the first line would be info, since machine status is just info, too.

Jeremy W. Sherman
https://jeremywsherman.com/ https://jeremywsherman.com/

El 17 feb 2016, a las 14:14, Ted Morin notifications@github.com escribió:

Clearly needs a little refinement on Windows:

https://cloud.githubusercontent.com/assets/5840970/13121569/963e1cea-d567-11e5-98ef-e8f75ece6b13.PNG

Reply to this email directly or view it on GitHub #263 (comment).

Member

jeremy-w commented Feb 17, 2016

I like the way that shows the toggle, though. It’s very clear. It’s weird to me to have the button be below the static text, though; I want to be able to scan across the top line and see important buttons, and then information (current state, About… button) in the line below.

Actually, everything below the first line would be info, since machine status is just info, too.

Jeremy W. Sherman
https://jeremywsherman.com/ https://jeremywsherman.com/

El 17 feb 2016, a las 14:14, Ted Morin notifications@github.com escribió:

Clearly needs a little refinement on Windows:

https://cloud.githubusercontent.com/assets/5840970/13121569/963e1cea-d567-11e5-98ef-e8f75ece6b13.PNG

Reply to this email directly or view it on GitHub #263 (comment).

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 17, 2016

Member

So would you recommend I try three groups, one per row?

  • Settings
  • Output
  • Machine
Member

morinted commented Feb 17, 2016

So would you recommend I try three groups, one per row?

  • Settings
  • Output
  • Machine
@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 18, 2016

Member

All right, here's what I came up with, I think this may be my favorite.

screen shot 2016-02-17 at 10 09 55 pm

screen shot 2016-02-17 at 10 10 45 pm

screen shot 2016-02-17 at 10 05 15 pm

Member

morinted commented Feb 18, 2016

All right, here's what I came up with, I think this may be my favorite.

screen shot 2016-02-17 at 10 09 55 pm

screen shot 2016-02-17 at 10 10 45 pm

screen shot 2016-02-17 at 10 05 15 pm

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Feb 18, 2016

Member

Yeah, this is really good. Clean and unambiguous.

On Wed, Feb 17, 2016 at 10:12 PM, Ted Morin notifications@github.com
wrote:

All right, here's what I came up with, I think this may be my favorite.

[image: screen shot 2016-02-17 at 10 09 55 pm]
https://cloud.githubusercontent.com/assets/5840970/13132723/45162798-d5c3-11e5-948c-f6eaf3a872d5.png

[image: screen shot 2016-02-17 at 10 10 45 pm]
https://cloud.githubusercontent.com/assets/5840970/13132728/515cbcf6-d5c3-11e5-8654-70fa15d527a0.png

[image: screen shot 2016-02-17 at 10 05 15 pm]
https://cloud.githubusercontent.com/assets/5840970/13132665/cf659614-d5c2-11e5-8c95-ba6db75f1bda.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CRC, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Feb 18, 2016

Yeah, this is really good. Clean and unambiguous.

On Wed, Feb 17, 2016 at 10:12 PM, Ted Morin notifications@github.com
wrote:

All right, here's what I came up with, I think this may be my favorite.

[image: screen shot 2016-02-17 at 10 09 55 pm]
https://cloud.githubusercontent.com/assets/5840970/13132723/45162798-d5c3-11e5-948c-f6eaf3a872d5.png

[image: screen shot 2016-02-17 at 10 10 45 pm]
https://cloud.githubusercontent.com/assets/5840970/13132728/515cbcf6-d5c3-11e5-8654-70fa15d527a0.png

[image: screen shot 2016-02-17 at 10 05 15 pm]
https://cloud.githubusercontent.com/assets/5840970/13132665/cf659614-d5c2-11e5-8c95-ba6db75f1bda.png


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CRC, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 18, 2016

Member

Here's the Windows version.

capture

Member

morinted commented Feb 18, 2016

Here's the Windows version.

capture

@stenoknight

This comment has been minimized.

Show comment
Hide comment
@stenoknight

stenoknight Feb 18, 2016

Member

Nice!

On Wed, Feb 17, 2016 at 10:17 PM, Ted Morin notifications@github.com
wrote:

Here's the Windows version.

[image: capture]
https://cloud.githubusercontent.com/assets/5840970/13132807/0395694a-d5ab-11e5-9bb5-e2de013f4c67.PNG


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CRC, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

Member

stenoknight commented Feb 18, 2016

Nice!

On Wed, Feb 17, 2016 at 10:17 PM, Ted Morin notifications@github.com
wrote:

Here's the Windows version.

[image: capture]
https://cloud.githubusercontent.com/assets/5840970/13132807/0395694a-d5ab-11e5-9bb5-e2de013f4c67.PNG


Reply to this email directly or view it on GitHub
#263 (comment)
.

Mirabai Knight, CRC, RDR
StenoKnight CART Services
917 576 4989
mkk@stenoknight.com
http://stenoknight.com

@gcr

This comment has been minimized.

Show comment
Hide comment
@gcr

gcr Feb 18, 2016

This is really nice! I like the new interface.

Is there a purpose of having the "Machine" group be separate? For example, we could just have the output label say "Enabled (Treal)", "Enabled (NKRO Keyboard)", "Disabled (Treal)", or "Machine Disconnected (Treal)". The only reason why I mention it is because the colored light gives weight to the "Machine" group, so the "Machine" group feels more important than the "Output" group.

Probably not a big deal. Just curious.

gcr commented Feb 18, 2016

This is really nice! I like the new interface.

Is there a purpose of having the "Machine" group be separate? For example, we could just have the output label say "Enabled (Treal)", "Enabled (NKRO Keyboard)", "Disabled (Treal)", or "Machine Disconnected (Treal)". The only reason why I mention it is because the colored light gives weight to the "Machine" group, so the "Machine" group feels more important than the "Output" group.

Probably not a big deal. Just curious.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 18, 2016

Member

@gcr the hardest part of merging them for me was indicating output status versus machine status. The output header emphasizes what enable and disable mean.

Member

morinted commented Feb 18, 2016

@gcr the hardest part of merging them for me was indicating output status versus machine status. The output header emphasizes what enable and disable mean.

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 18, 2016

Member

Just noticed that the connection light is top-aligned with the text vs vertically centered.

We could equalize the weight by throwing the same red/green/gray light in the output row, too, to signal output status the same as we do machine, or increase the output status weight by moving the light there and dropping it from the machine.

I could also see not showing the light unless it's red. No need to call-out the normal, everything-is-fine state! :)

All those are minor improvements though. Let's get this merged and in people's hands.

Member

jeremy-w commented Feb 18, 2016

Just noticed that the connection light is top-aligned with the text vs vertically centered.

We could equalize the weight by throwing the same red/green/gray light in the output row, too, to signal output status the same as we do machine, or increase the output status weight by moving the light there and dropping it from the machine.

I could also see not showing the light unless it's red. No need to call-out the normal, everything-is-fine state! :)

All those are minor improvements though. Let's get this merged and in people's hands.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 18, 2016

Member

It is vertically aligned in the pull request that is open.
On Feb 18, 2016 10:33 AM, "Jeremy W. Sherman" notifications@github.com
wrote:

Just noticed that the connection light is top-aligned with the text vs
vertically centered.

We could equalize the weight by throwing the same red/green/gray light in
the output row, too, to signal output status the same as we do machine, or
increase the output status weight by moving the light there and dropping it
from the machine.

I could also see not showing the light unless it's red. No need to
call-out the normal, everything-is-fine state! :)

All those are minor improvements though. Let's get this merged and in
people's hands.


Reply to this email directly or view it on GitHub
#263 (comment)
.

Member

morinted commented Feb 18, 2016

It is vertically aligned in the pull request that is open.
On Feb 18, 2016 10:33 AM, "Jeremy W. Sherman" notifications@github.com
wrote:

Just noticed that the connection light is top-aligned with the text vs
vertically centered.

We could equalize the weight by throwing the same red/green/gray light in
the output row, too, to signal output status the same as we do machine, or
increase the output status weight by moving the light there and dropping it
from the machine.

I could also see not showing the light unless it's red. No need to
call-out the normal, everything-is-fine state! :)

All those are minor improvements though. Let's get this merged and in
people's hands.


Reply to this email directly or view it on GitHub
#263 (comment)
.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 18, 2016

Member

Here's my latest try, with radio buttons. It's either this or the label + button above. Which do you prefer?

Radio buttons versus label and button

Enabled

screen shot 2016-02-18 at 5 50 31 pm

screen shot 2016-02-17 at 11 08 28 pm

Disabled

screen shot 2016-02-18 at 5 50 34 pm

screen shot 2016-02-17 at 11 08 31 pm

Disconnected

screen shot 2016-02-18 at 5 50 38 pm

screen shot 2016-02-17 at 11 08 36 pm

Member

morinted commented Feb 18, 2016

Here's my latest try, with radio buttons. It's either this or the label + button above. Which do you prefer?

Radio buttons versus label and button

Enabled

screen shot 2016-02-18 at 5 50 31 pm

screen shot 2016-02-17 at 11 08 28 pm

Disabled

screen shot 2016-02-18 at 5 50 34 pm

screen shot 2016-02-17 at 11 08 31 pm

Disconnected

screen shot 2016-02-18 at 5 50 38 pm

screen shot 2016-02-17 at 11 08 36 pm

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 18, 2016

Member

Disconnected is clearer with the button style, but otherwise, the radio buttons feel much more natural to me. My location memory will lead me to just click by left side or right, vs needing to read to decide of I should click to switch modes or not.

So, 1 vote for radio buttons!

Jeremy W. Sherman
http://jeremywsherman.com/

El 18-02-2016, a las 17:54, Ted Morin notifications@github.com escribió:

Here's my latest try, with radio buttons. It's either this or the label + button above. Which do you prefer?

Radio buttons versus label and button

Enabled

Disabled

Disconnected


Reply to this email directly or view it on GitHub.

Member

jeremy-w commented Feb 18, 2016

Disconnected is clearer with the button style, but otherwise, the radio buttons feel much more natural to me. My location memory will lead me to just click by left side or right, vs needing to read to decide of I should click to switch modes or not.

So, 1 vote for radio buttons!

Jeremy W. Sherman
http://jeremywsherman.com/

El 18-02-2016, a las 17:54, Ted Morin notifications@github.com escribió:

Here's my latest try, with radio buttons. It's either this or the label + button above. Which do you prefer?

Radio buttons versus label and button

Enabled

Disabled

Disconnected


Reply to this email directly or view it on GitHub.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 19, 2016

Member

Okay, agreed, I like the radio buttons because of the positional view, thanks for the suggestion @Achim63. I'll update my PR and hopefully we can go back to focusing on more art assets. Where's the gradient on that logo haha :P

Member

morinted commented Feb 19, 2016

Okay, agreed, I like the radio buttons because of the positional view, thanks for the suggestion @Achim63. I'll update my PR and hopefully we can go back to focusing on more art assets. Where's the gradient on that logo haha :P

@Achim63

This comment has been minimized.

Show comment
Hide comment
@Achim63

Achim63 Feb 19, 2016

Thanks for pointing me to this thread - I missed it up to now. And yes, my vote also definitely goes to the radio buttons. I don't even think we'd need to grey them out if the machine is not connected, since those are not really directly related.
I can imagine that there could be output without a connected machine - e.g. if a way to "replay" was implemented later, as in "repeat last sentence/paragraph/session". Or if we had "start/stop 'macro' recording" strokes, the result of which could be output via a menu item with a (qwerty) keyboard shortcut or a "play" button later, even if the machine was disconnected in between.

Achim63 commented Feb 19, 2016

Thanks for pointing me to this thread - I missed it up to now. And yes, my vote also definitely goes to the radio buttons. I don't even think we'd need to grey them out if the machine is not connected, since those are not really directly related.
I can imagine that there could be output without a connected machine - e.g. if a way to "replay" was implemented later, as in "repeat last sentence/paragraph/session". Or if we had "start/stop 'macro' recording" strokes, the result of which could be output via a menu item with a (qwerty) keyboard shortcut or a "play" button later, even if the machine was disconnected in between.

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 19, 2016

Member

Disabling the button group on disconnect is good.

Staying enabled would suggest we change machines to keyboard when you disconnect your writer. Which also isn't guaranteed connected - I've used machines without any keyboard briefly before. (A mouse plus on-screen virtual keyboard works in a pinch.)

Jeremy W. Sherman
http://jeremywsherman.com/

El 19-02-2016, a las 02:58, Achim notifications@github.com escribió:

Thanks for pointing me to this thread - I missed it up to now. And yes, my vote also definitely goes to the radio buttons. I don't even think we'd need to grey them out if the machine is not connected, since those are not really directly related.
I can imagine that there could be output without a connected machine - e.g. if a way to "replay" was implemented later, as in "repeat last sentence/paragraph/session". Or if we had "start/stop 'macro' recording" strokes, the result of which could be output via a menu item with a (qwerty) keyboard shortcut or a "play" button later, even if the machine was disconnected in between.


Reply to this email directly or view it on GitHub.

Member

jeremy-w commented Feb 19, 2016

Disabling the button group on disconnect is good.

Staying enabled would suggest we change machines to keyboard when you disconnect your writer. Which also isn't guaranteed connected - I've used machines without any keyboard briefly before. (A mouse plus on-screen virtual keyboard works in a pinch.)

Jeremy W. Sherman
http://jeremywsherman.com/

El 19-02-2016, a las 02:58, Achim notifications@github.com escribió:

Thanks for pointing me to this thread - I missed it up to now. And yes, my vote also definitely goes to the radio buttons. I don't even think we'd need to grey them out if the machine is not connected, since those are not really directly related.
I can imagine that there could be output without a connected machine - e.g. if a way to "replay" was implemented later, as in "repeat last sentence/paragraph/session". Or if we had "start/stop 'macro' recording" strokes, the result of which could be output via a menu item with a (qwerty) keyboard shortcut or a "play" button later, even if the machine was disconnected in between.


Reply to this email directly or view it on GitHub.

@Achim63

This comment has been minimized.

Show comment
Hide comment
@Achim63

Achim63 Feb 19, 2016

I don't get that - the machine area already says that it's disconnected. If it were connected to a qwerty keyboard it would say so, i.e. show "NKRO keyboard connected".
And I don't see why I shouldn't be allowed to switch output to ON or OFF while I don't have my machine switched on (e.g. if I intend to clear the machine's buffer as a first thing after switching it on, which would send out all of the internal memory to Plover, so I'd want to make sure Plover wont output that data).

Achim63 commented Feb 19, 2016

I don't get that - the machine area already says that it's disconnected. If it were connected to a qwerty keyboard it would say so, i.e. show "NKRO keyboard connected".
And I don't see why I shouldn't be allowed to switch output to ON or OFF while I don't have my machine switched on (e.g. if I intend to clear the machine's buffer as a first thing after switching it on, which would send out all of the internal memory to Plover, so I'd want to make sure Plover wont output that data).

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 19, 2016

Member

I have found it misleading that you can change whether Plover is outputting
or not while the machine is disconnected, it suggests that everything is
fine. At least now it's clear that nothing will happen while your machine
is not connected.
On Feb 19, 2016 7:40 AM, "Achim" notifications@github.com wrote:

I don't get that - the machine area already says that it's disconnected.
If it were connected to a qwerty keyboard it would say so, i.e. show "NKRO
keyboard connected".
And I don't see why I shouldn't be allowed to switch output to ON or OFF
while I don't have my machine switched on (e.g. if I intend to clear the
machine's buffer as a first thing after switching it on, which would send
out all of the internal memory to Plover, so I'd want to make sure Plover
wont output that data).


Reply to this email directly or view it on GitHub
#263 (comment)
.

Member

morinted commented Feb 19, 2016

I have found it misleading that you can change whether Plover is outputting
or not while the machine is disconnected, it suggests that everything is
fine. At least now it's clear that nothing will happen while your machine
is not connected.
On Feb 19, 2016 7:40 AM, "Achim" notifications@github.com wrote:

I don't get that - the machine area already says that it's disconnected.
If it were connected to a qwerty keyboard it would say so, i.e. show "NKRO
keyboard connected".
And I don't see why I shouldn't be allowed to switch output to ON or OFF
while I don't have my machine switched on (e.g. if I intend to clear the
machine's buffer as a first thing after switching it on, which would send
out all of the internal memory to Plover, so I'd want to make sure Plover
wont output that data).


Reply to this email directly or view it on GitHub
#263 (comment)
.

@Achim63

This comment has been minimized.

Show comment
Hide comment
@Achim63

Achim63 Feb 19, 2016

There's a big red "LED" just below, and you'd think all is fine? Mkay ...

Achim63 commented Feb 19, 2016

There's a big red "LED" just below, and you'd think all is fine? Mkay ...

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 19, 2016

Member

Yes, especially previously because there was a bigger green "P" just above, and I'd think all is fine. As a new user playing around with settings, I'd sometimes end up there, a little confused about how it works.

At least now the status indicator is subtle enough that it won't draw your attention, and in the disabled state it is exceedingly clear that Plover won't do anything until you 1) go to the configuration dialogue and change back to another machine or 2) connect your selected machine.

In any case, I think I'll stop tweaking this UI now, pending feedback after a release. One can only spend so many days rejigging a layout >.<

Member

morinted commented Feb 19, 2016

Yes, especially previously because there was a bigger green "P" just above, and I'd think all is fine. As a new user playing around with settings, I'd sometimes end up there, a little confused about how it works.

At least now the status indicator is subtle enough that it won't draw your attention, and in the disabled state it is exceedingly clear that Plover won't do anything until you 1) go to the configuration dialogue and change back to another machine or 2) connect your selected machine.

In any case, I think I'll stop tweaking this UI now, pending feedback after a release. One can only spend so many days rejigging a layout >.<

@Achim63

This comment has been minimized.

Show comment
Hide comment
@Achim63

Achim63 Feb 19, 2016

Yep, let's wait and see if new users get along with it. If there ever will be some sort of a "playback" feature it could be changed then.

Achim63 commented Feb 19, 2016

Yep, let's wait and see if new users get along with it. If there ever will be some sort of a "playback" feature it could be changed then.

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 26, 2016

Member

screen shot 2016-02-25 at 7 22 27 pm

screen shot 2016-02-25 at 7 23 18 pm

screen shot 2016-02-25 at 7 23 33 pm

32x32
64x64
128x128

Exported .ai, .svg

Member

morinted commented Feb 26, 2016

screen shot 2016-02-25 at 7 22 27 pm

screen shot 2016-02-25 at 7 23 18 pm

screen shot 2016-02-25 at 7 23 33 pm

32x32
64x64
128x128

Exported .ai, .svg

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Feb 26, 2016

Member

And perhaps rounding the corners?
screen shot 2016-02-25 at 7 31 58 pm

Member

morinted commented Feb 26, 2016

And perhaps rounding the corners?
screen shot 2016-02-25 at 7 31 58 pm

@stenoknight
@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Feb 26, 2016

Member

👍🏼 This is wonderful. I am looking forward to seeing this in my Dock!

Jeremy W. Sherman
http://jeremywsherman.com/

El 25-02-2016, a las 19:32, Ted Morin notifications@github.com escribió:

And perhaps rounding the corners?


Reply to this email directly or view it on GitHub.

Member

jeremy-w commented Feb 26, 2016

👍🏼 This is wonderful. I am looking forward to seeing this in my Dock!

Jeremy W. Sherman
http://jeremywsherman.com/

El 25-02-2016, a las 19:32, Ted Morin notifications@github.com escribió:

And perhaps rounding the corners?


Reply to this email directly or view it on GitHub.

@Achim63

This comment has been minimized.

Show comment
Hide comment
@Achim63

Achim63 Feb 26, 2016

Yes, the version with the slightly rounded corners is the most attractive, IMHO. A little bit of shadow as the Apple icons have would be nice (light coming straight from the top would seem correct, as can be seen on the System Preferences icon and also on Illustrator).

Achim63 commented Feb 26, 2016

Yes, the version with the slightly rounded corners is the most attractive, IMHO. A little bit of shadow as the Apple icons have would be nice (light coming straight from the top would seem correct, as can be seen on the System Preferences icon and also on Illustrator).

@morinted morinted removed this from the plover-next milestone Mar 4, 2016

@jeremy-w

This comment has been minimized.

Show comment
Hide comment
@jeremy-w

jeremy-w Apr 26, 2016

Member

Has this issue been resolved now that the icon has been updated? If not, what remains to be done?

Member

jeremy-w commented Apr 26, 2016

Has this issue been resolved now that the icon has been updated? If not, what remains to be done?

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Apr 26, 2016

Member

I think this is more of a discussion thread, I welcome any new
contributions. It's not so much a "solved" thing.

On Mon, Apr 25, 2016 at 9:55 PM Jeremy W. Sherman notifications@github.com
wrote:

Has this issue been resolved now that the icon has been updated? If not,
what remains to be done?


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#263 (comment)

Member

morinted commented Apr 26, 2016

I think this is more of a discussion thread, I welcome any new
contributions. It's not so much a "solved" thing.

On Mon, Apr 25, 2016 at 9:55 PM Jeremy W. Sherman notifications@github.com
wrote:

Has this issue been resolved now that the icon has been updated? If not,
what remains to be done?


You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#263 (comment)

@morinted

This comment has been minimized.

Show comment
Hide comment
@morinted

morinted Aug 12, 2016

Member

Benoit Pierre has been working like crazy, migrating Plover to Python 3. He's also completely rewritten the UI in QT instead of WX. At the same time, we are reimagining the interface and I've been playing with the icon set. Feel free to pop in and look at #571 to get an idea of the UI and art changes.

Member

morinted commented Aug 12, 2016

Benoit Pierre has been working like crazy, migrating Plover to Python 3. He's also completely rewritten the UI in QT instead of WX. At the same time, we are reimagining the interface and I've been playing with the icon set. Feel free to pop in and look at #571 to get an idea of the UI and art changes.

@benoit-pierre benoit-pierre added this to the plover-next milestone Mar 2, 2018

@SeaLiteral

This comment has been minimized.

Show comment
Hide comment
@SeaLiteral

SeaLiteral Mar 5, 2018

An asterisk is a star character, and some flowers look like stars, so I thought I'd try to see if I could make the asterisk look more like a star. I've tried to follow those Tango guidelines that @gcr mentioned above, but I made four variants. Other colours might work too though, but I think brown would look old-fashioned, and the colour of the asterisk itself should be different enough from that of the keycap.
flower-asterisks

Here's the source code (in Python) which generates four SVG files in different styles:

import math

# Constants for the different icon styles
STYLE_PLAIN=0 # Plain, has borders but no shading (should fit on Mac)
STYLE_FANCY=1 # With borders and a gradient (should fit on Linux)
STYLE_HI_CONTRAST=2 # Black keycap with white borders and a white asterisk
STYLE_MINI=3 # Minimal style with no borders

VARIANT_RED=0
VARIANT_GREEN=1
VARIANT_BLUE=2
VARIANT_YELLOW=3
VARIANT_BROWN=4
VARIANT_PURPLE=5
VARIANT_ORANGE=6

def moveDiagonally(shape, amount):
    '''Takes some SVG in, and outputs it with a constant
added to all numbers. Used to offset shadows.'''
    r=''
    for line in shape.splitlines():
        processedText=''
        processedNumber=''
        for ch in line:
            if(ch in '0123456789-'):
                processedNumber+=ch
            elif(processedNumber):
                processedText+=str(int(processedNumber)+amount)+ch
                processedNumber=''
            else:
                processedText+=ch
        if(processedNumber):
            processedText+=str(int(processedNumber)+amount)
        r+=processedText+'\n'
    return(r)

def fetchColour(shade, variant):
    if(variant==VARIANT_RED):
        # Using the light orange colour on the shadow on the star
        return('#'+('ef2929 cc0000 a40000 fcaf3e'.split()[shade]))
    if(variant==VARIANT_GREEN):
        return('#'+('8ae234 73d216 4e9a06 fce94f'.split()[shade]))
    if(variant==VARIANT_BLUE):
        return('#'+('729fcf 3465a4 204a87 729fcf'.split()[shade]))
    if(variant==VARIANT_YELLOW):
        # The shadow on the star is taken from brown
        return('#'+('fce94f edd400 c4a000 e9b96e'.split()[shade]))
    if(variant==VARIANT_BROWN):
        return('#'+('e9b96e c17d11 8f5902 e9b96e'.split()[shade]))
    if(variant==VARIANT_PURPLE):
        # I used c57fa8 on the star shadow to make it seem lighter
        return('#'+('ad7fa8 75507b 5c3566 c57fa8'.split()[shade]))
    if(variant==VARIANT_ORANGE):
        return('#'+('fcaf3e f57900 ce5c00 fce94f'.split()[shade]))
    raise IndexError ('No such variant')

def makeHeader(style=STYLE_PLAIN, variant=VARIANT_RED):
    svgStart='''<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 400 400">
'''
    grad=('''<linearGradient id="grad"
                gradientTransform="rotate(40 0.5 0.5)">
        <stop offset="0" stop-color="'''+
          fetchColour(1,variant)+
          '''"/>
        <stop offset="0.5" stop-color="'''+
          fetchColour(2,variant)+
          '''"/>
        <stop offset="1" stop-color="'''+
          fetchColour(1,variant)+
          '''"/>
    </linearGradient>''')

    shadow='''<clipPath id="shadow">
        <path d="M 25 180
            C
            30 220
            180 480
            250 190
            C
            280 90
            400 80
            390 100
            L 390 390
            L 10 390
            L 25 180"/>
    </clipPath>
    '''
    asteriskShadow=moveDiagonally(shadow,-5)
    asteriskShadow=asteriskShadow.replace('shadow','asteriskShadow')

    capCoords='''M 20 36
    C
    -4 490
    404 490
    380 36
    380 61
    20 61
    20 36'''

    keyCap=('<path d="'+capCoords+
            '" stroke="'+
            fetchColour(2, variant)+
            '" fill="'+
            fetchColour(1, variant)+
            '" stroke-width="5"/>\n')

    keyCap2=('<path d="'+capCoords+
            '" stroke="'+
            fetchColour(2, variant)+
            '" fill="url(#grad)" stroke-width="5"'+
            ' clip-path="url(#shadow)"/>\n')
    keyCapBlack=('<path d="'+capCoords+
            '" stroke="#ffffff" fill="#000000" stroke-width="15"/>\n')
    keyCapNoOutline=('<path d="'+capCoords+
            '" stroke="none" fill="'+
            fetchColour(1, variant)+
            '"/>\n')
    
    r=svgStart
    if(style==STYLE_FANCY):r+=grad+shadow+asteriskShadow
    if(style==STYLE_HI_CONTRAST): r+=keyCapBlack
    elif(style==STYLE_MINI):
        r+=keyCapNoOutline
    else: r+=keyCap
    if(style==STYLE_FANCY): r+=keyCap2
    return(r)

def rStr(num):
    return(str(round(num,5)))

def makeStarAngle(p0,p1,p2,first, centre):
    '''Make a single point of a star.
p1 is the actual point, p0 and p2 are the points it connects to.
'''
    # Constants: edit them to make it more like a star
    #            or more like a flower
    smallDistance=2
    largeDistance=2.5
    toward0=(p0[0]-centre[0], p0[1]-centre[1])
    away0=(centre[0]+toward0[0]*smallDistance,
           centre[1]+toward0[1]*smallDistance)
    further0=(centre[0]+toward0[0]*largeDistance,
              centre[1]+toward0[1]*largeDistance)

    toward2=(p2[0]-centre[0], p2[1]-centre[1])
    away2=(centre[0]+toward2[0]*smallDistance,
           centre[1]+toward2[1]*smallDistance)
    further2=(centre[0]+toward2[0]*largeDistance,
              centre[1]+toward2[1]*largeDistance)
    
    r=''
    if(first): r='M '+rStr(p0[0])+' '+rStr(p0[1])+'\n'
    r+='C '+rStr(away0[0])+' '+rStr(away0[1])+'\n'
    r+=rStr(further0[0])+' '+rStr(further0[1])+'\n'
    r+=rStr(p1[0])+' '+rStr(p1[1])+'\n'
    r+='C '+rStr(further2[0])+' '+rStr(further2[1])+'\n'
    r+=rStr(away2[0])+' '+rStr(away2[1])+'\n'
    r+=rStr(p2[0])+' '+rStr(p2[1])+'\n'
    return(r)

def makeStar(circleCentre):
    r='<path d="'
    ptFirst=0
    ptLater=1
    pointType=ptFirst
    isFirst=True
    starSize=5 # Number of points
    starScaleBig=100 # Size of the outside
    starScaleSmall=23 #Size of the inside
        # The ratio between the inside and outside size
        #  decides how pointy the star becomes
    halfStarSize=starSize/2.0
    precision=5 # How many digits to allow when rounding
    for i in range(starSize):
        i2=i-math.pi*2/starSize
        j=(i2*math.pi/halfStarSize)
        k=(i2*math.pi/halfStarSize)-(math.pi/starSize)
        l=(i2*math.pi/halfStarSize)+(math.pi/starSize)
        centreX=(round(math.cos(j),precision)*starScaleBig)+circleCentre[0]
        centreY=(round(math.sin(j),precision)*starScaleBig)+circleCentre[1]
        leftX=(round(math.cos(k),precision)*starScaleSmall)+circleCentre[0]
        leftY=(round(math.sin(k),precision)*starScaleSmall)+circleCentre[1]
        rightX=(round(math.cos(l),precision)*starScaleSmall)+circleCentre[0]
        rightY=(round(math.sin(l),precision)*starScaleSmall)+circleCentre[1]
        p0=(leftX,leftY)
        p1=(centreX,centreY)
        p2=(rightX,rightY)
        r+=makeStarAngle(p0, p1, p2, isFirst, circleCentre)
        isFirst=False
    return(r)

def flowerAsterisk(style=STYLE_PLAIN, variant=VARIANT_RED):
    '''Generate the flower (without the keycap, header and footer)
'''
    svgPathEnd1=('" stroke="'+fetchColour(2,variant)+
                 '" fill="#eeeeec" stroke-width="3"\n'+
                 'stroke-linecap="round"/>')
    svgPathEnd2=('" stroke="'+
                 fetchColour(2,variant)+'" fill="'+
                 fetchColour(3,variant)+'" stroke-width="3"\n'+
                 'stroke-linecap="round" clip-path="url(#asteriskShadow)"/>')
    if(style==STYLE_FANCY):
        svgPathEnd1='''" stroke="#555753" fill="#eeeeec" stroke-width="3"
stroke-linecap="round"/>'''
    elif(style==STYLE_HI_CONTRAST):
        svgPathEnd1='''" fill="#ffffff" stroke="none"/>'''
    points=makeStar((200,200)) # Put it in the centre of the image
    if(style==STYLE_MINI):
        svgPathEnd1='''" stroke="none" fill="#eeeeec"/>'''
    r=points+svgPathEnd1
    if(style==STYLE_FANCY): r+=points+svgPathEnd2
    return(r)

def makeIcon(style=STYLE_PLAIN, variant=VARIANT_GREEN):
    '''Return SVG code for the icon
The style is there to adjust the icon to fit on different operating systems,
and there's also a high-contrast option. The list can be found near the start
of this file.'''
    svgEnd='</svg>'
    return(makeHeader(style, variant)+flowerAsterisk(style, variant)+svgEnd)

for style in [('fancy', STYLE_FANCY),
              ('plain', STYLE_PLAIN),
              ('minimal', STYLE_MINI),
              ('hi-contrast', STYLE_HI_CONTRAST)]:
    with open('asterisk-'+style[0]+'.svg','w')as outFile:
        r=makeIcon(style[1])
        outFile.write(r)

SeaLiteral commented Mar 5, 2018

An asterisk is a star character, and some flowers look like stars, so I thought I'd try to see if I could make the asterisk look more like a star. I've tried to follow those Tango guidelines that @gcr mentioned above, but I made four variants. Other colours might work too though, but I think brown would look old-fashioned, and the colour of the asterisk itself should be different enough from that of the keycap.
flower-asterisks

Here's the source code (in Python) which generates four SVG files in different styles:

import math

# Constants for the different icon styles
STYLE_PLAIN=0 # Plain, has borders but no shading (should fit on Mac)
STYLE_FANCY=1 # With borders and a gradient (should fit on Linux)
STYLE_HI_CONTRAST=2 # Black keycap with white borders and a white asterisk
STYLE_MINI=3 # Minimal style with no borders

VARIANT_RED=0
VARIANT_GREEN=1
VARIANT_BLUE=2
VARIANT_YELLOW=3
VARIANT_BROWN=4
VARIANT_PURPLE=5
VARIANT_ORANGE=6

def moveDiagonally(shape, amount):
    '''Takes some SVG in, and outputs it with a constant
added to all numbers. Used to offset shadows.'''
    r=''
    for line in shape.splitlines():
        processedText=''
        processedNumber=''
        for ch in line:
            if(ch in '0123456789-'):
                processedNumber+=ch
            elif(processedNumber):
                processedText+=str(int(processedNumber)+amount)+ch
                processedNumber=''
            else:
                processedText+=ch
        if(processedNumber):
            processedText+=str(int(processedNumber)+amount)
        r+=processedText+'\n'
    return(r)

def fetchColour(shade, variant):
    if(variant==VARIANT_RED):
        # Using the light orange colour on the shadow on the star
        return('#'+('ef2929 cc0000 a40000 fcaf3e'.split()[shade]))
    if(variant==VARIANT_GREEN):
        return('#'+('8ae234 73d216 4e9a06 fce94f'.split()[shade]))
    if(variant==VARIANT_BLUE):
        return('#'+('729fcf 3465a4 204a87 729fcf'.split()[shade]))
    if(variant==VARIANT_YELLOW):
        # The shadow on the star is taken from brown
        return('#'+('fce94f edd400 c4a000 e9b96e'.split()[shade]))
    if(variant==VARIANT_BROWN):
        return('#'+('e9b96e c17d11 8f5902 e9b96e'.split()[shade]))
    if(variant==VARIANT_PURPLE):
        # I used c57fa8 on the star shadow to make it seem lighter
        return('#'+('ad7fa8 75507b 5c3566 c57fa8'.split()[shade]))
    if(variant==VARIANT_ORANGE):
        return('#'+('fcaf3e f57900 ce5c00 fce94f'.split()[shade]))
    raise IndexError ('No such variant')

def makeHeader(style=STYLE_PLAIN, variant=VARIANT_RED):
    svgStart='''<svg xmlns="http://www.w3.org/2000/svg"
width="100%" height="100%" viewBox="0 0 400 400">
'''
    grad=('''<linearGradient id="grad"
                gradientTransform="rotate(40 0.5 0.5)">
        <stop offset="0" stop-color="'''+
          fetchColour(1,variant)+
          '''"/>
        <stop offset="0.5" stop-color="'''+
          fetchColour(2,variant)+
          '''"/>
        <stop offset="1" stop-color="'''+
          fetchColour(1,variant)+
          '''"/>
    </linearGradient>''')

    shadow='''<clipPath id="shadow">
        <path d="M 25 180
            C
            30 220
            180 480
            250 190
            C
            280 90
            400 80
            390 100
            L 390 390
            L 10 390
            L 25 180"/>
    </clipPath>
    '''
    asteriskShadow=moveDiagonally(shadow,-5)
    asteriskShadow=asteriskShadow.replace('shadow','asteriskShadow')

    capCoords='''M 20 36
    C
    -4 490
    404 490
    380 36
    380 61
    20 61
    20 36'''

    keyCap=('<path d="'+capCoords+
            '" stroke="'+
            fetchColour(2, variant)+
            '" fill="'+
            fetchColour(1, variant)+
            '" stroke-width="5"/>\n')

    keyCap2=('<path d="'+capCoords+
            '" stroke="'+
            fetchColour(2, variant)+
            '" fill="url(#grad)" stroke-width="5"'+
            ' clip-path="url(#shadow)"/>\n')
    keyCapBlack=('<path d="'+capCoords+
            '" stroke="#ffffff" fill="#000000" stroke-width="15"/>\n')
    keyCapNoOutline=('<path d="'+capCoords+
            '" stroke="none" fill="'+
            fetchColour(1, variant)+
            '"/>\n')
    
    r=svgStart
    if(style==STYLE_FANCY):r+=grad+shadow+asteriskShadow
    if(style==STYLE_HI_CONTRAST): r+=keyCapBlack
    elif(style==STYLE_MINI):
        r+=keyCapNoOutline
    else: r+=keyCap
    if(style==STYLE_FANCY): r+=keyCap2
    return(r)

def rStr(num):
    return(str(round(num,5)))

def makeStarAngle(p0,p1,p2,first, centre):
    '''Make a single point of a star.
p1 is the actual point, p0 and p2 are the points it connects to.
'''
    # Constants: edit them to make it more like a star
    #            or more like a flower
    smallDistance=2
    largeDistance=2.5
    toward0=(p0[0]-centre[0], p0[1]-centre[1])
    away0=(centre[0]+toward0[0]*smallDistance,
           centre[1]+toward0[1]*smallDistance)
    further0=(centre[0]+toward0[0]*largeDistance,
              centre[1]+toward0[1]*largeDistance)

    toward2=(p2[0]-centre[0], p2[1]-centre[1])
    away2=(centre[0]+toward2[0]*smallDistance,
           centre[1]+toward2[1]*smallDistance)
    further2=(centre[0]+toward2[0]*largeDistance,
              centre[1]+toward2[1]*largeDistance)
    
    r=''
    if(first): r='M '+rStr(p0[0])+' '+rStr(p0[1])+'\n'
    r+='C '+rStr(away0[0])+' '+rStr(away0[1])+'\n'
    r+=rStr(further0[0])+' '+rStr(further0[1])+'\n'
    r+=rStr(p1[0])+' '+rStr(p1[1])+'\n'
    r+='C '+rStr(further2[0])+' '+rStr(further2[1])+'\n'
    r+=rStr(away2[0])+' '+rStr(away2[1])+'\n'
    r+=rStr(p2[0])+' '+rStr(p2[1])+'\n'
    return(r)

def makeStar(circleCentre):
    r='<path d="'
    ptFirst=0
    ptLater=1
    pointType=ptFirst
    isFirst=True
    starSize=5 # Number of points
    starScaleBig=100 # Size of the outside
    starScaleSmall=23 #Size of the inside
        # The ratio between the inside and outside size
        #  decides how pointy the star becomes
    halfStarSize=starSize/2.0
    precision=5 # How many digits to allow when rounding
    for i in range(starSize):
        i2=i-math.pi*2/starSize
        j=(i2*math.pi/halfStarSize)
        k=(i2*math.pi/halfStarSize)-(math.pi/starSize)
        l=(i2*math.pi/halfStarSize)+(math.pi/starSize)
        centreX=(round(math.cos(j),precision)*starScaleBig)+circleCentre[0]
        centreY=(round(math.sin(j),precision)*starScaleBig)+circleCentre[1]
        leftX=(round(math.cos(k),precision)*starScaleSmall)+circleCentre[0]
        leftY=(round(math.sin(k),precision)*starScaleSmall)+circleCentre[1]
        rightX=(round(math.cos(l),precision)*starScaleSmall)+circleCentre[0]
        rightY=(round(math.sin(l),precision)*starScaleSmall)+circleCentre[1]
        p0=(leftX,leftY)
        p1=(centreX,centreY)
        p2=(rightX,rightY)
        r+=makeStarAngle(p0, p1, p2, isFirst, circleCentre)
        isFirst=False
    return(r)

def flowerAsterisk(style=STYLE_PLAIN, variant=VARIANT_RED):
    '''Generate the flower (without the keycap, header and footer)
'''
    svgPathEnd1=('" stroke="'+fetchColour(2,variant)+
                 '" fill="#eeeeec" stroke-width="3"\n'+
                 'stroke-linecap="round"/>')
    svgPathEnd2=('" stroke="'+
                 fetchColour(2,variant)+'" fill="'+
                 fetchColour(3,variant)+'" stroke-width="3"\n'+
                 'stroke-linecap="round" clip-path="url(#asteriskShadow)"/>')
    if(style==STYLE_FANCY):
        svgPathEnd1='''" stroke="#555753" fill="#eeeeec" stroke-width="3"
stroke-linecap="round"/>'''
    elif(style==STYLE_HI_CONTRAST):
        svgPathEnd1='''" fill="#ffffff" stroke="none"/>'''
    points=makeStar((200,200)) # Put it in the centre of the image
    if(style==STYLE_MINI):
        svgPathEnd1='''" stroke="none" fill="#eeeeec"/>'''
    r=points+svgPathEnd1
    if(style==STYLE_FANCY): r+=points+svgPathEnd2
    return(r)

def makeIcon(style=STYLE_PLAIN, variant=VARIANT_GREEN):
    '''Return SVG code for the icon
The style is there to adjust the icon to fit on different operating systems,
and there's also a high-contrast option. The list can be found near the start
of this file.'''
    svgEnd='</svg>'
    return(makeHeader(style, variant)+flowerAsterisk(style, variant)+svgEnd)

for style in [('fancy', STYLE_FANCY),
              ('plain', STYLE_PLAIN),
              ('minimal', STYLE_MINI),
              ('hi-contrast', STYLE_HI_CONTRAST)]:
    with open('asterisk-'+style[0]+'.svg','w')as outFile:
        r=makeIcon(style[1])
        outFile.write(r)
@SeaLiteral

This comment has been minimized.

Show comment
Hide comment
@SeaLiteral

SeaLiteral Mar 5, 2018

I edited the above code to include multiple colour variants. Each variant can be shown in three styles: plain, fancy and minimalistic. Plain has coloured outlines around the keycap and around the asterisk, but no shading, fancy has those outlines as well and there's a gradient shadow in the bottom-right, and on the asterisk the shadow is slightly displaced and possibly coloured. Minimalistic has no outlines or shading. And there's also high-contrast which ignores the differences. The asterisks are white on coloured keycaps, which have big curves outwards in the bottom and smaller curves inwards at the top.
orange, purple, yellow, red green, blue and brown fancy icons, plus some smaller icons: plain purple, mini orange and black high contrast

I edited the above code to include multiple colour variants. Each variant can be shown in three styles: plain, fancy and minimalistic. Plain has coloured outlines around the keycap and around the asterisk, but no shading, fancy has those outlines as well and there's a gradient shadow in the bottom-right, and on the asterisk the shadow is slightly displaced and possibly coloured. Minimalistic has no outlines or shading. And there's also high-contrast which ignores the differences. The asterisks are white on coloured keycaps, which have big curves outwards in the bottom and smaller curves inwards at the top.
orange, purple, yellow, red green, blue and brown fancy icons, plus some smaller icons: plain purple, mini orange and black high contrast

@gdwaynewarner

This comment has been minimized.

Show comment
Hide comment
@gdwaynewarner

gdwaynewarner Mar 6, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment