{"id":551,"date":"2024-08-27T21:13:43","date_gmt":"2024-08-28T01:13:43","guid":{"rendered":"https:\/\/eportfolios.macaulay.cuny.edu\/rrahman\/?p=522"},"modified":"2024-08-27T21:13:43","modified_gmt":"2024-08-28T01:13:43","slug":"diy-thermostat-full-stack","status":"publish","type":"post","link":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/2024\/08\/27\/diy-thermostat-full-stack\/","title":{"rendered":"DIY Thermostat (Full Stack)"},"content":{"rendered":"<blockquote><p><strong>Publicly available site:<\/strong><br \/>\n<strong><a href=\"https:\/\/reazwrahman.github.io\/thermostat_frontend\/\">https:\/\/reazwrahman.github.io\/thermostat_frontend\/<\/a><\/strong><\/p>\n<p><strong>Hardware Setup for some perspective: <a href=\"https:\/\/reazwrahman.github.io\/thermostat_frontend\/background_pages\/hardware_page\/index.html\">https:\/\/reazwrahman.github.io\/thermostat_frontend\/background_pages\/hardware_page\/index.html\u00a0\u00a0\u00a0<\/a><\/strong><\/p>\n<p><strong>Github Repository for frontend component: <a href=\"https:\/\/github.com\/reazwrahman\/thermostat_frontend\/tree\/main\">https:\/\/github.com\/reazwrahman\/thermostat_frontend\/tree\/main\u00a0<\/a><\/strong><\/p>\n<p><strong>Github Repository for backend component: <a href=\"https:\/\/github.com\/reazwrahman\/Thermostat_Backend_API\">https:\/\/github.com\/reazwrahman\/Thermostat_Backend_API\u00a0\u00a0<\/a><\/strong><\/p>\n<p><strong>Github Repository for simulation component: <a href=\"https:\/\/github.com\/reazwrahman\/SmartThermostat_Simulation\">https:\/\/github.com\/reazwrahman\/SmartThermostat_Simulation\u00a0<\/a><\/strong><\/p><\/blockquote>\n<h1>Project Description<\/h1>\n<p>In my quest to create a comfortable living environment during the harsh New York winters, I embarked on a project to build a smart heater controller. The heating system in my old single-family house has always been unpredictable, swinging between unbearably hot during the day and freezing cold at night. Manually turning my electric heater on and off to maintain a comfortable temperature became a tedious routine, especially waking up in the middle of the night to adjust it. To solve this, I decided to automate the temperature control in my room using a blend of modern technology and custom-built components.<\/p>\n<h3><strong>Project Components: Frontend, Backend, and Two Modes of Operation<\/strong><\/h3>\n<p>My solution is composed of three key components: a frontend user interface, a backend API, and two distinct modes of operation\u2014simulation and target.<\/p>\n<h4><strong>1. Frontend: User Interface Built with Modern Web Technologies<\/strong><\/h4>\n<p>To control and monitor the heater system, I built a user-friendly interface from scratch using HTML, CSS, JavaScript, and React. This frontend acts as the control panel for my smart heater, allowing me to set temperature preferences, switch between modes, and view real-time data. The frontend communicates directly with the backend API, sending commands and receiving updates to manage the heater effectively.<\/p>\n<h4><strong>2. Backend API: Python and Flask for Flexibility and Control<\/strong><\/h4>\n<p>The backend of the system is built using Python and the Flask framework, which provides a robust and flexible platform for handling the heater control logic. The backend API serves as the brain of the operation, processing inputs from the frontend and managing the heater\u2019s state. It supports two different modes of operation:<\/p>\n<ul>\n<li><strong>Simulation Mode:<\/strong> In this mode, the system simulates the entire setup on a computer without needing physical hardware. I created virtual components, including a simulated temperature sensor and a power relay, to mimic real-world conditions. This mode generates logs and test data automatically during runtime, allowing me to validate and fine-tune the system\u2019s behavior without risking actual hardware.<\/li>\n<li><strong>Target Mode:<\/strong> This is the production-ready setup where real hardware components are involved. In target mode, the system uses a Raspberry Pi microcontroller connected to an actual temperature sensor and a 120-volt power relay. These components control an electric heater or air conditioner, depending on the temperature requirements. The Raspberry Pi handles the processing and communicates with the backend API to ensure accurate temperature regulation in real-time.<\/li>\n<\/ul>\n<h3><strong>Conclusion: A Smarter, More Comfortable Living Space<\/strong><\/h3>\n<p>With these components, my smart heater controller project effectively automates the heating process in my room, adapting to changing temperatures throughout the day and night without requiring manual intervention. Whether running in simulation mode for testing or target mode for real-world application, this system provides a reliable and flexible solution to the challenges of living with an outdated heating system. By integrating modern web technologies with practical hardware solutions, I&#8217;ve created a comfortable and efficient living space that keeps me warm on even the coldest New York nights.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/eportfolios.macaulay.cuny.edu\/rrahman\/files\/2024\/08\/final_setup-1-scaled.jpeg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-535 size-full\" src=\"https:\/\/eportfolios.macaulay.cuny.edu\/rrahman\/files\/2024\/08\/final_setup-1-scaled.jpeg\" alt=\"\" width=\"1920\" height=\"2560\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>A sample page from the website:<\/p>\n<p><a href=\"https:\/\/eportfolios.macaulay.cuny.edu\/rrahman\/files\/2024\/08\/Screenshot-2024-08-27-at-9.13.12\u202fPM.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-524 size-large\" src=\"https:\/\/eportfolios.macaulay.cuny.edu\/rrahman\/files\/2024\/08\/Screenshot-2024-08-27-at-9.13.12\u202fPM-1024x657.png\" alt=\"\" width=\"676\" height=\"434\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Publicly available site: https:\/\/reazwrahman.github.io\/thermostat_frontend\/ Hardware Setup for some perspective: https:\/\/reazwrahman.github.io\/thermostat_frontend\/background_pages\/hardware_page\/index.html\u00a0\u00a0\u00a0 Github Repository for frontend component: https:\/\/github.com\/reazwrahman\/thermostat_frontend\/tree\/main\u00a0 Github Repository for backend component: https:\/\/github.com\/reazwrahman\/Thermostat_Backend_API\u00a0\u00a0 Github Repository for simulation component: https:\/\/github.com\/reazwrahman\/SmartThermostat_Simulation\u00a0 Project Description In my quest to create a comfortable living environment during the harsh New York winters, I embarked on a project to build a smart heater [&hellip;]<\/p>\n","protected":false},"author":605,"featured_media":533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[5,7],"tags":[],"class_list":["post-551","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hw-sw-systems","category-software-projects"],"_links":{"self":[{"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/posts\/551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/users\/605"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/comments?post=551"}],"version-history":[{"count":0,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/posts\/551\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/media\/533"}],"wp:attachment":[{"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/media?parent=551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/categories?post=551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.macaulay.cuny.edu\/reazwrahman\/wp-json\/wp\/v2\/tags?post=551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}