Skip to content
Snippets Groups Projects
Commit 77278244 authored by NDC's avatar NDC
Browse files

programming : added go lang + fix example comment

parent a2cb4f66
No related branches found
No related tags found
No related merge requests found
Pipeline #439937 passed
Stage: deploy
    Expand all Hide whitespace changes
    Inline Side-by-side
    recitation/debugging/debugging.html deleted 100644 → 0
    + 0
    − 462
    View file @ a2cb4f66
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Fabacademy 2024 Debugging</title>
    <meta name="description" content="Recitation on debugging hardware and software">
    <meta name="author" content="Henk & Nicolas">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="dist/reset.css">
    <link rel="stylesheet" href="dist/reveal.css">
    <link rel="stylesheet" href="dist/theme/black.css" id="theme">
    <!-- Theme used for syntax highlighting of code -->
    <link rel="stylesheet" href="plugin/highlight/monokai.css">
    </head>
    <body>
    <div class="reveal">
    <!-- Any section element inside of this container is displayed as a slide -->
    <div class="slides">
    <section>
    <img src="img/debugging.jpg" alt="debugging splash" style="height: 340px; margin: 0 auto 4rem auto; background: transparent;" class="demo-logo">
    <small class="special-header">by <a
    href="https://fabacademy.org/2018/labs/fablabulb/students/nicolas-decoster/">Nicolas
    De Coster</a> and <a
    href="https://fabacademy.org/2018/labs/fablabamsterdam/students/henk-buursen">Henk
    Buursen</a> for Fab Academy 2024</small>
    </section>
    <section>
    <p class="fragment grow">Attitude</p>
    <p class="fragment grow">General principles</p>
    <p class="fragment grow">Multimeters</p>
    <p class="fragment grow">Logic analyzers</p>
    <p class="fragment grow">Oscilloscopes</p>
    <p class="fragment grow">How to debug almost anything kit</p>
    <aside class="notes">
    <p>Debugging is the process of finding and resolving defects
    or problems within hardware and computer programs that prevent correct
    operation. Debugging tactics can involve interactive
    debugging, control flow analysis, unit testing, integration
    testing, log file analysis, monitoring at the application or
    system level, memory dumps, and profiling.</p>
    <p>This recitation on debugging is split in 2 sections:
    programming and hardware</p>
    </aside>
    </section>
    <!-- Example of nested vertical slides -->
    <section>
    <section>
    <img style="height: 620px; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/hhg_question.png" alt="Attitude">
    </a>
    <aside class="notes">
    <p>The answer never is: "it doesnt work!" In case of a just
    designed and produced circuitboard, break the "problem into pieces".</p>
    - is the board powered?
    - after producing the pcb you did a visual check. Do it again!
    - are the components soldered correctly?
    - are the components the right ones?
    - are the components placed correctly?
    </aside>
    </section>
    <section>
    <p><img style="height: 100%; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/jump.jpg"></p>
    <aside class="notes">
    <p>Don't jump to conclusions. It's easy to assume that the
    problem is in the most complex part of the system. Or even
    worse: blaming the manifacturer of the components for faulty
    or misbehaving components. But it's often in the simplest
    part of the system. Maybe it's a mistake you made. You actually
    designed, milled, stuffed and programmed the circuit. </p>
    <p>Time pressure can be a factor in jumping to fast conclusions.
    But it's better to stay calm and think of a step by step
    approach.</p>
    </aside>
    </section>
    <section>
    <p><img style="height: 300px; margin: 0 auto 4rem auto; background: transparent;" data-src="./img/memory.jpg"></p>
    <aside class="notes">Debugging is difficult, and it's easy
    to forget what you've done. Writing down what you've done
    can help you remember what you've tried and what you haven't
    tried. It often also helps you to write down what you think
    the problem is. This can help you to think more clearly
    about the problem and the solution.
    And last but not least: Often you break something while
    trying to fix something else. Writing down what you did
    can help you to undo what you did.
    </aside>
    <h2>Write down what you do</h2>
    </section>
    <section>
    <img style="background: rgba(255,255,255,0.1);" data-src="./img/ThePragmaticProgrammer.jpeg">
    <p><h5><a href="https://en.wikipedia.org/wiki/The_Pragmatic_Programmer">The Pragmatic Programmer</a></h5></p>
    <aside class="notes">
    <p>A good read is "The Pragmatic Programmer", a
    collection of tips to improve the development process in
    a pragmatic way.</p>
    </section>
    <section>
    <img style="height: 440px; background: rgba(255,255,255,0.1);" data-src="./img/duck.webp">
    <h2>Talk to me</h2>
    <aside class="notes">
    In software engineering, rubber duck debugging (or
    rubberducking) is a method of debugging code by articulating
    a problem in spoken or written natural language. Carry
    around a rubber duck and debug what you did by forcing
    yourself to explain what you did, step by step, to the duck.
    You can also use your instructor, fabacademy
    student or friend. Advantage of the duck is that it won't judge you.
    </aside>
    </section>
    </section>
    <section>
    <section>
    <img style="margin: 0 auto 4rem auto; background: transparent;" data-src="./img/dontpanic.jpg">
    <aside class="notes">
    <p>Don't panic. It's easy to get frustrated when you can't
    find the problem. But it's important to stay calm. If you
    get frustrated, you're more likely to make mistakes. And
    mistakes can make the problem worse. </p>
    <p>It's also important to remember that debugging is a
    normal part of the development process. It's not a sign that
    you're a bad engineer. It's a sign that you're a good
    engineer. </p>
    </aside>
    </section>
    <section>
    <video data-autoplay style="height: 800px; margin: 0 auto
    4rem auto; background: transparent;"
    data-src="./img/Debugging_strategy.mp4" controls></video>
    <aside class="notes"> So you are building something together
    with a lot of bricks. Narrow down the issue. Fixing a bug
    that is not, leads to a new bug, that <B>WAS</B> not a bug. And you
    don't want to end up a situation where you trashed the whole
    project because you can't localize the "bug" that wasn't a bug from the
    beginning. </aside>
    </section>
    <section>
    <h2>Narrowing down the problem</h2>
    </section>
    <section data-auto-animate>
    <ul>
    <li>Reproduce the problem</li>
    </ul>
    </section>
    <section data-auto-animate>
    <ul>
    <li>Reproduce the problem</li>
    <li>Always first do visual check</li>
    </ul>
    </section>
    <section data-auto-animate>
    <ul>
    <li>Reproduce the problem</li>
    <li>Always first do visual check</li>
    <ol>traces</ol>
    <ol>soldering</ol>
    <ol>components</ol></li>
    </ul>
    </section>
    <section data-auto-animate>
    <ul>
    <li>Reproduce the problem</li>
    <li>Always first do visual check</li>
    <ol>traces</ol>
    <ol>soldering</ol>
    <ol>components</ol></li>
    <li>Keep in mind that the problem <br>
    might not be visible without a microscope</li>
    </ul>
    </section>
    <section>
    <img src="img/visual.jpg" height="600">
    </section>
    <section>
    <div class="r-stack">
    <img class="fragment" src="img/D11Cserial.jpg">
    <img class="fragment" src="img/D11Cserial-1.jpg">
    <img class="fragment" src="img/D11Cserial-2.jpg">
    <img class="fragment" src="img/D11Cserial-3.jpg">
    </div>
    <aside class="notes">
    <p>Concentrate only on the relevant parts. Isolate the problem.</p>
    <p>The microcontroller is not receiving voltage / the wrong voltage></p>
    <p>Can't program the microcontroller</p>
    <p>Programmed, unable to program other microcontrollers</p>
    </aside>
    </section>
    </section>
    <section>
    <section>
    <h2>Multimeter</h2>
    <img class="fragment" src="img/multimeter.jpg" height="400px">
    <aside class="notes">
    A digital multimeter (DMM) is a hardware tool that can be
    used to measure two or more electrical values, usually
    voltage (in volts), current (in amps), and resistance (in
    ohms). Multimeters are great tools and one of the most fundamental
    pieces of test equipment that can be used to debug
    electrical problems within an embedded system. </aside>
    </section>
    <section>
    <h2>Continuity</h2>
    <img class="fragment" src="img/continuity.jpg" height="300px">
    <ul>
    <li>Test power supply to power pins continuity</li>
    <li>Check fuses, diodes orientations, ...</li>
    <li>Check short-circuits</li>
    <li>Check traces</li>
    </ul>
    </section>
    <section>
    <img class="fragment" src="img/parallel.png" height="300px">
    <ul><li>Parallel measurement => check your cables!</li>
    <li>! absolute maximum ratings (may burn your component)</li>
    <li>Power supply impedence / max power, badly selected</li>
    <li>GND/VCC loop</li>
    </ul>
    </section>
    <section>
    <h2>Continuity</h2>
    <video data-autoplay style="height: 620px;" data-src="./img/multimeter.mp4"controls></video>
    </section>
    <section>
    <h2>Voltage drop</h2>
    <video data-autoplay style="height: 620px;" data-src="./img/voltage_drop.mp4" muted controls></video>
    </section>
    </section>
    <section>
    <section>
    <h2>Logic Analyzer</h2>
    <video data-autoplay style="height: 620px;" data-src="./img/logicanalyzer.mp4" muted controls></video>
    <aside class="notes">
    A logic analyzer is a hardware tool designed specifically
    for capturing, displaying, and measuring electrical signals
    in a digital circuit. This tool consists of several digital
    inputs pins capable of detecting whether an electric signal
    is at a specific logic level (1 or 0). Logic analyzers are
    also capable of showing the relationship and timing of
    different electrical signals in a digital circuit and often
    capable also of analyzing digital communication protocols
    UART, I2C, SPI or 1-wire protocol. Logic analyzers can be
    used to debug hardware, software, and firmware. </aside>
    </section>
    <section>
    <h2>Logic Analayzer</h2>
    <ul>
    <li><a href="https://www.amazon.com/KeeYees-Analyzer-Device-Channel-Arduino/dp/B07K6HXDH1">"logic analyzer 8 channel"</li>
    <li><a href="https://www.amazon.nl/-/en/dp/B0BGQD8LKB">"logic analyzer 16 channel"</a></li>
    <li><a href="https://www.digikey.com/en/products/detail/e-z-hook/XKMRED/528231">"Digikey 461-1010-ND: MICRO-HOOK RED 0.025" SQ PINS"</a></li>
    <li><a href="https://www.digikey.com/en/products/detail/e-z-hook/XKMBLK/528230?s">"Digikey 461-1010-ND: MICRO-HOOK BLACK 0.025" SQ PINS"</a></li>
    </ul>
    </section>
    <section>
    <h2>Miniware LA104</h2>
    <img class="fragment" src="img/24.jpg" height="400px">
    <p><a href="https://e-design.com.cn/en/Logic-Analyzer-LA104-PG9226719">LA104</a> and <a href="https://github.com/gabonator/LA104">alternative firmware and apps</a></p>
    </section>
    </section>
    <section>
    <section>
    <h2>Oscilloscope</h2>
    <video data-autoplay style="height: 620px;" data-src="./img/oscilloscope_blink.mp4" muted controls>
    <aside class="notes">
    An oscilloscope is a hardware tool that graphically displays
    electrical signals and shows how those signals change over
    time.
    This video is showing a blinking LED. The oscilloscope is
    connected to GND and the LED . The LED is blinking at an
    interval of 1 second. The oscilloscope is showing the
    voltage over time. </aside>
    </section>
    <section>
    <video data-autoplay style="height: 620px;" data-src="./img/oscilloscope_button.mp4" muted controls>
    </video>
    </section>
    </section>
    <section>
    <section>
    <h2>Radio communications</h2>
    <div class="r-stack">
    <img class="fragment" src="img/dvb-t.jpg" height="400">
    <img class="fragment" src="img/rtl_sdr.jpg" height="400">
    <img class="fragment" src="img/scope_fft.jpg" height="400">
    </div>
    <small><a href="https://www.rtl-sdr.com/buy-rtl-sdr-dvb-t-dongles/">RTL-SDR RTL2832U DVB-T Tuner Dongles</a></small>
    <aside class="notes">
    <p>RTL-SDR is a very cheap software defined radio that uses
    a DVB-T TV tuner dongle based on the RTL2832U chipset. With the right
    software the DVB-T TV tuner to be converted into a wideband
    software defined radio via a new software driver. </p>
    <p>Gnuradio can be used to debug your wireless projects.</p>
    </aside>
    </section>
    <section>
    <video data-autoplay style="height: 620px;" data-src="./img/sdr.mp4" controls></video>
    </section>
    </section>
    <section>
    <section>
    <h2>Flashing your board</h2>
    <small>and what can go wrong</small>
    <aside class="notes">
    <p>A small chapter to talk about workflow how to actually program your boards</p>
    <p>Using XIAO boards life looks easier, but its overkill for many projects. So also
    try to use and understand the workflows how to program other MCU's. </p>
    </p>
    </aside>
    </section>
    <section>
    <h2>USB</h2>
    <video data-autoplay style="height: 620px;" data-src="./img/dmeg.mp4" controls></video>
    </section>
    <section>
    <h2>SWD/JTag</h2>
    <img class="fragment" src="img/programmer_jtag.jpg" height="400px">
    <aside class="notes">
    <p>Serial Wire Debug and Joint Test Action Group</p>
    <p><UL><li>Connect a CMSIS-DAP SWD adapter</li>
    <li>10-pin 1.27mm connectors are convenient, but triple check the orientation</li>
    <li>If VCC pin is unused, power your target device separately</li>
    <li>Make sure the programmer is on 3.3V if programming SAMD</li>
    </ul>
    </p>
    </section>
    <section>
    <h2>UPDI</h2>
    <p>Unified Program and Debug Interface</p>
    <img class="fragment" src="img/hello.serial-UPDI.3.jpg" height="400px">
    <aside class="notes">
    <ul><li>All you need is a serial adapter</li>
    <li>RX and TX connected together with a 4.7k resistor or diode
    (any res. between 1.5k and 10k will work)</li>
    <li>VCC is optional but ensures both chips talk at the same logic level</li>
    <li>Programming is initiated with a break (LOW level for a long duration)</li>
    </ul>
    </section>
    <section>
    <h2>Serial (or any) "Hello world!"</h2>
    <pre><code data-line-numbers="2|5,6">
    #define DEBUG_MODE 1
    ...
    #if DEBUG_MODE
    Serial.print("DEBUG -- MyVal value = ");
    Serial.println(MyVal, DEC);
    #endif
    </code>
    </pre>
    <aside class="notes">
    <p>Serial.print() and Serial.println() are your best friends</p>
    <p>Serial.begin() is the first thing you do in setup()</p>
    <p>Serial monitor is the first thing you open when debugging</p>
    </aside>
    </section>
    </section>
    <section>
    <section>
    <div class="r-stack">
    <h4>Read The F*cking Manual</h4>
    <img class="fragment" src="img/tldr.jpg" width="650" height="400">
    <img class="fragment" src="img/rtfm1.jpg" width="600" height="600">
    <img class="fragment" src="img/solderfrust.png" width="700" height="700">
    <img class="fragment" src="img/dontpanic.jpg" width="600" height="600">
    </div>
    </section>
    </section>
    </section>
    <script src="dist/reveal.js"></script>
    <script src="plugin/zoom/zoom.js"></script>
    <script src="plugin/notes/notes.js"></script>
    <script src="plugin/search/search.js"></script>
    <script src="plugin/markdown/markdown.js"></script>
    <script src="plugin/highlight/highlight.js"></script>
    <script>
    // Also available as an ES module, see:
    // https://revealjs.com/initialization/
    Reveal.initialize({
    controls: true,
    progress: true,
    center: true,
    hash: true,
    // Learn about plugins: https://revealjs.com/plugins/
    plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight ]
    });
    </script>
    </body>
    </html>
    recitation/debugging/img/tinygo.png 0 → 100644
    + 0
    − 0
    View file @ 77278244
    recitation/debugging/img/tinygo.png

    30.2 KiB

    recitation/debugging/index.html
    + 38
    − 11
    View file @ 77278244
    ......@@ -160,13 +160,25 @@
    </figure>
    <p>Bootcamp instructors 2024 : <a href="https://academany.fabcloud.io/fabacademy/2024/bootcamp-instructors/workshops/programming-languages/" target="programming_lang">different languages tests</a></p>
    </section>
    <section style="background-image: url('img/matrix.jpg'); background-size:cover;">
    <section>
    <ul>
    <li><a href="#asm">ASM / PIO / ...</a></li>
    <li><a href="#cpp">C / C++</a></li>
    <li><a href="#rust">Rust</a></li>
    <li><a href="#micropython">microPython</a></li>
    <li><a href="#js">JavaScript</a></li>
    <li><a href="#go">Go</a></li>
    </ul>
    </section>
    <section style="background-image: url('img/matrix.jpg'); background-size:cover;" id="asm" data-id="asm">
    <h3>Assembly / PIO / VHDL / Verilog</h3>
    <p>Assembly language provides direct control over the microcontroller's hardware, making it efficient but complex to write. Programmable I/O (PIO) offers a way to offload I/O operations from the CPU, enhancing performance in certain scenarios.</p>
    <p>Learn binary/logic basics! (worth it!)</p>
    </section>
    <section>
    <section id="cpp" data-id="cpp">
    <figure>
    <img src="img/cpp.png" style="height:150px;">
    </figure>
    ......@@ -174,7 +186,7 @@
    <p>Note : Arduino is C++ based</p>
    </section>
    <section>
    <section id="rust" data-id="rust">
    <figure>
    <img src="img/rust.png" style="height:150px;">
    </figure>
    ......@@ -182,19 +194,34 @@
    <p>E.g.<a href="https://fab.cba.mit.edu/classes/863.23/EECS/people/Yohan/week2/">Minecraft rendering on RP2040</a></p>
    </section>
    <section>
    <section id="micropython" data-id="micropython">
    <figure>
    <a href="https://wiki.seeedstudio.com/XIAO-RP2040-with-MicroPython/"><img src="img/micropython.png" style="height:150px;"></a>
    </figure>
    <p>MicroPython offers a higher level of abstraction compared to C and assembly, making it easier to write and understand code. It can be either interpreted directly or precompiled into bytecode for execution.</p>
    </section>
    <section>
    <section id="js" data-id="js">
    <figure>
    <a href="https://kalumajs.org/"><img src="img/js.png" style="height:150px;"></a>
    </figure>
    <p>JavaScript can be used for microcontroller programming (<a href="https://kalumajs.org/">Kaluma</a> / <a href="https://www.espruino.com/">Esrpuino</a>). It offers a familiar syntax for web developers but typically requires more resources compared to lower-level languages like C.</p>
    </section>
    <section id="go" data-id="go">
    <figure>
    <a href="https://tinygo.org/"><img src="img/tinygo.png" style="height:150px"></a>
    </figure>
    <p><a href="https://tinygo.org/">TinyGo</a> brings the <a href="https://go.dev/">Go</a> language to microcontrollers.</p>
    <ul>
    <li>Various microcontrollers (samd, rp2040, ...)</li>
    <li>Includes optimized garbage collector</li>
    <li>Comes with built-in libraries for GPIO, I2C, SPI, etc.</li>
    <li>Supports cross-compilation for easy development</li>
    <li>Drawback : not fully multi-core compatible (yet?)
    </ul>
    </section>
    <section>
    <h3>Mixed languages</h3>
    ......@@ -475,7 +502,7 @@ void loop() {
    // Turn off the LED
    digitalWrite(LED_PIN, LOW);
    delay(2000); // Wait for 1 second
    delay(2000); // Wait for 2 second
    }
    ......@@ -488,12 +515,12 @@ void flipAndWait(uint8_t pin, unsigned long time){
    void loop() {
    // Turn on the LED
    digitalWrite(LED_PIN, HIGH);
    delay(200); // Wait for 1 second
    digitalWrite(LED_PIN, HIGH); //set LED high
    delay(200); // Wait for 1 second
    flipAndWait(LED_PIN, 1000);
    flipAndWait(LED_PIN, 400);
    flipAndWait(LED_PIN, 2000);
    flipAndWait(LED_PIN, 1000); //flip and wait for 1sec
    flipAndWait(LED_PIN, 400); //flip and wait for 400ms
    flipAndWait(LED_PIN, 2000); //flip and wait for 2sec
    }
    </script></code></pre>
    <aside class="notes">
    ......
    recitation/debugging/programming.html deleted 100644 → 0
    + 0
    − 684
    View file @ a2cb4f66
    This diff is collapsed.
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment