thingsboard记录

最新推荐文章于 2024-02-29 17:03:23 发布

aliceyang2012

最新推荐文章于 2024-02-29 17:03:23 发布

阅读量270

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/aliceyang2012/article/details/124410464

版权

本文介绍了如何在Thingsboard中为自定义部件的按钮添加点击效果和音效。通过CSS实现按钮的hover和active状态改变背景色，使用HTML和JavaScript播放音频文件。在JavaScript部分展示了设备控制函数的实现，包括发送HTTP请求到特定URL以执行设备操作，并处理响应。在遇到Pad上只有第一个按钮有声音的问题时，通过添加$('.myVideo')[0].load()解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天的任务是给自定义部件按钮增加点击效果和音效

1、点击效果

css:

.simpleBtn:hover,.simpleBtn:active {
background: #4171a7;
}

2、增加点击音效

html：

<div class="cmBtns box">
<h4 id="btnTitle" class="btnTitle">{{labelTitle}}</h4>
<button id="btnOn" ng-click="deviceControl('on')" class="simpleBtn">开</button>
<button id="btnOff" ng-click="deviceControl('off')" class="simpleBtn">关</button>

<video preload="auto" name="media" hidden="true" class="myVideo">
<source src="http://www.szqhhjbj.com/aigei_pao.mp3" type="audio/mpeg">
</video>
</div>

js:

self.onInit = function() {
var scope = self.ctx.$scope;

self.ctx.$scope.labelTitle = self.ctx.settings.labelTitle || '标题文字';

scope.deviceControl = function(status) {
var baseurl = "http://192.168.1.17:6405/service/code/action";
var url="";
var btnType = self.ctx.settings.btntype;
var deviceId = self.ctx.settings.deviceId;
if (deviceId) {
if (btnType) {
url = baseurl + "/batch?id=" +deviceId + "&cmd=" + status;
} else {
url = baseurl + "/single?id=" +deviceId + "&cmd=" + status;
}
}
$('.myVideo')[0].load();
$('.myVideo')[0].play();

var xhr = new XMLHttpRequest();

       xhr.open('GET',url,true);
       xhr.send(null);
       //return promise
       return new Promise(function (resolve, reject) {
           //onload are executed just after the sync request is comple，
           //please use 'onreadystatechange' if need support IE9-
           xhr.onload = function () {
               if (xhr.status === 200) {
                   var result;
                   try {
                       result = JSON.parse(xhr.response);
                   } catch (e) {
                       result = xhr.response;
                   }
                   resolve(result);
               } else {
                   reject(xhr.response);
               }
           };