UIBuilder: a cookbook OR hand-holding thread?

General
1

Hi @TotallyInformation and any others interested

(Warning: very discursive style of post coming up)

I've spent some of the weekend reading all the documentation around UIBuilder;

as well as dipping into some blogs and documentation around Bootstratp-Vue such as;

Having spent some initial time reading about Bootstrap-Vue I can see how, if I were to make my own dashboard from scratch, this would definitely be my choice of framework.

You know how sometimes you approach the documentation and you can see it's definitely all there, but when you are new to something, it all seems inaccessible until you make something yourself, then you can start re-looking at it, and it starts to make sense? I'm finding this especially true in this case.

I have tried to reverse engineer the built-in example by removing bits of code and trying to add new bits, but essentially Vue seems like something where you have to understand quite a bit before you get started, for example I've read loads already about Methods, Computed, and Watchers, and I still have no real clue about what these things are. Thus it's not easy to just dip-in and make something quick.

(I don't wish to blame my lack of knowledge on others here. I note Julian's preface to the wiki "Confused? Don't worry, that is my poor writing style not you!"... I disagree - it's definitely me :slight_smile: )

I was excited to see the "Issue #57" post on GitHub as I thought this would give me a really pared-back example of data-in and data-out, but somewhat let-down because it used the exact same example as the default / built-in example, but with a different input node in Node-RED. (Again, this is NOT meant in any way as negative criticism - frankly I'll read anything I can and benefit from it!)

I guess I'm looking for either one of the following:

  • OPTION 1: A Cookbook. To guide me through some common things I would want to do. For example, replicating many of the components of Node-RED's own dashboard. I really liked @TotallyInformation's blog post "Node RED Dashboard Template Examples" and have probably visited this page about 30 times to remind myself of things! So something like that, but for UIBuilder. We could start with this post from @TotallyInformation, but instead make it a fully self-contained / downloadable example. When I tried to make a uibuilder instance based on the code there, it wouldn't display anything presumably because I didn't have the correct inputs.

  • OPTION 2: A thread on here. To guide me through various things I'd like to do myself. I have a lot of ideas that I'd like to implement myself, which I also think could be generalised to be relevant to anyone putting together a more advanced home automation system. I would start with a dashboard UI template, with b-dropdown at the top left (like Node-RED Dashboard's hamburger) containing all pages (each page a "zone" or "area" in the house). Then I would have tabs across the top for sub-pages (light, audio, heat, etc.) Finally I'd have elements that relate to objects in context, for example a button group that automatically generates buttons based on the number of objects in context, sliders that do the same, etc.

Either way I think I need some hand-holding because I have found everything I've read so far a little inaccessible. I am also aware this might relate to Vue more than it does to Node-RED or even UIBuilder.

So how about it, I know it's a big ask, but does anyone have a little time to help me get started myself, I can lead the discussion and am happy to put a little time into documenting stuff in a formal way if the community sees this as beneficial?

1 Like
2

I have tried to reverse engineer the built-in example by removing bits of code and trying to add new bits

Same here, which was the initial reason why i requested minimal examples. There is just too much information which does not paint a clear picture to me.

I work from this "template".

Then to understand how to apply the computes/watchers/methods I would recommend this crash course from traversy media on youtube (great teacher for many types for frameworks and languages), it will clear up some concepts.

1 Like
3

That blank template is really useful and exactly what I was looking for. I have started to watch that YouTube vid as well.

  • in the YouTube vid, am I right in saying I can gloss over the introduction to the CLI and state management, as these two aren’t relevant here?

  • What about the multiple .vue files in his video (components)? UIBuilder seems to have one index.html, index.js, and index.css (if I recall correctly) - should a UIBuilder application have multiple .vue files as well, e.g. a more fully fledged application such as a home dashboard?

4

Hi Mat, this is the "simple" example:

image
image825Ă—273 24 KB

While this looks more complex as a flow, the VueJS part should be a lot easier to follow. Just to check - you have replaced the default template code with the code provided in the 3 comments? Because the front-end code in this example is a LOT simpler than the default.

Here is the actual HMTL

    <!-- The "app" element is where the code for dynamic updates is attached -->
	<div id="app">
	    <h1>A simple uibuilder page</h1>
	    <p>
	        The elements below are dynamically updated when you send
	        a msg to your uibuilder node.
	    </p>
	    
	    <div v-if="msg.payload">
	        <h2>Quote of the Day</h2>
	        <blockquote>
	            <i>{{ msg.payload.quote.body }}</i>
    	        <div>{{ msg.payload.quote.author }}</div>
	        </blockquote>
	    </div>
	    
	    <h2>The full msg object</h2>
		<code>{{ msg }}</code>
		
	</div>

And here is the JavaScript

var app1 = new Vue({
    // The HTML element to attach to
	el: '#app',
	/** Pre-defined data
	 *  Anything defined here can be used in the HTML
	 *  if you update it, the HTML will automatically update
	 */
	data: {
		msg: '[Nothing Recieved Yet]',
	},

    // This is called when Vue is fully loaded
	mounted: function() {
	    // Start up uibuilder
		uibuilder.start()
		
		// Keep a convenient reference to the Vue app
		var vueApp = this

        /** Triggered when the node on the Node-RED server
         *  recieves a (non-control) msg
         */
		uibuilder.onChange('msg', function(msg) {
			vueApp.msg = msg
		})
	},
	
}) // --- End of the Vue app definition --- //

Hopefully you can see that there is hardly any required boilerplate in either file.

The HTML is nearly all standard html with a couple of mustache entries for dynamic data. Apart from the v-if the rest is pretty well identical to what you would use in a Node-RED template node.

The Javascript has a single Vue data variable defined - this is responsive in that if you updated it, the web page will automatically change accordingly. The mounted function is used in a similar way to waiting for the document to fully load in jQuery. It just means that VueJS has done its stuff and is open for business.

You could also write that function like this for even more simplicity if you wanted to:

	mounted: function() {
		uibuilder.start()
		
		uibuilder.onChange('msg', function(msg) {
			app1.msg = msg
		})
	},

Or if you only care about ES6 capable browsers:

	mounted: function() {
		uibuilder.start()
		
		uibuilder.onChange('msg', (msg) => {
			this.msg = msg
		})
	},

Yes, I like that idea and I want to move things out of the WIKI into a proper uibuilder site, that would make the examples in the WIKI more discoverable. At the moment, the WIKI is the cookbook.

Hmm, well you've chosen a difficult one. The problem with that example and the reason it does not appear in the WIKI is that the data is terribly complex and rather specific to my own home configuration.

Better examples are the various Chart examples you will find in the WIKI.

However, I'm also working (ish) on a better editable table example that will use a more reasonable data structure. General-purpose table layouts are fiendishly hard to do in any language. Bootstrap-vue has one of the best components I've come across for making it as easy as possible - however, they don't give any examples for doing editing.

Ultimately, I have started another Node.js module that will contain a set of VueJS/bootstrap-vue components that will support complex outputs with uibuilder. You will find the early code in GitHub. I think that the working version of the SVG component is in it at the moment.

I would be more than happy to see a new WIKI page created that starts a list of ideas that might need/want some supporting knowledge. You can actually do that yourself - I think that I left the WIKI open, if not, I just need to add you as a contributor which I'd be more than happy to do based on this thread.

In fact, let me go do that in a second and I will add your first 2 ideas to it.

However, I will say that things such as:

are standard for Vue/bootstrap-vue - I'm happy to have them there but uibuilder is first and foremost a tool to allow people to use other frameworks to build UI's. It isn't ever going to try and compete with Dashboard and make everything super simple because that would end up with uibuilder being as limited as Dashboard. There is an assumption here that you will learn your chosen framework. I also don't really want the WIKI becoming a Vue/bootstrap tutorial site since there are plenty of those already.

Of course. Happy to do so as best I can. Let's start with the simple example though and work through that. Then let's make sure that we capture your learning in a way that others can benefit from. We can use the WIKI for that at the moment and then translate the WIKI to something better later on.

1 Like
5

What about the multiple .vue files in his video (components)? UIBuilder seems to have one index.html, index.js, and index.css (if I recall correctly) - should a UIBuilder application have multiple .vue files as well, e.g. a more fully fledged application such as a home dashboard?

To load them dynamically add to the bottom of index.html:

<script src="https://unpkg.com/http-vue-loader"></script>

In the index.js you can use:

...
var app1 = new Vue({
    el: '#app',
    components: {
        'component': httpVueLoader('my-component.vue'),
    },
...

where my-component.vue is the vue files as shown in the video.
in index.html you will then need to add the <component></component> tag to use it.

@TotallyInformation tbh to encapsulate a template in a flow does not make it simple to me, must be a personal thing. Same applies to all the comments in the code, makes it hard and confusing to read for me.

6

Yes, that is the same as the "simple" example pretty much. And the same as you will see in my other response to Mat.

I agree that using a course is a good place to start.

Overall, many people won't even need to worry about much of that stuff anyway. Vue rarely needs watchers but computes and methods are useful.

Once you've mastered the basics, components are the next thing to learn about.

Yes you can. They aren't especially relevant until you get into more complex UI's. I do my best to steer you away from those until you are ready. However, you should remember the concepts as many examples and tutorials about Vue assume you are using the CLI or at least webpack.

This is about components and I again try to steer you away from those until you've grasped the basics.

However, there are several ways to load .vue files and you will need to understand them eventually. There is a nice easy loaded that is listed in the WIKI that will let you avoid the complexities of a build step (webpack) for now. Though the basics of using webpack with uibuilder are also documented in the WIKI.

In essence, yes. But take it slow. You need to understand the basics first otherwise you will get very confused. Using .vue components requires you to understand how data is passed from the parent to the component. Then quickly you will start asking questions about how you can pass information back from the component to the parent. Then you will be looking at nuxt which is a whole other rabbit hole!

7

That is the only way outside a separate web page to make the whole code available within Node-RED. Since the purpose of uibuilder is to connect a data-driven web page with the data from Node-RED, it is important to be able to provide a single flow that has everything needed in a single place. I can expand the example flow on the flows site if you think that would be helpful?

Then simply delete them! The comments are there because otherwise people cannot necessarily see what is happening and why.

The default template is a compromise between simplicity and comprehension. It is as much an example of what is possible as anything else. I've started from the assumption that most people turning to uibuilder are doing so because they have outgrown the capabilities of Dashboard. That implies a level of knowledge about HTML, CSS and JavaScript since you absolutely need to have some knowledge of these if you are going to use uibuilder. It is not a zero-knowledge tool like Dashboard.

The simple example was built based on your code so that people could see Vue and uibuilder stripped back to the absolute minimum.

1 Like
8

I've added the Cookbook Index page to the WIKI. Please feel free to expand it.

9

That implies a level of knowledge about HTML, CSS and JavaScript since you absolutely need to have some knowledge

Then one "absolutely" (well perhaps) don't need comments, as the comments will not explain the concepts that should be known in advance.
It is not about deleting the comments, I had the same issue as @hazymat - trying to reverse engineer the example that is included once you click deploy.

Don't get me wrong here, I think you delivered absolute fantastic work with the uibuilder node and it works wonderfully in my setup, but it took some time to digest - and this, frankly had nothing to do with uibuilder, because in reality it is only 1 function (which is why i created the very simple template, it is the only thing you need to actually get started), vuejs is where the learning started for me.

To give some feedback, when I go the repo.

"Easily create web UI's for Node-RED" - I am presented with 5,6 pages of filled with text of what to do or not to do with several links to other pages with more information. I think it throws a lot of roadblocks for users to actually get started: it does not appear "easily".

I will not make any updates to the wiki/cookbook, you put a lot of effort in it and as you know by now, I would remove a lot :clown_face:

10

I'm just replying so I can follow this thread. Wife and I are prepping for a much needed vacation getaway so I can't do anything with it now.

But this looks to be a good starting point for me to get a little knowledge about why knowing a bit about HTML and CSS will be useful.

JavaScript is enough like C that I generally succeed in using it in function nodes after a bit of Google and cussing about having used == instead of === :slight_smile:

That little" actual HTML" example about display a msg.payload object on a web page made a light go on in my head.

11

No, I absolutely agree with that and it needs a major overhaul.

Good news though, if you check out the security branch, you will see that a lot of documentation is being moved into the docs folder which is then also used to present a documentation website as well :slight_smile:

I've been trying to simplify the root README over several releases now, still a ways to go yet though. This is the problem of evolving an answer to a problem rather than designing it. Lack of both skills and time on my part.

Well thanks for replying, the more the merrier. BTW, did you know that you can manually change the tracking setting at the bottom of any thread? Just change it to anything you want:

image

Anyway, enjoy your vacation.

Mercifully not too much like it though, that would be horrible! JS is bad enough as it is and is getting more complex each year which is annoying for those of us who aren't full-time programmers.

Cool.

I really must add the "simple" example to the examples library.

Let me leave you with another reminder. uibuilder does not need VueJS. I chose that as a baseline because, again, it fits in that nice slot between horribly over complex (yes Angular, looking at you here) and overly simplistic/restrictive. But you can use any framework you like with uibuilder. Originally I was using jQuery if you remember. You can also do away with a framework altogether! Give it a go if you'd like an exercise. Use direct DOM manipulations, it isn't that hard.

Learning HTML, CSS and JavaScript was one of the best things I ever did in IT. While it has been a long time since I was a professional programmer (business programming in COBOL and other even higher-level domain specific languages mainly), Knowledge of JavaScript and HTML means that I can automate processes that other IT bods have to painfully bash through by hand & gives me a great insight into the world of "digital" as it now seems to be called.

12

I've just skim-read the comments on this thread (after being out for most of the day) and wanted to say a huge thank you for the responses and actions so far - looking forward to putting some ideas down into the cookbook and following-up with a few questions. Thanks for the kind offers of help @TotallyInformation, the work you do and the effort to help us get started is hugely appreciated.

1 Like
13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.