simulation panel is finished.

This commit is contained in:
Fil Cesana 2020-05-18 10:54:31 +02:00
parent 06c7c07cf3
commit 31c98fac49
10 changed files with 405 additions and 101 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -1,6 +1,11 @@
import React from "react"; import React from "react";
import Modal from "react-modal"; import Modal from "react-modal";
import SliderSimulation from "./SliderSimulation.js"; import SliderTemperature from "./SliderTemperature.js";
import SliderTempRange from "./SliderTempRange.js";
import SliderHumidty from "./SliderHumidity.js";
import SliderLight from "./SliderLight.js";
import SliderLightRange from "./SliderLightRange.js";
import SliderMotion from "./SliderMotion.js";
import DropdownSimulation from "./DropdownSimulation.js"; import DropdownSimulation from "./DropdownSimulation.js";
import { import {
Grid, Grid,
@ -58,76 +63,35 @@ const SimulationPanel = (props) => (
</h1> </h1>
</Grid.Row> </Grid.Row>
{/* NORMAL LIGHT */} {/* TEMPERATURE SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
}}
/>
<Image <Image
src='./../img/light-simulation.png' src='./../img/thermo-simulation.png'
style={{ style={{
width: "50px", width: "60px",
height: "auto", height: "auto",
display:"block", display:"block",
marginLeft:"auto", marginLeft:"auto",
marginRight:"auto", marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
}} }}
/> />
<p style={{ color: "white", padding:"0.5rem"}}> <p style={{ color: "white", padding:"0.5rem"}}>
Normal Light Temperature Sensor
</p> </p>
<Divider />
</Grid.Column> </Grid.Column>
<Grid.Column width={10} textAlign="center"> <Grid.Column width={10} textAlign="center">
<Grid.Row >
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",
}}
>
ON / OFF
</p>
</Grid.Row>
<Divider />
<Grid.Row>
<Checkbox
toggle
style={{
width: "50px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "auto",
marginBottom: "auto"
}}
/>
</Grid.Row>
</Grid.Column>
</Grid.Row>
{/* INTENSITY LIGHT */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Image
src='./../img/intensity-icon-simulation-2.png'
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
Intensity Light
</p>
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<div <div
style={{ style={{
@ -135,50 +99,169 @@ const SimulationPanel = (props) => (
marginLeft: "30%", marginLeft: "30%",
}} }}
> >
<SliderSimulation /> <SliderTemperature />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderTempRange/>
</div> </div>
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
{/* SECURITY CAMERA */} {/* HUMIDTY SENSOR */}
<Grid.Row> <Grid.Row>
<Grid.Column width={6} textAlign="center"> <Grid.Column width={6} textAlign="center">
<Image <Divider
src='./../img/camera-icon-simulation.png' style={{
style={{ marginTop: "3rem",
width: "60px", marginBottom: "auto"
height: "auto", }}
display:"block", />
marginLeft:"auto", <Image
marginRight:"auto", src='./../img/humidity-simulation.png'
}} style={{
/> width: "60px",
<p style={{ color: "white", padding:"0.5rem"}}> height: "auto",
Security Camera display:"block",
</p> marginLeft:"auto",
</Grid.Column> marginRight:"auto",
marginTop: "1rem",
<Grid.Column width={10} textAlign="center"> marginBottom: "1rem"
<Grid.Row > }}
<p />
style={{ <p style={{ color: "white", padding:"0.5rem"}}>
color: "white", Humidity Sensor
padding:"0.5rem", </p>
display:"block",
marinLeft:"auto",
marginRight:"auto",
}}
>
Select the rooms in which you want camera ON
</p>
</Grid.Row>
<Divider /> <Divider />
<Grid.Row> </Grid.Column>
<DropdownSimulation />
</Grid.Row> <Grid.Column width={10} textAlign="center">
</Grid.Column>
</Grid.Row> <div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderHumidty />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderTempRange/>
</div>
</Grid.Column>
</Grid.Row>
{/* LIGHT SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
}}
/>
<Image
src='./../img/light-simulation.png'
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
Light Sensor
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderLight />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderLightRange/>
</div>
</Grid.Column>
</Grid.Row>
{/* MOTION SENSOR */}
<Grid.Row>
<Grid.Column width={6} textAlign="center">
<Divider
style={{
marginTop: "3rem",
marginBottom: "auto"
}}
/>
<Image
src='./../img/motion-simulation.png'
style={{
width: "60px",
height: "auto",
display:"block",
marginLeft:"auto",
marginRight:"auto",
marginTop: "1rem",
marginBottom: "1rem"
}}
/>
<p style={{ color: "white", padding:"0.5rem"}}>
Motion Sensor
</p>
<Divider />
</Grid.Column>
<Grid.Column width={10} textAlign="center">
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderMotion />
</div>
<Divider />
<div
style={{
display: "block",
marginLeft: "30%",
}}
>
<SliderTempRange/>
</div>
</Grid.Column>
</Grid.Row>
</Grid> </Grid>

View File

@ -3,8 +3,8 @@ import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderSimulation extends Component { export default class SliderHumidity extends Component {
state = {visible: true, duration: 50 } state = {visible: true, duration: 78 }
handleChange = (e, { name, value }) => this.setState({ [name]: value }) handleChange = (e, { name, value }) => this.setState({ [name]: value })
@ -25,16 +25,15 @@ export default class SliderSimulation extends Component {
marinLeft:"auto", marinLeft:"auto",
marginRight:"auto",}} marginRight:"auto",}}
> >
{`Degree of intensity: ${duration} `} {`Humidity: ${duration} %`}
</p> </p>
<Divider />
<Form.Input <Form.Input
min={0} min={0}
max={100} max={100}
name='duration' name='duration'
onChange={this.handleChange} onChange={this.handleChange}
step={5} step={1}
type='range' type='range'
value={duration} value={duration}
/> />

View File

@ -0,0 +1,44 @@
import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderLight extends Component {
state = {visible: true, duration: 10500 }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () =>
this.setState((prevState) => ({ visible: !prevState.visible }))
render() {
const { duration } = this.state
return (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Light intensity: ${duration} lm`}
</p>
<Form.Input
min={0}
max={15000}
name='duration'
onChange={this.handleChange}
step={5}
type='range'
value={duration}
/>
</Grid.Column>
</Grid>
)
}
}

View File

@ -0,0 +1,45 @@
import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderTempRange extends Component {
state = {visible: true, duration: 500 }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () =>
this.setState((prevState) => ({ visible: !prevState.visible }))
render() {
const { duration } = this.state
return (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Chosen tolerance: +/- ${duration}`}
</p>
<Form.Input
min={0}
max={1000}
name='duration'
onChange={this.handleChange}
step={1}
type='range'
value={duration}
/>
</Grid.Column>
</Grid>
)
}
}

View File

@ -0,0 +1,44 @@
import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderLight extends Component {
state = {visible: true, duration:5 }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () =>
this.setState((prevState) => ({ visible: !prevState.visible }))
render() {
const { duration } = this.state
return (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Range: ${duration} meters`}
</p>
<Form.Input
min={0}
max={15}
name='duration'
onChange={this.handleChange}
step={5}
type='range'
value={duration}
/>
</Grid.Column>
</Grid>
)
}
}

View File

@ -0,0 +1,45 @@
import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderTempRange extends Component {
state = {visible: true, duration: 5 }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () =>
this.setState((prevState) => ({ visible: !prevState.visible }))
render() {
const { duration } = this.state
return (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Chosen tolerance: +/- ${duration}`}
</p>
<Form.Input
min={0}
max={10}
name='duration'
onChange={this.handleChange}
step={1}
type='range'
value={duration}
/>
</Grid.Column>
</Grid>
)
}
}

View File

@ -0,0 +1,44 @@
import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
export default class SliderTemperature extends Component {
state = {visible: true, duration: 20 }
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleVisibility = () =>
this.setState((prevState) => ({ visible: !prevState.visible }))
render() {
const { duration } = this.state
return (
<Grid columns={2}>
<Grid.Column as={Form} textAlign="center">
<p
style={{
color: "white",
padding:"0.5rem",
display:"block",
marinLeft:"auto",
marginRight:"auto",}}
>
{`Heat: ${duration} Celsius Degrees`}
</p>
<Form.Input
min={10}
max={35}
name='duration'
onChange={this.handleChange}
step={1}
type='range'
value={duration}
/>
</Grid.Column>
</Grid>
)
}
}