Webdesign: Javascript для определения состояния переключателя Domoticz и действие по нажатию переключателя

Question

Я использую простой веб-сервер Apache на Raspberry Pi. На том же Пи также установлен Domoticz.

В настоящее время я разрабатываю веб-интерфейс для Domoticz.

В целях тестирования я установил фиктивный переключатель в 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 code. Когда кнопка нажата, я хочу, чтобы браузер отправил вызов JSON и изменил кнопку, не видя текстовый вывод, который я получаю при вводе вышеупомянутого URL.

Answer 1

Для выключателя света на фундаментальном уровне вам нужен виджет пользовательского интерфейса, который может представлять два состояния - включено и выключено.

HTML имеет несколько встроенных виджетов пользовательского интерфейса (текстовые поля, кнопки, списки, флажки). Существует множество библиотек JavaScript, которые добавляют бесчисленное множество других виджетов или делают существующие более красивыми. Но для начала давайте придерживаться основ.

Виджет, который наиболее точно соответствует поведению "вкл / выкл" - это флажок.

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

Сначала нам нужно что-то, что обнаружит изменения состояния в этом виджете. Мы можем добавить скрипт, который прослушивает события "click" на этом флажке (мы будем реализовывать switchLight() на следующем этапе):

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

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

Затем мы добавляем функцию, которая может установить определенный свет в определенном состоянии. Функция нуждается в идентификаторе источника света и желаемом состоянии, чтобы она могла создать правильную строку параметров (мы будем реализовывать 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 инициализировать наш lightKitchen флажок, с функцией обратного вызова, которая устанавливает элемент checked имущество:

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

Примечания / отказ от ответственности:

• Я пытался написать понятный код, поэтому нет комментариев кода.
• Я ничего не знаю о domoticz, правда. Все вышеперечисленное извлечено из чтения исходного кода и создания обоснованных догадок.
• Там, вероятно, есть ошибки, плохие предположения и другие ошибки. Документация по domoticz неполная и неполная, и у меня нет возможности проверить что-либо из этого. Вышеуказанное предназначено для образовательных целей, а не для копирования и вставки.
• Вы можете использовать jQuery (среди прочего), чтобы сделать код JS намного лучше. Я не делал этого намеренно, чтобы предоставить полную картину основных шагов, необходимых для привязки флажка HTML к некоторому удаленному состоянию (в данном случае, к переключателю света, предоставляемому JSON API), сохраняя при этом кривую обучения как мелко, насколько это возможно.
• Вам нужно будет поэкспериментировать с API. Для этого я рекомендую такой инструмент, как Почтальон. Выясните, какой параметр он поддерживает, какие значения могут иметь эти параметры и как выглядят ответы.
• Вам нужно научиться пользоваться инструментами разработчика браузера, встроенным отладчиком и анализатором сети.
• Вам нужно будет прочитать много документации. Часы, дни чтения. Я не пытаюсь вас удержать, но так как вы новичок - это то, что происходит. MDN отлично подходит для HTML, JavaScript и основных веб-API.
• Вы, вероятно, перепишете большинство из вышеперечисленного. При этом избегайте копирования и вставки кода. Попробуйте абстрагироваться и параметризоваться, как я.