16 281
правка
Node-RED Dashboards: различия между версиями
→Создание панели с виджетами
| Строка 29: | Строка 29: | ||
== Создание панели с виджетами == | == Создание панели с виджетами == | ||
[[Image: bode-red-dashboard-widjets.png |300px|thumb|right| Панель | [[Image: bode-red-dashboard-widjets.png |300px|thumb|right| Панель с виджетами]] | ||
Панель с типовыми виджетами — это быстрый способ получить несложный интерфейс, который закроет большинство потребностей. Притом, интерфейс получается адаптивный, то есть при нехватке места по горизонтали, группы располагаются друг под другом. | Панель с типовыми виджетами — это быстрый способ получить несложный интерфейс, который закроет большинство потребностей. Притом, интерфейс получается адаптивный, то есть при нехватке места по горизонтали, группы располагаются друг под другом. | ||
Создадим панель, на которую поместим элементы управления зуммером контроллера: | Создадим панель, на которую поместим элементы управления зуммером контроллера: | ||
# Перейдите в веб-интерфейс Node-RED. | # Перейдите в веб-интерфейс Node-RED. | ||
# В правом верхнем углу нажмите на треугольничек и выберите '''Dashboard'''. | # В правом верхнем углу нажмите на треугольничек и выберите инструмент '''Dashboard'''. | ||
# | # В '''Layout''' добавьте новую вкладку, а в ней — группу. | ||
# В левой панели в группе '''dashboard''' найдите ноды '''switch''' и '''slider''' и перетащите их в рабочую область. | # В левой панели в группе '''dashboard''' найдите ноды '''switch''' и '''slider''' и перетащите их в рабочую область. | ||
# По очереди дважды кликните на добавленных нодах, проверьте, что выбрана верная группа ''Group 1'': | # По очереди дважды кликните на добавленных нодах, проверьте, что выбрана верная группа ''Group 1'': | ||
| Строка 53: | Строка 53: | ||
Теперь в инструменте '''dashboard''' → '''Layout''' нажмите на кнопку со стрелочкой, откроется новая страница с нашей панелью. | Теперь в инструменте '''dashboard''' → '''Layout''' нажмите на кнопку со стрелочкой, откроется новая страница с нашей панелью. | ||
<gallery mode="packed" heights="150px" caption="Создание панели с виджетами"> | |||
Image: node-red-widjets-dash-1.png | Инструмент dashboard | |||
Image: node-red-widjets-dash-2.png | Нода switch | |||
Image: node-red-widjets-dash-3.png | Нода slider | |||
Image: node-red-widjets-dash-4.png | Запуск демонстрации | |||
</gallery> | |||
== Создание svg-панели == | == Создание svg-панели == | ||