Skip to content

Home

Jump to bottom
Renat edited this page Mar 17, 2020 · 20 revisions

Новая документация: https://documenter.getpostman.com/view/1428336/SzS2wnzS

Возможности*

Нажав Ctrl+M вы сможете открыть редактор страницы, через который можете добавить, удалить или изменить нужные вам элементы.

Основные настройки страницы

{
 "configs": [
  "/config.live.json",
  "/lang/lang.{{lang}}.json",
  "/modules.json"
 ],

 "socket": [
  "ws://{{ip}}/ws"
 ],


"class":"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6",
"content": []
}

"configs": - Конфигурационные файлы в json формате. Их может быть любое количество. Так же они могут быть загружены с сторонних ресурвосв (веб сайтов). Выводить с этих файлов данные на страницу можно используя такие кавычки {{}}, в котором находится имя необходимых нам данных, пример {{space}}

"socket":["ws://{{ip}}/ws"], - таким образом вы включите сокеты. Очень важно отдавать сокет данные в json формате.

"class":"col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6", - В большой белый блок можно добавлять свои классы, можно использовать классы bootstrap.

"style":"font-size:20px", - Добавление своих стилей.

"reload":"3000", - Можно использовать автоматическое обновление данных, в данном примере все данные страницы будут обновляться каждые 3 секунды.

"content": [] - id блока в который вставляем элементы страницы, кнопки, чекбоксы, линки и т.д. На фото выше вы можете посмотреть какие id вы можете использовать на странице.

Все что находится вне content":[*] не меняется динамически, то есть нажав на VIEW вы не увидите изменений. Нужно нажать SAVE и обновить страницу.

Элементы блоков

В каждый блок можно добавлять "class":"" (мы используем Bootstrap) и "style":"". Тем самым вы можете изменить его визуальный вид.

Заголовки

{
"type": "h1",
"title": "Заголовок {{ip}} текст"
},

Заголовки могут быть h1, h2, h3, h4, h5, h6.

{{ip}} - это переменная с загруженного json файла из "configs": в любой ниже описанный type в title вы можете вставлять подобные переменные.

Текст

{
"type": "text",
"title": "Текст"
},

Ссылка

{
"type": "link",
"title": "Название ссылки",
"action": "page.htm?setup"
},

"action": "page.htm?setup", - url адресс.

В ссылке вы так же можно использовать javascript функции. Пример "action": "javascript:allert('hello');",

Разделяющая линия

{
"type": "hr"
},

Поля ввода

{
"type": "input",
"state": "123",
"pattern": "[0-9a-zA-Zа-яА-Я.\\- ]{1,20}"
},
{
"type": "password",
"state": "123",
"pattern": "[0-9a-zA-Zа-яА-Я.\\- ]{1,20}"
},
{
"type": "textarea",
"state": "123"
},

"state": "123", - текст в ячейки.

"pattern": "[0-9a-z]{1,20}" - Таким образом можно фильтровать вводимые данные. В данном случае разрешается вводить цифры, и только маленькие латинские буквы. Количество символов от 1 до 20.

Кнопка

{
"type": "button",
"title": "Название кнопки",
"action": "device?ssdp=123&space=456"
},

Нажав на кнопку, произойдет ajax GET запрос к device?ssdp=123&space=456

Если в такой GET запрос необходимо вставить данные например с input. В него нужно добавить имя "name", пример:

{
"type": "input",
"name": "testName"
},

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

{
"type": "button",
"title": "Название кнопки",
"action": "device?ssdp=[[testName]]&space=456"
},

То есть если в action использовать такие кавычки [[]] а внутри name блока, мы можем подставлять данные с input, checkbox, range, select и т.д. Их может быть любое количество. Но "name" имена не должны повторяться на странице.

А еще в "type": "button", можно вставлять "response" Вот так:

{
"type": "button",
"title": "Название кнопки",
"response":"[[test]]",
"action": "device?ssdp=[[testName]]&space=456"
},

Далее если сделав GET: device?ssdp=testName&space=456 Мы получим ответ такого формата {"title":"work","class":"alert alert-warning"} то эти данные поменяются в type в котором "name":"test"

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

{
"type": "select",
"state": "en",
"title": {"ru":"RU","en":"EN","lv":"LV","ua":"UA"}
},

"state": "en", - Текст который будит виден по дефолту (выбранный пункт в выпадающем списке).

"title": {"ru":"RU","en":"EN","lv":"LV","ua":"UA"} - "ru" значение в value, "RU" название в списке.

В этот выпадающий список вы так же можете подгружать json файлы, параметр name в данном случае обязателен. Выглядеть это будет так:

{
"type": "select",
"name": "test123",
"state": "en",
"title": "file.json"
},

Файл file.json должен быть примерно такого содержания:

 {"ru":"Русский","en":"Английский","lv":"Латышский","ua":"Украинский {{ip}} "}

Здесь мы так же можем использовать "action": "" который будит отправлять ajax GET запрос после выбора элемента в списке.

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

{
"type":"dropdown",
"name":"help-url",
"class":"btn btn-default",
"title":{
"#":"{{LangHelp}} <span class=\"caret\"></span>",
"https://github.com/tretyakovsa/Sonoff_WiFi_switch/issues":"<b>Sonoff</b> (Relay)",
"https://github.com/renat2985/rgb/issues":"<b>RGB</b> (WS2811-12/NeoPixel)"
}
},

Чекбокс

{
"type": "checkbox",
"title": "Название",
"state": "1"
},

"state": "1" 1 - включено, 0 - выключено.

В checkbox есть и 2 дизайнерских кнопки one или two, "design":"one" А если добавить еще big-size то checkbox будет больше "design":"two big-size" исходники: https://codepen.io/himalayasingh/pen/EdVzNL

Здесь так же можно использовать "action": ""

iframe (Вставляем другие Веб страницы)

{
 "type": "iframe",
 "state": "http://privet.lv",
 "style":"width:100%;height:200px;border:0"
},

"state": "http://onclick.lv" сюда можно вставлять любую ссылку которая будит отображаться на вашей странице.

Ползунок

{
"type": "range",
"title": "Название",
"state":"100",
"pattern":"min=0 max=255 step=1"
},

"pattern":"min=0 max=255 step=1" - min=0 минимальное значение в ползунке, max=255 максимальное значение, step=1 шаги передвижения ползунка.

Здесь так же можно использовать "action": ""

Таблицы

{
"type": "table",
"state": "timer.save.json",
"title": {
"module":"",
"trigger":"On/Off",
"day":"{{LangDay}}",
"time":"Время"
}
},

"state": "timer.save.json", путь к json файлу. Он должен быть примерно такого вида

{"test":[{"id":7397,"trigger":"on","module":"relay","day":"All","time":"16:11:00","work":0},
{"id":5340,"trigger":"off","module":"relay","day":"All","time":"16:12:00","work":0}]}
"title": {
"trigger":"On/Off",
"day":"{{LangDay}}",
"time":"Время"
}

Здесь мы указываем какие элементы с json файла показывать и как будут называться столбики. В данном случае мы не будем видеть столбики с id, module, work.

Таблицы csv

Таблица сделана по просьбе пользователей. Ее отличия от json таблицы в том что здесь мы можем редактировать нужные блоки в файле и сохранять его

{
"type":"csv",
"title":["checkbox","html","password","text","number","color","range"],
"state":"test.csv",
"style":"width:100%;",
"class":"btn btn-block btn-success"
},

"state": "test.csv", путь к csv файлу. Он должен быть примерно такого вида

1;1;535343;6222;33;653234;42
1;d<b>bs</b>fds;dsffd3;fdfd;52;dsffss;22
0;sd;fdsfsf;y5445;532;dsfsdf;34

Обратите внимание на title. Там может быть большое количество разных типов, например:

"html" - это html блок или просто текст который нельзя редактировать,

"checkbox" - галочки (1 галочка есть, 0 - галочки нет),

"password" - ячейка ввода пароля,

"text" - ячейка ввода текста,

"number" - ячейка только для цифр,

"color" - выбор цвета,

"range" - ползунок (значения от 0 до 100),

"hidden" - скрытое поле ввода,

Более полный поддерживаемый список вы можете найти в интернете смотрите html input type

Графики

{
"type": "chart",
"state": "analog.json"
},

"state": "analog.json" путь к json файлу. Он должен быть примерно такого вида

{"data":[507,442,453,642],"points":30,"refresh":3000,"title":"Analog (ADC/A0)"}

"data":[507,442,453,642] точка, "points":30 количество точек на графике, refresh":3000 частота обновления графика, "title":"Analog (ADC/A0)"} название графика

Графики на данный момент можно выводить в 2 типах Line или Bar, "chartist":"Bar" в будущем планируем сделать и Pie.

Подробней о всех возможностях здесь: https://www.youtube.com/watch?v=ooD_2luC4W4&t=19s&index=22&list=PL6NJTNxbvy-IPTDQk8XjTV41oRrFafrRi

Картинки

{
"type": "img",
"state": "http://www.privet.lv/images/moods/9.jpg"
},

Подгруздка созданных вами Макросов\Голосовых вообщений

{
"type":"macros"
},

Авторизация

{
"type":"login",
"title":"Этот раздел защищен паролем. Пожалуйста введите пароль который вы используете в Точки доступа.",
"state":"{{ssidApPass}}"
},

"state":"{{ssidApPass}}" в state вы можете использовать необходимую переменную или просто указать нужный пароль. Такая авторизация отлично защитит страницы от ваших детей и среднестатистического пользователя. Не стоит на ее полагаться, т.к. программист с среднем опытом при желание сможет ее обойти.

Подгруздка дополнительных файлов

  {
   "type":"file",
   "state":"robots.txt",
   "style":"width:100%;height:300px",
   "class":"btn btn-block btn-success",
   "title":"{{LangSave}}"
  },

Таким образом вы можете подгрузить любой файл на веб страницу и редактировать \ сохранять его. Так же здесь поддерживается атрибут action который отправляет нужный вам get после сохранения.

Подгруздка дополнительных json файлов

{
"type":"loadJson",
"state":"vasja.json"
},

Файл vasja.json

{
"json-vasja-json":[
{
"type":"link",
"title":"TEST",
"action":"/",
"class":"btn btn-block btn-default"
} 
]
}

Обратите внимание в данном случае в подгружаемом json файле, все блоки должны находится в "json-vasja-json":[] . Если json файл будет называться test123.json блоки должны находится в "json-test123-json":[] .

  • Примечания, используя loadJson контент вы можете подгружать в любое место на странице, например "url-content":[] у вас все погрузиться в левую часть сайта (будут видны нажав Ctrl+M).
  • Здесь доступна функция "refresh":3000 частота обновления файла в мс.

Подгрузка issues, commits с Github

{
"type":"issues",
"state":"5"
},
{
"type":"commits",
"state":"5"
},

"state":"5" количество подгружаемых записей.

Возможности

Clone this wiki locally