yea .. the more you read about vue, javascript, html, css the more things you discover to implement and its a never ending process 
I hope those power saving options do the trick
1 Like
Check out the thread on uibuilder/VueJS components as well. Managed to squeeze in some experiments and the experimental module listed is beginning to show how I'll add some "magic" to uibuilderfe that means you only need to supply some very simple HTML containing a suitably built component and then send through some standardised data from Node-RED to control things, no JavaScript of your own needed and no messing with attibs/props in the HMTL. All you need to do is add a ref id.
Also for font awesome icons, I found a better way to use them without an install.
Register here: https://fontawesome.com/start by entering your email address
And you will get a code that you can use in your index.html file like this:
<script src="https://kit.fontawesome.com/[youe unique code].js"></script>
You will then have access to all the fa icons e.g. fas, far
Thanks to 2x unbelievably helpful sessions over teamviewer with @UnborN I am ready to compile, which means I've finally been able to start the process of implementing a decent looking colour wheel... woo hoo!!!
I'll be posting my last complete set of pre-compiled code here covering node-red flows and the 3x uibuilder files, just in case anyone wants to go down the non-compiled code avenue in building their own floorplan or other related project.
I have moved to a compiler so I can import component. After about 5 (very part time) weeks with uibuilder I'm ready to compile and broaden the possibilities, however, the fact is that without @UnborN's help I would probably be 1 year away from using Parcel. Thanks again, you're a champ!!!!
1 Like
I am still only a novice at running a build step myself.
I'm about to move uibuilder to v3 which will include a really nice feature to make working with components even easier if you will write them in the right way. I'm still working through the details for that but the main linking code is ready to go.
Have a look at the gauge component in uibuilder-vuejs-component-extras if you want to start getting a head start. The changes basically let you minimise your HTML and JavaScript code when driving things from Node-RED. It lets you send both data and configuration direct from Node-RED.
But anyone can use the same principles and write their own components or they can, as I have with the gauge component, wrap someone else's component in a uibuilder compatibility component. Making a super convenient, data-driven, low-code, node-red compatible component.
I've not yet done a build step for my extras library, I'm just reading up on how to do it. My intent is to provide a library of convenience components that can be driven direct from Node-RED so bridging the gap between the ease of use of Dashboard and the flexibility of uibuilder.
Of course, this is done without loosing any of the existing flexibility of uibuilder. You don't have to use any of the new features.
I'll be following the Vue cookbook guide on packaging and I'll probably use vue-sfc-rollup to make life easier.
you are welcome Alex .. it was helpful for me also because I was experimenting with the exact same things too and that's why i was interested in your project (and plus it is an actual working environment with real values). It gave us the chance to research, exchange ideas and learn .. this forum is like an open university 
Except the part that we were staring that single line of code for 15min and in the end it was the wrong line of code 
Hi @TotallyInformation .. its great sharing these components .. i liked your post on the bootstrap-vue toast implementation. really useful
1 Like
THIS POST SPECIFICALLY RELATING TO THE (HISTORIC) PROJECT AS IT STOOD ON THE DAY OF THE POST IS NO LONGER MAINTAINED:
Go here for the latest version:
Good bye uncomplied uibuilder
So if you have tried out the dashboard nodes and, like me, have either found that you want more out of your dashboards e.g. more precision in placement of UI nodes, more sexy interactive options, and/or you have found some limits on lower powered hardware with slow load times or sometimes no loads at all, then you would have probably stumbled across alternatives to the dashboard nodes like uibuilder written by @totallyinformation.
Out of the box uibuilder it is amazing, it opens up a world of possibilities to design and develop almost anything you can imagine, however if you donât know anything about front end web page development then it will be a steep-ish learning curve. To this end I am hoping the following code will help you along the way.
It is important to note that this setup does not require compiling code. You simply have to save the files in the right place, do quite a bit of config for your individual setup and plumb in node-red to populate the working web-page.
What I have shared here is a working and interactive floor plan, assuming its setup properly. The code is almost stand-alone in that you still need a source of data to populate the nodes. The point however isnât to provide a fully working model that you can implement out of the box, as you will ultimately need to modify and configure the floorplan to your personal needs, naming conventions, devices etc.
These flows and uibuilder files are there to show you how I have made node-red and uibuilder work. I do this in the hope that it saves you many countless hours that I spent bashing my head against the syntax errors wall and tediously searching google to find out how to get things done in Node-RED, JavaScript, CSS, HTML, VueJS etc.
Drawing your floorplan image
If you want to personalise this you will need to draw your own floorplan. I used www.floorplanner.com. Itâs actually very easy to use and in an afternoon you can have a basic floor plan drawn up, in fact probably something good enough to work with going forward. I used paint.net to add materials to snazzy up the image.
Node-Red: Contrib-Fibaro-Devices
The following code is my node-red flows. It works off the excellent and reliable node-red-contrib-fibaro-devices node that @10der has written, hence the flows are based on you having a Fibaro Home Centre 2 setup, however it shouldnât take a great deal of effort to modify the flows to work for any home automation system.
If you have a basic knowledge of node-red then you can work your way through the code and see how to copy / modify it for your purposes.
Node-RED Flows
Node-red floorplan flows image:
Node-red flows code. You can get this from the github repository here:
https://github.com/amilanov75/floorplan-uncompiled
file: 2020-09-26 floor plan uncompiled - last release.json
Considerations in implementing this for yourself
Next there are the 3x key uibuilder files. I havenât necessarily tidied these up, you can see some commented out sections showing thermometers and temp values and other snippets, however if this code is plumbed correctly it will work. There are a few things to take into account:
- You will need to drop your own uibuilder node on a canvas, name it and then deploy it, so that you can get the correct âsrcâ and âdistâ folder structures on your local c: drive. These will be located in the same place as your â.node-redâ install folder, and found under the uibuilder folder, followed by the folder of your webpage name e.g. in my case âfloorplan2â:
This will define the url that you need to go to in order to see the floorplan e.g.
http://[ipaddress of pc hosting node-red]:1880/floorplan2/
-
You will then need to copy the 3x key floorplan files into the correct uibuilder folder, my project/web page folder is called âfloorplanner2â. In this folder you will find the âsrcâ folder in which you will see the 3x key files. I found the info in default 3x files that you get, when you first drop and deploy a default uibuilder node, somewhat overwhelming when I started out with uibuilder, but I had zero experience in web development, so it was all new to me. If you already have some past experience it will be a lot easier to understand. I would take some time to review the default code and try to understand what is going on, however that said, to get a floor plan going you donât necessarily need to understand whatâs in the default files â I still donât. To get the floorplan working you will need to overwrite the default files with the 3x floorplan files below.
-
You will need to create an âimagesâ folder in your âsrcâ folder and drop your floor plan image in it. I saved my file as a .png and made sure the resolution of the image fit the desired screen I was going to use it on. You can work dynamically with image sizes, however I have not looked into it. My floorplan is designed to work on a single touchscreen with a specific 1080x resolution. In the index.html file on row 51 you will need to change the hardcoded resolution and file name of the image to suit your needs i.e. this line here:
div id="floorplan" style="position:relative; left: -272px; width: 1720px; top:66px; height:34em; background:url(./images/groundfloor.PNG);">
- In the Index. HTML file, you will need to get your own font awesome code from here: Get Started instantly With 1,000+ Free Icons | Font Awesome and update this line of code with your own unique key:
<script src="https://kit.fontawesome.com/[youe unique code].js"></script>
This will give you access to all of the free font-awesome icons via what I guess is a CDN i.e. a live internet connection, which is how uibuilder works if you do not compile your code.
- You will want decent development software to work with. I ended up using Visual Studio Code, which is free and does the trick, but there are lots of packages out there.
3x uibuilder files:
So here is the code. Copy each section and save it into a file named as follows:
Index.css.
You can get this from the github repository here:
https://github.com/amilanov75/floorplan-uncompiled
file: index.css
Index.html
The body of the html file can be improved drastically by making it data driven rather than having each element hard-coded.
This is something that I plan to do one day, but it was easier for me to write it the way it has been written as it is the first web page I've ever built.
You can get this from the github repository here:
https://github.com/amilanov75/floorplan-uncompiled
file: index.html
Index.js
https://github.com/amilanov75/floorplan-uncompiled
file: index.js
Things to consider:
I have intentionally excluded all of the other specific config you will need to do to transform the code to work for you, but if there is something you find that is technically incorrect in what Iâve said or a missed step, please shout out and Iâll mod the post.
I have modified caching in the âdata cachingâ node with my own funky version of the code for handling the caching of messages when any user refreshes a webpage pointing to the floorplan, as with all my code, there are probably (most likely/definitely) better ways to do it. I have been coding JavaScript for about 4 weeks intensively and independently of uibuilder, and I have been working with uibuilder for just over 5 weeks, however on a light basis, so I am still learning A LOT. That said, the floorplaner works fine on my touchscreen tablet and Iâm happy with the progress so far.
You may wonder why Iâm uploading a still âwork in progressâ floorplan, well the work in progress is mainly limited to audio that has not been integrated yet and nice-to-have feature upgrades.
The reason is mainly, thanks to a monumental effort of support from @unborn, I have made the big move to compiling my code using Parcel.
This means that the version you see here is pretty much the last version that I will work on with where the code is uncompelled. This does not mean that you canât take the files I use within my compiler and revert them back to uncompiled versions, itâs just that itâs a bit of hard work to do that when you are trying to learn so many new things all at once.
If you decide to move to compiling code, as I have, on the basis that it opens up a world of components that arenât available or arenât readily available when not compiling, then I have written up a post on how to migrate from uibuilder uncompiled to uibuilder compiled using Visual Studio Code and Parcel. You can read it here: Using Parcel to compile your code ¡ TotallyInformation/node-red-contrib-uibuilder Wiki ¡ GitHub
Oh, last thing, this is all built on Vue 2.0. The core code set for Vue 3.0 has been released, however the whole of Vue has not been released yet on Vue 3.0. By the time you read this Vue 3.0 will probably already be old hat, so will most likely have to change line 488 of the index.html to a new path to download Vue 2.0, cross that bridge when you get to it:
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
1 Like
Ok, I tried a few methods and in the end gave up and created a github repository here:
As there is too much code to paste into the forum, besides I was sure someone would get upset with me bloating the forum if I managed to get it all into separate posts... haha.
1 Like
moved to github; refer post above
You may want to copy/paste just this post ---^ to a new post is #share-your-projects - as it's worthy of that on it's own.
1 Like
Ah, I didn't know that existed. Thanks!
When I get around (one day) to writing up how to move to Parcel to compile code I guess I'll post it in the Share Your Projects section as well.
EDIT: Any further updates to the OP #128 will now be made here in the Share Your Projects section
1 Like
Hi Alex, thanks for the uibuilder praise. I'm glad that you've got something good working for you.
Just to point out for people that this isn't quite true. The default template for uibuilder does not require any internet access & if you use uibuilder's library manager then - while you need internet to install modules - you could disconnect from the internet once installed if you needed to.
What uibuilder does with the default template is load the full version of VueJS that includes the compiler. If all of your components are already compiled (like the bootstrap-vue ones are) then you can switch to a lighter-weight VueJS version. All of which are available with the default installation.
I've assumed that, like yourself, for most people starting out, they are not going to want to bother with the complexity of compiling their Vue app. So the default template app is compiled in the browser with no user intervention. That is the simplest possible approach for people with minimal front-end programming experience.
Indeed, if you know that you will only ever be using modern browsers (no IE11 for example), you can switch to using Web Components and then you get the ability to use import/export statements and you don't need a build step at all even when using .vue files. Of course, it is still more efficient to use pre-built modules but you have the choice.
Absolutely the best programmers editor and Integrated Development Environment I've ever worked with. With good support for VueJS via easily installed plugins.
I am just writing up some hints and tips on developing with VSCode and Vue. I'll make them available as soon as I can.
I'd love to see that if you fancy sharing it. Always looking for good ideas.
You've progressed amazingly - great job!
Please, please, when you have stabilised your setup, create a WIKI article in the uibuilder WIKI to share how to do it with others! You don't have to worry about formatting or style when adding something to the WIKI, anything you can share will help someone. Though if you are going to create a post on your own website/blog, the WIKI article could just be a link to your own. Either is good. You can, of course, then create a post here on the forum that links back to the article as well.
As I'm moving rapidly towards uibuilder v3, I'm going to be starting to move documentation to a new uibuilder website. That includes what currently sits in the docs folder and what is on the WIKI. That way, it will be more discoverable and searchable. It will mean much better and clear documentation, hints & tips and a uibuilder cookbook.
Vue 3.0 seems to be a pretty big jump and seems to need quite a lot of code changes so I'm not sure how fast people will really switch over. Certainly, I don't think uibuilder will be making the switch any time soon.
Just to note there, as mentioned before, that is the development version of VueJS complete with the compiler. When you switch to using compiled code, you can tweak that to get some extra performance.
TBH, a lot of this goes over my head still. Thanks for clarifying, again. One day it will all sink in. haha!
Oh no, I meant funky as in, you wrote it in a much neater way, but when I went to expand it I couldn't get my head around how to keep it super simple. Maybe as I have different types of data coming in and want to keep them very well separated I had to do what I did. I am sure with more experience I'll come up with a more streamlined approach. Anyway, it works for now and, for now. I have bigger fish to fry. I still have quite some dev work on the floorplan to do before moving on to 3x other projects
I am in no way fussed about where the code goes. I'll write it up, but can't promise it soon as I really spent some time just getting to where I am and need to see some solid progress on the actual build front, but and it's a big "but", I will do it and I'll add it to the wiki on your page. Np.
Interesting you say that. I was thinking of moving across ASAP. I heard the router component isn't on 3.0 yet and I think I need it for 1x of my projects - building a single interface for all my node-red web pages. Once I understand how to do this I think I'll just move to v3.0. I don't want to accumulate any more technical debt on 2.0 unless I have to.
Oh yeah, and if it wasn't for people like you(@TotallyInformation), @10der and @UnborN I'd still be f*rt-a**ing about building fibaro virtual devices for my mobile phone, which BTW are great for a purpose, but that purpose is limited.
1 Like
Ok, I talked myself into writing up the Parcel migration steps. If you are interested have a read of the notes here:
I haven't used the full floorplan file to explain it, but hopefully there is enough to get you started.
If there isn't, shout out and I'll enrich it.
1 Like
@UnborN and I have been at it for quite some hours tonight working on this. The good news is that we have:
- a dashboard flow loading
- a navbar that is persistent across uibuilder and dashboard web pages
- navbar links that work to jump between web pages
However 3x issues arise:
- load performance is degraded by 4-5 seconds
- the screen updates in a flash to all red, all white and then the actual background colour - this is not appealing in any way
- the node-red toolbar loads as well as the uibuilder navbar
To great elation we managed to fix problem 2 and 3, but and it's a big BUT, only on the first time you load the dashboard webpage.
The second time you go to the dashboard page issue 2 & 3 rear their ugly heads.
We spent quite some time reading up on lifecycle hooks and re-rendering and felt like we almost cracked it trying at least 2-3 methods, but they didn't work. Time got the better of us.
I suspect all three issues can be resolved, with issue 1 not necessarily entirely resolvable, but improvable.
I didn't fully understand you comment
"Dave puts a manifest file in the head section of Dashboard so that it runs a lot faster after the first load."
I'll have to read up on it, hopefully it will help with issue 1.
Here is the .vue single file component we created to load the node-red dashboard within the uibuilder environment:
<template lang="html">
<div class="second-row iframe_hide2">
<iframe class="iframe-hide" id="lightingpanel" src="http://[ip address of node-red server]/ui/#!/1"> </iframe>
</div>
</template>
<script>
export default {
name: "LightingPanel",
data() {
return {
};
},
methods: {
remove_dashboard_toolbar: function ()
{
setTimeout(function() {
var iframe = document.getElementById('lightingpanel');
//console.log("up to there1", iframe);
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
//console.log("up to there2", innerDoc);
var element = innerDoc.getElementById("toolbar");
//console.log("up to there3", element);
element.parentNode.removeChild(element);
var iframediv = document.querySelector('.iframe_hide2');
iframediv.classList.remove("iframe_hide2")
},4000);
},
},
mounted() {
this.remove_dashboard_toolbar()
console.log("mounted has happened")
},
};
</script>
<style scoped>
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
.iframe_hide2 {
display:none;
}
</style>
Sounds about right for loading a simple Dashboard layout. uibuilder pages are typically slightly faster. However, unless you are loading them from different servers, you are likely hitting browser/server connection limits (the number of parallel connections allowed).
You can, of course, compile your uibuilder app which should speed up the uibuilder end of things. Especially if you switch from the full VueJS library to a limited one (you can use the production minimised version. You can also switch to the version without the compiler if you've already compiled all of the code).
The manifest file will force a number of files (listed in the manifest) to download to your device rather like forced caching. It is really meant for offline use I think but it certainly speeds up Dashboard after first load (because a load of files are now opened from your local device - they don't have to be downloaded).
You can do the same with uibuilder resources as well if you like.
Cool. Nice work.
Maybe I didn't explain correctly. The dashboard web page loads in a couple of seconds through the usual (standard) route, however with iframe you have to tack on about 4-5 seconds to the load time. Is that really usual?
ok, this might help on second load of the dashboard (through iframe) to speed things up which would be great. I'll have to read up on it. I'll have a look around, but do you know if there is already a good post on it?
I really don't think I need it for uibuilder, my one and only web page loads in an instant. Even if it would load faster, it's not worth spending any effort to do so.
1 Like
Can you post an image of the network timeline?
I don't remember, Dave posted a reply at sometime in the past - a long time ago though I think when I was first starting to mess with uibuilder.
Will get around to it tonight. Busy day, as per usual today.
@UnborN and I figured out how to get iframes to kinds of work and TBH it works well enough for now.
It's a complete hack, but it is good enough for now. I have bigger fish to fry!
PS: Thanks for the offer to look at the network timeline, but unless you really want to see it out of curiosity, I'm happy to move on
