From 024e40decace8313b25ad68709ff302752a044a3 Mon Sep 17 00:00:00 2001 From: christiancp Date: Wed, 25 Mar 2020 12:13:15 +0100 Subject: [PATCH] Restyle some devices and creation of both dimmers (button and knob). --- smart-hut/public/img/buttonDimmer.svg | 2 + smart-hut/public/img/intensityLightIcon.svg | 2 + smart-hut/public/img/knob.svg | 1 + smart-hut/public/img/knobDimmer.svg | 2 + smart-hut/public/img/plusminus.svg | 1 + smart-hut/public/img/smart-plug-off.svg | 3 +- smart-hut/public/img/smart-plug.svg | 3 +- smart-hut/public/img/switchOff.svg | 62 ++------- smart-hut/public/img/switchOn.svg | 53 +------ .../dashboard/devices/DeviceTypeController.js | 13 +- .../components/dashboard/devices/Dimmer.js | 109 +++++++++++---- .../dashboard/devices/DimmerStyle.js | 71 ++++++++++ .../src/components/dashboard/devices/Light.js | 129 ++++++++--------- .../dashboard/devices/LightStyle.js | 45 +++++- .../components/dashboard/devices/NewDevice.js | 36 ++--- .../components/dashboard/devices/SmartPlug.js | 40 +++--- .../dashboard/devices/SmartPlugStyle.js | 27 ++-- .../components/dashboard/devices/Switch.js | 37 ++--- .../dashboard/devices/SwitchStyle.js | 7 +- .../dashboard/devices/styleComponents.js | 131 ++++++++++++++++-- 20 files changed, 501 insertions(+), 273 deletions(-) create mode 100644 smart-hut/public/img/buttonDimmer.svg create mode 100644 smart-hut/public/img/intensityLightIcon.svg create mode 100644 smart-hut/public/img/knob.svg create mode 100644 smart-hut/public/img/knobDimmer.svg create mode 100644 smart-hut/public/img/plusminus.svg create mode 100644 smart-hut/src/components/dashboard/devices/DimmerStyle.js diff --git a/smart-hut/public/img/buttonDimmer.svg b/smart-hut/public/img/buttonDimmer.svg new file mode 100644 index 0000000..11bdfbb --- /dev/null +++ b/smart-hut/public/img/buttonDimmer.svg @@ -0,0 +1,2 @@ + + diff --git a/smart-hut/public/img/intensityLightIcon.svg b/smart-hut/public/img/intensityLightIcon.svg new file mode 100644 index 0000000..4abf180 --- /dev/null +++ b/smart-hut/public/img/intensityLightIcon.svg @@ -0,0 +1,2 @@ + + diff --git a/smart-hut/public/img/knob.svg b/smart-hut/public/img/knob.svg new file mode 100644 index 0000000..d17c075 --- /dev/null +++ b/smart-hut/public/img/knob.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/knobDimmer.svg b/smart-hut/public/img/knobDimmer.svg new file mode 100644 index 0000000..fce39d6 --- /dev/null +++ b/smart-hut/public/img/knobDimmer.svg @@ -0,0 +1,2 @@ + + diff --git a/smart-hut/public/img/plusminus.svg b/smart-hut/public/img/plusminus.svg new file mode 100644 index 0000000..4b2a469 --- /dev/null +++ b/smart-hut/public/img/plusminus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/smart-hut/public/img/smart-plug-off.svg b/smart-hut/public/img/smart-plug-off.svg index 40e2e99..db55493 100644 --- a/smart-hut/public/img/smart-plug-off.svg +++ b/smart-hut/public/img/smart-plug-off.svg @@ -1 +1,2 @@ - \ No newline at end of file + + diff --git a/smart-hut/public/img/smart-plug.svg b/smart-hut/public/img/smart-plug.svg index 946abec..4273cf5 100644 --- a/smart-hut/public/img/smart-plug.svg +++ b/smart-hut/public/img/smart-plug.svg @@ -1 +1,2 @@ - \ No newline at end of file + + diff --git a/smart-hut/public/img/switchOff.svg b/smart-hut/public/img/switchOff.svg index 5978110..4f8269b 100644 --- a/smart-hut/public/img/switchOff.svg +++ b/smart-hut/public/img/switchOff.svg @@ -1,48 +1,14 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + diff --git a/smart-hut/public/img/switchOn.svg b/smart-hut/public/img/switchOn.svg index 9046281..25e4355 100644 --- a/smart-hut/public/img/switchOn.svg +++ b/smart-hut/public/img/switchOn.svg @@ -1,48 +1,5 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + diff --git a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js index c0458c4..ba446d1 100644 --- a/smart-hut/src/components/dashboard/devices/DeviceTypeController.js +++ b/smart-hut/src/components/dashboard/devices/DeviceTypeController.js @@ -2,7 +2,7 @@ import React from "react"; import Light from "./Light"; import SmartPlug from "./SmartPlug"; import Sensor from "./Sensor"; -import DefaultDimmer from "./Dimmer"; +import { ButtonDimmer, KnobDimmer } from "./Dimmer"; import Switcher from "./Switch"; const DeviceType = (props) => { @@ -36,7 +36,16 @@ const DeviceType = (props) => { ); case "buttonDimmer": return ( - + ); + case "knobDimmer": + return ( + { + console.log("Increase!") + }; + decreaseIntensity = () => { + console.log("Decrease!") + }; - render() { - return
This is a Dimmer
; - } + componentDidMount() { + }; + + render() { + return ( + + this.props.onChangeData(id, newSettings)} /> + icon + + {this.props.device.name} + + + + + + + − + + + + ) + } } -export default class DefaultDimmer extends Component { - // As far as I am concern, even though this dimmer doesn't have state, internally it's needed - constructor(props) { - super(props); - this.state = { - pointingDevices: [], - }; - } +export class KnobDimmer extends Component { + constructor(props) { + super(props); + this.state = { + pointingDevices: [], + value: 1 + } + } - componentDidMount() {} - render() { - return
This is a Dimmer
; - } + componentDidMount() { + } + + + render() { + return ( +
+ this.props.onChangeData(id, newSettings)} /> + this.setState({ value: value })}> + + + {this.props.device.name} + + + + + + +
+ ) + } } diff --git a/smart-hut/src/components/dashboard/devices/DimmerStyle.js b/smart-hut/src/components/dashboard/devices/DimmerStyle.js new file mode 100644 index 0000000..5244d17 --- /dev/null +++ b/smart-hut/src/components/dashboard/devices/DimmerStyle.js @@ -0,0 +1,71 @@ +import {CircularThumb} from "react-circular-input"; +import React from "react"; + +export const KnobDimmerStyle = { + cursor: "pointer", + marginTop : "1rem", + width: "9rem", + height: "9rem", + fill: "#1a2849", +}; + +export const KnobHolder = { + marginTop : "1rem", + cursor : "pointer", + padding : "3rem", + backgroundColor : "white", + width: "10rem", + height: "10rem", +} + +export const KnobCircularTrack = { + fill : "white", + stroke :"#1a2849" +} + + +export const KnobIcon = { + fill: "#1a2849" +}; + +export const KnobProgress = { + stroke : "#1a2849", + strokeWidth : "3rem", +}; + +export const ValueStyle = { + pointerEvents: 'none', + fill: "#1a2849", + fontSize: "1.3rem", + fontFamily : "Lato", + textAnchor: "middle" +}; + +export const CircularThumbStyle = { + fill: "white", + stroke: "#1a2849", + strokeWidth : ".2rem", + r: "1.4rem" +}; + +export const textStyle = { + position: "absolute", + fill: "#1a2849", + fontSize: "1.5rem", + fontFamily: "Lato", +}; + +export const knobIcon = { + position : "absolute", + left: "50%", + top: "30%", + transform: "translateX(-50%)", + width: "2rem", + height: "2rem", +}; + +export const knobContainer = { + position: "relative", + width: "9rem", + height: "9rem", +} diff --git a/smart-hut/src/components/dashboard/devices/Light.js b/smart-hut/src/components/dashboard/devices/Light.js index 917eba0..7ef0ad1 100644 --- a/smart-hut/src/components/dashboard/devices/Light.js +++ b/smart-hut/src/components/dashboard/devices/Light.js @@ -9,7 +9,7 @@ */ import React, { Component } from "react"; -import { iconStyle, StyledDiv } from "./styleComponents"; +import { iconStyle, StyledDiv, ThumbText } from "./styleComponents"; import Settings from "./DeviceSettings"; import { Image } from "semantic-ui-react"; import { @@ -19,10 +19,13 @@ import { CircularTrack, } from "react-circular-input"; import { - valueStyle, - intensityLightStyle, - style, + LightDimmerContainer, + LightDimmerStyle, + textStyle, nameStyle, + KnobProgress, + CircularThumbStyle, + knobIcon } from "./LightStyle"; import { call } from "../../../client_server"; @@ -31,7 +34,7 @@ export default class Light extends Component { super(props); this.state = { turnedOn: false, - intensity: 0, + intensity: props.device.intensity, }; this.iconOn = "/img/lightOn.svg"; this.iconOff = "/img/lightOff.svg"; @@ -63,6 +66,16 @@ export default class Light extends Component { }); }; + + getIcon = () => { + if (this.state.turnedOn) { + return this.iconOn; + } + return this.iconOff; + }; + + + setIntensity = (newValue) => { this.props.device.intensity = Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100); @@ -76,79 +89,51 @@ export default class Light extends Component { }); }; - getIcon = () => { - if (this.state.turnedOn) { - return this.iconOn; - } - return this.iconOff; - }; - - componentDidMount() { - if (this.props.device.hasOwnProperty("intensity")) { - this.setState({ - intensity: this.props.device.intensity, - }); - } - this.setState({ - turnedOn: this.props.device.on, - }); - // Get the state and update it - } render() { const intensityLightView = ( - - - - - - - {Math.round(this.state.intensity)}% - - - {this.props.device.name} - - - ); - - const normalLightView = ( -
{} : this.onClickDevice}> - -
{this.props.device.name}
-
- ); - - return ( - +
- this.props.onChangeData(id, newSettings) - } - /> - {this.props.device.intensity >= 0 - ? intensityLightView - : normalLightView} - + onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} /> + + + {this.props.device.name} + + + + + + +
); + + + const normalLightView = ( + +
{ + } : this.onClickDevice}> + +
{this.props.device.name}
+
+ + + ); + + return ( +
+ this.props.onChangeData(id, newSettings)} /> + { + this.props.device.intensity ? (intensityLightView) : (normalLightView) + } +
+ + ) } } diff --git a/smart-hut/src/components/dashboard/devices/LightStyle.js b/smart-hut/src/components/dashboard/devices/LightStyle.js index b68164f..7d78a46 100644 --- a/smart-hut/src/components/dashboard/devices/LightStyle.js +++ b/smart-hut/src/components/dashboard/devices/LightStyle.js @@ -13,12 +13,20 @@ export const valueStyle = { }; export const intensityLightStyle = { - fill: "#3e99ff", + fill: "#ffd31d", fontSize: "1.2rem", fontFamily: "Lato", textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)", }; +export const textStyle = { + position: "absolute", + fill: "#ffd31d", + fontSize: "1.5rem", + fontFamily: "Lato", +}; + + export const nameStyle = { fontSize: "1rem", position: "absolute", @@ -27,3 +35,38 @@ export const nameStyle = { transform: "translateX(-50%)", color: "black", }; + +export const LightDimmerStyle = { + cursor: "pointer", + marginTop: "1rem", + width: "9rem", + height: "9rem", + fill: "#ffd31d", +} + +export const LightDimmerContainer = { + position: "relative", + width: "9rem", + height: "9rem", +} + +export const CircularThumbStyle = { + fill: "white", + stroke: "#ffd31d", + strokeWidth: ".2rem", + r: "1.4rem" +}; + +export const KnobProgress = { + stroke: "#ffd31d", + strokeWidth: "3rem", +}; + +export const knobIcon = { + position: "absolute", + left: "50%", + top: "30%", + transform: "translateX(-50%)", + width: "2rem", + height: "2rem", +}; diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js index b460007..81b309d 100644 --- a/smart-hut/src/components/dashboard/devices/NewDevice.js +++ b/smart-hut/src/components/dashboard/devices/NewDevice.js @@ -11,17 +11,21 @@ import { } from "semantic-ui-react"; const StyledDiv = styled.div` - background-color: #ff4050; - padding: 3rem; + background-color : #505bda; + 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; - :hover { - background-color: #ff2436; + transition : all .3s ease-out; + :hover{ + background-color : #4345d9; + } + :active{ + transform : translate(0.3px, 0.8px); + box-shadow: 0.5px 0.5px 7px 3.5px #ccc; } `; @@ -144,10 +148,10 @@ export default class NewDevice extends Component { image: { avatar: true, src: "/img/switchOn.svg" }, }, { - key: "buttonDimmer", - text: "Button Dimmer", - value: "buttonDimmer", - image: { avatar: true, src: "/img/dimmer.svg" }, + key: 'buttonDimmer', + text: 'Button Dimmer', + value: 'buttonDimmer', + image: { avatar: true, src: '/img/plusMinus.svg' }, }, { key: "knobDimmer", @@ -274,7 +278,7 @@ export default class NewDevice extends Component { {this.state.typeOfDevice === "sensor" ? sensorForm : ""} {this.state.typeOfDevice === "switch" ? switchOptions : ""} {this.state.typeOfDevice === "buttonDimmer" || - this.state.typeOfDevice === "knobDimmer" + this.state.typeOfDevice === "knobDimmer" ? dimmerOptions : ""} @@ -307,8 +311,8 @@ export default class NewDevice extends Component { Back ) : ( - "" - )} + "" + )} {this.state.step < steps.length ? ( ) : ( - "" - )} + "" + )} {this.state.step === steps.length ? (