ijprest / keyboard-layout-editor

Web application to enable the design & editing of keyboard layouts
http://www.keyboard-layout-editor.com/
Other
1.32k stars 246 forks source link

GMK colors are out of date. #169

Closed got1337skillz closed 5 years ago

got1337skillz commented 8 years ago

The gmk color options are out of date. Here is an image I got from GMK today. http://imgur.com/ILNnXOm

Is there a way to get this updated? color samples_gmk

iandoug commented 8 years ago

AFAIK IJP has a fancy tool that analyzes the light coming off the key, and turns it into a colour code. So he will need a set of keys (or plastic samples)... taking colours off web photos is not accurate. I'll see if they can send me the RGB values in the mean time, but I think last time I asked they didn't have them.

NiceAndCreamy commented 8 years ago

Any chance you could update the GMK pallet if I provide the RGB values? I tried to do it using the chrome HTML editor but once I change everything it doesn't allow me to add the colors to the keyboard.

iandoug commented 8 years ago

Sorry, I have now mailed my contact at GMK to ask if they have the actual RGB values, taking them off a jpg will "work" but won't be completely accurate.

You could always download the repo and run it locally, and then edit the file with the colours in. (colors.json). Note that AFAIK Ian Prest put the colour on the side of the key not the top.

Just noticed the note in the file re GMK"s keys : "These are samples from a picture posted on GeekHack. No attempt at color-correction has been made." ... so I suppose your suggestion may work. Let's just wait a day or so to see if GMK comes back to me.

I also need to hear from them if the previous range is discontinued.

Will revert.

Cheers, Ian

NiceAndCreamy commented 8 years ago

I believe the previous colors are discontinued because they have changed plastic manufactures. I changed the colors.json to samples pulled from the tops of the caps in the pictures above but I couldn't be arsed to get a local site running.

{ "name": "UN0001", "r":243, "g":255, "b":255 }, { "name": "CP", "r":235, "g":242, "b":250 }, { "name": "3K", "r":224, "g":233, "b":240 }, { "name": "2M", "r":215, "g":234, "b":248 }, { "name": "L9", "r":231, "g":241, "b":243 }, { "name": "U9", "r":197, "g":209, "b":209 }, { "name": "2B", "r":147, "g":165, "b":185 }, { "name": "CC", "r":114, "g":123, "b":130 }, { "name": "N9", "r":80, "g":93, "b":109 }, { "name": "CR", "r":39, "g":43, "b":54 }, { "name": "3B", "r":155, "g":197, "b":185 }, { "name": "AE", "r":91, "g":204, "b":88 }, { "name": "N7", "r":36, "g":167, "b":125 }, { "name": "UN6037", "r":25, "g":212, "b":247 }, { "name": "N5", "r":22, "g":263, "b":255 }, { "name": "V4", "r":13, "g":88, "b":216 }, { "name": "UN6046", "r":161, "g":128, "b":199 }, { "name": "3C", "r":241, "g":181, "b":181 }, { "name": "UN33656", "r":255, "g":104, "b":171 }, { "name": "V1", "r":201, "g":194, "b":176 }, { "name": "V2", "r":255, "g":146, "b":51 }, { "name": "N6", "r":247, "g":204, "b":37 }, { "name": "CV", "r":252, "g":229, "b":61 }

iandoug commented 8 years ago

GMK have come back to me, they're getting an engineer to get the proper RGB colour codes to send to me. Hopefully in the next few days.

NiceAndCreamy commented 8 years ago

Awesome, thanks so much.

NiceAndCreamy commented 8 years ago

Any update?

iandoug commented 8 years ago

Regret not yet, I'll send a followup next week.

iandoug commented 8 years ago

I followed up yesterday (apologies), my contact at GMK was on leave anyway and is back today. In the mean time I checked my mailbox today and wow, they had sent me a colour ring. I will see what results I get from "scanning' them.... else I'll have to make a plan like IJP did and get one of those fancy "get a colour" gadgets that uses a special light and electronics to determine an object's colour. Hopefully GMK will do that part for us and send me the RGB codes instead. :-)

iandoug commented 8 years ago

Scanning did not produce good results, I tried "colour analyser" apps on my phone but results were also not good. So resorted to taking pictures with a decent camera, that produces reasonable results. Done about half the keycaps, hope to have the rest done shortly. I'll send IJP a patch but he's been quiet lately so don't know when he will get it onto the live site. GMK sent me a link to their official pic of the keycaps, but the angle and lighting produce numerous colours on each surface, so I can't sample off that.

