{
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 7d78a46..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",
@@ -30,10 +24,10 @@ export const textStyle = {
export const nameStyle = {
fontSize: "1rem",
position: "absolute",
- top: "50%",
+ top: "30%",
left: "50%",
transform: "translateX(-50%)",
- color: "black",
+ color: "white",
};
export const LightDimmerStyle = {
diff --git a/smart-hut/src/components/dashboard/devices/NewDevice.js b/smart-hut/src/components/dashboard/devices/NewDevice.js
index 81b309d..4df5900 100644
--- a/smart-hut/src/components/dashboard/devices/NewDevice.js
+++ b/smart-hut/src/components/dashboard/devices/NewDevice.js
@@ -147,18 +147,18 @@ export default class NewDevice extends Component {
value: "switch",
image: { avatar: true, src: "/img/switchOn.svg" },
},
+ {
+ key: 'knobDimmer',
+ text: 'Knob Dimmer',
+ value: 'knobDimmer',
+ image: { avatar: true, src: '/img/knob.svg' },
+ },
{
key: 'buttonDimmer',
text: 'Button Dimmer',
value: 'buttonDimmer',
image: { avatar: true, src: '/img/plusMinus.svg' },
},
- {
- key: "knobDimmer",
- text: "Knob Dimmer",
- value: "knobDimmer",
- image: { avatar: true, src: "/img/dimmer.svg" },
- },
];
const sensorOptions = [
{
diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js
index b02c072..9e7ab37 100644
--- a/smart-hut/src/components/dashboard/devices/Sensor.js
+++ b/smart-hut/src/components/dashboard/devices/Sensor.js
@@ -25,7 +25,20 @@ import {
CircularProgress,
CircularTrack,
} from "react-circular-input";
-import { sensorText, style, valueStyle } from "./SensorStyle";
+import {
+ container,
+ sensorText,
+ style,
+ valueStyle,
+ motionSensorInnerCircle,
+ motionSensorOuterCircle,
+ nameMotionStyle,
+ motionSensorIcon,
+ temperatureSensorColors,
+ lightSensorColors,
+ humiditySensorColors,
+ iconSensorStyle
+} from "./SensorStyle";
import Settings from "./DeviceSettings";
import { StyledDiv } from "./styleComponents";
import { call } from "../../../client_server";
@@ -45,8 +58,8 @@ export default class Sensor extends Component {
this.setState(Object.assign(this.state, e));
};
- this.iconOn = "/img/lightOn.svg";
- this.iconOff = "/img/lightOff.svg";
+ this.colors = temperatureSensorColors;
+ this.icon = "temperatureIcon.svg";
call.socketSubscribe(this.props.device.id, this.stateCallback);
}
@@ -67,12 +80,18 @@ export default class Sensor extends Component {
switch (this.props.device.sensor) {
case "TEMPERATURE":
this.units = "ºC";
+ this.colors = temperatureSensorColors;
+ this.icon = "temperatureIcon.svg"
break;
case "HUMIDITY":
this.units = "%";
+ this.colors = humiditySensorColors;
+ this.icon = "humidityIcon.svg"
break;
case "LIGHT":
this.units = "lm";
+ this.colors = lightSensorColors;
+ this.icon = "lightSensorIcon.svg"
break;
default:
this.units = "";
@@ -96,8 +115,26 @@ export default class Sensor extends Component {
};
render() {
+
+ const MotionSensor = (props) => {
+ return (
+
+
+
+ {this.props.device.name}
+
+
+ )
+ };
+
return (
-
+
{this.state.motion ? (
-
{} : this.onClickDevice}>
-
-
Motion Sensor
-
+
) : (
-
-
-
-
- {+(Math.round(this.state.value + "e+2") + "e-2")}
- {this.units}
-
-
- {this.setName()}
-
-
- )}
-
+
+
+
+
+ {+(Math.round(this.state.value + "e+2") + "e-2")}
+ {this.units}
+
+
+ {this.setName()}
+
+
+
+
+ )}
+
);
}
}
diff --git a/smart-hut/src/components/dashboard/devices/SensorStyle.js b/smart-hut/src/components/dashboard/devices/SensorStyle.js
index cb49676..84f8465 100644
--- a/smart-hut/src/components/dashboard/devices/SensorStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SensorStyle.js
@@ -6,18 +6,24 @@ export const style = {
left: "0",
};
+export const container = {
+ width: "10rem",
+ height: "10rem",
+ borderRadius: "100%",
+ border: "none",
+ position: "relative",
+}
+
export const sensorText = {
fill: "#3e99ff",
fontSize: "1.2rem",
fontFamily: "Lato",
- textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
export const valueStyle = {
fill: "#3e99ff",
- fontSize: "2.5rem",
+ fontSize: "2.4rem",
fontFamily: "Lato",
- textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
export const errorStyle = {
@@ -26,3 +32,69 @@ export const errorStyle = {
fontFamily: "Lato",
textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};
+
+export const motionSensorInnerCircle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "8rem",
+ height: "8rem",
+ borderRadius: "100%",
+ border: "none",
+}
+
+export const motionSensorOuterCircle = {
+ textAlign: "center",
+ cursor: "pointer",
+ position: "relative",
+ width: "10rem",
+ height: "10rem",
+ borderRadius: "100%",
+ border: "none",
+ /*boxShadow: "3px 2px 10px 5px #ccc",*/
+}
+
+export const nameMotionStyle = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ fontSize: "1.2rem",
+}
+
+export const motionSensorIcon = {
+ width: "2rem",
+ height: "2rem",
+ position: "absolute",
+ top: "15%",
+ left: "50%",
+ transform: "translateX(-50%)",
+}
+export const temperatureSensorColors = {
+ circle: "#323232",
+ progress: "#ff1e56",
+ text: "white"
+}
+
+export const lightSensorColors = {
+ circle: "#000839",
+ progress: "#ffa41b",
+ text: "white"
+}
+
+export const humiditySensorColors = {
+ circle: "#005082",
+ progress: "#00a8cc",
+ text: "white"
+}
+
+export const iconSensorStyle = {
+ position: "absolute",
+ top: "20%",
+ left: "50%",
+ transform: "translateX(-50%)",
+ width: "2rem",
+ height: "2rem",
+
+}
\ No newline at end of file
diff --git a/smart-hut/src/components/dashboard/devices/SmartPlug.js b/smart-hut/src/components/dashboard/devices/SmartPlug.js
index 9c61fa1..7b78bbc 100644
--- a/smart-hut/src/components/dashboard/devices/SmartPlug.js
+++ b/smart-hut/src/components/dashboard/devices/SmartPlug.js
@@ -4,13 +4,14 @@
The smart plug also stores the total energy consumed while the plug is active, in terms of kilowatt-hours 2(kWh) .
The user can reset this value.
**/
-import React, { Component } from "react";
-import { StyledDiv, BottomPanel } from "./styleComponents";
+import React, { Component } from 'react';
+import { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
-import { energyConsumedStyle, imageStyle, nameStyle, kwhStyle } from "./SmartPlugStyle";
+import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle";
import { call } from "../../../client_server";
+
export default class SmartPlug extends Component {
constructor(props) {
super(props);
@@ -33,6 +34,18 @@ export default class SmartPlug extends Component {
call.socketSubscribe(this.props.device.id, this.stateCallback);
}
+ componentWillUnmount() {
+ call.socketUnsubscribe(this.props.device.id, this.stateCallback);
+ }
+ onClickDevice = () => {
+ this.props.device.on = !this.state.turnedOn;
+ call.deviceUpdate(this.props.device, "smartPlug").then((res) => {
+ if (res.status === 200) {
+ this.setState((prevState) => ({ turnedOn: !prevState.turnedOn }));
+ }
+ });
+ };
+
getIcon = () => {
if (this.state.turnedOn) {
return this.iconOn;
@@ -47,12 +60,6 @@ export default class SmartPlug extends Component {
});
}
-
- componentWillUnmount() {
- call.socketUnsubscribe(this.props.device.id, this.stateCallback);
- }
-
-
render() {
return (
{
diff --git a/smart-hut/src/components/dashboard/devices/Switch.js b/smart-hut/src/components/dashboard/devices/Switch.js
index dcdcc15..e081abe 100644
--- a/smart-hut/src/components/dashboard/devices/Switch.js
+++ b/smart-hut/src/components/dashboard/devices/Switch.js
@@ -9,8 +9,7 @@ import React, { Component } from 'react';
import { BottomPanel, StyledDiv } from "./styleComponents";
import Settings from "./DeviceSettings";
import { Image } from "semantic-ui-react";
-import { imageStyle, nameStyle } from "./SwitchStyle";
-import { energyConsumedStyle } from "./SmartPlugStyle";
+import { imageStyle, nameStyle, turnedOnStyle } from "./SwitchStyle";
import { call } from "../../../client_server";
export default class Switch extends Component {
@@ -70,9 +69,10 @@ export default class Switch extends Component {
{this.props.device.name}
- {this.state.turnedOn ? "ON" : "OFF"}
+ {this.state.turnedOn ? "ON" : "OFF"}
- );
+ )
}
+
}
diff --git a/smart-hut/src/components/dashboard/devices/SwitchStyle.js b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
index af46778..e5c213d 100644
--- a/smart-hut/src/components/dashboard/devices/SwitchStyle.js
+++ b/smart-hut/src/components/dashboard/devices/SwitchStyle.js
@@ -14,3 +14,14 @@ export const nameStyle = {
left: "50%",
transform: "translateX(-50%)",
};
+
+
+
+export const turnedOnStyle = {
+ color: "white",
+ fontSize: "1.3rem",
+ position: "absolute",
+ top: "20%",
+ left: "50%",
+ transform: "translateX(-50%)"
+};
\ No newline at end of file
diff --git a/smart-hut/src/components/dashboard/devices/styleComponents.js b/smart-hut/src/components/dashboard/devices/styleComponents.js
index 1f5b0b9..485b91b 100644
--- a/smart-hut/src/components/dashboard/devices/styleComponents.js
+++ b/smart-hut/src/components/dashboard/devices/styleComponents.js
@@ -49,13 +49,12 @@ export const editModeIconStyle = {
};
export const iconStyle = {
- width: "4rem",
+ width: "3.5rem",
height: "auto",
position: "absolute",
- top: "20%",
+ top: "10%",
left: "50%",
transform: "translateX(-50%)",
- filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
};
export const nameStyle = {
position: "absolute",