Squashed commit of Pelsin/one-pin-multiple-buttons-ui-revamp:

commit 16c34b6
Merge: 3b21858 8b915e0
Author: ian <[email protected]>
Date:   Sat Jun 8 18:14:42 2024 +0200

    Merge branch 'main' into one-pin-multiple-buttons-ui-revamp

    # Conflicts:
    #	proto/config.proto
    #	www/package-lock.json
    #	www/package.json
    #	www/src/Addons/Wii.tsx
    #	www/src/Pages/InputMacroAddonPage.tsx

commit 3b21858
Author: ian <[email protected]>
Date:   Sat May 4 20:59:19 2024 +0200

    Simplify type juggling by making separate components for base pin and profiles mappings

commit 77c30d6
Author: ian <[email protected]>
Date:   Sat May 4 18:59:17 2024 +0200

    Remove old multi mapping path

commit 2f0892f
Author: ian <[email protected]>
Date:   Sat May 4 18:48:01 2024 +0200

    Fix merge issue

commit 12ed309
Merge: be460f9 22ed9a7
Author: ian <[email protected]>
Date:   Sat May 4 18:37:50 2024 +0200

    Merge branch 'main' into one-pin-multiple-buttons-ui-revamp

    # Conflicts:
    #	www/package-lock.json
    #	www/src/Locales/en/Index.jsx
    #	www/src/Pages/InputMacroAddonPage.tsx

commit be460f9
Author: ian <[email protected]>
Date:   Sat May 4 18:19:54 2024 +0200

    Implement UX for multi selection for base profile and single selection for profiles

commit 7dd59ce
Author: ian <[email protected]>
Date:   Fri Apr 26 13:34:20 2024 +0200

    Evaluate if css grids is suitable for the pin mapping page, add nav pills for profiles

commit 0e120b3
Author: ian <[email protected]>
Date:   Mon Apr 22 22:38:24 2024 +0200

    WIP make pin mappping page handle masks

commit 5712845
Author: ian <[email protected]>
Date:   Mon Apr 22 22:25:40 2024 +0200

    Add lodash types

commit 9d10afb
Author: ian <[email protected]>
Date:   Thu Apr 18 10:09:36 2024 +0200

    Remove multmapping page and start merging it with pinMapping page

commit 5f3fa47
Merge: 2e040a4 d384d8e
Author: ian <[email protected]>
Date:   Wed Apr 17 18:08:56 2024 +0200

    Merge branch 'main' into one-pin-multiple-buttons-ui-revamp

commit 2e040a4
Merge: c4a3c78 7fb30b9
Author: ian <[email protected]>
Date:   Sun Apr 14 23:43:49 2024 +0200

    Merge branch 'main' into one-pin-multiple-buttons-ui-revamp

    # Conflicts:
    #	proto/enums.proto
    #	www/src/Data/Pins.ts
    #	www/src/Locales/en/PinMapping.jsx
    #	www/src/Pages/InputMacroAddonPage.jsx
    #	www/src/Pages/PinMapping.tsx
    #	www/src/Pages/SettingsPage.jsx

commit c4a3c78
Author: Brian S. Stephan <[email protected]>
Date:   Fri Mar 22 16:53:27 2024 -0500

    fix usage of button masks for hotkeys

    I probably introduced this in a bad rebase

commit 580eb5e
Author: Brian S. Stephan <[email protected]>
Date:   Sat Mar 9 15:20:06 2024 -0600

    add a disclaimer about multi mapping only working on Profile 1

