feat(hotkey): added option to trigger using hotkeys

apps/electron-app/package.json

@@ -76,6 +76,7 @@
 		"abcjs": "6.4.4",
 		"electron-log": "5.3.3",
 		"firmata": "https://github.com/xiduzo/firmata.js.git",
+		"hotkeys-js": "^4.0.0-beta.7",
 		"leva": "0.10.1",
 		"mqtt": "5.10.4",
 		"prettier": "3.5.3",

apps/electron-app/src/common/nodes.ts

@@ -33,6 +33,7 @@ import { Relay } from '../render/components/react-flow/nodes/Relay';
 import { Switch } from '../render/components/react-flow/nodes/Switch';
 import { Proximity } from '../render/components/react-flow/nodes/Proximity';
 import { Llm } from '../render/components/react-flow/nodes/Llm';
+import { Hotkey } from '../render/components/react-flow/nodes/Hotkey';
 import { Node } from '@xyflow/react';
 
 export function isNodeTypeACodeType(node?: Node) {
@@ -78,6 +79,7 @@ export const NODE_TYPES: Record<string, (props: any) => JSX.Element> = {
 	Tilt: Tilt,
 	Trigger: Trigger,
 	Vibration: Vibration,
+	Hotkey: Hotkey,
 } as const;
 
 export type NodeType = keyof typeof NODE_TYPES;

apps/electron-app/src/main/ipc.ts

@@ -46,7 +46,7 @@ ipcMain.on('ipc-flow', async (event, data: { ip?: string; nodes: Node[]; edges:
 });
 
 ipcMain.on('ipc-external-value', (_event, data: { nodeId: string; value: unknown }) => {
-	log.debug('[EXTERNAL] <send>', data);
+	log.debug('[EXTERNAL] <ipc> send to runner', data);
 	const runnerProcess = getRunnerProcess();
 	runnerProcess?.send({ type: 'setExternal', nodeId: data.nodeId, value: data.value });
 });

apps/electron-app/src/render/components/react-flow/nodes/Hotkey.tsx

@@ -0,0 +1,219 @@
+import { type Data, type Value, dataSchema } from '@microflow/runtime/src/hotkey/hotkey.types';
+import { Position } from '@xyflow/react';
+import { Handle } from '../Handle';
+import { BaseNode, NodeContainer, useNodeControls, useNodeData, useNodeId } from './Node';
+import { useNodeValue } from '../../../stores/node-data';
+import { IconWithValue } from '../IconWithValue';
+import { useEffect, useState, useCallback, useRef, useMemo, Fragment } from 'react';
+import hotkeys from 'hotkeys-js';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	Button,
+	Kbd,
+	KbdGroup,
+} from '@microflow/ui';
+import { button } from 'leva';
+
+export function Hotkey(props: Props) {
+	return (
+		<NodeContainer {...props}>
+			<HotkeyHandler />
+			<Value />
+			<Settings />
+			<Handle type='source' position={Position.Right} id='pressed' offset={-0.5} />
+			<Handle type='source' position={Position.Right} id='released' offset={0.5} />
+		</NodeContainer>
+	);
+}
+
+function HotkeyHandler() {
+	const data = useNodeData<Data>();
+	const nodeId = useNodeId();
+
+	useEffect(() => {
+		if (!data.accelerator) return;
+
+		hotkeys(data.accelerator, { keyup: true }, event => {
+			if (event.repeat) return;
+			window.electron.ipcRenderer.send('ipc-external-value', {
+				nodeId: nodeId,
+				value: event.type === 'keydown',
+			});
+		});
+
+		return () => {
+			hotkeys.unbind(data.accelerator);
+		};
+	}, [data.accelerator, nodeId]);
+
+	return null;
+}
+
+function Value() {
+	const data = useNodeData<Data>();
+	const value = useNodeValue<Value>(false);
+
+	return (
+		<IconWithValue
+			icon='KeyboardIcon'
+			value={data.accelerator}
+			iconClassName={value ? 'text-green-500' : 'text-muted-foreground'}
+		/>
+	);
+}
+
+type HotkeyRecorderDialogProps = {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	onSave: (accelerator: string) => void;
+	initialKey?: string;
+};
+
+function convertKeyboardEventToHotkeyJsString(event: KeyboardEvent) {
+	const code = event.code;
+
+	switch (code) {
+		case 'MetaLeft':
+		case 'MetaRight':
+		case 'Meta':
+		case 'ControlLeft':
+		case 'ControlRight':
+		case 'Control':
+		case 'AltLeft':
+		case 'AltRight':
+		case 'Alt':
+		case 'ShiftLeft':
+		case 'ShiftRight':
+		case 'Shift':
+			return null;
+		case 'Digit0':
+		case 'Digit1':
+		case 'Digit2':
+		case 'Digit3':
+		case 'Digit4':
+		case 'Digit5':
+		case 'Digit6':
+		case 'Digit7':
+		case 'Digit8':
+		case 'Digit9':
+			return code.replace('Digit', '');
+		case 'ArrowUp':
+		case 'ArrowDown':
+		case 'ArrowLeft':
+		case 'ArrowRight':
+			return code.replace('Arrow', '');
+		default:
+			return code.replace('Key', '');
+	}
+}
+
+function HotkeyRecorderDialog(props: HotkeyRecorderDialogProps) {
+	const [key, setKey] = useState<string | undefined>(props.initialKey);
+
+	useEffect(() => {
+		if (!open) return;
+
+		function handleKeyDown(event: KeyboardEvent) {
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			event.stopPropagation();
+
+			const key = convertKeyboardEventToHotkeyJsString(event);
+			if (!key) return;
+			setKey(key);
+		}
+
+		window.addEventListener('keydown', handleKeyDown);
+		return () => {
+			window.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [open]);
+
+	const handleSave = () => {
+		if (!key) return;
+		props.onSave(key);
+		props.onOpenChange(false);
+	};
+
+	const handleCancel = () => {
+		props.onOpenChange(false);
+	};
+
+	const handleClear = () => {
+		setKey(undefined);
+	};
+
+	return (
+		<Dialog open={props.open} onOpenChange={props.onOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Set hotkey</DialogTitle>
+					<DialogDescription>Press the key you want to create a trigger for</DialogDescription>
+				</DialogHeader>
+				<section className='min-h-24 flex flex-col gap-4 items-center justify-center'>
+					<KbdGroup className='flex flex-wrap gap-1'>
+						<Kbd className='min-w-6 h-6 px-2'>{key}</Kbd>
+					</KbdGroup>
+				</section>
+				<DialogFooter>
+					<Button variant='outline' onClick={handleCancel}>
+						Cancel
+					</Button>
+					<Button variant='outline' onClick={handleClear} disabled={!key}>
+						Clear
+					</Button>
+					<Button onClick={handleSave} disabled={!key}>
+						Save
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function Settings() {
+	const data = useNodeData<Data>();
+	const [dialogOpened, setDialogOpened] = useState(false);
+
+	const { render, set } = useNodeControls<Data>({
+		accelerator: {
+			value: data.accelerator,
+			render: () => false,
+		},
+		'set hotkey': button(() => setDialogOpened(true)),
+	});
+
+	return (
+		<>
+			{render()}
+			{dialogOpened && (
+				<HotkeyRecorderDialog
+					initialKey={data.accelerator}
+					open={dialogOpened}
+					onOpenChange={setDialogOpened}
+					onSave={accelerator => {
+						set({ accelerator });
+						setDialogOpened(false);
+					}}
+				/>
+			)}
+		</>
+	);
+}
+
+type Props = BaseNode<Data>;
+Hotkey.defaultProps = {
+	data: {
+		...dataSchema.parse({}),
+		group: 'flow',
+		tags: ['event', 'input'],
+		label: 'Hotkey',
+		icon: 'CommandIcon',
+		description: 'Detect when a keyboard shortcut is pressed or released',
+	} satisfies Props['data'],
+};

apps/nextjs-app/app/docs/microflow-studio/page.md

@@ -55,12 +55,15 @@ In order to validate if the problem is with your microcontroller or with Microfl
 
 First, let's make sure your microcontroller is working properly by testing it with the Arduino IDE (a free program for working with Arduino boards).
 
-1. Install [the latest Arduino IDE](https://www.arduino.cc/en/software) (it's free)
-2. Open the Arduino IDE and connect your microcontroller to your computer
-3. Go to `Tools > Port` and select the port where your microcontroller is connected (you should see it listed)
-4. Go to `Tools > Board` and select the board you are using (like "Arduino Uno")
-5. Go to `File > Examples > Firmata > StandardFirmata` (this opens a ready-made program)
-6. Click the `Upload` button (arrow icon) to send the program to your microcontroller
+1. Close Microflow
+2. Download [the `StandardFirmata` for Microflow](https://github.com/xiduzo/microflow/tree/7eed72541c6d6b455cf8c84a71b737400a6d7e68/packages/flasher/StandardFirmata)
+3. Install [the latest Arduino IDE](https://www.arduino.cc/en/software)
+4. Open the Arduino IDE and connect your microcontroller to your computer
+5. Go to `Tools > Port` and select the port where your microcontroller is connected (you should see it listed)
+6. Go to `Tools > Board` and select the board you are using (like "Arduino Uno")
+7. Opens the downloaded `StandardFirmata`.
+8. Click the `Upload` button (arrow icon) to send the program to your microcontroller.
+9. Re-open Microflow, your microcontroller should now connect.
 
 If you can successfully upload the program to your microcontroller, then your hardware is working fine and the problem might be with Microflow studio. If you can't upload, there might be an issue with your microcontroller or its connection.