smarthut/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added smooth temperature gradient

Browse source
This commit is contained in:
Claudio Maggioni 2020-05-08 15:37:01 +02:00
parent 38425b8d68
commit e5426fa790
2 changed files with 188 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

381
smart-hut/src/components/dashboard/devices/Sensor.js
View file

@ -22,18 +22,18 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { CircularInput, CircularProgress } from "react-circular-input"; import { CircularInput, CircularProgress } from "react-circular-input";
import { import {
container, container,
sensorText, sensorText,
style, style,
valueStyle, valueStyle,
motionSensorInnerCircle, motionSensorInnerCircle,
motionSensorOuterCircle, motionSensorOuterCircle,
nameMotionStyle, nameMotionStyle,
motionSensorIcon, motionSensorIcon,
temperatureSensorColors, temperatureSensorColors,
lightSensorColors, lightSensorColors,
humiditySensorColors, humiditySensorColors,
iconSensorStyle, iconSensorStyle,
} from "./SensorStyle"; } from "./SensorStyle";
import { Image } from "semantic-ui-react"; import { Image } from "semantic-ui-react";
import { RemoteService } from "../../../remote"; import { RemoteService } from "../../../remote";
@ -41,197 +41,180 @@ import { connect } from "react-redux";
import mapStateToProps from "../../../deviceProps"; import mapStateToProps from "../../../deviceProps";
class Sensor extends Component { class Sensor extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
value: 0, value: 0,
motion: false, motion: false,
}; };
this.units = ""; this.units = "";
this.stateCallback = (e) => { this.stateCallback = (e) => {
this.setState(Object.assign(this.state, 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;
}; };
temperatureColor = (value) => { this.colors = temperatureSensorColors;
let hue = 100; this.icon = "temperatureIcon.svg";
if (value >= 20 && value < 30) { this.name = "Sensor";
hue = 50; }
} else if (value >= 30) {
hue = 0; // setName = () => {
} // if (this.props.device.name.length > 15) {
return `hsl(${hue}, 100%, 50%)`; // 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() { return (
const MotionSensor = (props) => { <div style={container}>
return ( {this.state.motion ? (
<div <MotionSensor />
style={{ ) : (
...motionSensorOuterCircle, <React.Fragment>
backgroundColor: this.state.detected <CircularInput
? "#505bda" value={
: "#00bdaa", this.props.stateOrDevice.sensor === "LIGHT"
}} ? this.state.value / 2000
> : this.state.value / 100
<div }
style={{ style={style}
...motionSensorInnerCircle, >
backgroundColor: this.state.detected <CircularProgress
? "#fe346e" strokeWidth="2rem"
: "#00bdaa", stroke={
}} this.props.stateOrDevice.sensor === "TEMPERATURE"
> ? this.temperatureColor(this.state.value)
<Image : this.colors.progress
style={motionSensorIcon} }
src="/img/motionSensorIcon.svg" fill={this.colors.circle}
/> />
<span style={nameMotionStyle}>Motion Sensor</span> <text
</div> style={{
</div> ...valueStyle,
); fill: this.colors.text,
}; }}
x={100}
return ( y={110}
<div style={container}> textAnchor="middle"
{this.state.motion ? ( dy="0.3em"
<MotionSensor /> fontWeight="bold"
) : ( fill={this.colors.text}
<React.Fragment> >
<CircularInput {+(Math.round(this.state.value + "e+2") + "e-2")}
value={ {this.units}
this.props.stateOrDevice.sensor === "LIGHT" </text>
? this.state.value / 2000 <text
: this.state.value / 100 style={{
} ...sensorText,
style={style} fill: this.colors.text,
> }}
<CircularProgress x={100}
strokeWidth="2rem" y={150}
stroke={ textAnchor="middle"
this.props.stateOrDevice.sensor === dy="0.4em"
"TEMPERATURE" fontWeight="bold"
? this.temperatureColor( >
this.state.value {this.name}
) </text>
: this.colors.progress </CircularInput>
} <Image style={iconSensorStyle} src={`/img/${this.icon}`} />
fill={this.colors.circle} </React.Fragment>
/> )}
<text </div>
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); const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor);

24
smart-hut/src/views/Dashboard.js
View file

@ -8,10 +8,7 @@ import ScenesNavbar from "./ScenesNavbar";
import HostsNavbar from "./HostsNavbar"; import HostsNavbar from "./HostsNavbar";
import MyHeader from "../components/HeaderController"; import MyHeader from "../components/HeaderController";
import { Grid, Responsive, Button, Menu } from "semantic-ui-react"; import { Grid, Responsive, Button, Menu } from "semantic-ui-react";
import { import { mobilePanelStyle } from "../components/dashboard/devices/styleComponents";
panelStyle,
mobilePanelStyle,
} from "../components/dashboard/devices/styleComponents";
import { RemoteService } from "../remote"; import { RemoteService } from "../remote";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -85,7 +82,7 @@ class Dashboard extends Component {
//in case a room has one. //in case a room has one.
let backgroundImageHelper; let backgroundImageHelper;
if (this.activeTab === "Devices") { if (this.activeTab === "Devices") {
backgroundImageHelper = this.props.allRooms; backgroundImageHelper = this.props.backgroundImage;
} else { } else {
backgroundImageHelper = null; backgroundImageHelper = null;
} }
@ -223,20 +220,11 @@ const mapStateToProps = (state, _) => ({
get currentRoom() { get currentRoom() {
return state.active.activeRoom; return state.active.activeRoom;
}, },
//this took me way longer to figure out than it should have get backgroundImage() {
get allRooms() { if (state.active.activeRoom === -1) {
if (state.active.activeRoom == -1) {
return null; return null;
} } else {
for (let i in state.rooms) { return state.rooms[state.active.activeRoom].image;
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;
}
}
} }
}, },
}); });