report:dvp

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision		 Previous revision
report:dvp [2026/04/15 20:13] – [Software] epsatisepreport:dvp [2026/04/30 10:15] (current) – [7.4 Form and aesthetics] team1
Line 1: Line 1:
 ===== 7. Project Development ===== ===== 7. Project Development =====
 +
 This chapter outlines the development from initial idea to final concept, including ideation, prototyping, key design decisions, and the integration of technical and marketing elements. This chapter outlines the development from initial idea to final concept, including ideation, prototyping, key design decisions, and the integration of technical and marketing elements.
-==== Introduction ====+ 
 This chapter describes the development from idea to concept and aims to provide insight into the creation of the final design. It begins with the problem statement and the initial ideation phase, in which the first directions and starting points are explored. This is followed by a discussion of the brainstorming sessions surrounding the core concept, with attention to the water system and smart technologies. This chapter describes the development from idea to concept and aims to provide insight into the creation of the final design. It begins with the problem statement and the initial ideation phase, in which the first directions and starting points are explored. This is followed by a discussion of the brainstorming sessions surrounding the core concept, with attention to the water system and smart technologies.
  
Line 8: Line 10:
 Finally, this process leads to the final design, including a model, an analysis of manufacturability, the software systems, and the associated smart packaging. Finally, this process leads to the final design, including a model, an analysis of manufacturability, the software systems, and the associated smart packaging.
  
-==== Design Question ====+ 
 +==== 7.1 Design Question ====
  
 The Smart Pot is needed because it uniquely bridges this gap by linking screen-time behavior to the health of a real plant. This creates a tangible feedback loop that makes digital habits more visible, meaningful, and emotionally engaging. Unlike existing solutions, it introduces real-world consequences and rewards, which strengthens behavior change through lived experience rather than abstract digital feedback. The Smart Pot is needed because it uniquely bridges this gap by linking screen-time behavior to the health of a real plant. This creates a tangible feedback loop that makes digital habits more visible, meaningful, and emotionally engaging. Unlike existing solutions, it introduces real-world consequences and rewards, which strengthens behavior change through lived experience rather than abstract digital feedback.
Line 16: Line 19:
 Now that the “why” is clear, the “how” comes next. Since achieving a perfect design within a single system is complex, the overall problem was divided into several subproblems to make the development more structured and manageable. These subproblems will be solved one by one until a final design is reached Now that the “why” is clear, the “how” comes next. Since achieving a perfect design within a single system is complex, the overall problem was divided into several subproblems to make the development more structured and manageable. These subproblems will be solved one by one until a final design is reached
  
-==== Ideation ==== + 
-===Results from the first brainstom and design meeting===+==== 7.2 Ideation ==== 
 + 
 +=== 7.2.1 Results from the first brainstorm and design meeting === 
 During the design process, the team started with a general meeting to discuss initial ideas for a solution. After this, a brainstorming session was held, resulting in several possible sketches. These sketches were later used as inspiration for the final design. During the design process, the team started with a general meeting to discuss initial ideas for a solution. After this, a brainstorming session was held, resulting in several possible sketches. These sketches were later used as inspiration for the final design.
  
-<WRAP centeralign> +Figures {{ref>sketch_brainstorm_1}}, {{ref>sketch_brainstorm_2}}, {{ref>sketch_brainstorm_3}}, {{ref>sketch_brainstorm_4}} show the pot sketches from the brainstorming. 
-<figure sketch brainstorm 1>+ 
 +<WRAP centeralign rot90> 
 +<figure sketch_brainstorm_1>
 {{ :report:img_419711.png?200 |}} {{ :report:img_419711.png?200 |}}
-<caption><color #ed1c24>sketch brainstorm 1</color></caption>+<caption>Sketch brainstorm 1</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
 <WRAP centeralign> <WRAP centeralign>
-<figure sketch brainstorm 2>+<figure sketch_brainstorm_2>
 {{ :report:plant_pot_low_fid_prototype.jpeg?200 |}} {{ :report:plant_pot_low_fid_prototype.jpeg?200 |}}
-<caption><color #ed1c24>sketch brainstorm 2</color></caption>+<caption>Sketch brainstorm 2</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
 <WRAP centeralign> <WRAP centeralign>
-<figure sketch brainstorm 3>+<figure sketch_brainstorm_3>
 {{ :report:product_sketch.jpeg?200 |}} {{ :report:product_sketch.jpeg?200 |}}
-<caption><color #ed1c24>sketch brainstorm 3</color></caption>+<caption>Sketch brainstorm 3</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
 <WRAP centeralign> <WRAP centeralign>
-<figure sketch brainstorm 4>+<figure sketch_brainstorm_4>
 {{ :report:sophies_sketch.png?200 |}} {{ :report:sophies_sketch.png?200 |}}
-<caption><color #ed1c24>sketch brainstorm 4</color></caption>+<caption>Sketch brainstorm 4</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
  
-===1. Form and aesthetics=== +==== 7.3 Form and aesthetics ==== 
-===Design Process===+ 
 +=== 7.4.1 Design Process === 
 To determine the form of the product, it is important to first understand the functional requirements that the shape needs to support. The design process starts with the water tank, as it is the core component of the system. Because the tank operates using gravity, it must include a clear lowest point where water naturally collects and flows from. This makes the tank shape critical, as it directly influences how well the system functions. To determine the form of the product, it is important to first understand the functional requirements that the shape needs to support. The design process starts with the water tank, as it is the core component of the system. Because the tank operates using gravity, it must include a clear lowest point where water naturally collects and flows from. This makes the tank shape critical, as it directly influences how well the system functions.
  
