Skip to content

Возможности page.htm?*

Renat edited this page Nov 25, 2018 · 38 revisions

Возможности page.htm?*

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

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

{
 "configs": [
  "/config.live.json",
  "/lang/lang.{{lang}}.json",
  "/modules.json",
  "socket {{ip}}:81/"
 ],
"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 {{ip}}:81/" - таким образом вы включите сокеты. Эта строчка должна находится обязательно в конце. Так же очень важно отдавать сокет данные в 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 вы можете использовать на странице.

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

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

Заголовки

{
"type": "h1",
"title": "Заголовок"
},

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

Текст

{
"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 использовать такие кавычки [[]] мы можем подставлять данные с input, checkbox, range, select и т.д. Их может быть любое количество. Но "name" имена не должны повторяться на странице.

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

{
"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" название в списке.

Здесь мы так же можем использовать "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.

Графики

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

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

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

"data":[507] точка, "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 вы можете использовать необходимую переменную или просто указать нужный пароль. Такая авторизация отлично защитит страницы от ваших детей и среднестатистического пользователя. Не стоит на ее полагаться, т.к. программист с среднем опытом при желание сможет ее обойти.

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

You can’t perform that action at this time.