Home

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

Нажав 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": "/?setup"
},

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

В ссылке вы так же можно использовать javascript функции. Пример "action": "javascript:alert('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"

Так же нажимая на кнопку мы можем отправлять sosket, например вот так:

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

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

{
"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": ""

Ползунок2

{
"type": "range-dual",
"title": "Название",
"state":"50 100",
"name":"test",
"action":"[[test-left]] [[test-right]]" 
},

В state должно быть обязательно 2 числа разделенные пробелом. Источник: https://codepen.io/mrfussy/pen/RwzRGor

Таблицы

{
"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" - скрытое поле ввода,

"del" - Создается авто генерируемый линк который позволит проще сделать функцию удаления с файла.

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

Так же вы в title вы можете использовать - "select:example.json" Это позволит показать выпадающий список который загрузится из файла example.json формат файла example.json схож с форматом type select:

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

Графики

{
"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" количество подгружаемых записей.

class, animated

В новой версии вы можете к любому типу добавлять плавные анимации появления или исчезания элементов. Для этого в нужный вам type, нужно добавить class animated и любой из нижних эффектов.

Пример:

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

Появления tdExpandIn tdFadeIn tdFadeInDown tdFadeInLeft tdFadeInUp tdFadeInRight

Исчезания tdFadeOut tdFadeOutDown tdFadeOutLeft tdFadeOutUp tdFadeOutRight

Возможности

configs, socket
h1, h2, h3, h4, h5, h6
text
link
hr
input, password, textarea
button
select
dropdown
checkbox
iframe
range
table
csv
chart
img
macros
login
file
loadJson
issues, commits
class, animated

Provide feedback

Saved searches

Use saved searches to filter your results more quickly