11/2/2022 0 Comments Web user interface builder![]() ![]() Web user interface builder code#You cannot yet compile/compress your custom front-end code (HMTL, JS, SCSS, etc.) for efficiency. Unless module authors correctly identify the browser entrypoint for their libraries, uibuilder can only guess. Note that this is a limitation of npm and module authors, not of uibuilder. There is now also a simplified information page for the currently viewed uibuilder node instance, this is access from a button in the configuration panel. The uibindex admin API (accessible from any node's admin ui) shows you all of the root folders and what the package authors report as the main entry point for all active packages. You have to know the front-end library locations for installed libraries and edit your HTML accordingly. I hope to have a component design available at some point which will give additional options and make the UI building easier. You have to write your own HTML, uibuilder doesn't (yet) do it for you. (Will soon gain ability to its own on a separate port if desired). Uses Node-RED's own webservers by default.Two detailed admin info web pages are included to help authors understand where everything is and what is available.Optional index web page listing of available files.VueJS, MoonJS extended and caching example flows included.Needs almost no boilerplate in your front-end code in order to work.Auto-reload your clients on changes to the code. Edit your custom front-end code from within the Node-RED Editor, little to no need for access to the server's filing system.Write your own HTML, CSS and JavaScript to define the perfect front-end user interface for your needs.The included front-end library (uibuilderfe) provides connectivity to Node-RED and msg event handling.Use without any front-end framework if you like. ![]() Web user interface builder install#Simply install via the built-in library manager. Tested with at least JQuery, VueJS, MoonJS, REACT, UmbrellaJS and Riot. Makes them available via the built-in Node-RED web server: vue, bootstrap, bootstrap-vue, Svelte, jquery, moonjs, reactjs, riot, angular, picnic, umbrellajs (note this list may expand). Finds these front-end framework packages automatically if installed to your userDir folder.Can be a lot lighter in weight and more mobile friendly than the Node-RED official Dashboard.Know when a browser connects or disconnects, send cached data. Has a control interface separate to the message interface.Use link nodes to send data from other parts of your flows. Just 1 node is needed for each entry point. Have as many custom user interfaces as you want.Makes it easy to share templates that provide a whole app or just deal with boilerplate. Load templates from other repositories via degit. ![]() Internal templates for VueJS and bootstrap-vue available. No need to access the servers command line. Edit your front-end resource files, manage front-end packages.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |