Week 12 Updates

src/views/Week12.vue

@@ -133,8 +133,111 @@
         </figure>
       </div>
       <div class="image-row">
-        <img class="screenshot thumbnail" src='../assets/images/week9/testGreen.jpg' alt='green'>
+            <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/testBlue.jpg' alt='blue'>
+              <figcaption>When I put a finger on Photoresistor module no light is received, input value is low, so RGB Led set to Blue cold color and no tone send to Buzzer</figcaption>
+            </figure>
+            <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/testGreen.jpg' alt='green'>
+              <figcaption>When I keep the finger above Photoresistor module with more light is available, input value is in range 300...800, so RGB Led set to Green color and low tone is generated</figcaption>
+            </figure>
+            <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/testRed.jpg' alt='red'>
+              <figcaption>When I remove the finger from Photoresistor module and a lot of light is available, input value is >800, so RGB Led set to Red color and high tone is generated</figcaption>
+            </figure>
       </div>
+      <div>
+              <figure>
+                <video controls style="max-width: 340px">
+                  <source src="../assets/images/week9/testVideo.mp4" type="video/mp4">>
+                </video>
+              <figcaption>Video demonstration</figcaption>
+            </figure>
+          </div>
+          <p>The source code with comments of the example above can be found on 
+            <a href="https://fabacademy.org/2024/labs/ostriv/students/iryna-porokhovnichenko/#/week9">Week 9. Output Devices page</a></p>
+      <ul>
+        <h2>Wiring and programming general idea</h2>
+        <li> How to select analog pins?
+          <ul>
+            <li>To work with photoresistor we need to find the pins on our board which support analog input using the analogRead(). And as I see 
+              from the PINOUT picture of the board, there are 4 pins, which support Analog signal reading, and colored in brown. 
+              <div class="image-row">
+                <figure class="image-container">
+                  <img class="thumbnail" style="width: 550px;" src='../assets/images/week9/XIAOrp2040PINOUTS.png' alt='schematic'>
+                  <figcaption>XIAO Pinout</figcaption>
+                </figure>
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li>Luckily our PCB board, created in Week 4, has connection header which has traces to A2 pin, so I will use this board to show, how to connect 
+          the photoresistor cell and program it
+        </li>
+        <li>Connection part:
+          Photoresistor module which I created has only 3 pins. I created a picture which show the current connection. With such setup, we will
+          get HIGH values at light and LOW values at dark. I created an Arduino script, which reads the values from analog 
+          <div class="image-row">
+            <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/ConnectionExplained.jpg' alt='modules2'>
+              <figcaption>The explanation of the current connection</figcaption>
+           </figure>
+           <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/wiring.jpg' alt='modules2'>
+              <figcaption>The picture of the wiring. Grey jumper->GGND, BLUE->A2 signal, RED->3.3V</figcaption>
+           </figure>
+          </div>
+          
+           Arduino code:
+           <pre><code>
+void setup() {
+  Serial.begin(9600);  
+  pinMode(A2, INPUT);  // Set A2 as input
+}
+
+void loop() {
+  int ldrValue = analogRead(A2);  // Read analog value from A2
+  float voltage = ldrValue * (3.3 / 1023.0);  // Convert to voltage (0-3.3V)
+
+  Serial.print("LDR Value: ");
+  Serial.print(ldrValue);
+  Serial.print("  Voltage: ");
+  Serial.print(voltage);
+  Serial.println(" V");
+
+  delay(500);  
+}            
+           </code></pre>
+        </li>
+        <li>Reading results:
+          <div class="image-row">
+            <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/results1.jpg' alt='modules2'>
+              <figcaption>Covered, ~1.96V</figcaption>
+           </figure>
+           <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/results2.jpg' alt='modules2'>
+              <figcaption>Room light, ~2.8V</figcaption>
+           </figure>
+           <figure class="image-container">
+              <img class="thumbnail" src='../assets/images/week9/results3.jpg' alt='modules2'>
+              <figcaption>Flashlight, ~3.18V</figcaption>
+           </figure>
+          </div>
+          <div>
+              <figure>
+                <video controls style="max-width: 340px">
+                  <source src="../assets/images/week9/testing.mp4" type="video/mp4">>
+                </video>
+              <figcaption>Video demonstration</figcaption>
+            </figure>
+          </div>
+          <p><strong>Results:</strong> So you can see that I got minimum voltage using flashlight and maximum, when photocell is covered.</p>
+          <p><strong>Problem?:</strong> I expected to get the value ~0 when covered, but I guess that maybe I didn't get it because when I tried to
+          solder the pin header to the board it didn't have a nice area for it and the connection with 3.3V seems weak. Or maybe the photoresistor
+          element degraded, but I think the first option is more probable. </p>
+        </li>
+      </ul>
       <h3>Conclusions:</h3>
     <p>I learned how to create modules for different input and output devices to use them separately in other projects.</p>
     <p>I learned about Voltage divider. </p>