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.
Figure - 59.1
Figure - 59.2
Step 1: 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.
Figure - 59.3
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.
Figure - 59.4
Figure - 59.5
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)
Figure - 59.6
Figure - 59.7
Figure - 59.8
Step 2: 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.
Figure - 59.9
⭐ 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
Figure - 59.10
⭐ 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
Figure - 59.11
Figure - 59.12
⭐ 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
Figure - 59.13
⭐ To be able to utilize the ShortBoxed comics API, install the php-curl package:
sudo apt-get install php-curl
Figure - 59.14
⭐ Then, restart the apache server to be able to use the installed packages on the localhost:
sudo service apache2 restart
Step 3: 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
comics:
[
{
"publisher": "MARVEL COMICS",
"description": "Peter Parker gets a new job! Spidey gets a new look! And Kingpin's plans start coming together! Rated T+ ",
"title": "AMAZING SPIDER-MAN #61",
"price": "$3.99",
"creators": "(W) Nick Spencer (A/CA) Patrick Gleason",
"release_date": "2021-03-10",
"diamond_id": "JAN210648"
},
...
]
⭐ Returns next week's comics release list:
GET /comics/v1/future
comics:
[
{
"publisher": "DC COMICS",
"description": "Devastation in Gotham City! Following the events of a massive explosion in midtown, Batman and Superman pick up the pieces to learn who rigged the Atomic Skull like a bomb...and will they do it again?",
"title": "BATMAN SUPERMAN #10",
"price": "$3.99",
"creators": "(W) Joshua Williamson (A/CA) Clayton Henry",
"release_date": "2021-07-29.",
"diamond_id": "MAR200528"
},
...
]
⭐ Returns previous week's comics release list:
GET /comics/v1/previous
comics:
[
{
"publisher": "MARVEL COMICS",
"description": "THE FIGHT TO BECOME THE ALL-NEW PHOENIX HEATS UP! As the greatest heroes and villains of the Marvel Universe are trapped within the battle to decide the all-new Phoenix.",
"title": "AVENGERS #43",
"price": "$3.99", "creators": "(W) Jason Aaron (A) Javi Garron (CA) Leinil Francis Yu",
"release_date": "2021-03-03",
"diamond_id": "JAN210669"
},
...
]
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%
public function get_this_week_releases(){
// Get this week's released comics list from the Shortboxed comics API.
$new_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/new"));
// Print new comics from selected publishers.
$date;
echo "%";
foreach($new_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$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%
public function get_next_week_releases(){
// Get next week's comics list from the Shortboxed comics API.
$next_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/future"));
// Print comics from selected publishers.
$date;
echo "%";
foreach($next_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$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%
public function get_previous_week_releases(){
// Get previous week's released comics list from the Shortboxed comics API.
$previous_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/previous"));
// Print comics from selected publishers.
$date;
echo "%";
foreach($previous_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$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.
$releases = new comics();
// Print the requested comics release list by the device - this week, previous week, or next week.
if(isset($_GET["q"]) && $_GET["q"] != ""){
if ($_GET["q"] == "this") $releases->get_this_week_releases();
if ($_GET["q"] == "previous") $releases->get_previous_week_releases();
if ($_GET["q"] == "next") $releases->get_next_week_releases();
}
Figure - 59.15
Figure - 59.16
Step 3.1: 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.
⭐ Include required libraries and define the WiFi settings.
#include <SPI.h>
#include <WiFiNINA.h>
#include <LCD5110_Graph.h>
#include "pitches.h"
char ssid[] = "<_SSID_>"; // your network SSID (name)
char pass[] = "<_PASSWORD_>"; // your network password (use for WPA, or use as key for WEP)
int keyIndex = 0; // your network key Index number (needed only for WEP)
int status = WL_IDLE_STATUS;
// Enter the IPAddress of your Raspberry Pi.
IPAddress server(192, 168, 1, 20);
// Initialize the Ethernet client library
WiFiClient client; /* WiFiSSLClient client; */
⭐ Define the Nokia 5110 screen settings and the graphics (monochrome images).
⭐ Check for the WiFi module to verify the connection.
if (WiFi.status() == WL_NO_MODULE) { myGLCD.print("Connection Failed!", 0, 8); myGLCD.update(); while (true); }
// Attempt to connect to the Wifi network:
while (status != WL_CONNECTED) {
myGLCD.print("Waiting...", 0, 8);
myGLCD.print("Attempting to", 0, 16);
myGLCD.print("connect to", 0, 24);
myGLCD.print("WiFi !!!", 0, 32);
myGLCD.update();
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// Wait 10 seconds for connection:
delay(10000);
}
⭐ In the change_menu_options() function:
⭐ Increase or decrease the menu option number (selected) using the Up and Down buttons.
⭐ Activate the vibration motor on every change.
⭐ Depending on the menu option number (selected), change the boolean status.
void change_menu_options(){
// Increase or decrease the option number using Up and Down buttons.
if(_up == false) { selected++; digitalWrite(vib_motor, HIGH); }
if(_down == false) { selected--; digitalWrite(vib_motor, HIGH); }
if(selected < 0) selected = 4;
if(selected > 4) selected = 1;
delay(100);
digitalWrite(vib_motor, LOW);
// Depending on the selected option number, change boolean status.
switch(selected){
case 1:
this_week = true;
next_week = false;
previous_week = false;
graphics = false;
break;
case 2:
this_week = false;
next_week = true;
previous_week = false;
graphics = false;
break;
case 3:
this_week = false;
next_week = false;
previous_week = true;
graphics = false;
break;
case 4:
this_week = false;
next_week = false;
previous_week = false;
graphics = true;
break;
}
}
⭐ After selected, if this_week, next_week, or previous_week menu option is activated by pressing the OK button:
⭐ Play the Spider-Man theme song (1967) with the buzzer.
⭐ Get the requested list from the web application - this week, next week, or the previous week.
⭐ Print the obtained comics release list and release date.
⭐ Scroll the fetched comics release list by using the Right and Left buttons.
⭐ If the Up or Down button is pressed, exit and return to the interface.
if(this_week == true){
do{
myGLCD.invertText(true);
myGLCD.print("A. This Week", 0, 16);
myGLCD.invertText(false);
myGLCD.update();
adjustColor(255, 0, 255);
delay(100);
if(_OK == false){
myGLCD.clrScr();
myGLCD.update();
activated = true;
// Play the Spider-Man Theme Song:
myGLCD.print("Playing...", CENTER, 16);
myGLCD.update();
play_Melody();
myGLCD.clrScr();
myGLCD.update();
// Get the requested list from the web application:
make_a_get_request("/New_Comics_Releases/?q=this");
myGLCD.clrScr();
myGLCD.update();
while(activated == true){
read_controls();
myGLCD.print("This Week:", 0, 0);
myGLCD.print(_date, CENTER, 16);
scrolling_text(comics_list, 32);
// Exit.
if(_up == false || _down == false){ activated = false; x = 0; _date = ""; comics_list = ""; myGLCD.clrScr(); myGLCD.update(); }
}
}
}while(this_week == false);
}
...
⭐ In the make_a_get_request() function:
⭐ Connect to the web application named New Comics Releases.
⭐ If the connection is successful, make a Get request to obtain weekly comics release lists of this week, next week, or the previous week.
⭐ If there are incoming bytes available, get the response from the web application.
⭐ Split the response string by the predefined delimiter (%) to glean information as substrings - comics_list and _date.
void make_a_get_request(String application){
// Connect to the web application named New_Comics_Releases. Change '80' with '443' if you are using SSL connection.
if(client.connect(server, 80)){
// If successful:
myGLCD.print("Connected to", 0, 8);
myGLCD.print("the server!!!", 0, 16);
myGLCD.update();
// Make an HTTP Get request:
client.println("GET " + application + " HTTP/1.1");
client.println("Host: 192.168.1.22");
client.println("Connection: close");
client.println();
}else{
myGLCD.print("Connection", 0, 8);
myGLCD.print("Error!!!", 0, 16);
myGLCD.update();
}
delay(2000); // Wait 2 seconds after connection...
// If there are incoming bytes available, get the response from the web application.
String response = "";
while (client.available()) { char c = client.read(); response += c; }
if(response != "" && response.endsWith("%")){
// Split the response string by a pre-defined delimiter in a simple way. '%'(percentage) is defined as the delimiter in this project.
int delimiter_1, delimiter_2, delimiter_3;
delimiter_1 = response.indexOf("%");
delimiter_2 = response.indexOf("%", delimiter_1 + 1);
delimiter_3 = response.indexOf("%", delimiter_2 + 1);
// Glean information as substrings.
comics_list = response.substring(delimiter_1 + 1, delimiter_2);
_date = response.substring(delimiter_2 + 1, delimiter_3);
}
}
⭐ In the scrolling_text() function:
⭐ Scroll a given string using the Right and Left buttons on a given y coordinate (row).
void scrolling_text(String text, int y){
int len = text.length();
// Scroll text using Right and Left buttons.
if(_right == false) x++;
if(_left == false) x--;
if(x>84) x = 84;
if(x<=-(len*6)) x = -(len*6);
// Print.
myGLCD.print(text, x, y);
myGLCD.update();
//delay(25);
}
⭐ After selected, if the graphics menu option is activated by pressing the OK button:
⭐ Using the map() function, define a graphics (monochrome images) queue displayed depending on the potentiometer value - from 1 to 10.
⭐ If the Up or Down button is pressed, exit and return to the interface.
Step 5.1: 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 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%
...
// Calculate the length of the melody array:
int len = sizeof(melody) / sizeof(melody[0]);
// Play the melody using the given notes and durations:
for (int thisNote = 0; thisNote < len; thisNote++) {
// To calculate the note duration, take one second divided by the note type.
// e.g. quarter note = 1000 / 4, eighth note = 1000 / 8, etc.
int noteDuration = 1000 / noteDurations[thisNote];
tone(buzzer, melody[thisNote], noteDuration);
// To distinguish the notes, set a minimum time between them.
// The note's duration + 30% seems to work well:
int pauseBetweenNotes = noteDuration * 1.30;
delay(pauseBetweenNotes);
// Stop the tone playing:
noTone(buzzer);
}
}
Figure - 59.30
Figure - 59.31
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.
Figure - 59.32
Modes and Features
🕷🕸 First of all, the device checks for a successful WiFi connection. Then, if connected, it displays the interface (menu).
Figure - 59.33
Figure - 59.34
🕷🕸 The device shows four different modes on the interface:
A. This Week
B. Next Week
C. Previously
D. Graphics
Figure - 59.35
🕷🕸 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
Figure - 59.36
🕷🕸 After activating any modes, the device lets the user return to the interface by pressing the Up or Down button.
📌 A. This Week
Figure - 59.37
🕷🕸 The device plays the Spider-Man theme song (1967).
Figure - 59.38
🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query this week's comics release list.
Figure - 59.39
🕷🕸 The device displays the fetched comics release list and date, including these publishers:
Marvel Comics
DC Comics
Image Comics (optional)
Figure - 59.40
🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.
Figure - 59.41
📌 B. Next Week
Figure - 59.42
🕷🕸 The device plays the Spider-Man theme song (1967).
Figure - 59.43
🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query next week's comics release list.
Figure - 59.44
🕷🕸 The device displays the fetched comics release list and date, including these publishers:
Marvel Comics
DC Comics
Image Comics (optional)
Figure - 59.45
🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.
Figure - 59.46
📌 C. Previously
Figure - 59.47
🕷🕸 The device plays the Spider-Man theme song (1967).
Figure - 59.48
🕷🕸 The device connects to the web application (New Comics Releases) to retrieve and query the previous week's comics release list.
Figure - 59.49
🕷🕸 The device displays the fetched comics release list and date, including these publishers:
Marvel Comics
DC Comics
Image Comics (optional)
Figure - 59.50
🕷🕸 The device allows the user to scroll the obtained comics release list by using the Right and Left buttons.
Figure - 59.51
📌 D. Graphics
Figure - 59.52
🕷🕸 The device lets the user show different graphics (monochrome images) by adjusting the potentiometer value from 1 to 10 :)
Figure - 59.53
Figure - 59.54
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 :)
<?php
// Define the 'comics' class to print requested comics release lists:
class comics{
public function get_this_week_releases(){
// Get this week's released comics list from the Shortboxed comics API.
$new_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/new"));
// Print new comics from selected publishers.
$date;
echo "%";
foreach($new_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$date."%";
}
public function get_previous_week_releases(){
// Get previous week's released comics list from the Shortboxed comics API.
$previous_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/previous"));
// Print comics from selected publishers.
$date;
echo "%";
foreach($previous_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$date."%";
}
public function get_next_week_releases(){
// Get next week's comics list from the Shortboxed comics API.
$next_comics = json_decode(file_get_contents("https://api.shortboxed.com/comics/v1/future"));
// Print comics from selected publishers.
$date;
echo "%";
foreach($next_comics->comics as $comic){
if($comic->publisher == "MARVEL COMICS" || $comic->publisher == "DC COMICS" /*|| $comic->publisher == "IMAGE COMICS"*/){
echo $comic->publisher.", ".$comic->title." **** ";
$date = $comic->release_date;
}
}
echo "%".$date."%";
}
}
// Define a new object for the 'comics' class:
$releases = new comics();
// Print the requested comics release list by the device - this week, previous week, or next week.
if(isset($_GET["q"]) && $_GET["q"] != ""){
if ($_GET["q"] == "this") $releases->get_this_week_releases();
if ($_GET["q"] == "previous") $releases->get_previous_week_releases();
if ($_GET["q"] == "next") $releases->get_next_week_releases();
}
?>
