Differences

This shows you the differences between two versions of the page.

--- report:dvp [2026/04/06 19:48] – [Structure] team3
+++ report:dvp [2026/04/23 20:46] (current) – [Smart System] epsatisep
@@ Line 9: / Line 9: @@
 <WRAP centeralign>
 <figure fig:ideation1>
-{{:report:ideation1.png?400|}}
+{{ :report:ideation1.png?400 |}}
 <caption> TRAQUA first Design idea</caption>
 </figure>
@@ Line 22: / Line 22: @@
 <WRAP centeralign>
 <figure fig:ideation2>
-{{:report:ideation2.png?400|}}
+{{ :report:ideation2.png?400 |}}
 <caption> TRAQUA second bottel design</caption>
 </figure>
@@ Line 32: / Line 32: @@
 <WRAP centeralign>
 <figure fig:ideation3>
-{{:report:itaration3.png?400|}}
+{{ :report:itaration3.png?400 |}}
 <caption>TRAQUA third design</caption>
 </figure>
@@ Line 48: / Line 48: @@
 <WRAP centeralign>
 <figure fig:design1>
-{{:report:fylerv1.png?400|}}
+{{ :report:fylerv1.png?400 |}}
 <caption>First design </caption>
 </figure>
@@ Line 59: / Line 59: @@
 === Brainstorming ===
-Once we settled on the smartification of objects, specifically the smart water bottle, the team held its first dedicated brainstorming session. Because the potential features for a "smart" container are so vast, we needed a way to filter the noise and focus on what actually added value. We turned to Miro to map out these early thoughts, using the boards shown to organize our ideas into functional clusters. This collaborative space was essential not just for tracking our suggestions, but for refining a set of concepts that eventually became the foundation of our final proposal. Figure {{ref>fig:miro}} ...
+Once we settled on the smartification of objects, specifically the smart water bottle, the team held its first dedicated brainstorming session. Because the potential features for a "smart" container are so vast, we needed a way to filter the noise and focus on what actually added value. We turned to Miro to map out these early thoughts, using the boards shown to organize our ideas into functional clusters. This collaborative space was essential not just for tracking our suggestions, but for refining a set of concepts that eventually became the foundation of our final proposal. Figure {{ref>fig:miro}} represents one of the brainstorming activities we did in Miro.
 <WRAP centeralign>
 <figure fig:miro>
 {{ :report:miro_brainstorming.png?800 | Miro}}
-<caption>Add caption</caption>
+<caption>Brainstorming in Miro</caption>
 </figure>
 </WRAP>
@@ Line 77: / Line 77: @@
 {{ :report:c2.png?400 |}}
 {{ :report:c3.png?400 |}}
-<caption>Add caption</caption>
+<caption>First version of the bottle</caption>
 </figure>
 </WRAP>
@@ Line 92: / Line 92: @@
 <figure fig:brainstorm2>
 {{ :report:c2.png?350,400 |}}
-<caption>Add caption</caption>
+<caption>Second version of the bottle</caption>
 </figure>
 </WRAP>
@@ Line 98: / Line 98: @@
 <figure fig:brainstorm3>
 {{ :report:c3.png?400 |}}
-<caption>Add caption</caption>
+<caption>Third version of the bottle</caption>
 </figure>
 </WRAP>
@@ Line 117: / Line 117: @@
 ==== Design ====
+MATERIAL SELECTION : "The materials for each component of the smart water bottle were selected based on both functional requirements and aesthetic considerations, ensuring a balance between performance and visual appeal.
+Polypropylene (PP) is used for the cap due to its durability and ability to withstand repeated use, while also providing a clean and smooth finish that contributes to a modern appearance.
+The bottle body is made from polished aluminum, chosen not only for its lightweight structure and corrosion resistance, but also for its sleek, reflective surface, which enhances the overall aesthetic and gives the product a premium look.
+For the compartment containing the electronic components, a plastic material such as polycarbonate is used. This ensures proper electrical insulation and waterproof protection, while also allowing for a precise and refined design that integrates seamlessly with the rest of the bottle.
+Overall, the combination of these materials supports a design that is durable, safe, and visually appealing for everyday use."
 === Structure ===
@@ Line 133: / Line 138: @@
 <figure fig:draft>
 {{ :report:structural_drafts_2.png |}}
-<caption>Add caption</caption>
+<caption>Structural Drafts</caption>
 </figure>
 </WRAP>
