0

我在 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. 帮助按钮 onlick 代码。单击按钮时，我希望浏览器发送 JSON 调用并更改按钮，而不会看到输入上述 URL 时得到的文本输出。
4

1 回答 1

0

对于电灯开关，从根本上讲，您需要一个可以表示两种状态的 UI 小部件——开和关。

HTML 有一些内置的 UI 小部件（文本框、按钮、列表、复选框）。存在许多 JavaScript 库，它们添加了无数其他小部件，或者使现有的小部件更漂亮。但首先让我们坚持基础知识。

最适合“开/关”行为的小部件是复选框。

<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);
}

现在我们需要一个将 HTTP 命令发送到 Domoticz 实例的工作函数。由于它始终具有相同的基本形式，因此我们可以在此处将参数附加到恒定的基本 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来初始化我们的复选框：lightKitchenchecked

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

注释/免责声明：

  • 我尝试编写不言自明的代码，所以没有代码注释。
  • 我对domoticz一无所知，真的。以上所有内容均来自阅读源代码并做出有根据的猜测。
  • 那里可能有错误、错误的假设和其他错误。domoticz 的文档乏善可陈且不完整，我无法测试其中的任何内容。以上是为了教育，而不是复制粘贴。
  • 您可以使用 jQuery（除其他外）使 JS 代码变得更好。我不是故意这样做的，而是为了提供将 HTML 复选框绑定到某个远程状态（在本例中为 JSON API 提供的电灯开关）所需的基本步骤的完整图片，同时保持学习曲线为尽可能浅。
  • 您将需要对 API 进行试验。为此，我推荐使用Postman 之类的工具。弄清楚它支持什么参数，这些参数可以有什么值以及响应的样子。
  • 您将需要学习使用浏览器的开发工具、集成调试器和网络分析器。
  • 您将需要阅读大量文档。几小时，几天的阅读。我不是想阻止你，但既然你是初学者——事情就是这样。对于 HTML、JavaScript 和基本的 Web API，MDN 非常棒。
  • 您可能会重写以上大部分内容。这样做时，请避免复制和粘贴代码。像我一样尝试抽象和参数化。
于 2017-05-14T14:15:14.763 回答