Ui_builder how-to for new bees

[mandeepmails]

Hello Everyone,

First of all thank you for being part of such a great community. just to share there has been so many great examples and projects here that have helped me achieve my goals.

About this particular one i've checked a lot and been through wiki and articles, blogs, examples, that i guess need some above average background to begin with. now after spending weeks i would say with this particular one, i haven't been able to make a significant progress, so seeking any possible help here.

what all i could do so far
1-installed ui_builder onto my node-red Rpi.
2-installed libraries such as vuejs, moonjs, bootstrap_vue..etc
3-able to load those UI builder pages with blue tabs (intermittently)
4-tried to copy/paste those index.html, CSS, JS files...deploy...but didn't get anything.

so need some kind help
is there a simple step-by-step guide to use UI_Builder for new bees (without an software background). Other than this so far i'm able to do multiple projects and liking it more and more....just some how hoping to make UI compact and multi-functional.

[Steve-Mcl]

@mandeepmails

so need some kind help
is there a simple step-by-step guide to use UI_Builder for new bees

Start here. The dev has written extensive info that should help get you going.

As for a newbee to development - there are lots of vue and JS tutorials floating around the web that would do far more justice than a quick comment here.

hope that helps.

[mandeepmails]

Thanks Steve-Mcl,

I’ll kick this off right away and if something doesn’t make sense I’ll be back

[mandeepmails]

Now here is the thing. i know how weird it would sound but this is the example #1 followed by #2 and #3 where it's supposed to go.. i'm unable to understand this. it's just i'm getting lost, easily doesn't happen like this

is there a video or something that can show how to start with this guide.

should these all go here (see below)

or it will go here (see below)

[TotallyInformation]

UPDATE:

Sorry, forgetting my own code!! In the last release, I added a feature to change the default template. So when you add a new uibuilder node to your flow, you can now use the simple template instead of the slightly more complex default. That template is available as well in the examples as I mention below. The examples give you a whole flow but not the front-end code, the template gives you the front-end code but not the flow. If you are in a mess with your front-end code, simply delete the index.html and index.js files and uibuilder will recreate them from the chosen template when you redeploy.

---

It is "uibuilder" rather than "UiBuilder" or "UI_Builder", ...

@mandeepmails

installed libraries such as vuejs, moonjs, bootstrap_vue..etc

First thing to do is maybe just choose 1 framework. If you have never used a front-end framework before, I recommend sticking with the default VueJS and bootstrap-vue.

@mandeepmails

able to load those UI builder pages with blue tabs (intermittently)

Not quite sure what you mean here. "blue tabs"? "intermittently"?

Have you tried the examples that are included in the Node-RED library?

Though the default template should give you a good head start and let you see Vue/bootstrap in action. It lets you exchange information in both directions. Try the simple example after that so that you can see things without all the cruft.

There is no reason why they shouldn't be rock solid so if you are getting intermediate connectivity, then something is getting in the way. Check out both the Node-RED log and the browser console for errors.

@mandeepmails

tried to copy/paste those index.html, CSS, JS files...deploy...but didn't get anything

"nothing" - do you mean a blank, white screen or an error? If you ever get a white screen when working with a front-end framework, always check the browser console first (F12) and you should see an error. All of the Vue examples in the library and the WIKI should all work. Some of the other framework examples may be somewhat out of date as I don't have time to keep them current. Feel free to fix or to raise an issue if there is an error in any of them.

@mandeepmails

step-by-step guide

Hmm, well probably not. I guess I assumed that the only people using it would have at least a little web knowledge of HTML/CSS/JavaScript? I think you may struggle if you have none at all. You might want to find a quick web dev course online to get the basics.

Having said that, with some careful reading and thinking through the logic, even the default template should be understandable and the simple example should be even easier.

It is all fairly straight-forwards really. The uibuilder node extends the built-in Node-RED web server, making other libraries available to your front-end. It also creates a channel between node-red and your front-end. The uibuilderfe library is used in the front-end. It connects your front-end (browser) code to the back-end (Node-RED). It lets you run processes when a message is received, lets you easily send a message. That's about it at a basic level. It does lots of other things as well if you want but that's about all you need in order to get going.

