From e5426fa790dab6cecdb35054fbbb17f774a4d1b9 Mon Sep 17 00:00:00 2001 From: Claudio Maggioni Date: Fri, 8 May 2020 15:37:01 +0200 Subject: [PATCH] Added smooth temperature gradient --- .../components/dashboard/devices/Sensor.js | 381 +++++++++--------- smart-hut/src/views/Dashboard.js | 24 +- 2 files changed, 188 insertions(+), 217 deletions(-) diff --git a/smart-hut/src/components/dashboard/devices/Sensor.js b/smart-hut/src/components/dashboard/devices/Sensor.js index 07cb440..4206d8c 100644 --- a/smart-hut/src/components/dashboard/devices/Sensor.js +++ b/smart-hut/src/components/dashboard/devices/Sensor.js @@ -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 ( +
+
+ + Motion Sensor +
+
+ ); }; - render() { - const MotionSensor = (props) => { - return ( -
-
- - Motion Sensor -
-
- ); - }; - - return ( -
- {this.state.motion ? ( - - ) : ( - - - - - { - +( - Math.round(this.state.value + "e+2") + - "e-2" - ) - } - {this.units} - - - {this.name} - - - - - )} -
- ); - } + return ( +
+ {this.state.motion ? ( + + ) : ( + + + + + {+(Math.round(this.state.value + "e+2") + "e-2")} + {this.units} + + + {this.name} + + + + + )} +
+ ); + } } const SensorContainer = connect(mapStateToProps, RemoteService)(Sensor); diff --git a/smart-hut/src/views/Dashboard.js b/smart-hut/src/views/Dashboard.js index 4501a8e..cac1298 100644 --- a/smart-hut/src/views/Dashboard.js +++ b/smart-hut/src/views/Dashboard.js @@ -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; } }, });