Node-RED:Библиотеки/node-red-dashboard - История изменений

EducationBot в 02:52, 24 мая 2023

2023-05-24T02:52:13Z

← Предыдущая версия		Версия от 06:52, 24 мая 2023
Строка 22:		Строка 22:
	Чтобы установить стабильную версию модуля, кликните в редакторе [[Node-RED]] на кнопку с тремя полосками справа вверху, затем на '''«Manage palette» > «Install»''', вбейте в поиске '''«node-red-dashboard»''', найдите модуль и кликните на кнопку '''«Install»'''. Также можно просто запустить в пользовательской директории [[Node-RED]] (как правило, это '''«~/.node-red»''') команду ниже:		Чтобы установить стабильную версию модуля, кликните в редакторе [[Node-RED]] на кнопку с тремя полосками справа вверху, затем на '''«Manage palette» > «Install»''', вбейте в поиске '''«node-red-dashboard»''', найдите модуль и кликните на кнопку '''«Install»'''. Также можно просто запустить в пользовательской директории [[Node-RED]] (как правило, это '''«~/.node-red»''') команду ниже:

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	npm i node-red-dashboard		npm i node-red-dashboard
	</syntaxhighlight>		</syntaxhighlight>
Строка 30:		Строка 30:
	Если вы хотите попробовать самую последнюю версию с [[GitHub]], то она устанавливается вот так:		Если вы хотите попробовать самую последнюю версию с [[GitHub]], то она устанавливается вот так:

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	npm i node-red/node-red-dashboard		npm i node-red/node-red-dashboard
	</syntaxhighlight>		</syntaxhighlight>
Строка 38:		Строка 38:
	По умолчанию [[URL-адрес]] панели управления задан относительно пути '''«httpRoot»''', но с приставкой '''«/ui»'''. Но это можно поменять в этом фрагменте файла '''«settings.js»''' [[Node-RED]]:		По умолчанию [[URL-адрес]] панели управления задан относительно пути '''«httpRoot»''', но с приставкой '''«/ui»'''. Но это можно поменять в этом фрагменте файла '''«settings.js»''' [[Node-RED]]:

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	ui: { path: "ui" },		ui: { path: "ui" },
	</syntaxhighlight>		</syntaxhighlight>
Строка 44:		Строка 44:
	Вы также можете добавить собственную Express-функцию промежуточной обработки, которая будет обрабатывать запросы при помощи вот этого свойства в '''«settings.js»''':		Вы также можете добавить собственную Express-функцию промежуточной обработки, которая будет обрабатывать запросы при помощи вот этого свойства в '''«settings.js»''':

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	ui: { middleware: ваша_функция }		ui: { middleware: ваша_функция }
	</syntaxhighlight>		</syntaxhighlight>
Строка 50:		Строка 50:
	Это может выглядеть, например, вот так:		Это может выглядеть, например, вот так:

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	ui: { path: 'ui', middleware: function (req, res, next) {		ui: { path: 'ui', middleware: function (req, res, next) {
	// Здесь делаем что-нибудь.		// Здесь делаем что-нибудь.
Строка 61:		Строка 61:
	Кроме того, панель управления можно настроить так, чтобы она была только для чтения:		Кроме того, панель управления можно настроить так, чтобы она была только для чтения:

	<syntaxhighlight lang="javascript~~" enclose="div~~">		<syntaxhighlight lang="javascript">
	ui: { readOnly: true }		ui: { readOnly: true }
	</syntaxhighlight>		</syntaxhighlight>
Строка 139:		Строка 139:
	* Date Picker – виджет для выбора даты. Формат показываемой даты можно выбрать в подвкладке '''«Site»''' при помощи библиотеки «[[Moment.js]]»		* Date Picker – виджет для выбора даты. Формат показываемой даты можно выбрать в подвкладке '''«Site»''' при помощи библиотеки «[[Moment.js]]»
	* '''Dropdown''' – виджет для выпадающего меню, пункты которого можно задать с помощью пар «ключ-значение». Эти пункты меню также можно задать в свойстве '''«msg.options»''', содержащем массив объектов. Если это просто текст, то значение будет таким же, как и название, но, если нужно, вы можете задать то и другое отдельно при помощи объекта с парой ''«ключ-значение»'':		* '''Dropdown''' – виджет для выпадающего меню, пункты которого можно задать с помощью пар «ключ-значение». Эти пункты меню также можно задать в свойстве '''«msg.options»''', содержащем массив объектов. Если это просто текст, то значение будет таким же, как и название, но, если нужно, вы можете задать то и другое отдельно при помощи объекта с парой ''«ключ-значение»'':
	::<syntaxhighlight lang="javascript~~" enclose="div~~">		::<syntaxhighlight lang="javascript">
	[ "Пункт 1", "Пункт 2", {"Пункт 3": 3} ]		[ "Пункт 1", "Пункт 2", {"Пункт 3": 3} ]
	</syntaxhighlight>		</syntaxhighlight>
Строка 153:		Строка 153:
	* '''Text input''' – виджет для ввода текста. Опционально можно задать название ('''«Label»'''). Кроме того, этот виджет может работать в режиме ввода пароля, электронной почты, выбора цвета и т.д.		* '''Text input''' – виджет для ввода текста. Опционально можно задать название ('''«Label»'''). Кроме того, этот виджет может работать в режиме ввода пароля, электронной почты, выбора цвета и т.д.
	* '''UI-Control''' – дает возможности для динамического управления панелью управления. Отправка '''«msg.payload»''' с номером (начиная с '''«0»''') или названием ('''«{"tab":"название_вкладки"}»''') вкладки выполнит переключение на эту вкладку. Кроме того, вкладки можно включать, выключать, прятать и снова показывать:		* '''UI-Control''' – дает возможности для динамического управления панелью управления. Отправка '''«msg.payload»''' с номером (начиная с '''«0»''') или названием ('''«{"tab":"название_вкладки"}»''') вкладки выполнит переключение на эту вкладку. Кроме того, вкладки можно включать, выключать, прятать и снова показывать:
	::<syntaxhighlight lang="javascript~~" enclose="div~~">		::<syntaxhighlight lang="javascript">
	{"tabs":{"hide":["название_вкладки_с_нижним_подчеркиваниями"],"show":["название_другой_вкладки"],"disable":["название_неиспользуемой_вкладки"]}}		{"tabs":{"hide":["название_вкладки_с_нижним_подчеркиваниями"],"show":["название_другой_вкладки"],"disable":["название_неиспользуемой_вкладки"]}}
	</syntaxhighlight>		</syntaxhighlight>
	:: Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:		:: Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:
	:: <syntaxhighlight lang="javascript~~" enclose="div~~">		:: <syntaxhighlight lang="javascript">
	{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}		{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}
	</syntaxhighlight>		</syntaxhighlight>
Строка 187:		Строка 187:
	== Разработка ==		== Разработка ==

	<syntaxhighlight lang="bash~~" enclose="div~~">		<syntaxhighlight lang="bash">
	cd ~\.node-red\node_modules		cd ~\.node-red\node_modules
	git clone https://github.com/node-red/node-red-dashboard.git		git clone https://github.com/node-red/node-red-dashboard.git
Строка 196:		Строка 196:
	Если у вас есть папка '''«dist»''', то плагин воспользуется ею. Если вы во время разработки хотите использовать неминимизированную версию, удалите эту папку. После внесения изменений во фронтэнд-код в папку «src» можно воспользоваться командой '''«gulp»''', чтобы обновить и пересобрать минимизированные файлы, а также обновить манифест [[Appcache]].		Если у вас есть папка '''«dist»''', то плагин воспользуется ею. Если вы во время разработки хотите использовать неминимизированную версию, удалите эту папку. После внесения изменений во фронтэнд-код в папку «src» можно воспользоваться командой '''«gulp»''', чтобы обновить и пересобрать минимизированные файлы, а также обновить манифест [[Appcache]].

	<syntaxhighlight lang="bash~~" enclose="div~~">		<syntaxhighlight lang="bash">
	gulp		gulp
	</syntaxhighlight>		</syntaxhighlight>
Строка 202:		Строка 202:
	Мы также предусмотрели проверку кода с помощью стилей '''«js»''' и '''«lint»''':		Мы также предусмотрели проверку кода с помощью стилей '''«js»''' и '''«lint»''':

	<syntaxhighlight lang="bash~~" enclose="div~~">		<syntaxhighlight lang="bash">
	gulp lint		gulp lint
	gulp jscs		gulp jscs

Myagkij: /* Внешние ссылки */

2022-05-06T14:48:24Z

Внешние ссылки

← Предыдущая версия		Версия от 18:48, 6 мая 2022
Строка 220:		Строка 220:

	<references />		<references />

	{{Навигационная таблица/Node-RED библиотеки}}		{{Навигационная таблица/Node-RED библиотеки}}
			{{Навигационная таблица/Телепорт}}
	[[Категория:Модуль node-red-dashboard]]		[[Категория:Модуль node-red-dashboard]]
	[[Категория:Модуль]]		[[Категория:Модуль]]

Myagkij в 17:47, 6 июня 2019

2019-06-06T17:47:21Z

← Предыдущая версия		Версия от 21:47, 6 июня 2019
Строка 227:		Строка 227:
	[[Категория:Модуль Node-RED]]		[[Категория:Модуль Node-RED]]
	[[Категория:Node-RED модуль]]		[[Категория:Node-RED модуль]]
			[[Категория:Apache-2.0]]
			[[Категория:Лицензия Apache-2.0]]
			[[Категория:Под лицензией Apache-2.0]]

Myagkij: /* Внешние ссылки */

2019-06-01T06:36:17Z

Внешние ссылки

← Предыдущая версия		Версия от 10:36, 1 июня 2019
Строка 224:		Строка 224:

	[[Категория:Модуль node-red-dashboard]]		[[Категория:Модуль node-red-dashboard]]
			[[Категория:Модуль]]
			[[Категория:Модуль Node-RED]]
			[[Категория:Node-RED модуль]]

Myagkij в 06:18, 1 июня 2019

2019-06-01T06:18:31Z

Внесённые изменения

Myagkij: /* Виджеты (ноды) */

2019-06-01T06:13:28Z

Виджеты (ноды)

← Предыдущая версия		Версия от 10:13, 1 июня 2019
Строка 157:		Строка 157:
	</syntaxhighlight>		</syntaxhighlight>
	:: Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:		:: Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:
	<syntaxhighlight lang="javascript" enclose="div">		:: <syntaxhighlight lang="javascript" enclose="div">
	{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}		{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}
	</syntaxhighlight>		</syntaxhighlight>

Myagkij: /* Виджеты (ноды) */

2019-06-01T06:12:46Z

Виджеты (ноды)

← Предыдущая версия		Версия от 10:12, 1 июня 2019
Строка 121:		Строка 121:
	Названия групп опциональны.		Названия групп опциональны.

	У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«{msg.topic&~~rcub~~; &~~rcub~~; »''', а значение – на '''«&~~lcub~~;&~~lcub~~;value \| number:1&~~rcub~~; &~~rcub~~; %»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.		У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«{{msg.topic}}»''', а значение – на '''«{{value \| number:1}}%»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.

	Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).		Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).

Myagkij: /* Виджеты (ноды) */

2019-06-01T06:12:07Z

Виджеты (ноды)

← Предыдущая версия		Версия от 10:12, 1 июня 2019
Строка 121:		Строка 121:
	Названия групп опциональны.		Названия групп опциональны.

	У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«&~~lcub;&lcub~~;msg.topic} } »''', а значение – на '''«{{value \| number:1} } %»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.		У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«{msg.topic} } »''', а значение – на '''«{{value \| number:1} } %»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.

	Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).		Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).

Myagkij: /* Виджеты (ноды) */

2019-06-01T06:11:00Z

Виджеты (ноды)

← Предыдущая версия		Версия от 10:11, 1 июня 2019
Строка 121:		Строка 121:
	Названия групп опциональны.		Названия групп опциональны.

	У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«{{msg.topic}}»''', а значение – на '''«{{value \| number:1}}%»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.		У большинства виджетов могут быть название и значение – если нужно, то и другое можно задать при помощи свойств входящего сообщения и модифицировать с помощью [[Angular-фильтр]]ов. Например, название можно задать на '''«{{msg.topic} } »''', а значение – на '''«{{value \| number:1} } %»''', чтобы округлить его до одного знака после запятой и поместить в конце знак '''«%»'''.

	Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).		Каждая нода может преобразовать значение в '''«msg.payload»''', чтобы оно получило подходящий формат для показа на панели управления. Преобразованная версия значения будет сохранена в переменную '''«value»''' (см. пример выше).

Myagkij в 06:09, 1 июня 2019

2019-06-01T06:09:32Z

← Предыдущая версия		Версия от 10:09, 1 июня 2019
Строка 139:		Строка 139:
	* Date Picker – виджет для выбора даты. Формат показываемой даты можно выбрать в подвкладке «Site» при помощи библиотеки «Moment.js»		* Date Picker – виджет для выбора даты. Формат показываемой даты можно выбрать в подвкладке «Site» при помощи библиотеки «Moment.js»
	* '''Dropdown''' – виджет для выпадающего меню, пункты которого можно задать с помощью пар «ключ-значение». Эти пункты меню также можно задать в свойстве «msg.options», содержащем массив объектов. Если это просто текст, то значение будет таким же, как и название, но, если нужно, вы можете задать то и другое отдельно при помощи объекта с парой «ключ-значение»:		* '''Dropdown''' – виджет для выпадающего меню, пункты которого можно задать с помощью пар «ключ-значение». Эти пункты меню также можно задать в свойстве «msg.options», содержащем массив объектов. Если это просто текст, то значение будет таким же, как и название, но, если нужно, вы можете задать то и другое отдельно при помощи объекта с парой «ключ-значение»:
			::<syntaxhighlight lang="javascript" enclose="div">
	[ "Пункт 1", "Пункт 2", {"Пункт 3": 3} ]		[ "Пункт 1", "Пункт 2", {"Пункт 3": 3} ]
	Если задать в «msg.payload» какое-либо значение, оно будет использовано как предустановленное значение для выпадающего списка.		</syntaxhighlight>
			:: Если задать в «msg.payload» какое-либо значение, оно будет использовано как предустановленное значение для выпадающего списка.
	* '''Form''' – это виджет, который может вместить в себя несколько под-виджетов. Позволяет ввести в поток несколько значений в виде одного сообщения		* '''Form''' – это виджет, который может вместить в себя несколько под-виджетов. Позволяет ввести в поток несколько значений в виде одного сообщения
	* '''Gauge''' – виджет для создания шкалы. Может работать в 4 режимах: Gauge (простая шкала), Donut («пончик» на 360 градусов), Compass и Level. В первых двух режимах можно задать цветовые диапазоны		* '''Gauge''' – виджет для создания шкалы. Может работать в 4 режимах: Gauge (простая шкала), Donut («пончик» на 360 градусов), Compass и Level. В первых двух режимах можно задать цветовые диапазоны
