Question

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

我目前正在为Domoticz开发网络前端。

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

code:       private void pictureBox11_Click(object sender, EventArgs e)
    {
        int Res;

        using (SqlConnection conn = new SqlConnection(@"Data Source=DIPAYN;Initial Catalog=Highway;Integrated Security=True"))
        {
            using (SqlCommand cmd = new SqlCommand())
            {



                cmd.Connection = conn;



                 cmd.CommandText = "INSERT Alert(vehicle_no, last_checkpoint) SELECT vehicle_no,checkpoint_id FROM Entry WHERE next_expected_time <= GetDate()";
               // cmd.CommandText = "Insert Alert(vehicle_no) values(21)";

                try
                {
                    conn.Open();
                    Res = cmd.ExecuteNonQuery();
                }
                catch
                {
                    Res = -1;

                }
                finally { conn.Close(); }

                Alert al = new Alert();
                al.Show();
            }
        }
    }

在我开发的网页上，我使用bootstrap制作了一些不错的切换开关按钮;

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

我试图实现两件事，但我是一名新手程序员并且对Google的编程知之甚少，不知道正确的代码：

某些类型的脚本（我假设JavaScript），当页面加载，检测灯是否打开或关闭并设置按钮相应地。
帮助按钮点击代码。当按钮是点击我希望浏览器发送JSON调用并更改按钮没有看到我输入上面的文本输出提到的网址。

Answer 1

对于灯光开关，在基础层面，您需要一个可以代表两种状态的UI小部件 - 开启和关闭。

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

适合＆＃34;开/关＆＃34;的小部件行为最紧密的是复选框。

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

首先，我们需要能够检测该小部件上状态更改的内容。我们可以添加一个监听＆＃34;点击＆＃34;该复选框上的事件（我们将在下一步中实施switchLight()）：

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

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

接下来，我们添加一个可以将某个灯光设置为某个状态的功能。该函数需要light ID和所需的状态，因此它可以构造正确的参数字符串（我们将在下一步中实现sendCommand()）。为简单起见，我们现在不关心服务器的响应。

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

现在我们需要一个将HTTP命令发送到Domoticz实例的worker函数。由于它总是具有相同的基本形式，我们可以在此处将参数附加到常量基本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一无所知，真的。以上所有内容均摘自阅读the source code并进行有根据的猜测。
可能存在错误，错误的假设和其他错误。 domoticz的文档是乏味和不完整的，我无法测试任何这些。以上是为了教育，而不是复制和粘贴就绪。
你可以使用jQuery（以及其他东西）来使JS代码更好。我并没有故意这样做，以提供一个完整的图片，说明将HTML复选框绑定到某个远程状态所需的基本步骤（在这种情况下，由JSON API提供的灯开关），同时保持学习曲线为尽可能浅。
您需要尝试使用API。我推荐像Postman这样的工具。找出它支持的参数，这些参数可以具有的值以及响应的外观。
您需要学习使用浏览器的开发人员工具，集成调试器和网络分析器。
您需要阅读很多的文档。小时，阅读日。我不是想阻止你，而是因为你是初学者 - 这就是事情的样子。对于anthing HTML，JavaScript和基本Web API MDN is awesome。
您可能会重写上述大部分内容。这样做，避免复制和粘贴代码。尝试抽象和参数化，就像我一样。

Webdesign：用于检测Domoticz开关状态的Javascript，以及用于切换开关的onclick动作

1 个答案: