Skip to content

Commit

Permalink
Squashed commit of Pelsin/one-pin-multiple-buttons-ui-revamp:
Browse files Browse the repository at this point in the history
commit 16c34b6
Merge: 3b21858 8b915e0
Author: ian <ian@vidales.se>
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 <ian@vidales.se>
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 <ian@vidales.se>
Date:   Sat May 4 18:59:17 2024 +0200

    Remove old multi mapping path

commit 2f0892f
Author: ian <ian@vidales.se>
Date:   Sat May 4 18:48:01 2024 +0200

    Fix merge issue

commit 12ed309
Merge: be460f9 22ed9a7
Author: ian <ian@vidales.se>
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 <ian@vidales.se>
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 <ian@vidales.se>
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 <ian@vidales.se>
Date:   Mon Apr 22 22:38:24 2024 +0200

    WIP make pin mappping page handle masks

commit 5712845
Author: ian <ian@vidales.se>
Date:   Mon Apr 22 22:25:40 2024 +0200

    Add lodash types

commit 9d10afb
Author: ian <ian@vidales.se>
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 <ian@vidales.se>
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 <ian@vidales.se>
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 <bss@incorporeal.org>
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 <bss@incorporeal.org>
Date:   Sat Mar 9 15:20:06 2024 -0600

    add a disclaimer about multi mapping only working on Profile 1

commit 7aef83e
Author: Pelsin <ian@vidales.se>
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 <bss@incorporeal.org>
Date:   Wed Feb 28 18:28:27 2024 -0600

    fix issue where setPinMappingsV2 was actually ignoring input

commit a2853d8
Author: Brian S. Stephan <bss@incorporeal.org>
Date:   Thu Feb 22 16:28:06 2024 -0600

    implement get/setPinMappingsV2 which includes the new masks

commit 26bbcbe
Author: Brian S. Stephan <bss@incorporeal.org>
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 <bss@incorporeal.org>
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 <ian@vidales.se>
Co-authored-by: Pelsin <ian@vidales.se>
  • Loading branch information
bsstephan and Pelsin committed Jun 8, 2024
1 parent 4e51a78 commit 82b3e82
Show file tree
Hide file tree
Showing 21 changed files with 539 additions and 274 deletions.
9 changes: 5 additions & 4 deletions www/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions www/server/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down
9 changes: 6 additions & 3 deletions www/src/Addons/Bootsel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 = {
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions www/src/Addons/FocusMode.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}`}
Expand All @@ -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}
Expand All @@ -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}
Expand Down
18 changes: 9 additions & 9 deletions www/src/Addons/Turbo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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 = {
Expand Down
22 changes: 5 additions & 17 deletions www/src/Addons/Wii.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions www/src/Components/CaptureButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)}
Expand All @@ -103,7 +103,7 @@ const CaptureButton = ({
</Button>
</Modal.Footer>
</Modal>
<Button variant="secondary" onClick={() => setTriggerCapture(true)}>
<Button onClick={() => setTriggerCapture(true)}>
{small
? '🎮'
: `${
Expand Down
6 changes: 6 additions & 0 deletions www/src/Components/CustomSelect.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
7 changes: 6 additions & 1 deletion www/src/Components/FormSelect.jsx
Original file line number Diff line number Diff line change
@@ -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>}
Expand Down
12 changes: 11 additions & 1 deletion www/src/Data/Buttons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -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 },
Expand All @@ -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 },
Expand Down
2 changes: 1 addition & 1 deletion www/src/Data/Controllers.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,6 @@
"pin26": -10,
"pin27": -10,
"pin28": -10,
"pin29": -10
"pin29": -5
}
}
4 changes: 1 addition & 3 deletions www/src/Data/Pins.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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 = {
Expand Down
1 change: 1 addition & 0 deletions www/src/Locales/en/Navigation.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 2 additions & 1 deletion www/src/Locales/en/PinMapping.jsx
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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',
},
};
18 changes: 11 additions & 7 deletions www/src/Pages/InputMacroAddonPage.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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 },
Expand Down Expand Up @@ -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}]`}
Expand All @@ -201,7 +205,7 @@ const MacroInputComponent = (props) => {
isInvalid={errors?.buttonMask}
translation={t}
buttonLabelType={buttonLabelType}
buttonMasks={BUTTON_MASKS}
buttonMasks={BUTTON_MASKS_OPTIONS}
/>
</Col>
),
Expand All @@ -218,7 +222,7 @@ const MacroInputComponent = (props) => {
isInvalid={errors?.buttonMask}
translation={t}
buttonLabelType={buttonLabelType}
buttonMasks={BUTTON_MASKS}
buttonMasks={BUTTON_MASKS_OPTIONS}
/>
</Col>
</Row>
Expand Down Expand Up @@ -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) =>
Expand Down Expand Up @@ -621,7 +625,7 @@ export default function MacrosPage() {
</td>
) : (
<td>{`${
BUTTON_MASKS.find(
BUTTON_MASKS_OPTIONS.find(
(b) =>
b.value == macro.macroTriggerButton,
).label
Expand Down
6 changes: 6 additions & 0 deletions www/src/Pages/PinMapping.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.pin-grid {
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(15, auto);
}
Loading

0 comments on commit 82b3e82

Please sign in to comment.