⭐ 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();}

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.

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 4: 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.

Step 5: Programming the Arduino Nano 33 IoT

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 libraryWiFiClient 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);  }

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.

#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 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.

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 :)

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 :)