Floor plan suggestions

[alex88]

@TotallyInformation
I am not sure if I broke you uibuilder. I have been trying to get caching to work. I thought it was working and then I noticed that I never get the REPLAY messages from the 2nd output of the uibuilder node

The image above is from a clean import from a post you made ie a working copy.
What I'm not sure of, is where that code is hidden. It appears to me to be out of my reach.

With my uibuilder when I refresh the webpage I get three of these undefined messages instead:

EDIT: Looks like I may have broken something. I'm replacing the node with a new one and fingers crossed it will work properly.

EDIT2: One for tomorrow. i replaced with a new uibuilder, re-plumbed everything and it's back to this again:

I'll figure out exactly which step it's failing at and post an update. Maybe I'll figure out what the cause is as well

[alex88]

@UnborN

@UnborN

i read your posts above and its looking good ... all the best

Thank you!
It's been a hard slog, but I'm slowly starting to get the hang of it

@UnborN

ps. maybe you can use a switch node after your uibuilder node to switch messages based on their topic .. to route msgs to the correct light, device based on topic

I don't understand what you mean.

I have setup uibuilder so it only sends messages out when a light is changed (brightness or colour)
In my flow the messages go straight to the "fibaroAcvtor" node which then sends updates to the exact light, and at the start of the flow you can see all of the lights currently connected into the flow. As soon as a light gets an update (from the "fibaroActor" the relevant node will pick up the update, so there's a full loop there.

Maybe your HA setup and corresponding nodes work differently, or maybe I'm just missing your point.

[UnborN]

@alex88

"fibaroAcvtor" node which then sends updates to the exact light

opps .. i didnt know what that node was and that it could control specific light .. my bad

[alex88]

Not to worry
.
Thank you for caring to reply with feedback.
I really appreciate the support!

[greenembrace]

Hi @dathor I've been preoccupied with other things. but will get back to it in the next few days. Will add to post when i do. It's working in HTML code but i'm trying to inject it into SVG file. My thinking at this stage is to create an VUE component.

[alex88]

@greenembrace

It's working in HTML code but i'm trying to inject it into SVG file.

What are you trying to inject into the SVG file?

[alex88]

@UnborN

Regarding the colorpicker ... bootstrap-vue has one .. so try to keep to bootstrap-vue that is already included with uibuilder (if you can) instead of looking for other components

@UnborN

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:

[UnborN]

Hi @alex88 ,

maybe it depends on the OS you are on.
im using windows 7 .. whats your OS ?

[alex88]

You're still on Win 7.....

I'm on Win 10...

[alex88]

@alex88

I'll figure out exactly which step it's failing at and post an update. Maybe I'll figure out what the cause is as well

In the end I had to just add a new uibuilder node in and it worked perfectly

[alex88]

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.

The full guide to using Font Awesome icons in Vue.js apps - LogRocket Blog

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:

Component Registration — Vue.js

And added the following code into my var app1 = new Vue:

    components: {
        FontAwesomeIcon: 'font-awesome-icon',
    },

And now I get this error:

[TotallyInformation]

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.

[UnborN]

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

[alex88]

@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...

[UnborN]

Regarding the Font Awesome, look at this tutorial that explains how to include them without a build step.
Font Awesome Introduction

[alex88]

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!!!

[alex88]

@UnborN
Did you end up working out how to integrate your uibuilder page into the dashboard side-menu?

[UnborN]

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

[alex88]

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.

[UnborN]

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 ?