node-red-contrib-uibuilder

ДОВІДНИК З NODE-RED українською мовою

node-red-contrib-uibuilder

https://github.com/TotallyInformation/node-red-contrib-uibuilder#node-red-contrib-uibuilder

Конструктор веб-інтерфейсу користувача Node-RED. uibuilder прагне надати простий у використанні спосіб створення динамічних веб-інтерфейсів за допомогою будь-яких (або без них) front end бібліотек для зручності.

Основні можливості та переваги:

Поточні обмеження такі:

uibuilder скоріше альтернатива Node-RED Dashboard. У той час як Dashboard розроблений для того, щоб створити дуже простий інтерфейс користувача, але він торгується з деякими обмеженнями, uibuilder розроблений, щоб дозволити вам робити все, що ви думаєте, з будь-якою структурою (або ні з якою), але у компроміс з тим, щоб написати свій власний front-end код.

uibuilder, як правило, також має бути на багато швидшим та ефективнішим у використанні ресурсів, ніж Dashboard, хоча це, очевидно, залежить від того, які інтернет-бібліотеки та фреймворки ви вирішите використовувати.

Зміст

1. Додаткова документація

У WIKI доступно набагато більше інформації. Крім того, у папці docs також є доступна додаткова технічна документація та документація для розробників, яка буде доступна щойно ви додасте uibuilder на палітру Node-RED, як веб-сайт документації за адресою <node-red-editor-url>/uibdocs. На панелі конфігурації є кнопка для цього. Ви також можете отримати доступ до цієї документації тут.

2. Getting Started

2.1. Install

To install the current live version, please use Node-RED’s Palette Manager.

NOTE: As of v3.1.3, npm cannot safely install the VueJS and bootstrap-vue default dependencies. If you want to use the provided VueJS templates, you must install these yourself. Either use uibuilder’s library manager or manually install from the command line:

#cd <userDir>
npm install vue@"2.*" bootstrap-vue@"2.*"

To install a specific uibuilder development or test branch from GitHub, use npm install TotallyInformation/node-red-contrib-uibuilder#<BRANCH-NAME> from the command line on the server, having first changed to the userDir folder (normally ~/.node-red). If you just want the main branch which contains the latest development build, you can do npm install TotallyInformation/node-red-contrib-uibuilder

To install a specific release from npm, use npm install node-red-contrib-uibuilder@<VERSION>. In addition to release versions (e.g. 1.2.2), you can also use latest and v1-last. Sometimes, next may also be available. Check out the Versions tab on the npm site for available versions.

NOTE: When installing uibuilder v2+, you may get a warning from the install:

npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself

It is safe to ignore that warning unless you want to take control of bootstrap yourself since vue-bootstrap doesn’t actually need it.

###

2.2. Простий потік

Після установки,

  1. додайте простий потік, що складається з trigger, uibuilder і вузла debug, всі з’єднані по порядку.
  2. Тоді розгорніть зміни
  3. двічі клацніть на вузлі uibuilder,
  4. клацніть URL-адресу веб-сторінки.

Це покаже вам просту сторінку, яка покаже вам відформатований вигляд будь-якого повідомлення, що надсилається з Node-RED у вузол. Для цього не потрібні додаткові бібліотеки або фреймворки, єдині залежності - це завантажити бібліотеку uibuilderfe.js, запустити бібліотеку за допомогою ` uibuilder.start() `, а потім створити прослуховувач для вхідних повідомлень.

2.3. Редагування ресурсних файлів

На панелі конфігурації вузла в редакторі натисніть “Edit Source Files”, щоб побачити інтерфейсний код. Внесіть деякі зміни, щоб побачити, що станеться.

Якщо вам потрібно більше місця для редактора, натисніть кнопку ⤡ під текстовим редактором. Щоб повернутися, натисніть ту саму кнопку (яка тепер виділена) або клавішу Esc.

Натисніть кнопку Save, щоб зберегти зміни, Reset щоб повернутися до збереженого файлу, Close, щоб вийти з редактора. Зверніть увагу, що кнопка закриття недоступна, поки є незавершені зміни, спочатку натисніть Save або Reset. Червона кнопка “Done” редактора також відключена, поки ще є незавершені зміни.

Ви можете створити новий файл та видалити файли та папки за допомогою відповідних кнопок. Якщо видалити один із файлів index.(html|css|js) за замовчуванням і встановити прапор Copy Index(у розширених налаштуваннях), файл буде автоматично замінено файлом шаблону за замовчуванням. Корисно, якщо ви потрапили в повний безлад.

2.4. Install additional front-end libraries

Click the “Manage front-end libraries” button. Then click the + add button and type in the name of the package as it is defined in npm.

You can also remove installed libraries from here.

The uibuilder Detailed Information API page (link in the configuration panel) shows details of all packages installed, their URL for your html pages and their physical location on the server (so that you can track down the right file to include in your HTML).

2.4.a Using VueJS

If you want to use the VueJS based templates, you will need to install vue and bootstrap-vue libraries.

The included VueJS, bootstrap and bootstrap-vue templates make for a really easy to use initial setup that is very easy to use but powerful to build any kind of web user interface. The template files should give you some ideas on how to use everything.

2.5. Additional Documentation

Check out the WIKI for more information, help and examples.

Also check out the technical documentation site. This is also available from within the Node-RED Editor by selecting a uibuilder node and clicking on the link in the help sidebar or by opening the configuration for a uibuilder node and clicking on the “Tech Docs” button.

back to top

3. Features

Ініціалізуйте бібліотеку за допомогою:

uibuilder.start()

Обробка вхідних повідомлень від Node-RED проста:

uibuilder.onChange('msg', function(msg){
    console.info('[uibuilder.onChange] property msg changed!', msg)
})

Надсилання повідомлення назад до Node-RED-це просто:

uibuilder.send( { 'topic': 'from-the-front', 'payload': 42 } )

    /** Custom settings for all uibuilder node instances */
    uibuilder: {
        /** Optional uibRoot folder. 
         * By default, uibuilder will use `<userDir>/uibuilder`
         * Use this setting to change that.
         */
        uibRoot: process.env.UIBROOT || '/where/i/want/it',
    },

Додатково у кореневій папці uibuilder створюється додаткова “загальна” папка (наприклад, ~/.node-red/uibuilder/common)

Це доступно для кожного екземпляра вузла і використовується для надання загальних ресурсів доступними для кількох веб-програм.

Перегляньте сторінку Шляхи URI у WIKI для отримання детальної інформації про всі URI, доступні для ваших веб-програм.

Ще краще, перегляньте деталі uibuilder та деталі екземпляра на панелі конфігурації uibuilder у редакторі Node-RED, вони покажуть сторінки з більш детальною інформацією.

4. Known Issues

Це те, про що слід знати, і я хотів би якось навести порядок.

5. Discussions and suggestions

The best place to ask questions about uibuilder is the Node-RED Forum.

Alternatively, use the GitHub issues log for raising issues or contributing suggestions and enhancements and the GitHub Discussions page for general questions, suggestions, etc.

Please note that I rarely have time to monitor the #uibuilder channel in Slack any more, it is best to use Discourse or raise an issue.

I do occasionally try to look out for uibuilder related questions on Stack Overflow but again, time does not always let me do this.

6. Contributing

If you would like to contribute to this node, you can contact Totally Information via GitHub or raise a request in the GitHub issues log.

Please refer to the contributing guidelines for more information.

7. Developers/Contributors

Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.