2017-11-13 02:09:39 +01:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'proptypes';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import { Tabs, Tab } from 'material-ui/Tabs';
|
|
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
|
|
import injectSheet from 'react-jss';
|
2017-12-04 15:08:29 +01:00
|
|
|
import { SelectField, TextField, Checkbox } from './FormComponents.js';
|
|
|
|
import { grey900 } from 'material-ui/styles/colors';
|
2017-11-13 02:09:39 +01:00
|
|
|
|
|
|
|
const styles = {
|
|
|
|
textFieldRow: {
|
|
|
|
display: 'flex'
|
2017-12-04 15:08:29 +01:00
|
|
|
},
|
|
|
|
text: {
|
|
|
|
fontWeight: 'bold',
|
|
|
|
color: grey900
|
|
|
|
},
|
|
|
|
container: {
|
|
|
|
width: '100%',
|
|
|
|
flexGrow: 1,
|
|
|
|
overflowY: 'auto'
|
2017-11-13 02:09:39 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
class Settings extends React.Component {
|
2017-12-04 15:08:29 +01:00
|
|
|
static childContextTypes = { state: PropTypes.object, onChange: PropTypes.func, disabled: PropTypes.bool };
|
|
|
|
static defaultProps: {
|
|
|
|
disabled: false
|
|
|
|
};
|
2017-11-16 14:54:47 +01:00
|
|
|
static propTypes = {
|
|
|
|
classes: PropTypes.objectOf(PropTypes.string),
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
printers: PropTypes.object.isRequired,
|
|
|
|
defaultPrinter: PropTypes.string.isRequired,
|
|
|
|
quality: PropTypes.object.isRequired,
|
|
|
|
defaultQuality: PropTypes.string.isRequired,
|
|
|
|
material: PropTypes.object.isRequired,
|
|
|
|
defaultMaterial: PropTypes.string.isRequired,
|
2017-12-04 15:08:29 +01:00
|
|
|
initialSettings: PropTypes.object.isRequired,
|
|
|
|
disabled: PropTypes.bool.isRequired
|
2017-11-16 14:54:47 +01:00
|
|
|
};
|
2017-11-16 15:05:28 +01:00
|
|
|
constructor(props) {
|
2017-11-16 15:06:19 +01:00
|
|
|
super();
|
2017-11-16 15:05:28 +01:00
|
|
|
this.state = {
|
|
|
|
settings: props.initialSettings,
|
|
|
|
printers: props.defaultPrinter,
|
|
|
|
quality: props.defaultQuality,
|
|
|
|
material: props.defaultMaterial
|
|
|
|
};
|
|
|
|
}
|
2017-11-13 02:09:39 +01:00
|
|
|
|
|
|
|
changeSettings = (fieldName, value) => {
|
2017-11-13 02:47:53 +01:00
|
|
|
const { onChange } = this.props;
|
|
|
|
|
|
|
|
let state;
|
2017-11-13 02:09:39 +01:00
|
|
|
switch (fieldName) {
|
2017-11-13 15:47:19 +01:00
|
|
|
case 'printers':
|
2017-11-13 02:09:39 +01:00
|
|
|
case 'quality':
|
|
|
|
case 'material':
|
2017-11-13 02:47:53 +01:00
|
|
|
state = {
|
2017-11-13 02:09:39 +01:00
|
|
|
[fieldName]: value,
|
2017-11-13 02:47:53 +01:00
|
|
|
settings: _.merge({}, this.state.settings, this.props[fieldName][value])
|
|
|
|
};
|
2017-11-13 02:09:39 +01:00
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
2017-11-13 02:47:53 +01:00
|
|
|
state = _.set(_.cloneDeep(this.state), fieldName, value);
|
2017-11-13 02:09:39 +01:00
|
|
|
break;
|
|
|
|
}
|
2017-11-13 15:12:59 +01:00
|
|
|
if (onChange) onChange(state);
|
2017-11-13 02:47:53 +01:00
|
|
|
if (state) this.setState(state);
|
2017-11-13 02:09:39 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
getChildContext() {
|
2017-12-04 15:08:29 +01:00
|
|
|
return { state: this.state, onChange: this.changeSettings, disabled: this.props.disabled };
|
2017-11-13 02:09:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-12-04 15:08:29 +01:00
|
|
|
const { classes, printers, quality, material, disabled } = this.props;
|
2017-11-13 02:09:39 +01:00
|
|
|
|
|
|
|
return (
|
2017-12-04 15:08:29 +01:00
|
|
|
<div className={classes.container}>
|
|
|
|
<SelectField name="printers" floatingLabelText="Printer" fullWidth>
|
|
|
|
{Object.entries(printers).map(([value, { title }]) => (
|
|
|
|
<MenuItem key={value} value={value} primaryText={title} />
|
|
|
|
))}
|
|
|
|
</SelectField>
|
|
|
|
<SelectField name="material" floatingLabelText="Material" fullWidth>
|
|
|
|
{Object.entries(material).map(([value, { title }]) => (
|
|
|
|
<MenuItem key={value} value={value} primaryText={title} />
|
|
|
|
))}
|
|
|
|
</SelectField>
|
|
|
|
<h3 className={classes.text}>Printer Setup</h3>
|
|
|
|
<Tabs>
|
|
|
|
<Tab label="basic">
|
|
|
|
<div>
|
|
|
|
<SelectField name="quality" floatingLabelText="Quality" fullWidth>
|
|
|
|
{Object.entries(quality).map(([value, { title }]) => (
|
|
|
|
<MenuItem key={value} value={value} primaryText={title} />
|
|
|
|
))}
|
|
|
|
</SelectField>
|
|
|
|
</div>
|
|
|
|
</Tab>
|
|
|
|
<Tab label="advanced">
|
|
|
|
<div>
|
|
|
|
<p className={classes.text}>Printer dimensions</p>
|
2017-11-13 02:09:39 +01:00
|
|
|
<div className={classes.textFieldRow}>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.dimensions.x" fullWidth floatingLabelText="X" type="number" />
|
|
|
|
<TextField name="settings.dimensions.y" fullWidth floatingLabelText="Y" type="number" />
|
|
|
|
<TextField name="settings.dimensions.z" fullWidth floatingLabelText="Z" type="number" />
|
2017-11-13 02:09:39 +01:00
|
|
|
</div>
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Nozzle</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.nozzleDiameter" fullWidth floatingLabelText="Diameter" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Bed</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.bedTemperature" fullWidth floatingLabelText="Temperature" type="number" />
|
|
|
|
<Checkbox name="settings.heatedBed" label="Heated" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Material</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.filamentThickness" fullWidth floatingLabelText="Thickness" type="number" />
|
|
|
|
<TextField name="settings.temperature" fullWidth floatingLabelText="Temperature" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Thickness</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.thickness.top" fullWidth floatingLabelText="top" type="number" />
|
|
|
|
<TextField name="settings.thickness.bottom" fullWidth floatingLabelText="bottom" type="number" />
|
|
|
|
<TextField name="settings.thickness.shell" fullWidth floatingLabelText="shell" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Retraction</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<Checkbox name="settings.retraction.enabled" label="Enabled" />
|
|
|
|
<TextField name="settings.retraction.amount" fullWidth floatingLabelText="Amount" type="number" />
|
|
|
|
<TextField name="settings.retraction.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.retraction.minDistance" fullWidth floatingLabelText="Min distance" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Travel</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.travel.speed" fullWidth floatingLabelText="Speed" type="number" />
|
2017-11-13 02:09:39 +01:00
|
|
|
<Checkbox name="settings.combing" label="Combing" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Inner shell</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.innerShell.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.innerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Outer shell</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.outerShell.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.outerShell.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Inner infill</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.innerInfill.gridSize" fullWidth floatingLabelText="Grid size" type="number" />
|
|
|
|
<TextField name="settings.innerInfill.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.innerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Outer infill</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.outerInfill.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.outerInfill.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>Brim</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.brim.offset" fullWidth floatingLabelText="Offset" type="number" />
|
|
|
|
<TextField name="settings.brim.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.brim.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
<p className={classes.text}>First layer</p>
|
2017-11-13 10:45:23 +01:00
|
|
|
<TextField name="settings.firstLayer.speed" fullWidth floatingLabelText="Speed" type="number" />
|
|
|
|
<TextField name="settings.firstLayer.flowRate" fullWidth floatingLabelText="Flow rate" type="number" />
|
2017-12-04 15:08:29 +01:00
|
|
|
</div>
|
|
|
|
</Tab>
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
2017-11-13 02:09:39 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default injectSheet(styles)(Settings);
|