Визуализация

Графический пользовательский интерфейс для iobroker

Текущий релиз
1.5.6
Разработчик
bluefox

Визуализация веб-контента для платформы ioBroker.

Разработка этой версии приостановлена. Пожалуйста, перенесите свои проекты в vis-2.

Требования к лицензированию

Адаптер бесплатен для любых целей.

Установка и документация

Демонстрационный интерфейсДемонстрационный интерфейс

Онлайн-демонстрации

Связывание объектов

Обычно большинство виджетов имеют атрибут ObjectID, и этот атрибут может быть связан с каким-либо значением идентификатора объекта. Но есть и другой способ привязать любой атрибут виджета к определенному ObjectID.

Просто запишите в атрибут{object.id} и он будет привязан (не в режиме редактирования) к значению этого объекта. При использовании специального формата можно даже выполнять с ним простые операции, например, умножение или форматирование. Шаблон имеет следующий формат:

{objectID;operation1;operation2;...}

Поддерживаются следующие операции:

  • \* - умножение. Аргумент должен быть заключен в скобки, например, "*(4)". В этом примере мы умножаем значение на 4.
  • \+ - добавить. Аргумент должен быть заключен в скобки, например, "+(4.5)". В этом примере мы добавляем к значению 4.5.
  • \- - вычесть. Аргумент должен быть заключен в скобки, например, "-(-674.5)". В этом примере мы вычитаем из значения -674.5.
  • / - деление. Аргумент должен быть заключен в скобки, например, "/(0.5)". В этом примере мы делим значение на 0.5.
  • % - по модулю. Аргумент должен быть в скобках, например, "%(5)". В этом примере мы берем по модулю 5.
  • round - округлить значение.
  • round(N) - округлить значение на N знаков после запятой, например, 34.678;round(1) => 34.7
  • hex - Преобразовать значение в шестнадцатеричное. Все буквы строчные.
  • hex2 - Преобразовать значение в шестнадцатеричное. Все буквы строчные. Если значение меньше 16, то будет добавлен ведущий ноль.
  • HEX - то же самое, что и шестнадцатеричный код, но в верхнем регистре.
  • HEX2 - то же самое, что и hex2, но в верхнем регистре.
  • date - Форматирует дату в соответствии с заданным форматом. Формат тот же, что и в iobroker.javascript.
  • min(N) - Если значение меньше N, берём N, в противном случае значение
  • max(M) - Если значение больше M, берём M, в противном случае — значение
  • sqrt - квадратный корень
  • pow(n) - степень Н.
  • pow - степень двойки.
  • floor - Math.floor
  • ceil - Math.ceil
  • json - Операция для получения свойств JSON или объекта. Например,{id;json(common.name.en)}
  • random(R) - Math.random() * R, или просто Math.random(), если аргумента нет.
  • formatValue(decimals) - отформатируйте значение в соответствии с системными настройками и используйте десятичные знаки.
  • date(format) - Форматировать значение как дату. Формат выглядит следующим образом:YYYY-MM-DD hh:mm:ss.sss
  • momentDate(format, useTodayOrYesterday) — Форматирование значения как даты с использованием Moment.js. Допустимые форматы должны быть введены в соответствии с библиотекой moment.js .useTodayOrYesterday=true формат momentjsddd /dddd перезаписываются данными за сегодняшний день / вчерашний день
  • array(element1,element2[,element3,element4]) - возвращает элемент по индексу. Например:{id.ack;array(ack is false,ack is true)}

Этот шаблон можно использовать в любом тексте, например:

My calculations with {objectID1;operation1;operation2;...} are {objectID2;operation3;operation4;...}

или расчеты цвета:

#{objectRed;/(100);*(255);HEX2}{objectGreen;HEX2}{objectBlue;HEX2}

Для отображения метки времени объекта запишите.ts или.lc (для последнего изменения) в конце идентификатора объекта, например:

Last change: {objectRed.lc;date(hh:mm)}

Существует ещё один способ записать этот шаблон:

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(h*h + w*w))}

{h:height;w:width;h*w} будет интерпретировано как функция:

value = (function () {
    var h = "10";
    var w = "20";
    return Math.max(20, Math.sqrt(h*h + w*w));
})();

Вы можете использовать любые функции JavaScript. Аргументы должны быть обозначены двоеточием (':'), в противном случае они будут интерпретированы как формула.

Будьте внимательны к типам. Все они определены как строки. Чтобы убедиться, что значение будет обрабатываться как число, используйте функцию parseFloat.

