使用HTML和JavaScript設計指示器按鈕

描述

關于該項目：

在這個項目中，使用 HTML 和 JavaScript 設計了一個指示器按鈕。該按鈕通過將其狀態從“ON”更改為“OFF”來指示開關狀態，反之亦然。此外，一個主開關設計用于控制所有相應的按鈕。它的作用就像主開關一樣，我們在家里有控制主電源的開關。交換機的虛擬框圖如下：

1.初始階段：

?

2. 當按下開關打開連接的設備時，標簽發生了變化：

?

3.如果按下主開關，它將切斷所有開關的電源，初始狀態如下：

關閉電源時關閉到開啟

?

整個項目是使用 Bolt IoT 和 4 通道繼電器模塊實現的。因此，首先我們應該了解什么是 Bolt IoT 和中繼。

什么是繼電器？

繼電器是一種以機電方式控制（打開和關閉）電路的開關。該設備的主要操作是在沒有任何人為參與的情況下借助信號建立或斷開接觸，以便將其打開或關閉。它主要用于使用低功率信號控制高功率電路。

入門：

令人興奮的是，在網頁或 Bolt App 中看到按鈕可以控制我們的家用電器，并在按下按鈕時更改其狀態或標簽以使設備打開或關閉。

該項目的解釋分為以下兩部分。

• 硬件連接
• 使用編程代碼配置 Bolt IoT 模塊

1.硬件連接：

第 1 步：組裝將在項目中使用的所有必需材料。

第 2 步：讓我們從將繼電器模塊連接到 Bolt IoT 設備開始。

• 將繼電器的 GND 連接到螺栓的 GND
• 將繼電器的 VCC 連接到螺栓的 5V
• 將 Relay 的 IN1、IN2、IN3 和 IN4 分別連接到 Bolt 的引腳 1、2、3 和 4。

?

?

?

?

1 / 2 ?兩側電路連接

?

為了演示我在繼電器中使用 LED 的模型，我們可以使用風扇、燈等家用電器。

如下圖所示，每個繼電器都有 3 個端子 NC（常閉）、NO（常開）和 Common。

• +5 伏提供給繼電器的公共端，NO 連接到 Led 的陽極，Led 的陰極接地。
• 分別連接所有繼電器，見下圖。

藍線表示信號線

?

最終示意圖如下所示：

?

?

?

?

1 / 2 ?電路連接

?

2、Bolt物聯網模塊配置：

第 1 步： 將 Bolt 設備與 5 伏電源連接并打開 BoltCloud https://cloud.boltiot.com/

?

檢查板子是否在線。綠點代表 Bolt 通過 Internet 與 Bolt 云連接。

第 2 步：參考此鏈接了解如何在 Bolt 云上創建新產品（項目）https://docs.boltiot.com/docs/adding-a-product

第 3 步：在這個項目中，我創建了一個名為 HomeAutomation 的項目

?

第四步：如圖配置你的產品：

?

第五步：點擊代碼，輸入如圖所示的詳細信息：

?

第6 步：最后，將產品鏈接到設備并上傳配置訪問https://docs.boltiot.com/docs/link-device-to-a-product

代碼和工作：

在給定的代碼中，我設計了輸入按鈕，當它們被按下時可以調用特定的功能。

當按下按鈕時，它會向繼電器發送邏輯“0”，繼電器會打開相應的繼電器并根據邏輯改變其狀態。這樣它就可以作為一個指示器按鈕。

對于想要了解如何結合使用 HTML 和 Javascript 來設計與 Bolt IoT 相關的自動化項目的初學者來說，這個項目可能是一個很好的例子。

未來范圍：

基于這個項目，可以設計一個自動化面板，可以顯示連接的每個設備的能源消耗和使用時間。