simulation panel is finished.
This commit is contained in:
parent
06c7c07cf3
commit
31c98fac49
10 changed files with 405 additions and 101 deletions
BIN
smart-hut/public/img/humidity-simulation.png
Normal file
BIN
smart-hut/public/img/humidity-simulation.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 18 KiB |
BIN
smart-hut/public/img/motion-simulation.png
Normal file
BIN
smart-hut/public/img/motion-simulation.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
BIN
smart-hut/public/img/thermo-simulation.png
Normal file
BIN
smart-hut/public/img/thermo-simulation.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
|
@ -1,6 +1,11 @@
|
|||
import React from "react";
|
||||
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 {
|
||||
Grid,
|
||||
|
@ -58,76 +63,35 @@ const SimulationPanel = (props) => (
|
|||
</h1>
|
||||
</Grid.Row>
|
||||
|
||||
{/* NORMAL LIGHT */}
|
||||
{/* TEMPERATURE SENSOR */}
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
style={{
|
||||
marginTop: "3rem",
|
||||
marginBottom: "auto"
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src='./../img/light-simulation.png'
|
||||
src='./../img/thermo-simulation.png'
|
||||
style={{
|
||||
width: "50px",
|
||||
width: "60px",
|
||||
height: "auto",
|
||||
display:"block",
|
||||
marginLeft:"auto",
|
||||
marginRight:"auto",
|
||||
marginTop: "1rem",
|
||||
marginBottom: "1rem"
|
||||
}}
|
||||
/>
|
||||
<p style={{ color: "white", padding:"0.5rem"}}>
|
||||
Normal Light
|
||||
Temperature Sensor
|
||||
</p>
|
||||
<Divider />
|
||||
</Grid.Column>
|
||||
|
||||
|
||||
<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
|
||||
style={{
|
||||
|
@ -135,50 +99,169 @@ const SimulationPanel = (props) => (
|
|||
marginLeft: "30%",
|
||||
}}
|
||||
>
|
||||
<SliderSimulation />
|
||||
<SliderTemperature />
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
style={{
|
||||
display: "block",
|
||||
marginLeft: "30%",
|
||||
}}
|
||||
>
|
||||
<SliderTempRange/>
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid.Row>
|
||||
|
||||
{/* SECURITY CAMERA */}
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Image
|
||||
src='./../img/camera-icon-simulation.png'
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "auto",
|
||||
display:"block",
|
||||
marginLeft:"auto",
|
||||
marginRight:"auto",
|
||||
}}
|
||||
/>
|
||||
<p style={{ color: "white", padding:"0.5rem"}}>
|
||||
Security Camera
|
||||
</p>
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column width={10} textAlign="center">
|
||||
<Grid.Row >
|
||||
<p
|
||||
style={{
|
||||
color: "white",
|
||||
padding:"0.5rem",
|
||||
display:"block",
|
||||
marinLeft:"auto",
|
||||
marginRight:"auto",
|
||||
}}
|
||||
>
|
||||
Select the rooms in which you want camera ON
|
||||
</p>
|
||||
</Grid.Row>
|
||||
{/* HUMIDTY SENSOR */}
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Divider
|
||||
style={{
|
||||
marginTop: "3rem",
|
||||
marginBottom: "auto"
|
||||
}}
|
||||
/>
|
||||
<Image
|
||||
src='./../img/humidity-simulation.png'
|
||||
style={{
|
||||
width: "60px",
|
||||
height: "auto",
|
||||
display:"block",
|
||||
marginLeft:"auto",
|
||||
marginRight:"auto",
|
||||
marginTop: "1rem",
|
||||
marginBottom: "1rem"
|
||||
}}
|
||||
/>
|
||||
<p style={{ color: "white", padding:"0.5rem"}}>
|
||||
Humidity Sensor
|
||||
</p>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<DropdownSimulation />
|
||||
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
|
||||
|
||||
<Grid.Column width={10} textAlign="center">
|
||||
|
||||
<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>
|
||||
|
|
|
@ -3,8 +3,8 @@ import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
|
|||
|
||||
|
||||
|
||||
export default class SliderSimulation extends Component {
|
||||
state = {visible: true, duration: 50 }
|
||||
export default class SliderHumidity extends Component {
|
||||
state = {visible: true, duration: 78 }
|
||||
|
||||
handleChange = (e, { name, value }) => this.setState({ [name]: value })
|
||||
|
||||
|
@ -25,16 +25,15 @@ export default class SliderSimulation extends Component {
|
|||
marinLeft:"auto",
|
||||
marginRight:"auto",}}
|
||||
>
|
||||
{`Degree of intensity: ${duration} `}
|
||||
{`Humidity: ${duration} %`}
|
||||
</p>
|
||||
<Divider />
|
||||
|
||||
<Form.Input
|
||||
min={0}
|
||||
max={100}
|
||||
name='duration'
|
||||
onChange={this.handleChange}
|
||||
step={5}
|
||||
step={1}
|
||||
type='range'
|
||||
value={duration}
|
||||
/>
|
44
smart-hut/src/components/SliderLight.js
Normal file
44
smart-hut/src/components/SliderLight.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
45
smart-hut/src/components/SliderLightRange.js
Normal file
45
smart-hut/src/components/SliderLightRange.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
44
smart-hut/src/components/SliderMotion.js
Normal file
44
smart-hut/src/components/SliderMotion.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
45
smart-hut/src/components/SliderTempRange.js
Normal file
45
smart-hut/src/components/SliderTempRange.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
44
smart-hut/src/components/SliderTemperature.js
Normal file
44
smart-hut/src/components/SliderTemperature.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue