vmario/Doodle3D-Slicer
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Slicer.git synced 2024-11-22 05:37:55 +01:00
Code Issues Projects Releases Wiki Activity

Display settings inside accordion element

Browse Source
This commit is contained in:
Casper Lamboo 2019-02-21 20:39:05 +01:00
parent 49b4a2be59
commit 01f40eb5f8
2 changed files with 163 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/interface/Accordion.js Normal file
View File

@ -0,0 +1,62 @@
import React from 'react';
import PropTypes from 'proptypes';
import injectSheet from 'react-jss';
import ExpandIcon from 'material-ui-icons/ExpandMore';
const styles = {
button: {
cursor: 'pointer'
},
body: {
overflow: 'hidden'
},
closed: {
maxHeight: '0px'
},
title: {
display: 'flex',
alignItems: 'flex-end'
}
};
class Accordion extends React.Component {
static propTypes = {
elements: PropTypes.arrayOf(PropTypes.shape({ body: PropTypes.node, title: PropTypes.string })),
classes: PropTypes.objectOf(PropTypes.string)
};
static defaultProps: {
elements: []
};
state = {
openAccordion: null
};
changeAccordion = (name) => {
const { openAccordion } = this.state;
if (openAccordion === name) {
this.setState({ openAccordion: null });
} else {
this.setState({ openAccordion: name });
}
};
render() {
const { openAccordion } = this.state;
const { elements, classes } = this.props;
return elements.map(({ body, title }, i) => (
<span key={i}>
<span className={classes.title}>
<ExpandIcon />
<p onClick={() => this.changeAccordion(title)} className={classes.button}>{title}</p>
</span>
<div className={`${classes.body} ${openAccordion === title ? '' : classes.closed}`}>
{body}
</div>
</span>
));
}
}
export default injectSheet(styles)(Accordion);

157
src/interface/Settings.js
View File

