Display comics release lists of this, next, and previous weeks via this amazing 🕷 PCB playing Spider-Man theme song and Nano 33 IoT :)
Advertisement:
Read Later
Read Later
Display comics release lists of this, next, and previous weeks via this amazing 🕷 PCB playing Spider-Man theme song and Nano 33 IoT :)
Components :
[1]PCBWay Custom PCB
[1]Arduino Nano 33 IoT
[1]Raspberry Pi 3B+ or 4
[1]Nokia 5110 Screen
[1]Buzzer
[1]Potentiometer
[1]Potentiometer Knob
[1]5mm Common Cathode RGB LED
[1]Vibration Motor
[5]Button (6x6)
[5]1K Resistor
[1]Power Jack
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:
Also, it has these unnecessary yet funny additional features 😃
Huge thanks to PCBWay for sponsoring this project.
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)
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
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();
}
⭐ 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
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
⭐ 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).
⭐ To create different graphics (monochrome images), go to Monochrome Image Converter.
// Define screen settings.
LCD5110 myGLCD(2,3,4,5,6);
extern uint8_t SmallFont[];
// Define the graphics:
extern uint8_t spiderman[];
extern uint8_t batman[];
extern uint8_t daredevil[];
extern uint8_t marvel[];
extern uint8_t superman[];
⭐ 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.
if(graphics == true){
do{
myGLCD.invertText(true);
myGLCD.print("D. Graphics", 0, 40);
myGLCD.invertText(false);
myGLCD.update();
adjustColor(0, 255, 0);
delay(100);
if(_OK == false){
myGLCD.clrScr();
myGLCD.update();
activated = true;
while(activated == true){
read_controls();
// Define picture queue:
int pic = map(_pot, 100, 950, 1, 10);
if(pic == 1) myGLCD.drawBitmap(20,0,spiderman,40,40);
if(pic == 2) myGLCD.clrScr();
if(pic == 3) myGLCD.drawBitmap(10,0,batman,60,32);
if(pic == 4) myGLCD.clrScr();
if(pic == 5) myGLCD.drawBitmap(2,0,daredevil,80,40);
if(pic == 6) myGLCD.clrScr();
if(pic == 7) myGLCD.drawBitmap(12,0,marvel,60,33);
if(pic == 8) myGLCD.clrScr();
if(pic == 9) myGLCD.drawBitmap(12,0,superman,60,60);
if(pic == 10) myGLCD.clrScr();
myGLCD.update();
// Exit.
if(_up == false || _down == false){ activated = false; myGLCD.clrScr(); myGLCD.update(); }
}
}
}while(graphics == false);
}
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.
#define NOTE_B0 31
#define NOTE_C1 33
#define NOTE_CS1 35
#define NOTE_D1 37
#define NOTE_DS1 39
#define NOTE_E1 41
#define NOTE_F1 44
#define NOTE_FS1 46
#define NOTE_G1 49
#define NOTE_GS1 52
#define NOTE_A1 55
#define NOTE_AS1 58
#define NOTE_B1 62
#define NOTE_C2 65
#define NOTE_CS2 69
#define NOTE_D2 73
#define NOTE_DS2 78
#define NOTE_E2 82
#define NOTE_F2 87
#define NOTE_FS2 93
#define NOTE_G2 98
#define NOTE_GS2 104
...
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.
void play_Melody(){
// Notes in the melody:
int melody[] = {
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_G4, NOTE_GS4, NOTE_AS4, NOTE_GS4, NOTE_G4, NOTE_F4, NOTE_DS4,
NOTE_F4, NOTE_DS4, NOTE_D4, NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_AS4,
NOTE_GS4, NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_G4,
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4, NOTE_G4,
NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_G4, NOTE_D5
};
...
⭐ Define durations in the Spider-Man theme song: 4 = quarter note, 8 = eighth note, etc.
...
// Note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
6, 8, 2, 6, 2, 6, 8,
2, 6, 8, 2, 6, 8, 2,
6, 2, 6, 8, 2, 6, 8, 1,
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
8, 8, 8, 8, 8, 1, 6,
6, 8, 6, 6, 1
};
...
⭐ 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%
...
// 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);
}
}
// 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.
🕷🕸 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:
🕷🕸 The device allows the user to select a mode (option) on the interface via the control buttons:
🕷🕸 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.
🕷🕸 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:
🕷🕸 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:
🕷🕸 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:
🕷🕸 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 :)
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 :)
Weeky_New_Comics_Release_List_Tracker.ino
Download
/////////////////////////////////////////////
// Marvel and DC Weekly New Comics //
// Release List Tracker //
// ----------------- //
// (Arduino Nano 33 IoT) //
// by Kutluhan Aktar //
// //
/////////////////////////////////////////////
// Display comics release lists of this, next, and previous weeks via this amazing 🕷 PCB playing Spider-Man theme song and Nano 33 IoT.
//
//
// For more information:
// https://www.theamplituhedron.com/projects/Marvel-and-DC-Weekly-New-Comics-Release-List-Tracker/
//
//
// 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 --------------------------- +
// Include required libraries:
#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 screen settings.
LCD5110 myGLCD(2,3,4,5,6);
extern uint8_t SmallFont[];
// Define the graphics:
extern uint8_t spiderman[];
extern uint8_t batman[];
extern uint8_t daredevil[];
extern uint8_t marvel[];
extern uint8_t superman[];
// Define controls:
#define pot A0
#define right A1
#define left A2
#define OK A3
#define up A6
#define down A7
// Define RGB LED pins.
#define redPin 12
#define greenPin 11
#define bluePin 10
// Define the buzzer pin.
#define buzzer 8
// Define the vibration motor pin.
#define vib_motor 9
// Define menu options:
volatile boolean this_week = false;
volatile boolean next_week = false;
volatile boolean previous_week = false;
volatile boolean graphics = false;
volatile boolean activated = false;
// Define the data holders:
int _pot, _right, _left, _OK, _up, _down, selected = 0, x = 0;
String comics_list, _date;
void setup() {
Serial.begin(9600);
// Control pin settings:
pinMode(right, INPUT_PULLUP);
pinMode(left, INPUT_PULLUP);
pinMode(OK, INPUT_PULLUP);
pinMode(up, INPUT_PULLUP);
pinMode(down, INPUT_PULLUP);
pinMode(redPin, OUTPUT);
pinMode(bluePin, OUTPUT);
pinMode(greenPin, OUTPUT);
pinMode(vib_motor, OUTPUT);
// Initiate screen.
myGLCD.InitLCD();
myGLCD.setFont(SmallFont);
// Check for the WiFi module:
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);
}
// Verify connection on the Nokia 5110 Screen.
myGLCD.clrScr();
myGLCD.print("Connected to", 0, 8);
myGLCD.print("WiFi!!!", 0, 16);
myGLCD.update();
delay(2000);
myGLCD.clrScr();
myGLCD.update();
}
void loop() {
read_controls();
change_menu_options();
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);
}
if(next_week == true){
do{
myGLCD.invertText(true);
myGLCD.print("B. Next Week", 0, 24);
myGLCD.invertText(false);
myGLCD.update();
adjustColor(0, 255, 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=next");
myGLCD.clrScr();
myGLCD.update();
while(activated == true){
read_controls();
myGLCD.print("Next 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(next_week == false);
}
if(previous_week == true){
do{
myGLCD.invertText(true);
myGLCD.print("C. Previously", 0, 32);
myGLCD.invertText(false);
myGLCD.update();
adjustColor(255, 255, 0);
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=previous");
myGLCD.clrScr();
myGLCD.update();
while(activated == true){
read_controls();
myGLCD.print("Previous 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(previous_week == false);
}
if(graphics == true){
do{
myGLCD.invertText(true);
myGLCD.print("D. Graphics", 0, 40);
myGLCD.invertText(false);
myGLCD.update();
adjustColor(0, 255, 0);
delay(100);
if(_OK == false){
myGLCD.clrScr();
myGLCD.update();
activated = true;
while(activated == true){
read_controls();
// Define picture queue:
int pic = map(_pot, 100, 950, 1, 10);
if(pic == 1) myGLCD.drawBitmap(20,0,spiderman,40,40);
if(pic == 2) myGLCD.clrScr();
if(pic == 3) myGLCD.drawBitmap(10,0,batman,60,32);
if(pic == 4) myGLCD.clrScr();
if(pic == 5) myGLCD.drawBitmap(2,0,daredevil,80,40);
if(pic == 6) myGLCD.clrScr();
if(pic == 7) myGLCD.drawBitmap(12,0,marvel,60,33);
if(pic == 8) myGLCD.clrScr();
if(pic == 9) myGLCD.drawBitmap(12,0,superman,60,60);
if(pic == 10) myGLCD.clrScr();
myGLCD.update();
// Exit.
if(_up == false || _down == false){ activated = false; myGLCD.clrScr(); myGLCD.update(); }
}
}
}while(graphics == false);
}
}
void read_controls(){
_pot = analogRead(pot);
_right = digitalRead(right);
_left = digitalRead(left);
_OK = digitalRead(OK);
_up = digitalRead(up);
_down = digitalRead(down);
}
void interface(){
// Define options.
myGLCD.print("Get Comics:", 0, 0);
myGLCD.print("A. This Week", 0, 16);
myGLCD.print("B. Next Week", 0, 24);
myGLCD.print("C. Previously", 0, 32);
myGLCD.print("D. Graphics", 0, 40);
myGLCD.update();
}
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;
}
}
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);
}
}
void play_Melody(){
// Notes in the melody:
int melody[] = {
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_G4, NOTE_GS4, NOTE_AS4, NOTE_GS4, NOTE_G4, NOTE_F4, NOTE_DS4,
NOTE_F4, NOTE_DS4, NOTE_D4, NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_AS4,
NOTE_GS4, NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_G4,
NOTE_C4, NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_GS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4,
NOTE_F4, NOTE_GS4, NOTE_C5, NOTE_B4, NOTE_B4, NOTE_F4, NOTE_C4,
NOTE_DS4, NOTE_G4, NOTE_FS4, NOTE_DS4, NOTE_C4, NOTE_GS4, NOTE_G4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4,
NOTE_G4, NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_DS4, NOTE_C4, NOTE_G4,
NOTE_F4, NOTE_DS4, NOTE_F4, NOTE_G4, NOTE_D5
};
// Note durations: 4 = quarter note, 8 = eighth note, etc.:
int noteDurations[] = {
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
6, 8, 2, 6, 2, 6, 8,
2, 6, 8, 2, 6, 8, 2,
6, 2, 6, 8, 2, 6, 8, 1,
6, 8, 2, 6, 8, 2, 6,
8, 6, 8, 8, 6, 6, 2,
6, 8, 2, 6, 8, 2, 6,
8, 2, 6, 8, 2, 6, 1,
8, 8, 8, 8, 8, 1,
8, 8, 8, 8, 8, 1, 6,
6, 8, 6, 6, 1
};
// 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);
}
}
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);
}
void adjustColor(int red, int green, int blue){
analogWrite(redPin, red);
analogWrite(greenPin, green);
analogWrite(bluePin, blue);
}
index.php (web application)
Download
<?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();
}
?>
pitches.h
Download
/*************************************************
* Public Constants
*************************************************/
#define NOTE_B0 31
#define NOTE_C1 33
#define NOTE_CS1 35
#define NOTE_D1 37
#define NOTE_DS1 39
#define NOTE_E1 41
#define NOTE_F1 44
#define NOTE_FS1 46
#define NOTE_G1 49
#define NOTE_GS1 52
#define NOTE_A1 55
#define NOTE_AS1 58
#define NOTE_B1 62
#define NOTE_C2 65
#define NOTE_CS2 69
#define NOTE_D2 73
#define NOTE_DS2 78
#define NOTE_E2 82
#define NOTE_F2 87
#define NOTE_FS2 93
#define NOTE_G2 98
#define NOTE_GS2 104
#define NOTE_A2 110
#define NOTE_AS2 117
#define NOTE_B2 123
#define NOTE_C3 131
#define NOTE_CS3 139
#define NOTE_D3 147
#define NOTE_DS3 156
#define NOTE_E3 165
#define NOTE_F3 175
#define NOTE_FS3 185
#define NOTE_G3 196
#define NOTE_GS3 208
#define NOTE_A3 220
#define NOTE_AS3 233
#define NOTE_B3 247
#define NOTE_C4 262
#define NOTE_CS4 277
#define NOTE_D4 294
#define NOTE_DS4 311
#define NOTE_E4 330
#define NOTE_F4 349
#define NOTE_FS4 370
#define NOTE_G4 392
#define NOTE_GS4 415
#define NOTE_A4 440
#define NOTE_AS4 466
#define NOTE_B4 494
#define NOTE_C5 523
#define NOTE_CS5 554
#define NOTE_D5 587
#define NOTE_DS5 622
#define NOTE_E5 659
#define NOTE_F5 698
#define NOTE_FS5 740
#define NOTE_G5 784
#define NOTE_GS5 831
#define NOTE_A5 880
#define NOTE_AS5 932
#define NOTE_B5 988
#define NOTE_C6 1047
#define NOTE_CS6 1109
#define NOTE_D6 1175
#define NOTE_DS6 1245
#define NOTE_E6 1319
#define NOTE_F6 1397
#define NOTE_FS6 1480
#define NOTE_G6 1568
#define NOTE_GS6 1661
#define NOTE_A6 1760
#define NOTE_AS6 1865
#define NOTE_B6 1976
#define NOTE_C7 2093
#define NOTE_CS7 2217
#define NOTE_D7 2349
#define NOTE_DS7 2489
#define NOTE_E7 2637
#define NOTE_F7 2794
#define NOTE_FS7 2960
#define NOTE_G7 3136
#define NOTE_GS7 3322
#define NOTE_A7 3520
#define NOTE_AS7 3729
#define NOTE_B7 3951
#define NOTE_C8 4186
#define NOTE_CS8 4435
#define NOTE_D8 4699
#define NOTE_DS8 4978
Gerber Files
Download
Fabrication Files
Download
New Comics Releases
Download
spiderman.c
Download
batman.c
Download
daredevil.c
Download
marvel.c
Download
superman.c
Download