Added smooth temperature gradient

smart-hut/src/components/dashboard/devices/Sensor.js

@@ -72,8 +72,7 @@ class Sensor extends Component {
       this.setState({ value: this.props.stateOrDevice.value });
     } else if (
       this.props.stateOrDevice.kind === "motionSensor" &&
-            this.props.stateOrDevice.detected !==
-                prevProps.stateOrDevice.detected
+      this.props.stateOrDevice.detected !== prevProps.stateOrDevice.detected
     ) {
       this.setState({
         motion: true,
@@ -126,9 +125,11 @@ class Sensor extends Component {
 
   temperatureColor = (value) => {
     let hue = 100;
-        if (value >= 20 && value < 30) {
-            hue = 50;
-        } else if (value >= 30) {
+    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%)`;
@@ -140,23 +141,16 @@ class Sensor extends Component {
         <div
           style={{
             ...motionSensorOuterCircle,
-                        backgroundColor: this.state.detected
-                            ? "#505bda"
-                            : "#00bdaa",
+            backgroundColor: this.state.detected ? "#505bda" : "#00bdaa",
           }}
         >
           <div
             style={{
               ...motionSensorInnerCircle,
-                            backgroundColor: this.state.detected
-                                ? "#fe346e"
-                                : "#00bdaa",
+              backgroundColor: this.state.detected ? "#fe346e" : "#00bdaa",
             }}
           >
-                        <Image
-                            style={motionSensorIcon}
-                            src="/img/motionSensorIcon.svg"
-                        />
+            <Image style={motionSensorIcon} src="/img/motionSensorIcon.svg" />
             <span style={nameMotionStyle}>Motion Sensor</span>
           </div>
         </div>
@@ -180,11 +174,8 @@ class Sensor extends Component {
               <CircularProgress
                 strokeWidth="2rem"
                 stroke={
-                                    this.props.stateOrDevice.sensor ===
-                                    "TEMPERATURE"
-                                        ? this.temperatureColor(
-                                              this.state.value
-                                          )
+                  this.props.stateOrDevice.sensor === "TEMPERATURE"
+                    ? this.temperatureColor(this.state.value)
                     : this.colors.progress
                 }
                 fill={this.colors.circle}
@@ -201,12 +192,7 @@ class Sensor extends Component {
                 fontWeight="bold"
                 fill={this.colors.text}
               >
-                                {
-                                    +(
-                                        Math.round(this.state.value + "e+2") +
-                                        "e-2"
-                                    )
-                                }
+                {+(Math.round(this.state.value + "e+2") + "e-2")}
                 {this.units}
               </text>
               <text
@@ -223,10 +209,7 @@ class Sensor extends Component {
                 {this.name}
               </text>
             </CircularInput>
-                        <Image
-                            style={iconSensorStyle}
-                            src={`/img/${this.icon}`}
-                        />
+            <Image style={iconSensorStyle} src={`/img/${this.icon}`} />
           </React.Fragment>
         )}
       </div>

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) {
-      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) {
+  get backgroundImage() {
+    if (state.active.activeRoom === -1) {
       return null;
     } else {
-          return state.rooms[i].image;
-        }
-      }
+      return state.rooms[state.active.activeRoom].image;
     }
   },
 });