Hypotenuse of {height} and {width} = {h:height;w:width;Math.max(20, Math.sqrt(Math.pow(parseFloat(h), 2) + Math.pow(parseFloat(w), 2)))}

Специальные переплеты

Существует ряд различных внутренних привязок для предоставления дополнительной информации в представлениях:

  • username - отображает авторизованного пользователя
  • view - название фактического вида
  • wname - название виджета
  • widget — это объект, содержащий все данные виджета. Может использоваться только в части JavaScript, например:{a:a;widget.data.name}
  • wid - название фактического виджета
  • language - может бытьde ,en илиru .
  • instance - экземпляр браузера
  • login - требуется ли авторизация (например, чтобы показать/скрыть кнопку выхода).
  • local_* - если название штата начинается сlocal_ Это не будет передано в ioBroker, но все виджеты обновятся, в зависимости от этого состояния. (Локальная переменная для текущей сессии браузера)

Примечание: для использования символа ":" в вычислениях (например, в строковых формулах) используйте вместо него "::".

Помните , что определения стилей будут интерпретироваться как привязки, поэтому используйте{{style: value}} или просто

{
	style: value
}

для этого.

Фильтры

Чтобы отобразить все виджеты на одном экране, можно использовать фильтры для уменьшения количества виджетов, одновременно отображаемых на экране.

Каждый виджет имеет полеfilter Если вы зададите ему какое-либо значение, например...light , поэтому вы можете использовать другие виджеты.(bars - filters, filter - dropdown) для управления тем, какой фильтр фактически активен.

Интерфейс управления

Vis создает 3 переменные:

  • control.instance — Здесь следует указать экземпляр браузера илиFFFFFFFF если каждый браузер должен контролироваться.
  • control.data — Параметр для команды. См. подробное описание конкретной команды.
  • control.command - Название команды. Запись в эту переменную запускает команду. Это означает, что перед записью команды необходимо подготовить "экземпляр" и "данные", содержащие необходимые данные.

Команды:

  • alert - Отобразить всплывающее окно в визуализации. Файл "control.data" имеет следующий формат: "message;title;jquery-icon". Title и jquery-icon являются необязательными. Названия значков можно найти здесь . Чтобы отобразить значок "ui-icon-info", напишитеMessage;;info .

  • changeView - Переключитесь на нужный вид. Файл "control.data" должен содержать имя представления. Вы также можете указать имя проекта, например, "project/view". Проект по умолчанию — "main".

  • refresh - Перезагрузить визуализацию, например, после изменения проекта, чтобы она перезагружалась во всех браузерах.

  • reload — то же самое, что и обновление.

  • dialog — Отобразить диалоговое окно. Диалоговое окно должно отображаться. Один из вариантов:

    • static - HTML - Dialog ,
    • static - Icon - Dialog ,
    • container - HTML - view in jqui Dialog ,
    • container - ext cmd - view in jqui Dialog ,
    • container - Icon - view in jqui Dialog ,
    • container - Button - view in jqui Dialog .

    control.data должен содержать идентификатор виджета диалога, например:w00056 .

  • dialogClose

  • popup - открывает новое окно браузера. Ссылка должна быть указана вcontrol.data например, http://google.com

  • playSound - Воспроизвести звуковой файл. Ссылка на файл указана вcontrol.data Например, http://www.modular-planet.de/fx/marsians/Marsiansrev.mp3 . Вы можете загрузить свой собственный файл в Vis и воспроизвести его, как, например,/vis.0/main/img/myFile.mp3 .

Если пользователь изменит ракурс или в начале работы, переменные будут заполнены элементом vis.

  • control.instance : экземпляр браузера иack=true
  • control.data : название проекта и представления в формеproject/view напримерmain/view (иack=true )
  • control.command :changedView иack=true

Вы можете записать строку JSON или объект вcontrol.command как{instance: 'AABBCCDD', command: 'cmd', data: 'ddd'} В этом случае экземпляр и данные будут взяты из JSON-объекта.

Пример использования JavaScript-адаптера:

setState('vis.0.control.command', {"instance": "*", "command": "refresh", "data": ""});

Вид по умолчанию

Для каждого элемента можно задать желаемое разрешение (Меню => Инструменты => Разрешение). В режиме редактирования это всего лишь визуальная рамка, показывающая размер экрана на конкретном устройстве. В режиме реального времени она не будет видна, и все виджеты за пределами рамки будут отображаться.

Кроме того, вы можете указать, должен ли этот вид использоваться по умолчанию для данного разрешения.

