描述

描述

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

我認(rèn)為這個(gè)項(xiàng)目將是圣誕節(jié)送給富有創(chuàng)造力的頭腦的辛辣禮物：所以請(qǐng)按照以下步驟操作，并在增強(qiáng)禮品卡功能的同時(shí)享受它們:)

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

我使用了 ESP-WROOM-32 開(kāi)發(fā)板來(lái)創(chuàng)建模塊來(lái)更新本地主機(jī)上的禮品卡數(shù)據(jù)庫(kù)表，因?yàn)楫?dāng)時(shí)我有它可用。

當(dāng)然，您可以使用任何其他可以發(fā)出 HTTP GET 請(qǐng)求的微控制器來(lái)代替 ESP32 開(kāi)發(fā)板。

注意：我使用命令激活按鈕對(duì)這張禮品卡進(jìn)行了迭代，但沒(méi)有用于測(cè)試運(yùn)行的微控制器，您可以在 TheAmplituhedron 的儀表板上訪問(wèn)它。

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

首先，下載下面Arduino IDE所需的庫(kù)，繼續(xù)下面的步驟。

所需庫(kù)：

對(duì)于 ESP32 開(kāi)發(fā)板，請(qǐng)單擊此處。

第 1 步：在本地主機(jī)上創(chuàng)建數(shù)據(jù)庫(kù)表

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

為了從模塊向禮品卡發(fā)送命令，您需要在本地主機(jī)上創(chuàng)建一個(gè)名為“giftcard”的數(shù)據(jù)庫(kù)和一個(gè)數(shù)據(jù)庫(kù)表。該模塊通過(guò)向 convey.php 文件發(fā)出 HTTP 獲取請(qǐng)求來(lái)更新“禮品卡”數(shù)據(jù)庫(kù)表。并且，index.js 文件通過(guò) ajax 調(diào)用立即從“giftcard”數(shù)據(jù)庫(kù)表中整理數(shù)據(jù)：該過(guò)程在下面有詳細(xì)解釋。

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 步：設(shè)計(jì)禮品卡

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

第三步：通過(guò)數(shù)據(jù)整理模塊更新數(shù)據(jù)庫(kù)表

在 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 步：模塊

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

由于 ESP-WROOM-32 的設(shè)置，您需要使用ledc函數(shù)來(lái)定義 RGB LED 的 PWM 信號(hào)。

句法：

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 文件發(fā)出 HTTP Get 請(qǐng)求以傳輸變量。

使用三元運(yùn)算符通過(guò)按鈕輕松更改值。

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

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

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

?

在串行監(jiān)視器上檢查到本地主機(jī)的連接是否成功。

?

特征

無(wú)需在您的計(jì)算機(jī)上安裝禮品卡，您可以使用檢查頁(yè)面上的命令激活按鈕測(cè)試其功能。

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.

在本地主機(jī)上，您可以測(cè)試手動(dòng)執(zhí)行 convey.php 文件的功能：

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

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

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

連接

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

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

影片

?