iandoug commented 8 years ago

BTW the stuff I'm working with is 35 colours, if I remember correctly... more than in your pic. Some are same as previous range.

potatobot8 commented 8 years ago

i cant wait for the new colors, im trying to make a mockup and updated colors would be great news :D

iandoug commented 8 years ago

These are the ones I have done so far. Still 9 to do. In a worst-case scenario you can manually set the colour on a key and they copy it to the others. Will try and finish this Tuesday. { "name" : "GMK 2016 (Alpha)", "href" : "https://uniqey.zendesk.com/hc/en-us/article_attachments/205091409/keycap_colors_2016.jpg", "description" : "The new codes are taken from photographs of the actual keys (not the one above). No attempt at color-correction has been made. Colors are reasonable for use, if not exactly accurate. Color codes for keys in previous collection were left unchanged for consistency.", "colors" : [ { "name": "2B", "r":133, "g":138, "b":141 }, { "name": "2M", "r":215, "g":225, "b":235 }, { "name": "3A", "r":135, "g":188, "b":158 }, { "name": "3B", "r":129, "g":162, "b":145 }, { "name": "3C", "r":216, "g":151, "b":147 }, { "name": "3K", "r":217, "g":220, "b":225 }, { "name": "AE", "r":101, "g":175, "b":76 }, { "name": "BJ", "r":154, "g":151, "b":144 }, { "name": "CB", "r":167, "g":163, "b":152 }, { "name": "CC", "r":108, "g":115, "b":107 }, { "name": "CR", "r":29, "g":51, "b":39 }, { "name": "CV", "r":253, "g":231, "b":49 }, { "name": "GE1", "r":196, "g":188, "b":43 }, { "name": "L9", "r":227, "g":229, "b":216 }, { "name": "MG1", "r":164, "g":45, "b":75 }, { "name": "N5", "r":0, "g":141, "b":234 }, { "name": "N6", "r":211, "g":161, "b":46 }, { "name": "N7", "r":5, "g":133, "b":80 }, { "name": "P3", "r":177, "g":73, "b":62 }, { "name": "RO1", "r":94, "g":24, "b":24 }, { "name": "RO2", "r":224, "g":80, "b":71 }, { "name": "U9", "r":185, "g":186, "b":180 }, { "name": "V1", "r":238, "g":73, "b":66 }, { "name": "V2", "r":219, "g":112, "b":60 }, { "name": "V4", "r":2, "g":85, "b":187 } ] }, ToDo: BR1, TU1, TU2, T9,R01,DY, CP, GR1, WS1

potatobot8 commented 8 years ago

Im really new here, how do i use those codes? :))

iandoug commented 8 years ago

For some reason the clever people who did HTML and CSS decided to have two different standards for specifying numbers... the numbers above are so-called RGB values, one each for Red, Green and Blue, on a scale of 0 - 255. There is an equivalent hex version for that, in the format #RRGGBB where each pair can range from 00 to FF hex (same as 0 to 255 decimal). So you will need to convert those numbers above to the hex version (until such time as we can get them loaded on the live site ... see below). Go here: http://hex.colorrrs.com/
and where it says RGB, type in a set of numbers from above, eg the last one would be 2,85,187 The site will show you the equivalent as #0255BB Now take that #0255BB and go to KLE, select a key, and on the Properties tab, paste that number into the Key Color field. You will have to rinse and repeat for each key, I'm afraid.

Regarding the new colours, I added in the ones I photographed, but when I was checking them I noticed two things:

  1. grays and whites render on screen a bit differently to the keycap. Not sure why, I used the same process for them as for the brighter colours. Have reshot them to see if I can get better results.
  2. the existing colour codes that IJP picked from an old photo do not look like the actual key colours ... so I have taken photos in sunlight with no flash, of all the keycaps, and need to load and check them. Need to do this in daylight else the glare from the screen gets in the way of accurate colour comparisons.

In the mean time I am happy with these: { "name": "BR1", "r":119, "g":74, "b":45 }, { "name": "CR", "r":29, "g":51, "b":39 }, { "name": "DY", "r":130, "g":105, "b":171 }, { "name": "N6", "r":211, "g":161, "b":46 }, { "name": "N7", "r":5, "g":133, "b":80 }, { "name": "RO1", "r":173, "g":69, "b":70 }, { "name": "RO2", "r":224, "g":80, "b":71 }, { "name": "V1", "r":238, "g":73, "b":66 }, { "name": "WS1", "r":238, "g":239, "b":234 }

