Differences

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

--- report:dvp [2026/04/15 20:05] – [Hardware] epsatisep
+++ report:dvp [2026/04/22 19:14] (current) – [Logo and flyer design] team1
@@ Line 17: / Line 17: @@
 ==== Ideation ====
-===Results from the first brainstom and design meeting===
+===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.
-<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 |}}
-<caption><color #ed1c24>sketch brainstorm 1</color></caption>
+<caption>Sketch brainstorm 1</caption>
 </figure>
 </WRAP>
 <WRAP centeralign>
-<figure sketch brainstorm 2>
+<figure sketch_brainstorm_2>
 {{ :report:plant_pot_low_fid_prototype.jpeg?200 |}}
-<caption><color #ed1c24>sketch brainstorm 2</color></caption>
+<caption>Sketch brainstorm 2</caption>
 </figure>
 </WRAP>
 <WRAP centeralign>
-<figure sketch brainstorm 3>
+<figure sketch_brainstorm_3>
 {{ :report:product_sketch.jpeg?200 |}}
-<caption><color #ed1c24>sketch brainstorm 3</color></caption>
+<caption>Sketch brainstorm 3</caption>
 </figure>
 </WRAP>
 <WRAP centeralign>
-<figure sketch brainstorm 4>
+<figure sketch_brainstorm_4>
 {{ :report:sophies_sketch.png?200 |}}
-<caption><color #ed1c24>sketch brainstorm 4</color></caption>
+<caption>Sketch brainstorm 4</caption>
 </figure>
 </WRAP>
@@ Line 65: / Line 67: @@
 == 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.
-<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>
 <figure shape_studies>
 {{ :report:schets_1_jira.jpg |}}
-<caption><color #ed1c24>shape studies</color></caption>
+<caption>Shape studies</caption>
 </figure>
 </WRAP>
@@ Line 79: / Line 83: @@
 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>
 <figure sketch_watertank>
 {{ :report:untitled_artwork_2_.png?600 |}}
-<caption><color #ed1c24>sketch watertank</color></caption>
+<caption>Sketch watertank</caption>
 </figure>
 </WRAP>
@@ Line 89: / Line 95: @@
 ==Final design of the pot==
 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>
 <figure solidworks1>
 {{ :report:schermafbeelding_2026-04-12_102528.png?600 |}}
-<caption><color #ed1c24>solidworks 1</color></caption>
+<caption>Solidworks 1</caption>
 </figure>
 </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>
 <figure render1>
 {{ :report:schermafbeelding_2026-04-12_101643.png?600 |}}
-<caption><color #ed1c24>render 1</color></caption>
+<caption>Render 1</caption>
 </figure>
 </WRAP>
@@ Line 131: / Line 141: @@
 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>
+Figure {{ref>final_sketch}} shows the final design with a clear outer layer, a cork outer structure, and the logo on the pot.
 <WRAP centeralign>
 <figure final_sketch>
@@ Line 139: / Line 150: @@
 </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>
 <figure final_render>
@@ Line 154: / Line 166: @@
 ==== Logo and flyer design ====
-<color #ed1c24>First present the logo rationale, the colour palette, add a figure, etc.</color>
+Our logo is “Screen2Green,” as shown in Figure {{ref>logo}}.
-<color #ed1c24>Figure {{ref>final_render}} ... (explain contents of figure)</color>
+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.
+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.
 <WRAP centeralign>
 <figure flyer>
-{{ :report:schermafbeelding_2026-04-12_204307.png?400 |}}
+{{ :report:schermafbeelding_2026-04-12_204307.png?500 |}}
 <caption>Screen2Green flyer</caption>
 </figure>
@@ Line 196: / Line 222: @@
 */
-<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>
@@ Line 261: / Line 287: @@
-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.
+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.
 <WRAP centeralign>
@@ Line 276: / Line 302: @@
 <caption>Components list</caption>
 ^ 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|
 |ESP32|https://mauser.pt/096-8744/modulo-esp32-wroom-nodemcu-wifi-cp2102|  5|  240|  1.2|
@@ Line 287: / Line 313: @@
 </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>
 <caption>Power Table</caption>
 ^ 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 |
 | Relay Module (1-ch) |  5 |  0.005 |  0.075 |  0.025 |  0.375 |
@@ Line 316: / Line 342: @@
 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.
-<WRAP>
+<WRAP centeralign>
 <figure fig:splash>
-{{:report:app:wireframe:splash.png?nolink&400|}}
+{{ :report:app:wireframe:splash.png?nolink&400 |}}
-<caption>This figure shows the initial authentication screen of the application, where users can either sign up or log in. 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.</caption>
+<caption>Authentication screen</caption>
 </figure>
 </WRAP>
-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.
 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.
-<WRAP>
+<WRAP centeralign>
 <figure fig:connectpod>
-{{:report:app:wireframe:connect_to_pod.png?nolink&400|}}
+{{ :report:app:wireframe:connect_to_pod.png?nolink&400 |}}
-<caption>This figure shows the post-login connection screen where users link their account to a growth pod using either a QR code scan or a manual alphanumeric code entry as an alternative pairing method.</caption>
+<caption>Post-login connection screen</caption>
 </figure>
 </WRAP>
@@ Line 342: / Line 368: @@
 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.
-<WRAP>
+<WRAP centeralign>
 <figure fig:plantstatus>
-{{:report:app:wireframe:plant_status.png?nolink&400|}}
+{{ :report:app:wireframe:plant_status.png?nolink&400 |}}
-<caption>This figure shows the plant monitoring dashboard, where users can view growth pod and plant status information presented in a compact grid of key statistics for quick overview and easy readability.</caption>
+<caption>Plant monitoring dashboard</caption>
 </figure>
 </WRAP>
@@ Line 352: / Line 378: @@
 Figure {{ref>fig:focus}} is a screenshot of the app interface showing the focus session page, which is designed to be the primary feature used by the user. This page allows users to configure and start a focused work session for a selected duration, during which distracting applications and notifications are blocked. The list of blocked distractions can be customized by the user to allow exceptions for apps that may be required for work or study purposes, such as certain social media platforms. Users can choose between a single uninterrupted focus session or a structured focus approach using the Pomodoro technique, which alternates between focus and rest intervals.
-<WRAP>
+<WRAP centeralign>
 <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>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>
 </figure>
 </WRAP>
@@ Line 367: / Line 393: @@
 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.
-<WRAP>
+<WRAP centeralign>
 <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>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>
 </figure>
 </WRAP>
@@ Line 376: / Line 402: @@
 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)].
-<WRAP>
+<WRAP centeralign>
 <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>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>
 </figure>
 </WRAP>
@@ Line 385: / Line 411: @@
 Figure {{ref>fig:profile}} is a screenshot of the app interface showing the profile page. This page serves two main purposes. Firstly, it provides access to all application settings for the user. Secondly, it allows the user to manage and edit their list of blocked applications. Lastly, the page includes an option for the user to log out of the application.
-<WRAP>
+<WRAP centeralign>
 <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>Profile page, where users can access settings, manage their blocked applications list, and log out of the application.</caption>
 </figure>
 </WRAP>
@@ Line 394: / Line 420: @@
 Figure {{ref>fig:garden}} is a screenshot of the app interface showing the community garden page where users can share their plant progress with other users. This page allows users to post a picture of their plant or their progress accompanied by a caption, and also lets users view posts shared by others. Unlike typical social platforms, this community does not include any interactive features such as likes or comments. This design choice is intentional, as any form of interaction could distract the user or negatively affect their mental state.
-<WRAP>
+<WRAP centeralign>
 <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>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>
 </figure>
 </WRAP>
@@ Line 421: / Line 447: @@
 <WRAP group>
 <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 half column>
-{{:report:app:wireframe:connect_to_pod.png?nolink&400|}}
+{{ :report:app:wireframe:connect_to_pod.png?nolink&400 |}}
 </WRAP>
 </WRAP>
@@ Line 438: / Line 464: @@
 <WRAP group>
 <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 half column>
-{{:report:app:wireframe:active_focus_timer.png?nolink&400|}}
+{{ :report:app:wireframe:active_focus_timer.png?nolink&400 |}}
 </WRAP>
 </WRAP>
@@ Line 457: / Line 483: @@
   * 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.
-  * 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.