HW3

Some Notes on Web Development

Updated Pipeline

Before I dive into this week’s assignment, I wanted to figure out a better workflow
for my web development process. Last week, while I was just trying to get started,
I was doing my word processing in Google Docs, exporting to HTML, and then using ChatGPT
to reformat the HTML file into something more digestible and visually appealing.

I didn’t like how circuitous this process felt, and knew there had to be a better way!
During class, Huanyu presented his website and workflow, which seemed much more straightforward. See his website for exact details (Link). Essentially, to create his web pages, he developed Markdown documents in Typora and then converted them to HTML using Pandoc.

I took a look at both, and decided I wanted to try and find a free alternative to Typora. It seems great because you can just format a document in a simple editor without having to use markdown syntax. If I get tired of using the markdown formatting, I may go back to it.

In the meantime, I am writing my markdown and using the live preview function in VSCode. I am also using this markdown formatting document for reference (Link).

After making an initial draft of my HW3 site in this markdown format, I will try converting it using Pandoc (read on).

Installing and Using Pandoc

I downloaded the Pandoc installer for windows from this repo (Link). Note: (1) be sure to download the msi and not the zip! (2) Do not run the pandoc executable. This program is designed to be run from your windows shell (or git bash, which is what I’m doing).

Success! After a bit of playing around, I got this working. A couple of key points figured out from my conversations with chatGPT: (1) Pandoc needs a template file in order to make the html look like the rest of your website. It basically duplicated my index.html and then got rid of most of the content. (2) It’s important to ensure that you the href in your template pointing to css assets is correct so that it can access all the relevant info (3) Now that I have everything standardized (e.g. sub-folders for each page within the /pages directory containing a .md version of the webpage) I should be able to write a bash script that updates all of them at the same time. This would be super useful! I’ll come back to this if I have time. Note that if I reformat my landing page to also be Markdown based (which I think I should) then I’ll need to reference a slightly different template (multiverse-pandoc-root.html). Whereas the template to use for my sub-pages is multiverse-pandoc-subpages.html. Both are in the root directory of the Repo.

Shout out to ChatGPT for helping me figure out this workflow. You can see our transcript here.

Assignment 3

Background

This week, students attended a session in order to fabricate a nifty device, designed by Quentin (one of the TA’s). The QPads, as they are called, are based around one of three microprocessors, include a screen and a few capacitative pads. Given that: (1) I would be out of town for these sessions (at my brother’s wedding!) and (2) I have experience with soldering and microcontroller programming, Quentin Bolsee excused me from this part of the assignment, and provided me with a pre-soldered board, with the bootloader already installed.

Additional Boards Install + Flashing Blink Code

Following the instructions here (Link), I added the Fab SAM Core Library to my Arduino IDE installation and selected the “Generic X21E” board. I was then able to successfully run the blink.ino example file stored here(Link).

Turning LED on and off with QTouch

My first goal is to control the LED with one of the touch pads using test_touch_D21.ino as a starting point (Link). When I tried to compile this sketch I got an error saying “Compilation error: Adafruit_FreeTouch.h: No such file or directory” which means I am likely missing a library. Installing the Adafruit FreeTouch Library resolved this issue and allowed the code to compile. Using arduino’s plotter tool, I was able to visualize the button presses.

I was just looking through the code to figure out how to connect a touch event with a call to digitalWrite to turn on an LED when I saw that this is actually already in the example code! Touching and releasing Q0 turns on and off (respectively) the on-board LED.

Write and test a program

I decided to write a simple program which shows the index of the button pressed on the screen. Here are the steps I took to write my code:

1. Duplicated test_touch_D21
2. Edited the void loop such that mcu is checking to see if any button was pressed or released (not just Q0).
3. Using code adapted from the test_screen_D21 example, print the button which was pushed to the screen.

You can find my code here.

NOTE: Check out my HW4 for a much cooler example of microcontroller fun! See below for the result!

SAMD21 Datasheet

Another piece of the assignment is to browse through the data sheet of a microcontroller. I am going to take a look at the SAMD21, since that’s what’s on my board. The data sheet can be found here (Link).

The main sections of the data sheet are as follows: Description Config Summary Ordering info Block Diagram Pinout Signal Descriptions I/O Multiplexing and Considerations Power supply and startup considerations Product mapping Memories Processor and Architecture Peripherals Configuration Summary Clock System Lots of info on Peripherals Electrical Characteristics

Some sections of interest

Block Diagram

The block diagram on p.18 is an extremely dense visual representation of everything that’s going on in the mcu. Someday, I would like to be able to explain every part of a diagram like this.

I/O Multiplexing

I remember when I first learned about this concept, it blew my mind. The idea that a signal can be redirected to another pin, simply by writing to a register is crazy!

Power Up

It was interesting reading about the power up sequence. I hadn’t ever really thought about what happens at the sub-second scale when a microcontroller has power applied to it. It only makes sense that this would be a highly orchestrated set of steps.

Acknowledgments

Huge thanks to Quentin for helping me fast track this week so that I could enjoy my brother’s wedding! Also thank to Sun for helping me work through a tricky Git issue. He taught me how to use
“git reset –soft origin/main” in order to get rid of a large file I accidentally committed but hadn’t yet pushed.