-
-
Notifications
You must be signed in to change notification settings - Fork 86
Home
Confused? Don't worry, that is my poor writing style not you!
The uibuilder Documentation (also available within Node-RED) now contains the most up-to-date information on how to configure and use uibuilder. Some of the entries in the WIKI now take you there. The WIKI is now mostly used to allow people to record how-to entries for specific frameworks or to provide cookbook entries or links to interesting uibuilder-related articles/sites.
Don't forget to check the example flows included when you install uibuilder. They are available from Node-RED's import menu.
Update 2022-06-25:
If you are using VueJS, please take note that the Vue project decided to switch from v2 as the default to v3. This has caused considerable confusion and mayhem since most supporting projects were nowhere near ready for the change. Notably, bootstrap-vue which is in some of the uibuilder examples still only supports Vue v2 as does http-vue-loader (vue3-sfc-loader is an alternative for the latter).
My own preferences recently have been to move away from frameworks or at least to choose ones that use modern browser features and standards such as web components. I get too fed up of having to rewrite code every couple of years just because the framework has completely changed.
PLEASE CHECK WHETHER WIKI ARTICLES ARE STILL VALID FOR CURRENT VERSIONS OF THE FRAMEWORK AND FOR CURRENT UIBUILDER VERSIONS. Thanks. Also, please feel free to update old WIKI articles and bring them up-to-date.
Update 2022-01-19:
Refer to the Tech Docs (also available within Node-RED) for more information and help. Much of the general information in the WIKI (such as the To Do) is being moved to the tech docs and they are more likely to be up-to-date.
Please note that some of the WIKI content is rather out-of-date. Some of the examples don't get updated unless someone shouts or provides an update (which anyone can do). Also don't forget that the tech docs have been greatly expanded in the last year or so. The live version of them is available here on GitHub pages - that may not reflect the version of uibuilder you have installed though. The version that matches your installation is available from within Node-RED. My intent is to move anything in the WIKI that relates specifically to the configuration of uibuilder and using it in flows into the tech docs. Examples of use with different frameworks will stay here on the WIKI. Though some examples may be turned into external templates now that you can use an accessible Git repository as a template.
Rest assured that uibuilder is still very much in active development. Do check to see if there is a vNext
branch in the code here on GitHub because that is the branch that is mostly used for the next major release if it is in a reasonably usable state. Sometimes I will also publish a vNext
release to npm as well and that version can be treated as a pre-release version for beta testing.
This library makes it very easy to create any number of different web applications from Node-RED.
uibuilder is designed to complement Node-RED's own "Dashboard". Dashboard is very easy to start building a web interface but you may eventually discover the limitations that come from it being a complex wrapper around the front-end library "Angular". You can only create a single web application in Dashboard. Although it lets you create multiple "pages", these are all loaded whenever you access any of them and this can be slow and memory intensive.
uibuilder doesn't have the nice friendly components that Dashboard has but it is much lighter in weight and complexity and is a lot more flexible.
uibuilder endeavours to minimise the amount of boilerplate coding you have to do. But it still lets you work with your familiar web design tools while giving you access to the power and simplicity of Node-RED as your back-end server.
Each application is coded by you (or a friendly coder) using standard tools. The HTML, CSS and JavaScript for the application resides in the home folder of the device running Node-RED (typically ~/.node-red
).
Each of those applications can use any front-end (e.g. client/browser) design and code you like and you can easily add front-end libraries. Or, for simple things, just use the provided JQuery library to dynamically display information passed from Node-RED.
Each application is given a communications "socket" that lets you very easily send and receive information between the Node-RED server and the application client (in the browser). It uses the same message format that you use in Node-RED itself. In the front-end, the uibuilder library gives you the ability to track when a new msg
is received so you (or your chosen front-end library) can do something with it.
See the Getting Started page in this WIKI.
There are a set of technical documents included in the code. You can also access these from the uibuilder help panel or a uibuilder node instance in the Editor.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)