Embedded Programming

Goals

Group assignment: - Demonstrate and compare the toolchains and development workflows for available embedded architectures. - Document your work to the group work page and reflect on your individual page what you learned.

Individual assignment: - Browse through the datasheet for your microcontroller - Write a program for a microcontroller, and simulate its operation, to interact (with local input &/or output devices) and communicate (with remote wired or wireless connection)

Prior Knowledge

Before Fab, we learned to code Arduino, ATTINY, ESP32C3, and other microcontroller types. We also improved our through-hole soldering. Although taking Electrical Engineering certainly helps, the task is a bit daunting.

Projected Timeline

• Wednesday
  • Correct prior documentation
• Thursday
  • Start group assignment
• Friday
  • Finish group assignment
• Saturday
  • Start individual assignment
• Sunday
  • Finish individual assignment
• Monday
  • Get ahead
• Tuesday
  • Get ahead

Actual Timeline

• Wednesday
  • Correct prior documentation
• Thursday
  • Fix image compression issue
• Friday
  • Document image compression issue
• Saturday
  • Start group assignment
  • Finish group assignment
• Sunday
  • Document
• Monday
  • Start individual assignment
• Tuesday
  • Finish individual assignment

Image Compression

Problem

I made a somewhat obvious mistake that I never thought about, and would caution anyone about in the future. I was so focused on video compression - I’ve never needed to add one, but just on the issues with an oversized video - that I continually inserted screenshots as .pngs. I pushed to origin main, which I figured would be no problem since I’ve always synced, and received a storage issue. Since I committed a file, I figured this was an issue with file size and deleted the file. I still received the error for committing the delete. I looked up the issue and found out that the file was still in my history, which led me to look through my pipeline. I learned that I could hard reset and tried to no avail.

I asked ChatGPT for help and learned that I could find exact file sizes. By typing the ls -s command, I could look at byte size in descending order and find the offending file. Or, in my case, files. Around 87 of them. I gathered that these were images from the number of files in the list. I did not screenshot this for obvious reasons.

I did screenshot the list after, with my converted images, to show what the list should look like. The largest files are actual design files as opposed to screenshots.

Image Conversion

After an explanation about neglecting these concepts early on, and that images needed to be .jpgs, I first reverted several commits. I had far less images, which scared me at first, only to find that they were still in File Explorer and I could easily add them back. First, though, I researched the issue of storage.

I continued looking into the issue the evening before asking for help. I attempted several methods in VS Code. These included git pull, git push, git reset, gitbash, gitbash my head against the wall, detaching the branch, and creating a new main branch to place files.

None of these worked.

I sought help to convert the images through batch conversion. (name unknown) recommended some image conversion softwares. We found out that while my computer doesn’t allow ImageMagick, it does accept a platform called IrfanView. At first, I was confused since while the batch conversion worked, I could not find the images. (name unknown) traced the file path and found it. I was looking in Desktop when the file was located in the TEMP file of My PC. I learned that TEMP stands for Temporary, meaning that I had to act somewhat quickly to place the converted images into my Gitlab file.

At first, I figured I would have to carry out batch conversion for every group of screenshots. However, when (name unknown) screenshotted an image to demonstrate the file location, I realized that my error was hilariously avoidable. Snipping Tool for screenshots lets one convert an image to .jpg in seconds.

Note that I pinned the image folder in Quick Access for convenience. I recommend this to directly place the images in the image folder without finding it every time. Although I still have to click .jpg and re-name the image manually, it’s quick and straightforward. On the topic of renaming, I used the convention of image-(number) to keep them in order. This saved me from additional confusion with the generic screenshot naming system. Not only is the name easy to type out, it organizes in VS Code from least to most recently created automatically.

Also, I personally struggled with the image links not working. Dr. Taylor suggested I look into the syntax. I corrected the link format. While I found no change at first, I copied the path to see if that was an issue and I briefly thought about moving the image to another folder. I moved the images out of their folder on the same level as the assignment text files, and the images popped up. I will explore to see if I can manage this while keeping an image folder, since doing so currently creates errors. For the time being, though, I will focus on adding images properly by saving as a jpg file.

My website also takes far less storage now, even with nearly 100 images.

Group Assignment

I was in a group with Andrew Puky, Wilson Zheng, and Zaina Gibrine. I was assigned the ATtiny-412 documentation.

You can see our documentation on our group site.

ATtiny412

Information

