Skip to content

Commit

Permalink
useRgb custom hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@aarron-lee
aarron-lee committed Nov 26, 2023
1 parent c5cf272 commit 580bcfe
Show file tree
Hide file tree
Showing 2 changed files with 168 additions and 73 deletions.
124 changes: 51 additions & 73 deletions src/components/ControllerLightingPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from 'decky-frontend-lib';
import { VFC } from 'react';
import { useState } from 'react';
import useRgb from '../hooks/useRgb';
const DEFAULT_STATE = {
ledR_b: 50,
ledL_b: 50,
Expand All @@ -23,95 +24,78 @@ const DEFAULT_STATE = {
blue: 255
};

// const defaultLeftRgb;

const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
serverAPI
}) => {
const [ledRightBrightness, setRightLedBrightness] = useState(
DEFAULT_STATE.ledR_b
);
const [ledLeftBrightness, setLeftLedBrightness] = useState(
DEFAULT_STATE.ledL_b
);
const [isLeftRgbOn, setIsLeftRgbOn] = useState(DEFAULT_STATE.isLeftRgbOn);
const [isRightRgbOn, setIsRightRgbOn] = useState(DEFAULT_STATE.isRigthRgbOn);
// const [ledRightBrightness, setRightLedBrightness] = useState(
// DEFAULT_STATE.ledR_b
// );
// const [ledLeftBrightness, setLeftLedBrightness] = useState(
// DEFAULT_STATE.ledL_b
// );
// const [isLeftRgbOn, setIsLeftRgbOn] = useState(DEFAULT_STATE.isLeftRgbOn);
// const [isRightRgbOn, setIsRightRgbOn] = useState(DEFAULT_STATE.isRigthRgbOn);
const [isTouchpad, setIsTouchpad] = useState(DEFAULT_STATE.isTouchpad);

const [redR, setRedR] = useState(DEFAULT_STATE.red);
const [greenR, setGreenR] = useState(DEFAULT_STATE.green);
const [blueR, setBlueR] = useState(DEFAULT_STATE.blue);
const [redL, setRedL] = useState(DEFAULT_STATE.red);
const [greenL, setGreenL] = useState(DEFAULT_STATE.green);
const [blueL, setBlueL] = useState(DEFAULT_STATE.blue);
// const [redR, setRedR] = useState(DEFAULT_STATE.red);
// const [greenR, setGreenR] = useState(DEFAULT_STATE.green);
// const [blueR, setBlueR] = useState(DEFAULT_STATE.blue);
// const [redL, setRedL] = useState(DEFAULT_STATE.red);
// const [greenL, setGreenL] = useState(DEFAULT_STATE.green);
// const [blueL, setBlueL] = useState(DEFAULT_STATE.blue);

const [showRightOptions, setShowRightOptions] = useState(false);
const [showLeftOptions, setShowLeftOptions] = useState(false);

const [
{
enabled: isLeftRgbOn,
red: redL,
green: greenL,
blue: blueL,
brightness: brightnessL
},
setIsLeftRgbOn,
setLeftColor,
setLeftLedBrightness
] = useRgb('LEFT', serverAPI);

const [
{
enabled: isRightRgbOn,
red: redR,
green: greenR,
blue: blueR,
brightness: brightnessR
},
setIsRightRgbOn,
setRightColor,
setRightLedBrightness
] = useRgb('RIGHT', serverAPI);

const handleSliderChange = (controller: string, newValue: number) => {
let r = 100;
let g = 100;
let b = 100;
if (controller === 'LEFT') {
setLeftLedBrightness(newValue);
r = redL;
g = greenL;
b = blueL;
} else if (controller === 'RIGHT') {
setRightLedBrightness(newValue);
r = redR;
g = greenR;
b = blueR;
}
console.log(`New brightness: ${newValue}`);
serverAPI!.callPluginMethod('rgb_brightness', {
controller: controller,
value_str: newValue,
red: r,
blue: b,
green: g
});
};
const handleToggleChange = (controller: string, value: boolean) => {
if (controller === 'LEFT') {
setIsLeftRgbOn(value);
} else if (controller === 'RIGHT') {
setIsRightRgbOn(value);
}
console.log(`Toggle value: ${value}`);
const method = value ? 'rgb_on' : 'rgb_off';
serverAPI!.callPluginMethod(method, { controller: controller });
};
const TPadToggleChange = (value: boolean) => {
setIsTouchpad(value);
console.log(`Toggle value: ${value}`);
serverAPI!.callPluginMethod('set_touchpad', { enable: value });
};

const handleColorChange = (controller: string) => {
let ledB = 100;
let r = 100;
let g = 100;
let b = 100;
if (controller === 'LEFT') {
ledB = ledLeftBrightness;
r = redL;
g = greenL;
b = blueL;
} else if (controller === 'RIGHT') {
ledB = ledRightBrightness;
r = redR;
g = greenR;
b = blueR;
}
const rgbColor = `rgb(${r}, ${g}, ${b})`;
console.log(rgbColor);
serverAPI!.callPluginMethod('rgb_color', {
controller: controller,
red: r,
blue: b,
green: g,
brightness: ledB
});
};
return (
<PanelSection title="Controller Lighting">
<div>
Expand All @@ -134,7 +118,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
<>
<SliderField
label="Right Stick Brightness"
value={ledRightBrightness}
value={brightnessR}
showValue={true}
min={0}
max={100}
Expand All @@ -150,8 +134,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setRedR(value);
handleColorChange('RIGHT');
setRightColor('red', value);
}}
/>
<SliderField
Expand All @@ -162,8 +145,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setGreenR(value);
handleColorChange('RIGHT');
setRightColor('green', value);
}}
/>
<SliderField
Expand All @@ -174,8 +156,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setBlueR(value);
handleColorChange('RIGHT');
setRightColor('blue', value);
}}
/>
<div
Expand Down Expand Up @@ -210,7 +191,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
<>
<SliderField
label="Left Stick Brightness"
value={ledLeftBrightness}
value={brightnessL}
showValue={true}
min={0}
max={100}
Expand All @@ -226,8 +207,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setRedL(value);
handleColorChange('LEFT');
setLeftColor('red', value);
}}
/>
<SliderField
Expand All @@ -238,8 +218,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setGreenL(value);
handleColorChange('LEFT');
setLeftColor('green', value);
}}
/>
<SliderField
Expand All @@ -250,8 +229,7 @@ const ControllerLightingPanel: VFC<{ serverAPI: ServerAPI }> = ({
max={255}
validValues="range"
onChange={(value) => {
setBlueL(value);
handleColorChange('LEFT');
setLeftColor('blue', value);
}}
/>
<div
Expand Down
117 changes: 117 additions & 0 deletions src/hooks/useRgb.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import { ServerAPI } from 'decky-frontend-lib';
import { useReducer, useEffect } from 'react';
import { ControllerType } from '../backend/constants';

type StateType = {
enabled: boolean;
red: number;
green: number;
blue: number;
brightness: number;
};

enum Actions {
SET_COLOR,
SET_BRIGHTNESS,
TOGGLE_ENABLED,
SET_ENABLED
}

type ActionType = {
type: Actions;
payload?: any;
};

export enum Colors {
RED = 'red',
GREEN = 'green',
BLUE = 'blue'
}

const rgbReducer = (state: any, action: ActionType) => {
if (action.type === Actions.SET_COLOR && action.payload) {
let newState = { ...state, [action.payload.color]: action.payload.value };
return newState;
}
if (action.type === Actions.SET_BRIGHTNESS) {
let newState = { ...state, brightness: action.payload };
return newState;
}
if (action.type === Actions.TOGGLE_ENABLED) {
let newState = { ...state, enabled: !state.enabled };
return newState;
}
if (action.type === Actions.SET_ENABLED) {
let newState = { ...state, enabled: Boolean(action.payload) };
return newState;
}
return state;
};

const initialState = {
enabled: false,
red: 255,
green: 255,
blue: 255,
brightness: 50
};

const useRgb = (
// initialState: StateType,
controller: ControllerType,
serverAPI: ServerAPI
) => {
const [state, dispatch] = useReducer(rgbReducer, initialState);

const { enabled, red, green, blue, brightness } = state as StateType;

useEffect(() => {
if (enabled) {
serverAPI.callPluginMethod('rgb_on', { controller });
serverAPI.callPluginMethod('rgb_brightness', {
controller,
value_str: brightness,
red,
green,
blue
});
} else {
// turn off rgb
serverAPI.callPluginMethod('rgb_off', { controller });
}
}, [enabled, red, green, blue, brightness]);

const updateColor = (color: Colors, value: number) => {
return dispatch({
type: Actions.SET_COLOR,
payload: {
color,
value
}
});
};

// const toggleEnabled = () => {
// return dispatch({
// type: Actions.TOGGLE_ENABLED
// });
// };

const setEnabled = (enabled: boolean) => {
return dispatch({
type: Actions.SET_ENABLED,
payload: enabled
});
};

const updateBrightness = (brightness: number) => {
return dispatch({
type: Actions.SET_BRIGHTNESS,
payload: brightness
});
};

return [state, setEnabled, updateColor, updateBrightness];
};

export default useRgb;

0 comments on commit 580bcfe

Please sign in to comment.