Line 57: Line 67:
 In addition, the design must account for practical use. There needs to be a clear and accessible way to refill the water and nutrients, as well as a system that allows excess water to drain in case of overwatering. Altogether, the final form of the product is shaped by these functional requirements, balancing stability, safety, and usability with a clean and cohesive design. In addition, the design must account for practical use. There needs to be a clear and accessible way to refill the water and nutrients, as well as a system that allows excess water to drain in case of overwatering. Altogether, the final form of the product is shaped by these functional requirements, balancing stability, safety, and usability with a clean and cohesive design.
  
-===Designing the water tank=== + 
-==Electronics involved==+=== 7.4.2 Designing the water tank === 
 + 
 +== 7.4.2.1 Electronics involved == 
 An important component within the water tank is the solenoid valve, which controls the water flow. This element must be seamlessly integrated into the tank design so that it functions reliably without disrupting the overall structure or usability. It should be positioned in a way that supports efficient water distribution. For this project, a 1/2 inch valve will be used. An important component within the water tank is the solenoid valve, which controls the water flow. This element must be seamlessly integrated into the tank design so that it functions reliably without disrupting the overall structure or usability. It should be positioned in a way that supports efficient water distribution. For this project, a 1/2 inch valve will be used.
  
 The valve must be placed horizontally to ensure consistent and reliable operation. In a horizontal position, water can flow evenly through the valve without being affected by gravity in a way that could cause uneven pressure or incomplete opening and closing. This orientation also helps prevent air pockets from forming inside the valve, which could disrupt water flow or reduce efficiency. Additionally, placing the valve horizontally improves durability, as it reduces unnecessary stress on internal components and connections, helping to maintain a stable and leak-free system over time. The valve must be placed horizontally to ensure consistent and reliable operation. In a horizontal position, water can flow evenly through the valve without being affected by gravity in a way that could cause uneven pressure or incomplete opening and closing. This orientation also helps prevent air pockets from forming inside the valve, which could disrupt water flow or reduce efficiency. Additionally, placing the valve horizontally improves durability, as it reduces unnecessary stress on internal components and connections, helping to maintain a stable and leak-free system over time.
  
-== Shape studies ==+ 
 +== 7.4.2.2 Shape studies == 
 For the ideation of the water tank, a shape study and brainstorming session was carried out. The focus was on finding a form that is both practical and visually appealing. Different shapes were explored to ensure efficient water flow, proper integration of components such as the valve, and overall stability of the product. At the same time, attention was given to aesthetics, aiming for a design that fits naturally into a home environment and feels clean and well-balanced. For the ideation of the water tank, a shape study and brainstorming session was carried out. The focus was on finding a form that is both practical and visually appealing. Different shapes were explored to ensure efficient water flow, proper integration of components such as the valve, and overall stability of the product. At the same time, attention was given to aesthetics, aiming for a design that fits naturally into a home environment and feels clean and well-balanced.
-<color #ed1c24>Figure {{ref>shape_studies}} ...</color>+ 
 +Figure {{ref>shape_studies}} shows shape study sketches focusing on water flow, stability, and appearance during the brainstorming stage. 
 <WRAP centeralign> <WRAP centeralign>
 <figure shape_studies> <figure shape_studies>
 {{ :report:schets_1_jira.jpg |}} {{ :report:schets_1_jira.jpg |}}
-<caption><color #ed1c24>shape studies</color></caption>+<caption>Shape studies</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 75: Line 92:
 Shape number 4 shows the most promising direction for gravity-based water flow, as the tank is designed to wrap around the pot. This allows the water to naturally move toward the lowest point, improving distribution and efficiency. Although this results in an asymmetrical form at the bottom, it still maintains overall stability. With only minor adjustments, this shape can also accommodate the electronic components, making it a strong balance between functionality and integration. Shape number 4 shows the most promising direction for gravity-based water flow, as the tank is designed to wrap around the pot. This allows the water to naturally move toward the lowest point, improving distribution and efficiency. Although this results in an asymmetrical form at the bottom, it still maintains overall stability. With only minor adjustments, this shape can also accommodate the electronic components, making it a strong balance between functionality and integration.
  
-==Final design of the watertank==+ 
 +== 7.4.2.3 Final design of the watertank == 
 For the final design, several key aspects had to be considered. The optimal water volume was defined to ensure efficient use, resulting in a tank capacity of a little over 1 liter. At the same time, the system’s gravity and overall stability were carefully balanced, which led to a corner-shaped design. For the final design, several key aspects had to be considered. The optimal water volume was defined to ensure efficient use, resulting in a tank capacity of a little over 1 liter. At the same time, the system’s gravity and overall stability were carefully balanced, which led to a corner-shaped design.
  
 In addition, the product needed to support easy integration of the valve, as well as simple access for refilling and cleaning the tank. To achieve this, a tilted bottom was added to guide the water toward a single point, including an opening in the tank. In the final 3D model, a corner piece will be incorporated to allow the valve to be mounted horizontally, ensuring reliable operation and proper water flow. In addition, the product needed to support easy integration of the valve, as well as simple access for refilling and cleaning the tank. To achieve this, a tilted bottom was added to guide the water toward a single point, including an opening in the tank. In the final 3D model, a corner piece will be incorporated to allow the valve to be mounted horizontally, ensuring reliable operation and proper water flow.
-<color #ed1c24>Figure {{ref>sketch_watertank}} ... (explain the contents of the figure)</color>+ 
 +Figure {{ref>sketch_watertank}} shows the final water tank design, including the sloped bottom and the valve position. 
 <WRAP centeralign> <WRAP centeralign>
 <figure sketch_watertank> <figure sketch_watertank>
 {{ :report:untitled_artwork_2_.png?600 |}} {{ :report:untitled_artwork_2_.png?600 |}}
-<caption><color #ed1c24>sketch watertank</color></caption>+<caption>Sketch watertank</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
-==Final design of the pot==+ 
 +== 7.4.2.4 Final design of the pot == 
 After the design of the watertank the rest of the pot was designed. After the design of the watertank the rest of the pot was designed.
-<color #ed1c24>Figure {{ref>solidworks1}} ... (explain the contents of the figure)</color>+ 
 +Figure {{ref>solidworks1}} shows the final pot design made in CAD, with the inner container and outer structure. 
 <WRAP centeralign> <WRAP centeralign>
 <figure solidworks1> <figure solidworks1>
 {{ :report:schermafbeelding_2026-04-12_102528.png?600 |}} {{ :report:schermafbeelding_2026-04-12_102528.png?600 |}}
-<caption><color #ed1c24>solidworks 1</color></caption>+<caption>Solidworks 1</caption>
 </figure> </figure>
 </WRAP> </WRAP>
-<color #ed1c24>Figure {{ref>render1}} ... (explain the contents of the figure)</color>+ 
 +Figure {{ref>render1}} shows the final pot design with a cork outer structure. 
 <WRAP centeralign> <WRAP centeralign>
 <figure render1> <figure render1>
 {{ :report:schermafbeelding_2026-04-12_101643.png?600 |}} {{ :report:schermafbeelding_2026-04-12_101643.png?600 |}}
-<caption><color #ed1c24>render 1</color></caption>+<caption>Render 1</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
  
 +=== 7.4.3 Product cross-sections ===
  
- 
-===2. Product cross-sections=== 
 To ideate the internal layout of the product, a simple sketch (Figure {{ref>internal_layout}}) was first created to explore the placement of components. This concept was then further developed and refined into a detailed SolidWorks model. To ideate the internal layout of the product, a simple sketch (Figure {{ref>internal_layout}}) was first created to explore the placement of components. This concept was then further developed and refined into a detailed SolidWorks model.
  
Line 118: Line 144:
  
  
 +==== 7.5 Concept ====
  
 +This chapter presents the final design of the Smart Pot, including the finalized sketch and the SolidWorks model that forms the basis of the concept. The final design is the result of multiple iterations, where initial ideas were refined into a coherent and functional product.
  
 +The design sketch illustrates the overall form, proportions, and key features of the product, providing a clear visual representation of the concept. This sketch was then translated into a detailed SolidWorks model, where the design was further developed with accurate dimensions, component integration, and construction details.
  
 +Together, the sketch and the 3D model demonstrate how the conceptual ideas were transformed into a technically feasible and well-structured product.
  
  
 +==== 7.6 Design ====
  
-==== Concept ==== +Figure {{ref>final_sketch}} shows the final design with a clear outer layer, a cork outer structure, and the logo on the pot.
-This chapter presents the final design of the Smart Pot, including the finalized sketch and the SolidWorks model that forms the basis of the concept. The final design is the result of multiple iterations, where initial ideas were refined into a coherent and functional product.+
  
-The design sketch illustrates the overall form, proportions, and key features of the product, providing a clear visual representation of the concept. This sketch was then translated into a detailed SolidWorks model, where the design was further developed with accurate dimensions, component integration, and construction details. 
- 
-Together, the sketch and the 3D model demonstrate how the conceptual ideas were transformed into a technically feasible and well-structured product. 
-==== Design ==== 
-<color #ed1c24>Figure {{ref>final_sketch}} ... (explain contents of figure)</color> 
 <WRAP centeralign> <WRAP centeralign>
 <figure final_sketch> <figure final_sketch>
Line 139: Line 164:
 </WRAP> </WRAP>
  
-<color #ed1c24>Figure {{ref>final_render}} ... (explain contents of figure)</color>+Figure {{ref>final_render}} shows the final render of the pot. 
 <WRAP centeralign> <WRAP centeralign>
 <figure final_render> <figure final_render>
Line 148: Line 174:
  
  
 +==== 7.7 Logo and flyer design ====
  
 +Our logo is “Screen2Green,” as shown in Figure {{ref>logo}}.
 +
 +The product is related to nature and is also connected to smartphone screen-time, so the words “Screen” and “Green” were chosen. These two words have a similar pronunciation, which makes the name easy to remember. The idea behind the name is that when users reduce their screen-time, the plant grows. For this reason, the phrase “Screen to Green” is used. In the logo, the word “to” is replaced with the number “2” because they have the same pronunciation, and it is designed to look like a small plant. Green tones (#aac03e, #637f30) are used to represent plants, and a brown tone (#5f4228) is used to represent soil. The regular version of the “Univers Condensed” font is used to keep the design simple and clear.
 +
 +<WRAP centeralign>
 +<figure logo>
 +{{ :report:logo.png?nolink&700 |}}
 +<caption>Screen2Green logo</caption>
 +</figure>
 +</WRAP>
  
  
 +Figure {{ref>flyer}} shows our product’s flyer.
  
-==== Logo and flyer design ====+Our logo is at the top of the flyer. We used a gray color (#d9d8dd) for the background and a green color (#aac03e) for the text. Below the logo, there are some sentences that explain how the product works in a simple way. Under these sentences, there are a few short phrases that show the main features of the pot. The final render of the pot with a plant is placed next to the short phrases. At the bottom left, there are icons where users can download the app connected to the pot.
  
-<color #ed1c24>First present the logo rationale, the colour palette, add a figure, etc.</color> 
-<color #ed1c24>Figure {{ref>final_render}} ... (explain contents of figure)</color> 
 <WRAP centeralign> <WRAP centeralign>
 <figure flyer> <figure flyer>
-{{ :report:schermafbeelding_2026-04-12_204307.png?400 |}}+{{ :report:schermafbeelding_2026-04-12_204307.png?500 |}}
 <caption>Screen2Green flyer</caption> <caption>Screen2Green flyer</caption>
 </figure> </figure>
Line 164: Line 200:
  
  
 +=== 7.7.1 Structure ===
  
-=== Structure === 
 The product is built around a clear and layered structure, where each part has a specific function while contributing to the overall design. The product is built around a clear and layered structure, where each part has a specific function while contributing to the overall design.
  
Line 196: Line 232:
 */ */
  
-<color #ed1c24>Figure {{ref>fig_structure}} ... (explain contents of figure)</color>+Figure {{ref>fig_structure}} shows different views of the pot structure, helping to understand how the parts fit together.
  
 <WRAP group centeralign> <WRAP group centeralign>
Line 210: Line 246:
 </figure> </figure>
 </WRAP> </WRAP>
- 
- 
- 
- 
  
 After the components are ordered, the team will take a closer look at the connections required to integrate the electrical systems into the SolidWorks model. This includes ensuring proper placement, wiring paths, and compatibility between components. After the components are ordered, the team will take a closer look at the connections required to integrate the electrical systems into the SolidWorks model. This includes ensuring proper placement, wiring paths, and compatibility between components.
  
 Following this, the complete assembly will be divided into individual parts. Based on these, technical drawings and molds will be created to support the manufacturing and assembly process. Following this, the complete assembly will be divided into individual parts. Based on these, technical drawings and molds will be created to support the manufacturing and assembly process.
- 
- 
- 
- 
- 
  
 (//ii//) material selection; (//ii//) material selection;
Line 229: Line 256:
 (//v//) colour palette. (//v//) colour palette.
  
-=== Smart System === 
  
-== Software ==+=== 7.7.2 Smart System === 
 + 
 +== 7.7.2.1 Software == 
 Describe in detail the:  Describe in detail the: 
 (//i//) use cases or user stories for the smart device and app; (//i//) use cases or user stories for the smart device and app;
Line 237: Line 266:
 (//iii//) component diagram. (//iii//) component diagram.
  
-=== Packaging ===+ 
 +=== 7.7.3 Packaging === 
 Present and explain the: Present and explain the:
 (//i//) initial packaging drafts; (//i//) initial packaging drafts;
 (//i//i) detailed drawings; (//i//i) detailed drawings;
 (//iii//) 3D model with load and stress analysis, if applicable. (//iii//) 3D model with load and stress analysis, if applicable.
-==== Prototype ====+ 
 + 
 +==== 7.8 Prototype ====
  
 Refer main changes in relation to the designed solution. Refer main changes in relation to the designed solution.
  
-=== Structure ===+ 
 +=== 7.8.1 Structure === 
 Detail and explain any changes made in relation to the designed solution, including structural downscaling, different materials, parts, etc. Detail and explain any changes made in relation to the designed solution, including structural downscaling, different materials, parts, etc.
  
-=== Hardware ===+ 
 +=== 7.8.2 Hardware === 
 Figure {{ref>fig:blackbox_diagram}} presents a block diagram for Screen2Green pot. At the core is an ESP32 board that is working as "brain" of the whole system connecting it with sensors and watering system. Soil moisture sensor gives information through the microcontroller when opening the valve is needed. Additional sensors like temperature one are appearing on the screen of the app user. Figure {{ref>fig:blackbox_diagram}} presents a block diagram for Screen2Green pot. At the core is an ESP32 board that is working as "brain" of the whole system connecting it with sensors and watering system. Soil moisture sensor gives information through the microcontroller when opening the valve is needed. Additional sensors like temperature one are appearing on the screen of the app user.
  
Line 259: Line 296:
 </WRAP> </WRAP>
  
- +The electrical system presented in Figure {{ref>fig:Electrical}} starts with a 12 V DC power source connected through a DC jack to provide the high voltage required for the mechanical irrigation hardware - relay module. A buck converter is used because the microcontroller operates on 5 V and requires a significantly lower voltage than the main power line to prevent component damage. The soil moisture and temperature sensors are working on 3.3 V provided by the ESP32 pins to maintain safe logic levels and ensure accurate data collection from the plant environment. A 4.7 kΩ resistor is included for the temperature sensor to ensure signal pull up stability which is necessary for clear digital communication. A relay module is present to act as an electronic switch, because the ESP32 can only output low power signals and cannot directly drive the high current 12 V DC solenoid valve. The solenoid valve is the component responsible for releasing water from the tank through a gravity flow mechanism. A  diode is installed for protection to prevent from spikes and avoid damaging the relay or microcontroller when the valve shuts off.
- +
-The electrical system presented in Figure {{ref>fig:Electrical}} starts with a <color #ed1c24>12VDC</color> power source connected through a DC jack to provide the high voltage required for the mechanical irrigation hardware - relay module. A buck converter is used because the microcontroller operates on <color #ed1c24>5V</color> and requires a significantly lower voltage than the main power line to prevent component damage. The soil moisture and temperature sensors are working on <color #ed1c24>3.3V</color> provided by the ESP32 pins to maintain safe logic levels and ensure accurate data collection from the plant environment. A <color #ed1c24>4.7k</color> resistor is included for the temperature sensor to ensure signal pull up stability which is necessary for clear digital communication. A relay module is present to act as an electronic switch, because the ESP32 can only output low power signals and cannot directly drive the high current <color #ed1c24>12VDC</color> solenoid valve. The solenoid valve is the component responsible for releasing water from the tank through a gravity flow mechanism. A  diode is installed for protection to prevent from spikes and avoid damaging the relay or microcontroller when the valve shuts off.+
  
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:Electrical> <figure fig:Electrical>
-{{ :report:elschem.png |{{:img |Electrical}}+{{ :report:screenshot_2026-04-29_at_20.55.29.png?1000  |{{:img |Electrical}}
 <caption>Electrical Schematic</caption> <caption>Electrical Schematic</caption>
 </figure> </figure>
 </WRAP> </WRAP>
- 
  
 Table {{ref>Components}} lists each hardware component with a direct link to a local Portuguese provider to guarantee that every part is verified for regional availability and technical compatibility. Values are maximum or peak values. Table {{ref>Components}} lists each hardware component with a direct link to a local Portuguese provider to guarantee that every part is verified for regional availability and technical compatibility. Values are maximum or peak values.
Line 276: Line 310:
 <caption>Components list</caption> <caption>Components list</caption>
 ^ Component ^ Product link ^  Voltage (V) ^  Current (mA) ^  Power (W)^ ^ Component ^ Product link ^  Voltage (V) ^  Current (mA) ^  Power (W)^
-|Power Supply <color #ed1c24>12VDC 2A</color>|https://mauser.pt/035-2829/fonte-de-alimentacao-12vdc-2-0a-24w-5-5x2-1mm|  12|  2000|  24| +|Power Supply 12 V DC 2 A|https://mauser.pt/035-2829/fonte-de-alimentacao-12vdc-2-0a-24w-5-5x2-1mm|  12|  2000|  24| 
-|Solenoid Valve <color #ed1c24>12VDC</color>|https://mauser.pt/096-8157/electrovalvula-solenoide-12vdc-450ma-g1-2-nc|  12|  450|  5.4|+|Solenoid Valve 12 V DC|https://mauser.pt/096-8157/electrovalvula-solenoide-12vdc-450ma-g1-2-nc|  12|  450|  5.4|
 |Buck Converter (Step-Down)|https://mauser.pt/096-8732/modulo-mini-conversor-step-down-uin-4-5-28v-uout-0-8-20v-3a-lm2596s-mp2307dn|  12|  3000|  15.00| |Buck Converter (Step-Down)|https://mauser.pt/096-8732/modulo-mini-conversor-step-down-uin-4-5-28v-uout-0-8-20v-3a-lm2596s-mp2307dn|  12|  3000|  15.00|
 |ESP32|https://mauser.pt/096-8744/modulo-esp32-wroom-nodemcu-wifi-cp2102|  5|  240|  1.2| |ESP32|https://mauser.pt/096-8744/modulo-esp32-wroom-nodemcu-wifi-cp2102|  5|  240|  1.2|
Line 287: Line 321:
 </table> </table>
  
-Table {{ref>Power}} presents the power table for the system to show the specific voltage and current values required to maintain safety under both normal and maximum load. These numbers are necessary to confirm that the <color #ed1c24>12VDC</color> source provides enough energy to operate the ESP32 and the solenoid valve simultaneously without failing.+Table {{ref>Power}} presents the power table for the system to show the specific voltage and current values required to maintain safety under both normal and maximum load. These numbers are necessary to confirm that the 12 V DC source provides enough energy to operate the ESP32 and the solenoid valve simultaneously without failing. 
 <table Power> <table Power>
 <caption>Power Table</caption> <caption>Power Table</caption>
 ^ Equipment ^  Voltage [V] ^  I_normal [A] ^  I_max [A] ^  P_normal [W] ^  P_max [W] ^ ^ Equipment ^  Voltage [V] ^  I_normal [A] ^  I_max [A] ^  P_normal [W] ^  P_max [W] ^
-| Solenoid Valve <color #ed1c24>12VDC</color> |  12 |  0 |  0.45 |  0 |  5.4 |+| Solenoid Valve 12 V DC |  12 |  0 |  0.45 |  0 |  5.4 |
 | ESP32 Development Board |  5 |  0.08 |  0.24 |  0.4 |  1.2 | | ESP32 Development Board |  5 |  0.08 |  0.24 |  0.4 |  1.2 |
 | Relay Module (1-ch) |  5 |  0.005 |  0.075 |  0.025 |  0.375 | | Relay Module (1-ch) |  5 |  0.005 |  0.075 |  0.025 |  0.375 |
Line 300: Line 335:
 </table> </table>
  
-=== Software ===+ 
 +=== 7.8.3 Software === 
 This project consists of a hardware product, being the growth pod, and an application. This app's intention is to help users improve their productivity and allow for quick monitoring on the plant and the growth pod. This project consists of a hardware product, being the growth pod, and an application. This app's intention is to help users improve their productivity and allow for quick monitoring on the plant and the growth pod.
  
-== The concept ==+ 
 +== 7.8.3.1 The concept == 
 Using the app, the user can temporarily remove any form of distraction. Whether it's in the form of notifications, or in the form of opening regular apps, the user won't be able to access these when in a focus session. A focus session is a period of time that the user sets manually using the app that helps them to focus on things outside of the screen. When the user respects the focus session and stays away from the phone for the set amount of time, the plant will continue to grow flawlessly. However, when the user decides to violate this session and end the time prematurely, this will get communicated with the growth pod and the plant's growth will get hindered. The user will be able to change certain settings to allow the usage of certain applications. This idea was brought forward to allow users who need social media for work purposes to still be able to use the app. Using the app, the user can temporarily remove any form of distraction. Whether it's in the form of notifications, or in the form of opening regular apps, the user won't be able to access these when in a focus session. A focus session is a period of time that the user sets manually using the app that helps them to focus on things outside of the screen. When the user respects the focus session and stays away from the phone for the set amount of time, the plant will continue to grow flawlessly. However, when the user decides to violate this session and end the time prematurely, this will get communicated with the growth pod and the plant's growth will get hindered. The user will be able to change certain settings to allow the usage of certain applications. This idea was brought forward to allow users who need social media for work purposes to still be able to use the app.
  
Line 312: Line 351:
 Finally, the application will give the user exercises to minimize their screen time even further. An example is to tell the user to walk a certain amount of steps outside, which will be monitored and checked in realtime. Finally, the application will give the user exercises to minimize their screen time even further. An example is to tell the user to walk a certain amount of steps outside, which will be monitored and checked in realtime.
  
-== The design ==+ 
 +== 7.8.3.2 The design == 
 Before developing, the developer of the team created a high-fidelity wireframe to base the project on. The design of this wireframe is inspired by Liven, Forest and minimalist phone. This wireframe was also used to initiate user testing and to get feedback on the design choices and user flow. Below are listed the pages and the motivation behind the design of each page, as well as how the user testing had impact on it. Before developing, the developer of the team created a high-fidelity wireframe to base the project on. The design of this wireframe is inspired by Liven, Forest and minimalist phone. This wireframe was also used to initiate user testing and to get feedback on the design choices and user flow. Below are listed the pages and the motivation behind the design of each page, as well as how the user testing had impact on it.
  
 Figure {{ref>fig:splash}} is a screenshot of the app’s initial onboarding and authentication screen shown when the user opens the application for the first time. It prompts the user to either create a new account or log in with an existing one, giving an early preview of the app’s visual design language. The registration process is intentionally minimal, requiring only a name, email address, and password. No external authentication services such as Google Sign-In are integrated, ensuring a fully consistent and self-contained authentication interface aligned with the overall app design. Figure {{ref>fig:splash}} is a screenshot of the app’s initial onboarding and authentication screen shown when the user opens the application for the first time. It prompts the user to either create a new account or log in with an existing one, giving an early preview of the app’s visual design language. The registration process is intentionally minimal, requiring only a name, email address, and password. No external authentication services such as Google Sign-In are integrated, ensuring a fully consistent and self-contained authentication interface aligned with the overall app design.
 The design emphasizes simplicity and consistency, requiring only essential user information (name, email, and password) and avoiding third-party authentication services to maintain a unified user experience. The design emphasizes simplicity and consistency, requiring only essential user information (name, email, and password) and avoiding third-party authentication services to maintain a unified user experience.
 +
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:splash> <figure fig:splash>
 {{ :report:app:wireframe:splash.png?nolink&400 |}} {{ :report:app:wireframe:splash.png?nolink&400 |}}
-<caption>Authentication screen</caption>+<caption>Screenshot of the wireframe's authentication page.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 326: Line 368:
 /*Below are listed the several design choices.*/ /*Below are listed the several design choices.*/
  
-Firstly, the app uses a mix of neutral colors and green. Depending on the chosen theme, the user will see the app in a mix of white and green or black and green. Green is proven to calm the mind and make a person more relaxed. Secondly, this color is linked to nature. [(cherry2025colorgreen)] These 2 factors make it a perfect choice for this certain project. It is suggested that green boosts health and motivation, but this doesn't have grounded proof.+Firstly, the app uses a mix of neutral colors and green. Depending on the chosen theme, the user will see the app in a mix of white and green or black and green. Green is proven to calm the mind and make a person more relaxed. Secondly, this color is linked to nature [(cherry2025colorgreen)]. These 2 factors make it a perfect choice for this certain project. It is suggested that green boosts health and motivation, but this doesn't have grounded proof.
  
 Secondly, the app uses round edges. It's proven that the roundness of a corner is linked to the brightness of that same corner [(eltazy2023roundedcorners)]. This means that the sharper a corner is, the brighter the human eye perceives it. Brightness is then linked to the amount of neurons that get spiked when looking at it, meaning that the roundness of a corner affects the focus of a user. Rounder edges are more relaxing to the brain, they allow the user to focus more on the content of the app. Secondly, the app uses round edges. It's proven that the roundness of a corner is linked to the brightness of that same corner [(eltazy2023roundedcorners)]. This means that the sharper a corner is, the brighter the human eye perceives it. Brightness is then linked to the amount of neurons that get spiked when looking at it, meaning that the roundness of a corner affects the focus of a user. Rounder edges are more relaxing to the brain, they allow the user to focus more on the content of the app.
Line 332: Line 374:
 Figure {{ref>fig:connectpod}} is a screenshot of the app interface showing the post-login setup screen where users are prompted to connect their account to a growth pod for the first time. Each growth pod is provided with a unique QR code and a corresponding alphanumeric code. The application allows users to activate their device camera to scan the QR code, automatically linking the growth pod to their account. Alternatively, if scanning is not possible, users can manually enter the alphanumeric code as a backup method to complete the connection process. Figure {{ref>fig:connectpod}} is a screenshot of the app interface showing the post-login setup screen where users are prompted to connect their account to a growth pod for the first time. Each growth pod is provided with a unique QR code and a corresponding alphanumeric code. The application allows users to activate their device camera to scan the QR code, automatically linking the growth pod to their account. Alternatively, if scanning is not possible, users can manually enter the alphanumeric code as a backup method to complete the connection process.
 This post-login connection screen allows users to link their accounts to a growth pod using either a QR code scan or a manual alphanumeric code entry as an alternative pairing method. This post-login connection screen allows users to link their accounts to a growth pod using either a QR code scan or a manual alphanumeric code entry as an alternative pairing method.
 +
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:connectpod> <figure fig:connectpod>
 {{ :report:app:wireframe:connect_to_pod.png?nolink&400 |}} {{ :report:app:wireframe:connect_to_pod.png?nolink&400 |}}
-<caption>Post-login connection screen</caption>+<caption>Screenshot of the wireframe's post-login connection page.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 343: Line 386:
 Figure {{ref>fig:plantstatus}} is a screenshot of the app interface showing the plant status page that users are redirected to after successfully connecting their account to a growth pod. This page functions as a central monitoring dashboard where users can view both the growth pod details and the plant currently growing inside it. Key plant and system statistics are displayed in small information blocks arranged in a grid layout, allowing users to quickly understand the most important data at a glance without needing to scroll. Figure {{ref>fig:plantstatus}} is a screenshot of the app interface showing the plant status page that users are redirected to after successfully connecting their account to a growth pod. This page functions as a central monitoring dashboard where users can view both the growth pod details and the plant currently growing inside it. Key plant and system statistics are displayed in small information blocks arranged in a grid layout, allowing users to quickly understand the most important data at a glance without needing to scroll.
 This plant monitoring dashboard  displays the status of the growth pod and plant in a compact grid of key statistics for quick overview and easy readability. This plant monitoring dashboard  displays the status of the growth pod and plant in a compact grid of key statistics for quick overview and easy readability.
 +
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:plantstatus> <figure fig:plantstatus>
 {{ :report:app:wireframe:plant_status.png?nolink&400 |}} {{ :report:app:wireframe:plant_status.png?nolink&400 |}}
-<caption>Plant monitoring dashboard</caption>+<caption>Screenshot of the wireframe's plant monitoring dashboard.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 355: Line 399:
 <figure fig:focus> <figure fig:focus>
 {{ :report:app:wireframe:focus_timer.png?nolink&400 |}} {{ :report:app:wireframe:focus_timer.png?nolink&400 |}}
-<caption>This figure shows the focus session screen, where users can configure timed focus sessions, manage distraction blocking rules, and optionally use the Pomodoro technique for structured work and rest intervals.</caption>+<caption>Screenshot of the wireframe's focus session page before starting a focus session.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 365: Line 409:
 Starting a focus session will generate an affirmative phrase that is also intended to keep the user motivated. This phrase will stay the same throughout the entire session and the user will not be able to regenerate it. This decision was made to avoid that the user wil get distracted by constantly regenerating this phrase. Starting a focus session will generate an affirmative phrase that is also intended to keep the user motivated. This phrase will stay the same throughout the entire session and the user will not be able to regenerate it. This decision was made to avoid that the user wil get distracted by constantly regenerating this phrase.
  
-Figure {{ref>fig:activefocus}} is a screenshot of the timer page when a session has been started. Like mentioned before, this page has a minimal amount of elements to avoid any distractions.+Figure {{ref>fig:activefocus}} is a screenshot of the timer page when a session has been started. Like mentioned before, this page has a minimal amount of elements to avoid any distractions in order to maintain a distraction-free user experience.
  
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:activefocus> <figure fig:activefocus>
 {{ :report:app:wireframe:active_focus_timer.png?nolink&400 |}} {{ :report:app:wireframe:active_focus_timer.png?nolink&400 |}}
-<caption>This figure shows the active focus session screen, featuring only the remaining time, a generated motivational phrase, and an option to end the session early in order to maintain a distraction-free user experience.</caption>+<caption>Screenshot of the wireframe's focus session page after starting a focus session.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
  
-Figure {{ref>fig:journey}} is a screenshot of the app interface showing the user’s focus history page. This page is designed to motivate the user and visualise their progress over time. First, it displays the user’s focusing streak together with a generated motivational phrase. Second, it shows the total amount of time the user has spent growing their plant since the initial download, which is also visualised across multiple days in a graph to highlight the user’s most productive periods. Third, the page includes a text input block where the user can log how they feel. This feature is included because writing things down can provide clarity and improve productivity and motivation [(krueger2024writing)].+Figure {{ref>fig:journey}} is a screenshot of the app interface showing the user’s focus history page. This page is designed to motivate the user and visualise their progress over time. First, it displays the user’s focusing streak together with a generated motivational phrase. Second, it shows the total amount of time the user has spent growing their plant since the initial download, which is also visualised across multiple days in a graph to highlight the user’s most productive periods. Third, the page includes a text input block where the user can log how they feel. This journalistic feature is included because writing things down can provide clarity and improve productivity and motivation [(krueger2024writing)]. 
  
 <WRAP centeralign> <WRAP centeralign>
 <figure fig:journey> <figure fig:journey>
 {{ :report:app:wireframe:journey.png?nolink&400 |}} {{ :report:app:wireframe:journey.png?nolink&400 |}}
-<caption>This figure shows the focus history page, including the user’s streak with a motivational phrase, total accumulated focus time displayed both numerically and in a graph, and a journaling section where users can record their thoughts and feelings to support motivation and reflection.</caption>+<caption>Screenshot of the wireframe's focus history page.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 388: Line 432:
 <figure fig:profile> <figure fig:profile>
 {{ :report:app:wireframe:profile.png?nolink&400 |}} {{ :report:app:wireframe:profile.png?nolink&400 |}}
-<caption>This figure shows the profile page, where users can access settings, manage their blocked applications list, and log out of the application.</caption>+<caption>Screenshot of the wireframe's profile page.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 397: Line 441:
 <figure fig:garden> <figure fig:garden>
 {{ :report:app:wireframe:garden.png?nolink&400 |}} {{ :report:app:wireframe:garden.png?nolink&400 |}}
-<caption>This figure shows the community garden page, where users can share and view plant progress posts without interaction features such as likes or comments to avoid distraction and negative psychological impact.</caption>+<caption>Screenshot of the wireframe's page for the social zone.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 417: Line 461:
 First, the pod connection page. First, the pod connection page.
 Figure {{ref>comparison_pod_connection}} illustrates the difference between 2 versions of the page on the app where the user connects the app to a growth pod. The left picture shows the version before user testing, the right showing the version after user testing and feedback. Figure {{ref>comparison_pod_connection}} illustrates the difference between 2 versions of the page on the app where the user connects the app to a growth pod. The left picture shows the version before user testing, the right showing the version after user testing and feedback.
 +
 <WRAP centeralign> <WRAP centeralign>
 <figure comparison_pod_connection> <figure comparison_pod_connection>
 <WRAP group> <WRAP group>
 <WRAP half column> <WRAP half column>
-{{:report:app:wireframe:connect_to_pod_pre.png?nolink&400 |}}+{{ :report:app:wireframe:connect_to_pod_pre.png?nolink&400 |}}
 </WRAP> </WRAP>
 <WRAP half column> <WRAP half column>
-{{:report:app:wireframe:connect_to_pod.png?nolink&400|}}+{{ :report:app:wireframe:connect_to_pod.png?nolink&400 |}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-<caption>Comparison of the pod connection page before and after user testing</caption>+<caption>Comparison of the wireframe's pod connection page before and after user testing.</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 434: Line 479:
 Second, the active timer page. Second, the active timer page.
 Figure {{ref>comparison_active_focus_timer}} illustrates the difference between 2 versions of the page on the app where the user's focus timer is actively running. The left picture shows the version before user testing, the right showing the version after user testing and feedback. Figure {{ref>comparison_active_focus_timer}} illustrates the difference between 2 versions of the page on the app where the user's focus timer is actively running. The left picture shows the version before user testing, the right showing the version after user testing and feedback.
 +
 <WRAP centeralign> <WRAP centeralign>
 <figure comparison_active_focus_timer> <figure comparison_active_focus_timer>
 <WRAP group> <WRAP group>
 <WRAP half column> <WRAP half column>
-{{:report:app:wireframe:active_focus_timer_pre.png?nolink&400 |}}+{{ :report:app:wireframe:active_focus_timer_pre.png?nolink&400 |}}
 </WRAP> </WRAP>
 <WRAP half column> <WRAP half column>
-{{:report:app:wireframe:active_focus_timer.png?nolink&400|}}+{{ :report:app:wireframe:active_focus_timer.png?nolink&400 |}}
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-<caption>Comparison of the active timer page before and after user testing</caption>+<caption>Comparison of the wireframe's active timer page before and after user testing</caption>
 </figure> </figure>
 </WRAP> </WRAP>
Line 450: Line 496:
  
  
-== The choice of software ==+== 7.8.3.3 The choice of software == 
 Originally, the chosen software was a mix of Ionic Vue, Capacitor and Google Firebase. Ionic Vue is a framework that allows developers to build app-like user interfaces using HTML, CSS and Javascript. Capacitor is a transformation layer that translates Ionic code into native code like Kotlin for android. Lastly, Firebase is a cloud-based back end service that allows developers to create a document-based database and to implement authentication, both without needing to create and host their own back end. Originally, the chosen software was a mix of Ionic Vue, Capacitor and Google Firebase. Ionic Vue is a framework that allows developers to build app-like user interfaces using HTML, CSS and Javascript. Capacitor is a transformation layer that translates Ionic code into native code like Kotlin for android. Lastly, Firebase is a cloud-based back end service that allows developers to create a document-based database and to implement authentication, both without needing to create and host their own back end.
  
Line 457: Line 504:
   * Ionic Vue is heaviliy dependent on APIs that communicate with the phone's native components. This middle-layer makes compliation even slower, leading to slower performance when the app grows bigger.   * Ionic Vue is heaviliy dependent on APIs that communicate with the phone's native components. This middle-layer makes compliation even slower, leading to slower performance when the app grows bigger.
   * Querying deeply nested data in Firebase is very difficult and requires longer segments of code which in turn slow down the phone even more.   * Querying deeply nested data in Firebase is very difficult and requires longer segments of code which in turn slow down the phone even more.
-  * Firebase has had multiple outages over the past 2 years, making it unreliable. [(firebase_status)]+  * Firebase has had multiple outages over the past 2 years, making it unreliable [(firebase_status)].
  
 Because of these reasons, the app will be developed using Flutter and Supabase instead. Because of these reasons, the app will be developed using Flutter and Supabase instead.
Line 468: Line 515:
  
 In summary, these new choices of software will provide more performance, scalability, energy efficiency and developer efficiency. Since the user will keep their phone open on the focus screen, the battery can't suffer under the chosen architecture. In summary, these new choices of software will provide more performance, scalability, energy efficiency and developer efficiency. Since the user will keep their phone open on the focus screen, the battery can't suffer under the chosen architecture.
-=== Tests & Results === 
  
-== Hardware tests ==+ 
 +=== 7.8.4 Tests & Results === 
 + 
 +== 7.8.4.1 Hardware tests ==
  
 Perform the hardware tests specified in [[report:intro#tests|Tests]]. These results are usually presented in the form of tables with two columns: Functionality and Test Result (Pass/Fail). Perform the hardware tests specified in [[report:intro#tests|Tests]]. These results are usually presented in the form of tables with two columns: Functionality and Test Result (Pass/Fail).
  
-== Software tests ==+ 
 +== 7.8.4.2 Software tests ==
  
 Software tests comprise:  Software tests comprise: 
Line 481: Line 531:
 (iii) usability tests according to the [[https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html|System Usability Scale]]. (iii) usability tests according to the [[https://www.usability.gov/how-to-and-tools/methods/system-usability-scale.html|System Usability Scale]].
        
-==== Summary ====+    
 +==== 7.9 Summary ==== 
 //Provide here the conclusions of this chapter and make the bridge to the next chapter.// //Provide here the conclusions of this chapter and make the bridge to the next chapter.//
 +
 +
  • report/dvp.1776280421.txt.gz
  • Last modified: 2026/04/15 20:13
  • by epsatisep