I consulted the datasheet for information. I looked at the 412 data as opposed to the 212, which has less general capablility. I found the list of features and listed the ones that caught my attention, as well as their significance.
- 8 bit CPU - The Central Processing Unit (CPU) processes data in 8 bits - Allows 256 different values - Simple processing capability - 128B EEPROM - Electrically Erasable Programmable Read-Only Memory (EEPROM) of 128 bytes - Amount of data retained while on or off - Can be reprogrammed through voltage - 256B SRAM - Static Random Access Memory (SRAM) of 256 bytes - Amount of data retained while on and working - Wiped when turned off - Works faster and costs more than Dynamic Access Memory (DRAM) - Single Pin Unified Program Debug Interface (UPDI) - Programmer for ATmega microcontrollers - Reset pin used - Dedicated pin to support more data - Six Channel Event System - Six different routes for peripheral signals to reach others - Creates connections between devices - Temperature range -40°C-105°C (-40°F-221°F) - Operates within this temperature - Risk of overheating or decrease in longevity outside range

I also referenced the pinouts and listed the pinouts with more detail on what the functions accomplish.

Pin	Function	Definition
1	VDD	Voltage input
2	PA6	Digital I/O and analog pin 6
3	PA7	Digital I/O and analog pin 7
4	PA1	Digital I/O and analog pin 1
5	PA2	Digital I/O pin 0, reset, and UPDI location
6	PA0/GND/UDPI	Digital I/O and analog pin 6
7	PA3/EXTCLK	Digital I/O and analog pin 3 and external clock
8	GND	Ground

I consulted the block diagram after. Instead of interpreting each specific block, I observed the connections to the main bus. I noticed that clocks and detectors connect less directly to the bus. In contrast, the memory systems, CPU, and UPDI programmer are more readily accessible.

Programming

I could program the ATtiny412 and use an adapter to run the code from Arduino IDE. However, our lab uses Arduinos as programmers for the ATtiny412 since we have extra, so I documented that process.

• Download

  • Download Arduino AVR on the Arduino version 1.18.19. This supports ATtiny-412.
    
  • Download megaTinycore zip file
    
  • Extract zip file
    
  • Find Arduino sketchbook folder through preferences
    
  • Create hardware folder in sketchbook folder, add megatinycore.master
    
  • Download and extract jtag.updi zip
    

• Sketch

  • Move jtag.updi to sketch folder
    
  • Paste example code into jtag
    

• Upload

  • Save and compile in jtag mode
    
  • Plug into hardware with pinouts wired properly
    

ATtiny Source Code

// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(LED_BUILTIN, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

ESP32C3

Wokwi

The Xiao ESP32-S3 seemed reasonable since I have experience from Electrical Engineering. I started by making and programming a Wokwi simulation. I edited the Wokwi template to make the code. I decided that, as well as the basic pulldown resistor configuration, I would add a second LED and program them to alternate when pressing the button.

• Wire

  • Delete third LED
  • Color code (5V red, GND black, misc green)
  • Add button
  • Add resistor
    

• Void setup

  • Serial begin 115200
  • Establish pinMode input for pin connected to button
  • Establish pinMode output for LED pins
    

• Void loop

  • Set button variable to digitalRead
  • Create if else loop
  • Set to if (variable) = HIGH
  • digitalWrite one pin as high, the other low
  • Alternate for else loop
    

While the wiring was generally trial and error, I did reference Kathryn Wu’s documentation since I noticed we used the same microcontroller.

• Simulate
  • Add desired features
  • Fix errors
  • Click play button
    
    

I did realize that when I set the loop, I never changed the pins according to their pinMode. Only one LED worked as a result, I was using one output and one input when I needed to use both output pins. This was an easy fix. I also programmed D0 to recieve high voltage when D1 recieves low and vice versa.

C++ Sample Program

I never brought the button and extra LED home, so I would have to use the blink example code first. Still, the steps were generally the same.

• Arduino code
  • Paste original code
  • Compile
    
    
• Install libraries and packages
  
  
• Modify specifications
  • Change board
  • Plug in
  • Add port
    
    I realized that Arduino was not picking up my board because the official Espressif esp32 package was not installed. After fixing this, I could set the board to ESP32-S3 XIAO Dev Model. It blinked without any errors. Once I get the necessary components, I will test the program for my pushbutton circuit.

C++ Source Code

pinMode(1, OUTPUT);
pinMode(2, OUTPUT);
pinMode(3, INPUT); 
}

void loop() {
    int button = digitalRead(3);

    if (button == HIGH) {
      digitalWrite(1, LOW);
    digitalWrite(2, HIGH);
    } else {
    digitalWrite(1, HIGH);
     digitalWrite(2, LOW);
     }
    delay(50);
}

MicroPython Program

At the lab, I managed to wire the circuit with all the required components. I asked ChatGPT for basic commands with the intention of putting them together based on my C++ file. However, I found an error with the computer not recognizing the machine command. It turned out that I had to download the firmware for the specific microcontroller and run a command using the file path.

• Use MicroPython
  • Download Thonny
  • Flash microcontroller .bin file
  • Add code
    

