Temperature Control System - Copy this Html, Bootstrap Component to your project
Based on the HTML code provided, I can describe the website as follows: 1. Title and General Structure: The website is titled "AUTOMATIC TEMPERATURE AND HUMIDITY CONTROL SYSTEM" (Automatic Temperature and Humidity Control System). Use Bootstrap to create the layout and style. The interface is divided into two main tabs: D2101 and D2102. Tab D2101 (Default Tab): a. Air conditioner control section: There is a switch to switch between automatic and manual modes. Displays the room named "D2 101". There is an air conditioner on/off button. There is a temperature increase/decrease button with a default value of 25°C. b. Information display: Displays the current temperature. Displays the current humidity. The "Display Chart" button opens the chart in window mode. c. Video and image section: There is an area to display the video stream. There is a dynamic list to display images and information related to the fire alarm. D2102 tab: Has the same structure as the D2101 tab, but there are some minor differences in the ID and class name. Since the video stream, there is a static image displayed. 4. Function Method: There is a method to display the chart when the "Display Chart" button is pressed. Template for fire alarm: There is an HTML template to dynamically generate elements to display fire alarm information, including image, time, location, and confirm/cancel buttons. JavaScript integration: Use a separate JavaScript file (index.js) to handle interactions and functions. 7. Libraries and Frameworks: Use Chart.js to draw charts. Use MQTT.js to connect to IoT systems. Using Bootstrap for the user interface. Using Bootstrap Icons for the icons. In short, this is an air conditioning system monitoring and control website, capable of displaying real time data, charts and fire alarms. The interface is designed to be easy to use and responsive, suitable for both desktop and mobile devices.
