Playground / SVG Device Lab
← Back to specimensShared library · Thermostats
WORKBENCH / DEVICE STUDY
ecobee, two ways.
Smart Thermostat Enhanced. One device, two material studies.
REACT COMPONENT
EcobeeEnhancedThermostat@/components/DeviceIllustrations/EcobeeEnhancedThermostatOriginal finishBlack glass · White shell
01ecobee Smart Thermostat Enhanced, realistic. 72 degrees fahrenheit, 43% humidity. Mode Cool. No heating or cooling, fan idle. Heat target 68, cool target 74. Following schedule. Online.
Seam claySoft gray · Matte surfaces
02ecobee Smart Thermostat Enhanced, clay. 72 degrees fahrenheit, 43% humidity. Mode Cool. No heating or cooling, fan idle. Heat target 68, cool target 74. Following schedule. Online.
TRY A STATE
Auto uses separate heating and cooling targets. The clay study uses subtle heat and cool accents on its mode icon and temperatures, with smooth transitions as values change. This same component powers the homepage demo. Awake controls follow the user manual; standby and example weather are local display studies.
Component props
{
"temperatureCelsius": 22.22222222222222,
"climateSetting": {
"hvac_mode_setting": "cool",
"fan_mode_setting": "auto",
"heating_set_point_celsius": 20,
"cooling_set_point_celsius": 23.333333333333332
},
"temperatureUnit": "fahrenheit",
"humidity": 43,
"time": "10:30",
"outdoorTemperatureCelsius": 17.77777777777778,
"isHeating": false,
"isCooling": false,
"isFanRunning": false,
"isOnline": true,
"asleep": false,
"scheduleStatus": "following",
"holdUntil": "21:00",
"comfortSetting": "Home",
"disabled": false
}