MicroPython Source Code

import time
import board
import digitalio

led1 = digitalio.DigitalInOut(board.D0)
led1.direction = digitalio.Direction.OUTPUT
led2 = digitalio.DigitalInOut(board.D1)
led2.direction = digitalio.Direction.OUTPUT
button = digitalio.DigitalInOut(board.D2)
button.direction = digitalio.Direction.INPUT
button.pull = digitalio.Pull.DOWN

while True:
    if not button.value:  # Button pressed (since it's pulled down)
        led1.value = True
        led2.value = False
    else:
        led1.value = False
        led2.value = True

    time.sleep(0.1)

RP2040

Wokwi

Everyone was using the Raspberry Pi Pico model since they had no XIAO RP2040, so I did the same. I converted the digital pins to general purpose, hence the wire placement.

DIY Wokwi

I was a bit irked at the lack of XIAO representation, so I considered making a custom board and add it to Wokwi. I am adding the idea here as I may or may not revisit this depending on the amount of time I have left next week.

C++ Programming

• Setup
  • Go to preferences
  • Install a custom library for the XIAO RP2040.
  • Find microcontroller package in boards manager
  • Run There was no difference in the code due to the same pinout. Searching for the library was a bit of a hassle, though.

C++ Source Code

    void setup() {
        Serial.begin(115200);
        pinMode(26, OUTPUT);
        pinMode(27, OUTPUT);
        pinMode(28, INPUT); 
    }

    void loop() {
      int button = digitalRead(28);

      if (button == HIGH) {
        digitalWrite(26, LOW);
        digitalWrite(27, HIGH);
      } else {
        digitalWrite(26, HIGH);
        digitalWrite(27, LOW);
      }
      delay(50); // Prevent rapid toggling due to noise
    }

MicroPython Programming

• Program
  • Install RP2040 firmware
  • Drag uf2 file to computer folder
  • Run
    
    The process was a bit different, however, I found it easier.

MicroPython Source Code

import time
723
from machine import Pin
led1 = Pin (26, Pin.OUT)
led2 Pin (27, Pin. OUT)
button = Pin (28, Pin. IN, Pin. PULL_DOWN)

while True:
button_state = button.value()
if button_state == 0:
led1.value(1)
led2.value(0)
else:
led1.value(0)
led2.value(1)
time.sleep(0.1)

Make Buttons

After finishing all that I could do at home, I decided to add one more tweak to my website and put buttons on my homepage.

I used a website that let me copy and paste a screenshot of the main color. It gave me the hexadecimal code, which I could add back. I first tried simply putting in pink, since it worked for mkdocs.yaml, but a different shade appeared. While color descriptions can depend on the library installed, hexadecimal code is universal and foolproof. I also double-checked that I was using the accent color on my website - if I used the background color, the buttons would not be visible without applying a border.

• Create logos

  • Go to Canva
  • Apply hexadecimal code as background
  • Search clipart for relevant images
  • Set image color
  • Set all images to same height without changing the ratio
  • Screenshot individual images and save each as a jpg
    

• Code

  • Copy html button format
  • Modify text
  • Modify links
  • Modify images
    
    I adjusted the height and width of the images to fit most of the button’s height. While most images rendered well, I modified the aspect ratios for the ones that looked slightly too tall or wide. I also noticed that the buttons were all different widths in the preview. I looked at the style section for an explanation. While the center alignment pertained to the text, I was curious about the function of the other line. It originally said display: inline-flex. I searched it up and found that one could enter either that or display: flex. I then used Ctrl+F to find and remove the inline- part. Almost immediately, the button widths uniformly took up the entire row. I much preferred this design for consistency.

Reflection

I really ought to bring all the necessary components home to work on the project. While I managed, keeping a list and storage spot would definitely help. Programming the microcontrollers took a while since I had to download the necessary software and re-accustom myself to electronics. Still, the alternating LEDs paid off.

Starting on the press fit was very helpful as I can now focus more on creation as opposed to design. I also enjoyed making the buttons.

Still, the CAD aspect was a surprisingly quick start and I’m looking forward to adding some sort of programmable hinge to automate it. Also, the method for adding the grooves was as enjoyable as it was ridiculous. Next week, I will continue this.

Lessons

• Save images as jpg files. I now use the screenshot snipping tool for individual conversion, but for batch conversion, Irfanview or ImageMagick works. There are several other methods. Also, resize using { width=250px } - one can change the width to their liking.
• For embedding code, I used tabs to indent at first, but looked up an easier method and found one. Make the first line three backticks and the language name, then make the last line three backticks. Also, when I could not find a file, I ran the image in a screenshot through an image to text converter. I would suggest cropping out the line numbers since it includes those.

---

Last update: February 22, 2025