a first version of the simulation panel, I still need to fix some binors bugs, and to add the other devices. Also, in the ehader controller, I converted the toggle into a chebox, because otherwise it was bugging with tthe modal in a very weird way
This commit is contained in:
Fil Cesana
parent
c837a8156c
commit
06c7c07cf3
10 changed files with 316 additions and 60 deletions
90
smart-hut/package-lock.json
generated
90
smart-hut/package-lock.json
generated
|
|
@ -4,6 +4,11 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@ant-design/css-animation": {
|
||||
"version": "1.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/css-animation/-/css-animation-1.7.2.tgz",
|
||||
"integrity": "sha512-bvVOe7A+r7lws58B7r+fgnQDK90cV45AXuvGx6i5CCSX1W/M3AJnHsNggDANBxEtWdNdFWcDd5LorB+RdSIlBw=="
|
||||
},
|
||||
"@babel/code-frame": {
|
||||
"version": "7.8.3",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
|
||||
|
|
@ -1993,6 +1998,14 @@
|
|||
"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
|
||||
"integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA=="
|
||||
},
|
||||
"add-dom-event-listener": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz",
|
||||
"integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==",
|
||||
"requires": {
|
||||
"object-assign": "4.x"
|
||||
}
|
||||
},
|
||||
"address": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
|
||||
|
|
@ -4244,6 +4257,11 @@
|
|||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"dom-align": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.11.1.tgz",
|
||||
"integrity": "sha512-hN42DmUgtweBx0iBjDLO4WtKOMcK8yBmPx/fgdsgQadLuzPu/8co3oLdK5yMmeM/vnUd3yDyV6qV8/NzxBexQg=="
|
||||
},
|
||||
"dom-converter": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
|
||||
|
|
@ -10731,6 +10749,73 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"rc-align": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/rc-align/-/rc-align-3.0.0.tgz",
|
||||
"integrity": "sha512-/T/4LOlKJLFe8EwsORuc3pFWOJ8caUpj2vtKIHWea4PhakoleM7KDQsx0n1WDQENIeSfrP9P1FowVxAdvhjsvw==",
|
||||
"requires": {
|
||||
"classnames": "2.x",
|
||||
"dom-align": "^1.7.0",
|
||||
"rc-util": "^4.12.0",
|
||||
"resize-observer-polyfill": "^1.5.1"
|
||||
}
|
||||
},
|
||||
"rc-animate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-3.0.0.tgz",
|
||||
"integrity": "sha512-+ANeyCei4lWSJHWTcocywdYAy6lpRdBva/7Fs3nBBiAngW/W+Gmx+gQEcsmcgQBqziWUYnR91Bk12ltR3GBHPA==",
|
||||
"requires": {
|
||||
"@ant-design/css-animation": "^1.7.2",
|
||||
"classnames": "^2.2.6",
|
||||
"raf": "^3.4.0",
|
||||
"rc-util": "^4.15.3"
|
||||
}
|
||||
},
|
||||
"rc-slider": {
|
||||
"version": "9.2.4",
|
||||
"resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.2.4.tgz",
|
||||
"integrity": "sha512-wSr7vz+WtzzGqsGU2rTQ4mmLz9fkuIDMPYMYm8ygYFvxQ2Rh4uRhOWHYI0R8krNK5k1bGycckYxmQqUIvLAh3w==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.x",
|
||||
"classnames": "^2.2.5",
|
||||
"rc-tooltip": "^4.0.0",
|
||||
"rc-util": "^4.0.4",
|
||||
"shallowequal": "^1.1.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"rc-tooltip": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-4.0.3.tgz",
|
||||
"integrity": "sha512-HNyBh9/fPdds0DXja8JQX0XTIHmZapB3lLzbdn74aNSxXG1KUkt+GK4X1aOTRY5X9mqm4uUKdeFrn7j273H8gw==",
|
||||
"requires": {
|
||||
"rc-trigger": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"rc-trigger": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-4.1.0.tgz",
|
||||
"integrity": "sha512-EyQjO6aHDAPRvJeyPmg/yVL/8Bp7oA6Lf+4Ay2OyOwhZLzHHN8m+F2XrVWKpjg04eBXbuGBNiucIqv1d/ddE3w==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.6",
|
||||
"raf": "^3.4.1",
|
||||
"rc-align": "^3.0.0-rc.0",
|
||||
"rc-animate": "^3.0.0",
|
||||
"rc-util": "^4.20.0"
|
||||
}
|
||||
},
|
||||
"rc-util": {
|
||||
"version": "4.20.5",
|
||||
"resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.20.5.tgz",
|
||||
"integrity": "sha512-f67s4Dt1quBYhrVPq5QMKmK3eS2hN1NNIAyhaiG0HmvqiGYAXMQ7SP2AlGqv750vnzhJs38JklbkWT1/wjhFPg==",
|
||||
"requires": {
|
||||
"add-dom-event-listener": "^1.1.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"react-is": "^16.12.0",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"shallowequal": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react": {
|
||||
"version": "16.12.0",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz",
|
||||
|
|
@ -10958,6 +11043,11 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
|
||||
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
|
||||
},
|
||||
"react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-modal": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.2.2.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"classnames": "^2.2.6",
|
||||
"immutability-helper": "^3.0.2",
|
||||
"material-ui-image": "^3.2.3",
|
||||
"rc-slider": "^9.2.4",
|
||||
"react": "^16.12.0",
|
||||
"react-axios": "^2.0.3",
|
||||
"react-circular-input": "^0.1.6",
|
||||
|
|
|
|||
BIN
smart-hut/public/img/camera-icon-simulation.png
Normal file
BIN
smart-hut/public/img/camera-icon-simulation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
smart-hut/public/img/insensity-light-simulation.png
Normal file
BIN
smart-hut/public/img/insensity-light-simulation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
smart-hut/public/img/intensity-icon-simulation-2.png
Normal file
BIN
smart-hut/public/img/intensity-icon-simulation-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
BIN
smart-hut/public/img/light-simulation.png
Normal file
BIN
smart-hut/public/img/light-simulation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
15
smart-hut/src/components/DropdownSimulation.js
Normal file
15
smart-hut/src/components/DropdownSimulation.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react'
|
||||
import { Dropdown } from 'semantic-ui-react'
|
||||
|
||||
const options = [
|
||||
{ key: 'Living Room', text: 'Living Room', value: 'Living Room' },
|
||||
{ key: 'Kitchen', text: 'Kitchen', value: 'Kitchen' },
|
||||
{ key: 'Garden', text: 'Garden', value: 'Garden' },
|
||||
{ key: 'Bedroom 1', text: 'Bedroom 1', value: 'Bedroom 1' },
|
||||
]
|
||||
|
||||
const DropdownSimulation = () => (
|
||||
<Dropdown placeholder='Skills' fluid multiple selection options={options} />
|
||||
)
|
||||
|
||||
export default DropdownSimulation
|
||||
|
|
@ -103,6 +103,7 @@ export class MyHeader extends React.Component {
|
|||
<Button basic inverted onClick={this.logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Divider />
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
|
|
@ -114,7 +115,6 @@ export class MyHeader extends React.Component {
|
|||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Segment>
|
||||
|
|
@ -131,28 +131,43 @@ export class MyHeader extends React.Component {
|
|||
</Grid.Row>
|
||||
<Grid.Row color="black" textAlign="center">
|
||||
<Grid.Column>
|
||||
<IconHomeImage />
|
||||
<Grid.Row>
|
||||
<IconHomeImage />
|
||||
</Grid.Row>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<div onClick={this.openSimulationPanel}>
|
||||
<Button > Similuation Panel </Button>
|
||||
</div>
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
<Divider />
|
||||
<Grid.Column>
|
||||
<Grid.Row>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.props.username}
|
||||
</Label>
|
||||
</Grid.Row>
|
||||
<Grid.Column width={4} heigth={1}>
|
||||
<Label as="a" image color="black">
|
||||
<img alt="SmartHut logo" src="smart-home.png" />
|
||||
{this.props.username}
|
||||
</Label>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<Button onClick={this.logout}>Logout</Button>
|
||||
</Grid.Row>
|
||||
<Button basic inverted onClick={this.logout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<Segment
|
||||
compact
|
||||
style={{
|
||||
margin: "auto",
|
||||
marginTop: "1em",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
label={<label>Share cameras</label>}
|
||||
checked={this.props.cameraEnabled}
|
||||
toggle
|
||||
onChange={(e, val) => this.setCameraEnabled(val.checked)}
|
||||
/>
|
||||
</Grid.Row>
|
||||
</Segment>
|
||||
</Grid.Column>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import React from "react";
|
||||
import Modal from "react-modal";
|
||||
import SliderSimulation from "./SliderSimulation.js";
|
||||
import DropdownSimulation from "./DropdownSimulation.js";
|
||||
import {
|
||||
Grid,
|
||||
Divider,
|
||||
|
|
@ -8,29 +10,11 @@ import {
|
|||
Responsive,
|
||||
Checkbox,
|
||||
Image,
|
||||
GridColumn,
|
||||
Header,
|
||||
Segment
|
||||
} from "semantic-ui-react";
|
||||
|
||||
// const ReactModalPortal = {
|
||||
// opacity: 0
|
||||
// };
|
||||
|
||||
// const ReactModal__Overlay = {
|
||||
// background: 'black',
|
||||
// alignItems: 'center',
|
||||
// display: 'flex',
|
||||
// justifyContent: 'center',
|
||||
// transition: 'opacity 200ms ease-in-out'
|
||||
// };
|
||||
|
||||
|
||||
// const modal = {
|
||||
// background: 'grey',
|
||||
// color: 'white',
|
||||
// maxWidth: '2rem',
|
||||
// outline: 'none',
|
||||
// padding: '2rem',
|
||||
// textAlign: 'center'
|
||||
// };
|
||||
|
||||
const SimulationPanel = (props) => (
|
||||
<Modal
|
||||
|
|
@ -60,38 +44,144 @@ const SimulationPanel = (props) => (
|
|||
borderRadius: '4px',
|
||||
outline: 'none',
|
||||
padding: '20px',
|
||||
backgroundColor: 'black'
|
||||
backgroundColor: 'rgb(65, 67, 69)'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{props.simulationPanel}
|
||||
<Responsive minWidth={768}>
|
||||
<Grid columns={3} divided inverted padded>
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid celled>
|
||||
|
||||
<Grid.Row>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
<Grid.Column>
|
||||
<Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
|
||||
</Grid.Column>
|
||||
{/* TITLE */}
|
||||
<Grid.Row textAlign="center">
|
||||
<h1 style={{ color: "white", padding:"1rem", fontFamily: "Arial"}}>
|
||||
Welcome in the Simulation Panel
|
||||
</h1>
|
||||
</Grid.Row>
|
||||
|
||||
{/* NORMAL LIGHT */}
|
||||
<Grid.Row>
|
||||
<Grid.Column width={6} textAlign="center">
|
||||
<Image
|
||||
src='./../img/light-simulation.png'
|
||||
style={{
|
||||
width: "50px",
|
||||
height: "auto",
|
||||
display:"block",
|
||||
marginLeft:"auto",
|
||||
marginRight:"auto",
|
||||
}}
|
||||
/>
|
||||
<p style={{ color: "white", padding:"0.5rem"}}>
|
||||
Normal Light
|
||||
</p>
|
||||
</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={{
|
||||
display: "block",
|
||||
marginLeft: "30%",
|
||||
}}
|
||||
>
|
||||
<SliderSimulation />
|
||||
</div>
|
||||
</Grid.Column>
|
||||
</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>
|
||||
<Divider />
|
||||
<Grid.Row>
|
||||
<DropdownSimulation />
|
||||
|
||||
</Grid.Row>
|
||||
</Grid.Column>
|
||||
</Grid.Row>
|
||||
|
||||
|
||||
</Grid>
|
||||
</Responsive>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
|
|
|
|||
45
smart-hut/src/components/SliderSimulation.js
Normal file
45
smart-hut/src/components/SliderSimulation.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 SliderSimulation extends Component {
|
||||
state = {visible: true, duration: 50 }
|
||||
|
||||
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",}}
|
||||
>
|
||||
{`Degree of intensity: ${duration} `}
|
||||
</p>
|
||||
<Divider />
|
||||
|
||||
<Form.Input
|
||||
min={0}
|
||||
max={100}
|
||||
name='duration'
|
||||
onChange={this.handleChange}
|
||||
step={5}
|
||||
type='range'
|
||||
value={duration}
|
||||
/>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue