vfunny... almost too funny.
ok, first question, how do I get back to my old setup? I've broken my uibuilder setup.
I guess you don't know as you are entirely on parcel now... 
you were making those changes in your floorplan files ?
you have to re-post the files to check .. or compare with original uibuilder template files to see whats missing
https://github.com/TotallyInformation/node-red-contrib-uibuilder/tree/master/nodes/templates/vue
yes, very not clever hey!
EDIT: not exactly, I took a back up obviously, but when I restored from the backup I am now getting an error....
I'm getting an error in the console: "Uncaught ReferenceError: BootstrapeVue is not defined"
I have nothing called "BootstrapeVue" anywhere in any of my files including the HTML file.
I just hope it has nothing to do with any of the install I've been erratically doing tonight... argggh.
you should have made a backup before such a change.
most probably you misspelled BootstrapVue somewhere .. if you are using VS Code do a search in the file
i have no idea. if you want post the files and we check by tomorrow.
That is very kind of you, but absolutely not, you have better things to do than check my code.
Anyway, I just built a new flow and pasted the exact same code in, and it works perfectly.
I think it has something to do with this:
parcel build index.html --public-url ./ --no-cache --out-dir ../dist/ --no-source-maps
But I'm totally guessing, else it's just a bug in Node-red.
This is the 2nd time something has broken along the way and I've had to just build a new flow with the same code to get it to work, and thankfully it was that simple.
EDIT2: Admittedly both times it's broken I was mucking about with install files and other stuff in the back end, so it's probably a very explainable issues that only happens when you poke about and mix things up somehow.
I think Parcel is a weekend activity for me. It's a little more complex than I hoped for.
Well done to you for figuring it out, but I'm guessing you are not a complete newbie to front end development like me, either that or you're just a lot smarter 
PS: I still think Parcel is the way forward... it opens up a lot of doors!!
Thank you again, and again, and again!
you were installing packages from the uibuilder node ? and you had this error ?
if yes .. there is no need. because the parcel bundler will take care of that and build them just by looking that you have an import in your js and vue files.
ps. starting a new flow is not a solution .. you have to figure out whats the problem.
We need to check the files to know.
parcel is easy .. its just one command
no really .. im still learning .. actualy i learned quite a few by researching for your project .. especially those reactive variable
No, not at all.
I was trying to get Parcel to work. I was migrating my existing code into 3x new files almost line-by-line and then I gave up as it is getting too late, so I tried to revert to my old files i.e. I copied the 3x old files over to the src folder and restarted node-red, but I was getting the error I mentioned above.
Creating a new flow, copying all my nodes into it, giving my flow a new name and then copying the 3x old files into the new src folder (based on the new name) fixed the problem. Don't sweat on it. Good night!
Well you are doing very well..... I'm still getting grips on HTML (and CSS). It's sinking in slowly, but there is still more to learn.
Good night Alex .. check the examples i send you and we speak.
I most certainly will!
I couldn't help myself. I moved my files over and just ran the build command, but it doesn't work because my existing code is now referencing paths that do not exist anymore.... anyway, one for another day now.
I think with a clear head (ex red wine) it will be relatively easy to fix.
Did the build command .. complete successfully ?
Did you restart node-red to pick up the new built changes ?
you checked in the browser devtools and its pointing to the wrong path ?
which file is pointing to the wrong path ? even a small change like ./ could fail.
my files are as follows :
index.html (Notice no referencing to uibuilder, css etc here) just the div to mount/render the vue app
<html>
<head>
<title>Uibuilder BMS</title>
</head>
<body>
<!-- <script src="./js/socket.io.js"></script> -->
<div id="app"></div>
<script src="./app.js"></script>
</body>
</html>
app.js
import Vue from 'vue'
import App from './components/App.vue'
import router from './router'
import uibuilder from './../../../node_modules/node-red-contrib-uibuilder/nodes/src/uibuilderfe.js'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Vue.use(uibuilder)
window.uibuilder = uibuilder;
new Vue({
el: '#app',
// runtimerCompiler: true,
router,
// store,
render: h => h(App)
})
App. vue file here is the main componont that will 'host' the rest of the vue subcomponents.
More info in the wetransfer file
@TotallyInformation
I had a good chat with @UnborN the other day and he pointed out what you are saying above.
I've now had the time to properly digest it and yes, it's a better way of doing it, as currently I am bringing in new values from duplicate device nodes. In fact, I could pick up every value I need from existing variables in node-red. This would be a lot more efficient I suppose. I'll now have to see if I have the time for a re-write at a later date.... my current focus is to just finish it as it is so I can at least have a baseline working model.
To that end, I've been looking at removing my duplicate variables on some new data I am pulling.
I've created a new variable called sensors:
//Temp and Humidity
sensors:[
{hc2name:"Kitchen/Kit Din UF Temp1", sensor_value:"0",},
{hc2name:"Kitchen/Kit Liv UF Temp1", sensor_value:"0",},
{hc2name:"Kitchen WC/Kit WC UF Temp1", sensor_value:"0",},
{hc2name:"Kitchen/KitchenGard Temp", sensor_value:"0",},
{hc2name:"Kitchen WC/Kitchen WC Temp", sensor_value:"0",},
{hc2name:"Garden Room/Garden Room Temp", sensor_value:"0",},
{hc2name:"Garden Bath/Garden Bath Temp", sensor_value:"0",},
{hc2name:"Kitchen WC/Kitchen WC Humidity", sensor_value:"0",},
{hc2name:"Kitchen/KitchenGard Humidit", sensor_value:"0",},
{hc2name:"Garden Bath/Garden Bath Humidity", sensor_value:"0",},
],
However I have no idea how to reference it in my HTML.
I tried combinations with {{}} but maybe I just don't know the syntax.
I tried to restructure the variable and then reference it, to no avail.
I then thought I was being clever by creating a function:
//Lookup sensor data
sensor_lookup: function(hc2_name) {
var sensors_lookup = app1.sensors;
sensors_lookup = sensors_lookup.find(sensors_lookup => sensors_lookup.hc2name == hc2_name);
return sensors_lookup.sensor_value;
},
But then realised I don't know how to make a reactive function that refreshes dynamically, like variables in {{}} refresh dynamically.
I'm still reading up on it, but maybe I've gone down the wrong rabbit hole or maybe I just need to sharpen up my JS and HTML ... haha.
OK, some more info. I think it has something to do with binding a method, I just can't seem to find how to bind the method. Maybe the better questions is (and I'm going to go and look for it now), is there a cheat sheet for vuejs out there....here's one: https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf
EDIT: Me thinks I need to use v:for. I'll look it up tomorrow night. Getting late for a school night.
Nothing like a little nap to set ones mind straight....
{{sensors[0].sensor_value}}
1 Like
{{sensors[0].sensor_value}}
yes 
.. since you created the sensors array and know at what position the value is.
the sensors_lookup function could work also .. but it needs a little cleanup ..
maybe it works as is but ..you defined sensor_lookup as a function, then defined a var with similar name, and also inside find() the element is sensor_lookup. its little hard to read.
//Lookup sensor data
sensor_lookup: function(hc2_name) {
console.log("Somebody called the sensor lookup for : " + hc2_name);
return this.sensors.find(sensor => sensor.hc2name == hc2_name); // returns whole object found
},
and in html you can call the method using the name :
<h1 >{{sensor_lookup('Garden Room/Garden Room Temp').sensor_value }}</h1>
1 Like
Andy,
That's a much better way to write the function (method). I didn't realised you could nest it into a single line.
I much prefer to use the function vs hard coding a position!
I am going to ask what might turn out to be difficult question in that it may have too many possible explanations, making it not worth asking the question in the first instance, however there may also be a very good explanation or maybe someone can point me in the right direction to debug it.
Given I don't have the time (or the will for that matter) to re-write my existing node-red flows in uibuilder, in the end I bought a small refurb pc to run my flows on my touchscreen. The pc is running win 10, just like the current pc I have been running node-red on since a few months back.
For now I am experimenting and am pointing the new PC with the touchscreen to my main PC for the uibuilder webpage that is my floor plan and some of the old node-red flows. I leave the floorplan page open all the time with a mouse cursor hider and F11 hit to make it look like an app of sorts.
The issue is that when I come back to the touchscreen to see the floorplan at a later time, the web page is frozen. If I hit F5 on my keyboard it comes back to life and works perfectly fine, straight away.
I know the page is frozen because it is reporting the wrong info e.g. it is showing me the last view when I used it last with lights incorrectly on or off.
This is new to me because I have left the floorplan webpage open for days on my main PC and come back to it to see it reporting light statuses correctly.
On the new PC, I have turned off all power saving features except that the screen turns itself off after a couple of mins, so I would have thought that in the background it would stay connected to node-red on the main pc..
This is all new to me, so I'm not sure where to look to figure out why the page is appearing to lose its connection to node-red, assuming that is what is happening in the first place.
I guess this might be an issue when you run node-red locally and browse to the page from the same machine the connection will never (is not likely to) be lost, however when you browse from another machine there may be some sort of network timeout issues or other issues I am not aware ofā¦ Iām making things up now to explain it, but if it is more complex to get it working over a network then the simple solution is for me to stop developing on my main pc and move the floorplan to the PC with the touchscreen (running a 2nd instance of node-red locally) on the basis that I will only ever use the floorplan webpage from that single PC and touchscreen anyway.
Hi Alex, hows it going?
- Do you see any errors in the Console or Network tab of developer tools in your new PCs browser ?
Leave the dev tools open and see if connection errors are caught there. - What browser are you using. Maybe try latest version of Chrome or Firefox (in case you are using anything else).
- Windows 10 settings are a bit of a mess. Are you sure all power saving options are disabled ?
Maybe try disabling power options on your network devices by going to Device Manager then Network Adapters and uncheck the option for the device used.
Hey Andy,
Yeah, all good. Hope you are well too!
I have had almost no time to do HA stuff thanks to a new job, but I have removed all the duplicate variables and full tested it now so it works fine with one set of variables for all the lights.
I am just testing viarabilsiing the x and y coordinate positions for the light bulbs and other interactive widgets, using CSS variables, nothing as fancy and you and @TotallyInformation suggested where everything is parameterized in a variable in the JSON, but it's a start. Also testing out transitions and animations to improve the UX.
I think you nailed it on the floorplan losing connectivity!
Device management showed the network adapter was allowed to go to sleep; as per the image you pasted above. Let's see if it works now.
Animations in VueJS are so simple to use!!!
CSS file:
.fa-beat {
animation:fa-beat 1s;
}
@keyframes fa-beat {
0% {
transform:scale(3);
}
33% {
transform:scale(1);
}
660% {
transform:scale(3);
}
}
HTML FILE:
Nothing to change as I already had a function (clickLight) with the ID of the fa-icon, like this:
<!-- ****************** LED SPOT LIGHTS ****************** Garden Wall -->
<div style="position:absolute; left:530px; top:48px" > <i id="gardenwall" class="fa fa-circle" aria-hidden="false"></i></div>
<div style="position:absolute; left:522px; top:48px" > <button class="btn btn-primary-outline" v-on:click="clickLight('gardenwall')" v-b-popover.focus.top="'Garden Wall'"></button></div>
JS FILE
// -- Called if a LIGHT BULB is clicked
clickLight: function(localname) {
//Pulse light when selected
var element = document.getElementById(localname);
element.classList.add("fa-beat");
//remove pulse style after x milliseconds
setTimeout(function(){element.classList.remove("fa-beat");}, 900);
},
And I think it makes the US way better.
1 Like
