Webdesign:检测Domoticz开关状态的Javascript，以及切换开关的onclick操作

Question

我正在Raspberry Pi上运行一个简单的Apache web服务器。同样的Pi也安装了Domoticz。

我目前正在为Domoticz开发一个web前端。

出于测试目的，我在Domoticz中设置了一个虚拟开关，我可以通过这个JSON URL打开/关闭它：

http://10.0.0.104:6060/json.htm?type=command&param=switchlight&idx=2&switchcmd=Toggle

在我开发的网页上，我做了一些很好的切换按钮，使用引导；

Kitchen:<input type="checkbox" checked data-toggle="toggle" data-onstyle="primary" data-on="On" data-off="Off">

我正试图实现两件事，但我是一个新手程序员，而且我对向Google编程以获得正确的代码知之甚少：

1. 某种类型的脚本(我假设是JavaScript)，当页面加载时，检测灯是打开还是关闭，并相应地设置按钮。
2. 帮助处理按钮上的代码。单击该按钮时，我希望浏览器发送JSON调用，并更改该按钮，而不会看到当输入上述URL时得到的文本输出。

Answer 1

对于灯开关，在基本级别上，您需要一个UI小部件，它可以表示两种状态-- on和off。

HTML有一些内置的UI小部件(文本框、按钮、列表、复选框)。许多JavaScript库存在，它们添加了无数其他小部件，或者使现有的小部件更漂亮。但从一开始，让我们坚持基本原则。

最适合"on/off“行为的小部件是复选框。

<input type="checkbox" id="lightKitchen">
<label for="lightKitchen">Kitchen</label> 

首先，我们需要检测该小部件上的状态变化的东西。我们可以添加一个脚本来侦听该复选框上的“单击”事件(我们将在下一步实现switchLight() )：

var lightKitchen = document.getElementById("lightKitchen");

lightKitchen.addEventListener("click", function (event) {
    console.log("Kitchen Light: " + this.checked);
    switchLight(2, this.checked);
});

接下来，我们添加一个函数，它可以将特定的光设置到某种状态。函数需要轻型ID和所需的状态，因此它可以构造合适的参数字符串(我们将在下一步实现sendCommand() )。为了简单起见，我们现在不要关心服务器的响应。

function switchLight(idx, state) {
    var value = state ? "On" : "Off";
    sendCommand("type=command&param=switchlight&idx=" + idx + "&switchcmd=" + value);
}

现在，我们需要一个worker函数，它向Domoticz实例发送HTTP命令。因为它总是有相同的基本形式，所以我们可以在这里将参数附加到一个常量基URL。响应将采用JSON格式，因此在将任何包含的数据传递给调用者之前，我们需要解析它。

function sendCommand(parameters, onLoad) {
    var url = "http://10.0.0.104:6060/json.htm?" + parameters;
    var request = new XMLHttpRequest();

    request.open("get", url);
    request.addEventListener("load", function (response) {
        var data;
        try {
            data = JSON.parse(response);
        } catch (ex) {
            console.log("Server responded with invalid JSON to: " + url);
        }
        if (onLoad) onLoad(data);
    });
    request.send();
}

当然，我们需要检索设备当前状态的东西。我们可以为此重用sendCommand，但这一次我们实际上对响应感兴趣，因此我们允许传入回调函数。

function getDevice(idx, onLoad) {
    sendCommand("type=devices&rid=" + idx, onLoad);
}

最后，我们可以使用getDevice来初始化我们的lightKitchen复选框，使用一个回调函数来设置元素的checked属性：

getDevice(2, function (device) {
    var lightKitchen = document.getElementById("lightKitchen");
    var lightKitchen.checked = (device.Status  === "On");
});

附注/免责声明：

• 我试着写一些自我解释的代码，所以没有代码注释.
• 我对多莫蒂奇一无所知，真的。所有这些都是从阅读源代码和进行有教养的猜测中提取出来的。
• 里面可能有错误、错误的假设和其他错误。domoticz的文档是平淡无奇和不完整的，我没有办法测试其中的任何一个。以上是为了教育，而不是复制和粘贴准备.
• 您可以使用jQuery (以及其他东西)使JS代码更好。我不是故意这样做的，目的是提供一个完整的基本步骤，以便将HTML复选框绑定到某种远程状态(在本例中，是JSON提供的灯开关)，同时保持尽可能浅的学习曲线。
• 您需要对API进行实验。为此，我推荐一个像邮递员这样的工具。找出它所支持的参数、这些参数可以具有的值以及响应的样子。
• 您需要学习如何使用浏览器的开发工具、集成调试器和网络分析器。
• 您需要阅读大量的文档。几个小时，几天的阅读。我不是想吓唬你，但既然你是初学者，事情就是这样的。对于一个HTML，JavaScript和基本的web，MDN太棒了。
• 您可能会重写上面的大部分内容。这样做时，避免复制和粘贴代码。像我一样，尝试抽象和参数化。