Страница внешнего вида
Версия: 1.26.0
Настройка пользовательского интерфейса менеджера
Параметр настроек «Внешний вид» можно использовать в настраиваемом развертывании. Вы можете использовать его для стилизации своего развертывания и настройки отображения на страницах Менеджера ресурсов и атрибутов вашей системы. Некоторые из этих настроек можно изменить визуально в пользовательском интерфейсе, другие можно задать при выборе редактора JSON. Конфигурация сохраняется в файле менеджер_config.
В этом руководстве пользователя мы будем использовать пример JSON-менеджера_config и дадим краткое описание каждого раздела, который вы можете включить. Обратите внимание, что на некоторых страницах есть конфигурация по умолчанию, которую вы можете перезаписать с помощью менеджера_config.
Примечание
По умолчанию суперпользователи (например, пользователь «администратор» главной области) увидят эти изменения стиля. Однако если в файле менеджера_config установлен "manager":{"applyConfigToAdmin":false}, большинство изменений стиля не отобразятся. Эту опцию можно установить так, чтобы пользователь «admin» не был ограничен тем, что установлено в конфигурации.
Посмотрите пример менеджера_config, используемый в разделах на этой странице.
{
"realms": {
"default": {
"appTitle": "ACME IoT",
"headers": [
"map",
"assets",
"rules",
"insights",
"language",
"users",
"roles",
"account",
"logs",
"logout"
],
"styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #1b5630; --or-app-color5: #CCCCCC;}",
"logo": "/images/logo.png",
"logoMobile": "/images/logo-mobile.png",
"favicon": "/images/favicon.png",
"language": "en"
}
},
"pages": {
"map": {
"card": {
"default": {
"exclude": [
"notes"
]
},
"assetTypes": {
"WeatherAsset": {
"exclude": [
"location",
"notes",
"model",
"manufacturer"
]
}
}
},
"clustering": {
"cluster": true,
"clusterRadius": 180,
"clusterMaxZoom": 17
},
"filters": [
{
"realms": [
"manufacturer"
],
"query": {
"types": [
"SoilSensorAsset"
]
}
},
{
"label": "CO2 > 100",
"realms": [
"smartcity"
],
"query": {
"types": [
"EnvironmentSensorAsset"
],
"attributes": {
"items": [
{
"name": {
"predicateType": "number",
"value": "ozoneLevel"
},
"value": {
"predicateType": "number",
"value": 100,
"operator": "GREATER_THAN"
}
}
]
}
}
},
{
"label": "Irrigation water flow > 10",
"realms": [
"manufacturer"
],
"query": {
"types": [
"IrrigationAsset"
],
"attributes": {
"items": [
{
"name": {
"predicateType": "number",
"value": "flowWater"
},
"value": {
"predicateType": "number",
"value": 10,
"operator": "GREATER_THAN"
}
}
]
}
}
}
]
},
"rules": {
"rules": {
"controls": {
"allowedLanguages": [
"JSON",
"FLOW",
"GROOVY"
],
"allowedActionTargetTypes": {
"actions": {
"email": [
"CUSTOM",
"USER"
],
"push": [
"ASSET",
"USER"
]
}
}
},
"descriptors": {
"all": {
"excludeAssets": [
"TradfriLightAsset",
"TradfriPlugAsset",
"ArtnetLightAsset"
],
"assets": {
"*": {
"excludeAttributes": [
"location"
]
}
}
}
}
}
},
"assets": {
"tree": {
"add": {
"typesParent": {
"default": {
"exclude": [
"TradfriLightAsset",
"TradfriPlugAsset",
"ArtnetLightAsset",
"ArtnetAgent",
"MacroAgent",
"ControllerAgent",
"KNXAgent",
"ZWAgent",
"TradfriAgent",
"TimerAgent",
"VelbusTcpAgent",
"VelbusSerialAgent"
]
}
}
}
},
"viewer": {
"assetTypes": {
"WeatherAsset": {
"viewerStyles": {},
"panels": [
{
"type": "group",
"title": "underlyingAssets"
},
{
"type": "info",
"title": "location",
"properties": {
"include": []
},
"attributes": {
"include": [
"location"
],
"itemConfig": {
"location": {
"label": ""
}
}
}
},
{
"type": "info",
"hideOnMobile": true,
"properties": {
"include": []
},
"attributes": {
"include": [
"notes",
"manufacturer",
"model"
]
}
},
{
"type": "info",
"title": "Weather data",
"attributes": {
"exclude": [
"location",
"radiation",
"rainfall",
"uVIndex",
"currentWeather",
"notes",
"manufacturer",
"model"
]
},
"properties": {
"include": []
}
},
{
"type": "info",
"title": "Extra details",
"column": 1,
"properties": {
"include": []
},
"attributes": {
"include": [
"rainfall",
"uVIndex"
]
}
},
{
"type": "history",
"column": 1
},
{
"type": "linkedUsers",
"column": 1
}
]
}
},
"historyConfig": {
"table": {
"attributeNames": {
"optimiseTarget": {
"columns": [
{
"header": "Optimise target",
"type": "prop",
"path": "$."
},
{
"header": "Timestamp",
"type": "timestamp"
}
]
}
}
}
}
}
}
}
}
Конфигурация области. Вы можете настроить брендинг для каждой области. В приведенном ниже примере вы можете увидеть, как заголовок страницы, заголовки, цвета и логотипы устанавливаются по умолчанию (для любой новой области, созданной через пользовательский интерфейс), а также для областей «главный» и «клиент».
{
"realms": {
"default": {
"appTitle": "ACME IoT",
"headers": [
"map",
"assets",
"rules",
"insights",
"language",
"users",
"roles",
"account",
"logs",
"logout"
],
"styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #1b5630; --or-app-color5: #CCCCCC;}",
"logo": "/images/logo.png",
"logoMobile": "/images/logo-mobile.png",
"favicon": "/images/favicon.png",
"language": "en"
},
"master": {
"appTitle": "ACME Master",
"styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #275582; --or-app-color5: #CCCCCC;}",
"logo": "/images/logo.png",
"logoMobile": "/images/logo-mobile.png",
"favicon": "/images/logo-favicon.png",
"language": "en"
},
"clienta": {
"appTitle": "Client A",
"styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #275582; --or-app-color5: #CCCCCC;}",
"logo": "/images/clienta-logo.png",
"logoMobile": "/images/clienta-logoMobile.png",
"favicon": "/images/clienta-favicon.png",
"language": "de"
}
}
}
Вот как выглядят --or-app-colors в демонстрационном развертывании: 
Активы – дерево. Исключите типы объектов из диалогового окна "Добавить объект".
{
"pages": {
"assets": {
"tree": {
"add": {
"typesParent": {
"default": {
"exclude": [
"TradfriLightAsset",
"TradfriPlugAsset",
"ArtnetLightAsset",
"ArtnetAgent",
"MacroAgent",
"ControllerAgent",
"KNXAgent",
"ZWAgent",
"TradfriAgent",
"TimerAgent",
"VelbusTcpAgent",
"VelbusSerialAgent"
]
}
}
}
}
}
}
}
Ресурсы – просмотр. Настройте, какие панели будут отображаться на странице ресурсов. Вы можете включать или исключать атрибуты для отображения на каждой панели. Эти панели можно настроить для всех типов активов или указать для каждого типа. Это перезапись конфигурации по умолчанию файла asset-viewer. В historyConfig дан пример того, как указать столбцы, отображаемые в таблице, для атрибута, который не является числом или логическим значением; если конфигурация не указана, столбцы будут автоматически созданы.
{
"pages": {
"assets": {
"viewer": {
"assetTypes": {
"WeatherAsset": {
"viewerStyles": {},
"panels": [
{
"type": "group",
"title": "underlyingAssets"
},
{
"type": "info",
"title": "location",
"properties": {
"include": []
},
"attributes": {
"include": [
"location"
],
"itemConfig": {
"location": {
"label": ""
}
}
}
},
{
"type": "info",
"hideOnMobile": true,
"properties": {
"include": []
},
"attributes": {
"include": [
"notes",
"manufacturer",
"model"
]
}
},
{
"type": "info",
"title": "Weather data",
"attributes": {
"exclude": [
"location",
"radiation",
"rainfall",
"uVIndex",
"currentWeather",
"notes",
"manufacturer",
"model"
]
},
"properties": {
"include": []
}
},
{
"type": "info",
"title": "Extra details",
"column": 1,
"properties": {
"include": []
},
"attributes": {
"include": [
"rainfall",
"uVIndex"
]
}
},
{
"type": "history",
"column": 1
},
{
"type": "linkedUsers",
"column": 1
}
]
}
},
"historyConfig": {
"table": {
"attributeNames": {
"optimiseTarget": {
"columns": [
{
"header": "Optimise target",
"type": "prop",
"path": "$."
},
{
"header": "Timestamp",
"type": "timestamp"
}
]
}
}
}
}
}
}
}
}
Правила – элементы управления. Укажите, какие типы правил доступны (для пользователей с соответствующими разрешениями) и какие действия может выполнять правило.
{
"pages": {
"rules": {
"rules": {
"controls": {
"allowedLanguages": [
"JSON",
"FLOW",
"GROOVY"
],
"allowedActionTargetTypes": {
"actions": {
"email": [
"CUSTOM",
"USER"
],
"push": [
"ASSET",
"USER"
]
}
}
}
}
}
}
}
Правила — «Когда-то». Укажите, какие типы активов исключаются из списка типов активов, которые можно выбрать в правиле «Когда-то». Кроме того, вы можете указать для каждого актива (или для всех '*'), какие атрибуты следует исключить из списка выбора.
{
"pages": {
"rules": {
"rules": {
"descriptors": {
"all": {
"excludeAssets": [
"TradfriLightAsset",
"TradfriPlugAsset",
"ArtnetLightAsset"
],
"assets": {
"*": {
"excludeAttributes": [
"location"
]
}
}
}
}
}
}
}
}
Карта – Карточка. Вы можете установить атрибуты для исключения (или включения) в верхней правой карточке карты при выборе объекта. Это можно сделать для всех типов активов (по умолчанию) или для каждого типа активов (как показано для WeatherAsset).
{
"pages": {
"map": {
"card": {
"default": {
"exclude": [
"notes"
]
},
"assetTypes": {
"WeatherAsset": {
"exclude": [
"location",
"notes",
"model",
"manufacturer"
]
}
}
}
}
}
}
Карта — конфигурация маркера: настраивает поведение маркеров. Они могут либо менять свой цвет в зависимости от значения атрибута (числового, логического или строкового), отображать метку с единицами измерения или без них и/или показывать направление, в котором обращен ресурс. Обратите внимание, что эта часть конфигурации еще не настроена в файле менеджер_config демонстрационной версии менеджера.
{
"pages": {
"map": {
"markers": {
"ElectricityProducerSolarAsset": {
"attributeName": "energyExportTotal",
"showLabel": true,
"showUnits": true,
"colours": {
"type": "range",
"ranges": [
{
"min": 0,
"colour": "39B54A"
},
{
"min": 50,
"colour": "F7931E"
},
{
"min": 80,
"colour": "C1272D"
}
]
}
}
}
}
}
}
Карта — конфигурация кластеризации: настраивает поведение кластеризации. Кластеризация гарантирует, что страница карты сможет плавно отображать ресурсы даже при наличии 40–50 тысяч ресурсов. Опцию кластеризации можно отключить или изменить на маркеры кластеров меньшего радиуса, показывающие больше кластеров, и изменить их на запуск кластеризации при определенном уровне масштабирования. Обратите внимание, что уменьшение радиуса кластера или максимального масштабирования кластера может повлиять на производительность. Рекомендуемый максимальный уровень масштабирования кластера — Максимальный уровень масштабирования области — 2.
{ "pages": { "map": { "clustering": { "cluster": true, "clusterRadius": 180, "clusterMaxZoom": 17 } } }}
Конфигурация «Карта — легенда». Определяет, какие типы активов отображаются в качестве маркеров на карте. Легенда включена по умолчанию, но ее можно отключить, установив для параметра show значение false.
{ "pages": { "map": { "legend": { "show": true } } }}
Карта — предустановленные фильтры. Здесь настраиваются предустановленные фильтры карты, которые добавляют
раскрывающийся список на страницу карты для быстрой фильтрации видимых ресурсов по типу, значениям атрибутов, области и
т. д. с помощью AssetQuery. Для каждого параметра фильтра отображается значок подсчета соответствующих активов. Опции
без label будут иметь автоматически создаваемую метку на основе имен типов и значений атрибутов. Выбранные фильтры
сохраняются при перезагрузке страницы (для каждого пользователя и области) и сбрасываются при каждом новом сеансе входа
в систему. Вы также можете указать необязательное логическое значение default или массив realms, чтобы ограничить
область применения фильтра. Обратите внимание, что неподдерживаемые поля запроса, такие как orderBy, limit и
offset, приведут к появлению предупреждения.
{
"pages": {
"map": {
"filters": [
{
"realms": [
"manufacturer"
],
"query": {
"types": [
"SoilSensorAsset"
]
}
},
{
"label": "CO2 > 100",
"realms": [
"smartcity"
],
"query": {
"types": [
"EnvironmentSensorAsset"
],
"attributes": {
"items": [
{
"name": {
"predicateType": "number",
"value": "ozoneLevel"
},
"value": {
"predicateType": "number",
"value": 100,
"operator": "GREATER_THAN"
}
}
]
}
}
},
{
"label": "Irrigation water flow > 10",
"realms": [
"manufacturer"
],
"query": {
"types": [
"IrrigationAsset"
],
"attributes": {
"items": [
{
"name": {
"predicateType": "number",
"value": "flowWater"
},
"value": {
"predicateType": "number",
"value": 10,
"operator": "GREATER_THAN"
}
}
]
}
}
}
]
}
}
}
Настройки карты
Если вы хотите настроить стиль карты. Вы можете изменить карту в настройках карты. Здесь у вас есть следующие варианты:
Метод
Описание
Когда использовать?
Тайловый сервер
Настройте сервер тайлов (обратите внимание, что этот параметр имеет приоритет над пользовательскими тайлами карты).
Если вы хотите использовать внешний сервер листов карты.
Пользовательские плитки карты
Загруженная карта будет использоваться вместо карты по умолчанию (подробнее см. в разделе «Работа с картами](local platform documentation)»).
Если у вас есть файл .mbtiles и вы хотите просмотреть другую часть мира.
Стиль URL-адреса JSON
Переопределите настройки карты по умолчанию с помощью URL-адреса style.json (например, https://api.example.com/maps/streets/style.json?key=your_key) от поставщика карт/плиток, который поддерживает MapLibre (см. providers).
Если вы хотите быстро настроить другую карту.
Слои карты
После настройки URL-адреса стиля JSON вы можете импортировать его, включив в него слои, позволяющие настроить стиль карты. При желании вы можете настроить URL-адрес сервера Tile (чтобы увидеть больше карты).
Если вы хотите иметь возможность редактировать стиль карты в OpenRemote, но также использовать внешнюю карту.
Настройка карты мира
Вы можете устанавливать границы, уровни масштабирования и центральные точки, а также добавлять точки, линии и формы на основе GeoJSON из файлов GeoJSON. Для создания файлов GeoJSON вы можете использовать, например. https://geojson.io/. Для поиска существующих слоев карты GeoJSON вы можете использовать https://overpass-turbo.eu/.
Если вы хотите изменить фокус карты или добавить слои карты для каждой области.
Пользовательское развертывание
Настройте карту с помощью пользовательских развертываний.
Если вам нужен полный контроль над конфигурациями сервера (расширенное использование).
Примечание
Платформа выбирает способ визуализации карты в следующем порядке: 1) Style JSON URL; 2) Import Style Settings и Realm Map Styling; 3) Upload Custom .mbtiles; 4) переменные среды платформы.
предупреждение
Не все поставщики карт/плиток полностью поддерживаются. Убедитесь, что поставщик поддерживает MapLibre (см. Поставщики MapLibre).
Были протестированы следующие серверы тайлов.
Поставщик
Поддерживается
Не поддерживается
Большинство стандартных карт можно импортировать.
Базовые карты
Протестировано классические стили Mapbox с использованием https://api.mapbox.com/styles/v1/mapbox/streets-v12?access_token=pk.ey....
Импортировать настройки
Все карты можно импортировать
Уведомление о лицензии: атрибуция документации OpenRemote