yauyenching / thermostat-radial-slider

Custom UI React.js component of a smart thermostat user interface with radial slider and transitioning colors to indicate state changes.

Thermostat Radial Slider

This is a custom UI component for a skeuomorphic smart thermostat user interface to control heating and cooling. The simplified behavior is as follows:

Target Temperature: T_t, Current Temperature: T_c

Temperatures	Thermostat Behavior	Thermostat Face Color
Tt > Tc	Heating	Red
Tt < Tc	Cooling	Blue

The user sets the target temperature by either dragging the slider thumb on radial slider interface or by scrolling the mouse wheel. There is a debugging slider for the user to simulate different current room temperatures. This was built as part of an assignment for a User Interface Development course.

✨ Preview

Visit the live interactive demo here!

🛠️ Implementation

This project was bootstrapped using Create React App and coded using React hooks.

🧰 Dependencies

• Material-UI
• FontAwesome
• XState

⚙️ Building this Project

To deploy this application locally, install Node.js on your system if you have yet to do so. Clone this repository and navigate to its directory. Then, in the terminal,

npm install # install all dependencies
npm start # run a local instance

📖 Documentation

📂 File Structure

Here is the core file structure of the app with styling-related files omitted. .CSS files are named after the file that is referencing it and are placed in the same folder.

src/
    assets/                               # SVGs for rendering
    components/                           # UI logic
        Face/
            TemperatureGauges.js
            ThermostatFace.js
        RadialSlider/
            RadialSliderMarksTrack.js
            RadialSliderThumb.js
        CurrentTemperatureSlider.js
    containers/                           # Presentation logic
        Thermostat.js
    hooks/                                # Business logic
        ThermostatModel.js
    utils/                                # Convenience and auxiliary functions
        AngleOffset.js

The functions of the React components and JavaScript files are as follows:

TemperatureGauges

This component shows the currentTemperature and targetTemperature on the Thermostat face.

ThermostatFace

This component is in charge of all the color changing logic for the thermostat face when the mode changes upon user input.

RadialSliderMarksTrack

This component generates the slider marks track for the thermostat face.

RadialSliderThumb

This component is responsible for capturing user input such as mouse wheel and drag and subsequently updating the targetTemperature through callback functions.

CurrentTemperatureSlider

Debugging slider so that we can test out the application by manipulating the currentTemperature.

Thermostat

This component collects the business and UI logic from a myriad of components and then layers them for rendering on the DOM.

ThermostatModel

This is where the actual data for currentTemperature, targetTemperature, and mode of the thermostat resides. Changes which happen because of user input are propagated to functions from this file. This is also where the XState state machine resides, which is intended to facilitate the mode checking and changing of the thermostat.

AngleOffset

This is where functions for calculating the translation and rotation offset for positioning the radial slider thumb and marks go.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.