Строка 151:		Строка 153:
	* '''Text input''' – виджет для ввода текста. Опционально можно задать название («Label»). Кроме того, этот виджет может работать в режиме ввода пароля, электронной почты, выбора цвета и т.д.		* '''Text input''' – виджет для ввода текста. Опционально можно задать название («Label»). Кроме того, этот виджет может работать в режиме ввода пароля, электронной почты, выбора цвета и т.д.
	* '''UI-Control''' – дает возможности для динамического управления панелью управления. Отправка «msg.payload» с номером (начиная с «0») или названием («{"tab":"название_вкладки"}») вкладки выполнит переключение на эту вкладку. Кроме того, вкладки можно включать, выключать, прятать и снова показывать:		* '''UI-Control''' – дает возможности для динамического управления панелью управления. Отправка «msg.payload» с номером (начиная с «0») или названием («{"tab":"название_вкладки"}») вкладки выполнит переключение на эту вкладку. Кроме того, вкладки можно включать, выключать, прятать и снова показывать:
			::<syntaxhighlight lang="javascript" enclose="div">
	{"tabs":{"hide":["название_вкладки_с_нижним_подчеркиваниями"],"show":["название_другой_вкладки"],"disable":["название_неиспользуемой_вкладки"]}}		{"tabs":{"hide":["название_вкладки_с_нижним_подчеркиваниями"],"show":["название_другой_вкладки"],"disable":["название_неиспользуемой_вкладки"]}}
	Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:		</syntaxhighlight>
			:: Кроме того, группы можно прятать и делать видимыми с помощью сообщений вроде:
			<syntaxhighlight lang="javascript" enclose="div">
	{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}		{"group":{"hide":["название_вкладки_название_группы_с_нижними_подчеркиваниями"],"show":["название_вкладки_другая_группа"],"focus":true}}
	Кроме того, эта нода отправляет «msg.payload» при каждом подключении к браузеру и отключении от него, а также при каждой смене вкладки. Это можно использовать для активации других действий вроде сброса видимости вкладок и групп.		</syntaxhighlight>
			:: Кроме того, эта нода отправляет «msg.payload» при каждом подключении к браузеру и отключении от него, а также при каждой смене вкладки. Это можно использовать для активации других действий вроде сброса видимости вкладок и групп.

	'''Совет:''' Виджет «Text» поддерживает HTML, поэтому в нем также можно использовать FA-иконки, которые мы уже использовали для создания индикаторных виджетов.		'''Совет:''' Виджет «Text» поддерживает HTML, поэтому в нем также можно использовать FA-иконки, которые мы уже использовали для создания индикаторных виджетов.
