What are you trying to inject into the SVG file?
I did use the bootstrap color picker, you can see that from the snippets of code I posted above, however it does not look like the image you pasted:
You're still on Win 7..... 
I'm on Win 10...
In the end I had to just add a new uibuilder node in and it worked perfectly
Ok, so I've been banging my head against the wall with this one for a while now.
First thing is I don't get why the syntax on almost every website, including this one, differs to the syntax that I end up having to write in the index.js file.
Secondly, no matter what combinations I try I cannot get fa icons to appear on my webpage.
I am trying the "lite" method of only loading the icons that I need. Maybe that's my first mistake.
I have installed all the packages recommended:
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome
I have tried to register the components in the index.js file and I can get to the point of no errors, but the icons don't appear on my web page.
I'd love to paste my code, but I've tried so many combinations that don't work that I think I am fundamentally doing it incorrectly. I also suspect that the end solution is very easy.
Ok, so here's one attempt that doesn't throw up immediate errors that I deduced from another post on thsi forum (Uibuilder - extra vue enhancements), perhaps incorrectly
Vue.component({FontAwesomeIcon : 'font-awesome-icon'}),
But I don't know how to then add the icon:
library.add(faCoffee)
I assume I don't need to import anything, but maybe I got that bit wrong as well:
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
Can anyone help please?
EDIT: I forgot to paste the error I am getting when I refresh the web page:
This is the HTML:
` <template>
<div id="app">
<h1>Getting Started with Vue.js and Font Awesome</h1>
<p>Have a cup of coffee: <font-awesome-icon icon="fa-coffee" /></p>
</div>
</template>
`
EDIT2: So I started reading this post:
And added the following code into my var app1 = new Vue:
components: {
FontAwesomeIcon: 'font-awesome-icon',
},
And now I get this error:
You can’t import in the browser (unless using the latest component features or using a build step with webpack or similar). Loading a library using script tag is used instead. But this is dependent on the library being written correctly so that it activates itself. Assuming it does, you still have to know it’s actual name so that you can reference it in your code. If the libraries docs don’t tell you how, you will need to read the code, raise an issue, find a forum or guess. Guessing may be easy if the author has followed conventions.
BTW I’m on holiday so not able to read much of the forum & I hate typing on my phone.
Hi Alex,
We are in the same boat,
I've been straggling with this "import" commands also for weeks ..
As Julian @TotallyInformation said you cannot use the import directly in your script without, what is called, a build step.
Basically a browser doesnt know what a .vue file is or an import command and you use webpack or another bundler to build your app. .. to translate it into pure javascript.
I dont know much about it but i hope this makes sense.
Webpack for me was too complicated and i found another little tool called Parcel.
See this video of Parcel with Vue : Build a Vue application with Parcel
When you build your application this way, it 'unlocks' the possibility to use 'import' in your js or vue files .. and follow the code of most of the tutorials you find online .. woohoo 
How i use it ..
my folder structure in uibuilder / name of node / src
Sample of my Index.html file
<html>
<head>
<title>vue parcel boilerplate</title>
</head>
<body>
<!-- <script src="./js/socket.io.js"></script> -->
<div id="app"></div>
<script src="./app.js"></script>
</body>
</html>
..with the parcel command :
cd C:\Users\User\.node-red\uibuilder\test\src
cmd /k parcel build index.html --public-url ./ --no-cache --out-dir ../dist/
the dist folder will be populated with the built app and now that we have files in dist,
uibuilder is clever enough to serve those files instead of src
you restart your node red server and cross your fingers
2 Likes
@TotallyInformation
Thanks foe getting back despite being on holiday.
I figured out something along the lines of what you are saying from your other post that I referenced above. This still leaves me with more questions than answers for now, but I'll keep digging.
If I have understood what you have said correctly, you can import libraries without a build step or using the latest components (I don't understand what this means and how hard it would be to upgrade) if you use a script tag, and know the correct name, and the library has been built to work this way etc etc.... have I got this correct?
@UnborN
Dear me. The plot she thickens!
I need some time to absorb what you have said. Unless I have misunderstood @TotallyInformation I think you don't need the build step (assuming the stars align that is), but I wouldn't know how to check what he has said anyway, despite FA icons presumably being so popular.
I'm concerned about adding a build step as I already spend so much time debugging that having to add all those extra steps to deploy my code sounds like it might push me over the edge.
I'll do some more research tonight and in the end I might just give up on the idea and go back to looking into SVG, and maybe drawing the darn icons myself or seeing what SVG has to offer out of the box / what people have shared on the net already.
I'm so close to having all the components in place to building the lighting part of my floor plan. This is one of the last steps. Just need to push a little harder...
Regarding the Font Awesome, look at this tutorial that explains how to include them without a build step.
Font Awesome Introduction
2 Likes
I looked at that exact page and skipped past the first line ... it took less than 60 seconds to test and it works.
I am going to go and crawl under a rock... 
What's annoying/funny depending on how you look at it, is that I have tonight started to figure out how to use SVG images and I've designed a new way of displaying lighting using SVGs.... haha.
I think I'll sleep on it before deciding which way to go.
@UnborN Thank you!!!
@UnborN
Did you end up working out how to integrate your uibuilder page into the dashboard side-menu?
Hi Alex,
I didnt understand ... with uibuilder i created a dashboard and used a bootstrap-vue Navbar
but its a little more complicated than that. I integrated the navbar with vue-router
I can send you all the files if you want to study them .. but it will need a build step 
1 Like
So, I need to integrate my existing node red dashboard pages with my new uibuilder page.
I guess if you create a new navbar that you can then manually link each dashboard url to the new navbar.
I perhaps misunderstood that you could do it the other way around ie just add the uibuilder page to the built in node red side navbar.
Hi Alex,
The whole purpose of uibuilder is that it gives you the ability to create your own new custom dashboard.
It works independently of the node-red default out-of-the-box dash.
Now in your case that you already have some things on node-red dash and developing stuff with uibuilder.
You can do a link from one to the other .. but its not going to look good because you break the design.
in node-red dash use a template node with a <a href="/test"> Link to UIBUILDER</a>
and from the side of uibuilder use a <b-link href="/ui">Link</b-link>
another idea could be to use a iframe in template node that shows the uibuilder in it.
you cannot slowly develop and do everything in uibuilder now that you are a front end developer ? 
Right, I need to have a play around and get back to you both. Thanks for the responses!
I asked this question before and perhaps I didn't understand the answer provided. so apologies in advance for asking again.
Why is it that the JS syntax in VueJS is not the same as the JS syntax in Node-RED?
For instance, in Node-RED:
device_lookup = device_lookup.find(_=> _.hc2name == "abc!)
In VueJS:
device_lookup = device_lookup.find(device_lookup => device_lookup.hc2name == "abc")
Ok, so it's very similar but the top code simply will not work in VueJS. It must have taken me over half an hour to figure out the bottom code.
Second question. I tried for quite some time, but couldn't get anything I found on the net to work. I am sure If/when I spend more time I'll figure it out in the end, but if someone knows it would be great to share the code.
Each light bulb that I have created, has 3 lines of HTML code:
- the fa-fa-icon
- the button (which is transparent) and sits underneath the fa-fa-icon + has a popover with the light circuit name (which pops up when you press the light bulb with your finger)
- the value (brightness) of the light that sits to the right of the icon
I don't want to enter the absolute positions for left and top 3x over for each row, so I tried to variabilize them and create a function to have fixed increments/decrements, but haven't got there yet:
<div style="position:absolute; left:580px; top:264px" > <i id="avmain" class="fa fa-circle" aria-hidden="false" > </i> </div>
<div style="position:absolute; left:572px; top:264px" > <button class="btn btn-primary-outline" v-on:click="myClickSpot('avmain')" v-b-popover.focus.top="'AV Main'"></button> </div>
<div style="position:absolute; left:600px; top:264px; font-size: 90%; color: #383737"> {{values.value_avmain}} </div>
Before you jump in. The button is there because I simply could not get the popover to work with the fa-fa-icon only... not with a touchscreen anyway. This setup does work perfectly though.
Last question, I assume in web page design that you anchor your components in a way that you pick one component and set it to be positioned using position:absolute and then you set the remaining logical components (in a logical group) to sit relative to the first component. That way, if you want to move a logical group you only have to change one set of position variables.
So extrapolating this you then just have to break your page up into x logical groups and work from there.
Is that correct?
... I know, questions, questions, questions... that's all I seem to have these days.
On this one...
device_lookup = device_lookup.find(_=> _.hc2name == "abc!)
There is a missing quote at the end of abc "abc
Regarding the other items on position, it's down to design and html experience. I would say, look into using grid or flex layout and CSS classes instead of positioning items absolutely.
Hi @Steve-Mcl
Thanks for getting back.
I didn't test the first snippet of code when I wrote it for the forum. Good pickup, but the actual tested code in Vuejs didn't have any typos.
As for using a grid, that's the main reason I went to uibuilder. To get away from a restrictive grid.
Thanks anyway. .
We need to see the complete code to fully understand why the code isnt working in Vue but it may be that you have to reference your Vue data() variables with this
this.device_lookup
