Added smooth temperature gradient
This commit is contained in:
parent
38425b8d68
commit
e5426fa790
2 changed files with 188 additions and 217 deletions
|
|
@ -22,18 +22,18 @@
|
|||
import React, { Component } from "react";
|
||||
import { CircularInput, CircularProgress } from "react-circular-input";
|
||||
import {
|
||||
container,
|
||||
sensorText,
|
||||
style,
|
||||
valueStyle,
|
||||
motionSensorInnerCircle,
|
||||
motionSensorOuterCircle,
|
||||
nameMotionStyle,
|
||||
motionSensorIcon,
|
||||
temperatureSensorColors,
|
||||
lightSensorColors,
|
||||
humiditySensorColors,
|
||||
iconSensorStyle,
|
||||
container,
|
||||
sensorText,
|
||||
style,
|
||||
valueStyle,
|
||||
motionSensorInnerCircle,
|
||||
motionSensorOuterCircle,
|
||||
nameMotionStyle,
|
||||
motionSensorIcon,
|
||||
temperatureSensorColors,
|
||||
lightSensorColors,
|
||||
humiditySensorColors,
|
||||
iconSensorStyle,
|
||||
} from "./SensorStyle";
|
||||
import { Image } from "semantic-ui-react";
|
||||
import { RemoteService } from "../../../remote";
|
||||
|
|
@ -41,197 +41,180 @@ import { connect } from "react-redux";
|
|||
import mapStateToProps from "../../../deviceProps";
|
||||
|
||||
class Sensor extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 0,
|
||||
motion: false,
|
||||
};
|
||||
this.units = "";
|
||||
this.stateCallback = (e) => {
|
||||
this.setState(Object.assign(this.state, e));
|
||||
};
|
||||
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Sensor";
|
||||
}
|
||||
|
||||
// setName = () => {
|
||||
// if (this.props.device.name.length > 15) {
|
||||
// return this.props.device.name.slice(0, 12) + "...";
|
||||
// }
|
||||
// return this.props.device.name;
|
||||
// };
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
this.props.stateOrDevice.kind === "sensor" &&
|
||||
this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
|
||||
) {
|
||||
this.setState({ value: this.props.stateOrDevice.value });
|
||||
} else if (
|
||||
this.props.stateOrDevice.kind === "motionSensor" &&
|
||||
this.props.stateOrDevice.detected !==
|
||||
prevProps.stateOrDevice.detected
|
||||
) {
|
||||
this.setState({
|
||||
motion: true,
|
||||
detected: this.props.stateOrDevice.detected,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.stateOrDevice.kind === "sensor") {
|
||||
switch (this.props.stateOrDevice.sensor) {
|
||||
case "TEMPERATURE":
|
||||
this.units = "ºC";
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Temperature Sensor";
|
||||
break;
|
||||
case "HUMIDITY":
|
||||
this.units = "%";
|
||||
this.colors = humiditySensorColors;
|
||||
this.icon = "humidityIcon.svg";
|
||||
this.name = "Humidity Sensor";
|
||||
break;
|
||||
case "LIGHT":
|
||||
this.units = "lm";
|
||||
this.colors = lightSensorColors;
|
||||
this.icon = "lightSensorIcon.svg";
|
||||
this.name = "Light Sensor";
|
||||
break;
|
||||
default:
|
||||
this.units = "";
|
||||
}
|
||||
this.setState({
|
||||
value: this.props.stateOrDevice.value,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
detected: this.props.stateOrDevice.detected,
|
||||
motion: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getIcon = () => {
|
||||
if (this.state.detected) {
|
||||
return this.iconOn;
|
||||
}
|
||||
return this.iconOff;
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: 0,
|
||||
motion: false,
|
||||
};
|
||||
this.units = "";
|
||||
this.stateCallback = (e) => {
|
||||
this.setState(Object.assign(this.state, e));
|
||||
};
|
||||
|
||||
temperatureColor = (value) => {
|
||||
let hue = 100;
|
||||
if (value >= 20 && value < 30) {
|
||||
hue = 50;
|
||||
} else if (value >= 30) {
|
||||
hue = 0;
|
||||
}
|
||||
return `hsl(${hue}, 100%, 50%)`;
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Sensor";
|
||||
}
|
||||
|
||||
// setName = () => {
|
||||
// if (this.props.device.name.length > 15) {
|
||||
// return this.props.device.name.slice(0, 12) + "...";
|
||||
// }
|
||||
// return this.props.device.name;
|
||||
// };
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
this.props.stateOrDevice.kind === "sensor" &&
|
||||
this.props.stateOrDevice.value !== prevProps.stateOrDevice.value
|
||||
) {
|
||||
this.setState({ value: this.props.stateOrDevice.value });
|
||||
} else if (
|
||||
this.props.stateOrDevice.kind === "motionSensor" &&
|
||||
this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
|
||||
) {
|
||||
this.setState({
|
||||
motion: true,
|
||||
detected: this.props.stateOrDevice.detected,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.stateOrDevice.kind === "sensor") {
|
||||
switch (this.props.stateOrDevice.sensor) {
|
||||
case "TEMPERATURE":
|
||||
this.units = "ºC";
|
||||
this.colors = temperatureSensorColors;
|
||||
this.icon = "temperatureIcon.svg";
|
||||
this.name = "Temperature Sensor";
|
||||
break;
|
||||
case "HUMIDITY":
|
||||
this.units = "%";
|
||||
this.colors = humiditySensorColors;
|
||||
this.icon = "humidityIcon.svg";
|
||||
this.name = "Humidity Sensor";
|
||||
break;
|
||||
case "LIGHT":
|
||||
this.units = "lm";
|
||||
this.colors = lightSensorColors;
|
||||
this.icon = "lightSensorIcon.svg";
|
||||
this.name = "Light Sensor";
|
||||
break;
|
||||
default:
|
||||
this.units = "";
|
||||
}
|
||||
this.setState({
|
||||
value: this.props.stateOrDevice.value,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
detected: this.props.stateOrDevice.detected,
|
||||
motion: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getIcon = () => {
|
||||
if (this.state.detected) {
|
||||
return this.iconOn;
|
||||
}
|
||||
return this.iconOff;
|
||||
};
|
||||
|
||||
temperatureColor = (value) => {
|
||||
let hue = 100;
|
||||
const min = 16;
|
||||
const max = 20;
|
||||
if (value >= min && value < max) {
|
||||
hue = 100 - ((value - min) * 100) / (max - min);
|
||||
} else if (value >= max) {
|
||||
hue = 0;
|
||||
}
|
||||
return `hsl(${hue}, 100%, 50%)`;
|
||||
};
|
||||
|
||||
render() {
|
||||
const MotionSensor = (props) => {
|
||||
return (
|
||||
<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}>Motion Sensor</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const MotionSensor = (props) => {
|
||||
return (
|
||||
<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}>Motion Sensor</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={container}>
|
||||
{this.state.motion ? (
|
||||
<MotionSensor />
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<CircularInput
|
||||
value={
|
||||
this.props.stateOrDevice.sensor === "LIGHT"
|
||||
? this.state.value / 2000
|
||||
: this.state.value / 100
|
||||
}
|
||||
style={style}
|
||||
>
|
||||
<CircularProgress
|
||||
strokeWidth="2rem"
|
||||
stroke={
|
||||
this.props.stateOrDevice.sensor ===
|
||||
"TEMPERATURE"
|
||||
? this.temperatureColor(
|
||||
this.state.value
|
||||
)
|
||||
: 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.name}
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image
|
||||
style={iconSensorStyle}
|
||||
src={`/img/${this.icon}`}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div style={container}>
|
||||
{this.state.motion ? (
|
||||
<MotionSensor />
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<CircularInput
|
||||
value={
|
||||
this.props.stateOrDevice.sensor === "LIGHT"
|
||||
? this.state.value / 2000
|
||||
: this.state.value / 100
|
||||
}
|
||||
style={style}
|
||||
>
|
||||
<CircularProgress
|
||||
strokeWidth="2rem"
|
||||
stroke={
|
||||
this.props.stateOrDevice.sensor === "TEMPERATURE"
|
||||
? this.temperatureColor(this.state.value)
|
||||
: 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.name}
|
||||
</text>
|
||||
</CircularInput>
|
||||
<Image style={iconSensorStyle} src={`/img/${this.icon}`} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);
|
||||
|
|
|
|||
|
|
@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
|
|||
import HostsNavbar from "./HostsNavbar";
|
||||
import MyHeader from "../components/HeaderController";
|
||||
import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
|
||||
import {
|
||||
panelStyle,
|
||||
mobilePanelStyle,
|
||||
} from "../components/dashboard/devices/styleComponents";
|
||||
import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
|
||||
|
||||
import { RemoteService } from "../remote";
|
||||
import { connect } from "react-redux";
|
||||
|
|
@ -85,7 +82,7 @@ class Dashboard extends Component {
|
|||
//in case a room has one.
|
||||
let backgroundImageHelper;
|
||||
if (this.activeTab === "Devices") {
|
||||
backgroundImageHelper = this.props.allRooms;
|
||||
backgroundImageHelper = this.props.backgroundImage;
|
||||
} else {
|
||||
backgroundImageHelper = null;
|
||||
}
|
||||
|
|
@ -223,20 +220,11 @@ const mapStateToProps = (state, _) => ({
|
|||
get currentRoom() {
|
||||
return state.active.activeRoom;
|
||||
},
|
||||
//this took me way longer to figure out than it should have
|
||||
get allRooms() {
|
||||
if (state.active.activeRoom == -1) {
|
||||
get backgroundImage() {
|
||||
if (state.active.activeRoom === -1) {
|
||||
return null;
|
||||
}
|
||||
for (let i in state.rooms) {
|
||||
if (i == state.active.activeRoom) {
|
||||
//console.log("check",state.rooms[i].image)
|
||||
if (state.rooms[i].image === undefined) {
|
||||
return null;
|
||||
} else {
|
||||
return state.rooms[i].image;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return state.rooms[state.active.activeRoom].image;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue