diff --git a/smart-hut/public/img/humidity-simulation.png b/smart-hut/public/img/humidity-simulation.png new file mode 100644 index 0000000..fc2e758 Binary files /dev/null and b/smart-hut/public/img/humidity-simulation.png differ diff --git a/smart-hut/public/img/motion-simulation.png b/smart-hut/public/img/motion-simulation.png new file mode 100644 index 0000000..5f0dcb3 Binary files /dev/null and b/smart-hut/public/img/motion-simulation.png differ diff --git a/smart-hut/public/img/thermo-simulation.png b/smart-hut/public/img/thermo-simulation.png new file mode 100644 index 0000000..08d9bb6 Binary files /dev/null and b/smart-hut/public/img/thermo-simulation.png differ diff --git a/smart-hut/src/components/SimulationPanel.js b/smart-hut/src/components/SimulationPanel.js index 63862c6..38f506e 100644 --- a/smart-hut/src/components/SimulationPanel.js +++ b/smart-hut/src/components/SimulationPanel.js @@ -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) => ( - {/* NORMAL LIGHT */} + {/* TEMPERATURE SENSOR */} +

- Normal Light + Temperature Sensor

+
+ - -

- ON / OFF -

-
- - - - - -
-
- - {/* INTENSITY LIGHT */} - - - -

- Intensity Light -

-
- -
( marginLeft: "30%", }} > - + +
+ +
+
-
+ - {/* SECURITY CAMERA */} - - - -

- Security Camera -

-
- - - -

- Select the rooms in which you want camera ON -

-
+ {/* HUMIDTY SENSOR */} + + + + +

+ Humidity Sensor +

- - - - -
-
+
+ + + + +
+ +
+ +
+ +
+
+
+ + {/* LIGHT SENSOR */} + + + + +

+ Light Sensor +

+ +
+ + + + +
+ +
+ +
+ +
+
+
+ + {/* MOTION SENSOR */} + + + + +

+ Motion Sensor +

+ +
+ + + + +
+ +
+ +
+ +
+
+
diff --git a/smart-hut/src/components/SliderSimulation.js b/smart-hut/src/components/SliderHumidity.js similarity index 82% rename from smart-hut/src/components/SliderSimulation.js rename to smart-hut/src/components/SliderHumidity.js index 2dc438d..030273f 100644 --- a/smart-hut/src/components/SliderSimulation.js +++ b/smart-hut/src/components/SliderHumidity.js @@ -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} %`}

- diff --git a/smart-hut/src/components/SliderLight.js b/smart-hut/src/components/SliderLight.js new file mode 100644 index 0000000..03b2d18 --- /dev/null +++ b/smart-hut/src/components/SliderLight.js @@ -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 ( + + +

+ {`Light intensity: ${duration} lm`} +

+ + +
+
+ ) + } +} \ No newline at end of file diff --git a/smart-hut/src/components/SliderLightRange.js b/smart-hut/src/components/SliderLightRange.js new file mode 100644 index 0000000..2615922 --- /dev/null +++ b/smart-hut/src/components/SliderLightRange.js @@ -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 ( + + +

+ {`Chosen tolerance: +/- ${duration}`} +

+ + + +
+
+ ) + } +} \ No newline at end of file diff --git a/smart-hut/src/components/SliderMotion.js b/smart-hut/src/components/SliderMotion.js new file mode 100644 index 0000000..1468c56 --- /dev/null +++ b/smart-hut/src/components/SliderMotion.js @@ -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 ( + + +

+ {`Range: ${duration} meters`} +

+ + +
+
+ ) + } +} \ No newline at end of file diff --git a/smart-hut/src/components/SliderTempRange.js b/smart-hut/src/components/SliderTempRange.js new file mode 100644 index 0000000..54720c3 --- /dev/null +++ b/smart-hut/src/components/SliderTempRange.js @@ -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 ( + + +

+ {`Chosen tolerance: +/- ${duration}`} +

+ + + +
+
+ ) + } +} \ No newline at end of file diff --git a/smart-hut/src/components/SliderTemperature.js b/smart-hut/src/components/SliderTemperature.js new file mode 100644 index 0000000..bcf606b --- /dev/null +++ b/smart-hut/src/components/SliderTemperature.js @@ -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 ( + + +

+ {`Heat: ${duration} Celsius Degrees`} +

+ + +
+
+ ) + } +} \ No newline at end of file