Week 8 add video

src/views/Week8.vue

@@ -224,9 +224,18 @@
             </div>
           </li>
           <li>
-            To check the preview, we need to press <strong>F1</strong> and the laser will show us the picture projected on the material.
-          </li>
-          <div class="image-row">
+            To check the preview, we need to press <strong>F1</strong> and the laser will show us the picture projected on the material. 
+            And then press <strong>F2</strong> to start the process. I needed to repear it many times, also changed Hutch to Cross Hutch to 
+            work not in only one direction.
+            <div class="image-row">
+            <figure class="image-container">
+                <video controls style="width: 550px">
+                  <source src="../assets/images/week8/previewMode.mp4" type="video/mp4">>
+                </video>
+                <figcaption>Preview mode after pressing F1</figcaption>
+            </figure>
+            </div>
+            <div class="image-row">
               <figure class="image-container">
                 <img class="thumbnail" src='../assets/images/week8/startingLaser.jpg' alt='Laser starting'>
                 <figcaption>Starting the laser is the same as for machine from Week 3.</figcaption>
@@ -239,8 +248,291 @@
                 <img class="thumbnail" src='../assets/images/week8/laserFocus2.jpg' alt='Laser focus'>
                 <figcaption>Adjusted focus</figcaption>
               </figure>
+          </div>
+          <div class="image-row">
+             <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/safe1.jpg' alt='Laser focus'>
+                <figcaption>Checking process</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/safe2.jpg' alt='Laser focus'>
+                <figcaption>Checking process</figcaption>
+              </figure>
+          </div>
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/1run.jpg' alt='Laser starting'>
+                <figcaption>After 1st run</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/prog1.jpg' alt='Laser focus'>
+                <figcaption>More runs...</figcaption>
+              </figure>
+          </div>
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/prog2.jpg' alt='Laser focus'>
+                <figcaption>More runs...</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/prog3.jpg' alt='Laser focus'>
+                <figcaption>More runs...</figcaption>
+              </figure>
+          </div>
+          <div class="image-row">
+            <figure class="image-container">
+                <video controls style="width: 550px">
+                  <source src="../assets/images/week8/almostDone.mp4" type="video/mp4">>
+                </video>
+                <figcaption>Updated figure and the final result cutting</figcaption>
+              </figure>
+          </div>
+          </li>
+          <li>
+            So I got my testing board and I needed to check the traces quality.
+            <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/testBoardFinal.jpg' alt='Laser focus'>
+                <figcaption>Final version of test board, created to check the process and training</figcaption>
+              </figure>
+            </div>
+          </li>
+          <li>
+            I created the Main board in the same way as the previous one, this board I will use then. It's created from the small
+            piece of FR2 as I didn't have an tool to cut the board on that day, as CNC Router became unavailable.
+            <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/originalOne.jpg' alt='Laser focus'>
+                <figcaption>Main board I will use </figcaption>
+              </figure>
+            </div>
+            <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/checking1.jpg' alt='Laser focus'>
+                <figcaption>Testing the traces with multimeter</figcaption>
+              </figure>>
             </div>