Строка 181:		Строка 187:
	== Разработка ==		== Разработка ==

			<syntaxhighlight lang="bash" enclose="div">
	cd ~\.node-red\node_modules		cd ~\.node-red\node_modules
	git clone https://github.com/node-red/node-red-dashboard.git		git clone https://github.com/node-red/node-red-dashboard.git
	cd node-red-dashboard		cd node-red-dashboard
	npm install		npm install
			</syntaxhighlight>

	Если у вас есть папка «dist», то плагин воспользуется ею. Если вы во время разработки хотите использовать неминимизированную версию, удалите эту папку. После внесения изменений во фронтэнд-код в папку «src» можно воспользоваться командой «gulp», чтобы обновить и пересобрать минимизированные файлы, а также обновить манифест Appcache.		Если у вас есть папка «dist», то плагин воспользуется ею. Если вы во время разработки хотите использовать неминимизированную версию, удалите эту папку. После внесения изменений во фронтэнд-код в папку «src» можно воспользоваться командой «gulp», чтобы обновить и пересобрать минимизированные файлы, а также обновить манифест Appcache.

			<syntaxhighlight lang="bash" enclose="div">
	gulp		gulp
			</syntaxhighlight>

	Мы также предусмотрели проверку кода с помощью стилей «js» и «lint»:		Мы также предусмотрели проверку кода с помощью стилей «js» и «lint»:

			<syntaxhighlight lang="bash" enclose="div">
	gulp lint		gulp lint
	gulp jscs		gulp jscs
			</syntaxhighlight>

	Не добавляйте в отправляемый пулл-реквест минимизированные файлы «/dist».		Не добавляйте в отправляемый пулл-реквест минимизированные файлы «/dist».