电子发烧友App

硬声App

0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示
电子发烧友网>电子资料下载>电子资料>使用HTML和JavaScript设计指示器按钮

使用HTML和JavaScript设计指示器按钮

2022-12-13 | zip | 0.60 MB | 次下载 | 免费

资料介绍

描述

关于该项目:

在这个项目中,使用 HTML 和 JavaScript 设计了一个指示器按钮。该按钮通过将其状态从“ON”更改为“OFF”来指示开关状态,反之亦然。此外,一个主开关设计用于控制所有相应的按钮。它的作用就像主开关一样,我们在家里有控制主电源的开关。交换机的虚拟框图如下:

1.初始阶段:

poYBAGOACsiACacDAAAqxOBNaHM353.png
 

2. 当按下开关打开连接的设备时,标签发生了变化:

pYYBAGOACs-AebTGAAA0FBCmn6I345.png
 

3.如果按下主开关,它将切断所有开关的电源,初始状态如下:

poYBAGOACtOALbLDAAAziNwIOzI154.png
关闭电源时关闭到开启
 

整个项目是使用 Bolt IoT 和 4 通道继电器模块实现的。因此,首先我们应该了解什么是 Bolt IoT 和中继。

什么是继电器?

继电器是一种以机电方式控制(打开和关闭)电路的开关。该设备的主要操作是在没有任何人为参与的情况下借助信号建立或断开接触,以便将其打开或关闭。它主要用于使用低功率信号控制高功率电路。

入门:

令人兴奋的是,在网页或 Bolt App 中看到按钮可以控制我们的家用电器,并在按下按钮时更改其状态或标签以使设备打开或关闭。

该项目的解释分为以下两部分。

1.硬件连接:

第 1 步:组装将在项目中使用的所有必需材料。

第 2 步:让我们从将继电器模块连接到 Bolt IoT 设备开始。

  • 将继电器的 GND 连接到螺栓的 GND
  • 将继电器的 VCC 连接到螺栓的 5V
  • 将 Relay 的 IN1、IN2、IN3 和 IN4 分别连接到 Bolt 的引脚 1、2、3 和 4。
 
 
 
poYBAGOYC7uAAq2NAAR5qHwUlH4951.jpg
 
1 / 2两侧电路连接
 

为了演示我在继电器中使用 LED 的模型,我们可以使用风扇、灯等家用电器。

如下图所示,每个继电器都有 3 个端子 NC(常闭)、NO(常开)和 Common。

  • +5 伏提供给继电器的公共端,NO 连接到 Led 的阳极,Led 的阴极接地。
  • 分别连接所有继电器,见下图。
poYBAGOYC76AC_5_AAFFBDe-Cqw466.png
蓝线表示信号线
 

最终示意图如下所示:

 
 
 
poYBAGOYC9OAMR8AAAMYTZk7kew321.png
 
1 / 2电路连接
 

2、Bolt物联网模块配置:

第 1 步: 将 Bolt 设备与 5 伏电源连接并打开 BoltCloud https://cloud.boltiot.com/

poYBAGOYC9iAGxC5AAB91770jOM310.png
 

检查板子是否在线。绿点代表 Bolt 通过 Internet 与 Bolt 云连接。

第 2 步:参考此链接了解如何在 Bolt 云上创建新产品(项目)https://docs.boltiot.com/docs/adding-a-product

第 3 步:在这个项目中,我创建了一个名为 HomeAutomation 的项目

pYYBAGOYC9qAQn41AACSdQnVrgs547.png
 

第四步如图配置你的产品

poYBAGOYC92AWwtQAAEDMvbfSYg112.png
 

第五步点击代码,输入如图所示的详细信息

pYYBAGOYC-KANRT0AAEDt6YxGvI342.png
 

6 步:最后,将产品链接到设备并上传配置访问https://docs.boltiot.com/docs/link-device-to-a-product

代码和工作:

在给定的代码中,我设计了输入按钮,当它们被按下时可以调用特定的功能。

当按下按钮时,它会向继电器发送逻辑“0”,继电器会打开相应的继电器并根据逻辑改变其状态。这样它就可以作为一个指示器按钮。

对于想要了解如何结合使用 HTML 和 Javascript 来设计与 Bolt IoT 相关的自动化项目的初学者来说,这个项目可能是一个很好的例子。

未来范围:

基于这个项目,可以设计一个自动化面板,可以显示连接的每个设备的能源消耗和使用时间。


下载该资料的人也在下载 下载该资料的人还在阅读
更多 >

评论

查看更多

下载排行

本周

  1. 1山景DSP芯片AP8248A2数据手册
  2. 1.06 MB  |  532次下载  |  免费
  3. 2RK3399完整板原理图(支持平板,盒子VR)
  4. 3.28 MB  |  339次下载  |  免费
  5. 3TC358743XBG评估板参考手册
  6. 1.36 MB  |  330次下载  |  免费
  7. 4DFM软件使用教程
  8. 0.84 MB  |  295次下载  |  免费
  9. 5元宇宙深度解析—未来的未来-风口还是泡沫
  10. 6.40 MB  |  227次下载  |  免费
  11. 6迪文DGUS开发指南
  12. 31.67 MB  |  194次下载  |  免费
  13. 7元宇宙底层硬件系列报告
  14. 13.42 MB  |  182次下载  |  免费
  15. 8FP5207XR-G1中文应用手册
  16. 1.09 MB  |  178次下载  |  免费

本月

  1. 1OrCAD10.5下载OrCAD10.5中文版软件
  2. 0.00 MB  |  234315次下载  |  免费
  3. 2555集成电路应用800例(新编版)
  4. 0.00 MB  |  33566次下载  |  免费
  5. 3接口电路图大全
  6. 未知  |  30323次下载  |  免费
  7. 4开关电源设计实例指南
  8. 未知  |  21549次下载  |  免费
  9. 5电气工程师手册免费下载(新编第二版pdf电子书)
  10. 0.00 MB  |  15349次下载  |  免费
  11. 6数字电路基础pdf(下载)
  12. 未知  |  13750次下载  |  免费
  13. 7电子制作实例集锦 下载
  14. 未知  |  8113次下载  |  免费
  15. 8《LED驱动电路设计》 温德尔著
  16. 0.00 MB  |  6656次下载  |  免费

总榜

  1. 1matlab软件下载入口
  2. 未知  |  935054次下载  |  免费
  3. 2protel99se软件下载(可英文版转中文版)
  4. 78.1 MB  |  537798次下载  |  免费
  5. 3MATLAB 7.1 下载 (含软件介绍)
  6. 未知  |  420027次下载  |  免费
  7. 4OrCAD10.5下载OrCAD10.5中文版软件
  8. 0.00 MB  |  234315次下载  |  免费
  9. 5Altium DXP2002下载入口
  10. 未知  |  233046次下载  |  免费
  11. 6电路仿真软件multisim 10.0免费下载
  12. 340992  |  191187次下载  |  免费
  13. 7十天学会AVR单片机与C语言视频教程 下载
  14. 158M  |  183279次下载  |  免费
  15. 8proe5.0野火版下载(中文版免费下载)
  16. 未知  |  138040次下载  |  免费