This is a Dimmer
;
- }
+ componentDidMount() {
+ };
+
+ render() {
+ return (
+ 
+
+ {this.props.device.name}
+
+ 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..0433016 100644
--- a/smart-hut/src/components/dashboard/devices/Light.js
+++ b/smart-hut/src/components/dashboard/devices/Light.js
@@ -9,60 +9,58 @@
*/
import React, { Component } from "react";
-import { iconStyle, StyledDiv } from "./styleComponents";
+import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
import {
CircularInput,
CircularProgress,
CircularThumb,
- CircularTrack,
} from "react-circular-input";
import {
- valueStyle,
- intensityLightStyle,
- style,
+ LightDimmerContainer,
+ LightDimmerStyle,
+ textStyle,
nameStyle,
+ KnobProgress,
+ CircularThumbStyle,
+ knobIcon
} from "./LightStyle";
-import { call } from "../../../client_server";
+import { call } from '../../../client_server';
+
+
export default class Light extends Component {
constructor(props) {
super(props);
this.state = {
turnedOn: false,
- intensity: 0,
+ intensity: props.device.intensity,
};
this.iconOn = "/img/lightOn.svg";
- this.iconOff = "/img/lightOff.svg";
-
- this.stateCallback = (e) => {
- const update = {};
- if (e.kind === "dimmableLight") {
- update.intensity = e.intensity;
- } else {
- update.turnedOn = e.on;
- }
-
- this.setState(Object.assign(this.state, update));
- };
-
- call.socketSubscribe(this.props.device.id, this.stateCallback);
- }
-
- componentWillUnmount() {
- call.socketUnsubscribe(this.props.device.id, this.stateCallback);
+ this.iconOff = "/img/lightOff.svg"
}
onClickDevice = () => {
this.props.device.on = !this.state.turnedOn;
- call.deviceUpdate(this.props.device, "regularLight").then((res) => {
- if (res.status === 200) {
- this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
- }
- });
+ call.deviceUpdate(this.props.device, 'regularLight')
+ .then(res => {
+ if (res.status === 200) {
+ this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
+ }
+ })
};
+
+ 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 +74,52 @@ 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 = (
-
+ {} : this.onClickDevice}>
-
- this.props.onChangeData(id, newSettings)
- }
- />
- {this.props.device.intensity >= 0
- ? intensityLightView
- : normalLightView}
+ onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
+
);
+
+ return (
+
{this.props.device.name}
+
+ this.props.onChangeData(id, newSettings)} />
+
+
+ {this.props.device.name}
+
+
+
);
- return (
+ const normalLightView = (
{
+ } : this.onClickDevice}>
+
+
+
{this.props.device.name}
+
+ {
+ 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..6273125 100644
--- a/smart-hut/src/components/dashboard/devices/LightStyle.js
+++ b/smart-hut/src/components/dashboard/devices/LightStyle.js
@@ -1,10 +1,4 @@
-export const style = {
- width: "10rem",
- height: "10rem",
- position: "absolute",
- top: "0",
- left: "0",
-};
+
export const valueStyle = {
fill: "#3e99ff",
fontSize: "2.5rem",
@@ -13,17 +7,60 @@ 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",
- top: "50%",
+ top: "30%",
left: "50%",
transform: "translateX(-50%)",
- color: "black",
+ color: "white",
+};
+
+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..4df5900 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,16 +148,16 @@ 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: 'knobDimmer',
+ text: 'Knob Dimmer',
+ value: 'knobDimmer',
+ image: { avatar: true, src: '/img/knob.svg' },
},
{
- key: "knobDimmer",
- text: "Knob Dimmer",
- value: "knobDimmer",
- image: { avatar: true, src: "/img/dimmer.svg" },
+ key: 'buttonDimmer',
+ text: 'Button Dimmer',
+ value: 'buttonDimmer',
+ image: { avatar: true, src: '/img/plusMinus.svg' },
},
];
const sensorOptions = [
@@ -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 ? (