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 2020-05-09 17:46:57 +02:00
parent c837a8156c
commit 06c7c07cf3
10 changed files with 316 additions and 60 deletions

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View 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

View file

@ -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>
@ -130,29 +130,44 @@ export class MyHeader extends React.Component {
</Segment>
</Grid.Row>
<Grid.Row color="black" textAlign="center">
<Grid.Column>
<IconHomeImage />
</Grid.Column>
<Grid.Column>
<Grid.Row>
<Label as="a" image color="black">
<img alt="SmartHut logo" src="smart-home.png" />
{this.props.username}
</Label>
<IconHomeImage />
</Grid.Row>
<Divider />
<Grid.Row>
<Button onClick={this.logout}>Logout</Button>
</Grid.Row>
<div onClick={this.openSimulationPanel}>
<Button > Similuation Panel </Button>
</div>
</Grid.Row>
</Grid.Column>
<Divider />
<Grid.Column>
<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 basic inverted onClick={this.logout}>
Logout
</Button>
<Divider />
<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>

View file

@ -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,
@ -7,30 +9,12 @@ import {
Label,
Responsive,
Checkbox,
Image,
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>
);

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