+            <div class="image-row">
+            <figure class="image-container">
+                <video controls style="width: 550px">
+                  <source src="../assets/images/week8/finalLaser.mp4" type="video/mp4">>
+                </video>
+                <figcaption>Updated figure and the final result cutting</figcaption>
+            </figure>
+          </div>
+          </li>
+          <li>
+            Then I need to make holes. I needed to do it manually as CNC Router was not available. Good that I have the test board - I trained myself on it.
+            And when became confortable I drilled the holes of the main board.
+            <div class="image-row">
+            <figure class="image-container">
+                <video controls style="width: 550px">
+                  <source src="../assets/images/week8/drill.mp4" type="video/mp4">>
+                </video>
+                <figcaption>Updated figure and the final result cutting</figcaption>
+            </figure>
+          </div>
+          </li>
+        <li>
+          Soldering part started. 
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/preparation.jpg' alt='Laser focus'>
+                <figcaption>Preparation</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/readyBoard1.jpg' alt='Laser focus'>
+                <figcaption>Ready board</figcaption>
+              </figure>
+          </div>
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/readyBoard2.jpg' alt='Laser focus'>
+                <figcaption>Ready board<</figcaption>
+              </figure>
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/readyBoard3.jpg' alt='Laser focus'>
+                <figcaption>Ready board<</figcaption>
+              </figure>
+          </div>
+        </li>
+        <li>I became curius how the laser will cut the test board for Week 4 we used for CNC Router testing of different tools to pick the correct one. I made
+          2 tests - the 1st one burned out. It's because the speed - it was too fast and the board didn't has time to cool. The 2nt try is better. I used lower
+          speed.
+          <div class="image-row">
+              <figure class="image-container">
+                <img class="thumbnail" src='../assets/images/week8/testTestTest.jpg' alt='Test'>
+                <figcaption>Just curious try</figcaption>
+              </figure>
+          </div>
+        </li>
+        <li>
+          Final part - programming and connection of 2 boards. So I took a board from Week 4. It has a button. So my ideas is
+          to controll the display of my new board with pressing the button. E.x., if I press the 1st board button, the 2nd should receive 
+          the signal and draw the image. To achive this, I needed to connect D2 pin of the 1t board with D2 pin of the 2nd board and also connect 
+          GND pins of both boards.I used jumpers for it. For sketch I picked very nice example from Adafruit folder, but used only 1 function
+          from it and modified it to not animate in infinite loop. 
+          <h4>Arduino code of the 1st board</h4>
+          <p>I took the BUTTON example and modified it a bit, it had LED pin, but in my case it will be signal pin.</p>
+          <pre><code>
+            // constants won't change. They're used here to set pin numbers:
+const int buttonPin = D1;  // the number of the pushbutton pin
+const int signalPin = D2;    // the number of the signal pin
+
+// variables will change:
+int buttonState = 0;  // variable for reading the pushbutton status
+
+void setup() {
+  // initialize the LED pin as an output:
+  pinMode(signalPin, OUTPUT);
+  // initialize the pushbutton pin as an input:
+  pinMode(buttonPin, INPUT_PULLUP);
+}
+
+void loop() {
+  // read the state of the pushbutton value:
+  buttonState = digitalRead(buttonPin);
+  Serial.println(buttonState);
+
+  // check if the pushbutton is pressed. If it is, the buttonState is HIGH:
+  if (buttonState == LOW) {
+    // send the ON (HIGH) signal to the 2nd board on:
+    digitalWrite(signalPin, HIGH);
+  } else {
+    // send the OFF signal to the 2nd board
+    digitalWrite(signalPin, LOW);
+  }
+  delay(500);
+}
+          </code></pre>
+          <h4>Arduino code of the 2nd board</h4>
+          <pre><code>
+#include &lt;SPI.h&gt;
+#include &lt;Wire.h&gt;
+#include &lt;Adafruit_GFX.h&gt;
+#include &lt;Adafruit_SSD1306.h&gt;
+
+Adafruit_SSD1306 display(128, 32, &amp;Wire);
+
+Adafruit_SSD1306 display = Adafruit_SSD1306(128, 32, &Wire);
+
+int BUTTON_PIN  = D2;
+
+#define NUMFLAKES     10 // Number of snowflakes in the animation example
+
+#define LOGO_HEIGHT   16
+#define LOGO_WIDTH    16
+static const unsigned char PROGMEM logo_bmp[] =
+{ 0b00000000, 0b11000000,
+  0b00000001, 0b11000000,
+  0b00000001, 0b11000000,
+  0b00000011, 0b11100000,
+  0b11110011, 0b11100000,
+  0b11111110, 0b11111000,
+  0b01111110, 0b11111111,
+  0b00110011, 0b10011111,
+  0b00011111, 0b11111100,
+  0b00001101, 0b01110000,
+  0b00011011, 0b10100000,
+  0b00111111, 0b11100000,
+  0b00111111, 0b11110000,
+  0b01111100, 0b11110000,
+  0b01110000, 0b01110000,
+  0b00000000, 0b00110000 };
+
+
+void setup() {
+  pinMode(BUTTON_PIN, INPUT);
+
+  Serial.begin(9600);
+
+  Serial.println("OLED intialized");
+  display.begin(SSD1306_SWITCHCAPVCC, 0x3C); // Address 0x3C for 128x32
+
+  display.display();
+  delay(1000);
+
+  // Clear the buffer.
+  display.clearDisplay();
+  display.display();
+
+  // text display tests
+  display.setTextSize(1);
+  display.setTextColor(WHITE);
+}
+
+void loop() {
+ Serial.println(digitalRead(BUTTON_PIN));
+
+ if(digitalRead(BUTTON_PIN) == LOW) {
+  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
+
+  // }
+ } else {
+    display.clearDisplay();
+    display.setCursor(0, 0);
+    display.display();
+    delay(1000);
+ }
+  delay(100);
+}
+
+#define XPOS   0 // Indexes into the 'icons' array in function below
+#define YPOS   1
+#define DELTAY 2
+
+void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
+  int8_t f, icons[NUMFLAKES][3];
+
+  // Initialize 'snowflake' positions
+  for(f=0; f< NUMFLAKES; f++) {
+    icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
+    icons[f][YPOS]   = -LOGO_HEIGHT;
+    icons[f][DELTAY] = random(1, 6);
+    Serial.print(F("x: "));
+    Serial.print(icons[f][XPOS], DEC);
+    Serial.print(F(" y: "));
+    Serial.print(icons[f][YPOS], DEC);
+    Serial.print(F(" dy: "));
+    Serial.println(icons[f][DELTAY], DEC);
+  }
+
+  for(int i = 0; i<5; i++) { // loop 5 times
+    display.clearDisplay(); // Clear the display buffer
+
+    // Draw each snowflake:
+    for(f=0; f< NUMFLAKES; f++) {
+      display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);
+    }
+
+    display.display(); // Show the display buffer on the screen
+    delay(100);        // Pause for 1/10 second
+
+    // Then update coordinates of each flake...
+    for(f=0; f< NUMFLAKES; f++) {
+      icons[f][YPOS] += icons[f][DELTAY];
+      // If snowflake is off the bottom of the screen...
+      if (icons[f][YPOS] >= display.height()) {
+        // Reinitialize to a random position, just off the top
+        icons[f][XPOS]   = random(1 - LOGO_WIDTH, display.width());
+        icons[f][YPOS]   = -LOGO_HEIGHT;
+        icons[f][DELTAY] = random(1, 6);
+      }
+    }
+  }
+}
+</code></pre>
+        </li>
         </ol>
+        <H3>Final programmed board</H3>
+        <div class="image-row">
+            <figure class="image-container">
+                  <video controls style="width: 550px">
+                    <source src="../assets/images/week8/programmed.mp4" type="video/mp4">>
+                  </video>
+                  <figcaption>Programmed board</figcaption>
+            </figure>
+          </div>
         <h3>Files</h3>
         <ul>
           <li><a :href="getDownloadLink('amplifier.zip')" download>ZIP archive of KiCAD project</a></li>