IoT Interactive New Year Gift Card on Localhost

Change the ornament color by choosing RGB color patterns. Block it by redirecting and play Jingle Bells via buttons. Share it :)

Similar projects worth following
In this project, I wanted to create an interactive new year gift card in code to be executed on my friends' localhost and controlled by a module designed by me. Via the module, you can block the gift card by redirecting the gift card to a pre-defined web page, change the color of the Christmas tree ornament and embroidery by choosing an RGB color pattern, and play or pause Jingle Bells song integrated into the gift card. I coded the gift card design in SVG format and shared it on my website as card.svg: if you want, you can change the gift card design and style.

I thought that this project would be a piquant gift for productive minds on Christmas: so please follow the steps below and enjoy the features of the gift card while enhancing them :)

Note: The module refers to the apparatus depicted in the schematics.

I used an ESP-WROOM-32 Development Board to create the module updating the gift card's database table on the localhost because I had it available at the time.

Of course, you can use any other microcontroller that can make an HTTP GET request instead of the ESP32 Development Board.

Note: I made an iteration of this gift card working with the command-activating buttons without a microcontroller for the test run, which you can access on your dashboard on TheAmplituhedron.

To go to inspect the gift card using the command-activating buttons, click here.

First of all, download the required libraries for Arduino IDE below to continue the following steps.

Required Libraries:

For ESP32 Development Board, click here.

Step 1: Create a database table on the localhost

As the localhost, I recommend you use XAMPP: however you can use any other localhost provider than XAMPP for this project. Download XAMPP here.

In order to send commands to the gift card from the module, you need to create a database and a database table named both 'giftcard' on the localhost. The module updates the 'giftcard' database table by making HTTP Get Requests to the convey.php file. And, the index.js file collates data instantly from the 'giftcard' database table through ajax calls: the process is well-explained below.

Initiate XAMPP.

Create a database named giftcard.

Create a database table named giftcard. You can view the code in SQL in the table.sql file.

Insert default variables to the table - block, color, and audio. You can view the code in SQL in the table.sql file.

Step 2: Designing the gift card

I coded the gift card design in SVG format to be able to change the color of the Christmas tree embroidery by choosing an RGB color pattern on the module. The gift card SVG image is embedded on the index.html file: but you can download the image separately from here.

Step 3: Updating the database table via the module to collate data

In the convey.php file:

Define the connection settings.

If block, color, or audio variables is transferred from the module;

Using the ternary operator, create the update array.

Update the database.

If the print variable is transferred from the index.js file through an ajax call;

Create the data array.

Select from the database table.

Using the json_encode() function, print variables in JSON format.

In the index.js file:

Activate the setInterval() function.

Make an ajax call to the convey.php file to send the print variable.

Get data in JSON format.

If the block variable is true, redirect the gift card to the home page of TheAmplituhedron. You can choose any other web page to redirect.

Fill circles with the color from the color variable.

If the audio variable is true, play Jingle Bells.

Step 4: The module

The module is composed of an ESP-WROOM-32, three potentiometers, and an RGB LED.

Due to the settings of ESP-WROOM-32, you need to use ledc functions to define PWM signals for the RGB LED.


PWM channel - from 0 to 15

PWM signal frequency - 5000Hz (recommended)

Duty cycle resolution - from 1 to 16 bits (8-bit resolution gets values from 0 to 255)

Make an HTTP Get Request to the convey.php file to transfer variables.

Use the ternary operator to change values easily with buttons.

Map the analog input - from 0 to 4096.

Get the RGB color pattern from potentiometers.

Display the color pattern using the ledcWrite() function.

Check whether the connection to the localhost is successful or not on the serial monitor.


Without installing the gift card on your computer, you can test its features using the command-activating buttons on the inspect page.

1) Block the gift card using the module.

2) Change the color of the Christmas tree ornament and embroidery by choosing an RGB color pattern on the module.

3) Play or pause the Jingle Bells instrumental version integrated into the gift...

Read more »


Includes all code and asset files.

RAR Archive - 1.69 MB - 03/28/2020 at 20:55


ino - 5.29 kB - 03/28/2020 at 20:55


  • 1 × ESP-WROOM-32
  • 3 × Rotary Potentiometer
  • 3 × Rotary Potentiometer Knob
  • 1 × RGB Diffused Common Anode
  • 1 × Pushbutton

View all 9 components

  • 1

View all instructions

Enjoy this project?




[this comment has been deleted]

kutluhan_aktar wrote 06/27/2022 at 13:06 point

Thanks for your comment and suggestion :)

  Are you sure? yes | no

kutluhan_aktar wrote 03/28/2020 at 21:05 point

Please feel free to leave a comment here if you have any questions and concerns regarding this project.

  Are you sure? yes | no

Similar Projects

Does this project spark your interest?

Become a member to follow this project and never miss any updates