zekth / keyset-catalog

Just a simple app to browse available keysets and find the best matches for a color

Keyset Catalog

Just a simple app to browse available keysets and find the best matches for a color. Accessible here

Develop

npm install
npm run serve

Code style use prettier and eslint. Runs before the build

npm run prettier # check code style
npm run prettier:fix # fix code style
npm run lint # check linting

Add a Keyset

Keysets are currently only GMK ones, and the datastore is in src/keysets/gmk.ts. Colors support only HEX values.

A base keyset is:

  {
    name: 'Taro',
    designer: 'pwade3',
    colors: {
      base: {
        background: '#8e71a2',
        legend: '#170b19'
      },
      mod: {
        background: '#170b19',
        legend: '#8e71a2'
      },
      accent: {
        background: '#5ed8df',
        legend: '#8e71a2'
      }
    }
  }

This keyset can be customized for each key. Ids of keys are the same as the ones you can find in QMK. For example see the GMK Terminal with the VIM kit:

{
    name: 'Terminal',
    designer: '',
    colors: {
      base: {
        background: '#393b3b',
        legend: '#689b34'
      },
      mod: {
        background: '#393b3b',
        legend: '#689b34'
      },
      accent: {
        background: '#689b34',
        legend: '#393b3b'
      }
    },
    specialKeys: {
      KC_H: {
        type: 'accent',
        thirdContent: '←'
      },
      KC_J: {
        type: 'accent',
        thirdContent: '↓'
      },
      KC_K: {
        type: 'accent',
        thirdContent: '↑'
      },
      KC_L: {
        type: 'accent',
        thirdContent: '→'
      }
    }
  }

Also weebAlt and weeb are stored as const because it's used in several keysets. You can see for example Bento:

{
    name: 'Bento - weeb alt',
    designer: 'biip',
    colors: {
      base: {
        background: '#fff3ef',
        color: '#3e728f'
      },
      mod: {
        background: '#3e728f',
        color: '#fb7279'
      },
      accent: {
        background: '#fb7279',
        color: '#3e728f'
      },
      ptn: {
        background: 'red',
        color: 'white'
      }
    },
    specialKeys: {
      KC_ESC: {
        content: 'Putain',
        type: 'ptn'
      },
      ...weebAlt // Spread operator
    }
  }

keyset-catalog's Issues

Alternate F keys & top keypad might stay when changing sets

When you switch from a keyset that has special non base colors on F5-F8 or the top numpad row to a keyset that has not, the previous set colors stays.

To workaround you need to:

      KC_F5: { type: 'base' },
      KC_F6: { type: 'base' },
      KC_F7: { type: 'base' },
      KC_F8: { type: 'base' },

      KC_PENT: { type: 'base' },
      KC_PMNS: { type: 'base' },
      KC_PPLS: { type: 'base' },
      KC_PSLS: { type: 'base' },
      KC_NLCK: { type: 'base' },
      KC_PAST: { type: 'base' },

in the specialKeys.

It isn't possible to override the official GMK legend on mods

Some sets have special legends like Fro.Yo or Oblivion with Git mods, but the specialKeys content is not respected on the modifiers.

Add a color matching disclaimer

Something along the line of:

Disclaimer:
Colors displayed here might not match the real final set color.
This can be because of a poorly calibrated screen, screen color space not matching full plastic color space, additive RGB colors for screen and pigments based plastic color composition. They should match as closely as possible the renders color of the keyset respective Group Buy page.

Support for multi accent colors

Some keysets (like Modern Dolch or Eclipse) have multiple accent colors (sometimes in the base kit or extra kits).

It would be great to be able to declare accents as an array of background/legend colors and display a combo box to be able to switch from one accent combination to another for those keysets instead of having to duplicate the keyset altogether in the already huge list.