28:null 29:["$","title",null,{"children":"MoErgo Glove80 colour debugging | Gilmore Davidson | Observable"}] 2e:T89f,# MoErgo Glove80 colour debugging Generate a bindings map for a full colour testing chart. This allows me to see which colours are distinguishable (and therefore usable) on the real keyboard. Each Glove80 half has: - 5 columns of 6 keys - 1 column of 4 keys - 1 thumb cluster of 6 keys If I ignore the 4-key columns, and treat the thumb cluster as another 6-key column, there are 12 groups of 6 keys. Using HSL colours as basis, colour grids are then generated. Hue changes along the columns, saturation or lightness changes along the rows. 12 columns of HSL means at full saturation and 50% lightness, columns neatly alternate between `80` and `FF` values. The two 4-key columns can be used for greyscale instead. ``` bindings = < ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ ______ >; |------------------------|------------------------| | LEFT_HAND_KEYS | RIGHT_HAND_KEYS | | | | | 0 1 2 3 4 | 5 6 7 8 9 | | 10 11 12 13 14 15 | 16 17 18 19 20 21 | | 22 23 24 25 26 27 | 28 29 30 31 32 33 | | 34 35 36 37 38 39 | 40 41 42 43 44 45 | | 46 47 48 49 50 51 | 58 59 60 61 62 63 | | 64 65 66 67 68 | 75 76 77 78 79 | | 69 52 | 57 74 | | 70 53 | 56 73 | | 71 54 | 55 72 | |------------------------|------------------------| ```2f:T4e7,/** * Convert raw colour grid into key binding layout, including thumb key positions and dummy "empty" cells. * Columns 6 and 7 (indexes 5 and 6) are moved down to the thumb clusters. * Returns 2-dimensional array as rows[columns[]], matching the `bindings` display in the intro. */ function makeKeyBindings(colourGrid) { let result = []; const col5 = colourGrid.map(row => row[5]); const col6 = colourGrid.map(row => row[6]); // const defaultColour = '#808080'; for (let r = 0; r < colourGrid.length; r++) { let row = colourGrid[r]; let colArr = []; for (let c = 0; c < columns; c++) { if (c === 5) { let leftColour = (r > 0 && r < 5) ? greys[r - 1] : null; let rightColour = (r > 0 && r < 5) ? greys[r + 3] : null; if (r >= 4) { // Build thumb rows let thumbCol = r === 4 ? col5 : col6; let o = r === 4 ? 0 : 3; colArr.push(leftColour, col5[o + 2], col5[o + 1], col5[o], col6[o], col6[o + 1], col6[o + 2], rightColour); } else{ colArr.push(leftColour, null, null, null, null, null, null, rightColour); } c += 1; } else { colArr.push(row[c]); } } result.push(colArr); } return result; }30:[] 2c:{"id":"8af0cd52c4af6822","slug":"glove80-colours","title":"MoErgo Glove80 colour debugging","thumbnail":"3cc147272642583d5f72df70e850e1dda70c48b7200e3a58a40e3c87d371444f","access_level":"public","create_time":"$D2024-07-11T08:34:41.280Z","update_time":"$D2025-01-22T09:09:04.055Z","view_time":null,"first_public_time":"$D2024-07-11T08:34:41.280Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f55ed877764964a2","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":"starter_2024"},"version":148,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"000f2f22dc882a0b","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":null}],"members":[{"type":"individual","id":"000f2f22dc882a0b","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":null,"role":"editor"},{"type":"team","id":"f55ed877764964a2","login":"gilmoreorless","name":"Gilmore Davidson","avatar_url":"https://avatars-next.observableusercontent.com/c5ca01f5d987fb9aa8cad5293eb21be5cef06ed31eb8af566b541a1018aa71a9","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"MoErgo Glove80 colour debugging","cells":[{"id":0,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"displayKeyBindings(makeKeyBindings(makeColourGrid('sat')))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"displayKeyBindings(makeKeyBindings(makeColourGrid('light')))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"function displayKeyBindings(bindings) {\n return html`\n ${displayKeyBindingsHTML(bindings)}\n ${displayKeyBindingsCode(bindings)}\n ${displayKeyBindingsCode(bindings, 36)}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"function displayKeyBindingsCode(bindings, pr=30) {\n const prefix = pr >= 36 ? '&ug ' : '';\n const spaces = pr >= 36 ? 12 : 8;\n const blank = ' '.repeat(spaces);\n return html`\n

Bindings for PR #${pr}

${bindings.map((row, r) =>\n      row.map((colour, c) =>\n        colour === null\n          ? blank\n          : prefix + culori.formatHex(colour).replace('#', '0x')\n      ).join(' ')\n    ).join('\\n')}\n

\n ${bindings.map((row, r) =>\n row.map((colour, c) =>\n `

`\n ).join('\\n')\n ).join('\\n')}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"/**\n * Make a 2-dimensional array of colours, returned as rows[columns[]].\n * Columns change hue, rows change either saturation or lightness.\n *\n * @param rowChange: 'sat' | 'light'\n */\nfunction makeColourGrid(rowChange = 'sat') {\n const rows = 6;\n const hueStep = 360 / columns; // Don't need the max value as 360 === 0\n const rowStep = 100 / (rowChange === 'light' ? rows + 1 : rows); // Lightness skips both 0% and 100%\n const hslChangeIndex = rowChange === 'sat' ? 1 : 2;\n let result = [];\n \n for (let row = rows; row > 0; row--) {\n let colArr = [];\n for (let column = 0; column < columns; column++) {\n let hue = Math.round(column * hueStep);\n let bits = [hue, 100, 50];\n bits[hslChangeIndex] = Math.round(row * rowStep);\n colArr.push(`hsl(${bits[0]}, ${bits[1]}%, ${bits[2]}%)`);\n }\n result.push(colArr);\n }\n \n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"greys = (() => {\n const stops = 8;\n const step = 100 / (stops - 1);\n let result = [];\n for (let stop = stops - 1; stop >= 0; stop--) {\n result.push(`hsl(0, 0%, ${Math.round(stop * step)}%)`);\n }\n return result;\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"columns = 12","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"culori = require('culori@4')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"