Transition from Dashboard to UIbuilder

[tmichaeltx]

I have been reading about different dashboard options and have just about concluded that I want the inherent flexibility of using UIbuilder instead of Dashboard. I recognize the UIbuilder offers great power through Vue, Angular, React, etc. I am preparing to work my way through the Getting Started steps, but wanted to do a little expectation setting for myself.

I have a few items that I am showing through dashboard using template nodes. They are generally pretty basic (specifically colored buttons that flash when selected, etc.). Is it likely that it will be easy enough to move them over with minimal adaptation or will I have to really understand one of Vue, Angular, React, etc before I can even get started with these simple items that are basically CSS and HTML?

If the answer is finish the getting started portion and then I will understand the answer then I apologize for taking up your time when I could just RTM.

[bakman2]

or will I have to really understand one of Vue, Angular, React, etc before I can even get started

No you dont have to.

The idea of ui-builder is that you can choose, ui-builder provides an interface to/from node-red and how you want to use that is up to you. I have made some very basic templates to get started with vanilla javascript or vuejs.

[TotallyInformation]

You will need to know a little more about HMTL, CSS and your chosen framework than when getting started with Dashboard. You will find however, that by the time you've started trying to do complex things with Dashboard, the level of knowledge required evens out.

If you have never used any framework before, I would recommend either sticking with the default VueJS/bootstrap-vue or going with jQuery.

jQuery is a lot easier to start with if you already have some programming knowledge. Vue is much better if you want to get the most responsive data-driven UI with minimal boilerplate. Vue has a slightly higher learning curve.

Vue will let you easily change button colours and even animate the change.

Angular is really only useful if you are part of a large team creating a really complex UI. REACT falls somewhere in the middle.

One advantage of both jQuery and Vue over the others is that you are much less likely to need a build step.

[tmichaeltx]

Thanks for the feedback. I thought that was the case, but since I was already teaching myself what I needed to know about HTML and CSS to use the template nodes, I was hoping that I didn't have to learn much more to do the basic things I had in mind.

It seems that once I get it set up the main difference is that

 console.info(' property msg changed!', msg)

in dashboard temple node will become

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

and

ng-click="send({payload: 'on', room: 'game'}

will become

uibuilder.send( {payload: 'on', room: 'game'})

[TotallyInformation]

@tmichaeltx

since I was already teaching myself what I needed to know about HTML and CSS to use the template nodes, I was hoping that I didn't have to learn much more to do the basic things I had in mind.

You won't need to know that much more. Though if you decide to use Vue, there will be a small learning curve for that as well.

@tmichaeltx

console.info

Sort of, though your Dashboard example would need to be a lot more complex to be equivalent to the uibuilder version. The uibuilder version runs in the browser and the function is triggered whenever a msg is received from Node-RED via the uibuilder node. In the ui_template example, to be really equivalent, you would need to include a watch function. There is an example somewhere on my blog or in the Node-RED Cookbook.

@tmichaeltx

ng-click

Not quite. That part belongs in the HTML whereas your uibuilder example belongs in the JavaScript. You will still need to trigger the uibuilder.send from a function. The default template has the example already coded though and you can easily adapt it.

[tmichaeltx]

I am good at cutting/pasting/modifying, so it sounds like this is the right path for my needs. Of course the responsiveness of everyone in the forum has made node red a great environment. I am sure I will be able to get help if needed unless I am doing something truly bizarre.

[TotallyInformation]

@tmichaeltx

unless I am doing something truly bizarre

Actually, you may get even more help then

[tmichaeltx]

When building inside UIbuilder, have people had experiences that definitively use Font Awesome 4.x or 5.x or whichever has what you need? I am planning to only use free icons either way.

[TotallyInformation]

Personally, I tend to go grab the SVG versions of what I want and just use those. I don't need to use the font or library versions typically. That lets me just add the images I want into the uibuilder instance src folder (or a sub-folder if you prefer). You could also use the shared folder or even Node-RED's static folder, any would work since you are only loading a simple image file.

If you do want to use the font or library versions, you can either load via a CDN or use uibuilder's library manager to install it from npm.