@ -22,6 +22,7 @@ import SettingsIcon from 'material-ui-icons/Settings';
import ExitToAppIcon from 'material-ui-icons/ExitToApp'; import ExitToAppIcon from 'material-ui-icons/ExitToApp';
import validateIp from 'validate-ip'; import validateIp from 'validate-ip';
import { Doodle3DManager } from 'doodle3d-api'; import { Doodle3DManager } from 'doodle3d-api';
import Accordion from './Accordion.js';
const DOODLE_3D_MANAGER = new Doodle3DManager(); const DOODLE_3D_MANAGER = new Doodle3DManager();
DOODLE_3D_MANAGER.checkNonServerBoxes = false; DOODLE_3D_MANAGER.checkNonServerBoxes = false;
@ -445,62 +446,106 @@ class Settings extends React.Component {
</Tab> </Tab>
<Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced"> <Tab buttonStyle={{ color: grey800, backgroundColor: 'white' }} label="Advanced">
<div> <div>
<p>Layer</p> <Accordion elements={[{
<NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" /> title: 'Layer',
<p>Thickness</p> body: (<NumberField name="settings.layerHeight" min={0.05} max={3} fullWidth floatingLabelText="Height" />)
<NumberField name="settings.thickness.top" min={0} fullWidth floatingLabelText="top" /> }, {
<NumberField name="settings.thickness.bottom" min={0} fullWidth floatingLabelText="bottom" /> title: 'Thickness',
<NumberField name="settings.thickness.shell" min={0} fullWidth floatingLabelText="shell" /> body: (<span>
<p>Material</p> <NumberField name="settings.thickness.top" min={0} fullWidth floatingLabelText="top" />
<NumberField name="settings.filamentThickness" min={0.1} max={10} fullWidth floatingLabelText="Thickness" /> <NumberField name="settings.thickness.bottom" min={0} fullWidth floatingLabelText="bottom" />
<NumberField name="settings.temperature" min={100} max={400} fullWidth floatingLabelText="Temperature" /> <NumberField name="settings.thickness.shell" min={0} fullWidth floatingLabelText="shell" />
<p>Bed</p> </span>)
<NumberField name="settings.bedTemperature" min={30} max={150} fullWidth floatingLabelText="Temperature" /> }, {
<Checkbox name="settings.heatedBed" label="Heated" /> title: 'Material',
<p>Brim</p> body: (<span>
<NumberField name="settings.brim.size" min={0} max={20} fullWidth floatingLabelText="Size" /> <NumberField name="settings.filamentThickness" min={0.1} max={10} fullWidth floatingLabelText="Thickness" />
<NumberField name="settings.brim.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> <NumberField name="settings.temperature" min={100} max={400} fullWidth floatingLabelText="Temperature" />
<NumberField name="settings.brim.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> </span>)
<p>Support</p> }, {
<Checkbox name="settings.support.enabled" label="Enabled" /> title: 'Bed',
<NumberField name="settings.support.distanceY" min={0.1} fullWidth floatingLabelText="Distance Y" /> body: (<span>
<NumberField name="settings.support.density" min={0} max={100} fullWidth floatingLabelText="Density" /> <NumberField name="settings.bedTemperature" min={30} max={150} fullWidth floatingLabelText="Temperature" />
<NumberField name="settings.support.margin" min={0.1} fullWidth floatingLabelText="Margin" /> <Checkbox name="settings.heatedBed" label="Heated" />
<NumberField name="settings.support.minArea" min={1} fullWidth floatingLabelText="Min Area" /> </span>)
<NumberField name="settings.support.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> }, {
<NumberField name="settings.support.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> title: 'Brim',
<p>First layer</p> body: (<span>
<NumberField name="settings.firstLayer.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> <NumberField name="settings.brim.size" min={0} max={20} fullWidth floatingLabelText="Size" />
<NumberField name="settings.firstLayer.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> <NumberField name="settings.brim.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<p>Inner shell</p> <NumberField name="settings.brim.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<NumberField name="settings.innerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> </span>)
<NumberField name="settings.innerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> }, {
<p>Outer shell</p> title: 'Support',
<NumberField name="settings.outerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> body: (<span>
<NumberField name="settings.outerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> <Checkbox name="settings.support.enabled" label="Enabled" />
<p>Inner infill</p> <NumberField name="settings.support.distanceY" min={0.1} fullWidth floatingLabelText="Distance Y" />
<NumberField name="settings.innerInfill.density" min={0} max={100} fullWidth floatingLabelText="Density" /> <NumberField name="settings.support.density" min={0} max={100} fullWidth floatingLabelText="Density" />
<NumberField name="settings.innerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> <NumberField name="settings.support.margin" min={0.1} fullWidth floatingLabelText="Margin" />
<NumberField name="settings.innerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> <NumberField name="settings.support.minArea" min={1} fullWidth floatingLabelText="Min Area" />
<p>Outer infill</p> <NumberField name="settings.support.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.outerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> <NumberField name="settings.support.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<NumberField name="settings.outerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" /> </span>)
<p>Travel</p> }, {
<NumberField name="settings.travel.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> title: 'First layer',
<Checkbox name="settings.combing" label="Combing" /> body: (<span>
<p>Retraction</p> <NumberField name="settings.firstLayer.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<Checkbox name="settings.retraction.enabled" label="Enabled" /> <NumberField name="settings.firstLayer.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<NumberField name="settings.retraction.amount" min={0} max={10} fullWidth floatingLabelText="Amount" /> </span>)
<NumberField name="settings.retraction.speed" min={10} max={200} fullWidth floatingLabelText="Speed" /> }, {
<NumberField name="settings.retraction.minDistance" min={0} fullWidth floatingLabelText="Min distance" /> title: 'Inner shell',
<p>Printer dimensions</p> body: (<span>
<div className={classes.textFieldRow}> <NumberField name="settings.innerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.dimensions.x" min={1} fullWidth floatingLabelText="X" /> <NumberField name="settings.innerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
<NumberField name="settings.dimensions.y" min={1} fullWidth floatingLabelText="Y" /> </span>)
<NumberField name="settings.dimensions.z" min={1} fullWidth floatingLabelText="Z" /> }, {
</div> title: 'Outer shell',
<p>Nozzle</p> body: (<span>
<NumberField name="settings.nozzleDiameter" min={0.1} max={5} fullWidth floatingLabelText="Diameter" /> <NumberField name="settings.outerShell.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.outerShell.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
</span>)
}, {
title: 'Inner infill',
body: (<span>
<NumberField name="settings.innerInfill.density" min={0} max={100} fullWidth floatingLabelText="Density" />
<NumberField name="settings.innerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.innerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
</span>)
}, {
title: 'Outer infill',
body: (<span>
<NumberField name="settings.outerInfill.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.outerInfill.flowRate" min={0.1} max={4} fullWidth floatingLabelText="Flow rate" />
</span>)
}, {
title: 'Travel',
body: (<span>
<NumberField name="settings.travel.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<Checkbox name="settings.combing" label="Combing" />
</span>)
}, {
title: 'Retraction',
body: (<span>
<Checkbox name="settings.retraction.enabled" label="Enabled" />
<NumberField name="settings.retraction.amount" min={0} max={10} fullWidth floatingLabelText="Amount" />
<NumberField name="settings.retraction.speed" min={10} max={200} fullWidth floatingLabelText="Speed" />
<NumberField name="settings.retraction.minDistance" min={0} fullWidth floatingLabelText="Min distance" />
</span>)
}, {
title: 'Printer dimensions',
body: (<span>
<div className={classes.textFieldRow}>
<NumberField name="settings.dimensions.x" min={1} fullWidth floatingLabelText="X" />
<NumberField name="settings.dimensions.y" min={1} fullWidth floatingLabelText="Y" />
<NumberField name="settings.dimensions.z" min={1} fullWidth floatingLabelText="Z" />
</div>
</span>)
}, {
title: 'Nozzle',
body: (<span>
<NumberField name="settings.nozzleDiameter" min={0.1} max={5} fullWidth floatingLabelText="Diameter" />
</span>)
}]} />
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>