From 4999702b20423392762bb8bed999052c95352ece Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Wed, 6 Sep 2023 16:11:46 +0200 Subject: [PATCH 01/25] chore: removed unused file --- src/renderer/config.js | 33 --------------------------------- 1 file changed, 33 deletions(-) delete mode 100644 src/renderer/config.js diff --git a/src/renderer/config.js b/src/renderer/config.js deleted file mode 100644 index 0d719253f..000000000 --- a/src/renderer/config.js +++ /dev/null @@ -1,33 +0,0 @@ -// -*- mode: js-jsx -*- -/* Bazecor -- Kaleidoscope Command Center - * Copyright (C) 2018, 2019 Keyboardio, Inc. - * - * This program is free software: you can redistribute it and/or modify it under - * the terms of the GNU General Public License as published by the Free Software - * Foundation, version 3. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, see . - */ - -// TODO: const isDevelopment = process.env.NODE_ENV !== "production"; -import path from "path"; - -const isDevelopment = true; - -function getStaticPath() { - if (process.env.NODE_ENV !== "production") { - // The `__static` global doesn't match what it should in development. - // Instead, it includes an unexpected `node_modules` path, specifically: - // node_modules/electron/dist/Electron.app/Contents/Resources/static - return path.join(path.resolve(__dirname), "..", "..", "static"); - } - return __static; -} - -export { isDevelopment, getStaticPath }; From 785e043054a1ff831a105e563f10712d39b52c45 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Wed, 6 Sep 2023 16:12:22 +0200 Subject: [PATCH 02/25] chore: solved lint issues with index.tsx file --- src/renderer/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 667369a9d..a3c09cacc 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -15,14 +15,15 @@ * along with this program. If not, see . */ +import React from "react"; import { MemoryRouter } from "react-router-dom"; import { createRoot } from "react-dom/client"; +import { I18nextProvider } from "react-i18next"; import App from "./App"; import Error from "./Error"; import "bootstrap-css-only/css/bootstrap.min.css"; import "@appigram/react-rangeslider/lib/index.css"; import i18n from "./i18n"; -import { I18nextProvider } from "react-i18next"; const container = document.getElementById("root"); const root = createRoot(container); From 4df787ef6b4c403b7b7ada48a616c949d7c91187 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Wed, 6 Sep 2023 16:13:08 +0200 Subject: [PATCH 03/25] chore: cleanup of old references, using alias instead --- src/renderer/App.jsx | 42 +++++++++++++++++++++--------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/renderer/App.jsx b/src/renderer/App.jsx index 7bf9d92da..6b72e38eb 100644 --- a/src/renderer/App.jsx +++ b/src/renderer/App.jsx @@ -21,32 +21,32 @@ import { ToastContainer, toast } from "react-toastify"; import { ThemeProvider } from "styled-components"; import { ipcRenderer } from "electron"; import path from "path"; -import withRouter from "./utils/withRouter"; -import i18n from "./i18n"; +import withRouter from "@Renderer/utils/withRouter"; +import i18n from "@Renderer/i18n"; -import Focus from "../api/focus"; -import "../api/keymap"; -import "../api/colormap"; import "react-toastify/dist/ReactToastify.css"; -import GlobalStyles from "./theme/GlobalStyles"; -import Light from "./theme/LightTheme"; -import Dark from "./theme/DarkTheme"; +import GlobalStyles from "@Renderer/theme/GlobalStyles"; +import Light from "@Renderer/theme/LightTheme"; +import Dark from "@Renderer/theme/DarkTheme"; -import SelectKeyboard from "./views/SelectKeyboard"; -import FirmwareUpdate from "./views/FirmwareUpdate"; -import LayoutEditor from "./views/LayoutEditor"; -import MacroEditor from "./views/MacroEditor"; -import SuperkeysEditor from "./views/SuperkeysEditor"; -import Preferences from "./views/Preferences"; -import Wireless from "./views/Wireless"; -import Welcome from "./views/Welcome"; +import SelectKeyboard from "@Renderer/views/SelectKeyboard"; +import FirmwareUpdate from "@Renderer/views/FirmwareUpdate"; +import LayoutEditor from "@Renderer/views/LayoutEditor"; +import MacroEditor from "@Renderer/views/MacroEditor"; +import SuperkeysEditor from "@Renderer/views/SuperkeysEditor"; +import Preferences from "@Renderer/views/Preferences"; +import Wireless from "@Renderer/views/Wireless"; +import Welcome from "@Renderer/views/Welcome"; -import Header from "./modules/NavigationMenu"; -import ToastMessage from "./component/ToastMessage"; -import { IconNoSignal } from "./component/Icon"; +import Header from "@Renderer/modules/NavigationMenu"; +import ToastMessage from "@Renderer/component/ToastMessage"; +import { IconNoSignal } from "@Renderer/component/Icon"; -import Store from "./utils/Store"; +import Store from "@Renderer/utils/Store"; +import Focus from "../api/focus"; +import "../api/keymap"; +import "../api/colormap"; const store = Store.getStore(); @@ -95,7 +95,7 @@ class App extends React.Component { // Loading font to be sure it wont blink // document.fonts.load("Libre Franklin"); - const fontFace = new FontFace("Libre Franklin", "./theme/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf"); + const fontFace = new FontFace("Libre Franklin", "@Renderer/theme/fonts/LibreFranklin/LibreFranklin-VariableFont_wght.ttf"); console.log("Font face: ", fontFace); document.fonts.add(fontFace); From 948b5e4984ec750faefb5a71a7dc26b2d26cb6ba Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Wed, 6 Sep 2023 16:13:55 +0200 Subject: [PATCH 04/25] docs: improved documentation about FOCUS.API LED commands --- FOCUS_API.md | 223 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 198 insertions(+), 25 deletions(-) diff --git a/FOCUS_API.md b/FOCUS_API.md index b4cf0d7cc..f399ee77c 100644 --- a/FOCUS_API.md +++ b/FOCUS_API.md @@ -64,12 +64,18 @@ Commands to help you with the testing and settings of the raise's leds [led.at](#ledat) +[led.getMultiple](#ledgetmultiple) + +[led.setMultiple](#ledsetmultiple) + [led.setAll](#ledsetall) [led.mode](#ledmode) [led.brightness](#ledbrightness) +[led.brightnessUG](#ledbrightnessUG) + [led.theme](#ledtheme) **Colors Section** @@ -366,18 +372,86 @@ This command returns the color that an individual led has right now in RGB code, To retrieve: -- JavaScript: `focus.command("led.at 21")` -- Serial Command (Unix): `echo 'led.at 21' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.at 21") + ``` +- Serial Command (Unix): + ```shell + echo 'led.at 21' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("led.at 21 3")` -- Serial Command (Unix): `echo 'led.at 21 3' > /dev/ttyACM0` - +- JavaScript: + ```js + focus.command("led.at 21 255 255 0") + ``` +- Serial Command (Unix): + ```shell + echo 'led.at 21 255 255 0' > /dev/ttyACM0 + ``` #### Expected output With this function you can change, based on external events, a led color depending on code outside raise's firmware. +if sent only with the LED number, it will return its color +```js +80 227 194 +``` + +if sent with the color coded (ex: 255 255 0 or yellow) it will change that numbered LEDs color to yellow. + +### led.getMultiple + +This command returns the colors of each of the numbered LED's that are listed in RGB code. + +#### Commands + +To retrieve: + +- JavaScript: + ```js + focus.command("led.getMultiple 1 2 3 4 5") + ``` +- Serial Command (Unix): + ```shell + echo 'led.getMultiple 1 2 3 4 5' > /dev/ttyACM0 + ``` + +#### Expected output + +With this function you can read the color of a given set of LED's and will return the following: + + ``` js + 1 # 80 227 194 + 2 # 80 227 194 + 3 # 80 227 194 + 4 # 80 227 194 + 5 # 80 227 194 + ``` + +### led.setMultiple + +This command applies the defined color to all of the numbered LEDs listed afterwards + +#### Commands + +To set: + +- JavaScript: + ```js + focus.command("led.setMultiple 255 0 0 1 2 3 4 5") + ``` +- Serial Command (Unix): + ```shell + echo 'led.setMultiple 255 0 0 1 2 3 4 5' > /dev/ttyACM0 + ``` + +#### Expected output + +After execution, listed LEDs should physically change their color to the selected one (255 0 0 or RED) on the keyboard, will return newline, period. + ### led.setAll This command sets all leds to a certain color transmitted by RGB. @@ -386,8 +460,14 @@ This command sets all leds to a certain color transmitted by RGB. To set: -- JavaScript: `focus.command("led.setAll 255 255 255")` -- Serial Command (Unix): `echo 'led.setAll 255 255 255' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.setAll 255 255 255") + ``` +- Serial Command (Unix): + ```shell + echo 'led.setAll 255 255 255' > /dev/ttyACM0 + ``` #### Expected output @@ -401,58 +481,151 @@ This command reads/writes the current led mode, which changes the type of led la To retrieve: -- JavaScript: `focus.command("led.mode")` -- Serial Command (Unix): `echo 'led.mode' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.mode") + ``` +- Serial Command (Unix): + ```shell + echo 'led.mode' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("led.mode 2")` -- Serial Command (Unix): `echo 'led.mode 2' > /dev/ttyACM0` - +- JavaScript: + ```js + focus.command("led.mode 2") + ``` +- Serial Command (Unix): + ```shell + echo 'led.mode 2' > /dev/ttyACM0 + ``` #### Expected output -The keyboard will change it's effect or send the code of the current effect being shown. +The keyboard will either return the current effect being displayed following it's coding, or it will change the current efect following that coding also. + +| Effect encoding | Effect description | +| :---: | :--- | +| 0 | Per Layer colors, change when you switch between layers | +| 1 | Rainbow Wave effect | +| 2 | Rainbow effect (single color) | +| 3 | Stalker effect (keys lit when pressed and then fade out) | +| 4 | Heatmap effect (keys lit when pressed following a gardient between red and faint blue based on the most pressed key order [explanation](https://kaleidoscope.readthedocs.io/en/latest/plugins/Kaleidoscope-Heatmap.html) [code](https://github.com/Dygmalab/KaleidoscopeTest/blob/main/libraries/Kaleidoscope-Heatmap/src/kaleidoscope/plugin/Heatmap.cpp) ) | +| 5 | Digital Rain effect | +| 6 | Sprinkling water effect when pressed | + +\* The only FW that supports effects 4, 5 and 6 is the Raise stable FW, but it will be implemented on the rest of the FW's in the near future ### led.brightness -This command reads/writes the brightness setting stored in the EEPROM +This command reads/writes the brightness setting for the Backlight LEDs stored in the EEPROM + +When applied to the Defy keyboard, additional commands are available to modify the behavior when in wireless mode, this one remains and only affects wired mode. #### Commands To retrieve: -- JavaScript: `focus.command("led.brightness")` -- Serial Command (Unix): `echo 'led.brightness' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.brightness") + ``` +- Serial Command (Unix): + ```shell + echo 'led.brightness' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("led.brightness 210")` -- Serial Command (Unix): `echo 'led.brightness 210' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.brightness 210") + ``` +- Serial Command (Unix): + ```shell + echo 'led.brightness 210' > /dev/ttyACM0 + ``` #### Expected output -With this function you can change, based on external events, the overall led brightness using code outside raise\'s firmware. +This function allows you to get/set the current brightness of the backlight LEDs of your keyboard. + +the return value will be the same as the sent one, a 8 bit integer (number between 0 and 255) +### led.brightnessUG + +This command reads/writes the brightness setting for the Underglow stored in the EEPROM + +When applied to the Defy keyboard, additional commands are available to modify the behavior when in wireless mode, these one remain and only affect wired mode. + +#### Commands + +To retrieve: + +- JavaScript: + ```js + focus.command("led.brightnessUG") + ``` +- Serial Command (Unix): + ```shell + echo 'led.brightnessUG' > /dev/ttyACM0 + ``` + +To set: + +- JavaScript: + ```js + focus.command("led.brightnessUG 210") + ``` +- Serial Command (Unix): + ```shell + echo 'led.brightnessUG 210' > /dev/ttyACM0 + ``` + +#### Expected output + +This function allows you to get/set the current brightness of the Underglow LEDs of your keyboard. + +the return value will be the same as the sent one, a 8 bit integer (number between 0 and 255) ### led.theme -This command reads/writes the whole LED color assignment currently in use by using RGB codes. +This command reads/writes the whole LED color assignment currently in use on the keyboard, its encoded using RGB values. #### Commands To retrieve: -- JavaScript: `focus.command("led.theme")` -- Serial Command (Unix): `echo 'led.theme' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.theme") + ``` +- Serial Command (Unix): + ```shell + echo 'led.theme' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("led.theme NNN NNN NNN NNN NNN NNN")` -- Serial Command (Unix): `echo 'led.theme NNN NNN NNN NNN NNN NNN' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.theme NNN NNN NNN NNN NNN NNN") + ``` +- Serial Command (Unix): + ```shell + echo 'led.theme NNN NNN NNN NNN NNN NNN' > /dev/ttyACM0 + ``` #### Expected output -With this function you can change, based on external events, the overall led colors using code outside raise\'s firmware independently of the current palette stored in the keyboard. +With this function you can get/set, whole LED lighting theme using a single command independently of the palette data stored in the keyboard's EEPROM. + +when you ask for the values using `led.theme` you are expected to receive: +```js +248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 248 231 28 248 231 28 248 231 28 80 227 194 248 231 28 255 107 0 248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 80 227 194 80 227 194 80 227 194 80 227 194 80 227 194 248 231 28 248 231 28 248 231 28 248 231 28 248 231 28 80 227 194 248 231 28 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 255 107 0 0 0 0 +``` +Which is the full RGB map of the values currently being represented by each LED, its encoding is RGB so each 3 values represent a single LED. +The command will expect you to send back the same quantity of LEDs, if any is lacking, they will not get reassigned. ### palette This command reads/writes the color palette that is used by the color map to establish each color that can be assigned to the keyboard. From e282d563a59c82d8c1a13e3ca92dfef3ba7edd93 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Mon, 11 Sep 2023 13:18:26 +0200 Subject: [PATCH 05/25] chore: changed documentation code representaiton to a more legible version" --- FOCUS_API.md | 423 ++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 297 insertions(+), 126 deletions(-) diff --git a/FOCUS_API.md b/FOCUS_API.md index f399ee77c..35495b612 100644 --- a/FOCUS_API.md +++ b/FOCUS_API.md @@ -176,19 +176,31 @@ Returns the version of the Raise firmware stored in the keyboard's EEPROM #### Commands -JavaScript: `focus.command("version")` -Serial Command (Unix): `echo 'version' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("version") + ``` +- Serial Command (Unix): + ```shell + echo 'version' > /dev/ttyACM0 + ``` #### Expected output it should give back 3 strings, - Bazecor Version: -- `v0.2.5` + ```shell + '0.2.5' + ``` - Kaleidoscope's newest Git commit incorporated -- `6bd1f81e` + ```shell + '6bd1f81e' + ``` - Raise's Firmware newest Git commit -- `fe423ce-dirty` + ```shell + 'fe423ce-dirty' + ``` - Dirty here means it was custom-built with the makefile, not built automatically by Travis. ### keymap.custom @@ -201,15 +213,31 @@ To know the actual correlation between the position of the map sent and the actu To retrieve: -- JavaScript: `focus.command("keymap.custom")` -- Serial Command (Unix): `echo 'keymap.custom' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.custom") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.custom' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("keymap.custom N N N N N N N N N N N N N N N")` -- Serial Command (Unix): `echo 'keymap.custom N N N N N N N N N N N N N N N' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.custom N N N N N N N N N N N N N N N") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.custom N N N N N N N N N N N N N N N' > /dev/ttyACM0 + ``` -Being `N N N...` the 16bit numbers that represent each key assigned to that position of the keymap the numbers amount 80(keys per layer)x10(custom layers) +Being +```shell + 'N N N...' +``` +the 16bit numbers that represent each key assigned to that position of the keymap the numbers amount 80(keys per layer)x10(custom layers) #### Expected output @@ -225,15 +253,31 @@ To know the actual correlation between the position of the map sent and the actu To retrieve: -- JavaScript: `focus.command("keymap.default")` -- Serial Command (Unix): `echo 'keymap.default' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.default") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.default' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("keymap.default N N N N N N N N N N N N N N N")` -- Serial Command (Unix): `echo 'keymap.default N N N N N N N N N N N N N N N' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.default N N N N N N N N N N N N N N N") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.default N N N N N N N N N N N N N N N' > /dev/ttyACM0 + ``` -Being `N N N...` the 16bit numbers that represent each key assigned to that position of the keymap the numbers amount 80(keys per layer)x2(default layers) +Being +```shell + 'N N N...' +``` +the 16bit numbers that represent each key assigned to that position of the keymap the numbers amount 80(keys per layer)x2(default layers) #### Expected output @@ -247,13 +291,25 @@ This command returns true or false depending on the user setting of hiding the d To retrieve: -- JavaScript: `focus.command("keymap.onlyCustom")` -- Serial Command (Unix): `echo 'keymap.onlyCustom' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.onlyCustom") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.onlyCustom' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("keymap.onlyCustom true")` -- Serial Command (Unix): `echo 'keymap.onlyCustom trure' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.onlyCustom true") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.onlyCustom trure' > /dev/ttyACM0 + ``` #### Expected output @@ -267,13 +323,25 @@ This command returns the default layer the keyboard will boot in, with this you To retrieve: -- JavaScript: `focus.command("keymap.defaultLayer")` -- Serial Command (Unix): `echo 'keymap.defaultLayer' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.defaultLayer") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.defaultLayer' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("keymap.defaultLayer 1")` -- Serial Command (Unix): `echo 'keymap.defaultLayer 1' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("keymap.defaultLayer 1") + ``` +- Serial Command (Unix): + ```shell + echo 'keymap.defaultLayer 1' > /dev/ttyACM0 + ``` #### Expected output @@ -287,8 +355,14 @@ This command returns a boolean value that states true if all checks have been pe To retrieve: -- JavaScript: `focus.command("settings.valid")` -- Serial Command (Unix): `echo 'settings.valid' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("settings.valid") + ``` +- Serial Command (Unix): + ```shell + echo 'settings.valid' > /dev/ttyACM0 + ``` #### Expected output @@ -302,13 +376,25 @@ This command returns the current settings version, it allows Bazecor to identify To retrieve: -- JavaScript: `focus.command("settings.version")` -- Serial Command (Unix): `echo 'settings.version' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("settings.version") + ``` +- Serial Command (Unix): + ```shell + echo 'settings.version' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("settings.version 1")` -- Serial Command (Unix): `echo 'settings.version 1' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("settings.version 1") + ``` +- Serial Command (Unix): + ```shell + echo 'settings.version 1' > /dev/ttyACM0 + ``` #### Expected output @@ -322,8 +408,14 @@ Returns the CRC checksum of the layout. To retrieve: -- JavaScript: `focus.command("settings.crc")` -- Serial Command (Unix): `echo 'settings.crc' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("settings.crc") + ``` +- Serial Command (Unix): + ```shell + echo 'settings.crc' > /dev/ttyACM0 + ``` #### Expected output @@ -337,13 +429,25 @@ This command returns the whole EEPROM contents. and allows you to send them in o To retrieve: -- JavaScript: `focus.command("eeprom.contents")` -- Serial Command (Unix): `echo 'eeprom.contents' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("eeprom.contents") + ``` +- Serial Command (Unix): + ```shell + echo 'eeprom.contents' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("eeprom.contents NNNNNNNNNNNNN")` -- Serial Command (Unix): `echo 'eeprom.contents NNNNNNNNNNNN' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("eeprom.contents NNNNNNNNNNNNN") + ``` +- Serial Command (Unix): + ```shell + echo 'eeprom.contents NNNNNNNNNNNN' > /dev/ttyACM0 + ``` #### Expected output @@ -357,8 +461,14 @@ This command returns the remaining EEPROM bytes left. To retrieve: -- JavaScript: `focus.command("eeprom.free")` -- Serial Command (Unix): `echo 'eeprom.free' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("eeprom.free") + ``` +- Serial Command (Unix): + ```shell + echo 'eeprom.free' > /dev/ttyACM0 + ``` #### Expected output @@ -506,7 +616,7 @@ The keyboard will either return the current effect being displayed following it' | Effect encoding | Effect description | | :---: | :--- | -| 0 | Per Layer colors, change when you switch between layers | +| 0 | Per Layer colors, they change when you switch between layers | | 1 | Rainbow Wave effect | | 2 | Rainbow effect (single color) | | 3 | Stalker effect (keys lit when pressed and then fade out) | @@ -634,13 +744,25 @@ This command reads/writes the color palette that is used by the color map to est To retrieve: -- JavaScript: `focus.command("palette")` -- Serial Command (Unix): `echo 'palette' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("palette") + ``` +- Serial Command (Unix): + ```shell + echo 'palette' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("led.palete NNN NNN NNN NNN NNN NNN")` -- Serial Command (Unix): `echo 'palette NNN NNN NNN NNN NNN NNN' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("led.palete NNN NNN NNN NNN NNN NNN") + ``` +- Serial Command (Unix): + ```shell + echo 'palette NNN NNN NNN NNN NNN NNN' > /dev/ttyACM0 + ``` #### Expected output @@ -656,13 +778,25 @@ To know the actual correlation between the position of the map sent and the actu To retrieve: -- JavaScript: `focus.command("colormap.map")` -- Serial Command (Unix): `echo 'colormap.map' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("colormap.map") + ``` +- Serial Command (Unix): + ```shell + echo 'colormap.map' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("colormap.map N N N N N N N N N N N N N N N N N N")` -- Serial Command (Unix): `echo 'colormap.map N N N N N N N N N N N N N N N N N N' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("colormap.map N N N N N N N N N N N N N N N N N N") + ``` +- Serial Command (Unix): + ```shell + echo 'colormap.map N N N N N N N N N N N N N N N N N N' > /dev/ttyACM0 + ``` #### Expected output @@ -676,13 +810,25 @@ This command reads/writes the idle led time to be turned off in seconds. To retrieve: -- JavaScript: `focus.command("idleleds.time_limit")` -- Serial Command (Unix): `echo 'idleleds.time_limit' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("idleleds.time_limit") + ``` +- Serial Command (Unix): + ```shell + echo 'idleleds.time_limit' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("idleleds.time_limit 600")` -- Serial Command (Unix): `echo 'idleleds.time_limit 600' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("idleleds.time_limit 600") + ``` +- Serial Command (Unix): + ```shell + echo 'idleleds.time_limit 600' > /dev/ttyACM0 + ``` #### Expected output @@ -736,61 +882,23 @@ This empty command has no support as of today, or is disabled / not working prop This command reads/writes the macros map (2048 bytes of max lenght), each action in a macro is composed of an action type and a key attached to it. -- MACRO_ACTION_END = 0 - - Ends the current macro play sequence, it's used at the end of a macro to separate it from the second - - Example: " 0 " - - Total cost = 1 -- MACRO_ACTION_STEP_INTERVAL = 1 - - Changes the reproduction interval between each key of the sequence when a tap sequence or a tap code sequence (12 or 13) are used - - The step uses a 16bit integer splitted into two 8bit numbers to send it to the keyboard, first comes the higher weight - - Example: " 1 1 44 " for a 300ms delay - - Total cost = 3 -- MACRO_ACTION_STEP_WAIT = 2 - - Custom delay that lets the macro wait for any event before continuing the sequence. - - The step uses a 16bit integer splitted into two 8bit numbers to send it to the keyboard, first comes the higher weight - - Example: " 2 1 44 " for a 300ms delay - - Total cost = 3 -- MACRO_ACTION_STEP_KEYDOWN = 3 - - Activates the keydown event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. - - The step uses a 16bit integer that identifies any key, splitted into two 8bit numbers to send it to the keyboard. First comes the higher weight. - - Example: " 3 76 226 " for the keyCode 19682, which activates the keydown action for the Media.Mute button. - - Total cost = 3 -- MACRO_ACTION_STEP_KEYUP = 4 - - Activates the keyup event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. - - The step uses a 16bit integer that identifies any key, splitted into two 8bit numbers to send it to the keyboard. First comes the higher weight. - - Example: " 4 76 226 " for the keyCode 19682, which activates the keyup action for the Media.Mute button. - - Total cost = 3 -- MACRO_ACTION_STEP_TAP = 5 - - Activates the tap event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. - - The step uses a 16bit integer that identifies any key, splitted into two 8bit numbers to send it to the keyboard. First comes the higher weight. - - Example: " 5 76 226 " for the keyCode 19682, which activates the tap action for the Media.Mute button. - - Total cost = 3 -- MACRO_ACTION_STEP_KEYCODEDOWN = 6 - - Activates the keydown event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. - - The step uses a lone 8bit number to identify any key < 256, as no flags are sent, 0 is used for the flag identifier instead. - - Example: " 6 225 " for the keyCode 225, which activates the keydown action for the Right Shift button. - - Total cost = 2 -- MACRO_ACTION_STEP_KEYCODEUP = 7 - - Activates the keyup event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. - - The step uses a lone 8bit number to identify any key < 256, as no flags are sent, 0 is used for the flag identifier instead. - - Example: " 7 225 " for the keyCode 225, which activates the keyup action for the Right Shift button. - - Total cost = 2 -- MACRO_ACTION_STEP_TAPCODE = 8 - - Activates the tap event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. - - The step uses a lone 8bit number to identify any key < 256, as no flags are sent, 0 is used for the flag identifier instead. - - Example: " 8 225 " for the keyCode 225, which activates the tap action for the Right Shift button. - - Total cost = 2 -- MACRO_ACTION_STEP_EXPLICIT_REPORT = 9 -- MACRO_ACTION_STEP_IMPLICIT_REPORT = 10 -- MACRO_ACTION_STEP_SEND_REPORT = 11 - - The functions 9,10,11 are not implemented in the newer versions of the keyboard, they are no longer needed as there is no reason to change the way the report is sent to the host PC. -- MACRO_ACTION_STEP_TAP_SEQUENCE = 12 -- MACRO_ACTION_STEP_TAP_CODE_SEQUENCE = 13 - - The functions 12 & 13 behave in the same way, 13 should allow the flag sending for the block, but this introduces a double zero which will make the whole macro sequence unreadable, so this has to change to be able to work. - - Activates the tap event for a sequence of KeyCodes (which will be reproduced as a number of taps) defined by one 8bit number each, it only carries the code up to 255, which means only normal keys can be sent this way. - - The step uses a sequence of 8bit numbers to identify any key < 256, as no flags are sent, 0 is used for the flag identifier instead. - - Example: " 12 14 7 18 18 26 0" for the keyCode 225, which activates the tap action for the Right Shift button. - - Total cost = N + 1, being N the number of actions to be performed in a closed while loop +| Macro Action | Description | Example | Total Cost | | +|-----------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------|---| +| MACRO_ACTION_END | Ends the current macro play sequence, it's used at the end of a macro to separate it from the second | " 0 " | 1 | | +| MACRO_ACTION_STEP_INTERVAL | Changes the reproduction interval between each key of the sequence when a tap sequence or a tap code sequence (12 or 13) are used | " 1 1 44 " for a 300ms delay | 3 | | +| MACRO_ACTION_STEP_WAIT | Custom delay that lets the macro wait for any event before continuing the sequence. | " 2 1 44 " for a 300ms delay | 3 | | +| MACRO_ACTION_STEP_KEYDOWN | Activates the keydown event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. | " 3 76 226 " for the keyCode 19682, which activates the keydown action for the Media.Mute button. | 3 | | +| MACRO_ACTION_STEP_KEYUP | Activates the keyup event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. | " 4 76 226 " for the keyCode 19682, which activates the keyup action for the Media.Mute button. | 3 | | +| MACRO_ACTION_STEP_TAP | Activates the tap event for a KeyCode defined by two 8bit numbers, the higher weight carries the flags, the lower weight carries the code. | " 5 76 226 " for the keyCode 19682, which activates the tap action for the Media.Mute button. | 3 | | +| MACRO_ACTION_STEP_KEYCODEDOWN | Activates the keydown event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. | " 6 225 " for the keyCode 225, which activates the keydown action for the Right Shift button. | 2 | | +| MACRO_ACTION_STEP_KEYCODEUP | Activates the keyup event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. | " 7 225 " for the keyCode 225, which activates the keyup action for the Right Shift button. | 2 | | +| MACRO_ACTION_STEP_TAPCODE | Activates the tap event for a KeyCode defined by one 8bit number, it only carries the code up to 255, which means only normal keys can be sent this way. | " 8 225 " for the keyCode 225, which activates the tap action for the Right Shift button. | 2 | | +| MACRO_ACTION_STEP_EXPLICIT_REPORT | Not implemented in newer versions of the keyboard. | - | - | | +| MACRO_ACTION_STEP_IMPLICIT_REPORT | Not implemented in newer versions of the keyboard. | - | - | | +| MACRO_ACTION_STEP_SEND_REPORT | Not implemented in newer versions of the keyboard. | - | - | | +| MACRO_ACTION_STEP_TAP_SEQUENCE | Activates the tap event for a sequence of KeyCodes (which will be reproduced as a number of taps) defined by one 8bit number each, it only carries the code up to 255, which means only normal keys can be sent this way. | " 12 14 7 18 18 26 0" for the keyCode 225, which activates the tap action for the Right Shift button. | N + 1, where N is the number of actions to be performed in a closed while loop | | + +Please note that the last three macro actions (MACRO_ACTION_STEP_EXPLICIT_REPORT, MACRO_ACTION_STEP_IMPLICIT_REPORT, and MACRO_ACTION_STEP_SEND_REPORT) are not implemented in newer versions of the keyboard, so the corresponding cells in the table are left empty. then we send the actual keyCode that we can find in the [keymap database](https://github.com/Dygmalab/Bazecor/tree/development/src/api/keymap/db) @@ -947,13 +1055,25 @@ the holdstart value specifies the minimum time that has to pass between the firs To retrieve: -- JavaScript: `focus.command("superkeys.holdstart")` -- Serial Command (Unix): `echo 'superkeys.holdstart' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("superkeys.holdstart") + ``` +- Serial Command (Unix): + ```shell + echo 'superkeys.holdstart' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("superkeys.holdstart 200")` -- Serial Command (Unix): `echo 'superkeys.holdstart 200' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("superkeys.holdstart 200") + ``` +- Serial Command (Unix): + ```shell + echo 'superkeys.holdstart 200' > /dev/ttyACM0 + ``` #### Expected output @@ -969,13 +1089,25 @@ the overlap value specifies the percentage of overlap when fast typing that is a To retrieve: -- JavaScript: `focus.command("superkeys.overlap")` -- Serial Command (Unix): `echo 'superkeys.overlap' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("superkeys.overlap") + ``` +- Serial Command (Unix): + ```shell + echo 'superkeys.overlap' > /dev/ttyACM0 + ``` To set: -- JavaScript: `focus.command("superkeys.overlap 80")` -- Serial Command (Unix): `echo 'superkeys.overlap 80' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("superkeys.overlap 80") + ``` +- Serial Command (Unix): + ```shell + echo 'superkeys.overlap 80' > /dev/ttyACM0 + ``` #### Expected output @@ -995,8 +1127,14 @@ The help command returns all the available commands in the current version of th #### Commands -JavaScript: `focus.command("help")` -Serial Command (Unix): `echo 'help' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("help") + ``` +- Serial Command (Unix): + ```shell + echo 'help' > /dev/ttyACM0 + ``` #### Expected output @@ -1010,8 +1148,14 @@ This command allows the host PC to activate a certain layer remotely just by sen To use: -- JavaScript: `focus.command("layer.activate 1")` -- Serial Command (Unix): `echo 'layer.activate 1' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("layer.activate 1") + ``` +- Serial Command (Unix): + ```shell + echo 'layer.activate 1' > /dev/ttyACM0 + ``` #### Expected output @@ -1025,8 +1169,14 @@ This command allows the host PC to deactivate the last layer that the keyboard s To use: -- JavaScript: `focus.command("layer.deactivate")` -- Serial Command (Unix): `echo 'layer.deactivate' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("layer.deactivate") + ``` +- Serial Command (Unix): + ```shell + echo 'layer.deactivate' > /dev/ttyACM0 + ``` #### Expected output @@ -1040,8 +1190,14 @@ This command allows the host PC to ask the keyboard which layer is in use right To use: -- JavaScript: `focus.command("layer.isActive")` -- Serial Command (Unix): `echo 'layer.isActive' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("layer.isActive") + ``` +- Serial Command (Unix): + ```shell + echo 'layer.isActive' > /dev/ttyACM0 + ``` #### Expected output @@ -1059,8 +1215,14 @@ This command does not affect the memory usage as the value is stored in RAM. To use: -- JavaScript: `focus.command("layer.moveTo 1")` -- Serial Command (Unix): `echo 'layer.moveTo 1' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("layer.moveTo 1") + ``` +- Serial Command (Unix): + ```shell + echo 'layer.moveTo 1' > /dev/ttyACM0 + ``` #### Expected output @@ -1074,9 +1236,18 @@ This command returns the isActive status for up to 32 layers. It will return a 3 To use: -- JavaScript: `focus.command("layer.state")` -- Serial Command (Unix): `echo 'layer.state' > /dev/ttyACM0` +- JavaScript: + ```js + focus.command("layer.state") + ``` +- Serial Command (Unix): + ```shell + echo 'layer.state' > /dev/ttyACM0 + ``` #### Expected output -This is the typical answer when the first layer is active: "1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 " +This is the typical answer when the first layer is active: +```shell +'1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ' +`````` From c0e47487e1421c2444b25de6a0838114035000f7 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Mon, 11 Sep 2023 16:06:35 +0200 Subject: [PATCH 06/25] chore: changed extension of welcome.js to tsx --- src/renderer/views/{Welcome.js => Welcome.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/renderer/views/{Welcome.js => Welcome.tsx} (100%) diff --git a/src/renderer/views/Welcome.js b/src/renderer/views/Welcome.tsx similarity index 100% rename from src/renderer/views/Welcome.js rename to src/renderer/views/Welcome.tsx From 6aaa84a85a9d593ba0530b020430f9f1e952505e Mon Sep 17 00:00:00 2001 From: Alejandro Parcet Date: Mon, 11 Sep 2023 16:08:01 +0200 Subject: [PATCH 07/25] chore: added changes to fix typescript support on welcome.tsx --- src/renderer/views/Welcome.tsx | 141 +++++++++++++++------------------ 1 file changed, 65 insertions(+), 76 deletions(-) diff --git a/src/renderer/views/Welcome.tsx b/src/renderer/views/Welcome.tsx index 5006bbf5b..0085c33eb 100644 --- a/src/renderer/views/Welcome.tsx +++ b/src/renderer/views/Welcome.tsx @@ -21,7 +21,7 @@ import { toast } from "react-toastify"; import Container from "react-bootstrap/Container"; import Card from "react-bootstrap/Card"; -import withRouter from "../utils/withRouter"; +import { useNavigate } from "react-router-dom"; import Focus from "../../api/focus"; import i18n from "../i18n"; @@ -103,31 +103,22 @@ height: inherit; } `; -class Welcome extends React.Component { - state = { - factoryResetStarted: false, - }; - - startFactoryReset = () => { - this.setState({ factoryResetStarted: true }); - }; - - cancelFactoryReset = () => { - this.setState({ factoryResetStarted: false }); - }; +function Welcome(props: any) { + const navigate = useNavigate(); + const { onConnect, device } = props; - reconnect = async () => { + const reconnect = async () => { const focus = new Focus(); - const device = { + const dev = { path: focus._port.path, device: focus.device, }; try { - if (!device.path) { - device.device.device = device.device; + if (!dev.path) { + dev.device.device = dev.device; } - await this.props.onConnect(device, null); + await onConnect(dev, null); } catch (err) { toast.error(} />, { icon: "", @@ -135,68 +126,66 @@ class Welcome extends React.Component { } }; - render() { - const focus = new Focus(); - const device = this.props.device.device || focus.device; - - const reconnectButton = focus._port && ( - - ); + const focus = new Focus(); + const dev = device.device || focus.device; - return ( - - - -
-
- - -
-
- - {focus._port ? <Title text={focus._port.path} headingLevel={6} /> : ""} - </div> - <div className="icon"> - <IconKeyboard /> - </div> - </div> - </Card.Header> - <Card.Body> - <div> - <Title type="warning" text={i18n.welcome.bootloaderTitle} headingLevel={3} /> - <p>{i18n.welcome.description}</p> + const reconnectButton = focus._port && ( + <RegularButton onClick={reconnect} buttonText={i18n.welcome.reconnect} styles="outline transp-bg" /> + ); - <span className="cardsub"> - <ul style={{ lineHeight: "2rem" }}> - <li>This process will revert your keyboard's configuration back to factory settings.</li> - <li> - {"Before proceeding, we recommend that you "} - <a href="https://support.dygma.com/hc/en-us/articles/360014262298">export and save your layers</a>. - </li> - <li>To exit Bootloader Mode, unplug and replug the USB-C cable to your Neuron.</li> - </ul> - </span> + return ( + <Styles> + <Container fluid className="welcome center-content"> + <PageHeader text={i18n.welcome.title} /> + <div className="welcomeWrapper"> + <div className="welcomeInner"> + <Card className="welcomeCard"> + <Card.Header> + <div className="keyboardSelected"> + <div className="content"> + <Title text={dev.info.displayName} headingLevel={4} /> + {focus._port ? <Title text={focus._port.path} headingLevel={6} /> : ""} </div> - </Card.Body> - <Card.Footer> - <div className="firmwareButton"> - {reconnectButton} - <RegularButton - buttonText={i18n.formatString(i18n.welcome.gotoUpdate, i18n.app.menu.firmwareUpdate)} - styles="primary" - onClick={async () => { - this.props.router.navigate("/firmware-update"); - }} - /> + <div className="icon"> + <IconKeyboard /> </div> - </Card.Footer> - </Card> - </div> + </div> + </Card.Header> + <Card.Body> + <div> + <Title type="warning" text={i18n.welcome.bootloaderTitle} headingLevel={3} /> + <p>{i18n.welcome.description}</p> + + <span className="cardsub"> + <ul style={{ lineHeight: "2rem" }}> + <li>This process will revert your keyboard's configuration back to factory settings.</li> + <li> + {"Before proceeding, we recommend that you "} + <a href="https://support.dygma.com/hc/en-us/articles/360014262298">export and save your layers</a>. + </li> + <li>To exit Bootloader Mode, unplug and replug the USB-C cable to your Neuron.</li> + </ul> + </span> + </div> + </Card.Body> + <Card.Footer> + <div className="firmwareButton"> + {reconnectButton} + <RegularButton + buttonText={i18n.welcome.gotoUpdate} + styles="primary" + onClick={async () => { + navigate("/firmware-update"); + }} + /> + </div> + </Card.Footer> + </Card> </div> - </Container> - </Styles> - ); - } + </div> + </Container> + </Styles> + ); } -export default withRouter(Welcome); +export default Welcome; From 57906d3e153109501c4c1268dbb2d7bdee6fefb4 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Mon, 11 Sep 2023 17:11:15 +0200 Subject: [PATCH 08/25] chore: fixed FWUpdate imports --- src/renderer/views/FirmwareUpdate.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/renderer/views/FirmwareUpdate.js b/src/renderer/views/FirmwareUpdate.js index bb3471c7d..79d1391d7 100644 --- a/src/renderer/views/FirmwareUpdate.js +++ b/src/renderer/views/FirmwareUpdate.js @@ -1,19 +1,24 @@ import React from "react"; import { useMachine } from "@xstate/react"; -import MainProcessSM from "../controller/FlashingSM/MainProcess"; +import MainProcessSM from "@Renderer/controller/FlashingSM/MainProcess"; // Visual components import Styled from "styled-components"; import Container from "react-bootstrap/Container"; // Extra components -import i18n from "../i18n"; +import i18n from "@Renderer/i18n"; // Bazecor components -import PageHeader from "../modules/PageHeader"; -import { FirmwareErrorPanel, FirmwareCheckProcessPanel, FirmwareUpdatePanel, FirmwareUpdateProcess } from "../modules/Firmware"; +import PageHeader from "@Renderer/modules/PageHeader"; +import { + FirmwareErrorPanel, + FirmwareCheckProcessPanel, + FirmwareUpdatePanel, + FirmwareUpdateProcess, +} from "@Renderer/modules/Firmware"; -import { FirmwareLoader } from "../component/Loader"; +import { FirmwareLoader } from "@Renderer/component/Loader"; const Styles = Styled.div` height: inherit; From 661acc215eea8cb3dba5a90b467de3538a2e1a0e Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Mon, 11 Sep 2023 17:39:18 +0200 Subject: [PATCH 09/25] chore: used Typescript for FirwmareUpdate view --- ...reErrorPanel.js => FirmwareErrorPanel.jsx} | 0 .../{FirmwareUpdate.js => FirmwareUpdate.tsx} | 46 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) rename src/renderer/modules/Firmware/{FirmwareErrorPanel.js => FirmwareErrorPanel.jsx} (100%) rename src/renderer/views/{FirmwareUpdate.js => FirmwareUpdate.tsx} (62%) diff --git a/src/renderer/modules/Firmware/FirmwareErrorPanel.js b/src/renderer/modules/Firmware/FirmwareErrorPanel.jsx similarity index 100% rename from src/renderer/modules/Firmware/FirmwareErrorPanel.js rename to src/renderer/modules/Firmware/FirmwareErrorPanel.jsx diff --git a/src/renderer/views/FirmwareUpdate.js b/src/renderer/views/FirmwareUpdate.tsx similarity index 62% rename from src/renderer/views/FirmwareUpdate.js rename to src/renderer/views/FirmwareUpdate.tsx index 79d1391d7..167c4bb50 100644 --- a/src/renderer/views/FirmwareUpdate.js +++ b/src/renderer/views/FirmwareUpdate.tsx @@ -46,10 +46,11 @@ height: inherit; } `; -function FirmwareUpdate(props) { +function FirmwareUpdate(props: any) { + const { allowBeta, toggleFlashing, toggleFwUpdate, onDisconnect, device } = props; const [state, send] = useMachine(MainProcessSM); - const nextBlock = context => { + const nextBlock = (context: any) => { send("NEXT", { data: context }); }; @@ -57,43 +58,46 @@ function FirmwareUpdate(props) { send("RETRY"); }; - const errorBlock = error => { + const errorBlock = (error: any) => { send("ERROR", { data: error }); }; return ( <Styles> - <Container fluid className={`firmware-update center-content`}> + <Container fluid className="firmware-update center-content"> <PageHeader text={i18n.app.menu.firmwareUpdate} /> <div className="panel-wrapper"> - {state.context.Block === -1 ? ( - <FirmwareErrorPanel nextBlock={nextBlock} retryBlock={retryBlock} /> - ) : state.context.Block === 0 ? ( - <FirmwareLoader /> - ) : state.context.Block === 1 ? ( - <FirmwareUpdatePanel - nextBlock={nextBlock} - retryBlock={retryBlock} - errorBlock={errorBlock} - allowBeta={props.allowBeta} - /> - ) : state.context.Block === 2 ? ( + {state.context.Block === -1 ? <FirmwareErrorPanel nextBlock={nextBlock} retryBlock={retryBlock} /> : ""} + {state.context.Block === 0 ? ( + <FirmwareLoader width={undefined} warning={undefined} error={undefined} paused={undefined} /> + ) : ( + "" + )} + {state.context.Block === 1 ? ( + <FirmwareUpdatePanel nextBlock={nextBlock} retryBlock={retryBlock} errorBlock={errorBlock} allowBeta={allowBeta} /> + ) : ( + "" + )} + {state.context.Block === 2 ? ( <FirmwareCheckProcessPanel nextBlock={nextBlock} retryBlock={retryBlock} errorBlock={errorBlock} context={state.context} /> - ) : state.context.Block === 3 ? ( + ) : ( + "" + )} + {state.context.Block === 3 ? ( <FirmwareUpdateProcess nextBlock={nextBlock} retryBlock={retryBlock} errorBlock={errorBlock} context={state.context} - toggleFlashing={props.toggleFlashing} - toggleFwUpdate={props.toggleFwUpdate} - onDisconnect={props.onDisconnect} - device={props.device} + toggleFlashing={toggleFlashing} + toggleFwUpdate={toggleFwUpdate} + onDisconnect={onDisconnect} + device={device} /> ) : ( "" From e55c49761b78968460dee6fb005acd54ff481226 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Tue, 12 Sep 2023 16:55:33 +0200 Subject: [PATCH 10/25] chore: changed format of advBattSettingsModal to tsx --- ...dBatterySettingsModal.jsx => AdvancedBatterySettingsModal.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/renderer/component/Modal/{AdvancedBatterySettingsModal.jsx => AdvancedBatterySettingsModal.tsx} (100%) diff --git a/src/renderer/component/Modal/AdvancedBatterySettingsModal.jsx b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx similarity index 100% rename from src/renderer/component/Modal/AdvancedBatterySettingsModal.jsx rename to src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx From 024a922ed3be4de6e4f0fa18511770373474bfa6 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Wed, 13 Sep 2023 18:37:58 +0200 Subject: [PATCH 11/25] fix: resolved erros with advBattery settings --- src/declaration.d.ts | 2 + .../Modal/AdvancedBatterySettingsModal.tsx | 75 ++++++++++++++---- src/renderer/i18n/en.js | 1 + .../Battery/AdvancedBatterySettings.tsx | 14 +++- .../modules/Settings/EnergyManagement.tsx | 8 +- src/renderer/types/wireless.ts | 25 ++++-- src/renderer/views/Wireless.tsx | 78 +++++++++++-------- 7 files changed, 144 insertions(+), 59 deletions(-) diff --git a/src/declaration.d.ts b/src/declaration.d.ts index 1ec17c251..8ad297d53 100644 --- a/src/declaration.d.ts +++ b/src/declaration.d.ts @@ -4,3 +4,5 @@ declare module "*.mp4"; declare module "*.png"; declare module "*.gif"; declare module "*.svg"; + +declare module "@appigram/react-rangeslider"; diff --git a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx index a7e759b6a..ad45c0a1f 100644 --- a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx +++ b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx @@ -12,27 +12,60 @@ import Title from "@Renderer/component/Title"; import { Badge } from "@Renderer/component/Badge"; import { RegularButton } from "@Renderer/component/Button"; import { ToggleButtons } from "@Renderer/component/ToggleButtons"; +import { AdvancedEnergyManagementProps } from "@Renderer/types/wireless"; -import i18n from "../../i18n"; +import i18n from "@Renderer/i18n"; -function AdvancedBatterySettingsModal({ showModal, setShowModal }) { +function AdvancedBatterySettingsModal(props: AdvancedEnergyManagementProps) { + const { wireless, changeWireless, showModal, setShowModal } = props; const RFModes = [ { name: "Low", - value: "low", + value: 0, index: 0, }, { name: "Medium", - value: "medium", + value: 1, index: 1, }, { name: "High", - value: "high", + value: 2, index: 2, }, ]; + + const setBrightness = async (value: number) => { + const newWireless = { ...wireless }; + newWireless.brightness = (value * 255) / 100; + changeWireless(newWireless); + }; + + const setBrightnessUG = async (value: number) => { + const newWireless = { ...wireless }; + newWireless.brightnessUG = (value * 255) / 100; + changeWireless(newWireless); + }; + + const setIdleleds = async (value: number) => { + const newWireless = { ...wireless }; + newWireless.idleleds = value * 60; + changeWireless(newWireless); + }; + + const setFade = async (value: any) => { + const newWireless = { ...wireless }; + newWireless.fade = value.target.checked ? 1 : 0; + changeWireless(newWireless); + }; + + const setRfPower = async (value: number) => { + const newWireless = { ...wireless }; + newWireless.rf.power = value; + changeWireless(newWireless); + }; + return ( <Modal size="xl" show={showModal} onHide={() => setShowModal(false)} aria-labelledby="contained-modal-title-vcenter" centered> <Modal.Header closeButton> @@ -52,7 +85,7 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) { <Col lg={5}> <div className="slider-wrapper"> <span className="tagsfix slider-label">0%</span> - <Slider min={1} max={100} value={80} onChange={() => {}} /> + <Slider min={1} max={100} value={Math.round((wireless.brightness * 100) / 255)} onChange={setBrightness} /> <span className="tagsfix slider-label">100%</span> </div> </Col> @@ -64,7 +97,19 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) { <Col lg={5}> <div className="slider-wrapper"> <span className="tagsfix slider-label">0%</span> - <Slider min={1} max={100} value={80} onChange={() => {}} /> + <Slider min={1} max={100} value={Math.round((wireless.brightnessUG * 100) / 255)} onChange={setBrightnessUG} /> + <span className="tagsfix slider-label">100%</span> + </div> + </Col> + </Row> + <Row className="card-preferences--option justify-between"> + <Col lg={5}> + <Title text={i18n.wireless.energyManagement.settings.idleLedsTime} headingLevel={6} /> + </Col> + <Col lg={5}> + <div className="slider-wrapper"> + <span className="tagsfix slider-label">0%</span> + <Slider min={1} max={60} value={Math.round(wireless.idleleds / 60)} onChange={setIdleleds} /> <span className="tagsfix slider-label">100%</span> </div> </Col> @@ -81,7 +126,7 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) { <Col sm={8} lg={5}> <Title text={i18n.wireless.energyManagement.settings.highlightLayerChangingDesc} headingLevel={6} /> </Col> - <Form.Check type="switch" id="toggleLayerHighlight" checked={false} onChange={() => {}} /> + <Form.Check type="switch" id="toggleLayerHighlight" checked={wireless.fade === 1} onChange={setFade} /> </Row> </Card.Body> </Card> @@ -99,13 +144,13 @@ function AdvancedBatterySettingsModal({ showModal, setShowModal }) { headingLevel={6} /> </Col> - <ToggleButtons selectDarkMode={() => {}} value="medium" listElements={RFModes} style="flex" size="sm" /> - </Row> - <Row className="card-preferences--option justify-between"> - <Col sm={8} lg={5}> - <Title text={i18n.wireless.energyManagement.settings.reduceRFFrequency} headingLevel={6} /> - </Col> - <Form.Check type="switch" id="toggleLayerHighlight" checked={false} onChange={() => {}} /> + <ToggleButtons + selectDarkMode={setRfPower} + value={wireless.rf.power} + listElements={RFModes} + style="flex" + size="sm" + /> </Row> </Card.Body> </Card> diff --git a/src/renderer/i18n/en.js b/src/renderer/i18n/en.js index 6fae94bd1..f4d8bd227 100644 --- a/src/renderer/i18n/en.js +++ b/src/renderer/i18n/en.js @@ -495,6 +495,7 @@ const English = { maximumLED: "Maximum LED intensity", maximumLEDBackLight: "Maximum Per-key LED intensity while the device is NOT connected by cable", maximumLEDUnderglow: "Maximum Underglow intensity while the device is NOT connected by cable", + idleLedsTime: "time to turn off LEDs when waiting while the device is NOT connected by cable", highBatteryImpact: "High battery impact", lowBatteryImpact: "Low battery impact", highlightLayerChanging: "Highlight layer changing", diff --git a/src/renderer/modules/Battery/AdvancedBatterySettings.tsx b/src/renderer/modules/Battery/AdvancedBatterySettings.tsx index 98dce01de..9c4d6236a 100644 --- a/src/renderer/modules/Battery/AdvancedBatterySettings.tsx +++ b/src/renderer/modules/Battery/AdvancedBatterySettings.tsx @@ -5,7 +5,8 @@ import Title from "@Renderer/component/Title"; import { IconSettings } from "@Renderer/component/Icon"; import { RegularButton } from "@Renderer/component/Button"; import { AdvancedBatterySettingsModal } from "@Renderer/component/Modal"; -import i18n from "../../i18n"; +import i18n from "@Renderer/i18n"; +import { EnergyManagementProps } from "@Renderer/types/wireless"; const Styles = Styled.div` .settingsWrapper { @@ -41,7 +42,8 @@ const Styles = Styled.div` } `; -function AdvancedBatterySettings() { +function AdvancedBatterySettings(props: EnergyManagementProps) { + const { wireless, changeWireless, toggleSavingMode } = props; const [showModal, setShowModal] = useState(false); return ( <Styles> @@ -54,7 +56,13 @@ function AdvancedBatterySettings() { <RegularButton icoSVG={<IconSettings />} styles="short" onClick={() => setShowModal(true)} /> </div> </div> - <AdvancedBatterySettingsModal showModal={showModal} setShowModal={setShowModal} /> + <AdvancedBatterySettingsModal + showModal={showModal} + setShowModal={setShowModal} + wireless={wireless} + changeWireless={changeWireless} + toggleSavingMode={toggleSavingMode} + /> </Styles> ); } diff --git a/src/renderer/modules/Settings/EnergyManagement.tsx b/src/renderer/modules/Settings/EnergyManagement.tsx index c964f29da..d7b025e9a 100644 --- a/src/renderer/modules/Settings/EnergyManagement.tsx +++ b/src/renderer/modules/Settings/EnergyManagement.tsx @@ -5,7 +5,7 @@ import Styled from "styled-components"; import Card from "react-bootstrap/Card"; // Modules -import { SavingMode } from "@Renderer/modules/Battery"; +import { AdvancedBatterySettings, SavingMode } from "@Renderer/modules/Battery"; // Internal components import Title from "@Renderer/component/Title"; import { IconThunder } from "@Renderer/component/Icon"; @@ -45,7 +45,7 @@ padding-top: 24px; `; function EnergyManagement(props: EnergyManagementProps) { - const { wireless, toggleSavingMode } = props; + const { wireless, changeWireless, toggleSavingMode } = props; return ( <Styles> <Card className="overflowFix card-preferences"> @@ -53,8 +53,8 @@ function EnergyManagement(props: EnergyManagementProps) { <Title text={i18n.wireless.energyManagement.title} headingLevel={3} svgICO={<IconThunder />} /> </Card.Title> <Card.Body className="py-0"> - {/* <AdvancedBatterySettings /> */} - <SavingMode wireless={wireless} toggleSavingMode={toggleSavingMode} /> + <AdvancedBatterySettings wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> + <SavingMode wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> </Card.Body> </Card> </Styles> diff --git a/src/renderer/types/wireless.ts b/src/renderer/types/wireless.ts index 65311a97a..49b3443af 100644 --- a/src/renderer/types/wireless.ts +++ b/src/renderer/types/wireless.ts @@ -25,15 +25,21 @@ export interface WirelessInterface { disable: number; }; bluetooth: { - devices: number; - state: number; - stability: number; + infoChannel1: string; + infoChannel2: string; + infoChannel3: string; + infoChannel4: string; + infoChannel5: string; + deviceName: string; }; rf: { channelHop: number; - state: number; - stability: number; + power: number; }; + brightness: number; + brightnessUG: number; + fade: number; + idleleds: number; } export interface BatterySettingsProps { @@ -45,7 +51,16 @@ export interface BatterySettingsProps { export interface EnergyManagementProps { wireless: WirelessInterface; + changeWireless: (wireless: WirelessInterface) => void; + toggleSavingMode: () => void; +} + +export interface AdvancedEnergyManagementProps { + wireless: WirelessInterface; + changeWireless: (wireless: WirelessInterface) => void; toggleSavingMode: () => void; + showModal: boolean; + setShowModal: (show: boolean) => void; } export interface RFSettingsProps { diff --git a/src/renderer/views/Wireless.tsx b/src/renderer/views/Wireless.tsx index d0d71fc51..ec3f26c3d 100644 --- a/src/renderer/views/Wireless.tsx +++ b/src/renderer/views/Wireless.tsx @@ -49,15 +49,21 @@ const initialWireless = { disable: 0, }, bluetooth: { - devices: 0, - state: 0, - stability: 0, + infoChannel1: "", + infoChannel2: "", + infoChannel3: "", + infoChannel4: "", + infoChannel5: "", + deviceName: "", }, rf: { channelHop: 0, - state: 0, - stability: 0, + power: 0, }, + brightness: 0, + brightnessUG: 0, + fade: false, + idleleds: 0, }; function Wireless(props: WirelessPropsInterface) { @@ -87,28 +93,40 @@ function Wireless(props: WirelessPropsInterface) { wireless.battery.savingMode = parseInt(batteryMode, 10) > 0; }); - // Energy commands + // Energy saving commands - await focus.command("wireless.energy.modes").then(energyModes => { - wireless.energy.modes = energyModes; + await focus.command("led.brightness.wireless").then(brightness => { + wireless.brightness = brightness ? parseInt(brightness, 10) : 0; }); - await focus.command("wireless.energy.currentMode").then(energyMode => { - wireless.energy.currentMode = energyMode; + await focus.command("led.brightnessUG.wireless").then(brightnessUG => { + wireless.brightnessUG = brightnessUG ? parseInt(brightnessUG, 10) : 0; }); - await focus.command("wireless.energy.disable").then(energyDisable => { - wireless.energy.disable = energyDisable; + await focus.command("led.fade").then(fade => { + wireless.fade = fade ? parseInt(fade, 10) > 0 : false; + }); + await focus.command("idleleds.wireless").then(idleleds => { + wireless.idleleds = idleleds ? parseInt(idleleds, 10) : 0; }); // Bluetooth commands - await focus.command("wireless.bluetooth.devices").then(bluetoothDevices => { - wireless.bluetooth.devices = bluetoothDevices; + await focus.command("wireless.bluetooth.infoChannel 1").then(infoChannel1 => { + wireless.bluetooth.infoChannel1 = infoChannel1; + }); + await focus.command("wireless.bluetooth.infoChannel 2").then(infoChannel2 => { + wireless.bluetooth.infoChannel2 = infoChannel2; + }); + await focus.command("wireless.bluetooth.infoChannel 3").then(infoChannel3 => { + wireless.bluetooth.infoChannel3 = infoChannel3; }); - await focus.command("wireless.bluetooth.state").then(bluetoothState => { - wireless.bluetooth.state = bluetoothState; + await focus.command("wireless.bluetooth.infoChannel 4").then(infoChannel4 => { + wireless.bluetooth.infoChannel4 = infoChannel4; }); - await focus.command("wireless.bluetooth.stability").then(bluetoothStability => { - wireless.bluetooth.stability = bluetoothStability; + await focus.command("wireless.bluetooth.infoChannel 5").then(infoChannel5 => { + wireless.bluetooth.infoChannel5 = infoChannel5; + }); + await focus.command("wireless.bluetooth.deviceName").then(bluetoothState => { + wireless.bluetooth.deviceName = bluetoothState; }); // rf commands @@ -116,11 +134,8 @@ function Wireless(props: WirelessPropsInterface) { await focus.command("wireless.rf.channelHop").then(rfChannelHop => { wireless.rf.channelHop = rfChannelHop; }); - await focus.command("wireless.rf.state").then(rfState => { - wireless.rf.state = rfState; - }); - await focus.command("wireless.rf.stability").then(rfStability => { - wireless.rf.stability = rfStability; + await focus.command("wireless.rf.power").then(rfPower => { + wireless.rf.power = rfPower ? parseInt(rfPower, 10) : 0; }); setWireless(wireless); @@ -166,15 +181,14 @@ function Wireless(props: WirelessPropsInterface) { // Commands to be sent to the keyboard await focus.command("wireless.battery.savingMode", wireless.battery.savingMode ? 1 : 0); - await focus.command("wireless.energy.modes", wireless.energy.modes); - await focus.command("wireless.energy.currentMode", wireless.energy.currentMode); - await focus.command("wireless.energy.disable", wireless.energy.disable); - await focus.command("wireless.bluetooth.devices", wireless.bluetooth.devices); - await focus.command("wireless.bluetooth.state", wireless.bluetooth.state); - await focus.command("wireless.bluetooth.stability", wireless.bluetooth.stability); + await focus.command("wireless.bluetooth.deviceName", wireless.bluetooth.deviceName); await focus.command("wireless.rf.channelHop", wireless.rf.channelHop); - await focus.command("wireless.rf.state", wireless.rf.state); - await focus.command("wireless.rf.stability", wireless.rf.stability); + await focus.command("wireless.rf.power", wireless.rf.power); + + await focus.command("led.brightness.wireless", wireless.brightness); + await focus.command("led.brightnessUG.wireless", wireless.brightnessUG); + await focus.command("led.fade", wireless.fade); + await focus.command("idleleds.wireless", wireless.idleleds * 60); } if (loading) <LogoLoader />; @@ -203,7 +217,7 @@ function Wireless(props: WirelessPropsInterface) { toggleSavingMode={toggleSavingMode} isCharging={false} /> - <EnergyManagement wireless={wireless} toggleSavingMode={toggleSavingMode} /> + <EnergyManagement wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> </Col> <Col lg={6}> <RFSettings wireless={wireless} changeWireless={changeWireless} sendRePair={sendRePairCommand} /> From d0c45b75b7bac8388d19ab16b78e821295e3644c Mon Sep 17 00:00:00 2001 From: AlexDygma <alex@dygma.com> Date: Thu, 14 Sep 2023 12:08:01 +0200 Subject: [PATCH 12/25] solved data issues with latest FW --- .../component/Modal/AdvancedBatterySettingsModal.tsx | 7 ++++--- src/renderer/views/Wireless.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx index ad45c0a1f..378dc9e87 100644 --- a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx +++ b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx @@ -51,6 +51,7 @@ function AdvancedBatterySettingsModal(props: AdvancedEnergyManagementProps) { const setIdleleds = async (value: number) => { const newWireless = { ...wireless }; newWireless.idleleds = value * 60; + console.log("idleleds new value", value, newWireless.idleleds); changeWireless(newWireless); }; @@ -108,9 +109,9 @@ function AdvancedBatterySettingsModal(props: AdvancedEnergyManagementProps) { </Col> <Col lg={5}> <div className="slider-wrapper"> - <span className="tagsfix slider-label">0%</span> - <Slider min={1} max={60} value={Math.round(wireless.idleleds / 60)} onChange={setIdleleds} /> - <span className="tagsfix slider-label">100%</span> + <span className="tagsfix slider-label">off </span> + <Slider min={0} max={60} value={Math.round(wireless.idleleds / 60)} onChange={setIdleleds} /> + <span className="tagsfix slider-label">60 min</span> </div> </Col> </Row> diff --git a/src/renderer/views/Wireless.tsx b/src/renderer/views/Wireless.tsx index ec3f26c3d..780571778 100644 --- a/src/renderer/views/Wireless.tsx +++ b/src/renderer/views/Wireless.tsx @@ -62,7 +62,7 @@ const initialWireless = { }, brightness: 0, brightnessUG: 0, - fade: false, + fade: 0, idleleds: 0, }; @@ -102,7 +102,7 @@ function Wireless(props: WirelessPropsInterface) { wireless.brightnessUG = brightnessUG ? parseInt(brightnessUG, 10) : 0; }); await focus.command("led.fade").then(fade => { - wireless.fade = fade ? parseInt(fade, 10) > 0 : false; + wireless.fade = fade ? parseInt(fade, 10) : 0; }); await focus.command("idleleds.wireless").then(idleleds => { wireless.idleleds = idleleds ? parseInt(idleleds, 10) : 0; @@ -188,7 +188,9 @@ function Wireless(props: WirelessPropsInterface) { await focus.command("led.brightness.wireless", wireless.brightness); await focus.command("led.brightnessUG.wireless", wireless.brightnessUG); await focus.command("led.fade", wireless.fade); - await focus.command("idleleds.wireless", wireless.idleleds * 60); + await focus.command("idleleds.wireless", wireless.idleleds); + + destroyContext(); } if (loading) <LogoLoader />; From 5810a06c4a68867ef943da91776f9f04776c31a8 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 12:22:43 +0200 Subject: [PATCH 13/25] fix: wireless features were using wrong focus access methods --- .../Modal/AdvancedBatterySettingsModal.tsx | 1 - .../modules/Battery/AdvancedBatterySettings.tsx | 3 +-- src/renderer/modules/Battery/SavingMode.tsx | 9 +++++++-- .../modules/Settings/BatterySettings.tsx | 1 - .../modules/Settings/EnergyManagement.tsx | 6 +++--- src/renderer/types/wireless.ts | 3 --- src/renderer/views/Wireless.tsx | 17 ++--------------- 7 files changed, 13 insertions(+), 27 deletions(-) diff --git a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx index 378dc9e87..6f2d3b668 100644 --- a/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx +++ b/src/renderer/component/Modal/AdvancedBatterySettingsModal.tsx @@ -51,7 +51,6 @@ function AdvancedBatterySettingsModal(props: AdvancedEnergyManagementProps) { const setIdleleds = async (value: number) => { const newWireless = { ...wireless }; newWireless.idleleds = value * 60; - console.log("idleleds new value", value, newWireless.idleleds); changeWireless(newWireless); }; diff --git a/src/renderer/modules/Battery/AdvancedBatterySettings.tsx b/src/renderer/modules/Battery/AdvancedBatterySettings.tsx index 9c4d6236a..390e161b4 100644 --- a/src/renderer/modules/Battery/AdvancedBatterySettings.tsx +++ b/src/renderer/modules/Battery/AdvancedBatterySettings.tsx @@ -43,7 +43,7 @@ const Styles = Styled.div` `; function AdvancedBatterySettings(props: EnergyManagementProps) { - const { wireless, changeWireless, toggleSavingMode } = props; + const { wireless, changeWireless } = props; const [showModal, setShowModal] = useState(false); return ( <Styles> @@ -61,7 +61,6 @@ function AdvancedBatterySettings(props: EnergyManagementProps) { setShowModal={setShowModal} wireless={wireless} changeWireless={changeWireless} - toggleSavingMode={toggleSavingMode} /> </Styles> ); diff --git a/src/renderer/modules/Battery/SavingMode.tsx b/src/renderer/modules/Battery/SavingMode.tsx index f5b26eae2..46e9c6b4a 100644 --- a/src/renderer/modules/Battery/SavingMode.tsx +++ b/src/renderer/modules/Battery/SavingMode.tsx @@ -53,7 +53,12 @@ h5 { } `; -function SavingMode({ wireless, toggleSavingMode }: EnergyManagementProps) { +function SavingMode({ wireless, changeWireless }: EnergyManagementProps) { + const toggleSavingBatteryMode = () => { + const newWireless = { ...wireless }; + newWireless.battery.savingMode = !wireless.battery.savingMode; + changeWireless(newWireless); + }; return ( <Styles> <Title text={i18n.wireless.energyManagement.lowPowerMode} headingLevel={5} /> @@ -71,7 +76,7 @@ function SavingMode({ wireless, toggleSavingMode }: EnergyManagementProps) { type="switch" id="settingSavingMode" checked={wireless.battery ? wireless.battery.savingMode : false} - onChange={toggleSavingMode} + onChange={toggleSavingBatteryMode} /> </Form> </div> diff --git a/src/renderer/modules/Settings/BatterySettings.tsx b/src/renderer/modules/Settings/BatterySettings.tsx index 506d79749..bb3de8c25 100644 --- a/src/renderer/modules/Settings/BatterySettings.tsx +++ b/src/renderer/modules/Settings/BatterySettings.tsx @@ -32,7 +32,6 @@ padding-top: 24px; function BatterySettings(props: BatterySettingsProps) { const { wireless } = props; - // console.log("Wireless: ", wireless); return ( <Styles> <Card className="overflowFix card-preferences"> diff --git a/src/renderer/modules/Settings/EnergyManagement.tsx b/src/renderer/modules/Settings/EnergyManagement.tsx index d7b025e9a..9bdc02364 100644 --- a/src/renderer/modules/Settings/EnergyManagement.tsx +++ b/src/renderer/modules/Settings/EnergyManagement.tsx @@ -45,7 +45,7 @@ padding-top: 24px; `; function EnergyManagement(props: EnergyManagementProps) { - const { wireless, changeWireless, toggleSavingMode } = props; + const { wireless, changeWireless } = props; return ( <Styles> <Card className="overflowFix card-preferences"> @@ -53,8 +53,8 @@ function EnergyManagement(props: EnergyManagementProps) { <Title text={i18n.wireless.energyManagement.title} headingLevel={3} svgICO={<IconThunder />} /> </Card.Title> <Card.Body className="py-0"> - <AdvancedBatterySettings wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> - <SavingMode wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> + <AdvancedBatterySettings wireless={wireless} changeWireless={changeWireless} /> + <SavingMode wireless={wireless} changeWireless={changeWireless} /> </Card.Body> </Card> </Styles> diff --git a/src/renderer/types/wireless.ts b/src/renderer/types/wireless.ts index 49b3443af..66760ed16 100644 --- a/src/renderer/types/wireless.ts +++ b/src/renderer/types/wireless.ts @@ -45,20 +45,17 @@ export interface WirelessInterface { export interface BatterySettingsProps { wireless: WirelessInterface; changeWireless: (wireless: WirelessInterface) => void; - toggleSavingMode: () => void; isCharging: boolean; } export interface EnergyManagementProps { wireless: WirelessInterface; changeWireless: (wireless: WirelessInterface) => void; - toggleSavingMode: () => void; } export interface AdvancedEnergyManagementProps { wireless: WirelessInterface; changeWireless: (wireless: WirelessInterface) => void; - toggleSavingMode: () => void; showModal: boolean; setShowModal: (show: boolean) => void; } diff --git a/src/renderer/views/Wireless.tsx b/src/renderer/views/Wireless.tsx index 780571778..b4ac5cc34 100644 --- a/src/renderer/views/Wireless.tsx +++ b/src/renderer/views/Wireless.tsx @@ -153,14 +153,6 @@ function Wireless(props: WirelessPropsInterface) { console.log("command returned", result); } - async function toggleSavingMode() { - const focus = new Focus(); - await focus.command("wireless.battery.savingMode", !wireless.battery.savingMode ? 1 : 0); - const newWireless = { ...wireless }; - newWireless.battery.savingMode = !wireless.battery.savingMode; - setWireless(newWireless); - } - async function destroyContext() { setWireless(initialWireless); setModified(false); @@ -213,13 +205,8 @@ function Wireless(props: WirelessPropsInterface) { </Row> <Row> <Col lg={6}> - <BatterySettings - wireless={wireless} - changeWireless={changeWireless} - toggleSavingMode={toggleSavingMode} - isCharging={false} - /> - <EnergyManagement wireless={wireless} changeWireless={changeWireless} toggleSavingMode={toggleSavingMode} /> + <BatterySettings wireless={wireless} changeWireless={changeWireless} isCharging={false} /> + <EnergyManagement wireless={wireless} changeWireless={changeWireless} /> </Col> <Col lg={6}> <RFSettings wireless={wireless} changeWireless={changeWireless} sendRePair={sendRePairCommand} /> From 3814f85aa038c05d2cb37791e87a6acedf0c9577 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 12:42:12 +0200 Subject: [PATCH 14/25] fix: added types for react-rangeslider --- package.json | 1 + src/declaration.d.ts | 2 -- yarn.lock | 7 +++++++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 8932047f4..69f3a86a3 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "@appigram/react-rangeslider": "2.2.10", "@octokit/core": "^4.2.1", "@serialport/parser-delimiter": "^10.0.0", + "@types/react-rangeslider": "^2.2.4", "@xstate/react": "^3.2.2", "async": "^3.2.4", "axios": "^1.4.0", diff --git a/src/declaration.d.ts b/src/declaration.d.ts index 8ad297d53..1ec17c251 100644 --- a/src/declaration.d.ts +++ b/src/declaration.d.ts @@ -4,5 +4,3 @@ declare module "*.mp4"; declare module "*.png"; declare module "*.gif"; declare module "*.svg"; - -declare module "@appigram/react-rangeslider"; diff --git a/yarn.lock b/yarn.lock index 4fd917b56..4db61dbf1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2628,6 +2628,13 @@ dependencies: "@types/react" "*" +"@types/react-rangeslider@^2.2.4": + version "2.2.4" + resolved "https://registry.yarnpkg.com/@types/react-rangeslider/-/react-rangeslider-2.2.4.tgz#191e3d3418d35ea2ef65b3795531cba1d0e37a0d" + integrity sha512-WUgIfk7pCvat5QbTpJDh/0m3e8NZvqzVy3RXTaU8UaDliNM+SBz8hFsIfVXhwN/ruOvILOvCdh2+D6sKvzr+Ng== + dependencies: + "@types/react" "*" + "@types/react-redux@^7.1.20": version "7.1.25" resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.25.tgz#de841631205b24f9dfb4967dd4a7901e048f9a88" From cd89b0135324d26a427d14dff0ae9db116e08efb Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 12:52:29 +0200 Subject: [PATCH 15/25] fix: added definition for typescript types of rangeslider --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 97e9d55ad..0059c053b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,8 @@ "*": ["node_modules/*"], "@Assets/*": ["src/static/*"], "@Renderer/*": ["src/renderer/*"], - "@Types/*": ["src/renderer/types/*"] + "@Types/*": ["src/renderer/types/*"], + "@appigram/react-rangeslider": ["./node_modules/@types/react-rangeslider"] } }, "include": ["src/**/*"], From 757ac21eb279fc67c943330dfd83bd19a987e824 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 13:07:37 +0200 Subject: [PATCH 16/25] fix: solved firmwareUpdate tsx issues due to wrong definitions --- .../modules/Firmware/FirmwareCheckProcessPanel.js | 13 +++---------- .../modules/Firmware/FirmwareErrorPanel.jsx | 8 -------- .../modules/Firmware/FirmwareUpdateProcess.js | 8 -------- 3 files changed, 3 insertions(+), 26 deletions(-) diff --git a/src/renderer/modules/Firmware/FirmwareCheckProcessPanel.js b/src/renderer/modules/Firmware/FirmwareCheckProcessPanel.js index acf94c4f8..088ecfb63 100644 --- a/src/renderer/modules/Firmware/FirmwareCheckProcessPanel.js +++ b/src/renderer/modules/Firmware/FirmwareCheckProcessPanel.js @@ -18,8 +18,8 @@ import React, { useState, useEffect } from "react"; import Styled from "styled-components"; import { useMachine } from "@xstate/react"; -import i18n from "../../i18n"; import SemVer from "semver"; +import i18n from "../../i18n"; // State machine import DeviceChecks from "../../controller/FlashingSM/DeviceChecks"; @@ -162,15 +162,8 @@ height:inherit; } `; -/** - * This FirmwareUpdatePanel function returns a module that wrap all modules and components to manage the first steps of firware update. - * The object will accept the following parameters - * - * @param {number} disclaimerCard - Number that indicates the software when the installation will begin. - * @returns {<FirmwareUpdatePanel>} FirmwareUpdatePanel component. - */ - -function FirmwareCheckProcessPanel({ nextBlock, retryBlock, context }) { +function FirmwareCheckProcessPanel(props) { + const { nextBlock, retryBlock, context } = props; const [state, send] = useMachine(DeviceChecks, { context: { device: context.device } }); const [listItems, setlistItems] = useState([]); const [loading, setLoading] = useState(true); diff --git a/src/renderer/modules/Firmware/FirmwareErrorPanel.jsx b/src/renderer/modules/Firmware/FirmwareErrorPanel.jsx index 65d1ceeef..0aa93eb1b 100644 --- a/src/renderer/modules/Firmware/FirmwareErrorPanel.jsx +++ b/src/renderer/modules/Firmware/FirmwareErrorPanel.jsx @@ -191,14 +191,6 @@ width: 100%; } `; -/** - * This FirmwareUpdatePanel function returns a module that wrap all modules and components to manage the first steps of firware update. - * The object will accept the following parameters - * - * @param {number} disclaimerCard - Number that indicates the software when the installation will begin. - * @returns {<FirmwareUpdatePanel>} FirmwareUpdatePanel component. - */ - function FirmwareErrorPanel({ nextBlock, retryBlock }) { const [state, send] = useMachine(FWSelection); const [handleError, setHandleError] = useState(false); diff --git a/src/renderer/modules/Firmware/FirmwareUpdateProcess.js b/src/renderer/modules/Firmware/FirmwareUpdateProcess.js index 99ba34787..197599a42 100644 --- a/src/renderer/modules/Firmware/FirmwareUpdateProcess.js +++ b/src/renderer/modules/Firmware/FirmwareUpdateProcess.js @@ -90,14 +90,6 @@ height: inherit; } `; -/** - * This FirmwareUpdateProcess function returns a module that wrap all modules and components to manage the first steps of firware update. - * The object will accept the following parameters - * - * @param {number} disclaimerCard - Number that indicates the software when the installation will begin. - * @returns {<FirmwareUpdateProcess>} FirmwareUpdateProcess component. - */ - function FirmwareUpdateProcess(props) { const { nextBlock, retryBlock, context, toggleFlashing, toggleFwUpdate, onDisconnect, device } = props; const [toggledFlashing, sendToggledFlashing] = useState(false); From 174f3cede03813851511af97ffd7f12b54346193 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 16:14:30 +0200 Subject: [PATCH 17/25] feat: added ESC key injection before flashing procedure --- .../controller/FlashingSM/DeviceChecks.js | 148 +++++++++--------- 1 file changed, 71 insertions(+), 77 deletions(-) diff --git a/src/renderer/controller/FlashingSM/DeviceChecks.js b/src/renderer/controller/FlashingSM/DeviceChecks.js index bfbd8ba25..fb28db443 100644 --- a/src/renderer/controller/FlashingSM/DeviceChecks.js +++ b/src/renderer/controller/FlashingSM/DeviceChecks.js @@ -5,15 +5,14 @@ import Backup from "../../../api/backup"; const keyboardSetup = async context => { if (context.device.bootloader) return { RaiseBrightness: undefined }; try { - let focus = new Focus(); + const focus = new Focus(); if (context.device.info.product === "Raise") { await focus.command("led.mode 1"); - let brightness = await focus.command("led.brightness"); + const brightness = await focus.command("led.brightness"); await focus.command("led.brightness 255"); return { RaiseBrightness: brightness }; - } else { - await focus.command("upgrade.start"); } + await focus.command("upgrade.start"); } catch (error) { console.warn("error when querying the device"); console.error(error); @@ -23,9 +22,9 @@ const keyboardSetup = async context => { }; const GetLSideData = async () => { - let result = {}; + const result = {}; try { - let focus = new Focus(); + const focus = new Focus(); result.leftSideConn = String(await focus.command("upgrade.keyscanner.isConnected 1")).includes("true"); result.leftSideBoot = String(await focus.command("upgrade.keyscanner.isBootloader 1")).includes("true"); } catch (error) { @@ -37,9 +36,9 @@ const GetLSideData = async () => { }; const GetRSideData = async () => { - let result = {}; + const result = {}; try { - let focus = new Focus(); + const focus = new Focus(); result.rightSideConn = String(await focus.command("upgrade.keyscanner.isConnected 0")).includes("true"); result.rightSideBoot = String(await focus.command("upgrade.keyscanner.isBootloader 0")).includes("true"); } catch (error) { @@ -53,16 +52,21 @@ const GetRSideData = async () => { const CreateBackup = async context => { let backup; try { - let bkp = new Backup(); + const bkp = new Backup(); const commands = await bkp.Commands(); backup = await bkp.DoBackup(commands, context.device.chipID); await bkp.SaveBackup(backup); + const focus = new Focus(); + let keymap = await focus.command("keymap.custom"); + keymap = keymap.split(" "); + keymap[0] = "41"; + await focus.command(`keymap.custom ${keymap.join(" ")}`); } catch (error) { console.warn("error when creating Backup of the device"); console.error(error); throw new Error(error); } - return { backup: backup }; + return { backup }; }; const DeviceChecks = createMachine( @@ -78,51 +82,51 @@ const DeviceChecks = createMachine( sideLeftBL: false, sideRightOK: true, sideRightBL: false, - backup: undefined + backup: undefined, }, states: { PerfSetup: { id: "PerfSetup", entry: [ - (context, event) => { + () => { console.log("Performing setup"); - } + }, ], invoke: { id: "keyboardSetup", - src: (context, data) => keyboardSetup(context), + src: context => keyboardSetup(context), onDone: { actions: [ assign((context, event) => { if (event.data.RaiseBrightness) { return { - RaiseBrightness: event.data.RaiseBrightness + RaiseBrightness: event.data.RaiseBrightness, }; } }), assign({ - stateblock: (context, event) => 1 + stateblock: () => 1, }), - raise("internal") - ] + raise("internal"), + ], }, onError: { target: "failure", - actions: assign({ error: (context, event) => event }) - } + actions: assign({ error: (context, event) => event }), + }, }, on: [ { event: "*", target: "validateStatus", cond: "doNotRequireSideCheck" }, { event: "*", target: "success", cond: "bootloaderMode" }, - { event: "*", target: "LSideCheck", cond: "requireSideCheck" } - ] + { event: "*", target: "LSideCheck", cond: "requireSideCheck" }, + ], }, LSideCheck: { id: "LSideCheck", entry: [ - (context, event) => { + () => { console.log("Checking left side"); - } + }, ], invoke: { id: "GetLSideData", @@ -134,23 +138,23 @@ const DeviceChecks = createMachine( console.log(event); return { sideLeftOk: event.data.leftSideConn, - sideLeftBL: event.data.leftSideBoot + sideLeftBL: event.data.leftSideBoot, }; }), assign({ - stateblock: (context, event) => 2 - }) - ] + stateblock: () => 2, + }), + ], }, - onError: "failure" - } + onError: "failure", + }, }, RSideCheck: { id: "RSideCheck", entry: [ - (context, event) => { + () => { console.log("Checking right side"); - } + }, ], invoke: { id: "GetRSideData", @@ -162,48 +166,48 @@ const DeviceChecks = createMachine( console.log(event); return { sideRightOK: event.data.rightSideConn, - sideRightBL: event.data.rightSideBoot + sideRightBL: event.data.rightSideBoot, }; }), assign({ - stateblock: (context, event) => 3 - }) - ] + stateblock: () => 3, + }), + ], }, - onError: "failure" - } + onError: "failure", + }, }, validateStatus: { id: "validateStatus", entry: [ - (context, event) => { + () => { console.log("Validating status, waiting for UPDATE"); - } + }, ], invoke: { id: "CreateBackup", - src: (context, data) => CreateBackup(context), + src: context => CreateBackup(context), onDone: { actions: [ assign((context, event) => { console.log(event); return { - backup: event.data.backup + backup: event.data.backup, }; }), assign({ - stateblock: (context, event) => (context.device.info.product === "Raise" ? 0 : 5) + stateblock: context => (context.device.info.product === "Raise" ? 0 : 5), }), - (context, event) => { + () => { console.log("Backup ready"); }, - raise("AUTOPRESSED") - ] + raise("AUTOPRESSED"), + ], }, onError: { target: "failure", - actions: assign({ error: (context, event) => event }) - } + actions: assign({ error: (context, event) => event }), + }, }, on: { PRESSED: { @@ -211,48 +215,38 @@ const DeviceChecks = createMachine( cond: "allStepsClear", actions: [ assign({ - stateblock: (context, event) => 6 - }) - ] + stateblock: () => 6, + }), + ], }, AUTOPRESSED: { target: "success", - cond: "RaiseStepsClear" + cond: "RaiseStepsClear", }, RETRY: { - target: "PerfSetup" - } - } + target: "PerfSetup", + }, + }, }, failure: { on: { - RETRY: "PerfSetup" - } + RETRY: "PerfSetup", + }, }, success: { - type: "final" - } - } + type: "final", + }, + }, }, { guards: { - requireSideCheck: (context, event) => { - return !context.device.bootloader == true && context.device.info.product !== "Raise"; - }, - doNotRequireSideCheck: (context, event) => { - return !context.device.bootloader == true && context.device.info.product === "Raise"; - }, - bootloaderMode: (context, event) => { - return context.device.bootloader == true; - }, - allStepsClear: (context, event) => { - return context.sideLeftOk == true && context.sideRightOK == true && context.backup !== undefined; - }, - RaiseStepsClear: (context, event) => { - return context.device.info.product === "Raise" && context.backup !== undefined; - } - } - } + requireSideCheck: context => !context.device.bootloader === true && context.device.info.product !== "Raise", + doNotRequireSideCheck: context => !context.device.bootloader === true && context.device.info.product === "Raise", + bootloaderMode: context => context.device.bootloader === true, + allStepsClear: context => context.sideLeftOk === true && context.sideRightOK === true && context.backup !== undefined, + RaiseStepsClear: context => context.device.info.product === "Raise" && context.backup !== undefined, + }, + }, ); export default DeviceChecks; From 8528912dec95f50e2b13f2660af0a7aa65b512a1 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 14 Sep 2023 17:25:14 +0200 Subject: [PATCH 18/25] fix: nested macro selector now shows selected nest properly --- .../controller/FlashingSM/MainProcess.js | 75 +++++++++---------- src/renderer/modules/KeysTabs/MacroTab.js | 13 ++-- 2 files changed, 42 insertions(+), 46 deletions(-) diff --git a/src/renderer/controller/FlashingSM/MainProcess.js b/src/renderer/controller/FlashingSM/MainProcess.js index 036fb262c..27e9c2cb0 100644 --- a/src/renderer/controller/FlashingSM/MainProcess.js +++ b/src/renderer/controller/FlashingSM/MainProcess.js @@ -1,96 +1,91 @@ -import context from "react-bootstrap/esm/AccordionContext"; -import { createMachine, assign, raise } from "xstate"; +import { createMachine, assign } from "xstate"; const MainProcessSM = createMachine({ predictableActionArguments: true, id: "FlahsingProcessLogic", initial: "FWSelectionCard", context: { - Block: 0 + Block: 0, }, states: { FWSelectionCard: { id: "FWSelectionCard", entry: [ - (context, event) => { + () => { // This will error at .flag console.log("First Block"); }, - assign({ Block: (context, event) => 1 }) + assign({ Block: () => 1 }), ], on: { NEXT: { target: "DeviceChecksCard", - actions: assign((context, event) => { - return { - firmwareList: event.data.firmwareList, - firmwares: event.data.firmwares, - device: event.data.device, - isUpdated: event.data.isUpdated, - isBeta: event.data.isBeta - }; - }) + actions: assign((context, event) => ({ + firmwareList: event.data.firmwareList, + firmwares: event.data.firmwares, + device: event.data.device, + isUpdated: event.data.isUpdated, + isBeta: event.data.isBeta, + })), }, RETRY: { target: "FWSelectionCard", actions: assign({ Block: (context, event) => (context.Block = 0) }) }, - ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] } - } + ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] }, + }, }, DeviceChecksCard: { id: "DeviceChecksCard", entry: [ - (context, event) => { + () => { // This will error at .flag console.log("Second Block"); }, - assign({ Block: (context, event) => 2 }) + assign({ Block: () => 2 }), ], on: { NEXT: { target: "FlashingProcedureCard", - actions: assign((context, event) => { - return { - backup: event.data.backup, - sideLeftOk: event.data.sideLeftOk, - sideLeftBL: event.data.sideLeftBL, - sideRightOK: event.data.sideRightOK, - sideRightBL: event.data.sideRightBL, - RaiseBrightness: event.data.RaiseBrightness - }; - }) + actions: assign((context, event) => ({ + backup: event.data.backup, + sideLeftOk: event.data.sideLeftOk, + sideLeftBL: event.data.sideLeftBL, + sideRightOK: event.data.sideRightOK, + sideRightBL: event.data.sideRightBL, + RaiseBrightness: event.data.RaiseBrightness, + })), }, RETRY: ["FWSelectionCard", assign({ Block: (context, event) => (context.Block = 0) })], - ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] } - } + ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] }, + }, }, FlashingProcedureCard: { id: "FlashingProcedureCard", entry: [ - (context, event) => { + () => { // This will error at .flag console.log("Third Block"); }, - assign({ Block: (context, event) => 3 }) + assign({ Block: () => 3 }), ], on: { NEXT: ["success"], RETRY: ["FWSelectionCard", assign({ Block: (context, event) => (context.Block = 0) })], - ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] } - } + ERROR: { target: "error", actions: [assign({ errorCause: (context, event) => event.data })] }, + }, }, error: { id: "error", entry: [ - (context, event) => { + () => { console.log("Error Card entry"); }, - assign({ Block: (context, event) => -1 }) + assign({ Block: () => -1 }), ], on: { - RETRY: ["FWSelectionCard", assign({ Block: (context, event) => (context.Block = 0) })] - } + RETRY: ["FWSelectionCard", assign({ Block: (context, event) => (context.Block = 0) })], + }, }, - success: { type: "final" } - } + success: { type: "final" }, + }, }); export default MainProcessSM; diff --git a/src/renderer/modules/KeysTabs/MacroTab.js b/src/renderer/modules/KeysTabs/MacroTab.js index d96bf9780..0e4284670 100644 --- a/src/renderer/modules/KeysTabs/MacroTab.js +++ b/src/renderer/modules/KeysTabs/MacroTab.js @@ -36,18 +36,18 @@ class MacroTab extends Component { constructor(props) { super(props); this.state = { - selected: props.selectedMacro === 0 ? 1 : 0, + selected: 0, }; } // update value when dropdown is changed changeSelected = selected => { - this.setState({ selected }); + this.setState({ selected: parseInt(selected, 10) }); }; changeSelectedStd = selected => { - this.setState({ selected }); - this.props.onMacrosPress(parseInt(selected) + 53852); + this.setState({ selected: parseInt(selected, 10) }); + this.props.onMacrosPress(parseInt(selected, 10) + 53852); }; // sendMacro function to props onMacrosPress function to send macro to MacroCreator @@ -57,9 +57,10 @@ class MacroTab extends Component { render() { const { macros, selectedMacro, keyCode, isStandardView } = this.props; + const { selected } = this.state; const macrosAux = macros.map((item, index) => { const macrosContainer = {}; - if (item.name == "") { + if (item.name === "") { macrosContainer.text = i18n.general.noname; } else { macrosContainer.text = item.name; @@ -94,7 +95,7 @@ class MacroTab extends Component { <Select value={ macrosAux.length > 0 && macrosAux[this.state.selected] !== undefined && macrosAux[this.state.selected].text - ? macrosAux[this.state.selected].text + ? macrosAux[this.state.selected].value : "Loading" } listElements={macrosAux} From ad6117d87aa654df02575e46d2cfea840dbda066 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Fri, 15 Sep 2023 12:56:18 +0200 Subject: [PATCH 19/25] refactor: transformed PageHeader to Typescript --- .../{PageHeader.js => PageHeader.tsx} | 30 +- src/renderer/modules/PageHeader/Types.ts | 14 + .../modules/PageHeader/{index.js => index.ts} | 3 +- src/renderer/views/FirmwareUpdate.tsx | 2 +- src/renderer/views/LayoutEditor.js | 2 +- src/renderer/views/MacroEditor.js | 2 +- src/renderer/views/Preferences.js | 20 +- src/renderer/views/SelectKeyboard.tsx | 56 ++-- src/renderer/views/SuperkeysEditor.js | 306 +++++++++--------- src/renderer/views/Welcome.tsx | 2 +- src/renderer/views/Wireless.tsx | 2 +- 11 files changed, 221 insertions(+), 218 deletions(-) rename src/renderer/modules/PageHeader/{PageHeader.js => PageHeader.tsx} (83%) create mode 100644 src/renderer/modules/PageHeader/Types.ts rename src/renderer/modules/PageHeader/{index.js => index.ts} (89%) diff --git a/src/renderer/modules/PageHeader/PageHeader.js b/src/renderer/modules/PageHeader/PageHeader.tsx similarity index 83% rename from src/renderer/modules/PageHeader/PageHeader.js rename to src/renderer/modules/PageHeader/PageHeader.tsx index 9c9454c7b..714b24155 100644 --- a/src/renderer/modules/PageHeader/PageHeader.js +++ b/src/renderer/modules/PageHeader/PageHeader.tsx @@ -16,8 +16,8 @@ */ import React from "react"; -import PropTypes from "prop-types"; import Styled from "styled-components"; +import { PageHeaderType } from "./Types"; import Title from "../../component/Title"; import Saving from "../Saving"; @@ -95,18 +95,9 @@ z-index: 300; } `; -function PageHeader({ - size, - text, - style, - contentSelector, - colorEditor, - isColorActive, - showSaving, - saveContext, - destroyContext, - inContext, -}) { +function PageHeader(props: PageHeaderType) { + const { size, text, style, contentSelector, colorEditor, isColorActive, showSaving, saveContext, destroyContext, inContext } = + props; return ( <Style className={`${style === "pageHeaderFlatBottom" ? "pageHeaderSticky" : ""}`}> <div className={`pageHeader ${size && size} ${style && style} ${isColorActive ? "extraPanelActive" : ""}`}> @@ -114,7 +105,6 @@ function PageHeader({ <Title text={text} headingLevel={2} /> </div> <div className="pageTools"> - {/* //onSelect, itemList, selectedItem, deleteItem, subtitle */} {contentSelector || ""} {showSaving ? <Saving saveContext={saveContext} destroyContext={destroyContext} inContext={inContext} /> : ""} </div> @@ -123,17 +113,5 @@ function PageHeader({ </Style> ); } -PageHeader.propTypes = { - size: PropTypes.number, - text: PropTypes.string, - style: PropTypes.string, - contentSelector: PropTypes.any, - colorEditor: PropTypes.any, - isColorActive: PropTypes.bool, - showSaving: PropTypes.bool, - saveContext: PropTypes.any, - destroyContext: PropTypes.any, - inContext: PropTypes.bool, -}; export default PageHeader; diff --git a/src/renderer/modules/PageHeader/Types.ts b/src/renderer/modules/PageHeader/Types.ts new file mode 100644 index 000000000..bed49855e --- /dev/null +++ b/src/renderer/modules/PageHeader/Types.ts @@ -0,0 +1,14 @@ +import { ReactNode } from "react"; + +export interface PageHeaderType { + size?: number; + text: string; + style?: string; + contentSelector?: ReactNode | undefined; + colorEditor?: ReactNode | undefined; + isColorActive?: boolean; + showSaving?: boolean; + saveContext?: unknown | undefined; + destroyContext?: unknown | undefined; + inContext?: boolean; +} diff --git a/src/renderer/modules/PageHeader/index.js b/src/renderer/modules/PageHeader/index.ts similarity index 89% rename from src/renderer/modules/PageHeader/index.js rename to src/renderer/modules/PageHeader/index.ts index 16cf1968d..185171e58 100644 --- a/src/renderer/modules/PageHeader/index.js +++ b/src/renderer/modules/PageHeader/index.ts @@ -15,5 +15,6 @@ */ import PageHeader from "./PageHeader"; +import { PageHeaderType } from "./Types"; -export { PageHeader as default }; +export { PageHeader, PageHeaderType }; diff --git a/src/renderer/views/FirmwareUpdate.tsx b/src/renderer/views/FirmwareUpdate.tsx index 167c4bb50..0a5a39fac 100644 --- a/src/renderer/views/FirmwareUpdate.tsx +++ b/src/renderer/views/FirmwareUpdate.tsx @@ -10,7 +10,7 @@ import Container from "react-bootstrap/Container"; import i18n from "@Renderer/i18n"; // Bazecor components -import PageHeader from "@Renderer/modules/PageHeader"; +import { PageHeader } from "@Renderer/modules/PageHeader"; import { FirmwareErrorPanel, FirmwareCheckProcessPanel, diff --git a/src/renderer/views/LayoutEditor.js b/src/renderer/views/LayoutEditor.js index afc06ca46..eca2783a1 100644 --- a/src/renderer/views/LayoutEditor.js +++ b/src/renderer/views/LayoutEditor.js @@ -32,7 +32,7 @@ import ConfirmationDialog from "@Renderer/component/ConfirmationDialog"; import { CopyFromDialog } from "@Renderer/component/CopyFromDialog"; // Modules -import PageHeader from "@Renderer/modules/PageHeader"; +import { PageHeader } from "@Renderer/modules/PageHeader"; import ColorEditor from "@Renderer/modules/ColorEditor"; import { KeyPickerKeyboard } from "@Renderer/modules/KeyPickerKeyboard"; import StandardView from "@Renderer/modules/StandardView"; diff --git a/src/renderer/views/MacroEditor.js b/src/renderer/views/MacroEditor.js index 8da9cb347..191ce92fb 100644 --- a/src/renderer/views/MacroEditor.js +++ b/src/renderer/views/MacroEditor.js @@ -34,7 +34,7 @@ import Callout from "@Renderer/component/Callout"; import { IconFloppyDisk } from "@Renderer/component/Icon"; import { MacroSelector } from "@Renderer/component/Select"; import ToastMessage from "@Renderer/component/ToastMessage"; -import PageHeader from "@Renderer/modules/PageHeader"; +import { PageHeader } from "@Renderer/modules/PageHeader"; import MacroCreator from "@Renderer/modules/Macros/MacroCreator"; import TimelineEditorManager from "@Renderer/modules/Macros/TimelineEditorManager"; diff --git a/src/renderer/views/Preferences.js b/src/renderer/views/Preferences.js index 16f225980..68074affc 100644 --- a/src/renderer/views/Preferences.js +++ b/src/renderer/views/Preferences.js @@ -26,22 +26,22 @@ import Col from "react-bootstrap/Col"; import Form from "react-bootstrap/Form"; import Spinner from "react-bootstrap/Spinner"; import { toast } from "react-toastify"; -import i18n from "../i18n"; +import i18n from "@Renderer/i18n"; import "react-toastify/dist/ReactToastify.css"; // Custom modules imports -import { KeyboardSettings } from "../modules/Settings/KeyboardSettings"; -import { BackupSettings, GeneralSettings, NeuronSettings, AdvancedSettings } from "../modules/Settings"; +import { KeyboardSettings } from "@Renderer/modules/Settings/KeyboardSettings"; +import { BackupSettings, GeneralSettings, NeuronSettings, AdvancedSettings } from "@Renderer/modules/Settings"; +import { PageHeader } from "@Renderer/modules/PageHeader"; +import ToastMessage from "@Renderer/component/ToastMessage"; +import { RegularButton } from "@Renderer/component/Button"; +import { IconFloppyDisk } from "@Renderer/component/Icon"; +import Version from "@Renderer/component/Version/Version"; + +import Store from "@Renderer/utils/Store"; import Focus from "../../api/focus"; import Backup from "../../api/backup"; -import PageHeader from "../modules/PageHeader"; -import ToastMessage from "../component/ToastMessage"; -import { RegularButton } from "../component/Button"; -import { IconFloppyDisk } from "../component/Icon"; - -import Store from "../utils/Store"; -import Version from "@Renderer/component/Version/Version"; const store = Store.getStore(); diff --git a/src/renderer/views/SelectKeyboard.tsx b/src/renderer/views/SelectKeyboard.tsx index ecf99fd13..5083f3545 100644 --- a/src/renderer/views/SelectKeyboard.tsx +++ b/src/renderer/views/SelectKeyboard.tsx @@ -29,7 +29,7 @@ import Modal from "react-bootstrap/Modal"; import Dropdown from "react-bootstrap/Dropdown"; import { USBDevice, USBDeviceDescriptor, NonSerialDeviceDescriptor } from "@Renderer/types/devices"; -import PageHeader from "../modules/PageHeader"; +import { PageHeader } from "../modules/PageHeader"; import { RegularButton } from "../component/Button"; import Focus from "../../api/focus"; @@ -255,16 +255,16 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { const serialDevices = await focus.find(...Hardware.serial); // console.log("Printing devices: ", serialDevices); const supportedDevices = []; - let device; + let localDevice; for (let i = 0; i < serialDevices.length; i += 1) { - device = serialDevices[i]; + localDevice = serialDevices[i]; /* eslint-disable no-await-in-loop */ - device.accessible = await focus.isDeviceAccessible(device); + localDevice.accessible = await focus.isDeviceAccessible(localDevice); // console.log("before checking device supported", device, focus); - if (device.accessible && (await focus.isDeviceSupported(device))) { - supportedDevices.push(device); - } else if (!device.accessible) { - supportedDevices.push(device); + if (localDevice.accessible && (await focus.isDeviceSupported(localDevice))) { + supportedDevices.push(localDevice); + } else if (!localDevice.accessible) { + supportedDevices.push(localDevice); } /* eslint-disable no-await-in-loop */ } @@ -292,7 +292,7 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { setDevices(list); return list; } - }, [findNonSerialKeyboards, device, focus]); + }, [devices, focus, findNonSerialKeyboards, connected]); useEffect(() => { const finder = () => findKeyboards(); @@ -476,13 +476,13 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { return; } - Hardware.serial.forEach(device => { + Hardware.serial.forEach(dev => { if ( - file.device.usb.productId === device.usb.productId && - file.device.usb.vendorId === device.usb.vendorId && - file.device.info.keyboardType === device.info.keyboardType + file.device.usb.productId === dev.usb.productId && + file.device.usb.vendorId === dev.usb.vendorId && + file.device.info.keyboardType === dev.info.keyboardType ) { - file.device.components = device.components; + file.device.components = dev.components; } }); @@ -507,13 +507,13 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { return; } console.log("Exchange focus for file access"); - Hardware.serial.forEach(device => { + Hardware.serial.forEach(dev => { if ( - virtualKeyboard.device.usb.productId === device.usb.productId && - virtualKeyboard.device.usb.vendorId === device.usb.vendorId && - virtualKeyboard.device.info.keyboardType === device.info.keyboardType + virtualKeyboard.device.usb.productId === dev.usb.productId && + virtualKeyboard.device.usb.vendorId === dev.usb.vendorId && + virtualKeyboard.device.info.keyboardType === dev.info.keyboardType ) { - virtualKeyboard.device.components = device.components; + virtualKeyboard.device.components = dev.components; } }); @@ -549,23 +549,23 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { const getDeviceItems = () => { const neurons = store.get("neurons"); - const result = devices.map((device, index) => { - console.log("checking device :", device); - if (device.device.bootloader) + const result = devices.map((dev, index) => { + console.log("checking device :", dev); + if (dev.device.bootloader) return { index, - displayName: device?.device?.info?.displayName, + displayName: dev?.device?.info?.displayName, userName: "", - path: device.path || i18n.keyboardSelect.unknown, + path: dev.path || i18n.keyboardSelect.unknown, }; - const preparedSN = device.productId === "2201" ? device.serialNumber.slice(0, 32) : device.serialNumber; - const neuron = neurons.find(neuron => neuron.id.toLowerCase() === preparedSN.toLowerCase()); + const preparedSN = dev.productId === "2201" ? dev.serialNumber.slice(0, 32) : dev.serialNumber; + const neuron = neurons.find(n => n.id.toLowerCase() === preparedSN.toLowerCase()); return { index, - displayName: device?.device?.info?.displayName, + displayName: dev?.device?.info?.displayName, userName: neuron ? neuron.name : "", - path: device.path || i18n.keyboardSelect.unknown, + path: dev.path || i18n.keyboardSelect.unknown, }; }); return result; diff --git a/src/renderer/views/SuperkeysEditor.js b/src/renderer/views/SuperkeysEditor.js index dec46a8fe..039697380 100644 --- a/src/renderer/views/SuperkeysEditor.js +++ b/src/renderer/views/SuperkeysEditor.js @@ -24,7 +24,6 @@ import Styled from "styled-components"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import Col from "react-bootstrap/Col"; -import Spinner from "react-bootstrap/Spinner"; import Modal from "react-bootstrap/Modal"; // Components @@ -38,7 +37,7 @@ import ToastMessage from "@Renderer/component/ToastMessage"; import { IconFloppyDisk } from "@Renderer/component/Icon"; // Modules -import PageHeader from "@Renderer/modules/PageHeader"; +import { PageHeader } from "@Renderer/modules/PageHeader"; import { SuperKeysFeatures, SuperkeyActions } from "@Renderer/modules/Superkeys"; import { KeyPickerKeyboard } from "@Renderer/modules/KeyPickerKeyboard"; import StandardView from "@Renderer/modules/StandardView"; @@ -122,7 +121,6 @@ class SuperkeysEditor extends React.Component { macros: [], storedMacros: [], superkeys: [], - storedSuper: [], maxSuperKeys: 128, modified: false, modifiedKeymap: false, @@ -155,8 +153,90 @@ class SuperkeysEditor extends React.Component { await this.configStandarView(); } + handleSaveStandardView = () => { + this.setState({ showStandardView: false, selectedAction: -1 }); + }; + + closeStandardViewModal = code => { + this.onKeyChange(code); + this.setState({ showStandardView: false, selectedAction: -1 }); + }; + + onToggle = () => { + const { isStandardViewSuperkeys } = this.state; + if (isStandardViewSuperkeys) { + this.setState({ isStandardViewSuperkeys: false, selectedAction: -1 }); + } else { + this.setState({ isStandardViewSuperkeys: true, selectedAction: -1 }); + } + }; + + deleteSuperkey = () => { + const { superkeys, selectedSuper } = this.state; + if (superkeys.length > 0) { + let aux = JSON.parse(JSON.stringify(superkeys)); + const selected = selectedSuper; + aux.splice(selected, 1); + aux = aux.map((item, index) => { + const newItem = item; + newItem.id = index; + return newItem; + }); + if (selected >= superkeys.length - 1) { + this.checkKBSuperkeys(aux, aux.length - 1, aux.length + 53980); + } else { + this.checkKBSuperkeys(aux, selected, selected + 53980); + } + } + }; + + duplicateSuperkey = () => { + const { superkeys, selectedSuper } = this.state; + const aux = { ...superkeys[selectedSuper] }; + aux.id = superkeys.length; + aux.name = `Copy of ${aux.name}`; + superkeys.push(aux); + this.updateSuper(superkeys, -1); + this.changeSelected(aux.id); + }; + + addSuperkey = SKname => { + const { superkeys, maxSuperKeys } = this.state; + console.log("TEST", superkeys.length, maxSuperKeys); + if (superkeys.length < maxSuperKeys) { + const aux = superkeys; + const newID = aux.length; + aux.push({ + actions: [], + name: SKname, + id: newID, + superkey: "", + }); + this.updateSuper(aux, newID); + } + }; + + componentDidUpdate(prevProps, prevState) { + const { isStandardViewSuperkeys } = this.state; + if (prevState.isStandardViewSuperkeys !== isStandardViewSuperkeys) { + store.set("settings.isStandardViewSuperkeys", isStandardViewSuperkeys); + } + } + + onKeyChange(keyCode) { + const { superkeys, selectedSuper, selectedAction } = this.state; + const newData = superkeys; + newData[selectedSuper].actions[selectedAction] = keyCode; + console.log("keyCode: ", keyCode); + this.setState({ + superkeys: newData, + modified: true, + }); + } + async loadSuperkeys() { const focus = new Focus(); + const { onDisconnect } = this.props; try { /** * Create property language to the object 'options', to call KeymapDB in Keymap and modify languagu layout @@ -164,15 +244,14 @@ class SuperkeysEditor extends React.Component { const chipID = (await focus.command("hardware.chip_id")).replace(/\s/g, ""); const neurons = store.get("neurons"); let neuron = {}; - if (neurons.some(n => n.id == chipID)) { - console.log(neurons.filter(n => n.id == chipID)); - neuron = neurons.filter(n => n.id == chipID)[0]; + if (neurons.some(n => n.id === chipID)) { + console.log(neurons.filter(n => n.id === chipID)); + [neuron] = neurons.filter(n => n.id === chipID); } this.setState({ neurons, - neuronID: neurons.findIndex(n => n.id == chipID), + neuronID: neurons.findIndex(n => n.id === chipID), storedMacros: neuron.macros, - storedSuper: neuron.superkeys, }); const deviceLang = { ...focus.device, language: true }; focus.commands.keymap = new Keymap(deviceLang); @@ -223,11 +302,13 @@ class SuperkeysEditor extends React.Component { console.log("error when loading SuperKeys"); console.error(e); toast.error(e); - this.props.onDisconnect(); + onDisconnect(); } + return true; } macroTranslator(raw) { + const { storedMacros, macros } = this.state; if (raw === "") { return [ { @@ -267,8 +348,8 @@ class SuperkeysEditor extends React.Component { while (raw.length > iter) { if (kcs > 0) { keyCode.push(raw[iter]); - kcs--; - iter++; + kcs -= 1; + iter += 1; continue; } if (iter !== 0 && type !== 0) { @@ -291,12 +372,12 @@ class SuperkeysEditor extends React.Component { macros[i].id = i; macros[i].name = ""; macros[i].macro = ""; - i++; + i += 1; actions = []; - iter++; + iter += 1; continue; } - iter++; + iter += 1; } actions.push({ type, @@ -309,15 +390,15 @@ class SuperkeysEditor extends React.Component { macros[i].macro = ""; macros = macros.map(macro => { const aux = macro.actions.map(action => { - let aux = 0; + let act = 0; if (action.keyCode.length > 1) { - aux = (action.keyCode[0] << 8) + action.keyCode[1]; + act = (action.keyCode[0] << 8) + action.keyCode[1]; } else { - aux = action.keyCode[0]; + [act] = action.keyCode; } return { type: action.type, - keyCode: aux, + keyCode: act, }; }); return { ...macro, actions: aux }; @@ -325,27 +406,28 @@ class SuperkeysEditor extends React.Component { // TODO: Check if stored macros match the received ones, if they match, retrieve name and apply it to current macros const equal = []; let finalMacros = []; - const stored = this.state.storedMacros; + const stored = storedMacros; console.log(macros, stored); if (stored === undefined) { return macros; } - finalMacros = macros.map((macro, i) => { - if (stored.length > i && stored.length > 0) { - console.log("compare between: ", macro.actions, stored[i].actions); + finalMacros = macros.map((macro, idx) => { + if (stored.length > idx && stored.length > 0) { + console.log("compare between: ", macro.actions, stored[idx].actions); const aux = macro; - aux.name = stored[i].name; + aux.name = stored[idx].name; aux.macro = macro.actions.map(k => this.keymapDB.parse(k.keyCode).label).join(" "); return aux; } return macro; }); this.setState({ equalMacros: equal }); - console.log("Checking differences", this.state.macros, finalMacros); + console.log("Checking differences", macros, finalMacros); return finalMacros; } superTranslator(raw) { + const { neurons, neuronID } = this.state; let superkey = []; const superkeys = []; let iter = 0; @@ -359,26 +441,27 @@ class SuperkeysEditor extends React.Component { // console.log(iter, raw[iter], superkey); if (raw[iter] === 0) { superkeys[superindex] = { actions: superkey, name: "", id: superindex }; - superindex++; + superindex += 1; superkey = []; } else { superkey.push(raw[iter]); } - iter++; + iter += 1; } superkeys[superindex] = { actions: superkey, name: "", id: superindex }; console.log(`Got Superkeys:${JSON.stringify(superkeys)} from ${raw}`); if ( - superkeys[0].actions == undefined || - superkeys[0].actions == [0] || - superkeys[0].actions.filter(v => v === 0).length == superkeys[0].length - 1 + superkeys[0].actions === undefined || + superkeys[0].actions === [0] || + superkeys[0].actions.filter(v => v === 0).length === superkeys[0].length - 1 ) return []; // TODO: Check if stored superKeys match the received ones, if they match, retrieve name and apply it to current superKeys let finalSuper = []; - const stored = this.state.neurons[this.state.neuronID].superkeys; - finalSuper = superkeys.map((superk, i) => { + const stored = neurons[neuronID].superkeys; + finalSuper = superkeys.map((superky, i) => { + const superk = superky; superk.id = i; if (stored.length > i && stored.length > 0) { const aux = superk; @@ -388,29 +471,29 @@ class SuperkeysEditor extends React.Component { return superk; }); console.log("final superkeys", finalSuper); - this.setState({ storedSuper: stored }); return finalSuper; } superkeyMap(superkeys) { if ( superkeys.length === 0 || - (superkeys.length === 1 && superkeys[0].actions == []) || - (superkeys.length === 1 && superkeys[0].actions == [0]) + (superkeys.length === 1 && superkeys[0].actions.lenght === 0) || + (superkeys.length === 1 && superkeys[0].actions.lenght === 1 && superkeys[0].actions[0] === 0) ) { return Array.from({ length: 512 }, 65535).join(" "); } let keyMap = JSON.parse(JSON.stringify(superkeys)); console.log("First", JSON.parse(JSON.stringify(keyMap))); - keyMap = keyMap.map(sk => { + keyMap = keyMap.map(sky => { + const sk = sky; sk.actions = sk.actions.map(act => { - if (act == 0 || act == null) return 1; + if (act === 0 || act == null) return 1; return act; }); return sk; }); console.log("Third", JSON.parse(JSON.stringify(keyMap))); - keyMap = keyMap.map(superkey => superkey.actions.filter(act => act != 0).concat([0])); + keyMap = keyMap.map(superkey => superkey.actions.filter(act => act !== 0).concat([0])); console.log("Fifth", JSON.parse(JSON.stringify(keyMap))); const mapped = [].concat.apply([], keyMap.flat()).concat([0]).join(" ").replaceAll(",", " "); console.log(mapped, keyMap); @@ -444,13 +527,14 @@ class SuperkeysEditor extends React.Component { } changeAction(id) { - if (this.state.isStandardViewSuperkeys) { + const { isStandardViewSuperkeys, selectedAction } = this.state; + if (isStandardViewSuperkeys) { this.setState({ selectedAction: id < 0 ? 0 : id, showStandardView: true, }); } else { - if (id == this.state.selectedAction) { + if (id === selectedAction) { // Some action is already selected this.setState({ selectedAction: -1, @@ -475,9 +559,10 @@ class SuperkeysEditor extends React.Component { } updateAction(actionNumber, newAction) { + const { superkeys, selectedSuper } = this.state; console.log("launched update action using data:", newAction); - const newData = this.state.superkeys; - newData[this.state.selectedSuper].actions[actionNumber] = newAction; + const newData = superkeys; + newData[selectedSuper].actions[actionNumber] = newAction; this.setState({ superkeys: newData, selectedAction: actionNumber, @@ -485,33 +570,23 @@ class SuperkeysEditor extends React.Component { }); } - onKeyChange(keyCode) { - const newData = this.state.superkeys; - newData[this.state.selectedSuper].actions[this.state.selectedAction] = keyCode; - console.log("keyCode: ", keyCode); - this.setState({ - superkeys: newData, - modified: true, - }); - } - saveName(name) { - const { superkeys } = this.state; - superkeys[this.state.selectedSuper].name = name; + const { superkeys, selectedSuper } = this.state; + superkeys[selectedSuper].name = name; this.setState({ superkeys, modified: true }); } async writeSuper() { const focus = new Focus(); - const { superkeys, modifiedKeymap, keymap } = this.state; + const { superkeys, modifiedKeymap, keymap, neurons, neuronID } = this.state; this.setState({ modified: false, modifiedKeymap: false, }); - const neurons = JSON.parse(JSON.stringify(this.state.neurons)); - neurons[this.state.neuronID].superkeys = superkeys; - console.log(JSON.stringify(neurons)); - store.set("neurons", neurons); + const localNeurons = JSON.parse(JSON.stringify(neurons)); + localNeurons[neuronID].superkeys = superkeys; + console.log(JSON.stringify(localNeurons)); + store.set("neurons", localNeurons); try { await focus.command("superkeys.map", this.superkeyMap(superkeys)); if (modifiedKeymap) { @@ -519,7 +594,7 @@ class SuperkeysEditor extends React.Component { } console.log("Changes saved."); const commands = await this.bkp.Commands(); - const backup = await this.bkp.DoBackup(commands, this.state.neurons[this.state.neuronID].id); + const backup = await this.bkp.DoBackup(commands, neurons[neuronID].id); this.bkp.SaveBackup(backup); toast.success(<ToastMessage title={i18n.editor.superkeys.successFlashTitle} content="" icon={<IconFloppyDisk />} />, { autoClose: 2000, @@ -531,17 +606,18 @@ class SuperkeysEditor extends React.Component { } checkKBSuperkeys(newSuper, newID, SKC) { - if (newSuper.length == 0) { + const { keymap, selected, superkeys } = this.state; + if (newSuper.length === 0) { newSuper = [{ actions: [53, 2101, 1077, 41, 0], name: "Welcome to superkeys", id: 0 }]; newID = 0; } - const LOK = this.state.keymap.custom + const LOK = keymap.custom .map((l, c) => l .map((k, i) => { - if (k.keyCode == SKC) return { layer: c, pos: i, sk: SKC }; + if (k.keyCode === SKC) return { layer: c, pos: i, sk: SKC }; }) - .filter(x => x != undefined), + .filter(x => x !== undefined), ) .flat(); if (LOK.length > 0) { @@ -551,7 +627,7 @@ class SuperkeysEditor extends React.Component { futureSK: newSuper, futureSSK: newID, }); - } else if (this.state.selected != this.state.superkeys.length - 1) { + } else if (selected !== superkeys.length - 1) { this.SortSK(newSuper, newID); } else { this.updateSuper(newSuper, newID); @@ -567,73 +643,29 @@ class SuperkeysEditor extends React.Component { }); } - addSuperkey = SKname => { - console.log("TEST", this.state.superkeys.length, this.state.maxSuperKeys); - if (this.state.superkeys.length < this.state.maxSuperKeys) { - const aux = this.state.superkeys; - const newID = aux.length; - aux.push({ - actions: [], - name: SKname, - id: newID, - superkey: "", - }); - this.updateSuper(aux, newID); - } - }; - - duplicateSuperkey = () => { - const { superkeys, selectedSuper } = this.state; - const aux = { ...this.state.superkeys[selectedSuper] }; - aux.id = this.state.superkeys.length; - aux.name = `Copy of ${aux.name}`; - superkeys.push(aux); - this.updateSuper(superkeys, -1); - this.changeSelected(aux.id); - }; - - deleteSuperkey = () => { - const { superkeys } = this.state; - if (superkeys.length > 0) { - let aux = JSON.parse(JSON.stringify(superkeys)); - const selected = this.state.selectedSuper; - aux.splice(selected, 1); - aux = aux.map((item, index) => { - const aux = item; - aux.id = index; - return aux; - }); - if (selected >= superkeys.length - 1) { - this.checkKBSuperkeys(aux, aux.length - 1, aux.length + 53980); - } else { - this.checkKBSuperkeys(aux, selected, selected + 53980); - } - } - }; - RemoveDeletedSK() { const { keymap } = this.state; const { selectedSuper, superkeys, listToDelete, futureSK, futureSSK } = this.state; let listToDecrease = []; for (const key of superkeys.slice(selectedSuper + 1)) { listToDecrease.push( - this.state.keymap.custom + keymap.custom .map((l, c) => l .map((k, i) => { - if (k.keyCode == key.id + 53980) return { layer: c, pos: i, sk: key.id + 53980 }; + if (k.keyCode === key.id + 53980) return { layer: c, pos: i, sk: key.id + 53980 }; }) - .filter(x => x != undefined), + .filter(x => x !== undefined), ) .flat(), ); } - for (let i = 0; i < listToDelete.length; i++) { + for (let i = 0; i < listToDelete.length; i += 1) { keymap.custom[listToDelete[i].layer][listToDelete[i].pos] = this.keymapDB.parse(0); } console.log("now decreasing... ", listToDecrease.flat()); listToDecrease = listToDecrease.flat(); - for (let i = 0; i < listToDecrease.length; i++) { + for (let i = 0; i < listToDecrease.length; i += 1) { keymap.custom[listToDecrease[i].layer][listToDecrease[i].pos] = this.keymapDB.parse(listToDecrease[i].sk - 1); } this.setState({ @@ -647,25 +679,24 @@ class SuperkeysEditor extends React.Component { } SortSK(newSuper, newID) { - const { keymap } = this.state; - const { selectedSuper, superkeys } = this.state; + const { keymap, selectedSuper, superkeys } = this.state; let listToDecrease = []; for (const key of superkeys.slice(selectedSuper + 1)) { listToDecrease.push( - this.state.keymap.custom + keymap.custom .map((l, c) => l .map((k, i) => { - if (k.keyCode == key.id + 53980) return { layer: c, pos: i, sk: key.id + 53980 }; + if (k.keyCode === key.id + 53980) return { layer: c, pos: i, sk: key.id + 53980 }; }) - .filter(x => x != undefined), + .filter(x => x !== undefined), ) .flat(), ); } console.log("now decreasing... ", listToDecrease.flat()); listToDecrease = listToDecrease.flat(); - for (let i = 0; i < listToDecrease.length; i++) { + for (let i = 0; i < listToDecrease.length; i += 1) { keymap.custom[listToDecrease[i].layer][listToDecrease[i].pos] = this.keymapDB.parse(listToDecrease[i].sk - 1); } this.setState({ @@ -694,52 +725,31 @@ class SuperkeysEditor extends React.Component { } } - componentDidUpdate(prevProps, prevState) { - if (prevState.isStandardViewSuperkeys !== this.state.isStandardViewSuperkeys) { - store.set("settings.isStandardViewSuperkeys", this.state.isStandardViewSuperkeys); - } - } - - onToggle = () => { - if (this.state.isStandardViewSuperkeys) { - this.setState({ isStandardViewSuperkeys: false, selectedAction: -1 }); - } else { - this.setState({ isStandardViewSuperkeys: true, selectedAction: -1 }); - } - }; - - closeStandardViewModal = code => { - this.onKeyChange(code); - this.setState({ showStandardView: false, selectedAction: -1 }); - }; - - handleSaveStandardView = () => { - this.setState({ showStandardView: false, selectedAction: -1 }); - }; - render() { const { currentLanguageLayout, kbtype, selectedSuper, superkeys, - maxSuperKeys, macros, selectedAction, isStandardViewSuperkeys, + listToDelete, + modified, showStandardView, + showDeleteModal, } = this.state; let code = 0; const tempkey = this.keymapDB.parse( - superkeys[selectedSuper] != undefined ? superkeys[selectedSuper].actions[selectedAction] : 0, + superkeys[selectedSuper] !== undefined ? superkeys[selectedSuper].actions[selectedAction] : 0, ); code = this.keymapDB.keySegmentator(tempkey.keyCode); // console.log(selectedSuper, JSON.stringify(code), JSON.stringify(superkeys)); const actions = superkeys.length > 0 && superkeys.length > selectedSuper ? superkeys[selectedSuper].actions : []; const superName = superkeys.length > 0 && superkeys.length > selectedSuper ? superkeys[selectedSuper].name : ""; - const listOfSKK = this.state.listToDelete.map(({ layer, pos, sk }, id) => ( + const listOfSKK = listToDelete.map(({ layer, pos, sk }, id) => ( <Row key={id}> <Col xs={12} className="px-0 text-center gridded"> <p className="titles alignvert">{`Key in layer ${layer + 1} and pos ${pos}`}</p> @@ -767,7 +777,7 @@ class SuperkeysEditor extends React.Component { } saveContext={this.writeSuper} destroyContext={this.loadSuperkeys} - inContext={this.state.modified} + inContext={modified} /> <Callout @@ -821,7 +831,7 @@ class SuperkeysEditor extends React.Component { /> {isStandardViewSuperkeys ? ( <StandardView - showStandardView={this.state.showStandardView} + showStandardView={showStandardView} closeStandardView={this.closeStandardViewModal} handleSave={this.handleSaveStandardView} onKeySelect={this.onKeyChange} @@ -843,7 +853,7 @@ class SuperkeysEditor extends React.Component { )} <Modal - show={this.state.showDeleteModal} + show={showDeleteModal} onHide={this.toggleDeleteModal} size="lg" aria-labelledby="contained-modal-title-vcenter" diff --git a/src/renderer/views/Welcome.tsx b/src/renderer/views/Welcome.tsx index 0085c33eb..35dff2b52 100644 --- a/src/renderer/views/Welcome.tsx +++ b/src/renderer/views/Welcome.tsx @@ -25,7 +25,7 @@ import { useNavigate } from "react-router-dom"; import Focus from "../../api/focus"; import i18n from "../i18n"; -import PageHeader from "../modules/PageHeader"; +import { PageHeader } from "../modules/PageHeader"; import Title from "../component/Title"; import ToastMessage from "../component/ToastMessage"; import { RegularButton } from "../component/Button"; diff --git a/src/renderer/views/Wireless.tsx b/src/renderer/views/Wireless.tsx index b4ac5cc34..6aa0ef59a 100644 --- a/src/renderer/views/Wireless.tsx +++ b/src/renderer/views/Wireless.tsx @@ -10,7 +10,7 @@ import Col from "react-bootstrap/Col"; // Custom component imports import { LogoLoader } from "@Renderer/component/Loader"; import ConnectionStatus from "@Renderer/component/ConnectionStatus"; -import PageHeader from "@Renderer/modules/PageHeader"; +import { PageHeader } from "@Renderer/modules/PageHeader"; import { BatterySettings, EnergyManagement, RFSettings } from "@Renderer/modules/Settings"; // Import Types for wireless From 064d2cbe6ce0ff59a02f553e26c729d5e6c1a48c Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Fri, 15 Sep 2023 13:08:33 +0200 Subject: [PATCH 20/25] fix: solved erratas in repair --- src/renderer/views/SelectKeyboard.tsx | 54 +++++++++++++-------------- src/renderer/views/SuperkeysEditor.js | 30 +++++++-------- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/renderer/views/SelectKeyboard.tsx b/src/renderer/views/SelectKeyboard.tsx index 5083f3545..6872fa2af 100644 --- a/src/renderer/views/SelectKeyboard.tsx +++ b/src/renderer/views/SelectKeyboard.tsx @@ -255,16 +255,16 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { const serialDevices = await focus.find(...Hardware.serial); // console.log("Printing devices: ", serialDevices); const supportedDevices = []; - let localDevice; + let device; for (let i = 0; i < serialDevices.length; i += 1) { - localDevice = serialDevices[i]; + device = serialDevices[i]; /* eslint-disable no-await-in-loop */ - localDevice.accessible = await focus.isDeviceAccessible(localDevice); + device.accessible = await focus.isDeviceAccessible(device); // console.log("before checking device supported", device, focus); - if (localDevice.accessible && (await focus.isDeviceSupported(localDevice))) { - supportedDevices.push(localDevice); - } else if (!localDevice.accessible) { - supportedDevices.push(localDevice); + if (device.accessible && (await focus.isDeviceSupported(device))) { + supportedDevices.push(device); + } else if (!device.accessible) { + supportedDevices.push(device); } /* eslint-disable no-await-in-loop */ } @@ -292,7 +292,7 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { setDevices(list); return list; } - }, [devices, focus, findNonSerialKeyboards, connected]); + }, [findNonSerialKeyboards, device, focus]); useEffect(() => { const finder = () => findKeyboards(); @@ -476,13 +476,13 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { return; } - Hardware.serial.forEach(dev => { + Hardware.serial.forEach(device => { if ( - file.device.usb.productId === dev.usb.productId && - file.device.usb.vendorId === dev.usb.vendorId && - file.device.info.keyboardType === dev.info.keyboardType + file.device.usb.productId === device.usb.productId && + file.device.usb.vendorId === device.usb.vendorId && + file.device.info.keyboardType === device.info.keyboardType ) { - file.device.components = dev.components; + file.device.components = device.components; } }); @@ -507,13 +507,13 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { return; } console.log("Exchange focus for file access"); - Hardware.serial.forEach(dev => { + Hardware.serial.forEach(device => { if ( - virtualKeyboard.device.usb.productId === dev.usb.productId && - virtualKeyboard.device.usb.vendorId === dev.usb.vendorId && - virtualKeyboard.device.info.keyboardType === dev.info.keyboardType + virtualKeyboard.device.usb.productId === device.usb.productId && + virtualKeyboard.device.usb.vendorId === device.usb.vendorId && + virtualKeyboard.device.info.keyboardType === device.info.keyboardType ) { - virtualKeyboard.device.components = dev.components; + virtualKeyboard.device.components = device.components; } }); @@ -549,23 +549,23 @@ const SelectKeyboard: React.FC<SelectKeyboardProps> = (props): JSX.Element => { const getDeviceItems = () => { const neurons = store.get("neurons"); - const result = devices.map((dev, index) => { - console.log("checking device :", dev); - if (dev.device.bootloader) + const result = devices.map((device, index) => { + console.log("checking device :", device); + if (device.device.bootloader) return { index, - displayName: dev?.device?.info?.displayName, + displayName: device?.device?.info?.displayName, userName: "", - path: dev.path || i18n.keyboardSelect.unknown, + path: device.path || i18n.keyboardSelect.unknown, }; - const preparedSN = dev.productId === "2201" ? dev.serialNumber.slice(0, 32) : dev.serialNumber; - const neuron = neurons.find(n => n.id.toLowerCase() === preparedSN.toLowerCase()); + const preparedSN = device.productId === "2201" ? device.serialNumber.slice(0, 32) : device.serialNumber; + const neuron = neurons.find(neuron => neuron.id.toLowerCase() === preparedSN.toLowerCase()); return { index, - displayName: dev?.device?.info?.displayName, + displayName: device?.device?.info?.displayName, userName: neuron ? neuron.name : "", - path: dev.path || i18n.keyboardSelect.unknown, + path: device.path || i18n.keyboardSelect.unknown, }; }); return result; diff --git a/src/renderer/views/SuperkeysEditor.js b/src/renderer/views/SuperkeysEditor.js index 039697380..99ed7260b 100644 --- a/src/renderer/views/SuperkeysEditor.js +++ b/src/renderer/views/SuperkeysEditor.js @@ -343,7 +343,7 @@ class SuperkeysEditor extends React.Component { let type = 0; let keyCode = []; let actions = []; - let macros = []; + let localMacros = []; actions = []; while (raw.length > iter) { if (kcs > 0) { @@ -367,11 +367,11 @@ class SuperkeysEditor extends React.Component { } if (type === 0) { kcs = 0; - macros[i] = {}; - macros[i].actions = actions; - macros[i].id = i; - macros[i].name = ""; - macros[i].macro = ""; + localMacros[i] = {}; + localMacros[i].actions = actions; + localMacros[i].id = i; + localMacros[i].name = ""; + localMacros[i].macro = ""; i += 1; actions = []; iter += 1; @@ -383,12 +383,12 @@ class SuperkeysEditor extends React.Component { type, keyCode, }); - macros[i] = {}; - macros[i].actions = actions; - macros[i].id = i; - macros[i].name = ""; - macros[i].macro = ""; - macros = macros.map(macro => { + localMacros[i] = {}; + localMacros[i].actions = actions; + localMacros[i].id = i; + localMacros[i].name = ""; + localMacros[i].macro = ""; + localMacros = localMacros.map(macro => { const aux = macro.actions.map(action => { let act = 0; if (action.keyCode.length > 1) { @@ -407,11 +407,11 @@ class SuperkeysEditor extends React.Component { const equal = []; let finalMacros = []; const stored = storedMacros; - console.log(macros, stored); + console.log(localMacros, stored); if (stored === undefined) { - return macros; + return localMacros; } - finalMacros = macros.map((macro, idx) => { + finalMacros = localMacros.map((macro, idx) => { if (stored.length > idx && stored.length > 0) { console.log("compare between: ", macro.actions, stored[idx].actions); const aux = macro; From 5ded2daa0864e8aaa72e39c2bdba889346ed6023 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Wed, 20 Sep 2023 10:51:01 +0200 Subject: [PATCH 21/25] chore: cleared erros from MacroEditor.js file --- src/renderer/views/MacroEditor.js | 373 ++++++++++++++++-------------- 1 file changed, 193 insertions(+), 180 deletions(-) diff --git a/src/renderer/views/MacroEditor.js b/src/renderer/views/MacroEditor.js index 191ce92fb..8c0aa2cb1 100644 --- a/src/renderer/views/MacroEditor.js +++ b/src/renderer/views/MacroEditor.js @@ -1,3 +1,4 @@ +/* eslint-disable no-bitwise */ // -*- mode: js-jsx -*- /* Bazecor -- Kaleidoscope Command Center * Copyright (C) 2018, 2019 Keyboardio, Inc. @@ -130,7 +131,6 @@ class MacroEditor extends React.Component { macros: [], superkeys: [], storedMacros: [], - storedSuper: [], maxMacros: 128, modified: false, selectedMacro: 0, @@ -156,139 +156,7 @@ class MacroEditor extends React.Component { await this.loadMacros(); } - async loadMacros() { - const focus = new Focus(); - try { - /** - * Create property language to the object 'options', to call KeymapDB in Keymap and modify languagu layout - */ - const chipID = (await focus.command("hardware.chip_id")).replace(/\s/g, ""); - const neurons = store.get("neurons"); - const neuron = neurons.find(n => n.id === chipID) || {}; - this.setState({ - neurons, - neuronID: neurons.findIndex(n => n.id === chipID), - storedMacros: neuron.macros, - storedSuper: neuron.superkeys, - }); - focus.commands.keymap = new Keymap({ ...focus.device, language: true }); - this.keymapDB = focus.commands.keymap.db; - let kbtype = "iso"; - try { - kbtype = focus.device && focus.device.info.keyboardType === "ISO" ? "iso" : "ansi"; - } catch (error) { - return false; - } - - let tMem = await focus.command("macros.memory"); - tMem = parseInt(tMem); - if (tMem === undefined || tMem < 100) tMem = 2048; - const keymap = await focus.command("keymap"); - const macrosRaw = await focus.command("macros.map"); - const parsedMacros = this.macroTranslator(macrosRaw); - const supersRaw = await focus.command("superkeys.map"); - const parsedSuper = this.superTranslator(supersRaw); - this.setState({ - macros: parsedMacros, - superkeys: parsedSuper, - keymap, - kbtype, - modified: false, - usedMemory: parsedMacros.map(m => m.actions).flat().length, - totalMemory: tMem, - loading: false, - }); - } catch (e) { - toast.error(<ToastMessage title={e} icon={<IconFloppyDisk />} />, { icon: "" }); - this.props.onDisconnect(); - } - } - - macroTranslator(raw) { - if (raw.search(" 0 0") === -1) { - return defaultMacro; - } - const macrosArray = raw.split(" 0 0")[0].split(" ").map(Number); - - // Translate received macros to human readable text - const macros = []; - let iter = 0; - // macros are `0` terminated or when end of macrosArray has been reached, the outer loop - // must cycle once more than the inner - while (iter <= macrosArray.length) { - const actions = []; - while (iter < macrosArray.length) { - const type = macrosArray[iter]; - if (type === 0) { - break; - } - - switch (type) { - case 1: - actions.push({ - type, - keyCode: [(macrosArray[++iter] << 8) + macrosArray[++iter], (macrosArray[++iter] << 8) + macrosArray[++iter]], - }); - break; - case 2: - case 3: - case 4: - case 5: - actions.push({ type, keyCode: (macrosArray[++iter] << 8) + macrosArray[++iter] }); - break; - case 6: - case 7: - case 8: - actions.push({ type, keyCode: macrosArray[++iter] }); - break; - default: - break; - } - - iter++; - } - macros.push({ - actions, - name: "", - macro: "", - }); - iter++; - } - macros.forEach((m, idx) => (m.id = idx)); - - // TODO: Check if stored macros match the received ones, if they match, retrieve name and apply it to current macros - const stored = this.state.storedMacros; - if (stored === undefined || stored.length === 0) { - return macros; - } - return macros.map((macro, i) => { - if (stored.length < i) { - return macro; - } - - return { - ...macro, - name: stored[i]?.name, - macro: macro.actions.map(k => this.keymapDB.parse(k.keyCode).label).join(" "), - }; - }); - } - - duplicateMacro = () => { - if (this.state.macros.length >= this.state.maxMacros) { - return; - } - const { macros } = this.state; - const selected = this.state.selectedMacro; - const aux = { ...this.state.macros[selected] }; - aux.id = this.state.macros.length; - aux.name = `Copy of ${aux.name}`; - macros.push(aux); - this.updateMacros(macros); - this.changeSelected(aux.id); - }; - - superTranslator(raw) { + static superTranslator(raw) { if (raw.search(" 0 0 ") === -1) { return []; } @@ -296,7 +164,7 @@ class MacroEditor extends React.Component { const superkeys = []; let superkey = []; - for (let iter = 0; iter < supersArray.length; iter++) { + for (let iter = 0; iter < supersArray.length; iter += 1) { if (supersArray[iter] === 0) { superkeys.push(superkey); superkey = []; @@ -306,52 +174,53 @@ class MacroEditor extends React.Component { } superkeys.push(superkey); - if (superkeys[0] == [0] || superkeys[0].filter(v => v === 0).length == superkeys[0].length - 1) return []; + if (superkeys[0] === [0] || superkeys[0].filter(v => v === 0).length === superkeys[0].length - 1) return []; return superkeys; } - updateKeyboard(keyboardIdx) { - const macroID = this.state.macros[keyboardIdx].id + 53852; - const customKeymapList = this.state.keymap.custom - .map((layer, layerIdx) => - layer.map((key, pos) => ({ layer: layerIdx, key, pos })).filter(elem => elem.key.keyCode === macroID), - ) - .flat(); - const superkeyList = this.state.superkey - .map((supers, i) => supers.map((action, pos) => ({ i, pos, action })).filter(elem => elem.action === macroID)) - .flat(); - this.setState({ - listToDelete: customKeymapList, - listToDeleteS: superkeyList, - showDeleteModal: true, - }); - } + // Define updateActions function to update the actions of the selected macro + updateActions = actions => { + const { macros, selectedMacro } = this.state; + + const macrosList = macros; + macrosList[selectedMacro].actions = actions; + this.setState({ macros: macrosList, modified: true }); + }; updateMacros(recievedMacros) { + const { startContext } = this.props; this.setState({ macros: recievedMacros, modified: true, usedMemory: recievedMacros.map(m => m.actions).flat().length, }); - this.props.startContext(); + startContext(); } + saveName = data => { + const { macros, selectedMacro } = this.state; + const localMacros = JSON.parse(JSON.stringify(macros)); + localMacros[selectedMacro].name = data; + this.setState({ macros: localMacros, modified: true }); + }; + async writeMacros() { + const { macros, neurons, neuronID, keymap } = this.state; const focus = new Focus(); - const newMacros = this.state.macros; + const newMacros = macros; this.setState({ modified: false, macros: newMacros, storedMacros: newMacros, }); - const neurons = JSON.parse(JSON.stringify(this.state.neurons)); - neurons[this.state.neuronID].macros = newMacros; - store.set("neurons", neurons); + const localNeurons = JSON.parse(JSON.stringify(neurons)); + localNeurons[neuronID].macros = newMacros; + store.set("neurons", localNeurons); try { - await focus.command("macros.map", this.macrosMap(newMacros)); - await focus.command("keymap", this.state.keymap); + await focus.command("macros.map", MacroEditor.macrosMap(newMacros)); + await focus.command("keymap", keymap); const commands = await this.bkp.Commands(); - const backup = await this.bkp.DoBackup(commands, this.state.neurons[this.state.neuronID].id); + const backup = await this.bkp.DoBackup(commands, neurons[neuronID].id); this.bkp.SaveBackup(backup); toast.success(<ToastMessage title={i18n.editor.macros.successFlashTitle} content="" icon={<IconFloppyDisk />} />, { autoClose: 2000, @@ -362,7 +231,7 @@ class MacroEditor extends React.Component { } } - macrosMap(macros) { + static macrosMap(macros) { if (macros.length === 0 || (macros.length === 1 && macros[0].actions === [])) { return defaultMacroString; } @@ -393,12 +262,34 @@ class MacroEditor extends React.Component { .replaceAll(",", " "); } + duplicateMacro = () => { + const { macros, maxMacros, selectedMacro } = this.state; + if (macros.length >= maxMacros) { + return; + } + const selected = selectedMacro; + const aux = { ...macros[selected] }; + aux.id = macros.length; + aux.name = `Copy of ${aux.name}`; + macros.push(aux); + this.updateMacros(macros); + this.changeSelected(aux.id); + }; + changeSelected(id) { this.setState({ selectedMacro: id < 0 ? 0 : id, }); } + addToActions = actions => { + const { macros, selectedMacro } = this.state; + + const macrosList = JSON.parse(JSON.stringify(macros)); + macrosList[selectedMacro].actions = actions; + this.setState({ macros: macrosList, modified: true }); + }; + toggleDeleteModal() { this.setState({ showDeleteModal: false }); } @@ -462,29 +353,151 @@ class MacroEditor extends React.Component { this.updateKeyboard(selected); }; - saveName = data => { - const { macros, selectedMacro } = this.state; - const localMacros = JSON.parse(JSON.stringify(macros)); - localMacros[selectedMacro].name = data; - this.setState({ macros: localMacros, modified: true }); - }; + updateKeyboard(keyboardIdx) { + const { macros, superkey, keymap } = this.state; + const macroID = macros[keyboardIdx].id + 53852; + const customKeymapList = keymap.custom + .map((layer, layerIdx) => + layer.map((key, pos) => ({ layer: layerIdx, key, pos })).filter(elem => elem.key.keyCode === macroID), + ) + .flat(); + const superkeyList = superkey + .map((supers, i) => supers.map((action, pos) => ({ i, pos, action })).filter(elem => elem.action === macroID)) + .flat(); + this.setState({ + listToDelete: customKeymapList, + listToDeleteS: superkeyList, + showDeleteModal: true, + }); + } - // Define updateActions function to update the actions of the selected macro - updateActions = actions => { - const { macros, selectedMacro } = this.state; + macroTranslator(raw) { + const { storedMacros } = this.state; + if (raw.search(" 0 0") === -1) { + return defaultMacro; + } + const macrosArray = raw.split(" 0 0")[0].split(" ").map(Number); - const macrosList = macros; - macrosList[selectedMacro].actions = actions; - this.setState({ macros: macrosList, modified: true }); - }; + // Translate received macros to human readable text + const macros = []; + let iter = 0; + // macros are `0` terminated or when end of macrosArray has been reached, the outer loop + // must cycle once more than the inner + while (iter <= macrosArray.length) { + const actions = []; + while (iter < macrosArray.length) { + const type = macrosArray[iter]; + if (type === 0) { + break; + } - addToActions = actions => { - const { macros, selectedMacro } = this.state; + switch (type) { + case 1: + actions.push({ + type, + keyCode: [ + (macrosArray[(iter += 1)] << 8) + macrosArray[(iter += 1)], + (macrosArray[(iter += 1)] << 8) + macrosArray[(iter += 1)], + ], + }); + break; + case 2: + case 3: + case 4: + case 5: + actions.push({ type, keyCode: (macrosArray[(iter += 1)] << 8) + macrosArray[(iter += 1)] }); + break; + case 6: + case 7: + case 8: + actions.push({ type, keyCode: macrosArray[(iter += 1)] }); + break; + default: + break; + } - const macrosList = JSON.parse(JSON.stringify(macros)); - macrosList[selectedMacro].actions = actions; - this.setState({ macros: macrosList, modified: true }); - }; + iter += 1; + } + macros.push({ + actions, + name: "", + macro: "", + }); + iter += 1; + } + macros.forEach((m, idx) => { + const aux = { ...m }; + aux.id = idx; + return aux; + }); + + // TODO: Check if stored macros match the received ones, if they match, retrieve name and apply it to current macros + const stored = storedMacros; + if (stored === undefined || stored.length === 0) { + return macros; + } + return macros.map((macro, i) => { + if (stored.length < i) { + return macro; + } + + return { + ...macro, + name: stored[i]?.name, + macro: macro.actions.map(k => this.keymapDB.parse(k.keyCode).label).join(" "), + }; + }); + } + + async loadMacros() { + const { onDisconnect } = this.props; + const focus = new Focus(); + try { + /** + * Create property language to the object 'options', to call KeymapDB in Keymap and modify languagu layout + */ + const chipID = (await focus.command("hardware.chip_id")).replace(/\s/g, ""); + const neurons = store.get("neurons"); + const neuron = neurons.find(n => n.id === chipID) || {}; + this.setState({ + neurons, + neuronID: neurons.findIndex(n => n.id === chipID), + storedMacros: neuron.macros, + }); + focus.commands.keymap = new Keymap({ ...focus.device, language: true }); + this.keymapDB = focus.commands.keymap.db; + let kbtype = "iso"; + try { + kbtype = focus.device && focus.device.info.keyboardType === "ISO" ? "iso" : "ansi"; + } catch (error) { + return false; + } + + let tMem = await focus.command("macros.memory"); + tMem = parseInt(tMem, 10); + if (tMem === undefined || tMem < 100) tMem = 2048; + const keymap = await focus.command("keymap"); + const macrosRaw = await focus.command("macros.map"); + const parsedMacros = this.macroTranslator(macrosRaw); + const supersRaw = await focus.command("superkeys.map"); + const parsedSuper = MacroEditor.superTranslator(supersRaw); + this.setState({ + macros: parsedMacros, + superkeys: parsedSuper, + keymap, + kbtype, + modified: false, + usedMemory: parsedMacros.map(m => m.actions).flat().length, + totalMemory: tMem, + loading: false, + }); + return true; + } catch (e) { + toast.error(<ToastMessage title={e} icon={<IconFloppyDisk />} />, { icon: "" }); + onDisconnect(); + return false; + } + } render() { const { From dd5013a892c7c49b1cf6e7f03e3c280feab9b2c7 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Wed, 20 Sep 2023 11:18:15 +0200 Subject: [PATCH 22/25] fix: transform macroEditor to jsx format --- .../views/{MacroEditor.js => MacroEditor.jsx} | 242 +++++++++--------- 1 file changed, 126 insertions(+), 116 deletions(-) rename src/renderer/views/{MacroEditor.js => MacroEditor.jsx} (96%) diff --git a/src/renderer/views/MacroEditor.js b/src/renderer/views/MacroEditor.jsx similarity index 96% rename from src/renderer/views/MacroEditor.js rename to src/renderer/views/MacroEditor.jsx index 8c0aa2cb1..07cc0de6d 100644 --- a/src/renderer/views/MacroEditor.js +++ b/src/renderer/views/MacroEditor.jsx @@ -20,6 +20,7 @@ import React from "react"; import { toast } from "react-toastify"; import Styled from "styled-components"; +import PropTypes from "prop-types"; import Col from "react-bootstrap/Col"; import Container from "react-bootstrap/Container"; @@ -120,6 +121,63 @@ const defaultMacroString = "255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255 255"; class MacroEditor extends React.Component { + static superTranslator(raw) { + if (raw.search(" 0 0 ") === -1) { + return []; + } + const supersArray = raw.split(" 0 0")[0].split(" ").map(Number); + + const superkeys = []; + let superkey = []; + for (let iter = 0; iter < supersArray.length; iter += 1) { + if (supersArray[iter] === 0) { + superkeys.push(superkey); + superkey = []; + } else { + superkey.push(supersArray[iter]); + } + } + superkeys.push(superkey); + + if ( + (Array.isArray(superkeys[0]) && superkeys[0][0] === 0) || + superkeys[0].filter(v => v === 0).length === superkeys[0].length - 1 + ) + return []; + return superkeys; + } + + static macrosMap(macros) { + if (macros.length === 0 || (macros.length === 1 && Array.isArray(macros[0].actions))) { + return defaultMacroString; + } + const mapAction = action => { + switch (action.type) { + case 1: + return [ + [action.type], + [action.keyCode[0] >> 8], + [action.keyCode[0] & 255], + [action.keyCode[1] >> 8], + [action.keyCode[1] & 255], + ]; + case 2: + case 3: + case 4: + case 5: + return [[action.type], [action.keyCode >> 8], [action.keyCode & 255]]; + default: + return [[action.type], [action.keyCode]]; + } + }; + return macros + .map(macro => macro.actions.map(action => mapAction(action)).concat([0])) + .concat([0]) + .flat() + .join(" ") + .replaceAll(",", " "); + } + constructor(props) { super(props); @@ -156,27 +214,62 @@ class MacroEditor extends React.Component { await this.loadMacros(); } - static superTranslator(raw) { - if (raw.search(" 0 0 ") === -1) { - return []; + deleteMacro = () => { + const { macros, selectedMacro } = this.state; + if (macros.length === 0) { + return; } - const supersArray = raw.split(" 0 0")[0].split(" ").map(Number); + const aux = JSON.parse(JSON.stringify(macros)); + const selected = selectedMacro; + aux.splice(selected, 1); + aux.forEach((item, idx) => { + aux.id = idx; + }); + if (selected >= macros.length - 1) { + this.changeSelected(macros.length - 2); + } + this.updateMacros(aux); + this.updateKeyboard(selected); + }; - const superkeys = []; - let superkey = []; - for (let iter = 0; iter < supersArray.length; iter += 1) { - if (supersArray[iter] === 0) { - superkeys.push(superkey); - superkey = []; - } else { - superkey.push(supersArray[iter]); - } + addMacro = name => { + const { macros, maxMacros } = this.state; + if (macros.length >= maxMacros) { + return; } - superkeys.push(superkey); + const aux = macros; + const newID = aux.length; + aux.push({ + actions: [], + name, + id: newID, + macro: "", + }); + this.updateMacros(aux); + this.changeSelected(newID); + }; - if (superkeys[0] === [0] || superkeys[0].filter(v => v === 0).length === superkeys[0].length - 1) return []; - return superkeys; - } + addToActions = actions => { + const { macros, selectedMacro } = this.state; + + const macrosList = JSON.parse(JSON.stringify(macros)); + macrosList[selectedMacro].actions = actions; + this.setState({ macros: macrosList, modified: true }); + }; + + duplicateMacro = () => { + const { macros, maxMacros, selectedMacro } = this.state; + if (macros.length >= maxMacros) { + return; + } + const selected = selectedMacro; + const aux = { ...macros[selected] }; + aux.id = macros.length; + aux.name = `Copy of ${aux.name}`; + macros.push(aux); + this.updateMacros(macros); + this.changeSelected(aux.id); + }; // Define updateActions function to update the actions of the selected macro updateActions = actions => { @@ -187,6 +280,13 @@ class MacroEditor extends React.Component { this.setState({ macros: macrosList, modified: true }); }; + saveName = data => { + const { macros, selectedMacro } = this.state; + const localMacros = JSON.parse(JSON.stringify(macros)); + localMacros[selectedMacro].name = data; + this.setState({ macros: localMacros, modified: true }); + }; + updateMacros(recievedMacros) { const { startContext } = this.props; this.setState({ @@ -197,13 +297,6 @@ class MacroEditor extends React.Component { startContext(); } - saveName = data => { - const { macros, selectedMacro } = this.state; - const localMacros = JSON.parse(JSON.stringify(macros)); - localMacros[selectedMacro].name = data; - this.setState({ macros: localMacros, modified: true }); - }; - async writeMacros() { const { macros, neurons, neuronID, keymap } = this.state; const focus = new Focus(); @@ -231,65 +324,12 @@ class MacroEditor extends React.Component { } } - static macrosMap(macros) { - if (macros.length === 0 || (macros.length === 1 && macros[0].actions === [])) { - return defaultMacroString; - } - const mapAction = action => { - switch (action.type) { - case 1: - return [ - [action.type], - [action.keyCode[0] >> 8], - [action.keyCode[0] & 255], - [action.keyCode[1] >> 8], - [action.keyCode[1] & 255], - ]; - case 2: - case 3: - case 4: - case 5: - return [[action.type], [action.keyCode >> 8], [action.keyCode & 255]]; - default: - return [[action.type], [action.keyCode]]; - } - }; - return macros - .map(macro => macro.actions.map(action => mapAction(action)).concat([0])) - .concat([0]) - .flat() - .join(" ") - .replaceAll(",", " "); - } - - duplicateMacro = () => { - const { macros, maxMacros, selectedMacro } = this.state; - if (macros.length >= maxMacros) { - return; - } - const selected = selectedMacro; - const aux = { ...macros[selected] }; - aux.id = macros.length; - aux.name = `Copy of ${aux.name}`; - macros.push(aux); - this.updateMacros(macros); - this.changeSelected(aux.id); - }; - changeSelected(id) { this.setState({ selectedMacro: id < 0 ? 0 : id, }); } - addToActions = actions => { - const { macros, selectedMacro } = this.state; - - const macrosList = JSON.parse(JSON.stringify(macros)); - macrosList[selectedMacro].actions = actions; - this.setState({ macros: macrosList, modified: true }); - }; - toggleDeleteModal() { this.setState({ showDeleteModal: false }); } @@ -318,41 +358,6 @@ class MacroEditor extends React.Component { this.setState({ selectedList: data }); } - addMacro = name => { - const { macros, maxMacros } = this.state; - if (macros.length >= maxMacros) { - return; - } - const aux = macros; - const newID = aux.length; - aux.push({ - actions: [], - name, - id: newID, - macro: "", - }); - this.updateMacros(aux); - this.changeSelected(newID); - }; - - deleteMacro = () => { - const { macros, selectedMacro } = this.state; - if (macros.length === 0) { - return; - } - const aux = JSON.parse(JSON.stringify(macros)); - const selected = selectedMacro; - aux.splice(selected, 1); - aux.forEach((item, idx) => { - aux.id = idx; - }); - if (selected >= macros.length - 1) { - this.changeSelected(macros.length - 2); - } - this.updateMacros(aux); - this.updateKeyboard(selected); - }; - updateKeyboard(keyboardIdx) { const { macros, superkey, keymap } = this.state; const macroID = macros[keyboardIdx].id + 53852; @@ -514,8 +519,8 @@ class MacroEditor extends React.Component { currentLanguageLayout, loading, } = this.state; - const ListOfMacros = listToDelete.map(({ layer, pos, key }, id) => ( - <Row key={id}> + const ListOfMacros = listToDelete.map(({ layer, pos, key }) => ( + <Row key={`${key}-${pos}`}> <Col xs={12} className="px-0 text-center gridded"> <p className="titles alignvert">{`Key in layer ${layer} and pos ${pos}`}</p> </Col> @@ -533,8 +538,8 @@ class MacroEditor extends React.Component { <Dropdown.Item eventKey={-1} key={`macro-${-1}`} disabled={false}> No Key </Dropdown.Item> - {macros.map((macro, id) => ( - <Dropdown.Item eventKey={macro.id} key={`macro-${id}`} disabled={macro.id === -1}> + {macros.map(macro => ( + <Dropdown.Item eventKey={macro.id} key={`macro-${macro.id}`} disabled={macro.id === -1}> {macro?.name} </Dropdown.Item> ))} @@ -633,4 +638,9 @@ class MacroEditor extends React.Component { } } +MacroEditor.propTypes = { + startContext: PropTypes.func, + onDisconnect: PropTypes.func, +}; + export default MacroEditor; From 83b357c7da9ebe1a774425f31f8cfdc0092bfe72 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Wed, 20 Sep 2023 17:07:19 +0200 Subject: [PATCH 23/25] fix: macro editor did not replace correctly deleted macros in keymap --- src/renderer/views/MacroEditor.jsx | 59 ++++++++++++++++++------------ 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/src/renderer/views/MacroEditor.jsx b/src/renderer/views/MacroEditor.jsx index 07cc0de6d..2cb5eed41 100644 --- a/src/renderer/views/MacroEditor.jsx +++ b/src/renderer/views/MacroEditor.jsx @@ -195,7 +195,7 @@ class MacroEditor extends React.Component { showDeleteModal: false, listToDelete: [], listToDeleteS: [], - selectedList: 0, + selectedList: -1, usedMemory: 0, totalMemory: 0, loading: true, @@ -219,16 +219,18 @@ class MacroEditor extends React.Component { if (macros.length === 0) { return; } - const aux = JSON.parse(JSON.stringify(macros)); const selected = selectedMacro; - aux.splice(selected, 1); - aux.forEach((item, idx) => { - aux.id = idx; + let localMacros = [...macros]; + localMacros.splice(selected, 1); + localMacros = localMacros.map((macro, idx) => { + const item = { ...macro }; + item.id = idx; + return item; }); if (selected >= macros.length - 1) { this.changeSelected(macros.length - 2); } - this.updateMacros(aux); + this.updateMacros(localMacros); this.updateKeyboard(selected); }; @@ -337,10 +339,10 @@ class MacroEditor extends React.Component { ActUponDelete() { const { selectedList, listToDelete, listToDeleteS, keymap, superkeys } = this.state; for (let i = 0; i < listToDelete.length; i += 1) { - if (selectedList === -1) { - keymap[listToDelete[i].layer][listToDelete[i].pos] = this.keymapDB.parse(0); + if (listToDelete[i].newKey === -1) { + keymap.custom[listToDelete[i].layer][listToDelete[i].pos] = this.keymapDB.parse(0); } else { - keymap[listToDelete[i].layer][listToDelete[i].pos] = this.keymapDB.parse(selectedList + 53852); + keymap.custom[listToDelete[i].layer][listToDelete[i].pos] = this.keymapDB.parse(listToDelete[i].newKey + 53852); } } for (let i = 0; i < listToDeleteS.length; i += 1) { @@ -359,19 +361,28 @@ class MacroEditor extends React.Component { } updateKeyboard(keyboardIdx) { - const { macros, superkey, keymap } = this.state; - const macroID = macros[keyboardIdx].id + 53852; - const customKeymapList = keymap.custom - .map((layer, layerIdx) => - layer.map((key, pos) => ({ layer: layerIdx, key, pos })).filter(elem => elem.key.keyCode === macroID), - ) - .flat(); - const superkeyList = superkey - .map((supers, i) => supers.map((action, pos) => ({ i, pos, action })).filter(elem => elem.action === macroID)) - .flat(); + const { macros, keymap, selectedList } = this.state; + let customKeymapList = []; + for (let i = keyboardIdx; i < macros.length; i += 1) { + const macroID = macros[i].id + 53852; + const newKey = i === keyboardIdx ? selectedList : i - 1; + const filteredKeys = keymap.custom + ? keymap.custom + .map((layer, layerIdx) => + layer.map((key, pos) => ({ layer: layerIdx, key, pos, newKey })).filter(elem => elem.key.keyCode === macroID), + ) + .flat() + : []; + customKeymapList = customKeymapList.concat(filteredKeys); + } + // const superkeyList = superkey + // ? superkey + // .map((supers, i) => supers.map((action, pos) => ({ i, pos, action })).filter(elem => elem.action === macroID)) + // .flat() + // : []; this.setState({ listToDelete: customKeymapList, - listToDeleteS: superkeyList, + listToDeleteS: [], showDeleteModal: true, }); } @@ -431,9 +442,9 @@ class MacroEditor extends React.Component { iter += 1; } macros.forEach((m, idx) => { - const aux = { ...m }; + const aux = m; aux.id = idx; - return aux; + macros[idx] = aux; }); // TODO: Check if stored macros match the received ones, if they match, retrieve name and apply it to current macros @@ -519,8 +530,8 @@ class MacroEditor extends React.Component { currentLanguageLayout, loading, } = this.state; - const ListOfMacros = listToDelete.map(({ layer, pos, key }) => ( - <Row key={`${key}-${pos}`}> + const ListOfMacros = listToDelete.map(({ layer, pos, key, newKey }) => ( + <Row key={`${key.keyCode}-${layer}-${pos}-${newKey}`}> <Col xs={12} className="px-0 text-center gridded"> <p className="titles alignvert">{`Key in layer ${layer} and pos ${pos}`}</p> </Col> From 55a22d4635eed58b9106e0afe218bfd9497dcda5 Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Wed, 20 Sep 2023 17:57:29 +0200 Subject: [PATCH 24/25] fix: colorEditor was wrongly assigning UG LED (70) as BL when using auto button --- src/renderer/modules/ColorEditor/ColorEditor.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/renderer/modules/ColorEditor/ColorEditor.js b/src/renderer/modules/ColorEditor/ColorEditor.js index c7ea3c067..a97c5aabf 100644 --- a/src/renderer/modules/ColorEditor/ColorEditor.js +++ b/src/renderer/modules/ColorEditor/ColorEditor.js @@ -171,7 +171,7 @@ export default class ColorEditor extends Component { } render() { - const { colors, selected, toChangeAllKeysColor, onBacklightColorSelect, onColorButtonSelect } = this.props; + const { colors, selected, toChangeAllKeysColor, deviceName } = this.props; const { displayColorPicker, internalColors } = this.state; const layerButtons = internalColors.map((data, idx) => { @@ -222,6 +222,8 @@ export default class ColorEditor extends Component { left: "0px", }; + const underglowStart = deviceName === "Defy" ? 70 : 69; + return ( <Styles className="extraPanel"> <div className="panelTitle"> @@ -260,7 +262,7 @@ export default class ColorEditor extends Component { <div className="buttonsApplyAll"> <ColorButton onClick={() => { - toChangeAllKeysColor(selected, 0, 70); + toChangeAllKeysColor(selected, 0, underglowStart); }} label={i18n.editor.color.applyColor} text={i18n.editor.color.allKeys} @@ -269,7 +271,7 @@ export default class ColorEditor extends Component { /> <ColorButton onClick={() => { - toChangeAllKeysColor(selected, 70, 177); + toChangeAllKeysColor(selected, underglowStart, 177); }} label={i18n.editor.color.applyColor} text={i18n.editor.color.underglow} From 91fc99a7fa528b647f3a0c312cf4e946f2ecbb6a Mon Sep 17 00:00:00 2001 From: Alejandro Parcet <alex@dygma.com> Date: Thu, 21 Sep 2023 10:15:09 +0200 Subject: [PATCH 25/25] refactor: rewritten UI for delete macro replacement modal due to not being readable --- src/renderer/i18n/en.js | 4 ++-- src/renderer/views/MacroEditor.jsx | 21 +++++++++++++-------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/renderer/i18n/en.js b/src/renderer/i18n/en.js index f4d8bd227..7f76ec5e0 100644 --- a/src/renderer/i18n/en.js +++ b/src/renderer/i18n/en.js @@ -199,8 +199,8 @@ const English = { successFlash: "Successfully sent the macros to the device", previewMacro: "Preview macro", deleteModal: { - title: "This macro is in use", - body: "The macro you want to delete is currently in use, select how to proceed, THIS MAKES PERMANENT CHANGES.", + title: "This macro is in use on your layout", + body: "Pick the action to replace it:", cancelButton: "Cancel", applyButton: "Update Keyboard", }, diff --git a/src/renderer/views/MacroEditor.jsx b/src/renderer/views/MacroEditor.jsx index 2cb5eed41..47a41f67b 100644 --- a/src/renderer/views/MacroEditor.jsx +++ b/src/renderer/views/MacroEditor.jsx @@ -530,13 +530,18 @@ class MacroEditor extends React.Component { currentLanguageLayout, loading, } = this.state; - const ListOfMacros = listToDelete.map(({ layer, pos, key, newKey }) => ( - <Row key={`${key.keyCode}-${layer}-${pos}-${newKey}`}> - <Col xs={12} className="px-0 text-center gridded"> - <p className="titles alignvert">{`Key in layer ${layer} and pos ${pos}`}</p> - </Col> - </Row> - )); + const ListOfMacros = listToDelete.map(({ layer, pos, key, newKey }) => { + if (newKey === -1) { + return ( + <Row key={`${key.keyCode}-${layer}-${pos}-${newKey}`}> + <Col xs={12} className="px-0 text-center gridded"> + <p className="titles alignvert">{`Key in layer ${layer} and pos ${pos}`}</p> + </Col> + </Row> + ); + } + return ""; + }); const ListCombo = ( <DropdownButton id="Selectlayers" @@ -625,8 +630,8 @@ class MacroEditor extends React.Component { <Modal.Title>{i18n.editor.macros.deleteModal.title}</Modal.Title> </Modal.Header> <Modal.Body> - <p>{i18n.editor.macros.deleteModal.body}</p> {ListOfMacros} + <p>{i18n.editor.macros.deleteModal.body}</p> {ListCombo} </Modal.Body> <Modal.Footer>