Особенности реализации JSON-editor в Wirenboard

Список страниц по JSON-editor

Общие сведения о внесенных изменениях

В процессе использования JSON-editor разработчиками WB были реализованы дополнительныe настройки для работы.

Пользователи могут использовать реализованную функциональность:

форматов (_format);
опций (options).

Все доработки json-editor находятся в форке, в отдельной ветке feature/wb-patch:

github.com: коммиты ветки feature/wb-patch

configFile - общие настройки

В этой секции собраны общие настройки схемы для файла конфигурации.

Пример схемы из конфигуратора NTP

"configFile": {
    "path": "/etc/ntp.conf",
    "toJSON": "/usr/lib/wb-mqtt-confed/parsers/ntpparser",
    "fromJSON": ["/usr/lib/wb-mqtt-confed/parsers/ntpparser", "-s"],
    "restartDelayMS": 4000,
    "service": "ntp",
    "hide":true

},

Ссылка на файл:

github.com: ntp.schema.json

toJSON/fromJSON

Это две опции которые позволяют делать преобразования файла конфига перед и после редактированием в WEBUI.

Пример файла скрипта вызываемого в NTP конфигураторе

Ссылка на файл:

github.com: ntpparser

Обратите внимание внизу этого скрипта есть выбор типа вызываемой функции

def main():
    if len(sys.argv) > 1 and sys.argv[1] == "-s":
        from_json()
    else:
        to_json()


if __name__ == "__main__":
    main()

toJSON

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

fromJSON

Параметр вызывает скрипт при открытии схемы.

Может использоваться для:

Преобразования какого-то файла в json, чтобы иметь возможность настраивать его в JSON Editor
Сохранения данных в SQL базу данных
Проверка схемы перед сохранением или показ ошибки (красная плашка сверху)

Параметром указываем путь до исполняемого файла или скрипта. В стандартный поток ввода ему будет передан JSON из homeui. Дальше этот скрипт или исполняемый файл делает с JSON что угодно. Если его работа завершилась без ошибок, в веб интерфейс передаётся подтверждение об успешном сохранении. Если завершилась с ошибкой, то в веб интерфейс передаётся информация об ошибке и всё, что скрипт выдал в стандартный поток вывода. Это потом отображается красной плашкой в веб-интерфейсе.

hide

Установка флага true скроет схему конфигуратора в веб-интерфейсе контроллера в списке Настройки → Конфигурационные файлы.

Format - форматы

Список актуальных форматов (_format) добавленных WB можно посмотреть в исходниках на github: wb-json-editor.js.

Вот некоторые из доступных пользователям параметры:

wb-autocomplete;
wb-multiple;
wb-object;
wb-optional;
wb-array;
wb-first-oneof;
edWb.

wb-object

Перенос кнопки Удалить наверх

Данный тип позволяет перенести кнопки управления объектом массива наверх, к заголовку элемента. Это можно сделать применив формат "_format": "wb-object" к объекту массива.

Обратите внимание, что array_controls_top переносит только кнопки управления всем массивом наверх (например, кнопку +Добавить), но при этом управление каждым отдельным элементом массива остается внизу.
wb-object также переносит кнопки управления каждого элемента массива наверх, к заголовку элемента массива.

Кнопка Удалить наверху

Пример кода:

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "type": "object",
  "title": "config_title",
  "description": "config_desc",
  "configFile": {
    "path": "/etc/wb-dashboards.conf",
    "service": "wb-rules"
  },
  "properties": {
    "pets": {
      "type": "array",
      "title": "Pets",
      "items": {
        "type": "object",
        "_format": "wb-object",
        "title": "Pet",
        "properties": {
          "petType": {
            "type": "string",
            "enum": [
              "cat",
              "dog",
              "bird",
              "reptile",
              "other"
            ],
            "default": "dog"
          },
          "name": {
            "type": "string"
          }
        }
      },
      "options": {
        "disable_collapse": true,
        "disable_array_reorder": true,
        "disable_array_delete_last_row": true,
        "enable_array_copy": true
      },
      "_format": "wb-multiple"
    }
  }
}

edWb

Данный тип позволяет реализовать выпадающий список для значений типа integer и string.

Выпадающий список edWb

Пример кода для выпадающего списка значений типа integer:

"properties": {
  "sensors": {
    "type": "array",
    "_format": "edWb",
    "title": "Sensors",
    "uniqueItems": true,
    "items": {
      "type": "object",
      "title": "Sensor",
      "properties": {
        "sensor_name": {
          "propertyOrder": 1,
          "type": "string",
          "title": "Name"
        },
        "read_period_ms": {
          "propertyOrder": 2,
          "type": "integer",
          "_format": "edWb",
          "title": "Read period (ms)",
          "description" : "read_period_description",
          "minimum": 10,
          "options": {
            "enum_values": [ 100, 200 ],
            "inputAttributes": {
              "placeholder": "in queue order"
            }
          }
        }
      }
    }
  }
},

Вид сохраняемого конфиг файла:

{
  "sensors": [
    {
      "sensor_name": "Temperature",
      "read_period_ms": 100
    },
    {
      "sensor_name": "Humidity",
      "read_period_ms": 200
    }
  ]
}

Подробнее можно посмотреть в исходниках:

github.com: edit-with-dropdown.js

wb-autocomplete

Позволяет иметь автозаполнение в текстовых полях данных.

На данный момент автозаполнение работает только для списка устройств (MQTT топиков).
Исходник с комментарием, что поддерживаются только устройства:

github.com: autocomplete.js:19

При добавлении поля указания топика MQTT рекомендуется добавить две проверки:

pattern - проверка синтаксиса паттерном регулярного выражения, например "pattern": "^[^/+#]+/[^/+#]+$";
minLength - проверка минимальной длины равную 3, так как Device name (1) + slash (1) + topic name (1).

Пример описания поля:

Выпадающий список автозаполнения

"control": {
  "type": "string",
  "propertyOrder": 1,
  "title": "Input control",
  "description": "In format: Device/Control",
  "pattern": "^[^/+#]+/[^/+#]+$",
  "_format": "wb-autocomplete",
  "options": {
    "wb": {
      "data": "devices"
    }
  },
  "minLength": 3,
  "_comment_minLength": "Device name (1) + slash (1) + topic name (1)",
},

Исходник:

github.com: autocomplete.js

wb-multiple

Редактор элементов oneOf с кнопкой свернуть.

Эта опция отличается относительно обычного oneOf механизмом выбора схемы по значению из json. Оригинальный редактор полностью разворачивает схему для каждого из элементов в oneOf. Проводит полную валидацию для каждого элемента. Если только одна схема не выдала ошибок, вибирает её. Для больших схем и большого числа вариантов это долго.

Для того чтобы oneOf работал быстрее - был разарботана эта опция, которая немного меняет логику, делая проверку по первому параметру в required, если совпало, то выбираю первую совпавшую схему.

Описание есть в исходниках:

github.com: collapsible-multiple-editor.js

Использование:

"_format": "wb-multiple"

Так как сверка идет по первым параметрам required, то очень важно, чтобы первым у сравниваемых объектов стояли одинаковые параметры.

Если у одного объекта будет указан первым один элемент, например "scenarioType", а у другого будет указан другой элемент, например "componentVersion" - то это поломает логику работы oneOf с установленной опцией wb-multiple.

Пример не верного порядка двух required у двух объектов.

"required": [
  "scenarioType",
  "enable",
  "name",
  "id_prefix",
  "inControls",
  "outControls"
]

"required": [
  "componentVersion",
  "scenarioType",
  "enable",
  "name",
  "id_prefix",
  "lightDevices",
  "motionSensors",
  "openingSensors",
  "lightSwitches"
]

При такой ошибке после создания нового инстанса, выбирая один тип объекта вы все сохраните корректно, но при повторном открытии конфигуратора этот объект уже откроется как другой тип объекта, с другими полями.

Пример ошибки интерпритации конфига схемой будет выглядеть как на изображении. Здесь объект был создан с типом "Сценарий термостата", а при повторном отркрытии интерпритируется уже как "Сценарий управления светом", так как этот сценарий стоит выше в схеме. Как следствие поля сверху не имеют никакого заполнения, так как у термостата нет датчиков, а снизу наоборот добавлены поля которым jsonEditor не смог найти соответствия в "Сценарии управления светом".

Пример ошибки интерпритации конфига схемой

Options - опции

Список опций wb можно посмотреть в изменениях ветки feature/wb-patch, ссылка в разделе Общие сведения о внесенных изменениях.

Пользователям доступны следующие опции:

options.wb.disable_panel - убирает верхнюю панель;
options.wb.show_editor - всегда показывает редактор для необязательных параметров;
options.wb.disable_title - убирает заголовок объекта или массива;
options.wb.disable_array_item_panel - убирает рамку у элемента массива, если массив отображается списком.

wb.disable_panel

Пример включения disable_panel внутри опций:

"options": {
  "wb": {
    "disable_panel": true
  }
},

Функциональность wb.disable_panel была добавлена изменениями:

github.com: Additional wb options
github.com: Feature/disable panel for table editor

Navigation menu