commit 7aef83e
Author: Pelsin <[email protected]>
Date:   Sat Mar 9 21:16:55 2024 +0100

    multi mapping page (#7)

    * remove double initialization of gamepad GPIOs

    * have getProfilePinMappings return whole GpioMappingInfos

    before it returned just the actions, which was fine, but now we're
    adding more stuff to the infos, so return the whole struct rather than
    just the GpioAction within it

    * define a custom button combo to a GPIO pin

    this expands GpioMappingInfo to include dpad and button masks and uses
    those masks when setting up the button maps in Gamepad. this allows for
    a GPIO pin to trigger any arbitrary set of buttons

    * Add a WIP multi mapping page

    * have getProfilePinMappings return whole GpioMappingInfos

    before it returned just the actions, which was fine, but now we're
    adding more stuff to the infos, so return the whole struct rather than
    just the GpioAction within it

    * define a custom button combo to a GPIO pin

    this expands GpioMappingInfo to include dpad and button masks and uses
    those masks when setting up the button maps in Gamepad. this allows for
    a GPIO pin to trigger any arbitrary set of buttons

    * implement get/setPinMappingsV2 which includes the new masks

    * Start moving to new payload structure, new endpoint, translation keys

    * Set action if mask is set

    * Multi-mapping route added to webconfig, start adding customDpadMask

    * Revert endpoint test for v2

    * fix issue where setPinMappingsV2 was actually ignoring input

    * Rename BUTTON_MASK -> BUTTON_MASK_OPTIONS to prepare for multi mapping data

    * Removed some unused imports

    * Add support for dpad mask

    * Add text for assigned to multi mapping on pin mapping page

    * Add support for swapping button labels

    * Update pins after setting multi pin

    * Set correct default in multi mapping, disables selection on non selectable actions

commit f842e25
Author: Brian S. Stephan <[email protected]>
Date:   Wed Feb 28 18:28:27 2024 -0600

    fix issue where setPinMappingsV2 was actually ignoring input

commit a2853d8
Author: Brian S. Stephan <[email protected]>
Date:   Thu Feb 22 16:28:06 2024 -0600

    implement get/setPinMappingsV2 which includes the new masks

commit 26bbcbe
Author: Brian S. Stephan <[email protected]>
Date:   Wed Dec 27 00:44:22 2023 -0600

    define a custom button combo to a GPIO pin

    this expands GpioMappingInfo to include dpad and button masks and uses
    those masks when setting up the button maps in Gamepad. this allows for
    a GPIO pin to trigger any arbitrary set of buttons

commit 55fb9e5
Author: Brian S. Stephan <[email protected]>
Date:   Wed Dec 27 00:25:10 2023 -0600

    have getProfilePinMappings return whole GpioMappingInfos

    before it returned just the actions, which was fine, but now we're
    adding more stuff to the infos, so return the whole struct rather than
    just the GpioAction within it

Co-authored-by: ian <[email protected]>
Co-authored-by: Pelsin <[email protected]>

www/server/app.js

@@ -253,6 +253,18 @@ app.get('/api/getCustomTheme', (req, res) => {
 	});
 });
 
+app.get('/api/getPinMappingsV2', (req, res) => {
+	return res.send(
+		Object.entries(picoController).reduce(
+			(acc, [key, value]) => ({
+				...acc,
+				[key]: { action: value, customButtonMask: 0, customDpadMask: 0 },
+			}),
+			{},
+		),
+	);
+});
+
 app.get('/api/getPinMappings', (req, res) => {
 	return res.send(picoController);
 });

www/src/Addons/Bootsel.tsx

