[MIRROR] Adds config Input to the colorMatrix (#8922)

Co-authored-by: Heroman3003 <31296024+Heroman3003@users.noreply.github.com>
Co-authored-by: CHOMPStation2 <chompsation2@gmail.com>
This commit is contained in:
CHOMPStation2
2024-09-07 13:50:23 -07:00
committed by GitHub
parent f368c0af3b
commit 1e8be29c71
3 changed files with 264 additions and 222 deletions

View File

@@ -108,6 +108,16 @@
if("set_matrix_color") if("set_matrix_color")
color_matrix_last[params["color"]] = params["value"] color_matrix_last[params["color"]] = params["value"]
return TRUE return TRUE
if("set_matrix_string")
if(params["value"])
var/list/colours = splittext(params["value"], ",")
if(colours.len > 12)
colours.Cut(13)
for(var/i = 1, i <= colours.len, i++)
var/number = text2num(colours[i])
if(isnum(number))
color_matrix_last[i] = clamp(number, -10, 10)
return TRUE
if("set_hue") if("set_hue")
build_hue = clamp(text2num(params["buildhue"]), 0, 360) build_hue = clamp(text2num(params["buildhue"]), 0, 360)
return TRUE return TRUE

View File

@@ -189,6 +189,16 @@
if("set_matrix_color") if("set_matrix_color")
color_matrix_last[params["color"]] = params["value"] color_matrix_last[params["color"]] = params["value"]
return TRUE return TRUE
if("set_matrix_string")
if(params["value"])
var/list/colours = splittext(params["value"], ",")
if(colours.len > 12)
colours.Cut(13)
for(var/i = 1, i <= colours.len, i++)
var/number = text2num(colours[i])
if(isnum(number))
color_matrix_last[i] = clamp(number, -10, 10)
return TRUE
if("set_hue") if("set_hue")
build_hue = clamp(text2num(params["buildhue"]), 0, 360) build_hue = clamp(text2num(params["buildhue"]), 0, 360)
return TRUE return TRUE

View File

@@ -1,7 +1,14 @@
import { toFixed } from 'common/math'; import { toFixed } from 'common/math';
import { useBackend } from '../../backend'; import { useBackend } from '../../backend';
import { Icon, NumberInput, Table } from '../../components'; import {
Box,
Icon,
Input,
LabeledList,
NumberInput,
Table,
} from '../../components';
import { Data } from './types'; import { Data } from './types';
export const ColorMateMatrix = (props) => { export const ColorMateMatrix = (props) => {
@@ -10,226 +17,241 @@ export const ColorMateMatrix = (props) => {
const { matrixcolors } = data; const { matrixcolors } = data;
return ( return (
<Table> <>
<Table.Cell> <Table>
<Table.Row> <Table.Cell>
RR: <Table.Row>
<NumberInput RR:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.rr} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.rr}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 1, act('set_matrix_color', {
value, color: 1,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
GR: <Table.Row>
<NumberInput GR:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.gr} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.gr}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 4, act('set_matrix_color', {
value, color: 4,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
BR: <Table.Row>
<NumberInput BR:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.br} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.br}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 7, act('set_matrix_color', {
value, color: 7,
}) value,
} })
/> }
</Table.Row> />
</Table.Cell> </Table.Row>
<Table.Cell> </Table.Cell>
<Table.Row> <Table.Cell>
RG: <Table.Row>
<NumberInput RG:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.rg} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.rg}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 2, act('set_matrix_color', {
value, color: 2,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
GG: <Table.Row>
<NumberInput GG:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.gg} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.gg}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 5, act('set_matrix_color', {
value, color: 5,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
BG: <Table.Row>
<NumberInput BG:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.bg} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.bg}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 8, act('set_matrix_color', {
value, color: 8,
}) value,
} })
/> }
</Table.Row> />
</Table.Cell> </Table.Row>
<Table.Cell> </Table.Cell>
<Table.Row> <Table.Cell>
RB: <Table.Row>
<NumberInput RB:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.rb} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.rb}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 3, act('set_matrix_color', {
value, color: 3,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
GB: <Table.Row>
<NumberInput GB:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.gb} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.gb}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 6, act('set_matrix_color', {
value, color: 6,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
BB: <Table.Row>
<NumberInput BB:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.bb} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.bb}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 9, act('set_matrix_color', {
value, color: 9,
}) value,
} })
/> }
</Table.Row> />
</Table.Cell> </Table.Row>
<Table.Cell> </Table.Cell>
<Table.Row> <Table.Cell>
CR: <Table.Row>
<NumberInput CR:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.cr} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.cr}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 10, act('set_matrix_color', {
value, color: 10,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
CG: <Table.Row>
<NumberInput CG:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.cg} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.cg}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 11, act('set_matrix_color', {
value, color: 11,
}) value,
} })
/> }
</Table.Row> />
<Table.Row> </Table.Row>
CB: <Table.Row>
<NumberInput CB:
width="50px" <NumberInput
minValue={-10} width="50px"
maxValue={10} minValue={-10}
step={0.01} maxValue={10}
value={matrixcolors.cb} step={0.01}
format={(value: number) => toFixed(value, 2)} value={matrixcolors.cb}
onChange={(value: number) => format={(value: number) => toFixed(value, 2)}
act('set_matrix_color', { onChange={(value: number) =>
color: 12, act('set_matrix_color', {
value, color: 12,
}) value,
} })
/> }
</Table.Row> />
</Table.Cell> </Table.Row>
<Table.Cell width="40%"> </Table.Cell>
<Icon name="question-circle" color="blue" /> RG means red will become <Table.Cell width="40%">
this much green. <Icon name="question-circle" color="blue" /> RG means red will become
<br /> this much green.
<Icon name="question-circle" color="blue" /> CR means this much red will <br />
be added. <Icon name="question-circle" color="blue" /> CR means this much red
</Table.Cell> will be added.
</Table> </Table.Cell>
</Table>
<Box mt={3}>
<LabeledList>
<LabeledList.Item label="Config">
<Input
fluid
value={Object.values(matrixcolors).toString()}
onChange={(e, value: string) =>
act('set_matrix_string', { value })
}
/>
</LabeledList.Item>
</LabeledList>
</Box>
</>
); );
}; };