Marvel and DC Weekly New Comics Release List Tracker

Display comics release lists of this, next, and previous weeks via Nano 33 IoT and this amazing 🕷 PCB playing Spider-Man theme song :)

Supplies

PCBWay Custom PCB

Arduino Nano 33 IoT

Raspberry Pi 3B+ or 4

Nokia 5110 Screen

Buzzer

Rotary potentiometer

Potentiometer Knob

RGB Diffused Common Cathode

Vibration Motor

6x6 Pushbutton

Resistor 1k ohm

DC Power Connector, Jack

Step 1: Story

I am a huge comic book fan and collect issues of my favorite titles every week. Therefore, I check weekly comics release lists from publishers every week. Even though there are umpteen web and mobile applications to inspect weekly new comics release lists from publishers, I wanted to create an unusual weekly comics release list tracking device with Arduino by which I can scrutinize weekly comics lists in a geeky way :)

First of all, to obtain weekly comics release lists from the ShortBoxed comics API, I developed a web application in PHP running on Raspberry Pi.

Then, I used an Arduino Nano 33 IoT to get comics release lists transferred by the PHP web application and display them with a Nokia 5110 Screen.

After completing wiring on a breadboard and testing the code, I designed a PCB (Comics Release List Tracker) inspired by one of my favorite comic book heroes: Spider-Man. It became a stylish and suitable addition to my comic book collection as an efficient new comics release list tracker with some spectacular features :)

The device shows the comics release list of:

This Week
Next Week
Previous Week

Also, it has these unnecessary yet funny additional features 😃

Plays the Spider-Man theme song (1967) before showing a list.
Displays graphics adjusted by a potentiometer.

Huge thanks to PCBWay for sponsoring this project.

Step 2: Designing and Soldering the Comics Release List Tracker PCB

Before prototyping my PCB design, I tested all connections and wiring with the Arduino Nano 33 IoT on the breadboard.

Then, I designed the Comics Release List Tracker PCB by using KiCad. I attached the Gerber file of the PCB below, so if you want, you can order this PCB from PCBWay to create a stylish and fully-functional weekly new comics release list tracker inspired by Spider-Man :)

Click here to inspect and order this PCB directly on PCBWay.

First of all, by using a soldering iron, I attached headers (female), buzzer, potentiometer, vibration motor, 5mm common cathode RGB LED, 6x6 pushbuttons, 1K resistors, and the power jack.

Component list on the PCB:

A1 (Headers for Arduino Nano 33 IoT)
S1 (Headers for Nokia 5110 Screen)
BZ1 (Buzzer)
RV1 (Potentiometer)
V1 (Vibration Motor)
D1 (5mm Common Cathode RGB LED)
K1, K2, K3, K4, K5 (6x6 Pushbutton)
R1, R2, R3, R4, R5 (1K Resistor)
J1 (Power Jack)

Step 3: Setting Up a LAMP Web Server on Raspberry Pi

If you are a novice in programming with Raspberry Pi, you can inspect well-explained instructions and tutorials on the official Raspberry Pi website.

To go to the official Raspberry Pi setting up tutorial, click here.

⭐ Open a terminal window by selecting Accessories > Terminal from the menu.

⭐ Install the apache2 package by typing the following command into the terminal and pressing Enter:

sudo apt-get install apache2 -y

⭐ To test the server, open Chromium by selecting Internet > Chromium Web Browser from the menu and enter http://localhost.
⭐ If you want, you can use the IP address of your Raspberry Pi as well.

hostname -I

⭐ Install the PHP package with the following command:
⭐ Do not forget to update the Pi.

sudo apt-get update

sudo apt-get install php -y

⭐ To be able to utilize the ShortBoxed comics API, install the php-curl package:

sudo apt-get install php-curl

⭐ Then, restart the apache server to be able to use the installed packages on the localhost:

sudo service apache2 restart

Step 4: Developing the New Comics Releases Web Application in PHP to Obtain the Weekly Comics Release Lists

This PHP web application is for fetching comics information from the ShortBoxed comics API. The API lets the user retrieve and query comics data in JSON.

API Domain: api.shortboxed.com

Although there are lots of features provided by the API, I used these three features below:

⭐ Returns this week's comics release list:
GET /comics/v1/new

⭐ Returns next week's comics release list:
GET /comics/v1/future

⭐ Returns previous week's comics release list:
GET /comics/v1/previous

The web application consists of one file - index.php. You can download the web application below to install it on your Raspberry Pi - New_Comics_Releases.zip.
💻 index.php

⭐ Define the 'comics' class to print requested comics release lists.

⭐ In the get_this_week_releases() function:

⭐ Get this week's released comics list from the ShortBoxed comics API by using the json_decode() and file_get_contents() functions.

⭐ Print new comics from selected publishers - Marvel Comics and DC Comics.

⭐ Syntax: %publisher, title ****...%date%

⭐ In the get_next_week_releases() function:

⭐ Get next week's comics list from the ShortBoxed comics API by using the json_decode() and file_get_contents() functions.

⭐ Print comics from selected publishers - Marvel Comics and DC Comics.

⭐ Syntax: %publisher, title ****...%date%

⭐ In the get_previous_week_releases() function:
⭐ Get previous week's released comics list from the ShortBoxed comics API by using the json_decode() and file_get_contents() functions.

⭐ Print comics from selected publishers - Marvel Comics and DC Comics.

⭐ Syntax: %publisher, title ****...%date%

⭐ Define a new object for the 'comics' class - releases.

⭐ Print the requested comics release list by the device via a Get request - this week, previous week, or next week.

Step 5: Setting Up the Web Application on Raspberry Pi

⭐ First of all, extract the New_Comics_Releases.zip folder and move the application folder (New_Comics_Releases) to the apache server (/var/www/html) by using the terminal since the apache server is a protected location.

sudo mv /home/pi/Downloads/New_Comics_Releases /var/www/html/

⭐ Go to the web application:

http://localhost/New_Comics_Releases/

⭐ To test whether the web application obtains requested comics release lists successfully - this week, next week, and previous week:

http://localhost/New_Comics_Releases/?q=this

http://localhost/New_Comics_Releases/?q=next

http://localhost/New_Comics_Releases/?q=previous

Step 6: Setting Up the Arduino Nano 33 IoT

If you are a novice in programming with the Arduino Nano 33 IoT, follow the steps below to program it with the Arduino IDE.

⭐ Download the required drivers - Arduino SAMD Core - as explained here.

⭐ To be able to connect to the WiFi, download the WiFiNINA library from here.

⭐Download the required libraries to be able to control the modules:

Nokia 5110 Screen | Library

Step 7: Playing the Spider-Man Theme Song With a Buzzer

I used an extra file named pitches.h. This file contains all the pitch values for typical notes. For example, NOTE_C4 is middle C. NOTE_FS4 is F sharp, and so forth.

To play the Spider-Man theme song (1967) with a buzzer using the tone() function, I elicited its notes and durations from here.

⭐ In the play_Melody() function:

⭐ Define the notes in the Spider-Man theme song.

⭐ Define durations in the Spider-Man theme song: 4 = quarter note, 8 = eighth note, etc.

⭐ Calculate the length of the melody array.

⭐ To calculate the note duration, take one second divided by the note type. e.g. quarter note = 1000 / 4, eighth note = 1000 / 8, etc.

⭐ To distinguish the notes, set a minimum time between them.

Note's duration + 30%

Step 8: Connections and Adjustments

// Connections

// Arduino Nano 33 IoT :

// Nokia 5110 Screen

// D2 --------------------------- SCK (Clk)

// D3 --------------------------- MOSI (Din)

// D4 --------------------------- DC

// D5 --------------------------- RST

// D6 --------------------------- CS (CE)

// Rotary Potentiometer

// A0 --------------------------- S

// Button (Right)

// A1 --------------------------- S

// Button (Left)

// A2 --------------------------- S

// Button (OK)

// A3 --------------------------- S

// Button (Up)

// A6 --------------------------- S

// Button (Down)

// A7 --------------------------- S

// RGB LEB (RCGB)

// D12 --------------------------- R

// D11 --------------------------- G

// D10 --------------------------- B

// Buzzer

// D8 --------------------------- +

// Vibration Motor

// D9 --------------------------- +

After completing and uploading the code, I attached all required components to the board via headers - the Arduino Nano 33 IoT, the Nokia 5110 Screen, and the potentiometer knob.

Step 9: Modes and Features

🕷🕸 First of all, the device checks for a successful WiFi connection. Then, if connected, it displays the interface (menu).

🕷🕸 The device shows four different modes on the interface:

A. This Week
B. Next Week
C. Previously
D. Graphics

🕷🕸 The device allows the user to select a mode (option) on the interface via the control buttons:

Up ➡ Go Up
Down ➡ Go Down
OK ➡ Activate

🕷🕸 While selecting a mode on the interface with the Up and Down buttons, the device turns the RGB LED to a different color for each mode and activates the vibration motor to notify the user.

This Week ➡ Purple
Next Week ➡ Cyan
Previously ➡ Yellow
Graphics ➡ Green

🕷🕸 After activating any modes, the device lets the user return to the interface by pressing the Up or Down button.

📌 A. This Week

🕷🕸 The device plays the Spider-Man theme song (1967).

🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query this week's comics release list.

🕷🕸 The device displays the fetched comics release list and date, including these publishers:

Marvel Comics
DC Comics
Image Comics (optional)

🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.

📌 B. Next Week

🕷🕸 The device plays the Spider-Man theme song (1967).

🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query next week's comics release list.

🕷🕸 The device displays the fetched comics release list and date, including these publishers:

Marvel Comics
DC Comics
Image Comics (optional)

🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.

📌 C. Previously

🕷🕸 The device plays the Spider-Man theme song (1967).

🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query the previous week's comics release list.

🕷🕸 The device displays the fetched comics release list and date, including these publishers:

Marvel Comics
DC Comics
Image Comics (optional)

🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.

📌 D. Graphics

🕷🕸 The device lets the user show different graphics (monochrome images) by adjusting the potentiometer value from 1 to 10 :)

Step 10: Videos and Conclusion

After completing all steps above, I placed the device in my bookcase as a fitting and stylish decoration, where I store my comic book collection. It works stupendously :)