Will try and load and test the rest tomorrow.

Cheers, Ian

NiceAndCreamy commented 8 years ago

Thanks so much for this, they don't have to be 100% perfect as GMK offers renders once you get your set finalized. This tool is just a good way to visualize your set and make quick changes too it while being in the ballpark for color.

iandoug commented 8 years ago

Mmm... do you perhaps have a URL with such a render?

thanks, Ian

NiceAndCreamy commented 8 years ago

Here is a recent one I found https://www.keyclack.com/wp-content/uploads/2016/08/M8Oyad8.jpg

iandoug commented 8 years ago

Thanks, that looks like a photo not a render (ie computer-generated). I was hoping to be able to get them to create such a render and then borrow the colour codes.

The 'photo' approach is not working too well .. colours do not come out accurate due to the plastic being shiny and reflecting the sunlight. So am busy with Plan B, which is to manually match the colour on screen to how it actually looks. Downside is that it's a slow and frustrating process, but at least the results are reasonable.

NiceAndCreamy commented 8 years ago

Oh its a render alright, that set hasn't been produced yet. Thanks for all of the work on this though, really appreciate it.

On Thursday, September 22, 2016, Ian Douglas notifications@github.com wrote:

Thanks, that looks like a photo not a render (ie computer-generated). I was hoping to be able to get them to create such a render and then borrow the colour codes.

The 'photo' approach is not working too well .. colours do not come out accurate due to the plastic being shiny and reflecting the sunlight. So am busy with Plan B, which is to manually match the colour on screen to how it actually looks. Downside is that it's a slow and frustrating process, but at least the results are reasonable.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ijprest/keyboard-layout-editor/issues/169#issuecomment-249017466, or mute the thread https://github.com/notifications/unsubscribe-auth/AT-4CjubcaXTL-J1RxgH1dexYR42rxT6ks5qsuPmgaJpZM4I9U4t .

iandoug commented 8 years ago

I've mailed Jessica to ask if she has the colour codes, since she seems to make lots of mockups ... must have really fancy software.

iandoug commented 8 years ago

Which colours are most urgent?

NiceAndCreamy commented 8 years ago

Personally, Im looking for their blacks, grays, and yellow, orange, red

On Thursday, September 22, 2016, Ian Douglas notifications@github.com wrote:

Which colours are most urgent?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ijprest/keyboard-layout-editor/issues/169#issuecomment-249069746, or mute the thread https://github.com/notifications/unsubscribe-auth/AT-4CtvXg58KBHzmV4rORha2ciqeo33oks5qsyDWgaJpZM4I9U4t .

iandoug commented 8 years ago

Still busy but here's the colours you requested. They're at least reasonable if not perfect, and better than the existing codes (at least on my monitor and to my eyes :-) ) Use the #numbers at the end of each line to set the colour in KLE.

brown { "name": "BR1", "r":122, "g":91, "b":58 }, #7a5b3a black { "name": "CR", "r":34, "g":34, "b":34 }, #222222 dark grey/blackish { "name": "N9", "r":62, "g":64, "b":42 }, #3E402A grey { "name": "BJ", "r":176, "g":175, "b":107 }, #b0af6b grey { "name": "CB", "r":195, "g":196, "b":112 }, #C3C470 beige/grey { "name": "U9", "r":207, "g":203, "b":118 }, #CFCB76 grey { "name": "2B", "r":147, "g":150, "b":92 }, #93965c grey { "name": "CC", "r":135, "g":126, "b":74 }, #877e4a yellow { "name": "GE1", "r":255, "g":245, "b":56 }, #FFF538 yellow { "name": "CV", "r":250, "g":217, "b":3 }, #FAD903 yellow { "name": "N6", "r":247, "g":186, "b":32 }, #f7ba20 red { "name": "RO1", "r":158, "g":52, "b":52 }, #9e3434 red { "name": "RO2", "r":235, "g":43, "b":30 }, #eb2b1e orange/red { "name": "V1", "r":247, "g":74, "b":47 }, #f74a2f orange { "name": "V2", "r":242, "g":124, "b":34 }, #f27c22 red { "name": "P3", "r":217, "g":59, "b":49 }, #d93b31 cerise/pink (bright) { "name": "MG1", "r":232, "g":94, "b":100 }, #e85e64 purple { "name": "DY", "r":111, "g":89, "b":122 }, #6f597a white { "name": "WS1", "r":250, "g":247, "b":170 } #faf7aa green { "name": "N7", "r":0, "g":145, "b":76 },#00914c pink (dusty) { "name": "3C", "r":232, "g":160, "b":109 },#e8a06d blue { "name": "V4", "r":0, "g":110, "b":122 },#006e7a

More later... about 13 to go. Whites, blues/greens

NiceAndCreamy commented 8 years ago

Thanks so much! I wonder if there is anyway to update the pallet locally so I don't have to do each key individually.

On Sun, Sep 25, 2016 at 2:07 PM, Ian Douglas notifications@github.com wrote:

Still busy but here's the colours you requested. They're at least reasonable if not perfect, and better than the existing codes (at least on my monitor and to my eyes :-) ) Use the #numbers at the end of each line to set the colour in KLE.

brown { "name": "BR1", "r":122, "g":91, "b":58 }, #7a5b3a black { "name": "CR", "r":34, "g":34, "b":34 }, #222222 dark grey/blackish { "name": "N9", "r":62, "g":64, "b":42 }, #3E402A grey { "name": "BJ", "r":176, "g":175, "b":107 }, #b0af6b grey { "name": "CB", "r":195, "g":196, "b":112 }, #C3C470 beige/grey { "name": "U9", "r":207, "g":203, "b":118 }, #CFCB76 grey { "name": "2B", "r":147, "g":150, "b":92 }, #93965c grey { "name": "CC", "r":135, "g":126, "b":74 }, #877e4a yellow { "name": "GE1", "r":255, "g":245, "b":56 }, #FFF538 yellow { "name": "CV", "r":250, "g":217, "b":3 }, #FAD903 yellow { "name": "N6", "r":247, "g":186, "b":32 }, #f7ba20 red { "name": "RO1", "r":158, "g":52, "b":52 }, #9e3434 red { "name": "RO2", "r":235, "g":43, "b":30 }, #eb2b1e orange/red { "name": "V1", "r":247, "g":74, "b":47 }, #f74a2f orange { "name": "V2", "r":242, "g":124, "b":34 }, #f27c22 red { "name": "P3", "r":217, "g":59, "b":49 }, #d93b31 cerise/pink (bright) { "name": "MG1", "r":232, "g":94, "b":100 }, #e85e64 purple { "name": "DY", "r":111, "g":89, "b":122 }, #6f597a white { "name": "WS1", "r":250, "g":247, "b":170 } #faf7aa green { "name": "N7", "r":0, "g":145, "b":76 },#00914c pink (dusty) { "name": "3C", "r":232, "g":160, "b":109 },#e8a06d blue { "name": "V4", "r":0, "g":110, "b":122 },#006e7a

More later... about 13 to go. Whites, blues/greens

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ijprest/keyboard-layout-editor/issues/169#issuecomment-249436323, or mute the thread https://github.com/notifications/unsubscribe-auth/AT-4CvKRDfPiJD6aHBeLkfgVtXmTf1isks5qtrhfgaJpZM4I9U4t .

iandoug commented 8 years ago

Once you set the colour for a key, it is available in your "current key colors" in the Color Swatches. What you could do is add a few new keys off to the side, make one each the colours that you want, and then just work with your own custom palette... then delete the dummies when you're done :-) You can also hold ctrl and select a bunch of keys, then click the colour in your palette to set them all to that color ...

iandoug commented 8 years ago

Damn. Thought I was done but looking at them in the palette some of them look wrong again. It's difficult to match pigment colours (reflected light) against screen colours (direct light). Whitish colours particularly tricky :-) Will try again.

pmck91 commented 8 years ago

Any update?

iandoug commented 8 years ago

Hi.. yeah... We had another go at the blues, greys and whites, but were not successful. Monitors not capable of displaying some colours, it seems. So I have today air-mailed the sample ring off to Ian Prest, he has the machines necessary to do objective colour sampling.

christopherjanzen commented 5 years ago

Where did this end up? Is KLE updated with the latest samples now?

iandoug commented 5 years ago

I sent them snailmail to IJP, and if I remember correctly, he scanned them with is fancy colour scanner identifier and updated them on KLE. It was almost three years ago ...

ijprest commented 5 years ago

Yes! Was completed in 69ef807bb8647f629e095d5ee39da79523850594. I neglected to close this out at the time.

Raw photospectrometer data is here: https://docs.google.com/spreadsheets/d/1y3rkeCwR081D3reGhYMwmTfEn2CzF9ueALf8jwLuhEI Conversion to sRGB data is here: https://docs.google.com/spreadsheets/d/1JDdOLHIYYCjY31gdc7Yakign6xkPFAi24xeAYfi6E-A