apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

feat(gui): add sliders to numeric inputs

This commit is contained in:
Sean Sube 2023-01-08 13:32:07 -06:00
parent d5c4040b07
commit c5e0439aa5
2 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gui/src/components/Img2Img.tsx
View File

@ -81,10 +81,10 @@ export function Img2Img(props: Img2ImgProps) {
}} /> }} />
<NumericField <NumericField
decimal decimal
label='Width' label='Weight'
min={0} min={0}
max={1} max={1}
step={0.1} step={0.01}
value={strength} value={strength}
onChange={(value) => { onChange={(value) => {
setStrength(value); setStrength(value);

29
gui/src/components/NumericField.tsx
View File

@ -1,5 +1,5 @@
import { doesExist } from '@apextoaster/js-utils'; import { doesExist } from '@apextoaster/js-utils';
import { TextField } from '@mui/material'; import { Slider, Stack, TextField } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
export function parseNumber(num: string, decimal = false): number { export function parseNumber(num: string, decimal = false): number {
@ -15,15 +15,16 @@ export interface ImageControlProps {
label: string; label: string;
min: number; min: number;
max: number; max: number;
step: number | 'any'; step: number;
value: number; value: number;
onChange?: (value: number) => void; onChange?: (value: number) => void;
} }
export function NumericField(props: ImageControlProps) { export function NumericField(props: ImageControlProps) {
const { label, min, max, step, value } = props; const { decimal, label, min, max, step, value } = props;
return <TextField return <Stack spacing={2}>
<TextField
label={label} label={label}
variant='outlined' variant='outlined'
type='number' type='number'
@ -31,8 +32,24 @@ export function NumericField(props: ImageControlProps) {
value={value} value={value}
onChange={(event) => { onChange={(event) => {
if (doesExist(props.onChange)) { if (doesExist(props.onChange)) {
props.onChange(parseNumber(event.target.value, props.decimal)); props.onChange(parseNumber(event.target.value, decimal));
} }
}} }}
/>; />
<Slider
min={min}
max={max}
step={step}
value={value}
onChange={(_event, newValue) => {
if (doesExist(props.onChange)) {
if (Array.isArray(newValue)) {
props.onChange(newValue[0]);
} else {
props.onChange(newValue);
}
}
}}
/>
</Stack>;
} }