fixed switch and warnings
This commit is contained in:
britea
parent
01dafc861c
commit
ff090ad317
15 changed files with 415 additions and 369 deletions
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script>
|
||||
window.BACKEND_URL = "__BACKEND_URL__";
|
||||
window.BACKEND_URL = "__BACKEND_URL__";
|
||||
</script>
|
||||
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
|
|
|
|||
|
|
@ -136,8 +136,8 @@ export default class DevicePanel extends Component {
|
|||
openModal: this.openModal,
|
||||
};
|
||||
|
||||
var backGroundImg =
|
||||
this.props.activeItem === -1 ? "" : this.props.room.image;
|
||||
/*var backGroundImg =
|
||||
this.props.activeItem === -1 ? "" : this.props.room.image;*/
|
||||
const ds = this.state.devices ? this.state.devices : this.props.devices;
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -7,97 +7,110 @@
|
|||
The user can change the state of a dimmer through an intuitive UI in SmartHut .
|
||||
**/
|
||||
|
||||
import React, { Component, useState } from 'react';
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
useCircularInputContext
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularThumb,
|
||||
} from "react-circular-input";
|
||||
import { ButtonDimmerContainer, MinusPanel, PlusPanel, ThumbText } from "./styleComponents";
|
||||
import {
|
||||
ButtonDimmerContainer,
|
||||
MinusPanel,
|
||||
PlusPanel,
|
||||
ThumbText,
|
||||
} from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import {
|
||||
CircularThumbStyle,
|
||||
KnobDimmerStyle,
|
||||
KnobProgress,
|
||||
ValueStyle,
|
||||
textStyle,
|
||||
knobIcon,
|
||||
knobContainer
|
||||
CircularThumbStyle,
|
||||
KnobDimmerStyle,
|
||||
KnobProgress,
|
||||
textStyle,
|
||||
knobIcon,
|
||||
knobContainer,
|
||||
} from "./DimmerStyle";
|
||||
|
||||
export class ButtonDimmer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
};
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
increaseIntensity = () => {
|
||||
console.log("Increase!")
|
||||
};
|
||||
decreaseIntensity = () => {
|
||||
console.log("Decrease!")
|
||||
};
|
||||
increaseIntensity = () => {
|
||||
console.log("Increase!");
|
||||
};
|
||||
decreaseIntensity = () => {
|
||||
console.log("Decrease!");
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
};
|
||||
componentDidMount() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ButtonDimmerContainer>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||
<span className="knob">
|
||||
{this.props.device.name}
|
||||
</span>
|
||||
<PlusPanel onClick={this.increaseIntensity}>
|
||||
<span>+</span>
|
||||
</PlusPanel>
|
||||
<MinusPanel onClick={this.decreaseIntensity}>
|
||||
<span>−</span>
|
||||
</MinusPanel>
|
||||
|
||||
</ButtonDimmerContainer>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<ButtonDimmerContainer>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
<img alt="icon" src="/img/buttonDimmer.svg" />
|
||||
<span className="knob">{this.props.device.name}</span>
|
||||
<PlusPanel onClick={this.increaseIntensity}>
|
||||
<span>+</span>
|
||||
</PlusPanel>
|
||||
<MinusPanel onClick={this.decreaseIntensity}>
|
||||
<span>−</span>
|
||||
</MinusPanel>
|
||||
</ButtonDimmerContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class KnobDimmer extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
pointingDevices: [],
|
||||
value: 1
|
||||
}
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
pointingDevices: [],
|
||||
value: 1,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {}
|
||||
|
||||
componentDidMount() {
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={knobContainer}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
<CircularInput style={KnobDimmerStyle} value={this.state.value}
|
||||
onChange={(value) => this.setState({ value: value })}>
|
||||
|
||||
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||
{this.props.device.name}
|
||||
</text>
|
||||
<CircularProgress style={{ ...KnobProgress, opacity: this.state.value + 0.1 }} />
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
<ThumbText color={"#1a2849"} />
|
||||
</CircularInput>
|
||||
<img style={knobIcon} src="/img/knobDimmer.svg" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div style={knobContainer}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
<CircularInput
|
||||
style={KnobDimmerStyle}
|
||||
value={this.state.value}
|
||||
onChange={(value) => this.setState({ value: value })}
|
||||
>
|
||||
<text
|
||||
style={textStyle}
|
||||
x={100}
|
||||
y={120}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.props.device.name}
|
||||
</text>
|
||||
<CircularProgress
|
||||
style={{ ...KnobProgress, opacity: this.state.value + 0.1 }}
|
||||
/>
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
<ThumbText color={"#1a2849"} />
|
||||
</CircularInput>
|
||||
<img alt="Knob Icon" style={knobIcon} src="/img/knobDimmer.svg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,67 @@
|
|||
import {CircularThumb} from "react-circular-input";
|
||||
import React from "react";
|
||||
|
||||
export const KnobDimmerStyle = {
|
||||
cursor: "pointer",
|
||||
marginTop : "1rem",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
fill: "#1a2849",
|
||||
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",
|
||||
}
|
||||
marginTop: "1rem",
|
||||
cursor: "pointer",
|
||||
padding: "3rem",
|
||||
backgroundColor: "white",
|
||||
width: "10rem",
|
||||
height: "10rem",
|
||||
};
|
||||
|
||||
export const KnobCircularTrack = {
|
||||
fill : "white",
|
||||
stroke :"#1a2849"
|
||||
}
|
||||
|
||||
fill: "white",
|
||||
stroke: "#1a2849",
|
||||
};
|
||||
|
||||
export const KnobIcon = {
|
||||
fill: "#1a2849"
|
||||
fill: "#1a2849",
|
||||
};
|
||||
|
||||
export const KnobProgress = {
|
||||
stroke : "#1a2849",
|
||||
strokeWidth : "3rem",
|
||||
stroke: "#1a2849",
|
||||
strokeWidth: "3rem",
|
||||
};
|
||||
|
||||
export const ValueStyle = {
|
||||
pointerEvents: 'none',
|
||||
fill: "#1a2849",
|
||||
fontSize: "1.3rem",
|
||||
fontFamily : "Lato",
|
||||
textAnchor: "middle"
|
||||
pointerEvents: "none",
|
||||
fill: "#1a2849",
|
||||
fontSize: "1.3rem",
|
||||
fontFamily: "Lato",
|
||||
textAnchor: "middle",
|
||||
};
|
||||
|
||||
export const CircularThumbStyle = {
|
||||
fill: "white",
|
||||
stroke: "#1a2849",
|
||||
strokeWidth : ".2rem",
|
||||
r: "1.4rem"
|
||||
fill: "white",
|
||||
stroke: "#1a2849",
|
||||
strokeWidth: ".2rem",
|
||||
r: "1.4rem",
|
||||
};
|
||||
|
||||
export const textStyle = {
|
||||
position: "absolute",
|
||||
fill: "#1a2849",
|
||||
fontSize: "1.5rem",
|
||||
fontFamily: "Lato",
|
||||
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",
|
||||
position: "absolute",
|
||||
left: "50%",
|
||||
top: "30%",
|
||||
transform: "translateX(-50%)",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
};
|
||||
|
||||
export const knobContainer = {
|
||||
position: "relative",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
}
|
||||
position: "relative",
|
||||
width: "9rem",
|
||||
height: "9rem",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,12 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { iconStyle, StyledDiv, BottomPanel, ThumbText } from "./styleComponents";
|
||||
import {
|
||||
iconStyle,
|
||||
StyledDiv,
|
||||
BottomPanel,
|
||||
ThumbText,
|
||||
} from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import {
|
||||
|
|
@ -24,11 +29,9 @@ import {
|
|||
nameStyle,
|
||||
KnobProgress,
|
||||
CircularThumbStyle,
|
||||
knobIcon
|
||||
knobIcon,
|
||||
} from "./LightStyle";
|
||||
import { call } from '../../../client_server';
|
||||
|
||||
|
||||
import { call } from "../../../client_server";
|
||||
|
||||
export default class Light extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -38,20 +41,29 @@ export default class Light extends Component {
|
|||
intensity: props.device.intensity,
|
||||
};
|
||||
this.iconOn = "/img/lightOn.svg";
|
||||
this.iconOff = "/img/lightOff.svg"
|
||||
this.iconOff = "/img/lightOff.svg";
|
||||
|
||||
this.stateCallback = (e) => {
|
||||
this.setState(
|
||||
Object.assign(this.state, {
|
||||
intensity: e.intensity,
|
||||
turnedOn: e.on,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
call.socketSubscribe(this.props.device.id, this.stateCallback);
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
@ -59,8 +71,6 @@ export default class Light extends Component {
|
|||
return this.iconOff;
|
||||
};
|
||||
|
||||
|
||||
|
||||
setIntensity = (newValue) => {
|
||||
this.props.device.intensity =
|
||||
Math.round(newValue * 100) <= 1 ? 1 : Math.round(newValue * 100);
|
||||
|
|
@ -74,22 +84,37 @@ export default class Light extends Component {
|
|||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const intensityLightView = (
|
||||
<div style={LightDimmerContainer}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
<CircularInput style={LightDimmerStyle}
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
<CircularInput
|
||||
style={LightDimmerStyle}
|
||||
value={+(Math.round(this.state.intensity / 100 + "e+2") + "e-2")}
|
||||
onChange={this.setIntensity}>
|
||||
<text style={textStyle} x={100} y={120} textAnchor="middle" dy="0.3em" fontWeight="bold">
|
||||
onChange={this.setIntensity}
|
||||
>
|
||||
<text
|
||||
style={textStyle}
|
||||
x={100}
|
||||
y={120}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.props.device.name}
|
||||
</text>
|
||||
<CircularProgress style={{ ...KnobProgress, opacity: this.state.intensity / 100 + 0.3 }} />
|
||||
<CircularProgress
|
||||
style={{
|
||||
...KnobProgress,
|
||||
opacity: this.state.intensity / 100 + 0.3,
|
||||
}}
|
||||
/>
|
||||
<CircularThumb style={CircularThumbStyle} />
|
||||
<ThumbText color={"#ffd31d"} />
|
||||
</CircularInput>
|
||||
|
|
@ -102,9 +127,11 @@ export default class Light extends Component {
|
|||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
<div onClick={this.props.edit.mode ? () => {
|
||||
} : this.onClickDevice}>
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
<div onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
||||
<Image src={this.getIcon()} style={iconStyle} />
|
||||
<BottomPanel style={{ backgroundColor: "#ffa41b" }}>
|
||||
<h5 style={nameStyle}>{this.props.device.name}</h5>
|
||||
|
|
@ -115,11 +142,10 @@ export default class Light extends Component {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{
|
||||
this.props.device.intensity ? (intensityLightView) : (normalLightView)
|
||||
}
|
||||
{this.props.device.kind === "dimmableLight"
|
||||
? intensityLightView
|
||||
: normalLightView}
|
||||
</div>
|
||||
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
export const valueStyle = {
|
||||
fill: "#3e99ff",
|
||||
fontSize: "2.5rem",
|
||||
|
|
@ -20,7 +19,6 @@ export const textStyle = {
|
|||
fontFamily: "Lato",
|
||||
};
|
||||
|
||||
|
||||
export const nameStyle = {
|
||||
fontSize: "1rem",
|
||||
position: "absolute",
|
||||
|
|
@ -36,19 +34,19 @@ export const LightDimmerStyle = {
|
|||
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"
|
||||
r: "1.4rem",
|
||||
};
|
||||
|
||||
export const KnobProgress = {
|
||||
|
|
|
|||
|
|
@ -11,20 +11,20 @@ import {
|
|||
} from "semantic-ui-react";
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
background-color : #505bda;
|
||||
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 .3s ease-out;
|
||||
:hover{
|
||||
background-color : #4345d9;
|
||||
transition: all 0.3s ease-out;
|
||||
:hover {
|
||||
background-color: #4345d9;
|
||||
}
|
||||
:active{
|
||||
transform : translate(0.3px, 0.8px);
|
||||
:active {
|
||||
transform: translate(0.3px, 0.8px);
|
||||
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
||||
}
|
||||
`;
|
||||
|
|
@ -148,16 +148,16 @@ export default class NewDevice extends Component {
|
|||
image: { avatar: true, src: "/img/switchOn.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/knob.svg" },
|
||||
},
|
||||
{
|
||||
key: 'buttonDimmer',
|
||||
text: 'Button Dimmer',
|
||||
value: 'buttonDimmer',
|
||||
image: { avatar: true, src: '/img/plusMinus.svg' },
|
||||
key: "buttonDimmer",
|
||||
text: "Button Dimmer",
|
||||
value: "buttonDimmer",
|
||||
image: { avatar: true, src: "/img/plusMinus.svg" },
|
||||
},
|
||||
];
|
||||
const sensorOptions = [
|
||||
|
|
@ -278,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
|
||||
: ""}
|
||||
</Form>
|
||||
|
|
@ -311,8 +311,8 @@ export default class NewDevice extends Component {
|
|||
Back
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
""
|
||||
)}
|
||||
{this.state.step < steps.length ? (
|
||||
<Button
|
||||
color="blue"
|
||||
|
|
@ -324,8 +324,8 @@ export default class NewDevice extends Component {
|
|||
<Icon name="right arrow" />
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
""
|
||||
)}
|
||||
{this.state.step === steps.length ? (
|
||||
<Button
|
||||
onClick={this.createDevice}
|
||||
|
|
@ -337,8 +337,8 @@ export default class NewDevice extends Component {
|
|||
Finish
|
||||
</Button>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
""
|
||||
)}
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -20,11 +20,7 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
CircularInput,
|
||||
CircularProgress,
|
||||
CircularTrack,
|
||||
} from "react-circular-input";
|
||||
import { CircularInput, CircularProgress } from "react-circular-input";
|
||||
import {
|
||||
container,
|
||||
sensorText,
|
||||
|
|
@ -37,13 +33,10 @@ import {
|
|||
temperatureSensorColors,
|
||||
lightSensorColors,
|
||||
humiditySensorColors,
|
||||
iconSensorStyle
|
||||
iconSensorStyle,
|
||||
} from "./SensorStyle";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { StyledDiv } from "./styleComponents";
|
||||
import { call } from "../../../client_server";
|
||||
import { nameStyle } from "./LightStyle";
|
||||
import { iconStyle } from "./styleComponents";
|
||||
import { Image } from "semantic-ui-react";
|
||||
|
||||
export default class Sensor extends Component {
|
||||
|
|
@ -81,17 +74,17 @@ export default class Sensor extends Component {
|
|||
case "TEMPERATURE":
|
||||
this.units = "ºC";
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg"
|
||||
this.icon = "temperatureIcon.svg";
|
||||
break;
|
||||
case "HUMIDITY":
|
||||
this.units = "%";
|
||||
this.colors = humiditySensorColors;
|
||||
this.icon = "humidityIcon.svg"
|
||||
this.icon = "humidityIcon.svg";
|
||||
break;
|
||||
case "LIGHT":
|
||||
this.units = "lm";
|
||||
this.colors = lightSensorColors;
|
||||
this.icon = "lightSensorIcon.svg"
|
||||
this.icon = "lightSensorIcon.svg";
|
||||
break;
|
||||
default:
|
||||
this.units = "";
|
||||
|
|
@ -115,22 +108,25 @@ export default class Sensor extends Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
|
||||
const MotionSensor = (props) => {
|
||||
return (
|
||||
<div style={{
|
||||
...motionSensorOuterCircle,
|
||||
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa"
|
||||
}}>
|
||||
<div style={{
|
||||
...motionSensorInnerCircle,
|
||||
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa"
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
...motionSensorOuterCircle,
|
||||
backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
...motionSensorInnerCircle,
|
||||
backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
|
||||
}}
|
||||
>
|
||||
<Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
|
||||
<span style={nameMotionStyle}>{this.props.device.name}</span>
|
||||
</div >
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -145,39 +141,46 @@ export default class Sensor extends Component {
|
|||
{this.state.motion ? (
|
||||
<MotionSensor />
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<CircularInput value={
|
||||
this.props.device.sensor === "LIGHT" ?
|
||||
this.state.value / 2000
|
||||
:
|
||||
this.state.value / 100} style={style}>
|
||||
<CircularProgress strokeWidth="2rem" stroke={this.colors.progress} fill={this.colors.circle} />
|
||||
<text
|
||||
style={{ ...valueStyle, fill: this.colors.text }}
|
||||
x={100}
|
||||
y={110}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
fill={this.colors.text}
|
||||
>
|
||||
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
||||
{this.units}
|
||||
</text>
|
||||
<text
|
||||
style={{ ...sensorText, fill: this.colors.text }}
|
||||
x={100}
|
||||
y={150}
|
||||
textAnchor="middle"
|
||||
dy="0.4em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.setName()}
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
<React.Fragment>
|
||||
<CircularInput
|
||||
value={
|
||||
this.props.device.sensor === "LIGHT"
|
||||
? this.state.value / 2000
|
||||
: this.state.value / 100
|
||||
}
|
||||
style={style}
|
||||
>
|
||||
<CircularProgress
|
||||
strokeWidth="2rem"
|
||||
stroke={this.colors.progress}
|
||||
fill={this.colors.circle}
|
||||
/>
|
||||
<text
|
||||
style={{ ...valueStyle, fill: this.colors.text }}
|
||||
x={100}
|
||||
y={110}
|
||||
textAnchor="middle"
|
||||
dy="0.3em"
|
||||
fontWeight="bold"
|
||||
fill={this.colors.text}
|
||||
>
|
||||
{+(Math.round(this.state.value + "e+2") + "e-2")}
|
||||
{this.units}
|
||||
</text>
|
||||
<text
|
||||
style={{ ...sensorText, fill: this.colors.text }}
|
||||
x={100}
|
||||
y={150}
|
||||
textAnchor="middle"
|
||||
dy="0.4em"
|
||||
fontWeight="bold"
|
||||
>
|
||||
{this.setName()}
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const container = {
|
|||
borderRadius: "100%",
|
||||
border: "none",
|
||||
position: "relative",
|
||||
}
|
||||
};
|
||||
|
||||
export const sensorText = {
|
||||
fill: "#3e99ff",
|
||||
|
|
@ -42,7 +42,7 @@ export const motionSensorInnerCircle = {
|
|||
height: "8rem",
|
||||
borderRadius: "100%",
|
||||
border: "none",
|
||||
}
|
||||
};
|
||||
|
||||
export const motionSensorOuterCircle = {
|
||||
textAlign: "center",
|
||||
|
|
@ -53,7 +53,7 @@ export const motionSensorOuterCircle = {
|
|||
borderRadius: "100%",
|
||||
border: "none",
|
||||
/*boxShadow: "3px 2px 10px 5px #ccc",*/
|
||||
}
|
||||
};
|
||||
|
||||
export const nameMotionStyle = {
|
||||
position: "absolute",
|
||||
|
|
@ -61,7 +61,7 @@ export const nameMotionStyle = {
|
|||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
fontSize: "1.2rem",
|
||||
}
|
||||
};
|
||||
|
||||
export const motionSensorIcon = {
|
||||
width: "2rem",
|
||||
|
|
@ -70,24 +70,24 @@ export const motionSensorIcon = {
|
|||
top: "15%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
}
|
||||
};
|
||||
export const temperatureSensorColors = {
|
||||
circle: "#323232",
|
||||
progress: "#ff1e56",
|
||||
text: "white"
|
||||
}
|
||||
text: "white",
|
||||
};
|
||||
|
||||
export const lightSensorColors = {
|
||||
circle: "#000839",
|
||||
progress: "#ffa41b",
|
||||
text: "white"
|
||||
}
|
||||
text: "white",
|
||||
};
|
||||
|
||||
export const humiditySensorColors = {
|
||||
circle: "#005082",
|
||||
progress: "#00a8cc",
|
||||
text: "white"
|
||||
}
|
||||
text: "white",
|
||||
};
|
||||
|
||||
export const iconSensorStyle = {
|
||||
position: "absolute",
|
||||
|
|
@ -96,5 +96,4 @@ export const iconSensorStyle = {
|
|||
transform: "translateX(-50%)",
|
||||
width: "2rem",
|
||||
height: "2rem",
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,14 +4,18 @@
|
|||
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 React, { Component } from "react";
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { energyConsumedStyle, imageStyle, kwhStyle, nameStyle } from "./SmartPlugStyle";
|
||||
import {
|
||||
energyConsumedStyle,
|
||||
imageStyle,
|
||||
kwhStyle,
|
||||
nameStyle,
|
||||
} from "./SmartPlugStyle";
|
||||
import { call } from "../../../client_server";
|
||||
|
||||
|
||||
export default class SmartPlug extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -62,19 +66,28 @@ export default class SmartPlug extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<StyledDiv onClick={this.props.edit.mode ? () => {
|
||||
} : this.onClickDevice}>
|
||||
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
<Image src={this.getIcon()} style={imageStyle} />
|
||||
<span style={nameStyle}>{this.props.device.name}</span>
|
||||
|
||||
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
|
||||
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span><span style={kwhStyle}>KWh</span>
|
||||
<BottomPanel
|
||||
style={
|
||||
this.state.turnedOn
|
||||
? { backgroundColor: "#505bda" }
|
||||
: { backgroundColor: "#1a2849" }
|
||||
}
|
||||
>
|
||||
<span style={energyConsumedStyle}>{this.state.energyConsumed}</span>
|
||||
<span style={kwhStyle}>KWh</span>
|
||||
</BottomPanel>
|
||||
</StyledDiv>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ export const energyConsumedStyle = {
|
|||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
||||
export const kwhStyle = {
|
||||
|
|
@ -13,8 +13,8 @@ export const kwhStyle = {
|
|||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
}
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
||||
export const imageStyle = {
|
||||
width: "2rem",
|
||||
|
|
@ -23,7 +23,7 @@ export const imageStyle = {
|
|||
top: "5%",
|
||||
left: "50%",
|
||||
transform: "translateX(-35%)",
|
||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
|
||||
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
|
||||
};
|
||||
|
||||
export const nameStyle = {
|
||||
|
|
@ -31,5 +31,5 @@ export const nameStyle = {
|
|||
position: "absolute",
|
||||
top: "30%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
* The user can change the state of a switch through the SmartHut interface.
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component } from "react";
|
||||
import { BottomPanel, StyledDiv } from "./styleComponents";
|
||||
import Settings from "./DeviceSettings";
|
||||
import { Image } from "semantic-ui-react";
|
||||
|
|
@ -17,7 +17,7 @@ export default class Switch extends Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
turnedOn: false,
|
||||
pointingLights: []
|
||||
pointingLights: [],
|
||||
};
|
||||
this.iconOn = "/img/switchOn.svg";
|
||||
this.iconOff = "/img/switchOff.svg";
|
||||
|
|
@ -57,22 +57,30 @@ export default class Switch extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<StyledDiv
|
||||
onClick={this.props.edit.mode ? () => {
|
||||
} : this.onClickDevice}>
|
||||
<StyledDiv onClick={this.props.edit.mode ? () => {} : this.onClickDevice}>
|
||||
<Settings
|
||||
deviceId={this.props.device.id}
|
||||
edit={this.props.edit}
|
||||
onChangeData={(id, newSettings) => this.props.onChangeData(id, newSettings)} />
|
||||
onChangeData={(id, newSettings) =>
|
||||
this.props.onChangeData(id, newSettings)
|
||||
}
|
||||
/>
|
||||
|
||||
<Image src={this.getIcon()} style={imageStyle} />
|
||||
<span style={nameStyle}>{this.props.device.name}</span>
|
||||
|
||||
<BottomPanel style={this.state.turnedOn ? { backgroundColor: "#505bda" } : { backgroundColor: "#1a2849" }}>
|
||||
<span style={turnedOnStyle}>{this.state.turnedOn ? "ON" : "OFF"}</span>
|
||||
<BottomPanel
|
||||
style={
|
||||
this.state.turnedOn
|
||||
? { backgroundColor: "#505bda" }
|
||||
: { backgroundColor: "#1a2849" }
|
||||
}
|
||||
>
|
||||
<span style={turnedOnStyle}>
|
||||
{this.state.turnedOn ? "ON" : "OFF"}
|
||||
</span>
|
||||
</BottomPanel>
|
||||
</StyledDiv>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,13 +15,11 @@ export const nameStyle = {
|
|||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
||||
|
||||
|
||||
export const turnedOnStyle = {
|
||||
color: "white",
|
||||
fontSize: "1.3rem",
|
||||
position: "absolute",
|
||||
top: "20%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
};
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export const editButtonStyle = {
|
|||
outline: "none",
|
||||
color: "white",
|
||||
fontFamily: "Lato",
|
||||
textTransform: "uppercase"
|
||||
textTransform: "uppercase",
|
||||
};
|
||||
|
||||
export const panelStyle = {
|
||||
|
|
@ -45,7 +45,7 @@ export const editModeIconStyle = {
|
|||
width: "0.75rem",
|
||||
height: "0.75rem",
|
||||
borderRadius: "20%",
|
||||
zIndex: "101"
|
||||
zIndex: "101",
|
||||
};
|
||||
|
||||
export const iconStyle = {
|
||||
|
|
@ -60,7 +60,7 @@ export const nameStyle = {
|
|||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)"
|
||||
transform: "translateX(-50%)",
|
||||
};
|
||||
|
||||
export const formStyle = {
|
||||
|
|
@ -83,8 +83,8 @@ export const addDeviceFormStyle = {
|
|||
|
||||
export const StyledDiv = styled.div`
|
||||
cursor: pointer;
|
||||
background-color : white;
|
||||
padding : 3rem;
|
||||
background-color: white;
|
||||
padding: 3rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 100%;
|
||||
|
|
@ -103,25 +103,25 @@ export const StyledDiv = styled.div`
|
|||
`;
|
||||
|
||||
export const ButtonDimmerContainer = styled.div`
|
||||
background-color : white;
|
||||
padding : 3rem;
|
||||
background-color: white;
|
||||
padding: 3rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius : 100%;
|
||||
border : none;
|
||||
position : relative;
|
||||
border-radius: 100%;
|
||||
border: none;
|
||||
position: relative;
|
||||
box-shadow: 3px 2px 10px 5px #ccc;
|
||||
transition : all .3s ease-out;
|
||||
text-align : center;
|
||||
transition: all 0.3s ease-out;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
.knob {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
color: #1a2849;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10rem;
|
||||
color: #1a2849;
|
||||
}
|
||||
img{
|
||||
img {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
|
|
@ -129,76 +129,75 @@ export const ButtonDimmerContainer = styled.div`
|
|||
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%);
|
||||
}
|
||||
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%);
|
||||
}
|
||||
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: 10rem;
|
||||
height: 5rem;
|
||||
border-bottom-left-radius: 10rem;
|
||||
border-bottom-right-radius: 10rem;
|
||||
span {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 45%;
|
||||
font-size: 3rem;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
bottom: 0;
|
||||
left: 0rem;
|
||||
width: 10rem;
|
||||
height: 5rem;
|
||||
border-bottom-left-radius: 10rem;
|
||||
border-bottom-right-radius: 10rem;
|
||||
span {
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 45%;
|
||||
font-size: 3rem;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
`;
|
||||
|
||||
export const ThumbText = (props) => {
|
||||
|
|
@ -209,5 +208,5 @@ export const ThumbText = (props) => {
|
|||
<text style={{ ...ValueStyle, fill: props.color }} x={x} y={y + 5}>
|
||||
{Math.round(value * 100)}
|
||||
</text>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Menu,
|
||||
Grid,
|
||||
Icon,
|
||||
Responsive,
|
||||
Segment,
|
||||
Dropdown,
|
||||
} from "semantic-ui-react";
|
||||
import { Menu, Grid, Icon, Responsive, Dropdown } from "semantic-ui-react";
|
||||
import { editButtonStyle } from "../components/dashboard/devices/styleComponents";
|
||||
import ModalWindow from "../components/modalform";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue