Add constrains to fields

#32
This commit is contained in:
casperlamboo 2018-01-17 11:56:42 +01:00
parent 9b78f4e2c8
commit 137f95fdba
3 changed files with 53 additions and 34 deletions

6
package-lock.json generated
View File

@ -79,6 +79,9 @@
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.1.0.tgz", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.1.0.tgz",
"integrity": "sha512-dQoid9tqQ+uotGhuTKEY11X4xhyYePVnqGSoSm3OGKh2E8LZ6RPULp1uXTctk33IeERlrRJYoVSBglsL05F5Uw==" "integrity": "sha512-dQoid9tqQ+uotGhuTKEY11X4xhyYePVnqGSoSm3OGKh2E8LZ6RPULp1uXTctk33IeERlrRJYoVSBglsL05F5Uw=="
},
"three-js-csg": {
"version": "github:Doodle3D/three-js-csg#a36f23da6e9be2405a9094de5709cb0ae8f58045"
} }
} }
}, },
@ -7856,9 +7859,6 @@
"resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz", "resolved": "https://registry.npmjs.org/three/-/three-0.88.0.tgz",
"integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU=" "integrity": "sha1-QlbC/Djk+yOg0j66K2zOTfjkZtU="
}, },
"three-js-csg": {
"version": "github:Doodle3D/three-js-csg#a36f23da6e9be2405a9094de5709cb0ae8f58045"
},
"through2": { "through2": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",

View File

@ -39,12 +39,31 @@ export const TextField = (props, context) => (
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }} floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
disabled={context.disabled} disabled={context.disabled}
value={_.get(context, props.name)} value={_.get(context, props.name)}
onChange={(event, value) => context.onChange(props.name, props.type === 'number' ? parseFloat(value) : value)} onChange={(event, value) => context.onChange(props.name, value)}
/> />
); );
TextField.contextTypes = contextTypes; TextField.contextTypes = contextTypes;
TextField.propTypes = propTypes; TextField.propTypes = propTypes;
export const NumberField = (props, context) => (
<TextFieldIcon
{...props}
type="number"
icon={context.advancedFields.includes(props.name) && <RefreshIcon onTouchTap={() => context.onChange(props.name, null)} />}
floatingLabelStyle={{ color: context.advancedFields.includes(props.name) ? blue500 : grey500 }}
disabled={context.disabled}
value={_.get(context, props.name)}
onChange={(event, value) => {
value = parseFloat(value);
if (props.min) value = Math.max(value, props.min);
if (props.max) value = Math.min(value, props.max);
context.onChange(props.name, value);
}}
/>
);
NumberField.contextTypes = contextTypes;
NumberField.propTypes = propTypes;
export const Checkbox = (props, context) => ( export const Checkbox = (props, context) => (
<span style={{ display: 'flex', position: 'relative' }}> <span style={{ display: 'flex', position: 'relative' }}>
<MaterialUICheckbox <MaterialUICheckbox

View File

@ -4,7 +4,7 @@ import _ from 'lodash';
import { Tabs, Tab } from 'material-ui/Tabs'; import { Tabs, Tab } from 'material-ui/Tabs';
import MenuItem from 'material-ui/MenuItem'; import MenuItem from 'material-ui/MenuItem';
import injectSheet from 'react-jss'; import injectSheet from 'react-jss';
import { SelectField, TextField, Checkbox } from './FormComponents.js'; import { SelectField, TextField, NumberField, Checkbox } from './FormComponents.js';
import { grey800, cyan500, red500 } from 'material-ui/styles/colors'; import { grey800, cyan500, red500 } from 'material-ui/styles/colors';
import Divider from 'material-ui/Divider'; import Divider from 'material-ui/Divider';
import Dialog from 'material-ui/Dialog'; import Dialog from 'material-ui/Dialog';
@ -341,53 +341,53 @@ class Settings extends React.Component {
<Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced"> <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">
<div> <div>
<p>Layer</p> <p>Layer</p>
<TextField name="settings.layerHeight" fullWidth floatingLabelText="Height" type="number" /> <NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />
<p>Printer dimensions</p> <p>Printer dimensions</p>
<div className={classes.textFieldRow}> <div className={classes.textFieldRow}>
<TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" /> <NumberField name="settings.dimensions.x" min={1} fullWidth floatingLabelText="X" />
<TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" /> <NumberField name="settings.dimensions.y" min={1} fullWidth floatingLabelText="Y" />
<TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" /> <NumberField name="settings.dimensions.z" min={1} fullWidth floatingLabelText="Z" />
</div> </div>
<p>Nozzle</p> <p>Nozzle</p>
<TextField name="settings.nozzleDiameter" fullWidth floatingLabelText="Diameter" type="number" /> <NumberField name="settings.nozzleDiameter" min={0.1} max={5} fullWidth floatingLabelText="Diameter" />
<p>Bed</p> <p>Bed</p>
<TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" /> <NumberField name="settings.bedTemperature" min={30} max={150} fullWidth floatingLabelText="Temperature" />
<Checkbox name="settings.heatedBed" label="Heated" /> <Checkbox name="settings.heatedBed" label="Heated" />
<p>Material</p> <p>Material</p>
<TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" /> <NumberField name="settings.filamentThickness" min={0.1} max={10} fullWidth floatingLabelText="Thickness" />
<TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" /> <NumberField name="settings.temperature" min={100} max={400} fullWidth floatingLabelText="Temperature" />
<p>Thickness</p> <p>Thickness</p>
<TextField name="settings.thickness.top" fullWidth floatingLabelText="top" type="number" /> <NumberField name="settings.thickness.top" min={0} fullWidth floatingLabelText="top" />
<TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" /> <NumberField name="settings.thickness.bottom" min={0} fullWidth floatingLabelText="bottom" />
<TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" /> <NumberField name="settings.thickness.shell" min={0} fullWidth floatingLabelText="shell" />
<p>Retraction</p> <p>Retraction</p>
<Checkbox name="settings.retraction.enabled" label="Enabled" /> <Checkbox name="settings.retraction.enabled" label="Enabled" />
<TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" /> <NumberField name="settings.retraction.amount" min={0} max={10} fullWidth floatingLabelText="Amount" />
<TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.retraction.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" /> <NumberField name="settings.retraction.minDistance" min={0} fullWidth floatingLabelText="Min distance" />
<p>Travel</p> <p>Travel</p>
<TextField name="settings.travel.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.travel.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<Checkbox name="settings.combing" label="Combing" /> <Checkbox name="settings.combing" label="Combing" />
<p>Inner shell</p> <p>Inner shell</p>
<TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.innerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.innerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<p>Outer shell</p> <p>Outer shell</p>
<TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.outerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.outerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<p>Inner infill</p> <p>Inner infill</p>
<TextField name="settings.innerInfill.precentage" fullWidth floatingLabelText="Percentage" type="number" /> <NumberField name="settings.innerInfill.precentage" min={0} max={100} fullWidth floatingLabelText="Percentage" />
<TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.innerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.innerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<p>Outer infill</p> <p>Outer infill</p>
<TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.outerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.outerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<p>Brim</p> <p>Brim</p>
<TextField name="settings.brim.size" fullWidth floatingLabelText="Size" type="number" /> <NumberField name="settings.brim.size" min={0} max={20} fullWidth floatingLabelText="Size" />
<TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.brim.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.brim.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<p>First layer</p> <p>First layer</p>
<TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" type="number" /> <NumberField name="settings.firstLayer.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" /> <NumberField name="settings.firstLayer.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>