+To ensure a coherent and professional presentation of the project, a visual identity was established for TRAQUA. This identity provides consistency across all project deliverables, including the report, presentation, and prototype interfaces.
+**Logo:** The TRAQUA logo combines a water droplet icon with the project name, reflecting the system's core focus on water quality monitoring.
+**Tagline:** //"Know your water, trust your bottle."// — summarizing the project's goal of giving users reliable, real-time insight into their water quality.
+**Color Palette (Monochrome):** Three colors form the visual foundation:
+  * ''#6377BD'' — primary dark blue, used for headings and key UI elements
+  * ''#D0E3FF'' — light blue, used for backgrounds and secondary elements
+  * ''#FFF9F0'' — off-white, used for neutral backgrounds and contrast
+The design is summed up in figure {{ref>fig:brandColors}}
+<WRAP centeralign>
+<figure fig:brandColors>
+{{ :report:brandcolors.png?600 |}}
+<caption>Branding</caption>
+</figure>
+</WRAP>
+In order to showcase the appearance of the products, 3D models were created. These models illustrate the structure of the three-part bottle. The following figures {{ref>fig:model1}}, {{ref>fig:model2}}, {{ref>fig:model3}}, {{ref>fig:model4}}, {{ref>fig:model5}},{{ref>fig:model6}},{{ref>fig:model7}}, {{ref>fig:model8}} present these models.
+<WRAP centeralign>
+<figure fig:model1>
+{{ :report:fullbody.png?200 |}}
+<caption>Model of the bottle from above</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model2>
+{{ :report:fullbody_2.png?200 |}}
+<caption>Model of the bottle from the side</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model3>
+{{ :report:toppart.png?100 |}}
+<caption>Model of the cap</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model4>
+{{ :report:drinkpart.png?100 |}}
+<caption>Model of the drinking part</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model5>
+{{ :report:midpart.png?200 |}}
+<caption>Model of the middle part from the top</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model6>
+{{ :report:midpart_2.png?200 |}}
+<caption>Model of the middle part from the side</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model7>
+{{ :report:midpart_3.png?200 |}}
+<caption>Model of the inner middle part</caption>
+</figure>
+</WRAP>
+<WRAP centeralign>
+<figure fig:model8>
+{{ :report:bottompart.png?100 |}}
+<caption>Model of the bottom of the bottle</caption>
+</figure>
+</WRAP>
-(//ii//) material selection;
-(//iii//) detailed drawings;
-(//iv//) 3D model with load and stress analysis;
-(//v//) colour palette.
 === Smart System ===
+<WRAP clear></WRAP>
 == Hardware ==
-Include and explain in detail the:
-(//i//) black box diagram;
-(//ii//) hardware component selection (use tables to compare the different options for each component;
-(//iii//) detailed schematics;
-Figure {{ref>fig:blackBoxDiagram}} ...
+Figure {{ref>fig:blackBoxDiagram}}
+This is a system architecture/block diagram for a smart water bottle. At the core is an ESP32 DEVKIT V1 microcontroller that connects to several peripherals: an LED light, accelerometer (LIS3DHTR), TDS sensor (SEN0244), UV-C light, and a pressure sensor (FSR406) with a capacitor. Power is supplied by a battery through a charging circuit. The ESP32 communicates with a mobile application over BLE (encrypted + bonded) using notify/read/write operations. The legend color-codes the lines: red for energy, green for information, and blue for water-related connections.
 <WRAP centeralign>
 <figure fig:blackBoxDiagram>
-{{:report:blackboxdiagramv2.drawio_1_.png?400|}}
+{{ :report:blackboxdiagramv2.drawio_1_.png?600 |}}
 <caption>Black box diagram underling components</caption>
 </figure>
 </WRAP>
-This is a system architecture/block diagram for a smart water bottle. At the core is an ESP32 DEVKIT V1 microcontroller that connects to several peripherals: an LED light, accelerometer (LIS3DHTR), TDS sensor (SEN0244), UV-C light, and a pressure sensor (FSR406) with a capacitor. Power is supplied by a battery through a charging circuit. The ESP32 communicates with a mobile application over BLE (encrypted + bonded) using notify/read/write operations. The legend color-codes the lines: red for energy, green for information, and blue for water-related connections.
+Figure {{ref>fig:schematics}} presents the initial electronic system architecture of the smart bottle prototype. The diagram outlines the integration of the main components and their interactions, serving as a first iteration of the system design.
+At the core of the system is the ESP32 microcontroller, which manages data processing and communication between all connected components. Several sensors are included to support the intended functionality of the product. A TDS sensor is used to measure water quality, while a temperature and humidity sensor (DHT11) monitors environmental conditions. Additionally, a motion sensor and a force-sensitive resistor (FSR) are incorporated to detect user interaction and usage patterns.
+The system also includes a UV-C light module, controlled via a transistor circuit, which is intended for sterilization purposes. A display module (SSD1306) is connected via I²C to provide real-time feedback to the user.
+Power is supplied through a battery management system (BMS) connected to multiple lithium-ion cells. Voltage regulation is handled by a boost converter and linear regulator to provide stable 5V and 3.3V outputs required by different components. A USB-C interface is included for charging.
+It is important to note that this design represents an initial draft, created to explore component selection and system integration. Certain aspects, such as power efficiency, component optimization, and circuit simplification, will be revised in later iterations.
-Figure {{ref>fig:schematics}} ...
 <WRAP centeralign>
-<figure fig:schematics>
+<figure fig:schematics200>
-{{:report:schematics.png|}}
+{{ :report:schematics-v4.png |}}
 <caption>Detalied schematics</caption>
 </figure>
@@ Line 174: / Line 263: @@
-(//iv//) power budget.
+To ensure the system operates reliably, a power budget was established for all electronic components. The table below outlines the voltage, normal and maximum current draw, and resulting power consumption for each component {{ref>tab:powerCalculations}}.
+<WRAP>
+<table tab:powerCalculations>
+<caption>Power Calculations for System Components</caption>
+<WRAP box center>
+^ Equipment ^ Voltage [V] ^  Inormal [A] ^  Imax [A] ^  Pnormal [W] ^  Pmax [W] ^
+| TDS sensor | 3.3 |  0.003 |  0.006 |  0.0099 |  0.0198 |
+| Accelerometer | 3.3 |  0.000002 |  0.000004 |  0.0000066 |  0.0000132 |
+| UV-C LED module | 12 |  0.1 |  0.11 |  0.8 |  0.88 |
+| Pressure sensor | 3.3 |  0.000264 |  0.00022 |  0.000726 |  0.000726 |
+| Temperature sensor | 5 |  0.0001 |  0.0025 |  0.0005 |  0.0125 |
+| Microcontroller | 5 |  0.08 |  0.24 |  0.4 |  1.2 |
+| TOTAL | | |  0.358724 |  1.2111326 |  2.1130392 |
+</WRAP>
+</table>
+</WRAP>
+<WRAP clear></WRAP>
 == Software ==
 The following sub chapter will introduce and explain the reason why TRAQUA decided to program the application system the way it is, talk about its components and the tools used to do it.
-Figure {{ref>fig:UseCaseDiagram}} ...
+Figure {{ref>fig:UseCaseDiagram}}  we can see an easy entry flow of how the application works. The application was made with one key concept in mind. Keep most of the "important" values one click away. With that mindset in mind. The application works in the following way. If the users log in for the first time, they enter their height and weight. This will help us determine how much water that person needs to intake per day. Then with 1 click that person can see the water purity and his or her total water intake. He can also start the cleaning process from the app by clicking on the navigation menu on the bottom of the app.
 <WRAP centeralign>
 <figure fig:UseCaseDiagram>
-{{:report:usecasev1.drawio.png?400|}}
+{{ :report:usecasev1.drawio.png?400 |}}
 <caption>Use case Diagram of the system</caption>
 </figure>
@@ Line 188: / Line 296: @@
-In the above-seen use case, we can see an easy entry flow of how the application works. The application was made with one key concept in mind. Keep most of the "important" values one click away. With that mindset in mind. The application works in the following way. If the users log in for the first time, they enter their height and weight. This will help us determine how much water that person needs to intake per day. Then with 1 click that person can see the water purity and his or her total water intake. He can also start the cleaning process from the app by clicking on the navigation menu on the bottom of the app.
-Figure {{ref>fig:dfdLevel1}} ...
+Figure {{ref>fig:dfdLevel1}} This is a Level 1 Data Flow Diagram (DFD) for a hydration tracking system. It shows an external entity (Water bottle) sending raw readings to a Sensors process (1.0), which passes data to a Process Data process (1.5). That process sends processed data to a Data store, which feeds into a Display on app process (2.0) that delivers hydration info to the User external entity. There's also a legend in the bottom-left defining the DFD notation (rectangles for external entities, circles for processes, open rectangles for data stores).
 <WRAP centeralign>
 <figure fig:dfdLevel1>
-{{:report:dfdv1.drawio.png?400|}}
+{{ :report:dfdv1.drawio.png?400 |}}
 <caption>Level 1 DFD of the system</caption>
 </figure>
 </WRAP>
-This is a Level 1 Data Flow Diagram (DFD) for a hydration tracking system. It shows an external entity (Water bottle) sending raw readings to a Sensors process (1.0), which passes data to a Process Data process (1.5). That process sends processed data to a Data store, which feeds into a Display on app process (2.0) that delivers hydration info to the User external entity. There's also a legend in the bottom-left defining the DFD notation (rectangles for external entities, circles for processes, open rectangles for data stores).
@@ Line 218: / Line 325: @@
 The shop of TRAQUA. This was done using SVELTE. SVELETE was chosen because of its lightweight nature, fast performance, and simple reactive model. Unlike traditional frameworks, Svelte compiles components at build time, resulting in highly optimized and efficient code
-Figure {{ref>fig:WebsiteSectionOne}} ...
+Figure {{ref>fig:WebsiteSectionOne}}, Figure {{ref>fig:WebsiteSectionTwo}}, Figure {{ref>fig:WebsiteSectionthree}}, Figure {{ref>fig:WebsiteSectionfour}}, Figure {{ref>fig:WebsiteSectionfive}} are screenshots of the website
 <WRAP centeralign>
 <figure fig:WebsiteSectionOne>
-{{:report:traquawebsite1.png?600|}}
+{{ :report:traquawebsite1.png?600 |}}
 <caption>Website landing </caption>
 </figure>
 </WRAP>
-Figure {{ref>fig:WebsiteSectionTwo}} ...
 <WRAP centeralign>
 <figure fig:WebsiteSectionTwo>
-{{:report:traquawebsite2.png?600|}}
+{{ :report:traquawebsite2.png?600 |}}
 <caption>Website section 2</caption>
 </figure>
 </WRAP>
-Figure {{ref>fig:WebsiteSectionthree}} ...
 <WRAP centeralign>
 <figure fig:WebsiteSectionthree>
-{{:report:traquawebsite3.png?600|}}
+{{ :report:traquawebsite3.png?600 |}}
 <caption>Website section 3</caption>
 </figure>
 </WRAP>
-Figure {{ref>fig:WebsiteSectionfour}} ...
 <WRAP centeralign>
 <figure fig:WebsiteSectionfour>
-{{:report:traquawebsite4.png?600|}}
+{{ :report:traquawebsite4.png?600 |}}
 <caption>Website section 4</caption>
 </figure>
 </WRAP>
-Figure {{ref>fig:WebsiteSectionfive}} ...
 <WRAP centeralign>
 <figure fig:WebsiteSectionfive>
-{{:report:traquawebsite5.png?600|}}
+{{ :report:traquawebsite5.png?600 |}}
 <caption>Website section five</caption>
 </figure>
@@ Line 280: / Line 389: @@
 Mobile framework
-<WRAP centeralign>
+<WRAP>
 <table tab:mobileFramework>
 <caption>Mobile Framework Comparison</caption>
@@ Line 298: / Line 407: @@
 Web Framework
-<WRAP centeralign>
+<WRAP>
 <table tab:webFramework>
 <caption>Web Framework Comparison</caption>
@@ Line 315: / Line 424: @@
 Backend Framework
-<WRAP centeralign>
+<WRAP>
 <table tab:backendFramework>
 <caption>Backend Framework Comparison</caption>
@@ Line 332: / Line 441: @@
 Microcontroller
-<WRAP centeralign>
+<WRAP>
 <table tab:microcontroller>
 <caption>Microcontroller Comparison</caption>
@@ Line 350: / Line 459: @@
 Below you can find a detailed use case explanation of how the user interacts with the system.
 Our user being the actor in this case.
-Figure {{ref>fig:detailUseCase}} ...
+Figure {{ref>fig:detailUseCase}} shows the usage.
 <WRAP centeralign>
 <figure fig:detailUseCase>
-{{:report:usercasetraqua.png?400|}}
+{{ :report:usercasetraqua.png?400 |}}
 <caption> Detail use case </caption>
 </figure>