@@ -5,7 +5,7 @@ import * as yup from 'yup';
 
 import Section from '../Components/Section';
 import FormSelect from '../Components/FormSelect';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
 export const bootselScheme = {
 	BootselButtonAddonEnabled: yup
@@ -15,7 +15,10 @@ export const bootselScheme = {
 	bootselButtonMap: yup
 		.number()
 		.label('BOOTSEL Button Map')
-		.validateSelectionWhenValue('BootselButtonAddonEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue(
+			'BootselButtonAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 };
 
 export const bootselState = {
@@ -42,7 +45,7 @@ const Bootsel = ({ values, errors, handleChange, handleCheckbox }) => {
 					isInvalid={errors.bootselButtonMap}
 					onChange={handleChange}
 				>
-					{BUTTON_MASKS.map((o, i) => (
+					{BUTTON_MASKS_OPTIONS.map((o, i) => (
 						<option key={`bootselButtonMap-option-${i}`} value={o.value}>
 							{o.label}
 						</option>

www/src/Addons/FocusMode.tsx

@@ -7,7 +7,7 @@ import Section from '../Components/Section';
 
 import FormControl from '../Components/FormControl';
 import FormSelect from '../Components/FormSelect';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
 export const focusModeScheme = {
 	FocusModeAddonEnabled: yup
@@ -93,7 +93,7 @@ const FocusMode = ({
 						/>
 					</div>
 					<Row>
-						{BUTTON_MASKS.map((mask) =>
+						{BUTTON_MASKS_OPTIONS.map((mask) =>
 							values.focusModeButtonLockMask & mask.value ? (
 								<FormSelect
 									key={`focusModeButtonLockMask-${mask.label}`}
@@ -111,7 +111,7 @@ const FocusMode = ({
 										);
 									}}
 								>
-									{BUTTON_MASKS.map((o, i) => (
+									{BUTTON_MASKS_OPTIONS.map((o, i) => (
 										<option
 											key={`focusModeButtonLockMask-option-${i}`}
 											value={o.value}
@@ -138,7 +138,7 @@ const FocusMode = ({
 								);
 							}}
 						>
-							{BUTTON_MASKS.map((o, i) => (
+							{BUTTON_MASKS_OPTIONS.map((o, i) => (
 								<option
 									key={`focusModeButtonLockMask-option-${i}`}
 									value={o.value}

www/src/Addons/Turbo.tsx

@@ -7,7 +7,7 @@ import Section from '../Components/Section';
 import FormSelect from '../Components/FormSelect';
 import FormControl from '../Components/FormControl';
 import AnalogPinOptions from '../Components/AnalogPinOptions';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 import { DUAL_STICK_MODES } from '../Data/Addons';
 
 const SHMUP_MIXED_MODES = [
@@ -70,35 +70,35 @@ export const turboScheme = {
 	shmupAlwaysOn1: yup
 		.number()
 		.label('Turbo-Button 1 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn2: yup
 		.number()
 		.label('Turbo-Button 2 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn3: yup
 		.number()
 		.label('Turbo-Button 3 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupAlwaysOn4: yup
 		.number()
 		.label('Turbo-Button 4 (Always On)')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask1: yup
 		.number()
 		.label('Charge Shot Button 1 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask2: yup
 		.number()
 		.label('Charge Shot Button 2 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask3: yup
 		.number()
 		.label('Charge Shot Button 3 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 	shmupBtnMask4: yup
 		.number()
 		.label('Charge Shot Button 4 Map')
-		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS),
+		.validateSelectionWhenValue('TurboInputEnabled', BUTTON_MASKS_OPTIONS),
 };
 
 export const turboState = {

www/src/Addons/Wii.tsx

@@ -1,29 +1,17 @@
 import { AppContext } from '../Contexts/AppContext';
 import React, { useContext, useEffect, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import {
-	Button,
-	Form,
-	Row,
-	FormCheck,
-	Tab,
-	Tabs,
-	FormLabel,
-} from 'react-bootstrap';
+import { Button, Row, FormCheck, Tab, Tabs, FormLabel } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import * as yup from 'yup';
 
 import Section from '../Components/Section';
 
-import FormControl from '../Components/FormControl';
 import FormSelect from '../Components/FormSelect';
-import { I2C_BLOCKS, PERIPHERAL_DEVICES } from '../Data/Peripherals';
-import { BUTTON_MASKS } from '../Data/Buttons';
+import { I2C_BLOCKS } from '../Data/Peripherals';
+import { BUTTON_MASKS_OPTIONS } from '../Data/Buttons';
 
-import WebApi, {
-	baseWiiControls,
-	basePeripheralMapping,
-} from '../Services/WebApi';
+import WebApi, { baseWiiControls } from '../Services/WebApi';
 
 export const wiiScheme = {
 	WiiExtensionAddonEnabled: yup
@@ -454,7 +442,7 @@ const Wii = ({
 													}))
 												}
 											>
-												{BUTTON_MASKS.map((o, i) => (
+												{BUTTON_MASKS_OPTIONS.map((o, i) => (
 													<option
 														key={`wiiExtensionController${controlObj.id}Button${buttonObj.id}-option-${i}`}
 														value={o.value}

www/src/Components/CaptureButton.tsx

@@ -94,7 +94,7 @@ const CaptureButton = ({
 				</Modal.Body>
 				<Modal.Footer>
 					{hasNext && (
-						<Button variant="secondary" onClick={() => skipButton()}>
+						<Button onClick={() => skipButton()}>
 							{t('CaptureButton:capture-button-modal-skip')}
 						</Button>
 					)}
@@ -103,7 +103,7 @@ const CaptureButton = ({
 					</Button>
 				</Modal.Footer>
 			</Modal>
-			<Button variant="secondary" onClick={() => setTriggerCapture(true)}>
+			<Button onClick={() => setTriggerCapture(true)}>
 				{small
 					? '🎮'
 					: `${

www/src/Components/CustomSelect.scss

@@ -31,6 +31,12 @@
 	.react-select__input-container {
 		color: inherit;
 	}
+	.react-select__multi-value {
+		background-color: var(--bs-secondary-bg);
+		.react-select__multi-value__label {
+			color: inherit;
+		}
+	}
 }
 
 .react-select__option {

www/src/Components/FormSelect.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Form } from 'react-bootstrap';
 
-const FormSelect = ({ label, error, groupClassName, ...props }) => {
+const FormSelect = ({
+	label = null,
+	error = null,
+	groupClassName = '',
+	...props
+}) => {
 	return (
 		<Form.Group className={groupClassName}>
 			{label && <Form.Label>{label}</Form.Label>}

www/src/Data/Buttons.js

@@ -323,6 +323,12 @@ const KEYBOARD_LAYOUT = [
 	['R1', 'R2'],
 	['L1', 'L2'],
 ];
+export const DPAD_MASKS = [
+	{ label: 'Up', value: 1 << 0 },
+	{ label: 'Down', value: 1 << 1 },
+	{ label: 'Left', value: 1 << 2 },
+	{ label: 'Right', value: 1 << 3 },
+];
 
 export const BUTTON_LAYOUTS = [
     {
@@ -384,7 +390,6 @@ export const BUTTON_LAYOUTS = [
 ];
 
 export const BUTTON_MASKS = [
-	{ label: 'None', value: 0 },
 	{ label: 'B1', value: 1 << 0 },
 	{ label: 'B2', value: 1 << 1 },
 	{ label: 'B3', value: 1 << 2 },
@@ -399,6 +404,11 @@ export const BUTTON_MASKS = [
 	{ label: 'R3', value: 1 << 11 },
 	{ label: 'A1', value: 1 << 12 },
 	{ label: 'A2', value: 1 << 13 },
+];
+
+export const BUTTON_MASKS_OPTIONS = [
+	{ label: 'None', value: 0 },
+	...BUTTON_MASKS,
 	{ label: 'Up', value: 1 << 16 },
 	{ label: 'Down', value: 1 << 17 },
 	{ label: 'Left', value: 1 << 18 },

www/src/Data/Controllers.json

@@ -29,6 +29,6 @@
 		"pin26": -10,
 		"pin27": -10,
 		"pin28": -10,
-		"pin29": -10
+		"pin29": -5
 	}
 }

www/src/Data/Pins.ts

@@ -1,6 +1,3 @@
-// Hide from select options / Disable select if returned from board
-export const NON_SELECTABLE_BUTTON_ACTIONS = [-5, 0];
-
 // These could theoretically be created from enums.proto
 export const BUTTON_ACTIONS = {
 	NONE: -10,
@@ -45,6 +42,7 @@ export const BUTTON_ACTIONS = {
 	BUTTON_PRESS_MACRO_4: 37,
 	BUTTON_PRESS_MACRO_5: 38,
 	BUTTON_PRESS_MACRO_6: 39,
+	CUSTOM_BUTTON_COMBO: 40,
 } as const;
 
 export const PIN_DIRECTIONS = {

www/src/Locales/en/Navigation.jsx

@@ -12,6 +12,7 @@ export default {
 	'links-label': 'Links',
 	'macro-label': 'Macros Configuration',
 	'pin-mapping-label': 'Pin Mapping',
+	'multi-mapping-label': 'Multi Mapping',
 	'peripheral-mapping-label': 'Peripheral Mapping',
 	'profile-settings-label': 'Profile Settings',
 	'reboot-label': 'Reboot',

www/src/Locales/en/PinMapping.jsx

@@ -1,6 +1,6 @@
 export default {
 	'header-text': 'Pin Mapping',
-	'sub-header-text': `Here you can configure what pin has what action. If you're unsure what button is connect to what pin, try out the pin viewer.`,
+	'sub-header-text': `If you're unsure what button is connect to what pin, try out the pin viewer.`,
 	'alert-text':
 		"Mapping buttons to pins that aren't connected or available can leave the device in non-functional state. To clear the invalid configuration go to the <2>Reset Settings</2> page.",
 	'pin-viewer': 'Pin viewer',
@@ -59,5 +59,6 @@ export default {
 		BUTTON_PRESS_MACRO_4: 'Macro 4',
 		BUTTON_PRESS_MACRO_5: 'Macro 5',
 		BUTTON_PRESS_MACRO_6: 'Macro 6',
+		CUSTOM_BUTTON_COMBO: 'Assigned to multi mapping',
 	},
 };

www/src/Pages/InputMacroAddonPage.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { AppContext } from '../Contexts/AppContext';
 import {
 	Badge,
@@ -19,7 +19,11 @@ import omit from 'lodash/omit';
 
 import Section from '../Components/Section';
 import WebApi from '../Services/WebApi';
-import { getButtonLabels, BUTTONS, BUTTON_MASKS } from '../Data/Buttons';
+import {
+	getButtonLabels,
+	BUTTONS,
+	BUTTON_MASKS_OPTIONS,
+} from '../Data/Buttons';
 
 const MACRO_TYPES = [
 	{ label: 'InputMacroAddon:input-macro-type.press', value: 1 },
@@ -181,7 +185,7 @@ const MacroInputComponent = (props) => {
 			</Col>
 			<Col sm={'auto'}>
 				<Row className="d-flex justify-content-center">
-					{BUTTON_MASKS.filter((mask) => buttonMask & mask.value).map(
+					{BUTTON_MASKS_OPTIONS.filter((mask) => buttonMask & mask.value).map(
 						(mask, i1) => (
 							<Col
 								key={`${key}.buttonMask[${i1}]`}
@@ -201,7 +205,7 @@ const MacroInputComponent = (props) => {
 									isInvalid={errors?.buttonMask}
 									translation={t}
 									buttonLabelType={buttonLabelType}
-									buttonMasks={BUTTON_MASKS}
+									buttonMasks={BUTTON_MASKS_OPTIONS}
 								/>
 							</Col>
 						),
@@ -218,7 +222,7 @@ const MacroInputComponent = (props) => {
 							isInvalid={errors?.buttonMask}
 							translation={t}
 							buttonLabelType={buttonLabelType}
-							buttonMasks={BUTTON_MASKS}
+							buttonMasks={BUTTON_MASKS_OPTIONS}
 						/>
 					</Col>
 				</Row>
@@ -433,7 +437,7 @@ const MacroComponent = (props) => {
 								}}
 								buttonLabelType={buttonLabelType}
 								translation={t}
-								buttonMasks={BUTTON_MASKS.filter(
+								buttonMasks={BUTTON_MASKS_OPTIONS.filter(
 									(b, i) =>
 										macroList.find(
 											(m, macroIdx) =>
@@ -621,7 +625,7 @@ export default function MacrosPage() {
 																			</td>
 																		) : (
 																			<td>{`${
-																				BUTTON_MASKS.find(
+																				BUTTON_MASKS_OPTIONS.find(
 																					(b) =>
 																						b.value == macro.macroTriggerButton,
 																				).label

www/src/Pages/PinMapping.scss

@@ -0,0 +1,6 @@
+.pin-grid {
+	display: grid;
+	grid-auto-flow: column;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: repeat(15, auto);
+}