Поэтому каждый раз, когдаindex.html (без#viewName Если вызывается функция, будет открыт наиболее подходящий для данного разрешения вариант просмотра. Если флаг "Default" установлен только для одного варианта просмотра, то этот вариант будет открыт независимо от разрешения или ориентации экрана.

Например, вы можете создать два режима просмотра: «Альбомная ориентация — Мобильная версия» и «Портативная ориентация — Мобильная версия», и эти два режима будут автоматически переключаться при изменении ориентации или размера экрана.

Вспомогательный виджет "Основные параметры - Разрешение экрана" отображает фактическое разрешение экрана и наиболее подходящий вариант отображения по умолчанию для этого разрешения.

Настройки

Перезагрузить, если сон длится дольше

Существует правило, согласно которому после некоторого периода отключения вся страница VIS будет перезагружена для синхронизации проекта. Вы можете настроить это в меню «Настройки...». Если вы установите интервал «никогда», страница никогда не будет перезагружаться.

Интервал повторного подключения

Установите интервал между попытками подключения в случае разрыва соединения. Если вы установите 2 секунды, соединение будет устанавливаться каждые 2 секунды.

Темный экран повторного подключения

Иногда (ночью) требуется темный экран загрузки. С помощью этой опции вы можете его настроить.

Обратите внимание, что эти настройки действительны только для повторного подключения, а не для первого.

Темный

Changelog

WORK IN PROGRESS

  • (bluefox) Removed usage of storage and uses localStorage instead.

1.5.5 (2024-04-12)

  • (bluefox) Corrected small warning

1.5.4 (2023-11-29)

  • (agav99) added the new binding operation for getting property of JSON or object
  • (agav99) Checked the initialization of the local_ variables
  • (agav99) fixed subscribeOidAtRuntime
  • (stephanritscher) Added dynamic web manifest
  • (agav99) Optimization for basic-view in widget8
  • (oweitman) Changed binding regex to accept umlauts
  • (mcm1957) Corrected first installation of vis

1.5.1 (2023-11-06)

  • (bluefox) Changed License: it is now MIT, and the license check was removed

1.4.16 (2023-01-27)

  • (bluefox) Corrected connection with "only port" URLs

1.4.15 (2022-04-10)

  • (bluefox) Better check of the offline license

1.4.14 (2022-03-31)

  • (bluefox) Corrected GUI bug

1.4.13 (2022-03-22)

  • (pascal-hari) The group attributes will be replaced recursively

1.4.12 (2022-02-12)

  • (bluefox) Fixed bug with the export of specific widgets

1.4.11 (2022-02-12)

  • (bluefox) Removed ES6 commands to be supported by older browsers
  • (oweitman) Fixed problem with update of grouped widgets
  • (stephanritscher) Added web manifest to be able to handle vis as the web app

1.4.8 (2022-01-29)

  • (bluefox) Added support for js-controller 4.x

1.4.7 (2021-12-28)

  • (mswiege) Fixed subscribeOidAtRuntime if called with invalid IDs
  • (bluefox) Added support of license manager

1.4.6 (2021-11-20)

  • (bluefox) Added the license check even without internet

1.4.5 (2021-10-08)

  • (jens-maus) Added frame-src spec to content-security-policy header fixing frame related content blocking issues (e.g. using KioskPro iOS app).
  • (bluefox) Showed the extended error messages by license check
  • (Scrounger) Patch visibility oid binding

1.4.4 (2021-08-31)

  • (jobe451) Allowed to have ":" in the binding object IDs

1.4.3 (2021-07-11)

  • (bluefox) Added possibility to check license offline (only special once)

1.4.0 (2021-07-01)

  • (bluefox) Changed path for check of certificates
  • (thost96) fixes for issues found by adapter-checker

1.3.10 (2021-05-25)

  • (bluefox) Fixed the support of admin5

1.3.9 (2021-04-29)

  • (agav99) Added support of local browser variables
  • (Scrounger) Bug fix for null & NaN values in width and height
  • (bluefox) Added support for admin5

1.3.8 (2021-03-03)

  • (bluefox) fix play sounds on iOS Safari an android
  • (Scrounger) visEditInspect: format dimension added
  • (foxriver76) Replace travis and appveyor by the GitHub actions
  • (Excodibur) Allow resources to be loaded as blob
  • (Excodibur ) Allow resources to be loaded as blob

1.3.7 (2021-01-20)

  • (Scrounger) Bug Fixed - Binding in JSON string

1.3.6 (2020-12-13)

  • (twonky4) Corrected: old browser issue
  • (rbaranga) Corrected: play sounds on iOS Safari
  • (Scrounger) Added the optional arguments to support Material Design Widgets

1.3.4 (2020-10-04)

  • (foxriver76) Corrected the error on older devices

1.3.3 (2020-09-21)

  • (bluefox) Return de-bounce settings back
  • (bluefox) Corrected error with {username} binding
  • (bluefox) Fixed "show last change" option

1.3.1 (2020-09-18)

  • (bluefox) Added the auto-focus option to the input widgets

1.3.0 (2020-09-17)

  • (foxriver76) on pending getStates, try again instead of drop
  • (foxriver76) fixed the file manager typos
  • (Scrounger) Added momentDate for the bindings

1.2.12 (2020-09-08)

  • (foxriver76) only parse arrays and json objects, not booleans, normal strings etc

1.2.11 (2020-08-25)

  • (bluefox) The error message about the non-found chart view was fixed.

1.2.10 (2020-08-23)

  • (gsicilia82/fceller) JSON strings will be parsed in VIS bindings

1.2.9 (2020-08-22)

  • (bluefox) Charts are now supported

1.2.6 (2020-03-22)

  • (bluefox) Added the better error message if license could not be parsed

1.2.4 (2020-02-11)

  • (bluefox) Table widget was extended with the selected object ID.

1.2.3 (2019-12-14)

  • (bluefox) Small changes in license handling were made

1.2.2 (2019-10-27)

  • (bluefox) Preparations for js-controller 2.0. Check undefined adn null.

1.2.1 (2019-09-10)

  • (bluefox) fixed upload of files

1.2.0 (2019-05-07)

  • (bluefox) add translations

1.1.11 (2019-02-07)

  • (bluefox) improve Bool HTML

1.1.10 (2019-01-30)

  • Add Chinese support

1.1.8 (2018-10-29)

  • (bluefox) File dialog was corrected

1.1.7 (2018-07-24)

  • (bluefox) view8 corrected

1.1.6 (2018-07-18)

  • (bluefox) support of new variables (see Special bindings )
  • (bluefox) fix error if fast view changes
  • (bluefox) fix "jqui - ctrl - IconState / val - Icon Bool"

1.1.5 (2018-06-10)

  • (bluefox) show more information if widget cannot be rendered
  • (bluefox) fix saving of widgets if they have bindings
  • (bluefox) show error stack
  • (bluefox) fix binding
  • (Apollon77) fix testing
  • (bluefox) fix for iobroker.pro and external socket.io settings
  • (bluefox) A user variable was added into bindings.
  • (bluefox) Fixed widget tabs

1.1.4 (2018-04-23)

  • (bluefox) fix bool SVG

1.1.3 (2018-04-12)

  • (bluefox) ignore click by scrolling on touch devices
  • (bluefox) remove wrong state vis.0.command
  • (bluefox) fix error with jPlot
  • (bluefox) better widget behaviour in edit Mode (basic, jqui)
  • Fix config dialog

1.1.2 (2018-02-02)

  • (bluefox) Fixing the saving of project
  • (bluefox) Fixing the background selector
  • (bluefox) Fixing the null pointer problem
  • (bluefox) Fixing the selection helper
  • Update translations

1.1.1 (2018-01-07)

  • (bluefox) The problem with view change on the touch devices fixed

1.0.5 (2017-11-19)

  • (bluefox) show number of data points in every project

1.0.4 (2017-10-22)

  • (bluefox) Add autocomplete for view CSS options
  • (bluefox) change edit of view CSS background options

1.0.3 (2017-10-20)

  • (bluefox) Fix parse of invalid bindings
  • (bluefox) add moment.js

1.0.0 release candidate (2017-10-13)

  • (bluefox) fix iframe and image updates
  • (bluefox) fix fonts

0.15.7 (2017-10-01)

  • (bluefox) allow update of images without additional query (but it works only in some very specific cases)
  • (bluefox) zoom of iframes

0.15.5 (2017-07-24)

  • (bluefox) Fix widgets upload

0.15.4 (2017-07-19)

  • (bluefox) Add swipe

0.15.3 (2017-07-12)

  • (bluefox) Add full screen widget
  • (bluefox) Fix timestamp widget

0.15.2 (2017-07-07)

  • (bluefox) Fix binding if it has "-" in the OID

0.15.1 (2017-06-30)

  • (bluefox) Fix error with context menu
  • (bluefox) Allow adding of class to view

0.15.0 (2017-05-25)

  • (bluefox) fix copy of grouped widgets
  • (bluefox) fix subscribe if empty states

0.14.7 (2017-05-19)

  • (bluefox) add templates

0.14.6 (2017-05-16)

  • (bluefox) Fix error by groups selection
  • (apollon77) fix jqui-dialog for auto-open

0.14.3 (2017-05-11)

  • (bluefox) fix export/import of grouped widgets

0.14.2 (2017-04-29)

  • (bluefox) Fix install error

0.14.1 (2017-04-27)

  • (bluefox) move beta to main
  • (bluefox) fix choose filter
  • (bluefox) fix error if some views do not exist
  • (bluefox) fix binding problem, e.g. "a:-45?0" was detected as variable too.
  • (bluefox) fix some font sizes
  • (bluefox) fix undo
  • (bluefox) fix themes change
  • (bluefox) optimize load of pages
  • (bluefox) check license
  • (bluefox) fix basic views 8
  • (bluefox) fix time picker if opened in dialog

0.14.0 (2017-04-10)

  • (bluefox) add mandatory license input

0.12.7 (2017-02-09)

  • (bluefox) prepare beta

0.12.6 (2017-01-29)

  • (pmant) fix view copy
  • (pmant) Improvements to context menu
  • (pmant) usability improvements for both view dropdowns
  • (bluefox) small fix of dragging

0.12.6 (2017-01-29)

  • (pmant) add dropdown menu to views bar
  • (pmant) sort widgets widget selector by name
  • (bluefox) fix groupAttr in signals and visibility

0.12.2 (2016-12-04)

  • (bluefox) fix errors with grouping

0.12.1 (2016-11-30)

  • (bluefox) fix errors with containers

0.12.0 (2016-11-24)

  • (bluefox) subscribe mode for faster state loading
  • (bluefox) add grouping

0.10.15 (2016-11-06)

  • (bluefox) remove weather-adapter.html
  • (bluefox) clean config.js
  • (bluefox) remove old widgets
  • (bluefox) improve authentication in app
  • (bluefox) allow creation of instance from helper widget

0.10.14 (2016-10-09)

  • (bluefox) fix rendering of widgets
  • (bluefox) working on relative positions.
  • (bluefox) destroy widgets before views deletion

0.10.13 (2016-09-23)

  • (bluefox) fixed errors for iPad 1
  • (bluefox) start working on relative positions

0.10.12 (2016-09-16)

  • (bluefox) group specific visibility of widgets and views

0.10.11 (2016-09-15)

  • (bluefox) fix for iOS 10
  • (bluefox) allow disabling of groups for performance

0.10.10 (2016-09-14)

  • (bluefox) add text2speech widget
  • (bluefox) try to fix problem with iOS 10

0.10.9 (2016-09-04)

  • (bluefox) support of web-sockets force
  • (bluefox) destroy unused views after 30 seconds
  • (bluefox) do not show middle leading lines if top and bottom are shown
  • (bluefox) let timestamp and last-change to show time as interval

0.10.7 (2016-07-09)

  • (bluefox) add settings to reload vis
  • (bluefox) add dark reload screen
  • (bluefox) fix reload interval
  • (bluefox) export/import
  • (bluefox) add global script
  • (bluefox) add 'not exist'/'not consist'/'exist' to signal and visibility
  • (bluefox) fix OIDs in editor

0.10.5 (2016-06-15)

  • (bluefox) fix select ID dialog
  • (bluefox) add align help lines
  • (bluefox) never store data in non-edit mode

0.10.4 (2016-06-14)

  • (bluefox) fix drag and resize
  • (Patrick) fix QuoJS
  • (bluefox) support of milliseconds in formatDate
  • (bluefox) support of getHistory
  • (bluefox) support of show history instances
  • (bluefox) grid
  • (bluefox) add previews

0.10.3 (2016-05-30)

  • (bluefox) update canJS
  • (pmant) fixes bugs with dialogs on touchscreens
  • (bluefox) speedUP show attributes at 300ms
  • (bluefox) fix click on widget if signal is active

0.10.2 (2016-05-24)

  • (bluefox) fix widgets with timestamps

0.10.1 (2016-05-23)

  • (bluefox) change version

0.10.0 (2016-05-23)

  • (bluefox) translates
  • (bluefox) fix 'no widgets selected'
  • (bluefox) change widget icons
  • (bluefox) add signals
  • (bluefox) add app.css for cordova
  • (bluefox) change icons preview
  • (bluefox) show properties of widget as icon
  • (bluefox) fix error with external commands
  • (bluefox) add types icon to preview
  • (bluefox) support edit on iPad1
  • (bluefox) change security settings

License

The MIT License (MIT)

Copyright (c) 2013-2024 Denis Haev dogafox@gmail.com, Copyright (c) 2013 hobbyquaker

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.