描述

描述

在這個項目中，我想用代碼創建一個交互式新年禮品卡，以在我朋友的本地主機上執行并由我設計的模塊控制。通過該模塊，您可以通過將禮品卡重定向到預定義的網頁來阻止禮品卡，通過選擇 RGB 顏色模式更改圣誕樹裝飾和刺繡的顏色，以及播放或暫停集成到禮物卡。我將禮品卡設計編碼為 SVG 格式，并以 card.svg 的形式在我的網站上共享：如果需要，您可以更改禮品卡設計和樣式。

我認為這個項目將是圣誕節送給富有創造力的頭腦的辛辣禮物：所以請按照以下步驟操作，并在增強禮品卡功能的同時享受它們:)

注：模塊是指示意圖中描述的裝置。

我使用了 ESP-WROOM-32 開發板來創建模塊來更新本地主機上的禮品卡數據庫表，因為當時我有它可用。

當然，您可以使用任何其他可以發出 HTTP GET 請求的微控制器來代替 ESP32 開發板。

注意：我使用命令激活按鈕對這張禮品卡進行了迭代，但沒有用于測試運行的微控制器，您可以在 TheAmplituhedron 的儀表板上訪問它。

要使用命令激活按鈕檢查禮品卡，請單擊此處。

首先，下載下面Arduino IDE所需的庫，繼續下面的步驟。

所需庫：

對于 ESP32 開發板，請單擊此處。

第 1 步：在本地主機上創建數據庫表

作為本地主機，我建議您使用 XAMPP：但是您可以為此項目使用除 XAMPP 之外的任何其他本地主機提供商。在此處下載 XAMPP 。

為了從模塊向禮品卡發送命令，您需要在本地主機上創建一個名為“giftcard”的數據庫和一個數據庫表。該模塊通過向 convey.php 文件發出 HTTP 獲取請求來更新“禮品卡”數據庫表。并且，index.js 文件通過 ajax 調用立即從“giftcard”數據庫表中整理數據：該過程在下面有詳細解釋。

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.

?

第 2 步：設計禮品卡

我將禮品卡設計編碼為 SVG 格式，以便能夠通過在模塊上選擇 RGB 顏色圖案來更改圣誕樹刺繡的顏色。禮品卡 SVG 圖像嵌入在 index.html 文件中：但您可以從此處單獨下載圖像。

第三步：通過數據整理模塊更新數據庫表

在 convey.php 文件中：

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.

?

在 index.js 文件中：

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.

?

第 4 步：模塊

該模塊由一個 ESP-WROOM-32、三個電位器和一個 RGB LED 組成。

由于 ESP-WROOM-32 的設置，您需要使用ledc函數來定義 RGB LED 的 PWM 信號。

句法：

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)

?

向 convey.php 文件發出 HTTP Get 請求以傳輸變量。

使用三元運算符通過按鈕輕松更改值。

映射模擬輸入 - 從 0 到 4096。

從電位器獲取 RGB 顏色模式。

使用ledcWrite()函數顯示顏色模式。

?

在串行監視器上檢查到本地主機的連接是否成功。

?

特征

無需在您的計算機上安裝禮品卡，您可以使用檢查頁面上的命令激活按鈕測試其功能。

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 card via the module.

在本地主機上，您可以測試手動執行 convey.php 文件的功能：

.../convey.php?block=false&color=rgb(255, 0, 255)&audio=false

重要提示：要下載所有提及的文件，包括 JingleBells.mp4、card.svg 和 icon.png，請單擊此處。

重要提示：要轉到儀表板上的禮品卡界面以獲取更多信息并下載所有提及的文件，請單擊此處。

連接

所有引腳布局和連接在下面的“IoT-Interactive-New-Year-Gift-Card.ino”中都有很好的解釋。

將兩個面包板相互粘貼以正確連接組件，而無需添加多余的電線。如下圖所示進行硬件連接：

影片

?