From 63d90639839fc44080b1a0b2a4477c0f93b7494a Mon Sep 17 00:00:00 2001 From: Fil Cesana Date: Sat, 18 Apr 2020 17:40:05 +0200 Subject: [PATCH] first version of the videocamera, temporarily under the device light.js, for testing --- smart-hut/package.json | 1 + smart-hut/src/App.js | 4 + smart-hut/src/components/VideoTest.js | 13 + .../src/components/dashboard/devices/Light.js | 117 ++------- .../components/dashboard/devices/Videocm.js | 149 +++++++++++ .../dashboard/devices/VideocmModal.js | 89 +++++++ .../dashboard/devices/VideocmStyle.js | 232 ++++++++++++++++++ smart-hut/src/views/Videocam.js | 13 + smart-hut/yarn.lock | 21 +- 9 files changed, 548 insertions(+), 91 deletions(-) create mode 100644 smart-hut/src/components/VideoTest.js create mode 100644 smart-hut/src/components/dashboard/devices/Videocm.js create mode 100644 smart-hut/src/components/dashboard/devices/VideocmModal.js create mode 100644 smart-hut/src/components/dashboard/devices/VideocmStyle.js create mode 100644 smart-hut/src/views/Videocam.js diff --git a/smart-hut/package.json b/smart-hut/package.json index a73a712..74f3aa1 100644 --- a/smart-hut/package.json +++ b/smart-hut/package.json @@ -19,6 +19,7 @@ "react-circular-slider-svg": "^0.1.5", "react-device-detect": "^1.11.14", "react-dom": "^16.12.0", + "react-modal": "2.2.2", "react-redux": "^7.2.0", "react-round-slider": "^1.0.1", "react-router": "^5.1.2", diff --git a/smart-hut/src/App.js b/smart-hut/src/App.js index d847bd3..1365896 100644 --- a/smart-hut/src/App.js +++ b/smart-hut/src/App.js @@ -11,6 +11,7 @@ import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword"; import ConfirmRegistration from "./views/ConfirmRegistration"; import ConfirmResetPassword from "./views/ConfirmResetPassword"; import Instruction from "./views/Instruction"; +import Videocam from "./views/Videocam"; import queryString from "query-string"; import { RemoteService } from "./remote"; import { connect } from "react-redux"; @@ -66,6 +67,9 @@ class App extends Component { + + + diff --git a/smart-hut/src/components/VideoTest.js b/smart-hut/src/components/VideoTest.js new file mode 100644 index 0000000..7d90251 --- /dev/null +++ b/smart-hut/src/components/VideoTest.js @@ -0,0 +1,13 @@ +import React, { Component } from "react"; +import DevicePanel from "./dashboard/DevicePanel"; + + +export default class VideoTest extends React.Component { + render() { + return ( +
+ +
+ ); + } +} \ No newline at end of file diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 9143ec3..f8797c6 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -10,29 +10,14 @@ import React, { Component } from "react"; import { - iconStyle, - StyledDiv, - BottomPanel, - ThumbText, -} from "./styleComponents"; -import { Image } from "semantic-ui-react"; -import { - CircularInput, - CircularProgress, - CircularThumb, -} from "react-circular-input"; -import { - LightDimmerContainer, - LightDimmerStyle, - textStyle, - nameStyle, - KnobProgress, - CircularThumbStyle, - knobIcon, -} from "./LightStyle"; + StyledDiv,hAbRNe +} from "./VideocmStyle"; +import { Checkbox, Embed } from "semantic-ui-react"; + import { RemoteService } from "../../../remote"; import { connect } from "react-redux"; + class Light extends Component { constructor(props) { super(props); @@ -40,18 +25,13 @@ class Light extends Component { this.iconOn = "/img/lightOn.svg"; this.iconOff = "/img/lightOff.svg"; - - this.setIntensity = this.setIntensity.bind(this); } get turnedOn() { return this.props.device.on; } - get intensity() { - return this.props.device.intensity || 0; - } - + onClickDevice = () => { const on = !this.turnedOn; this.props @@ -63,79 +43,36 @@ class Light extends Component { return this.turnedOn ? this.iconOn : this.iconOff; }; - setIntensity(intensity) { - intensity *= 100; - - if (this.state.timeout) { - clearTimeout(this.state.timeout); - } - - this.setState({ - intensity, - timeout: setTimeout(() => { - this.saveIntensity(); - this.setState({ - intensity: this.state.intensity, - timeout: null, - }); - }, 100), - }); - } - - saveIntensity = () => { - const intensity = Math.round(this.state.intensity); - this.props - .saveDevice({ ...this.props.device, intensity }) - .catch((err) => console.error("intensity light update error", err)); - }; render() { - const intensityLightView = ( -
- - - Intensity light - - - - - - -
- ); const normalLightView = ( - -
- - -
Light
- -
- +
+ +
+ +
+ + +
); return (
{this.props.device.kind === "dimmableLight" - ? intensityLightView + ? console.log('err') : normalLightView}
); diff --git a/smart-hut/src/components/dashboard/devices/Videocm.js b/smart-hut/src/components/dashboard/devices/Videocm.js new file mode 100644 index 0000000..8943098 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/Videocm.js @@ -0,0 +1,149 @@ +// vim: set ts=2 sw=2 et tw=80: + +/** + * Users can add lights in their rooms. + * Lights are devices like bulbs, LED strip lights, lamps. + * Lights may support an intensity level (from 0% to 100%). + * Lights have an internal state that can be changed and it must + * be shown accordingly in the SmartHut views (house view and room views). + */ + +import React, { Component } from "react"; +import { + iconStyle, + StyledDiv, + BottomPanel, + ThumbText, +} from "./styleComponents"; +import { Image } from "semantic-ui-react"; +import { + CircularInput, + CircularProgress, + CircularThumb, +} from "react-circular-input"; +import { + LightDimmerContainer, + LightDimmerStyle, + textStyle, + nameStyle, + KnobProgress, + CircularThumbStyle, + knobIcon, +} from "./LightStyle"; +import { RemoteService } from "../../../remote"; +import { connect } from "react-redux"; + +class Videocm extends Component { + constructor(props) { + super(props); + this.state = { intensity: this.props.device.intensity, timeout: null }; + + this.iconOn = "/img/lightOn.svg"; + this.iconOff = "/img/lightOff.svg"; + + this.setIntensity = this.setIntensity.bind(this); + } + + get turnedOn() { + return this.props.device.on; + } + + get intensity() { + return this.props.device.intensity || 0; + } + + onClickDevice = () => { + const on = !this.turnedOn; + this.props + .saveDevice({ ...this.props.device, on }) + .catch((err) => console.error("regular light update error", err)); + }; + + getIcon = () => { + return this.turnedOn ? this.iconOn : this.iconOff; + }; + + setIntensity(intensity) { + intensity *= 100; + + if (this.state.timeout) { + clearTimeout(this.state.timeout); + } + + this.setState({ + intensity, + timeout: setTimeout(() => { + this.saveIntensity(); + this.setState({ + intensity: this.state.intensity, + timeout: null, + }); + }, 100), + }); + } + + saveIntensity = () => { + const intensity = Math.round(this.state.intensity); + this.props + .saveDevice({ ...this.props.device, intensity }) + .catch((err) => console.error("intensity light update error", err)); + }; + + render() { + const intensityLightView = ( +
+ + + Intensity light + + + + + + +
+ ); + + const normalLightView = ( + +
+ + +
Light
+ +
+ + ); + + return ( +
+ {this.props.device.kind === "dimmableLight" + ? intensityLightView + : normalLightView} +
+ ); + } +} + +const mapStateToProps = (state, ownProps) => ({ + device: state.devices[ownProps.id], +}); +const LightContainer = connect(mapStateToProps, RemoteService)(Videocm); +export default LightContainer; diff --git a/smart-hut/src/components/dashboard/devices/VideocmModal.js b/smart-hut/src/components/dashboard/devices/VideocmModal.js new file mode 100644 index 0000000..7889d43 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/VideocmModal.js @@ -0,0 +1,89 @@ +// vim: set ts=2 sw=2 et tw=80: + +/** + * Users can add lights in their rooms. + * Lights are devices like bulbs, LED strip lights, lamps. + * Lights may support an intensity level (from 0% to 100%). + * Lights have an internal state that can be changed and it must + * be shown accordingly in the SmartHut views (house view and room views). + */ + +import React, { Component } from "react"; +import { + StyledDiv,hAbRNe +} from "./VideocmStyle"; +import Modal from "react-modal"; +import { Checkbox, Embed } from "semantic-ui-react"; + +import { RemoteService } from "../../../remote"; +import { connect } from "react-redux"; + + +class Light extends Component { + constructor(props) { + super(props); + this.state = { intensity: this.props.device.intensity, timeout: null }; + + this.iconOn = "/img/lightOn.svg"; + this.iconOff = "/img/lightOff.svg"; + } + + get turnedOn() { + return this.props.device.on; + } + + + onClickDevice = () => { + const on = !this.turnedOn; + this.props + .saveDevice({ ...this.props.device, on }) + .catch((err) => console.error("regular light update error", err)); + }; + + getIcon = () => { + return this.turnedOn ? this.iconOn : this.iconOff; + }; + + + render() { + + const normalLightView = ( +
+ + +
+ +
+ + +
+ ); + + return ( +
+ {this.props.device.kind === "dimmableLight" + ? console.log('err') + : normalLightView} +
+ ); + } +} + +const mapStateToProps = (state, ownProps) => ({ + device: state.devices[ownProps.id], +}); +const LightContainer = connect(mapStateToProps, RemoteService)(Light); +export default LightContainer; diff --git a/smart-hut/src/components/dashboard/devices/VideocmStyle.js b/smart-hut/src/components/dashboard/devices/VideocmStyle.js new file mode 100644 index 0000000..1e06a63 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/VideocmStyle.js @@ -0,0 +1,232 @@ +import styled from "styled-components"; +import { useCircularInputContext } from "react-circular-input"; +import { ValueStyle } from "./DimmerStyle"; +import React from "react"; + +export const editButtonStyle = { + position: "absolute", + top: "0", + right: "0", + backgroundColor: "#505bda", + borderRadius: "0 0 0 20px", + border: "none", + padding: ".4rem 1.2rem", + outline: "none", + color: "white", + fontFamily: "Lato", + textTransform: "uppercase", +}; + +export const panelStyle = { + position: "relative", + backgroundColor: "#fafafa", + height: "100vh", + width: "auto", + padding: "0rem 3rem", +}; + +export const editModeStyle = { + position: "absolute", + top: "15%", + right: "0", + width: "1.5rem", + height: "1.5rem", + backgroundColor: "black", + borderRadius: "100%", + zIndex: "1000", + cursor: "pointer", +}; + +export const editModeStyleLeft = { + position: "absolute", + top: "15%", + left: "0", + width: "1.5rem", + height: "1.5rem", + backgroundColor: "white", + borderRadius: "100%", + zIndex: "1000", + cursor: "pointer", +}; + +export const editModeIconStyle = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "0.75rem", + height: "0.75rem", + borderRadius: "20%", + zIndex: "101", +}; + +export const iconStyle = { + width: "3.5rem", + height: "auto", + position: "absolute", + top: "10%", + left: "50%", + transform: "translateX(-50%)", +}; +export const nameStyle = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translateX(-50%)", +}; + +export const formStyle = { + position: "absolute", + zIndex: "1000", + width: "80rem", + height: "10rem", + padding: "1rem", + margin: "1rem", + borderRadius: "10%", + boxShadow: "1px 1px 5px 2px #5d5d5d", + backgroundColor: "#3e99ff", +}; + +export const addDeviceFormStyle = { + maxWidth: "400px", + background: "#3e99ff", + paddingRight: "5rem", +}; + +export const StyledDiv = styled.div` + cursor: pointer; + background-color: white; + padding: 0.5rem; + margin-bottom: 0.5rem; + border: none; + position: relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition: all 0.3s ease-out; + text-align: center; + :hover { + background-color: #f2f2f2; + } + :active { + transform: translate(0.3px, 0.8px); + box-shadow: 0.5px 0.5px 7px 3.5px #ccc; + } +`; + +export const ButtonDimmerContainer = styled.div` + background-color: white; + padding: 3rem; + width: 10rem; + height: 10rem; + border-radius: 100%; + border: none; + position: relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition: all 0.3s ease-out; + text-align: center; + display: inline-block; + .knob { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 10rem; + color: #1a2849; + } + img { + position: absolute; + top: 10%; + left: 50%; + transform: translateX(-50%); + width: 1.5rem; + height: 1.5rem; + } +`; + +export const PlusPanel = styled.div` + position: absolute; + cursor: pointer; + bottom: 0; + left: 5rem; + background-color: #1a2849; + width: 5rem; + height: 5rem; + border-radius: 0 0 5rem 0; + :hover { + background-color: #505bda; + } + :active { + transform: translate(0.3px, 0.8px); + } + span { + color: white; + position: absolute; + top: 40%; + left: 45%; + font-size: 3rem; + transform: translate(-50%, -50%); + } +`; + +export const MinusPanel = styled.div` + cursor: pointer; + position: absolute; + bottom: 0; + left: 0; + background-color: #1a2849; + width: 5rem; + height: 5rem; + border-radius: 0 0 0 5rem; + :hover { + background-color: #505bda; + } + :active { + transform: translate(0.3px, 0.8px); + } + span { + color: white; + position: absolute; + top: 40%; + left: 45%; + font-size: 3rem; + transform: translate(-50%, -50%); + } +`; + +export const BottomPanel = styled.div` + position: absolute; + cursor: pointer; + bottom: 0; + left: 0rem; + width: 20rem; + height: 10rem; + span { + color: white; + position: absolute; + top: 40%; + left: 45%; + font-size: 3rem; + transform: translate(-50%, -50%); + } +`; + + +export const hAbRNe = styled.div` + cursor: pointer; + padding: 1rem; + border: none; + position: relative; + box-shadow: 3px 2px 10px 5px #ccc; + transition: all 0.3s ease-out; + text-align: center; + } +`; + +export const ThumbText = (props) => { + const { getPointFromValue, value } = useCircularInputContext(); + const { x, y } = getPointFromValue(); + + return ( + + {Math.round(value * 100)} + + ); +}; diff --git a/smart-hut/src/views/Videocam.js b/smart-hut/src/views/Videocam.js new file mode 100644 index 0000000..63fb009 --- /dev/null +++ b/smart-hut/src/views/Videocam.js @@ -0,0 +1,13 @@ +import _ from "lodash"; +import React from "react"; +import VideoTest from "../components/VideoTest"; + +export default class TestHeaderController extends React.Component { + render() { + return ( +
+ ; +
+ ) + } +} \ No newline at end of file diff --git a/smart-hut/yarn.lock b/smart-hut/yarn.lock index 4ade4c1..17e0c1b 100644 --- a/smart-hut/yarn.lock +++ b/smart-hut/yarn.lock @@ -4243,6 +4243,11 @@ execa@^1.0.0: signal-exit "^3.0.0" strip-eof "^1.0.0" +exenv@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89" + integrity sha1-ODXxJ6vwdb/ggtCu1EhAV8eOPIk= + exenv@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" @@ -8518,7 +8523,7 @@ prop-types@15.6.2: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8736,6 +8741,11 @@ react-device-detect@^1.11.14: dependencies: ua-parser-js "^0.7.20" +react-dom-factories@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0" + integrity sha1-63cFxNs2+1AbOqOP91lhaqD/luA= + react-dom@^16.12.0: version "16.12.0" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11" @@ -8766,6 +8776,15 @@ react-is@^16.9.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== +react-modal@2.2.2: + version "2.2.2" + resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.2.tgz#4bbf98bc506e61c446c9f57329c7a488ea7d504b" + integrity sha512-tdgyEyfbyfzDUj40XtWldAQe7e+yhJDUtVSlsQ9AQCGifzWck6v1XTtIVGViVftOsEA3cBWCZCjF3rq6FPJzMg== + dependencies: + exenv "1.2.0" + prop-types "^15.5.10" + react-dom-factories "^1.0.0" + react-popper@^1.3.4: version "1.3.7" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"