16 281
правка
Node-RED Dashboards: различия между версиями
с
(с) |
|||
| Строка 55: | Строка 55: | ||
#* switch → Status | #* switch → Status | ||
# Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | # Добавьте новую вкладку '''Tab 2''' и группу '''SVG'''. | ||
# В настройках группы укажите ширину 20. | |||
# В левой панели в группе '''dashboard''' найдите ноду '''SVG graphics''' и перетащите её в рабочую область. | # В левой панели в группе '''dashboard''' найдите ноду '''SVG graphics''' и перетащите её в рабочую область. | ||
# Дважды кликнете на добавленной ноде и настройте её: | # Дважды кликнете на добавленной ноде и настройте её: | ||
#* в поле '''Group''' выберите '''[Tab 2]SVG'''. | #* в поле '''Group''' выберите '''[Tab 2]SVG'''. | ||
#* на вкладке '''SVG''' | #* на вкладке '''SVG''' надо добавить код svg-изображения. | ||
Создадим изображение в Inkscape: | |||
# Откройте редактор и меню '''File''' → '''Document Properties'''. | |||
# Установите размер страницы, например, 800 x 600 px. | |||
# Добавьте серый круг, выберите его и откройте панель с параметрами объекта, меню '''Object''' → '''Object Properties'''. Справа откроется дополнительная панель. | |||
# В панели '''Object Properties''' в поле '''ID''' напишите имя элемента: buzzer-status. Это имя мы будем использовать при фильтрации событий и обращении к его свойствам. | |||
# Сохраните файл, откройте его в текстовом редакторе и скопируйте содержимое. | |||
Теперь вставьте код картинки в Node-RED: | |||
# Перейдите в настройки ноды '''SVG graphics''' и откройте вкладку '''SVG'''. | |||
# Удалите весь текст и вставьте скопированное раньше содержимое svg-файла. | |||
# Нажмите кнопку '''Done''' и '''Deploy'''. | |||
Снова перейдите на страницу с панелью, теперь там должно появиться меню, кликните на него и выберите '''Tab 2'''. | |||