+
- 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 ? (