Everything else is about knowing how to use your chosen front-end framework. I chose VueJS because, unlike many frameworks, it doesn't force you to have a back-end build step before you can use changed code. Change the code on the server and reload the page, job done.

Understanding something like Vue is a separate task. But the basics are simple enough. Vue builds an in-memory model of your page (as defined by your HTML). That model is embodied in the Vue app (JavaScript). So you simply connect uibuilder to Vue (the uibuilder.start() function). Then, for an incoming message from node-red, you update a variable in the Vue app (the uibuilder.onChange('msg', ...) function). Assuming that you have made a link from that Vue variable to your HTML, when the variable's value changes, Vue updates the web page for you.

@mandeepmails

make UI compact and multi-functional.

Bootstrap-vue gives you some really nice "components". These are higher functions for Vue that embody both visuals and code. You add an instance of the component to your HTML and link the settings to vue app variables. As the variables values change, the page changes. And/or, as a user changes input (like the switches shown) on the ui, you link the HTML for that component to a vue function (a "method") in the app. The method can simply call the uibuilder.send() function. The parameter for the send function is the same as using the node.send() function in Node-RED. Basically an object defining the content of the msg such as {topic:"my topic", payload:"wow!"}.

@mandeepmails

is there a video or something that can show how to start with this guide.

I'm afraid that I've never got round to doing videos.

The technical docs that Steve pointed you at show you examples of each of the different types of parameters you can pass - mostly, you won't need that. Familiarise yourself with the default template and the simple example and you will see exactly where those things go. But then those templates already include what you are pointing to in their code.

@mandeepmails

should these all go here (see below)

Yes, that is your front-end code - remember, it runs in the browser and not in Node-RED.

@mandeepmails

or it will go here (see below)

No, that is part of Node-RED and defines a lot of the internal settings for Node-RED itself.

[mandeepmails]

Thanks Julian,

I trully appreciate your guidance on this. Yes i don't have any experience with HTML or CSS at all. professionally i do telecom voice over ip

@TotallyInformation

Have you tried the examples that are included in the Node-RED library?

my apologies this section i missed, though i saw it everywhere in other posts you and others telling about referring to these examples.

few questions
currently my flow looks like this, and i'm just trying to be sure the uibuilder connects properly, is this correct ?

[{"id":"ea6c8b26.1ac2c","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"f11ba73d.4b8a38","type":"ui_switch","z":"ea6c8b26.1ac2c","name":"","label":"Cieling Light","tooltip":"","group":"1faa3392.5a688c","order":1,"width":"0","height":"0","passthru":true,"decouple":"false","topic":"stat/MONU_BEDROOM/POWER3","topicType":"str","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","animate":false,"x":250,"y":220,"wires":[["7a7d3248.f610a4"]]},{"id":"7a7d3248.f610a4","type":"mqtt out","z":"ea6c8b26.1ac2c","name":"Cieling Light","topic":"cmnd/MONU_BEDROOM/POWER3","qos":"","retain":"","broker":"65920be5.ce01fc","x":450,"y":240,"wires":[]},{"id":"e65d0ae3.4c2308","type":"homekit-service","z":"ea6c8b26.1ac2c","isParent":true,"bridge":"ad59e6e7.f2fb48","parentService":"","name":"Cieling Light","serviceName":"Lightbulb","topic":"cmnd/MONU_BEDROOM/POWER3","filter":false,"manufacturer":"NRCHKB","model":"1.2.0","serialNo":"Default Serial Number","firmwareRev":"1.2.0","hardwareRev":"1.2.0","softwareRev":"1.2.0","cameraConfigVideoProcessor":"ffmpeg","cameraConfigSource":"","cameraConfigStillImageSource":"","cameraConfigMaxStreams":2,"cameraConfigMaxWidth":1280,"cameraConfigMaxHeight":720,"cameraConfigMaxFPS":10,"cameraConfigMaxBitrate":300,"cameraConfigVideoCodec":"libx264","cameraConfigAudioCodec":"libfdk_aac","cameraConfigAudio":false,"cameraConfigPacketSize":1316,"cameraConfigVerticalFlip":false,"cameraConfigHorizontalFlip":false,"cameraConfigMapVideo":"0:0","cameraConfigMapAudio":"0:1","cameraConfigVideoFilter":"scale=1280:720","cameraConfigAdditionalCommandLine":"-tune zerolatency","cameraConfigDebug":false,"cameraConfigSnapshotOutput":"disabled","cameraConfigInterfaceName":"","characteristicProperties":"{}","waitForSetupMsg":false,"outputs":2,"x":150,"y":260,"wires":[["848f93be.889be8"],["848f93be.889be8"]]},{"id":"848f93be.889be8","type":"function","z":"ea6c8b26.1ac2c","name":"","func":"msg.payload = msg.payload.On;\nif(msg.payload === true){ msg.payload = 'On' } \nelse{msg.payload = 'Off' }\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":260,"wires":[["7a7d3248.f610a4"]]},{"id":"2db97dc6.66418a","type":"uibuilder","z":"ea6c8b26.1ac2c","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"x":240,"y":140,"wires":[["7a7d3248.f610a4"],["7a7d3248.f610a4"]]},{"id":"1faa3392.5a688c","type":"ui_group","name":"MONU_BEDROOM","tab":"1bc662fc.db955d","order":1,"disp":true,"width":"6","collapse":true},{"id":"65920be5.ce01fc","type":"mqtt-broker","name":"pi0","broker":"192.168.1.2","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"ad59e6e7.f2fb48","type":"homekit-bridge","bridgeName":"Cieling Light","pinCode":"111-11-130","port":"","allowInsecureRequest":false,"manufacturer":"NRCHKB","model":"1.2.0","serialNo":"Default Serial Number","firmwareRev":"1.2.0","hardwareRev":"1.2.0","softwareRev":"1.2.0","customMdnsConfig":false,"mdnsMulticast":true,"mdnsInterface":"","mdnsPort":"","mdnsIp":"","mdnsTtl":"","mdnsLoopback":true,"mdnsReuseAddr":true,"allowMessagePassthrough":true},{"id":"1bc662fc.db955d","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[TotallyInformation]

@mandeepmails

currently my flow looks like this, and i'm just trying to be sure the uibuilder connects properly, is this correct ?

You probably don't want to connect uibuilder's control output (the lower one) to your light? Control outputs say when a new client connects, disconnects or sends logon/logoff notifications.

In addition, you will want an input to uibuilder so that if one of the other 2 methods of controlling the light changes the setting, you update the uibuilder interface accordingly. Just connecting an mqtt-in node and using the onChange function might be enough but you could still end up with the UI out of step until a change happens. This would be in the case that a new client connects (or someone reloads the page), now uibuilder would show the default setting of the switch but that might not be what the switch is actually set to.

It would be better to put a change node in front of your mqtt-out and in it save the light swtich state to a variable. Then connect the control output of uibuilder to a function node in front of uibuilder and set it up such that when a new client connects (or existing one reloads), the function reads the status and sends it to your UI. You can use the caching example to give you much of the logic for the function node.

For my own home automation dashboard, I keep a wide range of lighting and heating settings and current readings in both a retained global variable AND in retained MQTT messages so that I get the maximum flexibility. MQTT is great for updates, the variable good for logic.

[mandeepmails]

@TotallyInformation

For my own home automation dashboard, I keep a wide range of lighting and heating settings and current readings in both a retained global variable AND in retained MQTT messages so that I get the maximum flexibility. MQTT is great for updates, the variable good for logic.

Julian,

i'm trying my best to go through your suggestions still. And, definitely you pointed out the other concerns i had when i used other integrations from time to time. these flaws with my flow look unprofessional and unreal.but i guess it's common mud for all beginners.

i would appreciate a ton if i can get a glimpse of your running flows.

everybody loves mqtt not only me

[TotallyInformation]

@mandeepmails

i would appreciate a ton if i can get a glimpse of your running flows

Not really very easy to share as they are specific to my own configuration but here are some teasing screenshots to give you some idea of a small part of my flows.

[mandeepmails]

well, this is definitely tempting and a lot more sensible.

strange though i don't see the uibuilder

[TotallyInformation]

It's there all right. I've shared some of that previously. Some of it is in the process of being redesigned but I sidetracked myself when I started playing with ESPHome and then put it onto my M5Stack Basic.