├── .nvmrc
├── .eslintignore
├── src
    ├── react-app-env.d.ts
    ├── constants
    │   ├── types
    │   │   ├── appReadyState.ts
    │   │   └── flashState.ts
    │   ├── atyuSpecialKeys.ts
    │   └── index.ts
    ├── functions
    │   ├── generic.ts
    │   ├── gifToCpp.ts
    │   ├── configurator.ts
    │   ├── path.ts
    │   ├── commands
    │   │   ├── runSync.ts
    │   │   ├── runSetup.ts
    │   │   ├── runVerify.ts
    │   │   ├── shell.ts
    │   │   └── runFlash.ts
    │   ├── codegen.ts
    │   └── imgtocpp.ts
    ├── index.tsx
    ├── configs
    │   ├── keyboardConfig.ts
    │   └── atyuConfig.ts
    ├── components
    │   ├── HorizontalBox.tsx
    │   ├── configurator
    │   │   ├── subcomponents
    │   │   │   └── ConfiguratorSectionHeading.tsx
    │   │   ├── SwitchComponent.tsx
    │   │   ├── RadioComponent.tsx
    │   │   ├── MultiselectBooleanComponent.tsx
    │   │   └── UpdateGifComponent.tsx
    │   ├── KeyboardFAB.tsx
    │   ├── TabPanel.tsx
    │   └── FlashAlert.tsx
    ├── App.tsx
    ├── index.css
    ├── packages
    │   └── gif-frames
    │   │   ├── LICENSE
    │   │   ├── gif-frames.d.ts
    │   │   ├── package.json
    │   │   ├── CHANGELOG.md
    │   │   ├── gif-frames.js
    │   │   └── README.md
    ├── controllers
    │   ├── context
    │   │   ├── appStoreContext.tsx
    │   │   ├── atyuContext.tsx
    │   │   └── appContext.tsx
    │   └── reducers
    │   │   └── atyuReducer.tsx
    └── pages
    │   ├── Settings.tsx
    │   └── Configurator.tsx
├── resources
    ├── icon.icns
    └── icon.ico
├── public
    ├── in_app_icon.png
    ├── robots.txt
    ├── electron.js
    └── index.html
├── .prettierrc
├── .gitignore
├── tsconfig.json
├── README.md
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | 14


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | src/packages/**


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/resources/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atude/atyu-app/HEAD/resources/icon.icns


--------------------------------------------------------------------------------
/resources/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atude/atyu-app/HEAD/resources/icon.ico


--------------------------------------------------------------------------------
/public/in_app_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atude/atyu-app/HEAD/public/in_app_icon.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/constants/types/appReadyState.ts:
--------------------------------------------------------------------------------
1 | export enum AppReadyState {
2 | 	NOT_READY,
3 | 	LOADING,
4 | 	READY,
5 | };
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "tabWidth": 2,
4 |   "semi": true,
5 |   "singleQuote": false,
6 | 	"printWidth": 100
7 | }


--------------------------------------------------------------------------------
/src/functions/generic.ts:
--------------------------------------------------------------------------------
1 | export const exhaustSwitch = (type: never): never => {
2 | 	throw new Error(`Unhandled type for switch: ${type}`);
3 | };
4 | 


--------------------------------------------------------------------------------
/src/constants/atyuSpecialKeys.ts:
--------------------------------------------------------------------------------
 1 | // These are special keys handled internally
 2 | export const atyuSpecialKeys = {
 3 | 	gifEnabled: "ATYU_OLED_GIF_ENABLED",
 4 | 	gifUrl: "_atyu_gifUrl",
 5 | 	gifCode: "_atyu_gifCode",
 6 | 	gifSpeed: "_atyu_gifSpeed",
 7 | };
 8 | 
 9 | export const atyuSpecialKeysArr = Object.values(atyuSpecialKeys);
10 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(
 7 |   document.getElementById('root') as HTMLElement
 8 | );
 9 | root.render(
10 |   <React.StrictMode>
11 |     <App />
12 |   </React.StrictMode>
13 | );
14 | 


--------------------------------------------------------------------------------
/src/configs/keyboardConfig.ts:
--------------------------------------------------------------------------------
 1 | import z from "zod";
 2 | 
 3 | export const zKeyboardsConfig = z.record(
 4 |   z.string(),
 5 |   z.object({
 6 |     key: z.string(),
 7 |     name: z.string(),
 8 |     qmkKb: z.string(),
 9 |     qmkKm: z.string(),
10 |     dir: z.string(), // Directory will end in /
11 | 		maxFirmwareSizeBytes: z.number().int(),
12 |   })
13 | );
14 | 
15 | export type KeyboardsConfig = z.infer<typeof zKeyboardsConfig>;
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | /out
14 | /dist
15 | 
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 | 
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 


--------------------------------------------------------------------------------
/src/functions/gifToCpp.ts:
--------------------------------------------------------------------------------
 1 | import gifFrames from "gif-frames";
 2 | import convertImagesToCpp from "./imgToCpp";
 3 | 
 4 | export const convertGifToCpp = async (url: string): Promise<string> => {
 5 | 	const rawFrames = await gifFrames({ url, frames: "all" });
 6 | 	const frames = rawFrames.map((rawFrame) => rawFrame.getImage().read().toString('base64'));
 7 | 	const codeSnippet = await convertImagesToCpp(frames);
 8 | 	return codeSnippet;
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/functions/configurator.ts:
--------------------------------------------------------------------------------
 1 | export function atyuValue(contextKey: any, defaultValue: boolean): boolean
 2 | export function atyuValue(contextKey: any, defaultValue: string): string;
 3 | export function atyuValue(contextKey: any, defaultValue: number): number;
 4 | export function atyuValue(contextKey: any, defaultValue: boolean | string | number): boolean | string | number {
 5 | 	if (typeof contextKey === "boolean" || typeof contextKey === "string" || typeof contextKey === "number") {
 6 | 		return contextKey;
 7 | 	}
 8 | 	return defaultValue;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/HorizontalBox.tsx:
--------------------------------------------------------------------------------
 1 | import { Box, SxProps, Theme } from "@mui/material";
 2 | import React from "react";
 3 | 
 4 | type Props = {
 5 | 	children?: React.ReactNode;
 6 | 	expanded?: boolean;
 7 | 	sx?: SxProps<Theme>;
 8 | };
 9 | 
10 | const HorizontalBox = (props: Props) => {
11 | 	return (
12 | 		<Box 
13 | 			sx={{
14 | 				...(props.expanded && { width: "100%" }),
15 | 				display: "flex",
16 | 				flexDirection: "row",
17 | 				alignItems: "center",
18 | 				...(props.expanded && { justifyContent: "space-between" }),
19 | 				...props.sx,
20 | 			}} 
21 | 		>
22 | 			{props.children}
23 | 		</Box>
24 | 	);
25 | };
26 | 
27 | export default HorizontalBox


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "es5",
 4 | 		"lib": [
 5 | 			"dom",
 6 | 			"dom.iterable",
 7 | 			"esnext"
 8 | 		],
 9 | 		"allowJs": true,
10 | 		"skipLibCheck": true,
11 | 		"esModuleInterop": true,
12 | 		"allowSyntheticDefaultImports": true,
13 | 		"strict": true,
14 | 		"forceConsistentCasingInFileNames": false,
15 | 		"noFallthroughCasesInSwitch": true,
16 | 		"module": "esnext",
17 | 		"moduleResolution": "node",
18 | 		"resolveJsonModule": true,
19 | 		"isolatedModules": true,
20 | 		"noEmit": true,
21 | 		"jsx": "react-jsx"
22 | 	},
23 | 	"include": [
24 | 		"src"
25 | 	],
26 | 	"exclude": [
27 | 		"src/packages/**"
28 | 	]
29 | }


--------------------------------------------------------------------------------
/src/components/configurator/subcomponents/ConfiguratorSectionHeading.tsx:
--------------------------------------------------------------------------------
 1 | import { Box, Typography } from "@mui/material";
 2 | 
 3 | type Props = {
 4 |   name: string;
 5 |   desc?: string;
 6 | };
 7 | 
 8 | const ConfiguratorSectionHeading = (props: Props) => {
 9 |   const { name, desc } = props;
10 |   return (
11 |     <Box>
12 |       <Typography variant="subtitle1" fontSize={14}>
13 |         {name}
14 |       </Typography>
15 |       {!!desc?.length && (
16 |         <Typography sx={{ mb: "12px", fontWeight: 400 }} variant="subtitle2" color="secondary">
17 |           {desc}
18 |         </Typography>
19 |       )}
20 |     </Box>
21 |   );
22 | };
23 | 
24 | export default ConfiguratorSectionHeading;
25 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider, createTheme } from "@mui/material/styles";
 2 | import CssBaseline from "@mui/material/CssBaseline";
 3 | import { AppProvider } from "./controllers/context/appContext";
 4 | import TabPanel from "./components/TabPanel";
 5 | import FlashAlert from "./components/FlashAlert";
 6 | import { colors } from "@mui/material";
 7 | import { AppStoreProvider } from "./controllers/context/appStoreContext";
 8 | 
 9 | const theme = createTheme({
10 |   palette: {
11 |     mode: "dark",
12 | 		secondary: {
13 | 			main: colors.purple[200],
14 | 		},
15 |   },
16 | });
17 | 
18 | const App = () => {
19 |   return (
20 |     <ThemeProvider theme={theme}>
21 | 			<AppStoreProvider>
22 | 				<AppProvider>
23 | 					<CssBaseline />
24 | 					<FlashAlert />
25 | 					<TabPanel />
26 | 				</AppProvider>
27 | 			</AppStoreProvider>
28 |     </ThemeProvider>
29 |   );
30 | };
31 | 
32 | export default App;
33 | 


--------------------------------------------------------------------------------
/src/functions/path.ts:
--------------------------------------------------------------------------------
 1 | import { homeDir, isMac } from "./commands/shell";
 2 | 
 3 | export const logFilePath = `${homeDir}/Desktop/atyu_log_${new Date().getTime()}.txt`;
 4 | export const atyuDir = `~/.atyu/`;
 5 | export const atyuQmkDir = `${atyuDir}qmk_firmware/`;
 6 | export const atyuThumbnailsDir = `${atyuQmkDir}atyu/thumbnails/`;
 7 | export const atyuHomeConfigFilePath = `${atyuDir}qmk_firmware/atyu_home.json`;
 8 | export const atyuKeyboardConfigFilename = "atyu_config.json";
 9 | export const atyuHConfigFilename = "atyu.h";
10 | export const atyuHResourcesFilename = "atyu_resources.h";
11 | 
12 | export const getKeyboardDir = (keyboardDir: string) =>
13 |   `${atyuQmkDir}${keyboardDir}`;
14 | 
15 | // Use when we are doing commands for mac/windows natively (i.e. via node commands)
16 | export const pathOf = (path: string) => isMac ? 
17 |   path.replace("~", homeDir) : 
18 |   path.replace("~", homeDir).split("/").join("\\");
19 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | html {
 2 | 	height: 100%;
 3 | 	width: 100%;
 4 | 	overflow: overlay;
 5 | 	overflow-y: hidden;
 6 | }
 7 | 
 8 | body {
 9 |   margin: 0;
10 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
11 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
12 |     sans-serif;
13 |   -webkit-font-smoothing: antialiased;
14 |   -moz-osx-font-smoothing: grayscale;
15 | 	width: 100%;
16 | }
17 | 
18 | code {
19 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
20 |     monospace;
21 | }
22 | 
23 | /* width */
24 | ::-webkit-scrollbar {
25 |   width: 4px;
26 | }
27 | 
28 | /* Track */
29 | ::-webkit-scrollbar-track {
30 |   background: none;
31 | }
32 | 
33 | /* Handle */
34 | ::-webkit-scrollbar-thumb {
35 |   background: #888;
36 | 	border-radius: 12px;
37 | }
38 | 
39 | /* Handle on hover */
40 | ::-webkit-scrollbar-thumb:hover {
41 |   background: #555;
42 | }
43 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Atyu | OLED configurator for QMK keyboards
 2 | 
 3 | `Note: Atyu is currently in beta`
 4 | 
 5 | ### [Download](https://github.com/atude/atyu-app/releases) | [Join the Discord for updates and discussion!](https://discord.gg/X3A6NhAJtG)
 6 | 
 7 | ### What is Atyu?
 8 | Atyu is a Mac/Windows app that lets you configure OLED (and other) settings for QMK keyboards. It uses a [fork of QMK](https://github.com/atude/qmk_firmware) that includes preset mods that can be set by the app, and installed directly to your keyboard. 
 9 | 
10 | Atyu can receive updates from the QMK fork from within the app's settings, so you can get the latest mods without having to reinstall this app.
11 | 
12 | ### Installation Requirements
13 | - [QMK (QMK MSYS if using Windows)](https://docs.qmk.fm/#/newbs_getting_started?id=set-up-your-environment) (you only need to do step 2)
14 |   - On Windows, you **must** install QMK MSYS in the default directory
15 | 
16 | ### Supported Keyboards
17 | - Satisfaction 75
18 | - (possibly more soon?)
19 | 
20 | 
21 | 


--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
 1 | import { atyuSpecialKeys } from "./atyuSpecialKeys";
 2 | import { AtyuOptionRadioNumber } from "../configs/atyuConfig";
 3 | 
 4 | export const version = "0.5";
 5 | export const versionString = `${version} beta`;
 6 | export const defaultKeyboardKey = "satisfaction75";
 7 | export const defaultEmptyGif = "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
 8 | export const setupHelpText = `
 9 | 	If this is your first time using Atyu, click run setup. Otherwise, there is something
10 | 	wrong with loading up QMK for Atyu. Check the log and ask for help in the
11 | 	Atyu discord server. Or click run setup to start a fresh install.
12 | `.trim();
13 | 
14 | export const defaultGifRadioStruct: AtyuOptionRadioNumber = {
15 | 	type: "radio_number",
16 | 	radioKey: atyuSpecialKeys.gifSpeed,
17 | 	defaultValue: 100,
18 | 	radioValues: [
19 | 		{
20 | 			name: "Slow",
21 | 			value: 200
22 | 		},
23 | 		{
24 | 			name: "Normal",
25 | 			value: 100
26 | 		},
27 | 		{
28 | 			name: "Fast",
29 | 			value: 50
30 | 		},
31 | 	],
32 | };
33 | 


--------------------------------------------------------------------------------
/src/packages/gif-frames/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Ben Wiley
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/components/configurator/SwitchComponent.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | import { Box, Switch } from "@mui/material";
 3 | import { atyuValue } from "../../functions/configurator";
 4 | import { useAtyuContext } from "../../controllers/context/atyuContext";
 5 | import { AtyuOptionSwitch } from "../../configs/atyuConfig";
 6 | import ConfiguratorSectionHeading from "./subcomponents/ConfiguratorSectionHeading";
 7 | 
 8 | type Props = {
 9 |   config: AtyuOptionSwitch;
10 | 	name: string;
11 | 	desc?: string;
12 | };
13 | 
14 | const SwitchContainer = styled(Box)`
15 |   width: 100%;
16 |   display: flex;
17 |   flex-direction: row;
18 | 	align-items: center;
19 | 	justify-content: space-between;
20 | `;
21 | 
22 | const SwitchComponent = (props: Props) => {
23 |   const context = useAtyuContext();
24 |   const { name, desc, config } = props;
25 |   const { key, defaultValue } = config;
26 | 	const isEnabled = atyuValue(context[key], defaultValue);
27 | 
28 |   return (
29 | 		<SwitchContainer>
30 | 			<ConfiguratorSectionHeading name={name} desc={desc} />
31 | 			<Switch 
32 | 				checked={isEnabled}
33 | 				onChange={() => context.dispatchUpdateValue(key, !isEnabled)}
34 | 			/>
35 | 		</SwitchContainer>
36 |   );
37 | };
38 | 
39 | export default SwitchComponent;
40 | 


--------------------------------------------------------------------------------
/src/constants/types/flashState.ts:
--------------------------------------------------------------------------------
 1 | import { AlertColor } from "@mui/material";
 2 | 
 3 | export enum FlashState {
 4 | 	IDLE,
 5 | 	PATCHING,
 6 | 	COMPILING,
 7 | 	CHECK_SIZE,
 8 | 	WAITING_FOR_DFU,
 9 | 	FLASHING_ERASING,
10 | 	FLASHING_DOWNLOADING,
11 | 	DONE,
12 | 	ERROR,
13 | 	CANCELLED,
14 | 	RUNNING_SETUP,
15 | 	UPDATING,
16 | };
17 | 
18 | export const FlashStateDisplayStrings: Record<FlashState, string> = {
19 | 	[FlashState.IDLE]: "",
20 | 	[FlashState.PATCHING]: "Saving changes...",
21 | 	[FlashState.COMPILING]: "Building firmware...",
22 | 	[FlashState.WAITING_FOR_DFU]: "Waiting for your keyboard to go into flash mode...",
23 | 	[FlashState.FLASHING_ERASING]: "Removing old firmware...",
24 | 	[FlashState.FLASHING_DOWNLOADING]: "Installing firmware...",
25 | 	[FlashState.DONE]: "Done!",
26 | 	[FlashState.ERROR]: "An error occurred",
27 | 	[FlashState.CANCELLED]: "Cancelled",
28 | 	[FlashState.RUNNING_SETUP]: "Running initial setup...",
29 | 	[FlashState.UPDATING]: "Updating...",
30 | 	[FlashState.CHECK_SIZE]: "Checking firmware size...",
31 | };
32 | 
33 | export const FlashAlertSeverityMap: Record<FlashState, AlertColor | undefined> = {
34 | 	[FlashState.IDLE]: undefined,
35 | 	[FlashState.PATCHING]: "info",
36 | 	[FlashState.COMPILING]: "info",
37 | 	[FlashState.WAITING_FOR_DFU]: "info",
38 | 	[FlashState.FLASHING_ERASING]: "info",
39 | 	[FlashState.FLASHING_DOWNLOADING]: "info",
40 | 	[FlashState.DONE]: "success",
41 | 	[FlashState.ERROR]: "error",
42 | 	[FlashState.CANCELLED]: "warning",
43 | 	[FlashState.RUNNING_SETUP]: "info",
44 | 	[FlashState.UPDATING]: "info",
45 | 	[FlashState.CHECK_SIZE]: "info",
46 | }


--------------------------------------------------------------------------------
/public/electron.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const { app, BrowserWindow } = require('electron');
 4 | const isDev = require('electron-is-dev');
 5 | const Store = require('electron-store');
 6 | 
 7 | function createWindow() {
 8 | 	// Create the browser window.
 9 | 	const win = new BrowserWindow({
10 | 		width: 1200,
11 | 		height: 800,
12 | 		webPreferences: {
13 | 			nodeIntegration: true,
14 | 			nodeIntegrationInWorker: true,
15 | 			contextIsolation: false,
16 | 		},
17 | 	});
18 | 
19 | 	win.setBackgroundColor("rgb(18, 18, 18)");
20 | 
21 | 	// init store
22 | 	Store.initRenderer();
23 | 
24 | 	// and load the index.html of the app.
25 | 	// win.loadFile("index.html");
26 | 	win.loadURL(
27 | 		isDev
28 | 			? 'http://localhost:3000'
29 | 			: `file://${path.join(__dirname, '../build/index.html')}`
30 | 	);
31 | 	// Open the DevTools.
32 | 	if (isDev) {
33 | 		win.webContents.openDevTools({ mode: 'right' });
34 | 	}
35 | }
36 | 
37 | // This method will be called when Electron has finished
38 | // initialization and is ready to create browser windows.
39 | // Some APIs can only be used after this event occurs.
40 | app.whenReady().then(createWindow);
41 | 
42 | // Quit when all windows are closed, except on macOS. There, it's common
43 | // for applications and their menu bars to stay active until the user quits
44 | // explicitly with Cmd + Q.
45 | app.on('window-all-closed', () => {
46 | 	// if (process.platform !== 'darwin') {
47 | 	app.quit();
48 | 	// }
49 | });
50 | 
51 | app.on('activate', () => {
52 | 	if (BrowserWindow.getAllWindows().length === 0) {
53 | 		createWindow();
54 | 	}
55 | });
56 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 | 		<link
 7 | 			rel="stylesheet"
 8 | 			href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
 9 | 		/>
10 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
11 |     <meta name="theme-color" content="#000000" />
12 |     <meta
13 |       name="description"
14 |       content="Atyu"
15 |     />
16 |     <!--
17 |       Notice the use of %PUBLIC_URL% in the tags above.
18 |       It will be replaced with the URL of the `public` folder during the build.
19 |       Only files inside the `public` folder can be referenced from the HTML.
20 | 
21 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
22 |       work correctly both with client-side routing and a non-root public URL.
23 |       Learn how to configure a non-root public URL by running `npm run build`.
24 |     -->
25 |     <title>Atyu</title>
26 |   </head>
27 |   <body>
28 |     <noscript>You need to enable JavaScript to run this app.</noscript>
29 |     <div id="root"></div>
30 |     <!--
31 |       This HTML file is a template.
32 |       If you open it directly in the browser, you will see an empty page.
33 | 
34 |       You can add webfonts, meta tags, or analytics to this file.
35 |       The build step will place the bundled scripts into the <body> tag.
36 | 
37 |       To begin the development, run `npm start` or `yarn start`.
38 |       To create a production bundle, use `npm run build` or `yarn build`.
39 |     -->
40 |   </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/src/packages/gif-frames/gif-frames.d.ts:
--------------------------------------------------------------------------------
 1 | import {Initializer} from "multi-integer-range";
 2 | import {Canvas} from "canvas";
 3 | import stream from "stream";
 4 | 
 5 | declare module "gif-frames" {
 6 | 
 7 |     export default function gifFrames<T extends GifFrameOptions>(options: T): Promise<GifFrameData<T>[]>;
 8 |     export default function gifFrames<T extends GifFrameOptions>(options: T, callback: (err: Error, frameData: GifFrameData<T>[]) => void): void;
 9 | 
10 |     type GifOutputType = "jpeg" | "jpg" | "gif" | "png" | "canvas";
11 |     type GifFrameData<T extends GifFrameOptions> = T["outputType"] extends "canvas" ? GifFrameCanvas : GifFrameReadableStream;
12 | 
13 |     interface GifFrameOptions {
14 |         url: string | Buffer;
15 |         frames: "all" | Initializer;
16 |         outputType?: GifOutputType;
17 |         quality?: number;
18 |         cumulative?: boolean;
19 |     }
20 | 
21 |     interface GifFrameCanvas {
22 |         getImage(): Canvas;
23 |         frameIndex: number;
24 |         frameInfo: GifFrameInfo
25 |     }
26 | 
27 |     interface GifFrameReadableStream {
28 |         getImage(): stream.Readable;
29 |         frameIndex: number;
30 |         frameInfo: GifFrameInfo
31 |     }
32 | 
33 |     interface GifFrameInfo {
34 |         x: number;
35 |         y: number;
36 |         width: number;
37 |         height: number;
38 |         has_local_palette: boolean;
39 |         palette_offset: number;
40 |         palette_size: number;
41 |         data_offset: number;
42 |         data_length: number;
43 |         transparent_index: number;
44 |         interlaced: boolean;
45 |         delay: number;
46 |         disposal: number;
47 |     }
48 | }


--------------------------------------------------------------------------------
/src/packages/gif-frames/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gif-frames",
 3 |   "version": "1.0.1",
 4 |   "description": "Pure JavaScript tool for extracting GIF frames and saving to file",
 5 |   "main": "gif-frames.js",
 6 |   "bundled": "dist/gif-frames.js",
 7 |   "bundled-min": "dist/gif-frames.min.js",
 8 |   "scripts": {
 9 |     "build:clean": "rimraf dist && mkdirp dist",
10 |     "build:umd": "browserify gif-frames.js -o dist/gif-frames.js -s gifFrames",
11 |     "build:uglify": "uglifyjs dist/gif-frames.js -o dist/gif-frames.min.js",
12 |     "build": "npm run build:clean && npm run build:umd && npm run build:uglify",
13 |     "dev": "mkdirp dist && watchify gif-frames.js -o dist/gif-frames.js -s gifFrames",
14 |     "prepublish": "npm run build",
15 |     "test": "echo \"Error: no test specified\" && exit 1"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+ssh://git@github.com/benwiley4000/gif-frames.git"
20 |   },
21 |   "keywords": [
22 |     "gif",
23 |     "frames",
24 |     "extract",
25 |     "save",
26 |     "images",
27 |     "javascript",
28 |     "pure-js"
29 |   ],
30 |   "author": "Ben Wiley",
31 |   "license": "MIT",
32 |   "bugs": {
33 |     "url": "https://github.com/benwiley4000/gif-frames/issues"
34 |   },
35 |   "homepage": "https://github.com/benwiley4000/gif-frames#readme",
36 |   "dependencies": {
37 |     "get-pixels-frame-info-update": "^3.3.2",
38 |     "multi-integer-range": "^3.0.0",
39 |     "save-pixels-jpeg-js-upgrade": "^2.3.4-jpeg-js-upgrade.0"
40 |   },
41 |   "devDependencies": {
42 |     "browserify": "^16.2.3",
43 |     "mkdirp": "^0.5.1",
44 |     "rimraf": "^2.6.1",
45 |     "uglify-js": "^3.0.20",
46 |     "watchify": "^3.11.0"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/components/configurator/RadioComponent.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | import { Button, ButtonGroup } from "@mui/material";
 3 | import { atyuValue } from "../../functions/configurator";
 4 | import { useAtyuContext } from "../../controllers/context/atyuContext";
 5 | import { AtyuOptionRadioNumber } from "../../configs/atyuConfig";
 6 | import HorizontalBox from "../HorizontalBox";
 7 | import ConfiguratorSectionHeading from "./subcomponents/ConfiguratorSectionHeading";
 8 | 
 9 | type Props = {
10 |   config: AtyuOptionRadioNumber;
11 | 	name: string;
12 | 	desc?: string;
13 | };
14 | 
15 | const ButtonGroupContainer = styled(ButtonGroup)`
16 | `;
17 | 
18 | const ButtonOption = styled(Button)`
19 | 	width: 90px;
20 | `;
21 | 
22 | const RadioComponent = (props: Props) => {
23 |   const context = useAtyuContext();
24 |   const { name, desc, config } = props;
25 |   const { radioKey, radioValues, defaultValue } = config;
26 | 	const value = atyuValue(context[radioKey], defaultValue);
27 | 
28 |   return (
29 |     <HorizontalBox expanded>
30 | 			<ConfiguratorSectionHeading name={name} desc={desc} />
31 |       <ButtonGroupContainer disableElevation>
32 |         {radioValues.map((radioValue) => {
33 |           const { name, value: thisValue } = radioValue;
34 |           return (
35 |             <ButtonOption 
36 | 							variant={thisValue === value ? "contained" : "outlined"}
37 | 							onClick={() => context.dispatchUpdateValue(radioKey, thisValue)}
38 | 							key={name}
39 | 						>
40 |               {name}
41 |             </ButtonOption>
42 |           );
43 |         })}
44 |       </ButtonGroupContainer>
45 |     </HorizontalBox>
46 |   );
47 | };
48 | 
49 | export default RadioComponent;
50 | 


--------------------------------------------------------------------------------
/src/functions/commands/runSync.ts:
--------------------------------------------------------------------------------
 1 | import { FlashState } from "../../constants/types/flashState";
 2 | import { AppContext } from "../../controllers/context/appContext";
 3 | import { atyuQmkDir } from "../path";
 4 | import runVerify from "./runVerify";
 5 | import shell, { shellExecOptions, updateLog } from "./shell";
 6 | 
 7 | // Pull updates from repo
 8 | const runSync = (appContext: AppContext) => {
 9 |   const { setLog, setFlashState, setDoingTask } = appContext;
10 |   let alreadyUpdated = false;
11 |   setFlashState(FlashState.UPDATING, "Checking for updates");
12 | 
13 |   setDoingTask(true);
14 |   // Needs reset so local changed do not affect pull
15 |   const pullCmd = shell.exec(`cd ${atyuQmkDir} && git reset --hard && git pull`, shellExecOptions);
16 | 
17 |   pullCmd.stdout?.on("data", (data: any) => {
18 |     const dataString = data.toString();
19 |     updateLog(setLog, dataString);
20 |     if (dataString.includes("Already up to date.")) {
21 |       alreadyUpdated = true;
22 |     }
23 |     if (dataString.includes("Updating")) {
24 |       setFlashState(FlashState.UPDATING, "Downloading updates from atude/qmk_firmware");
25 |     }
26 |   });
27 |   pullCmd.stderr?.on("data", (data: any) => updateLog(setLog, data.toString()));
28 |   pullCmd.on("close", (code: any) => {
29 |     setDoingTask(false);
30 |     if (Number(code) !== 0) {
31 |       setFlashState(FlashState.ERROR, "Failed to check for updates");
32 |       return;
33 |     }
34 |     if (alreadyUpdated) {
35 |       return setFlashState(FlashState.DONE, "Already up to date");
36 |     }
37 |     setFlashState(FlashState.DONE, "Successfully updated Atyu QMK");
38 |     return runVerify(appContext);
39 |   });
40 | };
41 | 
42 | export default runSync;
43 | 


--------------------------------------------------------------------------------
/src/controllers/context/appStoreContext.tsx:
--------------------------------------------------------------------------------
 1 | import _Store from "electron-store";
 2 | import { createContext, useContext, useEffect, useState } from "react";
 3 | const Store: typeof _Store = window.require("electron-store");
 4 | 
 5 | // Global saved settings
 6 | type AppStore = {
 7 |   enableFirmwareSizeCheck: boolean;
 8 | };
 9 | 
10 | type AppStoreFunctions = {
11 |   toggleEnableFirmwareSizeCheck: () => void;
12 | };
13 | 
14 | const defaults: AppStore = {
15 |   enableFirmwareSizeCheck: true,
16 | };
17 | 
18 | // For reading only purposes, we can reference the store directly instead of
19 | // needing to import the whole context
20 | export const appStore = new Store<AppStore>({ defaults });
21 | 
22 | export type AppStoreContext = AppStore & AppStoreFunctions;
23 | 
24 | const context = createContext<AppStoreContext>({
25 |   ...appStore.store,
26 |   toggleEnableFirmwareSizeCheck: () => {},
27 | });
28 | 
29 | export const AppStoreProvider = ({ children }: { children?: React.ReactNode }) => {
30 |   const [appStoreState, setAppStoreState] = useState<AppStore>(appStore.store);
31 | 
32 | 	// Update entire store if any changes are found
33 |   useEffect(() => {
34 | 		appStore.store = appStoreState;
35 | 	}, [appStoreState]);
36 | 
37 |   const value: AppStoreContext = {
38 |     ...appStoreState,
39 |     toggleEnableFirmwareSizeCheck: () =>
40 |       setAppStoreState({
41 |         ...appStoreState,
42 |         enableFirmwareSizeCheck: !appStoreState.enableFirmwareSizeCheck,
43 |       }),
44 |   };
45 | 
46 |   return <context.Provider value={value}>{children}</context.Provider>;
47 | };
48 | 
49 | export const useAppStoreContext = () => {
50 |   const appStoreContext = useContext(context);
51 |   return appStoreContext;
52 | };
53 | 


--------------------------------------------------------------------------------
/src/controllers/context/atyuContext.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, useEffect, useReducer } from "react";
 2 | import { reducer, AtyuState, generateInitialState } from "../reducers/atyuReducer";
 3 | import { useAppContext } from "./appContext";
 4 | 
 5 | export type AtyuContext = AtyuState & {
 6 | 	dispatchUpdateValue: (key: string, value: string | number | boolean) => void;
 7 | 	dispatchUpdateGif: (gifUrl?: string, gifCode?: string) => void;
 8 | };
 9 | 
10 | const context = createContext<AtyuContext>({
11 | 	dispatchUpdateValue: (key: string, value: string | number | boolean) => {},
12 |   dispatchUpdateGif: (gifUrl?: string, gifCode?: string) => {},
13 | });
14 | 
15 | export const AtyuConfigProvider = ({ children }: { children?: React.ReactNode }) => {
16 | 	const { atyuConfigMap, keyboard } = useAppContext();
17 |   const [state, dispatch] = useReducer(reducer, {});
18 | 
19 | 	useEffect(() => {
20 | 		if (atyuConfigMap[keyboard]?.length) {
21 | 			const newState = generateInitialState(atyuConfigMap[keyboard]);
22 | 			dispatch({ type: "CHANGE_KEYBOARD", payload: { newState }});
23 | 		}
24 | 	// eslint-disable-next-line react-hooks/exhaustive-deps
25 | 	}, [atyuConfigMap, keyboard]);
26 | 
27 |   const value: AtyuContext = {
28 |     ...state,
29 | 		dispatchUpdateValue: (key: string, value: string | number | boolean) => 
30 | 			dispatch({ type: "UPDATE_VALUE", payload: { key, value } }),
31 |     dispatchUpdateGif: (gifUrl?: string, gifCode?: string) =>
32 |       dispatch({ type: "UPDATE_GIF", payload: { gifUrl, gifCode } }),
33 |   };
34 | 
35 |   return <context.Provider value={value}>{children}</context.Provider>;
36 | };
37 | 
38 | export const useAtyuContext = () => {
39 |   const atyuContext = useContext(context);
40 |   return atyuContext;
41 | };
42 | 


--------------------------------------------------------------------------------
/src/functions/codegen.ts:
--------------------------------------------------------------------------------
 1 | import { AtyuContext } from "../controllers/context/atyuContext";
 2 | import { atyuSpecialKeys, atyuSpecialKeysArr } from "../constants/atyuSpecialKeys";
 3 | 
 4 | export const codegenHashDefine = (key: string, value: boolean | string | number) =>
 5 |   `#define ${key} ${value}`;
 6 | export const tab = (tabDepth = 1): string => "    ".repeat(tabDepth);
 7 | 
 8 | type CodegenOutput = {
 9 |   configCode: string;
10 |   resourcesCode: string;
11 | };
12 | 
13 | export const runCodegen = (context: AtyuContext): CodegenOutput => {
14 |   const configCode: string[] = ["#pragma once\n"];
15 |   const resourcesCode: string[] = ["#pragma once\n#include <stdio.h>\n"];
16 | 
17 |   // Process generic keys
18 |   Object.keys(context).forEach((key: string) => {
19 |     // Dont process special keys here
20 |     if (
21 |       atyuSpecialKeysArr.includes(key) ||
22 |       key.startsWith("dispatch") ||
23 |       key.startsWith("__") ||
24 |       context[key] === undefined
25 |     ) {
26 |       console.log(`wont process key: ${key}`);
27 |       return;
28 |     }
29 |     configCode.push(codegenHashDefine(key, context[key]));
30 |   });
31 | 
32 |   // Process special keys
33 |   // -> Update gif
34 |   if (context[atyuSpecialKeys.gifEnabled] !== undefined) {
35 |     const gifCode = context[atyuSpecialKeys.gifCode];
36 |     const gifUrl = context[atyuSpecialKeys.gifUrl];
37 |     const gifSpeed = context[atyuSpecialKeys.gifSpeed];
38 |     const gifEnabled = context[atyuSpecialKeys.gifEnabled];
39 |     if (gifCode && gifSpeed && gifUrl && gifEnabled) {
40 |       configCode.push(codegenHashDefine("ATYU_OLED_GIF_ENABLED", true));
41 |       configCode.push(codegenHashDefine("ATYU_ANIM_GIF_SPEED", gifSpeed));
42 |       resourcesCode.push(gifCode);
43 |     } else {
44 |       configCode.push(codegenHashDefine("ATYU_OLED_GIF_ENABLED", false));
45 |     }
46 |   }
47 | 
48 |   return {
49 |     configCode: configCode.join("\n"),
50 |     resourcesCode: resourcesCode.join("\n"),
51 |   };
52 | };
53 | 


--------------------------------------------------------------------------------
/src/pages/Settings.tsx:
--------------------------------------------------------------------------------
 1 | import { Box, Button, Switch, Typography } from "@mui/material";
 2 | import HorizontalBox from "../components/HorizontalBox";
 3 | import { useAppContext } from "../controllers/context/appContext";
 4 | import { useAppStoreContext } from "../controllers/context/appStoreContext";
 5 | import runSetup from "../functions/commands/runSetup";
 6 | import runSync from "../functions/commands/runSync";
 7 | 
 8 | type SettingsItemProps = {
 9 |   heading: string;
10 |   desc?: string;
11 |   action?: React.ReactNode;
12 | };
13 | 
14 | const SettingsItem = (props: SettingsItemProps) => {
15 |   const { heading, desc, action } = props;
16 |   return (
17 |     <HorizontalBox sx={{ mb: 4, flexWrap: "wrap" }} expanded>
18 |       <Box sx={{ maxWidth: "60%" }}>
19 |         <Typography color="primary">{heading}</Typography>
20 |         <Typography variant="body2">{desc}</Typography>
21 |       </Box>
22 |       {action}
23 |     </HorizontalBox>
24 |   );
25 | };
26 | 
27 | const Settings = () => {
28 |   const appContext = useAppContext();
29 | 	const { enableFirmwareSizeCheck, toggleEnableFirmwareSizeCheck } = useAppStoreContext();
30 |   const handleSync = () => runSync(appContext);
31 | 
32 |   return (
33 |     <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
34 |       <Button disabled={appContext.isDoingTask} variant="contained" sx={{ mb: 4 }} onClick={handleSync}>
35 |         Fetch Atyu QMK updates
36 |       </Button>
37 |       <SettingsItem
38 |         heading="Enable firmware size check"
39 |         desc={`
40 | 					Checks firmware size is safe to install to your keyboard. Disabling this can brick your 
41 | 					keyboard and require a hard reset, but will improve install speed, especially on Windows.
42 | 				`.trim()}
43 |         action={
44 |           <Switch checked={enableFirmwareSizeCheck} onChange={toggleEnableFirmwareSizeCheck} />
45 |         }
46 |       />
47 |       <SettingsItem
48 |         heading="Run fresh Atyu QMK install"
49 |         desc="Had a little too much fun in the Atyu QMK folder? Do a fresh install."
50 |         action={
51 |           <Button variant="contained" onClick={() => runSetup(appContext)}>
52 |             Rerun setup
53 |           </Button>
54 |         }
55 |       />
56 |     </Box>
57 |   );
58 | };
59 | 
60 | export default Settings;
61 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atyu",
 3 |   "description": "OLED configurator for QMK keyboards",
 4 |   "version": "0.5.1",
 5 |   "author": {
 6 |     "name": "atude"
 7 |   },
 8 |   "private": true,
 9 |   "dependencies": {
10 |     "@emotion/react": "^11.9.0",
11 |     "@emotion/styled": "^11.8.1",
12 |     "@mui/icons-material": "^5.8.4",
13 |     "@mui/material": "^5.8.2",
14 |     "@mui/styled-engine-sc": "^5.8.0",
15 |     "@types/react": "^18.0.0",
16 |     "@types/react-dom": "^18.0.0",
17 |     "@types/shelljs": "^0.8.11",
18 |     "canvas": "^2.9.1",
19 |     "electron-is-dev": "^2.0.0",
20 |     "electron-store": "^8.0.2",
21 |     "gif-frames": "./src/packages/gif-frames",
22 |     "react": "^18.1.0",
23 |     "react-dom": "^18.1.0",
24 |     "shelljs": "^0.8.5",
25 |     "web-vitals": "^2.1.0",
26 |     "zod": "^3.17.10"
27 |   },
28 |   "devDependencies": {
29 |     "@types/jest": "^27.0.1",
30 |     "@types/node": "^16.7.13",
31 |     "concurrently": "^7.2.2",
32 |     "cross-env": "^7.0.3",
33 |     "electron": "^19.0.8",
34 |     "electron-builder": "^23.1.0",
35 |     "electron-squirrel-startup": "^1.0.0",
36 |     "eslint-config-prettier": "^8.5.0",
37 |     "node": "^18.5.0",
38 |     "prettier": "^2.6.2",
39 |     "react-scripts": "4.0.3",
40 |     "typescript": "^4.4.2",
41 |     "wait-on": "^6.0.1"
42 |   },
43 |   "main": "build/electron.js",
44 |   "homepage": "./",
45 |   "scripts": {
46 |     "start": "react-scripts start",
47 |     "build": "react-scripts build",
48 |     "dev": "concurrently -k \"cross-env BROWSER=none yarn start\" \"yarn:electron\"",
49 |     "electron": "wait-on tcp:3000 && electron .",
50 |     "pack": "electron-builder --dir",
51 |     "builddist": "yarn build && yarn dist",
52 |     "dist": "electron-builder",
53 | 		"builddistall": "yarn build && electron-builder -mw"
54 |   },
55 |   "build": {
56 |     "appId": "com.atude.atyu",
57 |     "productName": "Atyu",
58 |     "copyright": "Copyright © 2021 Mozamel Anwary (atude)",
59 |     "directories": {
60 |       "buildResources": "resources"
61 |     },
62 |     "mac": {
63 |       "category": "public.app-category.utilities"
64 |     }
65 |   },
66 |   "eslintConfig": {
67 |     "extends": [
68 |       "react-app",
69 |       "react-app/jest"
70 |     ]
71 |   },
72 |   "browserslist": {
73 |     "production": [
74 |       ">0.2%",
75 |       "not dead",
76 |       "not op_mini all"
77 |     ],
78 |     "development": [
79 |       "last 1 chrome version",
80 |       "last 1 firefox version",
81 |       "last 1 safari version"
82 |     ]
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/components/KeyboardFAB.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | import { Download, Downloading } from "@mui/icons-material";
 3 | import {
 4 |   Button,
 5 |   FormControl,
 6 |   InputLabel,
 7 |   MenuItem,
 8 |   Paper,
 9 |   Select,
10 |   SelectChangeEvent,
11 | } from "@mui/material";
12 | import { FlashState } from "../constants/types/flashState";
13 | import { useAppContext } from "../controllers/context/appContext";
14 | import { useAtyuContext } from "../controllers/context/atyuContext";
15 | import runFlash from "../functions/commands/runFlash";
16 | 
17 | const FABBox = styled(Paper)`
18 |   position: fixed;
19 |   bottom: 0;
20 |   right: 0;
21 |   padding: 10px;
22 |   margin: 10px;
23 |   border-radius: 10px;
24 |   display: flex;
25 |   flex-direction: row;
26 |   z-index: 10;
27 | `;
28 | 
29 | const KeyboardFAB = () => {
30 |   const appContext = useAppContext();
31 |   const atyuContext = useAtyuContext();
32 | 	const { keyboard, keyboardsConfig, flashState, isDoingTask, setKeyboard } = appContext;
33 | 
34 |   const handleChange = (event: SelectChangeEvent<string>) => {
35 |     setKeyboard(event.target.value);
36 |   };
37 | 
38 |   const canFlash =
39 |     !isDoingTask &&
40 |     (flashState === FlashState.DONE ||
41 |       flashState === FlashState.IDLE ||
42 |       flashState === FlashState.ERROR);
43 | 
44 |   const handleRunFlash = (onlyPatch: boolean) => {
45 |     runFlash(appContext, atyuContext, onlyPatch);
46 |   };
47 | 
48 |   return (
49 |     <FABBox elevation={0}>
50 |       <FormControl>
51 |         <InputLabel>Keyboard</InputLabel>
52 |         <Select disabled={!canFlash} value={keyboard} label="Keyboard" onChange={(e) => handleChange(e)}>
53 |           {Object.values(keyboardsConfig).map((keyboard) => (
54 |             <MenuItem key={keyboard.key} value={keyboard.key} id={keyboard.key}>
55 |               {keyboard.name}
56 |             </MenuItem>
57 |           ))}
58 |         </Select>
59 |       </FormControl>
60 |       <Button
61 |         sx={{ ml: "8px" }}
62 |         variant="outlined"
63 |         endIcon={<Download />}
64 |         onClick={() => handleRunFlash(true)}
65 |         disabled={!canFlash}
66 |       >
67 |         Save
68 |       </Button>
69 |       <Button
70 |         sx={{ ml: "8px" }}
71 |         variant="contained"
72 |         endIcon={<Downloading />}
73 |         onClick={() => handleRunFlash(false)}
74 |         disabled={!canFlash}
75 |       >
76 |         Save & Install
77 |       </Button>
78 |     </FABBox>
79 |   );
80 | };
81 | 
82 | export default KeyboardFAB;
83 | 


--------------------------------------------------------------------------------
/src/configs/atyuConfig.ts:
--------------------------------------------------------------------------------
 1 | import z from "zod";
 2 | 
 3 | // Selection of keys you can enable or disable
 4 | const zAtyuOptionMultiselectBoolean = z.object({
 5 |   type: z.literal("multiselect_boolean"),
 6 |   multiselectStruct: z.array(
 7 |     z.object({
 8 |       name: z.string(),
 9 |       key: z.string(),
10 |       defaultValue: z.boolean(),
11 |     })
12 |   ),
13 |   multiselectOptions: z
14 |     .object({
15 |       min: z.number().int().optional(),
16 |       max: z.number().int().optional(),
17 |     })
18 |     .optional(),
19 | });
20 | 
21 | // One key you can set a strict value on
22 | const zAtyuOptionRadioNumber = z.object({
23 |   type: z.literal("radio_number"),
24 |   radioKey: z.string(),
25 |   radioValues: z.array(
26 |     z.object({
27 |       name: z.string(),
28 |       value: z.number().int(),
29 |     })
30 |   ),
31 |   defaultValue: z.number().int(),
32 | });
33 | 
34 | const zAtyuOptionSwitch = z.object({
35 |   type: z.literal("switch"),
36 |   key: z.string(),
37 |   defaultValue: z.boolean(),
38 | });
39 | 
40 | const zAtyuOptionUpdateGif = z.object({
41 |   type: z.literal("update_gif"),
42 |   defaultGifSpeed: z.number().int(),
43 | });
44 | 
45 | const zAtyuChildOptionsStruct = z.union([
46 |   zAtyuOptionMultiselectBoolean,
47 |   zAtyuOptionRadioNumber,
48 |   zAtyuOptionSwitch,
49 |   zAtyuOptionUpdateGif,
50 | ]);
51 | 
52 | const zAtyuChildConfig = z.object({
53 |   name: z.string(),
54 |   desc: z.string().optional(),
55 |   struct: zAtyuChildOptionsStruct,
56 | });
57 | 
58 | const zAtyuConfigSection = z.object({
59 | 	name: z.string(),
60 | 	desc: z.string().optional(),
61 | 	key: z.string(),
62 | 	configurable: z.boolean(),
63 | 	enabledByDefault: z.boolean(),
64 | 	children: z.array(zAtyuChildConfig),
65 | 	notes: z.array(z.string()).optional(),
66 | });
67 | 
68 | // Top level configs are all booleans
69 | export const zAtyuConfig = z.array(zAtyuConfigSection);
70 | 
71 | export type AtyuOptionMultiselectBoolean = z.infer<typeof zAtyuOptionMultiselectBoolean>;
72 | export type AtyuOptionRadioNumber = z.infer<typeof zAtyuOptionRadioNumber>;
73 | export type AtyuOptionSwitch = z.infer<typeof zAtyuOptionSwitch>;
74 | export type AtyuOptionUpdateGif = z.infer<typeof zAtyuOptionUpdateGif>;
75 | type AtyuChildOptionsStruct = z.infer<typeof zAtyuChildOptionsStruct>;
76 | export type AtyuChildConfig = z.infer<typeof zAtyuChildConfig>;
77 | export type AtyuChildOptionsType = AtyuChildOptionsStruct["type"];
78 | export type AtyuConfigSection = z.infer<typeof zAtyuConfigSection>;
79 | export type AtyuConfig = z.infer<typeof zAtyuConfig>;
80 | export type AtyuConfigMap = Record<string, AtyuConfig>;
81 | 


--------------------------------------------------------------------------------
/src/functions/imgtocpp.ts:
--------------------------------------------------------------------------------
  1 | // Derived from https://github.com/javl/image2cpp/blob/master/index.html
  2 | const screenWidth = 128;
  3 | const screenHeight = 32;
  4 | const threshold = 128;
  5 | const indent = "        ";
  6 | const double_indent = "            ";
  7 | const gifCodePrefix = (frames_length: number) => `
  8 | #define GIF_LENGTH ${frames_length}
  9 | 
 10 | static const char PROGMEM gif[GIF_LENGTH][512] = {
 11 | `;
 12 | const gifCodeSuffix = `
 13 | };
 14 | `;
 15 | 
 16 | const imageToVertical1bit = (imageData: any) => {
 17 | 	let output_string = double_indent;
 18 | 	let output_index = 0;
 19 | 	let add_indent = false;
 20 | 
 21 | 	for (let p = 0; p < Math.ceil(screenHeight / 8); p++){
 22 | 		for (let x = 0; x < screenWidth; x++){
 23 | 			if (add_indent) {
 24 | 				output_string += double_indent;
 25 | 				add_indent = false;
 26 | 			}
 27 | 			let byteIndex = 7;
 28 | 			let number = 0;
 29 | 
 30 | 			for (let y = 7; y >= 0; y--){
 31 | 				let index = ((p*8)+y)*(screenWidth*4)+x*4;
 32 | 				let avg = (imageData[index] + imageData[index + 1] + imageData[index + 2]) / 3;
 33 | 				if (avg > threshold){
 34 | 					number += Math.pow(2, byteIndex);
 35 | 				}
 36 | 				byteIndex--;
 37 | 			}
 38 | 			let byteSet = number.toString(16);
 39 | 			if (byteSet.length === 1) { 
 40 | 				byteSet = "0" + byteSet; 
 41 | 			}
 42 | 			let b = "0x" + byteSet.toString();
 43 | 			output_string += b + ", ";
 44 | 			output_index++;
 45 | 			if(output_index >= 16){
 46 | 				output_string += "\n";
 47 | 				add_indent = true;
 48 | 				output_index = 0;
 49 | 			}
 50 | 		}
 51 | 	}
 52 | 	return output_string;
 53 | }
 54 | 
 55 | const convertToString = (images: any[], frames_length: number) => {
 56 | 	let output_string = "";
 57 | 	let code;
 58 | 	images.forEach((image: any, index: number) => {
 59 | 		code = indent + "{\n";
 60 | 		code += imageToVertical1bit(image);
 61 | 		code += indent + "},";
 62 | 		if (index !== images.length - 1) {
 63 | 			code += "\n";
 64 | 		}
 65 | 		output_string += code;
 66 | 	});
 67 | 	return output_string;
 68 | };
 69 | 
 70 | const convertImagesToCpp = async (images: any) => {
 71 | 	const imageToRgba = async (imageBase64: any) => {
 72 | 		const img = new Image();
 73 | 		img.width = 128;
 74 | 		img.height = 32;
 75 | 		img.src = 'data:image/jpeg;base64,'+ imageBase64;
 76 | 		let imageData;
 77 | 
 78 | 		await img.decode();
 79 | 		const canvas = document.createElement('canvas');
 80 | 		canvas.width = img.width;
 81 | 		canvas.height = img.height;
 82 | 
 83 | 		const context = canvas.getContext('2d');
 84 | 		if (context) {
 85 | 			context.drawImage(img, 0, 0, 128, 32);
 86 | 			imageData = context.getImageData(0, 0, canvas.width, canvas.height);
 87 | 			// console.log(imageData.data);
 88 | 			return imageData.data;
 89 | 		}
 90 | 	};
 91 | 
 92 | 	const processedImages = [];
 93 | 	for (const image of images) {
 94 | 		processedImages.push(await imageToRgba(image));
 95 | 	}
 96 | 	const outputString = convertToString(processedImages, processedImages.length);
 97 | 	return gifCodePrefix(images.length) + outputString + gifCodeSuffix;
 98 | }
 99 | 
100 | export default convertImagesToCpp;


--------------------------------------------------------------------------------
/src/components/configurator/MultiselectBooleanComponent.tsx:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled";
 2 | import { Box, Checkbox, Typography } from "@mui/material";
 3 | import { atyuValue } from "../../functions/configurator";
 4 | import { useAtyuContext } from "../../controllers/context/atyuContext";
 5 | import { AtyuOptionMultiselectBoolean } from "../../configs/atyuConfig";
 6 | import { blueGrey } from "@mui/material/colors";
 7 | import ConfiguratorSectionHeading from "./subcomponents/ConfiguratorSectionHeading";
 8 | 
 9 | type Props = {
10 |   config: AtyuOptionMultiselectBoolean;
11 |   name: string;
12 |   desc?: string;
13 | };
14 | 
15 | const CheckboxContainer = styled(Box)`
16 |   width: 100%;
17 |   max-height: 200px;
18 |   flex-wrap: wrap;
19 |   display: flex;
20 |   flex-direction: column;
21 |   margin-bottom: 8px;
22 | `;
23 | 
24 | const CheckboxBox = styled(Box)`
25 |   margin-bottom: -8px;
26 |   display: flex;
27 |   flex-direction: row;
28 |   align-items: center;
29 |   flex: 80%;
30 | `;
31 | 
32 | const MultiselectBooleanComponent = (props: Props) => {
33 |   const context = useAtyuContext();
34 |   const { name, desc, config } = props;
35 |   const { multiselectStruct, multiselectOptions } = config;
36 |   const enabledAggregate = multiselectStruct.reduce(
37 |     (total, multiselectKey) => (!!context[multiselectKey.key] ? total + 1 : total),
38 |     0
39 |   );
40 | 
41 |   return (
42 |     <Box>
43 | 			<ConfiguratorSectionHeading name={name} desc={desc} />
44 |       {
45 |         <Typography component="span" variant="subtitle2" color={blueGrey[300]}>
46 |           {multiselectOptions?.max != null &&
47 |             `
48 | 						Choose up to ${multiselectOptions?.max} ${multiselectOptions?.max === 1 ? "option" : "options"}. 
49 | 					`}
50 |           {multiselectOptions?.min != null &&
51 |             `
52 | 						You must have at least ${multiselectOptions?.min} ${
53 |               multiselectOptions?.min === 1 ? "option" : "options"
54 |             } selected.
55 | 					`}
56 |         </Typography>
57 |       }
58 |       <CheckboxContainer>
59 |         {multiselectStruct.map((multiselectKey, i) => {
60 |           const { name, key, defaultValue } = multiselectKey;
61 |           const isEnabled = atyuValue(context[key], defaultValue);
62 |           return (
63 |             <CheckboxBox key={key}>
64 |               <Checkbox
65 |                 disabled={
66 |                   // Disabled if not enough min or too much max
67 |                   !!multiselectOptions &&
68 |                   ((!isEnabled &&
69 |                     multiselectOptions?.max != null &&
70 |                     enabledAggregate >= multiselectOptions?.max) ||
71 |                     (isEnabled &&
72 |                       multiselectOptions?.min != null &&
73 |                       enabledAggregate <= multiselectOptions?.min))
74 |                 }
75 |                 checked={isEnabled}
76 |                 onChange={() => context.dispatchUpdateValue(key, !isEnabled)}
77 |               />
78 |               <Typography>{name}</Typography>
79 |             </CheckboxBox>
80 |           );
81 |         })}
82 |       </CheckboxContainer>
83 |     </Box>
84 |   );
85 | };
86 | 
87 | export default MultiselectBooleanComponent;
88 | 


--------------------------------------------------------------------------------
/src/functions/commands/runSetup.ts:
--------------------------------------------------------------------------------
 1 | import { AppReadyState } from "../../constants/types/appReadyState";
 2 | import { FlashState } from "../../constants/types/flashState";
 3 | import { AppContext } from "../../controllers/context/appContext";
 4 | import { atyuQmkDir, pathOf } from "../path";
 5 | import runVerify from "./runVerify";
 6 | import shell, { checkPrereqs, nodeCmd, shellExecOptions, updateLog } from "./shell";
 7 | 
 8 | // First time setup
 9 | const runSetup = async (appContext: AppContext): Promise<void> => {
10 |   const { setLog, setFlashState, setFlashMessage, setAppReadyState } = appContext;
11 |   setAppReadyState(AppReadyState.LOADING);
12 | 
13 |   // Check for git and qmk existence
14 | 	const hasPrereqs = await checkPrereqs();
15 |   if (!hasPrereqs.success) {
16 | 		if (hasPrereqs.stderr) {
17 | 			updateLog(setLog, hasPrereqs.stderr);
18 | 		}
19 |     updateLog(setLog, "Failed to find QMK; is it installed in another directory?");
20 |     setFlashState(FlashState.ERROR, "Couldn't find QMK installed (required for Atyu)");
21 |     return setAppReadyState(AppReadyState.NOT_READY);
22 |   }
23 | 
24 |   setFlashState(FlashState.RUNNING_SETUP, "Replacing any existing installations");
25 | 
26 | 	// Delete old qmk files here. Stops the bug where 'qmk setup' will repeatedly install 
27 | 	// nested 'qmk_firmware' folders. Also assures clean installs.
28 | 	updateLog(setLog, `Deleting old ${atyuQmkDir} if it exists`);
29 | 	const rmAndMkDirQmkDir = nodeCmd.rmDir(pathOf(atyuQmkDir));
30 | 	if (!rmAndMkDirQmkDir.success) {
31 | 		updateLog(setLog, "There was an issue with removing the old qmk directory");
32 | 		updateLog(setLog, `You can try manually deleting ${atyuQmkDir} instead`);
33 | 		setFlashState(FlashState.ERROR, "Couldn't remove old Atyu QMK files");
34 | 	}
35 | 
36 |   // Setup atude/qmk_firmware
37 |   setFlashMessage("Downloading and setting up Atyu QMK (this can take a few minutes)");
38 |   const setupQmkCmd = shell.exec(
39 |     `qmk clone atude/qmk_firmware ${atyuQmkDir}`,
40 |     shellExecOptions
41 |   );
42 | 
43 |   setupQmkCmd.stdout?.on("data", (data: any) => updateLog(setLog, data.toString()));
44 |   setupQmkCmd.stderr?.on("data", (data: any) => updateLog(setLog, data.toString()));
45 |   setupQmkCmd.on("close", (code: any) => {
46 |     updateLog(setLog, `Finished with code ${Number(code)}`);
47 |     if (Number(code) === 0) {
48 |       updateLog(setLog, "Successfully ran setup qmk (using atude/qmk_firmware)");
49 | 
50 |       // Do a test build using `satisfaction75`
51 |       setFlashMessage(
52 |         "Verifying installation by building test firmware (this can *also* take a few minutes)"
53 |       );
54 |       const testBuildCmd = shell.exec(
55 |         `cd ${atyuQmkDir} && qmk compile -kb cannonkeys/satisfaction75/rev1 -km via`,
56 |         shellExecOptions
57 |       );
58 |       testBuildCmd.stdout?.on("data", (data: any) => updateLog(setLog, data.toString()));
59 |       testBuildCmd.stderr?.on("data", (data: any) => updateLog(setLog, data.toString()));
60 |       testBuildCmd.on("close", (code: any) => {
61 |         updateLog(setLog, `Finished with code ${Number(code)}`);
62 |         if (Number(code) === 0) {
63 |           setFlashState(FlashState.DONE);
64 |           updateLog(setLog, "Successfully built test firmware [satisfaction75]");
65 | 					runVerify(appContext);
66 |         } else {
67 |           setFlashState(FlashState.ERROR, "Failed to build test firmware");
68 |         }
69 |       });
70 |     } else {
71 |       setFlashState(FlashState.ERROR, "Failed to setup atude/qmk_firmware environment");
72 |     }
73 |   });
74 | };
75 | 
76 | export default runSetup;
77 | 


--------------------------------------------------------------------------------
/src/components/configurator/UpdateGifComponent.tsx:
--------------------------------------------------------------------------------
  1 | import { Clear } from '@mui/icons-material';
  2 | import { Alert, Button, CircularProgress, IconButton, Snackbar, useTheme } from '@mui/material';
  3 | import React, { useState } from 'react';
  4 | import HorizontalBox from '../HorizontalBox';
  5 | import { defaultEmptyGif } from '../../constants';
  6 | import { convertGifToCpp } from '../../functions/gifToCpp';
  7 | import { useAtyuContext } from '../../controllers/context/atyuContext';
  8 | import { useAppContext } from '../../controllers/context/appContext';
  9 | import { atyuSpecialKeys } from '../../constants/atyuSpecialKeys';
 10 | 
 11 | function UpdateGifComponent() {
 12 | 	const theme = useTheme();
 13 | 	const { dispatchUpdateGif, ...context } = useAtyuContext();
 14 | 	const { isDoingTask, setDoingTask } = useAppContext();
 15 | 	const [error, setError] = useState<string>("");
 16 | 	const gifUrl = context[atyuSpecialKeys.gifUrl];
 17 | 
 18 | 	const handleError = (msg: string) => {
 19 | 		setError(msg);
 20 | 		setDoingTask(false);
 21 | 		dispatchUpdateGif("", "");
 22 | 	}
 23 | 
 24 | 	const handleClearGif = () => {
 25 | 		dispatchUpdateGif("", "");
 26 | 	}
 27 |  
 28 | 	const handleInputGif = async (event: React.ChangeEvent<HTMLInputElement>) => {
 29 | 		setError("");
 30 | 		setDoingTask(true);
 31 | 		if (event.target.files?.length) {
 32 | 			const file = event.target.files[0];
 33 | 			const fileReader = new FileReader();
 34 | 
 35 | 			fileReader.addEventListener("load", async (fileEvent) => {
 36 | 				const inputGifBuffer = fileEvent?.target?.result?.toString() ?? "";
 37 | 				if (!inputGifBuffer.length) {
 38 | 					handleError("Error processing gif");
 39 | 				}
 40 | 
 41 | 				try {
 42 | 					const codeSnippet = await convertGifToCpp(inputGifBuffer);
 43 | 					if (codeSnippet) {
 44 | 						dispatchUpdateGif(undefined, codeSnippet);
 45 | 						setDoingTask(false);
 46 | 					} else {
 47 | 						handleError("Failed to generate GIF code");
 48 | 					}
 49 | 				} catch (e) {
 50 | 					handleError("Error processing gif");
 51 | 				}
 52 | 			}); 
 53 | 
 54 | 			fileReader.readAsDataURL(file);
 55 | 			dispatchUpdateGif(window.URL.createObjectURL(file), undefined);
 56 | 		};
 57 | 	}
 58 | 
 59 |   return (
 60 | 		<HorizontalBox expanded sx={{ mb: "14px" }}>
 61 | 			<label htmlFor="contained-button-file">
 62 | 				<input
 63 | 					style={{ display: "none" }}
 64 | 					type="file" 
 65 | 					id="contained-button-file" 
 66 | 					name="img"
 67 | 					accept="image/gif"
 68 | 					onChange={event => handleInputGif(event as React.ChangeEvent<HTMLInputElement>)} 
 69 | 				/>
 70 | 				<Button
 71 | 					variant="outlined"
 72 | 					component="span"
 73 | 				>
 74 | 					Upload 128x32 black and white GIF
 75 | 				</Button>
 76 |       </label>
 77 | 			<HorizontalBox>
 78 | 				{!!isDoingTask && <CircularProgress size={30} sx={{ mr: "8px" }} />}
 79 | 				<img 
 80 | 					style={{ 
 81 | 						margin: "4px", 
 82 | 						border: `2px solid ${theme.palette.primary.main}`,
 83 | 						width: "128px",
 84 | 						height: "32px",
 85 | 					}} 
 86 | 					src={gifUrl || defaultEmptyGif}
 87 | 					alt="sat75_gif" 
 88 | 				/>
 89 | 				<IconButton disabled={isDoingTask || !gifUrl} onClick={handleClearGif} color="secondary">
 90 | 					<Clear />
 91 | 				</IconButton>
 92 | 				<Snackbar open={!!error.length} autoHideDuration={6000} onClose={() => setError("")}>
 93 | 					<Alert severity="error" sx={{ width: '100%' }}>
 94 | 						{error}
 95 | 					</Alert>
 96 | 				</Snackbar>	
 97 | 			</HorizontalBox>
 98 | 		</HorizontalBox>
 99 |   );
100 | }
101 | 
102 | export default UpdateGifComponent;
103 | 


--------------------------------------------------------------------------------
/src/functions/commands/runVerify.ts:
--------------------------------------------------------------------------------
 1 | import { AtyuConfigMap, zAtyuConfig } from "../../configs/atyuConfig";
 2 | import { zKeyboardsConfig } from "../../configs/keyboardConfig";
 3 | import { AppReadyState } from "../../constants/types/appReadyState";
 4 | import { FlashState } from "../../constants/types/flashState";
 5 | import { AppContext } from "../../controllers/context/appContext";
 6 | import { atyuHomeConfigFilePath, atyuKeyboardConfigFilename, atyuQmkDir, atyuThumbnailsDir, pathOf } from "../path";
 7 | import { updateLog, checkPrereqs, nodeCmd } from "./shell";
 8 | 
 9 | // Runs whenever app opens. Checks everything is fine and loads files.
10 | const runVerify = async (appContext: AppContext): Promise<void> => {
11 |   const {
12 |     setLog,
13 |     setKeyboardsConfig,
14 |     setAtyuConfigMap,
15 |     setFlashState,
16 |     setAppReadyState,
17 | 		setThumbnails,
18 |   } = appContext;
19 |   setAppReadyState(AppReadyState.LOADING);
20 | 
21 | 	const hasPrereqs = await checkPrereqs();
22 |   if (!hasPrereqs.success) {
23 |     updateLog(setLog, `Couldn't find QMK installed, or QMK is installed in an unknown directory`);
24 |     setFlashState(FlashState.ERROR, "Couldn't find QMK (required for Atyu)");
25 |     return setAppReadyState(AppReadyState.NOT_READY);
26 |   }
27 | 
28 |   const homeConfigExists = nodeCmd.fileExists(pathOf(atyuHomeConfigFilePath));
29 |   if (!homeConfigExists.success) {
30 |     updateLog(setLog, `Couldn't find ${pathOf(atyuHomeConfigFilePath)}.`);
31 |     return setAppReadyState(AppReadyState.NOT_READY);
32 |   }
33 |   updateLog(setLog, `Found ${pathOf(atyuHomeConfigFilePath)}!`);
34 | 
35 |   // Attempt load required home config file, then attempt load every child config file
36 |   // Maybe the child configs can be loaded on a keyboard selection basis to isolate
37 |   // issues across all of Atyu if one keyboard has a bad config.
38 | 	// Also load image thumbnails
39 |   try {
40 |     updateLog(setLog, "Parsing JSON...");
41 | 		const atyuHomeJsonRes = nodeCmd.readJsonFile(pathOf(atyuHomeConfigFilePath));
42 | 		if (!atyuHomeJsonRes.success || !atyuHomeJsonRes.stdout) {
43 | 			throw Error("Couldn't process home json");
44 | 		}
45 |     const keyboardsConfig = zKeyboardsConfig.parse(atyuHomeJsonRes.stdout);
46 |     updateLog(setLog, "Setting config...");
47 |     setKeyboardsConfig(keyboardsConfig);
48 | 
49 | 		let atyuConfigMap: AtyuConfigMap = {};
50 |     for (const keyboardConfig of Object.values(keyboardsConfig)) {
51 | 			const configPath = pathOf(`${atyuQmkDir}${keyboardConfig.dir}${atyuKeyboardConfigFilename}`);
52 | 			const atyuConfigJsonRes = nodeCmd.readJsonFile(configPath);
53 | 			if (!atyuConfigJsonRes.success || !atyuConfigJsonRes.stdout) {
54 | 				throw Error(`Couldn't process config json for ${atyuKeyboardConfigFilename}`);
55 | 			}
56 | 			const atyuConfig = zAtyuConfig.parse(atyuConfigJsonRes.stdout);
57 | 			updateLog(setLog, `Loaded config for ${keyboardConfig.key} from ${configPath}`);
58 | 			atyuConfigMap[keyboardConfig.key] = atyuConfig;
59 | 		};
60 | 
61 |     setAtyuConfigMap(atyuConfigMap);
62 | 
63 | 		// Load thumbnails
64 | 		const thumbnailsRes = nodeCmd.readPngImagesInDir(pathOf(atyuThumbnailsDir));
65 | 		const thumbnailData = (thumbnailsRes?.data) as Record<string, string>;
66 | 		if (Object.keys(thumbnailData).length) {
67 | 			setThumbnails(thumbnailsRes.data);
68 | 		} 
69 | 
70 |     // Add delay cause looks weird without it
71 |     // Could be removed once a lot more keyboards added
72 |     setTimeout(() => setAppReadyState(AppReadyState.READY), 1000);
73 |   } catch (e: Error | any) {
74 |     updateLog(setLog, e?.message ?? e?.toString() ?? "error occured while parsing JSON");
75 | 		setFlashState(FlashState.ERROR, "There were issues trying to read the config files");
76 |     setAppReadyState(AppReadyState.NOT_READY);
77 |   }
78 | };
79 | 
80 | export default runVerify;
81 | 


--------------------------------------------------------------------------------
/src/packages/gif-frames/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Changelog
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 5 | and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 6 | 
 7 | ## [Unreleased]
 8 | 
 9 | ## [1.0.1] 2018-12-03
10 | ### Changed
11 | - Updated some dependencies to resolve security vulnerabilities reported by `npm audit`.
12 | 
13 | ## [1.0.0] - 2018-10-15
14 | ### Added
15 | - New API for getting frameInfo from gif (#9). Thanks [@Snelius30](https://github.com/Snelius30)!
16 | 
17 | ### Changed
18 | - Using `get-pixels` fork which fetches `frameInfo` from omggif.
19 | 
20 | ## [0.4.1] - 2018-08-17
21 | ### Changed
22 | - Updated some dependencies to resolve security vulnerabilities reported by `npm audit`.
23 | 
24 | ## [0.4.0] - 2017-12-05
25 | ### Added
26 | - `cumulative` option for computing frames by layering on top of prior frames
27 | 
28 | ### Removed
29 | - `path` import that was no longer being used
30 | 
31 | ## [0.3.0] - 2017-07-13
32 | ### Added
33 | - Unminified and minified [browser bundles](https://github.com/benwiley4000/gif-frames/blob/master/README.md#cdn-scripts) which will expose the library as a global called `gifFrames` - for those not using npm.
34 | 
35 | ### Changed
36 | - Now relying on (hopefully short-term) forks of [get-pixels](https://www.npmjs.com/package/get-pixels-jpeg-js-upgrade) and [save-pixels](https://www.npmjs.com/package/save-pixels-jpeg-js-upgrade), published to npm. These allow us to run UglifyJS for our minified build, and maintain compatibility with older browsers (the previous jpeg-js dependency [relied on ES2015+ features](https://github.com/eugeneware/jpeg-js/pull/26)).
37 | 
38 | ## [0.2.4] - 2017-06-26
39 | ### Added
40 | - This changelog
41 | - Detailing of `getImage` and `frameIndex` in frame result object
42 | 
43 | ### Changed
44 | - GIF `type` specification for `get-pixels` in the browser (see [this issue](https://github.com/scijs/get-pixels/issues/33))
45 | - Improved/actually correct browser usage example
46 | - `getImageStream` in frame result object now called `getImage` (since it can return a `canvas` element *or* a stream)
47 | 
48 | ## [0.2.3] - 2017-06-26
49 | ### Added
50 | - npm registry badge in readme
51 | 
52 | ### Changed
53 | - `Promise` gets returned even if we bail during options validation
54 | 
55 | ## [0.2.2] - 2017-06-26
56 | ### Added
57 | - More terse intro code example included in readme
58 | 
59 | ### Changed
60 | - Passing `'all'` as `frames` option ***really*** works now (actually)
61 | 
62 | ## [0.2.1] - 2017-06-26
63 | ### Changed
64 | - Passing `'all'` as `frames` option actually works now (**almost! just kidding**)
65 | 
66 | ## [0.2.0] - 2017-06-26
67 | ### Added
68 | - `frames` option for specifying which frames we want
69 | - `getFrames` returns a `Promise` if available in environment
70 | - Callback and promise pass a data stream for each requested frame
71 | - Dependency on `multi-integer-range`
72 | 
73 | ### Changed
74 | - Better browser usage example (**but it doesn't work!**)
75 | 
76 | ### Removed
77 | - File writing - users can do that themselves (helps with interoperability between Node / browser)
78 | 
79 | ## 0.1.0 - 2017-06-25
80 | ### Added
81 | - Initial module definition
82 | - All GIF frames written to file with `fs`
83 | - Accepts optional error callback
84 | - Dependencies on `get-pixels` and `save-pixels`
85 | 
86 | [Unreleased]: https://github.com/benwiley4000/gif-frames/compare/v1.0.1...HEAD
87 | [1.0.1]: https://github.com/benwiley4000/gif-frames/compare/v1.0.0...v1.0.1
88 | [1.0.0]: https://github.com/benwiley4000/gif-frames/compare/v0.4.1...v1.0.0
89 | [0.4.1]: https://github.com/benwiley4000/gif-frames/compare/v0.4.0...v0.4.1
90 | [0.4.0]: https://github.com/benwiley4000/gif-frames/compare/v0.3.0...v0.4.0
91 | [0.3.0]: https://github.com/benwiley4000/gif-frames/compare/v0.2.4...v0.3.0
92 | [0.2.4]: https://github.com/benwiley4000/gif-frames/compare/v0.2.3...v0.2.4
93 | [0.2.3]: https://github.com/benwiley4000/gif-frames/compare/v0.2.2...v0.2.3
94 | [0.2.2]: https://github.com/benwiley4000/gif-frames/compare/v0.2.1...v0.2.2
95 | [0.2.1]: https://github.com/benwiley4000/gif-frames/compare/v0.2.0...v0.2.1
96 | [0.2.0]: https://github.com/benwiley4000/gif-frames/compare/v0.1.0...v0.2.0
97 | 


--------------------------------------------------------------------------------
/src/packages/gif-frames/gif-frames.js:
--------------------------------------------------------------------------------
  1 | var MultiRange = require('multi-integer-range').MultiRange;
  2 | var getPixels = require('get-pixels-frame-info-update');
  3 | var savePixels = require('save-pixels-jpeg-js-upgrade');
  4 | 
  5 | function nopromises () {
  6 |   throw new Error(
  7 |     'Promises not supported in your environment. ' +
  8 |     'Use the callback argument or a Promise polyfill.'
  9 |   );
 10 | }
 11 | 
 12 | var brokenPromise = {
 13 |   then: nopromises,
 14 |   catch: nopromises
 15 | };
 16 | 
 17 | function gifFrames (options, callback) {
 18 |   options = options || {};
 19 |   callback = callback || function () {};
 20 | 
 21 |   var promise;
 22 |   var resolve;
 23 |   var reject;
 24 |   if (typeof Promise === 'function') {
 25 |     promise = new Promise(function (_resolve, _reject) {
 26 |       resolve = function (res) {
 27 |         callback(null, res);
 28 |         _resolve(res);
 29 |       };
 30 |       reject = function (err) {
 31 |         callback(err);
 32 |         _reject(err);
 33 |       };
 34 |     });
 35 |   } else {
 36 |     promise = brokenPromise;
 37 |     resolve = function (res) {
 38 |       callback(null, res);
 39 |     };
 40 |     reject = callback;
 41 |   }
 42 | 
 43 |   var url = options.url;
 44 |   if (!url) {
 45 |     reject(new Error('"url" option is required.'));
 46 |     return promise;
 47 |   }
 48 |   var frames = options.frames;
 49 |   if (!frames && frames !== 0) {
 50 |     reject(new Error('"frames" option is required.'));
 51 |     return promise;
 52 |   }
 53 |   var outputType = options.outputType || 'jpg';
 54 |   var quality = options.quality;
 55 |   var cumulative = options.cumulative;
 56 | 
 57 |   var acceptedFrames = frames === 'all' ? 'all' : new MultiRange(frames);
 58 | 
 59 |   // Necessary to check if we're in Node or the browser until this is fixed:
 60 |   // https://github.com/scijs/get-pixels/issues/33
 61 |   var inputType = typeof window === 'undefined' ? 'image/gif' : '.GIF';
 62 |   getPixels(url, inputType, function (err, pixels, framesInfo) {
 63 |     if (err) {
 64 |       reject(err);
 65 |       return;
 66 |     }
 67 |     if (pixels.shape.length < 4) {
 68 |       reject(new Error('"url" input should be multi-frame GIF.'));
 69 |       return;
 70 |     }
 71 |     var frameData = [];
 72 |     var maxAccumulatedFrame = 0;
 73 |     for (var i = 0; i < pixels.shape[0]; i++) {
 74 |       if (acceptedFrames !== 'all' && !acceptedFrames.has(i)) {
 75 |         continue;
 76 |       }
 77 |       (function (frameIndex) {
 78 |         frameData.push({
 79 |           getImage: function () {
 80 |             if (cumulative && frameIndex > maxAccumulatedFrame) {
 81 |               // for each frame, replace any invisible pixel with
 82 |               // the corresponding pixel from the previous frame (beginning
 83 |               // with the second frame).
 84 |               // to avoid doing too much work at once we only compute the
 85 |               // frames up to and including the requested frame.
 86 |               var lastFrame = pixels.pick(maxAccumulatedFrame);
 87 |               for (var f = maxAccumulatedFrame + 1; f <= frameIndex; f++) {
 88 |                 var frame = pixels.pick(f);
 89 |                 for (var x = 0; x < frame.shape[0]; x++) {
 90 |                   for (var y = 0; y < frame.shape[1]; y++) {
 91 |                     if (frame.get(x, y, 3) === 0) {
 92 |                       // if alpha is fully transparent, use the pixel
 93 |                       // from the last frame
 94 |                       frame.set(x, y, 0, lastFrame.get(x, y, 0));
 95 |                       frame.set(x, y, 1, lastFrame.get(x, y, 1));
 96 |                       frame.set(x, y, 2, lastFrame.get(x, y, 2));
 97 |                       frame.set(x, y, 3, lastFrame.get(x, y, 3));
 98 |                     }
 99 |                   }
100 |                 }
101 |                 lastFrame = frame;
102 |               }
103 |               maxAccumulatedFrame = frameIndex;
104 |             }
105 |             return savePixels(pixels.pick(frameIndex), outputType, {
106 |               quality: quality
107 |             });
108 |           },
109 |           frameIndex: frameIndex,
110 |           frameInfo: framesInfo && framesInfo[frameIndex]
111 |         });
112 |       })(i);
113 |     }
114 |     resolve(frameData);
115 |   });
116 | 
117 |   return promise;
118 | }
119 | 
120 | module.exports = gifFrames;
121 | 


--------------------------------------------------------------------------------
/src/controllers/context/appContext.tsx:
--------------------------------------------------------------------------------
  1 | import { createContext, Dispatch, SetStateAction, useContext, useEffect, useState } from "react";
  2 | import { AtyuConfigMap } from "../../configs/atyuConfig";
  3 | import { KeyboardsConfig } from "../../configs/keyboardConfig";
  4 | import { defaultKeyboardKey } from "../../constants";
  5 | import { AppReadyState } from "../../constants/types/appReadyState";
  6 | import { FlashState } from "../../constants/types/flashState";
  7 | 
  8 | export type AppContext = {
  9 |   appReadyState: AppReadyState;
 10 |   keyboard: string;
 11 |   keyboardsConfig: KeyboardsConfig;
 12 |   atyuConfigMap: AtyuConfigMap;
 13 |   flashState: FlashState;
 14 |   flashMessage: string;
 15 |   flashProgress: number;
 16 |   isDoingTask: boolean;
 17 |   log: string[];
 18 | 	thumbnails: Record<string, string>;
 19 |   setAppReadyState: Dispatch<SetStateAction<AppReadyState>>;
 20 |   setKeyboard: Dispatch<SetStateAction<string>>;
 21 |   setKeyboardsConfig: Dispatch<SetStateAction<KeyboardsConfig>>;
 22 |   setAtyuConfigMap: Dispatch<SetStateAction<AtyuConfigMap>>;
 23 |   setFlashState: (state: FlashState, msg?: string) => void;
 24 |   setFlashMessage: Dispatch<SetStateAction<string>>;
 25 |   setFlashProgress: Dispatch<SetStateAction<number>>;
 26 |   setDoingTask: Dispatch<SetStateAction<boolean>>;
 27 |   setLog: Dispatch<SetStateAction<string[]>>;
 28 | 	setThumbnails: Dispatch<SetStateAction<Record<string, string>>>;
 29 | };
 30 | 
 31 | const context = createContext<AppContext>({
 32 |   appReadyState: AppReadyState.LOADING,
 33 |   keyboard: defaultKeyboardKey,
 34 |   keyboardsConfig: {},
 35 |   atyuConfigMap: {},
 36 |   flashState: FlashState.IDLE,
 37 |   flashMessage: "",
 38 |   flashProgress: 0,
 39 |   isDoingTask: false,
 40 |   log: [],
 41 | 	thumbnails: {},
 42 |   setAppReadyState: () => {},
 43 |   setKeyboard: () => {},
 44 |   setKeyboardsConfig: () => {},
 45 |   setAtyuConfigMap: () => {},
 46 |   setFlashState: () => {},
 47 |   setFlashMessage: () => {},
 48 |   setFlashProgress: () => {},
 49 |   setDoingTask: () => {},
 50 |   setLog: () => {},
 51 | 	setThumbnails: () => {},
 52 | });
 53 | 
 54 | let timer: NodeJS.Timeout;
 55 | 
 56 | export const AppProvider = ({ children }: { children?: React.ReactNode }) => {
 57 |   const [appReadyState, setAppReadyState] = useState<AppReadyState>(AppReadyState.LOADING);
 58 |   const [keyboard, setKeyboard] = useState<string>(defaultKeyboardKey);
 59 |   const [keyboardsConfig, setKeyboardsConfig] = useState<KeyboardsConfig>({});
 60 |   const [atyuConfigMap, setAtyuConfigMap] = useState<AtyuConfigMap>({});
 61 |   const [flashState, setFlashState] = useState<FlashState>(FlashState.IDLE);
 62 |   const [flashMessage, setFlashMessage] = useState<string>("");
 63 |   const [flashProgress, setFlashProgress] = useState<number>(0);
 64 |   const [isDoingTask, setDoingTask] = useState<boolean>(false);
 65 |   const [log, setLog] = useState<string[]>([]);
 66 | 	const [thumbnails, setThumbnails] = useState<Record<string, string>>({});
 67 | 
 68 |   const timedFlashState = (state: FlashState) =>
 69 |     state === FlashState.DONE || state === FlashState.CANCELLED;
 70 | 
 71 |   useEffect(() => {
 72 |     if (timedFlashState(flashState)) {
 73 | 			clearTimeout(timer);
 74 | 			timer = setTimeout(
 75 | 				() => {
 76 | 					setFlashState(FlashState.IDLE);
 77 | 					setFlashMessage("");
 78 | 				},
 79 | 				5000
 80 | 			);
 81 |     } else {
 82 | 			if (timer) {
 83 | 				clearTimeout(timer);
 84 | 			}
 85 | 		}
 86 |   }, [flashState, flashMessage, setFlashState, setFlashMessage]);
 87 | 
 88 |   const value: AppContext = {
 89 |     appReadyState,
 90 |     setAppReadyState,
 91 |     keyboard,
 92 |     setKeyboard,
 93 |     keyboardsConfig,
 94 |     setKeyboardsConfig,
 95 |     atyuConfigMap,
 96 |     setAtyuConfigMap,
 97 |     flashState,
 98 |     setFlashState: (state: FlashState, msg?: string) => {
 99 |       setFlashState(state);
100 |       setFlashMessage(msg ?? "");
101 |     },
102 |     flashMessage,
103 |     setFlashMessage,
104 |     flashProgress,
105 |     setFlashProgress,
106 |     isDoingTask,
107 |     setDoingTask,
108 |     log,
109 |     setLog,
110 | 		thumbnails,
111 | 		setThumbnails,
112 |   };
113 | 
114 |   return <context.Provider value={value}>{children}</context.Provider>;
115 | };
116 | 
117 | export const useAppContext = () => {
118 |   const appContext = useContext(context);
119 |   return appContext;
120 | };
121 | 


--------------------------------------------------------------------------------
/src/components/TabPanel.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import Tabs from "@mui/material/Tabs";
  3 | import Tab from "@mui/material/Tab";
  4 | import Box from "@mui/material/Box";
  5 | import KeyboardFAB from "./KeyboardFAB";
  6 | import Configurator from "../pages/Configurator";
  7 | import { AtyuConfigProvider } from "../controllers/context/atyuContext";
  8 | import styled from "@emotion/styled";
  9 | import { useAppContext } from "../controllers/context/appContext";
 10 | import { Button, CircularProgress, Tooltip, Typography } from "@mui/material";
 11 | import runVerify from "../functions/commands/runVerify";
 12 | import { AppReadyState } from "../constants/types/appReadyState";
 13 | import runSetup from "../functions/commands/runSetup";
 14 | import { HelpOutline } from "@mui/icons-material";
 15 | import { setupHelpText } from "../constants";
 16 | import HorizontalBox from "./HorizontalBox";
 17 | import Settings from "../pages/Settings";
 18 | 
 19 | interface TabPanelProps {
 20 |   children?: React.ReactNode;
 21 |   index: number;
 22 |   value: number;
 23 | }
 24 | 
 25 | const FixedTabs = styled(Tabs)`
 26 |   height: 100%;
 27 |   position: fixed;
 28 | `;
 29 | 
 30 | const TabPanelContainer = styled.div`
 31 |   padding-left: 100px;
 32 |   margin-bottom: 100px;
 33 |   height: calc(100vh - 104px);
 34 |   width: 1000px;
 35 |   margin: auto;
 36 | `;
 37 | 
 38 | const TabPanelContent = styled(Box)`
 39 |   width: 100%;
 40 | `;
 41 | 
 42 | const SetupBox = styled(Box)`
 43 |   display: flex;
 44 |   flex-direction: column;
 45 |   align-items: center;
 46 |   margin: auto;
 47 |   margin-top: 100px;
 48 |   max-width: 400px;
 49 |   text-align: center;
 50 | `;
 51 | 
 52 | const BigLoading = styled(CircularProgress)`
 53 |   position: absolute;
 54 |   bottom: 0;
 55 |   right: 0;
 56 |   margin: 24px;
 57 | `;
 58 | 
 59 | // const AtyuImage = styled.img`
 60 | // 	position: absolute;
 61 | // 	bottom: 0;
 62 | // 	left: 0;
 63 | // 	width: 48px;
 64 | // 	height: 48px;
 65 | // 	padding: 2px;
 66 | // 	margin-bottom: 28px;
 67 | // 	margin-left: 28px;
 68 | // `;
 69 | 
 70 | function TabPanel(props: TabPanelProps) {
 71 |   const { children, value, index, ...other } = props;
 72 | 
 73 |   return (
 74 |     <TabPanelContainer
 75 |       role="tabpanel"
 76 |       hidden={value !== index}
 77 |       id={`vertical-tabpanel-${index}`}
 78 |       {...other}
 79 |     >
 80 |       {value === index && (
 81 |         <TabPanelContent sx={{ pt: 2, pl: 4, pr: 4, pb: 12 }}>{children}</TabPanelContent>
 82 |       )}
 83 |     </TabPanelContainer>
 84 |   );
 85 | }
 86 | 
 87 | export default function VerticalTabs() {
 88 |   const appContext = useAppContext();
 89 | 	const { appReadyState } = appContext;
 90 |   const [value, setValue] = useState(0);
 91 | 
 92 |   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
 93 |     setValue(newValue);
 94 |   };
 95 | 
 96 |   useEffect(() => {
 97 | 		runVerify(appContext);
 98 |   // eslint-disable-next-line react-hooks/exhaustive-deps
 99 |   }, []);
100 | 
101 |   return (
102 |     <Box sx={{ display: "flex", marginTop: "100px", overflowY: "scroll" }}>
103 |       {appReadyState === AppReadyState.LOADING && <BigLoading />}
104 |       {appReadyState === AppReadyState.NOT_READY && (
105 |         <SetupBox>
106 |           <HorizontalBox sx={{ mb: 4 }}>
107 |             <Typography variant="h6" sx={{ mr: 1 }}>
108 |               Couldn't load Atyu QMK files
109 |             </Typography>
110 |             <Tooltip title={setupHelpText} arrow leaveDelay={200}>
111 |               <HelpOutline color="disabled" />
112 |             </Tooltip>
113 |           </HorizontalBox>
114 |           <Button variant="contained" onClick={() => runSetup(appContext)}>
115 |             Run setup
116 |           </Button>
117 |         </SetupBox>
118 |       )}
119 |       {appReadyState === AppReadyState.READY && (
120 |         <AtyuConfigProvider>
121 |           <FixedTabs
122 |             orientation="vertical"
123 |             variant="scrollable"
124 |             value={value}
125 |             onChange={handleChange}
126 |             sx={{ borderRight: 1, borderColor: "divider", m: "auto 2px" }}
127 |           >
128 |             <Tab label="Home" />
129 |             <Tab label="Settings" />
130 |           </FixedTabs>
131 |           <TabPanel value={value} index={0}>
132 |             <Box>
133 |               <KeyboardFAB />
134 |               <Configurator />
135 |             </Box>
136 |           </TabPanel>
137 |           <TabPanel value={value} index={1}>
138 |             <Settings />
139 |           </TabPanel>
140 |         </AtyuConfigProvider>
141 |       )}
142 | 			{/* <AtyuImage src="/in_app_icon.png" alt="atyu icon" /> */}
143 |     </Box>
144 |   );
145 | }
146 | 


--------------------------------------------------------------------------------
/src/packages/gif-frames/README.md:
--------------------------------------------------------------------------------
  1 | # gif-frames
  2 | 
  3 | A pure JavaScript tool for extracting GIF frames and saving to file. Works in Node or the browser. Uses [get-pixels](https://github.com/scijs/get-pixels) and [save-pixels](https://github.com/scijs/save-pixels) under the hood.
  4 | 
  5 | [![NPM](https://nodei.co/npm/gif-frames.png)](https://npmjs.org/package/gif-frames)
  6 | 
  7 | ## Install
  8 | 
  9 | ```bash
 10 | npm install gif-frames
 11 | ```
 12 | 
 13 | ### CDN scripts
 14 | 
 15 | If you're not using npm, you can include one of these in your HTML file:
 16 | 
 17 | * [https://unpkg.com/gif-frames?main=bundled](https://unpkg.com/gif-frames?main=bundled) (Unminified)
 18 | * [https://unpkg.com/gif-frames?main=bundled-min](https://unpkg.com/gif-frames?main=bundled-min) (Minified)
 19 | 
 20 | ```html
 21 | <!-- unminified -->
 22 | <script src="https://unpkg.com/gif-frames@0.4.0?main=bundled"></script>
 23 | 
 24 | <!-- minified -->
 25 | <script src="https://unpkg.com/gif-frames@0.4.0?main=bundled-min"></script>
 26 | ```
 27 | 
 28 | This will expose `gifFrames` as a global variable.
 29 | 
 30 | ## `require('gif-frames')(options[, callback])`
 31 | 
 32 | ```javascript
 33 | var gifFrames = require('gif-frames');
 34 | var fs = require('fs');
 35 | 
 36 | gifFrames({ url: 'image.gif', frames: 0 }).then(function (frameData) {
 37 |   frameData[0].getImage().pipe(fs.createWriteStream('firstframe.jpg'));
 38 | });
 39 | ```
 40 | 
 41 | ### Options:
 42 | 
 43 | * `url` (**required**): The pathname to the file, or an [in-memory Buffer](http://nodejs.org/api/buffer.html)
 44 | * `frames` (**required**): The set of frames to extract. Can be one of:
 45 |   - `'all'` (gets every frame)
 46 |   - Any valid [`Initializer`](https://github.com/smikitky/node-multi-integer-range#initializers) accepted by the [multi-integer-range library](https://github.com/smikitky/node-multi-integer-range)
 47 | * `outputType` (*optional*, default `'jpg'`): Type to use for output (see [`type`](https://github.com/scijs/save-pixels#requiresave-pixelsarray-type-options) for `save-pixels`)
 48 | * `quality` (*optional*): Jpeg quality (see [`quality`](https://github.com/scijs/save-pixels#requiresave-pixelsarray-type-options) for `save-pixels`)
 49 | * `cumulative` (*optional*, default `false`): Many animated GIFs will only contain partial image information in each frame after the first. Specifying `cumulative` as `true` will compute each frame by layering it on top of previous frames. *Note: the cost of this computation is proportional to the size of the last requested frame index.*
 50 | 
 51 | The callback accepts the arguments `(error, frameData)`.
 52 | 
 53 | ### Returns:
 54 | 
 55 | A `Promise` resolving to the `frameData` array (if promises are supported in the running environment)
 56 | 
 57 | ## `frameData`
 58 | 
 59 | An array of objects of the form:
 60 | 
 61 | ```javascript
 62 | {
 63 |   getImage,
 64 |   frameIndex,
 65 |   frameInfo
 66 | }
 67 | ```
 68 | 
 69 | ### `getImage()`
 70 | 
 71 | Returns one of:
 72 | * A drawn canvas DOM element, if `options.outputType` is `'canvas'`
 73 | * A data stream which can be piped to file output, otherwise
 74 | 
 75 | ###  `frameIndex`
 76 | 
 77 | The index corresponding to the frame's position in the original GIF (not necessarily the same as the frame's position in the result array)
 78 | 
 79 | ###  `frameInfo`
 80 | 
 81 | It is an Object with metadata of the frame. Fields:
 82 | 
 83 | Name|Type|Description
 84 | ----|-----|-----------
 85 | x | Integer | Image Left Position
 86 | y | Integer | Image Top Position
 87 | width | Integer | Image Width
 88 | height | Integer | Image Height
 89 | has_local_palette | Boolean | Image local palette presentation flag
 90 | palette_offset | Integer | Image palette offset
 91 | palette_size | Integer | Image palette size
 92 | data_offset | Integer | Image data offset
 93 | data_length | Integer | Image data length
 94 | transparent_index | Integer | Transparent Color Index
 95 | interlaced | Boolean | Interlace Flag
 96 | delay | Integer | Delay Time (1/100ths of a second)
 97 | disposal | Integer | Disposal method
 98 | 
 99 | See [GIF spec for details](http://www.onicos.com/staff/iz/formats/gif.html)
100 | 
101 | ## Examples
102 | 
103 | Writing selected frames to the file system in Node:
104 | 
105 | ```javascript
106 | var gifFrames = require('gif-frames');
107 | var fs = require('fs');
108 | 
109 | gifFrames(
110 |   { url: 'image.gif', frames: '0-2,7', outputType: 'png', cumulative: true },
111 |   function (err, frameData) {
112 |     if (err) {
113 |       throw err;
114 |     }
115 |     frameData.forEach(function (frame) {
116 |       frame.getImage().pipe(fs.createWriteStream(
117 |         'image-' + frame.frameIndex + '.png'
118 |       ));
119 |     });
120 |   }
121 | );
122 | ```
123 | 
124 | Drawing first frame to canvas in browser (and using a `Promise`):
125 | 
126 | ```javascript
127 | var gifFrames = require('gif-frames');
128 | 
129 | gifFrames({ url: 'image.gif', frames: 0, outputType: 'canvas' })
130 |   .then(function (frameData) {
131 |     document.body.appendChild(frameData[0].getImage());
132 |   }).catch(console.error.bind(console));
133 | ```
134 | 


--------------------------------------------------------------------------------
/src/components/FlashAlert.tsx:
--------------------------------------------------------------------------------
  1 | import styled from "@emotion/styled";
  2 | import { CancelOutlined, SaveAlt, Segment } from "@mui/icons-material";
  3 | import {
  4 |   Alert,
  5 |   AlertColor,
  6 |   AlertTitle,
  7 |   Box,
  8 |   Button,
  9 |   ButtonGroup,
 10 |   CircularProgress,
 11 |   LinearProgress,
 12 | 	Snackbar,
 13 | 	Tooltip,
 14 | } from "@mui/material";
 15 | import { useState } from "react";
 16 | import { versionString } from "../constants";
 17 | import {
 18 |   FlashAlertSeverityMap,
 19 |   FlashState,
 20 |   FlashStateDisplayStrings,
 21 | } from "../constants/types/flashState";
 22 | import { useAppContext } from "../controllers/context/appContext";
 23 | import { cancelFlash } from "../functions/commands/runFlash";
 24 | import { nodeCmd } from "../functions/commands/shell";
 25 | import { logFilePath, pathOf } from "../functions/path";
 26 | 
 27 | const AlertStyled = styled(Alert)`
 28 |   top: 0;
 29 |   position: fixed;
 30 |   padding-top: 15px;
 31 |   margin-bottom: 20px;
 32 |   display: flex;
 33 |   flex-direction: row;
 34 |   width: 100%;
 35 |   height: 90px;
 36 |   z-index: 999;
 37 | `;
 38 | 
 39 | const ActionButtonsContainer = styled(Box)`
 40 |   position: fixed;
 41 |   right: 0;
 42 |   top: 0;
 43 |   margin: 24px;
 44 | `;
 45 | 
 46 | const LogBox = styled(Box)`
 47 |   position: fixed;
 48 |   display: flex;
 49 |   flex-direction: column-reverse;
 50 |   top: 0;
 51 |   left: 0;
 52 |   height: 300px;
 53 |   width: 100%;
 54 |   margin-top: 88px;
 55 |   padding: 20px;
 56 |   overflow-y: scroll;
 57 |   border-bottom-left-radius: 10px;
 58 |   border-bottom-right-radius: 10px;
 59 |   background-color: #000;
 60 |   box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 8px;
 61 |   overscroll-behavior: contain;
 62 | `;
 63 | 
 64 | const StandardLinearProgress = styled(LinearProgress)`
 65 |   width: 400px;
 66 | `;
 67 | 
 68 | const StyledCircularProgress = styled(CircularProgress)`
 69 |   margin-right: 20px;
 70 |   margin-left: 20px;
 71 | `;
 72 | 
 73 | const FlashAlert = () => {
 74 |   const { flashState, flashMessage, flashProgress, log } = useAppContext();
 75 |   const flashSeverity = FlashAlertSeverityMap[flashState];
 76 |   const displayString = FlashStateDisplayStrings[flashState];
 77 |   const [viewLog, setViewLog] = useState(false);
 78 | 	const [snackbar, setSnackbar] = useState<[string, AlertColor]>(["", "info"]);
 79 | 
 80 |   const handleCancel = () => cancelFlash();
 81 | 	const downloadLog = () => {
 82 | 		console.log(pathOf(logFilePath));
 83 | 		const cmd = nodeCmd.saveToFile(log.reverse().join("\n"), pathOf(logFilePath));
 84 | 		if (cmd.success) {
 85 | 			setSnackbar(["Saved log to desktop", "success"]);
 86 | 		} else {
 87 | 			setSnackbar(["Failed to save log to desktop", "error"]);
 88 | 		}
 89 | 	}
 90 | 
 91 |   const getLogComponent = () => (
 92 |     <>
 93 |       <ActionButtonsContainer>
 94 | 				<Snackbar open={!!snackbar[0].length} autoHideDuration={6000} onClose={() => setSnackbar(["", "info"])}>
 95 | 					<Alert severity={snackbar[1]}>
 96 | 						{snackbar[0]}
 97 | 					</Alert>
 98 | 				</Snackbar>	
 99 |         <ButtonGroup>
100 |           {flashState === FlashState.WAITING_FOR_DFU && (
101 | 						<Tooltip title="Cancel installation">
102 | 							<Button key="cancel" color="error" variant="outlined" onClick={handleCancel}>
103 | 								<CancelOutlined />
104 | 							</Button>
105 | 						</Tooltip>
106 |           )}
107 | 					<Tooltip title={viewLog ? "Hide log" : "View log"}>
108 | 						<Button key="view" variant="outlined" onClick={() => setViewLog(!viewLog)}>
109 | 							<Segment />
110 | 						</Button>
111 | 					</Tooltip>
112 | 					<Tooltip title="Save log to desktop">
113 | 						<Button key="dowload" variant="outlined" onClick={downloadLog}>
114 | 							<SaveAlt />
115 | 						</Button>
116 | 					</Tooltip>
117 |         </ButtonGroup>
118 |       </ActionButtonsContainer>
119 |       {!!viewLog && (
120 |         <LogBox>
121 |           {log.map((logString, i) => (
122 |             <div key={i}>
123 |               <code style={{ fontSize: "12px" }}>{logString}</code>
124 |             </div>
125 |           ))}
126 |         </LogBox>
127 |       )}
128 |     </>
129 |   );
130 | 
131 |   return !flashSeverity ? (
132 |     <AlertStyled severity="info" icon={false}>
133 |       <AlertTitle>Atyu | Mods for QMK keyboards</AlertTitle>
134 |       {versionString}
135 |       {getLogComponent()}
136 |     </AlertStyled>
137 |   ) : (
138 |     <AlertStyled severity={flashSeverity}>
139 |       <AlertTitle>{displayString}</AlertTitle>
140 |       <Box display="flex" flexDirection="row" alignItems="center">
141 |         {!!flashMessage.length && <span>{flashMessage}</span>}
142 |         {(flashState === FlashState.COMPILING ||
143 |           flashState === FlashState.PATCHING ||
144 |           flashState === FlashState.CHECK_SIZE) && <StandardLinearProgress />}
145 |         {(flashState === FlashState.WAITING_FOR_DFU ||
146 |           flashState === FlashState.RUNNING_SETUP ||
147 |           flashState === FlashState.UPDATING) && <StyledCircularProgress size={20} />}
148 |         {(flashState === FlashState.FLASHING_ERASING ||
149 |           flashState === FlashState.FLASHING_DOWNLOADING) && (
150 |           <StandardLinearProgress variant="determinate" value={flashProgress} />
151 |         )}
152 |       </Box>
153 |       {getLogComponent()}
154 |     </AlertStyled>
155 |   );
156 | };
157 | 
158 | export default FlashAlert;
159 | 


--------------------------------------------------------------------------------
/src/functions/commands/shell.ts:
--------------------------------------------------------------------------------
  1 | import { Dispatch, SetStateAction } from "react";
  2 | import _shell, { ExecOptions } from "shelljs";
  3 | import _os from "os";
  4 | import _fs from "fs";
  5 | import _path from "path";
  6 | 
  7 | const shell: typeof _shell = window.require("shelljs");
  8 | const os: typeof _os = window.require("os");
  9 | const fs: typeof _fs = window.require("fs");
 10 | const path: typeof _path = window.require("path");
 11 | 
 12 | type ShellOutput = {
 13 |   success: boolean;
 14 |   code: number;
 15 |   stdout?: string;
 16 |   stderr?: string;
 17 |   pid?: number;
 18 | 	data?: any;
 19 | };
 20 | 
 21 | const winQmkShellPath = path.join("C:", "QMK_MSYS", "shell_connector.cmd");
 22 | 
 23 | export const isMac = os.platform() === "darwin";
 24 | export const homeDir = os.homedir();
 25 | 
 26 | // Fix mac path
 27 | if (isMac) {
 28 |   shell.env["PATH"] = "~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/homebrew/bin";
 29 | }
 30 | 
 31 | // If we want to use a specific node instance:
 32 | // shell.config.execPath = String(shell.which("node"));
 33 | // console.log("shell env path: " + shell.env["PATH"]);
 34 | // console.log("is mac?: " + isMac);
 35 | // console.log("node: " + shell.which("node"));
 36 | // console.log("shell: " + shell.env["SHELL"]);
 37 | 
 38 | export const shellExecOptions: ExecOptions & { async: true } = {
 39 |   async: true,
 40 |   // Specify QMK MSYS shell on windows. Use default shell on mac
 41 |   shell: isMac ? shell.env["SHELL"] : winQmkShellPath,
 42 |   silent: true,
 43 | };
 44 | 
 45 | export const checkPrereqs = async () => {
 46 |   if (isMac) {
 47 |     // Test git and qmk exists
 48 |     return shellRun("which git && which qmk");
 49 |   } else {
 50 |     // Test that the qmk msys file exists instead
 51 |     return shellRun("true");
 52 |   }
 53 | };
 54 | 
 55 | // Add log in reverse order for printing purposes
 56 | export const updateLog = (setLog: Dispatch<SetStateAction<string[]>>, dataString: string) => {
 57 |   // Regex to remove ANSI colouring
 58 |   setLog((existingLog) => [
 59 |     // eslint-disable-next-line no-control-regex
 60 |     `=> ${dataString.toString().replace(/\u001b[^m]*?m/g, "")}`,
 61 |     ...existingLog,
 62 |   ]);
 63 |   // console.log(dataString);
 64 | };
 65 | 
 66 | export const killAsyncCmd = (shellCmd: any) => {
 67 |   shellCmd.stdout.destroy();
 68 |   shellCmd.stderr.destroy();
 69 |   shellCmd.kill("SIGINT");
 70 | };
 71 | 
 72 | export const nodeCmd = {
 73 |   fileExists: (filepath: string): ShellOutput => {
 74 |     try {
 75 |       if (fs.existsSync(filepath)) {
 76 |         return { success: true, code: 0 };
 77 |       }
 78 |       return { success: false, code: -1 };
 79 |     } catch (e) {
 80 |       console.log(e);
 81 |       return { success: false, code: -1 };
 82 |     }
 83 |   },
 84 |   readJsonFile: (filepath: string): ShellOutput => {
 85 |     try {
 86 |       const file = fs.readFileSync(filepath);
 87 |       const stdout = JSON.parse(file.toString());
 88 |       return { success: true, code: 0, stdout };
 89 |     } catch (e) {
 90 |       console.log(e);
 91 |       return { success: false, code: -1 };
 92 |     }
 93 |   },
 94 | 	// Read images safely; skip if cant parse or doesnt exits
 95 | 	readPngImagesInDir: (dirPath: string): ShellOutput => {
 96 | 		try {
 97 | 			const images: Record<string, string> = {};
 98 | 			const files: string[] = fs.readdirSync(dirPath);
 99 | 			files.forEach(file => {
100 | 				try {
101 | 					const imageData = fs.readFileSync(path.join(dirPath, file));
102 | 					const b64 = Buffer.from(imageData).toString("base64");
103 | 					const srcData = `data:image/png;base64,${b64}`;
104 | 					const fileKey = file.replace(".png", "");
105 | 					images[fileKey] = srcData;
106 | 				} catch (e) {
107 | 					// do nothing; skip image
108 | 					console.log(e);
109 | 				}
110 | 			});
111 | 			return {
112 | 				success: true,
113 | 				code: 0,
114 | 				data: images,
115 | 			}
116 | 		} catch (e) {
117 | 			return {
118 | 				success: false,
119 | 				code: -1,
120 | 				data: {},
121 | 			}
122 | 		}
123 | 	},
124 |   saveToFile: (str: string, filePath: string): ShellOutput => {
125 |     try {
126 |       fs.writeFileSync(filePath, str);
127 |       return { success: true, code: 0 };
128 |     } catch (e) {
129 |       console.log(e);
130 |       return { success: false, code: -1 };
131 |     }
132 |   },
133 |   rmDir: (filePath: string): ShellOutput => {
134 |     try {
135 |       fs.rmSync(filePath, { recursive: true, force: true });
136 |       return { success: true, code: 0 };
137 |     } catch (e) {
138 |       console.log(e);
139 |       return { success: false, code: -1 };
140 |     }
141 |   },
142 | };
143 | 
144 | // Run a shell command in sync but with async. Prevents requirement of external Node
145 | // when in Electron.
146 | export const shellRun = (command: string) =>
147 |   new Promise<ShellOutput>((resolve) => {
148 |     setTimeout(() => {
149 |       resolve({
150 |         success: false,
151 |         code: -1,
152 |         stderr: "Command timed out",
153 |         pid: -1,
154 |       });
155 |     }, 600000 /* 600s */);
156 | 
157 |     const stdout: string[] = [];
158 |     const stderr: string[] = [];
159 |     const exec = shell.exec(command, shellExecOptions);
160 |     if (!exec?.pid) {
161 |       // couldnt get shell here
162 |       resolve({
163 |         success: false,
164 |         code: -69,
165 |         pid: undefined,
166 |       });
167 |     }
168 |     exec.stdout?.on("data", (data) => stdout.push(data));
169 |     exec.stderr?.on("data", (data) => stderr.push(data));
170 |     exec.on("close", (data) => {
171 |       // console.log(Number(data), stdout.join("\n"), stderr.join("\n"));
172 |       resolve({
173 |         success: Number(data) === 0,
174 |         code: Number(data),
175 |         stdout: stdout.length ? stdout.join("\n") : undefined,
176 |         stderr: stderr.length ? stderr.join("\n") : undefined,
177 |         pid: exec?.pid,
178 |       });
179 |     });
180 |   });
181 | 
182 | export default shell;
183 | 


--------------------------------------------------------------------------------
/src/controllers/reducers/atyuReducer.tsx:
--------------------------------------------------------------------------------
  1 | import { Reducer } from "react";
  2 | import { atyuSpecialKeys } from "../../constants/atyuSpecialKeys";
  3 | import { AtyuConfig } from "../../configs/atyuConfig";
  4 | import { exhaustSwitch } from "../../functions/generic";
  5 | 
  6 | // export const testConfig: AtyuConfig = [
  7 | // 	{
  8 | // 		name: "Keyboard Matrix",
  9 | // 		desc: "",
 10 | // 		key: "",
 11 | // 		configurable: false,
 12 | // 		enabledByDefault: true,
 13 | // 		children: [],
 14 | // 	},
 15 | // 	{
 16 | // 		name: "Big Clock",
 17 | // 		desc: "",
 18 | // 		key: "OLED_CLOCK_ENABLED",
 19 | // 		configurable: true,
 20 | // 		enabledByDefault: true,
 21 | // 		children: [],
 22 | // 	},
 23 | // 	{
 24 | // 		name: "Bongo Cat",
 25 | // 		desc: "",
 26 | // 		key: "OLED_BONGO_ENABLED",
 27 | // 		configurable: true,
 28 | // 		enabledByDefault: false,
 29 | // 		children: [
 30 | // 			{
 31 | // 				name: "Use filled bongo cat",
 32 | // 				struct: {
 33 | // 					type: "switch",
 34 | // 					key: "OLED_BONGO_FILLED",
 35 | // 					defaultValue: false,
 36 | // 				}
 37 | // 			}
 38 | // 		],
 39 | // 	},
 40 | // 	{
 41 | // 		name: "Pets Mode",
 42 | // 		desc: "",
 43 | // 		key: "OLED_PETS_ENABLED",
 44 | // 		configurable: true,
 45 | // 		enabledByDefault: false,
 46 | // 		children: [
 47 | // 			{
 48 | // 				name: "Choose your pets",
 49 | // 				desc: "put controls here",
 50 | // 				struct: {
 51 | // 					type: "multiselect_boolean",
 52 | // 					multiselectStruct: [
 53 | // 						{
 54 | // 							name: "Luna",
 55 | // 							key: "OLED_PET_LUNA_ENABLED",
 56 | // 							defaultValue: true,
 57 | // 						},
 58 | // 						{
 59 | // 							name: "Kirby",
 60 | // 							key: "OLED_PET_KIRBY_ENABLED",
 61 | // 							defaultValue: false,
 62 | // 						},
 63 | // 						{
 64 | // 							name: "Pusheen",
 65 | // 							key: "OLED_PET_PUSHEEN_ENABLED",
 66 | // 							defaultValue: true,
 67 | // 						}
 68 | // 					],
 69 | // 					multiselectOptions: {
 70 | // 						max: 3,
 71 | // 					}
 72 | // 				}
 73 | // 			}
 74 | // 		],
 75 | // 	},
 76 | // 	{
 77 | // 		name: "Custom Gif",
 78 | // 		desc: "Have a separate mode to show a looping GIF.",
 79 | // 		key: "ATYU_OLED_GIF_ENABLED",
 80 | // 		configurable: true,
 81 | // 		enabledByDefault: false,
 82 | // 		children: [
 83 | // 			{
 84 | // 				name: "Upload a GIF",
 85 | // 				struct: {
 86 | // 					type: "update_gif",
 87 | // 					defaultGifSpeed: 100,
 88 | // 				}
 89 | // 			},
 90 | // 		]
 91 | // 	},
 92 | // ];
 93 | 
 94 | export type AtyuState = {
 95 | 	[key: string]: any;
 96 | }
 97 | 
 98 | type ChangeKeyboardPayload = {
 99 | 	newState?: AtyuState;
100 | };
101 | 
102 | type AtyuUpdateValuePayload = {
103 | 	key?: string;
104 | 	value?: string | number | boolean;
105 | };
106 | 
107 | type AtyuGifPayload = {
108 | 	gifUrl?: string;
109 | 	gifCode?: string;
110 | };
111 | 
112 | type AtyuReducerPayload = 
113 | 	| ChangeKeyboardPayload
114 | 	| AtyuUpdateValuePayload
115 | 	| AtyuGifPayload
116 | ;
117 | 
118 | type AtyuReducerType = 
119 | 	| "CHANGE_KEYBOARD" // swap keyboard in selector; refresh whole state
120 | 	| "UPDATE_VALUE"
121 | 	| "UPDATE_GIF"
122 | ;
123 | 
124 | type Action = {
125 | 	type: AtyuReducerType;
126 | 	payload?: AtyuReducerPayload;
127 | }
128 | 
129 | // Create an initial state that can be consumed by the reducer.
130 | // This should be rerun whenever the keyboard is changed, and then the state
131 | // updated in context or reducer somehow
132 | export const generateInitialState = (config: AtyuConfig): AtyuState => {
133 | 	const initialState: AtyuState = {};
134 | 
135 | 	config.forEach(configSection => {
136 | 		if (configSection.key) {
137 | 			initialState[configSection.key] = configSection.enabledByDefault;
138 | 		}
139 | 		configSection.children.forEach(childConfigSection => {
140 | 			const { type } = childConfigSection.struct;
141 | 			switch (type) {
142 | 				case "multiselect_boolean": {
143 | 					const { multiselectStruct } = childConfigSection.struct;
144 | 					multiselectStruct.forEach(multiselectKey => {
145 | 						initialState[multiselectKey.key] = multiselectKey.defaultValue;
146 | 					});
147 | 					break;
148 | 				}
149 | 				case "radio_number": {
150 | 					const { radioKey, defaultValue } = childConfigSection.struct;
151 | 					initialState[radioKey] = defaultValue;
152 | 					break;
153 | 				}
154 | 				case "switch": {
155 | 					const { key, defaultValue } = childConfigSection.struct;
156 | 					initialState[key] = defaultValue;
157 | 					break;
158 | 				}
159 | 				case "update_gif": {
160 | 					const { defaultGifSpeed } = childConfigSection.struct;
161 | 					initialState[atyuSpecialKeys.gifSpeed] = defaultGifSpeed;
162 | 					initialState[atyuSpecialKeys.gifUrl] = "";
163 | 					initialState[atyuSpecialKeys.gifCode] = "";
164 | 					break;
165 |  				}
166 | 				default: 
167 | 					exhaustSwitch(type);
168 | 			}
169 | 		}); 
170 | 	});
171 | 
172 | 	console.log(initialState);
173 | 	return initialState;
174 | };
175 | 
176 | export const reducer: Reducer<AtyuState, Action> = (state, action) => {
177 | 	const { type } = action;
178 | 
179 | 	switch (type) {
180 | 		case "UPDATE_VALUE":
181 | 			const { key, value } = action?.payload as AtyuUpdateValuePayload;
182 | 			if (!key || value === undefined) {
183 | 				return state;
184 | 			}
185 | 			console.log(`Updating ${key} to ${value}`)
186 | 			return { ...state, [key]: value };
187 | 		case "UPDATE_GIF":
188 | 			const { gifUrl, gifCode } = action?.payload as AtyuGifPayload;
189 | 			if (!gifUrl && !gifCode) {
190 | 				return { 
191 | 					...state, 
192 | 					[atyuSpecialKeys.gifUrl]: "", 
193 | 					[atyuSpecialKeys.gifCode]: "",
194 | 				};
195 | 			}
196 | 			return { 
197 | 				...state, 
198 | 				[atyuSpecialKeys.gifUrl]: gifUrl || state[atyuSpecialKeys.gifUrl],
199 | 				[atyuSpecialKeys.gifCode]: gifCode || state[atyuSpecialKeys.gifCode],
200 | 			};
201 | 		case "CHANGE_KEYBOARD": 
202 | 			const { newState } = action?.payload as AtyuState;
203 | 			return newState;
204 | 		default:
205 | 			exhaustSwitch(type);
206 | 			return state;
207 | 	}
208 | }
209 | 


--------------------------------------------------------------------------------
/src/functions/commands/runFlash.ts:
--------------------------------------------------------------------------------
  1 | import { FlashState } from "../../constants/types/flashState";
  2 | import { AppContext } from "../../controllers/context/appContext";
  3 | import { appStore } from "../../controllers/context/appStoreContext";
  4 | import { AtyuContext } from "../../controllers/context/atyuContext";
  5 | import { runCodegen } from "../codegen";
  6 | import { atyuHConfigFilename, atyuHResourcesFilename, getKeyboardDir, pathOf } from "../path";
  7 | import shell, { shellExecOptions, killAsyncCmd, updateLog, nodeCmd } from "./shell";
  8 | 
  9 | const flashCommandState = {
 10 |   cancelled: false,
 11 | };
 12 | 
 13 | const calcFlashProgress = (dataString: string): number => {
 14 |   const flashNumber = dataString.match(/\d+?%/);
 15 |   return flashNumber?.length ? Number(flashNumber[0].replace("%", "")) : 0;
 16 | };
 17 | 
 18 | const attemptParseFirmwareSize = (dataString: string): undefined | number => {
 19 |   try {
 20 |     const matches = dataString.match(/\b(\d+)\b/g);
 21 |     if (matches?.length === 4) {
 22 |       // Probably includes the firmware size here; get the "data" value
 23 |       const size = Number(matches[1]);
 24 |       if (size && size > 0) {
 25 |         return size;
 26 |       }
 27 |     }
 28 |   } catch (e) {
 29 |     return undefined;
 30 |   }
 31 |   return undefined;
 32 | };
 33 | 
 34 | export const cancelFlash = () => (flashCommandState.cancelled = true);
 35 | 
 36 | // Codegen, patch and install to kb
 37 | const runFlash = async (
 38 |   appContext: AppContext,
 39 |   context: AtyuContext,
 40 |   onlyPatch: boolean
 41 | ): Promise<void> => {
 42 |   const { keyboard, keyboardsConfig, setLog, setFlashState, setFlashProgress } = appContext;
 43 |   const keyboardConfig = keyboardsConfig[keyboard];
 44 | 
 45 |   if (!keyboardConfig) {
 46 |     return setFlashState(FlashState.ERROR, "Could not read keyboard config.");
 47 |   }
 48 | 
 49 |   const { qmkKb, qmkKm, maxFirmwareSizeBytes } = keyboardConfig;
 50 |   const { configCode, resourcesCode } = runCodegen(context);
 51 |   const keyboardDir = getKeyboardDir(keyboardConfig.dir);
 52 | 
 53 |   // Patch firmware; copy to qmk folder
 54 |   setFlashState(FlashState.PATCHING);
 55 | 
 56 |   // Save files (via node)
 57 |   const runSaveConfig = nodeCmd.saveToFile(
 58 |     configCode,
 59 |     pathOf(`${keyboardDir}${atyuHConfigFilename}`)
 60 |   );
 61 |   if (!runSaveConfig.success) {
 62 |     updateLog(setLog, `Couldn't save code to ${pathOf(`${keyboardDir}${atyuHConfigFilename}`)}`);
 63 |     return setFlashState(FlashState.ERROR, "Failed to save changes to Atyu QMK config file");
 64 |   }
 65 |   const runSaveResources = nodeCmd.saveToFile(
 66 |     resourcesCode,
 67 |     pathOf(`${keyboardDir}${atyuHResourcesFilename}`)
 68 |   );
 69 |   if (!runSaveResources.success) {
 70 |     updateLog(setLog, `Couldn't save code to ${pathOf(`${keyboardDir}${atyuHResourcesFilename}`)}`);
 71 |     return setFlashState(FlashState.ERROR, "Failed to save changes to Atyu QMK resources file");
 72 |   }
 73 |   updateLog(setLog, "Saved files successfully.");
 74 | 
 75 |   // Save only; dont flash to keyboard
 76 |   if (onlyPatch) {
 77 |     return setFlashState(FlashState.DONE, "Saved config to Atyu QMK");
 78 |   }
 79 | 
 80 |   // Run qmk flash
 81 |   const doFlash = () => {
 82 |     setFlashState(FlashState.COMPILING);
 83 |     const cmdFlash = shell.exec(
 84 |       `cd ${keyboardDir} && qmk flash -kb ${qmkKb} -km ${qmkKm}`,
 85 |       shellExecOptions
 86 |     );
 87 | 
 88 |     // Update state as log changes
 89 |     cmdFlash.stdout?.on("data", (data: any) => {
 90 |       const dataString: string = data.toString();
 91 |       updateLog(setLog, dataString);
 92 |       if (flashCommandState.cancelled) {
 93 |         killAsyncCmd(cmdFlash);
 94 |       }
 95 |       if (dataString === ".") {
 96 |         setFlashState(FlashState.WAITING_FOR_DFU, "Please press the RESET key on your keyboard");
 97 |       } else if (dataString.includes("Erase") && dataString.includes("%")) {
 98 |         setFlashState(FlashState.FLASHING_ERASING);
 99 |         setFlashProgress(calcFlashProgress(dataString));
100 |       } else if (dataString.includes("Download") && dataString.includes("%")) {
101 |         setFlashState(FlashState.FLASHING_DOWNLOADING);
102 |         setFlashProgress(calcFlashProgress(dataString));
103 |       }
104 |     });
105 | 
106 |     cmdFlash.stderr?.on("data", (data: any) => updateLog(setLog, data.toString()));
107 | 
108 |     cmdFlash.on("close", (code: any) => {
109 |       updateLog(setLog, `Finished with code ${Number(code)}`);
110 |       if (flashCommandState.cancelled) {
111 |         flashCommandState.cancelled = false;
112 |         return setFlashState(FlashState.CANCELLED, "Stopped firmware installation");
113 |       }
114 |       return Number(code) === 0
115 |         ? setFlashState(FlashState.DONE, "Successfully installed firmware")
116 |         : setFlashState(
117 |             FlashState.ERROR,
118 |             "An error occured with building and flashing the firmware."
119 |           );
120 |     });
121 |   };
122 | 
123 |   if (appStore.get("enableFirmwareSizeCheck")) {
124 |     updateLog(setLog, "Precompiling to check firmware size");
125 |     setFlashState(FlashState.CHECK_SIZE);
126 | 
127 |     let firmwareSize: number = 0;
128 |     let sawSizeAfter: boolean = false;
129 | 
130 |     // Compile once to check firmware size
131 |     const cmdCompile = shell.exec(
132 |       `cd ${keyboardDir} && qmk compile -kb ${qmkKb} -km ${qmkKm}`,
133 |       shellExecOptions
134 |     );
135 | 
136 |     // Update state as log changes
137 |     cmdCompile.stdout?.on("data", (data: any) => {
138 |       const dataString: string = data.toString();
139 |       updateLog(setLog, dataString);
140 |       if (firmwareSize > 0) {
141 |         return;
142 |       }
143 |       if (!sawSizeAfter && dataString.includes("Size after")) {
144 |         sawSizeAfter = true;
145 |       }
146 |       if (sawSizeAfter) {
147 |         const attemptedSize = attemptParseFirmwareSize(dataString);
148 |         if (attemptedSize) {
149 |           updateLog(setLog, `Attempted to read size: ${attemptedSize}`);
150 |           firmwareSize = attemptedSize;
151 |         }
152 |       }
153 |     });
154 | 
155 |     cmdCompile.stderr?.on("data", (data: any) => updateLog(setLog, data.toString()));
156 |     cmdCompile.on("close", (code: any) => {
157 |       updateLog(setLog, `Finished with code ${Number(code)}`);
158 |       if (Number(code) !== 0) {
159 |         return setFlashState(FlashState.ERROR, "An error occured with building the firmware.");
160 |       }
161 |       if (firmwareSize > maxFirmwareSizeBytes) {
162 |         updateLog(setLog, `Firmware size ${firmwareSize} > ${maxFirmwareSizeBytes}`);
163 |         return setFlashState(
164 |           FlashState.CANCELLED,
165 |           `Firmware size is too big (got ${firmwareSize}b, but max is ${maxFirmwareSizeBytes}b) - 
166 | 					try using less options`
167 |         );
168 |       }
169 |       return doFlash();
170 |     });
171 |   } else {
172 |     doFlash();
173 |   }
174 | };
175 | 
176 | export default runFlash;
177 | 


--------------------------------------------------------------------------------
/src/pages/Configurator.tsx:
--------------------------------------------------------------------------------
  1 | // import { AccessTime, Gif, Pets, ViewComfyRounded } from "@mui/icons-material";
  2 | import styled from "@emotion/styled";
  3 | import { Alert, Box, Switch, Theme, Typography, useTheme } from "@mui/material";
  4 | import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
  5 | import MultiselectBooleanComponent from "../components/configurator/MultiselectBooleanComponent";
  6 | import { atyuValue } from "../functions/configurator";
  7 | import { AtyuChildConfig, AtyuConfigSection } from "../configs/atyuConfig";
  8 | import { AtyuContext, useAtyuContext } from "../controllers/context/atyuContext";
  9 | import SwitchComponent from "../components/configurator/SwitchComponent";
 10 | import { exhaustSwitch } from "../functions/generic";
 11 | import UpdateGifComponent from "../components/configurator/UpdateGifComponent";
 12 | import RadioComponent from "../components/configurator/RadioComponent";
 13 | import { defaultGifRadioStruct } from "../constants";
 14 | import { useAppContext } from "../controllers/context/appContext";
 15 | import HorizontalBox from "../components/HorizontalBox";
 16 | import { grey } from "@mui/material/colors";
 17 | import { InfoOutlined } from "@mui/icons-material";
 18 | 
 19 | const OledModeBox = styled(Alert)`
 20 |   display: flex;
 21 |   flex-direction: column;
 22 |   margin-bottom: 12px;
 23 |   transition: all 0.5s;
 24 | `;
 25 | 
 26 | const OledModeComponent = styled.div`
 27 |   margin: 12px auto;
 28 |   padding: 14px 8px 0 8px;
 29 |   width: 100%;
 30 |   display: flex;
 31 |   flex-direction: column;
 32 |   align-items: center;
 33 |   justify-content: space-between;
 34 |   border-top: 1px solid ${(props) => props.color};
 35 | `;
 36 | 
 37 | const ThumbnailImage = styled.img`
 38 | 	width: 40px;
 39 | 	height: 40px;
 40 | 	padding: 2px;
 41 | 	border-radius: 8px;
 42 | 	border: 2px solid white;
 43 | 	margin-right: 12px;
 44 | 	/* turn white to cyanish */
 45 | 	filter: brightness(77.4%) sepia(100) saturate(100) hue-rotate(170deg);
 46 | `;
 47 | 
 48 | const NotesTooltip = styled(({ className, ...props }: TooltipProps) => (
 49 |   <Tooltip {...props} classes={{ popper: className }} />
 50 | ))(({ theme }) => ({
 51 |   [`& .${tooltipClasses.tooltip}`]: {
 52 |     backgroundColor: "rgba(0, 0, 0, 0.85)",
 53 |     maxWidth: "800px",
 54 |     padding: "12px",
 55 |   },
 56 | }));
 57 | 
 58 | const getChildComponent = (childConfigSection: AtyuChildConfig, name: string, desc?: string) => {
 59 |   const struct = childConfigSection.struct;
 60 |   const type = struct.type;
 61 |   switch (type) {
 62 |     case "multiselect_boolean":
 63 |       return <MultiselectBooleanComponent config={struct} name={name} desc={desc} />;
 64 |     case "radio_number":
 65 |       return <RadioComponent config={struct} name={name} desc={desc} />;
 66 |     case "switch":
 67 |       return <SwitchComponent config={struct} name={name} desc={desc} />;
 68 |     case "update_gif":
 69 |       return (
 70 |         <Box>
 71 |           <UpdateGifComponent />
 72 |           <RadioComponent config={defaultGifRadioStruct} name="GIF speed" />
 73 |         </Box>
 74 |       );
 75 |     default:
 76 |       exhaustSwitch(type);
 77 |   }
 78 | };
 79 | 
 80 | const getConfigComponent = (
 81 |   configSection: AtyuConfigSection,
 82 |   context: AtyuContext,
 83 |   theme: Theme,
 84 |   thumbnail?: string | undefined
 85 | ) => {
 86 |   const { name, desc, key, configurable, children, enabledByDefault, notes } = configSection;
 87 |   const isEnabled = atyuValue(context[key], enabledByDefault);
 88 | 
 89 |   return (
 90 |     <OledModeBox
 91 |       variant="outlined"
 92 |       severity="info"
 93 |       key={name}
 94 |       icon={false}
 95 |       sx={{ filter: isEnabled !== undefined && !isEnabled ? "grayscale(100%)" : "none" }}
 96 |     >
 97 |       <HorizontalBox expanded>
 98 | 				<HorizontalBox>
 99 | 					{!!thumbnail && <ThumbnailImage src={thumbnail} alt="mode thumbnail" />}
100 | 					<Box>
101 | 						<Typography variant="button">{name}</Typography>
102 | 						{!!desc?.length && (
103 | 							<Typography variant="body2" color="secondary">
104 | 								{desc}
105 | 							</Typography>
106 | 						)}
107 | 					</Box>
108 |         	</HorizontalBox>
109 |         <HorizontalBox>
110 |           {!!notes?.length && (
111 |             <NotesTooltip
112 |               placement="left-start"
113 |               title={
114 |                 <Box>
115 |                   {notes.map((note, i) => (
116 |                     <div key={i}>
117 |                       <Typography color={grey[300]} variant="caption" fontSize={13}>
118 |                         • {note}
119 |                       </Typography>
120 |                     </div>
121 |                   ))}
122 |                 </Box>
123 |               }
124 |             >
125 |               <InfoOutlined sx={{ mr: 2 }} />
126 |             </NotesTooltip>
127 |           )}
128 |           {!!configurable && (
129 |             <Switch
130 |               checked={isEnabled}
131 |               onChange={() => context.dispatchUpdateValue(key, !isEnabled)}
132 |             />
133 |           )}
134 |         </HorizontalBox>
135 |       </HorizontalBox>
136 |       {(!!isEnabled || !configurable) && !!children.length && (
137 |         <OledModeComponent color={theme.palette.primary.main}>
138 |           {children.map((childConfigSection, i) => {
139 |             const { name: childName, desc: childDesc } = childConfigSection;
140 |             return (
141 |               <Box sx={{ width: "100%" }} key={i}>
142 |                 {getChildComponent(childConfigSection, childName, childDesc)}
143 |               </Box>
144 |             );
145 |           })}
146 |         </OledModeComponent>
147 |       )}
148 |     </OledModeBox>
149 |   );
150 | };
151 | 
152 | // This is the UI generator entry point
153 | const Configurator = () => {
154 |   const { atyuConfigMap, keyboard, thumbnails } = useAppContext();
155 |   const context = useAtyuContext();
156 |   const theme = useTheme();
157 |   const config = atyuConfigMap[keyboard];
158 |   const keyboardOptionsConfig = config?.find((section) => section.key === "__keyboard_options");
159 | 
160 |   return (
161 |     <Box>
162 |       <Typography color="primary" variant="h5" sx={{ mb: 2 }}>
163 |         OLED Options
164 |       </Typography>
165 |       {!!config?.length &&
166 |         config
167 |           // "keyboard options" is a special tag; put it in a separate section
168 | 					// TODO: this can be cleaned up instead of hacking based on key
169 |           .filter((section) => section.key !== "__keyboard_options")
170 |           .map((configSection) =>
171 |             getConfigComponent(configSection, context, theme, thumbnails[configSection.key])
172 |           )}
173 |       {/* <Button onClick={() => console.log(runCodegen(context))}>codegen test</Button> */}
174 |       {keyboardOptionsConfig !== undefined && (
175 |         <>
176 |           <Typography color="primary" variant="h5" sx={{ mb: 2, mt: 4 }}>
177 |             Keyboard Options
178 |           </Typography>
179 |           {getConfigComponent(
180 |             keyboardOptionsConfig,
181 |             context,
182 |             theme,
183 |             thumbnails[keyboardOptionsConfig.key]
184 |           )}
185 |         </>
186 |       )}
187 |     </Box>
188 |   );
189 | };
190 | 
191 | export default Configurator;
192 | 


--------------------------------------------------------------------------------