<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="generator" content="GitLab Pages"> <meta name="description" content="Fab Academy documentation site for Charlotte Fab-C"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="../assets/css/main.css" /> <title>Charlotte Fab-C - Fab Academy</title> </head> <body class="is-preload"> <!-- Wrapper --> <div id="wrapper"> <!-- Main --> <div id="main"> <div class="inner"> <!-- Header --> <header id="header"> <a href="../index.html" class="logo"><strong>Charlotte - FabLab de Charleroi</strong> Fab Academy website</a> <ul class="icons"> <li><a href="https://www.facebook.com/littlebelge" class="icon brands fa-facebook-f" target="_blank"><span class="label">Facebook</span></a></li> <li><a href="https://www.instagram.com/little.belge/" class="icon brands fa-instagram" target="_blank"><span class="label">Instagram</span></a></li> <li><a href="https://gitlab.fabcloud.org/charlotte-vandenbulcke" class="icon brands fa-gitlab" target="_blank"><span class="label">Gitlab</span></a></li> </ul> </header> <!-- Section --> <section id="banner"> <div class="content"> <header class="main"> <h2>4. Electronics Production</h2> </header> <section> <p>This week we learned how to create an electronic board from its cutting on the CNC PCB to soldering the components and finally programming the blinking of a LED light.</p> </section> <hr> <section> <h3>Group assignment</h3> <p>Our assignement was to build a <a href="https://gitlab.fabcloud.org/pub/programmers/quentorres" target="_blank"><strong>microcontroller development "Quentorres" board</strong></a> and make it work by programming the blinking of a LED light</p> <p>We did several tests to choose the right material and tips.</p> <h4>Tip test</h4> <p>We launched a small PCB model on the CNC and used 2 types of tips : a "V" one and an "helocoidal" one.</p> <p>As you can see below, the helicoidal tip is giving a much better and precise result than the "V" one.</p> <span class="image object"> <img src="../images/tips-test.jpg" alt="Picture of 2 PCB engraved by 2 different types of tips." /> </span> <h4>Material test</h4> <p>We also tried out the Quentorres board on 2 different materials : FR1 (phenolic paper) and FR4 (epoxy glass).</p> <p>The Epoxy Glass (first picture below) gives a much better result, that's why we used it to complete this assignment.</p> <span class="image object"> <img src="../images/board-material-epoxy.jpg" alt="Picture of the epoxy PCB." /> </span> <span class="image object"> <img src="../images/board-material-fiber.jpg" alt="Picture of the phenolic paper PCB." /> </span> <h4>Preparing the G-Code files</h4> <p>To get the Quentorres board cut and engraved, we had to prepare the G-Code files that will run the CNC to get the physical base of the board (without its components).</p> <span class="image object"> <a href="https://gitlab.fabcloud.org/pub/programmers/quentorres" target="_blank"> <img src="../images/quentorres-page.jpg" alt="Printscreen showing the Quentorres Fabcloud page." /></a> </span> <p>We prepared the G-Code files in <a href="https://modsproject.org/" target="_blank"><strong>Mods</strong></a>.</p> <p>For that, we saved the Quentorres PNG files that are in the <a href="https://gitlab.fabcloud.org/pub/programmers/quentorres#png-renders" target="_blank"><strong>Fabcloud</strong></a> (no need to rename the files).</p> <span class="image object"> <img src="../images/quentorres-png-images-saving.jpg" alt="Printscreen showing the Quentorres png pictures being saved by a simple right-click." /> </span> <h5>Discovering Mods</h5> <p>The Mods website is simple to use and has a minimalist interface.</p> <span class="image object"> <img src="../images/mods-website.jpg" alt="Printscreen of Mods website homepage." /> </span> <p>To create the G-Code files, you have to right-click on the interface and choose "G-Code > mill 2D PCB". This will open all the parameters you'll need to configure the Quentorres PCB cutting and engraving.</p> <span class="image object"> <img src="../images/mods-new-program-PCB.jpg" alt="Printscreen of Mods process to open the G-Code mill 2D PCB parameters." /> </span> <span class="image object"> <img src="../images/opening-new-program-PCB.jpg" alt="Printscreen of Mods' G-Code mill 2D PCB parameters' interface." /> </span> <p>First we worked on the "<strong>traces</strong>" file by opening it in the "read png" box.</p> <p>To create the traces, we had to insert the path parameters in the "path to G-code" box.</p> <span class="image object"> <img src="../images/path-param.jpg" alt="Printscreen of the path parameters box." /> </span> <ul> <li>cut speed : 175</li> <li>plunge speed : 175</li> <li>jog height : 2</li> <li>spindle : 11000</li> <li>dwell : 0</li> <li>tool : 0</li> <li>coolant : off</li> <li>format : mm</li> </ul> <p>Then we changed the mill raster parameters in the "mill raster 2D" box.</p> <span class="image object"> <img src="../images/mill-raster-param.jpg" alt="Printscreen of the mill raster parameters box." /> </span> <ul> <li>tool diameter : 0.27mm</li> <li>cut depth : 0.1mm</li> <li>max depth : 0.2mm</li> <li>offset number : 2</li> <li>offset stepover : 0.5</li> <li>direction : climb</li> <li>path merge : 1</li> <li>path order : forward</li> <li>sort distance : checked</li> </ul> <p>After entering all the parameters, clicking on "Calculate" (in the bottom of the "mill raster 2D" box) will generate the G-Code file and open a view of the result. This shows where the tool will engrave.</p> <span class="image object"> <img src="../images/offset-number-2-view.jpg" alt="Printscreen of the result's view generated." /> </span> <p>After the "traces" file, we did the same for the "<strong>drill</strong>" file and changed the path parameters by :</p> <ul> <li>cut speed : 175</li> <li>plunge speed : 175</li> <li>jog height : 2</li> <li>spindle : 11000</li> <li>dwell : 0</li> <li>tool : 0</li> <li>coolant : off</li> <li>format : mm</li> </ul> <p>And the mill raster 2D parameters by :</p> <ul> <li>tool diameter : 0.8mm</li> <li>cut depth : 1mm</li> <li>max depth : 1.35mm</li> <li>offset number : 1</li> <li>offset stepover : 0.5</li> <li>direction : climb</li> <li>path merge : 1</li> <li>path order : forward</li> <li>sort distance : checked</li> </ul> <p>Here's how a G-Code looks like when you open it in a simple text computer program :</p> <span class="image object"> <img src="../images/pure-g-code.jpg" alt="Printscreen of a G-Code file opened in a simple text computer program." /> </span> <p>Last but not least, we opened the "<strong>interior</strong>" file and also changed the parameters.</p> <p>Here are the path parameters :</p> <ul> <li>cut speed : 175</li> <li>plunge speed : 175</li> <li>jog height : 2</li> <li>spindle : 11000</li> <li>dwell : 0</li> <li>tool : 0</li> <li>coolant : off</li> <li>format : mm</li> </ul> <p>And the mill raster 2D parameters :</p> <ul> <li>tool diameter : 1mm</li> <li>cut depth : 1mm</li> <li>max depth : 1.35mm</li> <li>offset number : 1</li> <li>offset stepover : 0.5</li> <li>direction : climb</li> <li>path merge : 1</li> <li>path order : forward</li> <li>sort distance : checked</li> </ul> <h4>Engraving, drilling and cutting the board with the CNC</h4> <p>The CNC we have for PCB boards is a <a href="https://wegstr.com/CNC-Wegstr-(English)" target="_blank"><strong>Wegstr</strong></a>.</p> <span class="image object"> <img src="../images/CNC-Wegstr-station.jpg" alt="Picture of the CNC WegStr machine and its program opened on the computer nearby." /> </span> <p>To get the finished Quentorres board, we have to start by the engraving part.</p> <p>First we had to change the tip and insert a 0.27mm helicoidal one .</p> <span class="image object"> <img src="../images/CNC-tip-change.jpg" alt="Picture of the process of changing the CNC tip." /> </span> <p>Then to open the G-Code file on the Wegstr computer program.</p> <span class="image object"> <img src="../images/wegstr-program-interface.jpg" alt="Picture of the Wegstr computer program interface." /> </span> <p>We had to configure the "zero" level on the Z-axis of the machine by connecting a little cable and move the Z-axis until the light goes on.</p> <span class="image object"> <img src="../images/wegstr-program-zero.jpg" alt="Picture of the CNC computer program where all the axis are on level zero." /> </span> <p>After that, we checked the level every 5 mm on the plate by using the "auto-level" option so that the machine remembers where the levels change a bit and will adjust by itself during the engraving process.</p> <span class="image object"> <img src="../images/auto-level-reset.jpg" alt="Picture of auto-level option on the CNC computer program." /> </span> <p>When we were sure that every basic parameter was ok, we launched the machine.</p> <span class="image object"> <img src="../images/board-engraving-process.jpg" alt="Picture of the CNC machine during the engraving process." /> </span> <p>Next step was the drill part of the board. We had to change the tip to a 0.8mm one and calculate again the "zero" level of the Z-axis. We could then launch the machine.</p> <span class="image object"> <img src="../images/bord-engrave-and-drill.jpg" alt="Picture of the CNC machine during the drilling process." /> </span> <p>Last step, the cutting of the board with the 1mm helicoidal tip.</p> <p>The result looks pretty good but the boards will need to be cleaned to get all the little copper pieces off.</p> <span class="image object"> <img src="../images/boards-before-cleaning.jpg" alt="Picture of the board right after the final cutting process." /> </span> <span class="image object"> <img src="../images/boards-dirt-to-clean.jpg" alt="Picture of the little copper pieces that need to be cleaned off the board." /> </span> <p>Here's the final result after cleaning.</p> <span class="image object"> <img src="../images/boards-after-cleaning.jpg" alt="Picture of the boards after being cleaned with soap and a toothbrush." /> </span> <p>Link to our <a href="https://fabacademy.org/2024/labs/fabc/group-assignment/week004/" target="_blank">Group page</a></p> </section> <hr> <section> <h3>Individual assignment</h3> <h4>Soldering the components</h4> <p>Time to solder the components to the board.</p> <span class="image object"> <img src="../images/components.jpg" alt="Picture of the components that will be added to the board." /> </span> <p>To be sure that the wire won't spread everywhere, we put some flux on it.</p> <span class="image object"> <img src="../images/flux-paste.jpg" alt="Picture of the flux tube." /> </span> <p>Then we put some wire on each piece of the board that will get a component solder on it. For that, we checked the board design file to be sure to put it on the right places.</p> <span class="image object"> <img src="../images/board-design-file.jpg" alt="Picture of the board design file opened on a computer screen nearby." /> </span> <span class="image object"> <img src="../images/me-soldering.jpg" alt="Picture of my hands during the soldering process on the board." /> </span> <span class="image object"> <img src="../images/board-prepared-with-wire.jpg" alt="Picture of the board prepared with wire." /> </span> <p>When the board was ready, we started adding the components :</p> <ul> <li>1. the resistors</li> <li>2. the leds</li> <li>3. the button</li> <li>4. the 6 Position Receptacle Connector</li> <li>5. the 10 Position Receptacle Connector</li> <li>6. the SEEED STUDIO XIAO RP2040 ARDUINO</li> </ul> <span class="image object"> <img src="../images/finished-board.jpg" alt="Picture of the finished board with all components soldered." /> </span> <p>To check the connections before connecting the board to a computer, we used a multimeter.</p> <span class="image object"> <img src="../images/multimeter-check.jpg" alt="Picture of the use of the multimeter to check the connections." /> </span> <h5>Little failure</h5> <p>Soldering little pieces like these isn't so easy. You have to practice to get the right amount of wire and to place the components correctly.</p> <p>I learned for example to be more careful at the time a big piece of wire fell right on the board, of course where it didn't belong... Fortunately, the Seeed Studio piece covered it and we took off most of it with braid.</p> <span class="image object"> <img src="../images/soldering-failure.jpg" alt="Picture of the splash of wire that fell on the board accidently." /> </span> <p>As a perfectionist, I'm also frustrated that the pieces don't lay flat on the board. That's because of a wrong amount of wire beneath them.</p> <span class="image object"> <img src="../images/not-flat-component.jpg" alt="Picture of the components not laying flat on the board." /> </span> <h4>Connecting the board and launching the blinking program</h4> <p>The board is ready and the connection was successfull ! YAY !</p> <span class="image object"> <img src="../images/soldering-success.jpg" alt="Picture of the board being succefully connected and soldered." /> </span> <p>Time to install <a href="https://www.arduino.cc/en/software" target="_blank">Arduino</a> and code the led blinking program.</p> <p>In File->Preferences, we had to add the <a href="https://github.com/earlephilhower/arduino-pico/" target="_blank">URL of the additional boards</a>, the <a href="https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json">Arduino-Pico by Earlephilhower</a>.</p> <span class="image object"> <img src="../images/xiao_19.jpg" alt="Printscreen of the donloads process on Arduino." /> </span> <p>The next step was to download Pico in the boards manager by going in Tools->Board->Board manager</p> <span class="image object"> <img src="../images/xiao_05.jpg" alt="Printscreen of the download of Pico on Arduino." /> </span> <p>Then we configured the Arduino IDE for the Seeed Studio XIAO RP2040. The Seeed Studio XIAO RP2040 will appear in the COM port.</p> <blockquote> <strong>Small issue</strong> The first cable we used seemed to malfunction. But after trying with another one, we found out that it was because the COM port wasn't selected... <span class="image object"> <img src="../images/cable-failure.jpg" alt="Picture of what we thought was the malfunctioning cable." /> </span> <span class="image object"> <img src="../images/arduino-cable-failure.jpg" alt="Printscreen of the failure message on Arduino." /> </span> </blockquote> <p>We loaded the Blink program so that the LED on pin 26 blinks every second. It worked well.</p> <span class="image object"> <img src="../images/arduino-blink-code-const-int.jpg" alt="Printscreen of code for the blinking of the LED light with Arduino." /> </span> <span class="object"> <video width="600" height="300" controls> <source src="images/blinking-led.mp4" type="video/mp4"></video> </span> <pre> <code> /* Blink Turns an LED on for one second, then off for one second, repeatedly. Most Arduinos have an on-board LED you can control. On the UNO, MEGA and ZERO it is attached to digital pin 13, on MKR1000 on pin 6. LED_BUILTIN is set to the correct LED pin independent of which board is used. If you want to know what pin the on-board LED is connected to on your Arduino model, check the Technical Specs of your board at: https://www.arduino.cc/en/Main/Products modified 8 May 2014 by Scott Fitzgerald modified 2 Sep 2016 by Arturo Guadalupi modified 8 Sep 2016 by Colby Newman This example code is in the public domain. https://www.arduino.cc/en/Tutorial/BuiltInExamples/Blink */ //lire led sur pin 26 (correspondance composante seeed studio) const int ledPin = 26; // the setup function runs once when you press reset or power the board void setup() { // initialize digital pin LED_BUILTIN as an output. pinMode(ledPin, OUTPUT); } // the loop function runs over and over again forever void loop() { digitalWrite(ledPin, HIGH); // turn the LED on (HIGH is the voltage level) delay(1000); // wait for a second digitalWrite(ledPin, LOW); // turn the LED off by making the voltage LOW delay(1000); // wait for a second } </code> </pre> <h4>Some extra</h4> <p>We tried out another program to also use the button on the board.</p> <p>For that, we asked <a href="https://gemini.google.com/app" target="_blank"><strong>Gemini from Google</strong></a> to help us create the program and it worked.</p> <span class="image object"> <img src="../images/gemini-prompt-arduino-button-blink.jpg" alt="Printscreen of the prompt we wrote on Gemini to get the program of the LED light going on by pushing the button." /> </span> <p>By pushing the button, the LED goes on. When we release the pression on the button, it goes off.</p> <pre> <code> // Définition des broches const int boutonPin = 27; const int ledPin = 26; void setup() { // Configuration du bouton en entrée pinMode(boutonPin, INPUT); // Configuration de la LED en sortie pinMode(ledPin, OUTPUT); // Démarrage de la LED éteinte digitalWrite(ledPin, LOW); } void loop() { // Lecture de l'état du bouton int etatBouton = digitalRead(boutonPin); // Si le bouton est appuyé if (etatBouton == HIGH) { // Allumer la LED digitalWrite(ledPin, HIGH); } else { // Eteindre la LED digitalWrite(ledPin, LOW); } } </code> </pre> <span class="object"> <video width="600" height="300" controls> <source src="../images/blink-by-push-button.mp4" type="video/mp4"></video> </span> <br> <blockquote> <p><strong>Here is the prompt we used in french :</strong></p> <p> code arduino seeed rp2040 bouton pin 27, led pin 26. Quand on appuie sur le bouton, la led s'allume </p> <p><strong>Translation in english :</strong></p> <p> code arduino seeed rp2040 button pin 27, led pin 26. When the button is pressed, the led lights up. </p> </blockquote> </section> <hr> <section> <h3>My journey</h3> <p>This was a new skill to learn and I enjoyed it !</p> <p>I mostly enjoyed the soldering of the components, even though it wasn't so easy.</p> <p>The pieces are so small that I've lost one by pinching it to hard with the pliers... (and I fortunately found it a bit later !)</p> <p>To add the success of the assignment by video, I tried out a video converter I found by searching on the internet.</p> <p>The website is called <a href="https://www.freeconvert.com/" target="_blank">Freeconvert</a></p> <p>Simple to use, you can choose the format you want, if you want to compress by rate or to a fixed size (what I did) and to add or remove subtitles.</p> <span class="image object"> <img src="../images/freeconvert-video-compression-website.jpg" alt="Printscreen of the Freeconvert webiste's homepage." /> </span> <span class="image object"> <img src="../images/freeconvert-file-selection.jpg" alt="Printscreen of the file selection in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-file-format.jpg" alt="Printscreen of the file format selection in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-file-parameters.jpg" alt="Printscreen of the file parameters selection in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-param-2mo.jpg" alt="Printscreen of the file size selection in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-no-subtitle.jpg" alt="Printscreen of the file subtitle selection in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-file-compression.jpg" alt="Printscreen of the file compression process in Freeconvert." /> </span> <span class="image object"> <img src="../images/freeconvert-file-download.jpg" alt="Printscreen of the file download process in Freeconvert." /> </span> <p>I had to try out several options or sizes to find the best quality and for some videos I finally decided to cut them with the simple "photos view" program that's already on Windows.</p> <span class="image object"> <img src="../images/video-cutting.jpg" alt="Printscreen of the modification of a video in the photos view program on Windows." /> </span> <p>Here's is a picture of a bad quality.</p> <span class="image object"> <img src="../images/video-compression-failure.jpg" alt="Printscreen of bad video compression where the video is blurred and pixellated." /> </span> <p>Here's is a picture of the same video with a better quality.</p> <span class="image object"> <img src="../images/video-compression-success.jpg" alt="Printscreen of a better video compression." /> </span> </section> <hr> <section> <h3>My Final Project</h3> <p>I'm still searching for inspiration for the base, structure, size and accessories of the modular pet house.</p> <p>I've found some more picture of existing models that I keep in a folder.</p> </section> <hr> <section> <h3>Files and resources</h3> <p><strong>My files</strong></p> <ul> <li><a href="../files/quentorres_traces.png" target="_blank">Traces PNG</a></li> <li><a href="../files/quentorres_drills.png" target="_blank">Drill PNG</a></li> <li><a href="../files/quentorres_interior.png" target="_blank">Interior PNG</a></li> <li><a href="../files/quentorres_traces.png.nc" target="_blank">Traces G-Code</a></li> <li><a href="../files/quentorres_drills.png.nc" target="_blank">Drill G-Code</a></li> <li><a href="../files/quentorres_interior.png.nc" target="_blank">Interior G-Code</a></li> <li><a href="../files/Blink.ino" target="_blank">Arduino LED blinking</a></li> <li><a href="../files/blink-button.ino" target="_blank">Arduino LED light by pushing button</a></li> </ul> <p><strong>Resources</strong></p> <ul> <li><a href="https://gitlab.fabcloud.org/pub/programmers/quentorres" target="_blank">"Quentorres" board</a></li> <li><a href="https://modsproject.org/" target="_blank">Mods Website</li> <li><a href="https://gemini.google.com/app" target="_blank">Gemini from Google</li> <li><a href="https://fabacademy.org/2024/labs/fabc/">Our group page</li> <li><a href="https://www.freeconvert.com/" target="_blank">Website to convert videos : Freeconvert</a></li> </ul> </section> </div> </section> </div> </div> <!-- Sidebar --> <div id="sidebar"> <div class="inner"> <!-- Menu --> <nav id="menu"> <header class="major"> <h2>Menu</h2> </header> <ul> <li><a href="../index.html">Homepage</a></li> <li><a href="../assignments.html">Assignments</a></li> <li> <span class="opener">Week per week</span> <ul> <li><a href="../assignments/week01.html">1. Project Management</a></li> <li><a href="../assignments/week02.html">2. Computer Aided Design</a></li> <li><a href="../assignments/week03.html">3. Computer Controlled Cutting</a></li> <li><a href="../assignments/week04.html">4. Electronics Production</a></li> <li><a href="../assignments/week05.html">5. 3D Scanning And Printing</a></li> <li><a href="../assignments/week06.html">6. Embedded Programming</a></li> <li><a href="../assignments/week07.html">7. Computer Controlled Machining</a></li> <li><a href="../assignments/week08.html">8. Electronics Design</a></li> <li><a href="../assignments/week09.html">9. Output Devices</a></li> <li><a href="../assignments/week10.html">10. Mechanical Design And Machine Design</a></li> <li><a href="../assignments/week11.html">11. Input Devices</a></li> <li><a href="../assignments/week12.html">12. Molding and Casting</a></li> <li><a href="../assignments/week13.html">13. Networking And Communications</a></li> <li><a href="../assignments/week14.html">14. Interface And Application Programming</a></li> <li><a href="../assignments/week15.html">15. Wildcard Week</a></li> <li><a href="../assignments/week16.html">16. Applications And Implications</a></li> <li><a href="../assignments/week17.html">17. Invention, Intellectual Property And Income</a></li> <li><a href="../assignments/week18.html">18. Project Development</a></li> </ul> </li> <li><a href="../final-project.html">Final Project</a></li> <li><a href="../about.html">About Me</a></li> </nav> <!-- Footer --> <footer id="footer"> <p class="copyright">© Charlotte - FabLab de Charleroi. Fab Academy 2024. All rights reserved. Design: <a href="https://html5up.net">HTML5 UP</a>.</p> </footer> </div> </div> </div> <!-- Scripts --> <script src="../assets/js/jquery.min.js"></script> <script src="../assets/js/browser.min.js"></script> <script src="../assets/js/breakpoints.min.js"></script> <script src="../assets/js/util.js"></script> <script src="../assets/js/main.js"></script> </body> </html>