smarthut
/
frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
smart-hut/public/img/humidity-simulation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
smart-hut/public/img/motion-simulation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
smart-hut/public/img/thermo-simulation.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

275
smart-hut/src/components/SimulationPanel.js
View File

@ -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>

9
smart-hut/src/components/SliderSimulation.js → smart-hut/src/components/SliderHumidity.js
View File

@ -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
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>
)
}
}

45
smart-hut/src/components/SliderLightRange.js Normal file
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>
)
}
}

44
smart-hut/src/components/SliderMotion.js Normal file
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>
)
}
}

45
smart-hut/src/components/SliderTempRange.js Normal file
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>
)
}
}

44
smart-hut/src/components/SliderTemperature.js Normal file
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>
)
}
}