Just released 0.11.0 of Dashboard 2.0 which includes a big piece of work to introduce architecture for Plugins (extending Node-RED plugins).
I've also managed to hit off a few x-small issues this afternoon and included those too).
Full Release Notes here: Release v0.11.0 · FlowFuse/node-red-dashboard · GitHub
I'll be off over Christmas, back on 3rd Jan, hope you all have a good break, and please don't break Dashboard too much whilst I'm out 
@joepavitt just updated to v0.11.0 and the dashboard will now not load (previously working fine)
I've restarted node-RED, cleared browser cache (& different browsers)
There are errors in the NR log
22 Dec 19:40:51 - [info] [ui-base:Dashboard] Node-RED Dashboard 2.0 (v0.11.0) started at /dashboard
22 Dec 19:40:51 - [info] [ui-base:Dashboard] Created socket.io server bound to Node-RED port at path /dashboard/socket.io
22 Dec 19:40:51 - [error] [ui-chart:195bc4d0420ab07a] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-button:1a391f1b47f9ac5a] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-button:e2712a1bde4a33e5] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-button:12c7093609532b00] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-button:aa418cf38de5a548] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-button:11675ce3e247ee27] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:3a5ba08ef8bc953f] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:87f1e1fa47a4d50a] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:24b58fe1f550fd18] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:e4c76dbd1c4d844a] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:8c0b4930d485f3e4] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:9009cf7f724cf7e3] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:ee60257a3951b4eb] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-text:d050b3f87d0e7c2c] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-chart:ad9cc366d2cdb6e2] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-template:27008a287d8f1a09] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-template:686288d9473a0ad7] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-template:58866c432c8047e0] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-template:9161cc515f695ecd] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [error] [ui-template:2ba23fd44ad6e86b] TypeError: Cannot read properties of undefined (reading 'includes')
22 Dec 19:40:51 - [info] Started flows
22 Dec 19:40:51 - [info] [mqtt-broker:Local mqtt] Connected to broker: http://localhost
22 Dec 19:46:46 - [info] [ui-base:Dashboard] Disconnected XAOjCooqUK0eNr1OAAAB due to transport close
22 Dec 19:46:48 - [info] [ui-base:Dashboard] Disconnected W9pqwjFYQisPEuazAAAD due to transport close
22 Dec 19:47:22 - [info] [ui-base:Dashboard] Disconnected wr6ifOXCFYxHsMwdAAAF due to transport close
22 Dec 19:48:04 - [info] [ui-base:Dashboard] Disconnected r9SnFlOk0S-anomjAAAH due to transport close
Well that's an issue. Will take a look tonight and get a fix out.
Fairly sure I know the problem, I think if you removed your ui-base and added a new one, it will work.
I will get a fix in, but this should unblock in immediate timeframe. Currently mid bedtime routine with my daughters.
You are correct. Deleting my 'ui-base', deploying, and adding a new one (same name) has restored the dashboard, and no log errors
Releasing 0.11.1 now.
v0.11.1
The dashboard loads OK, and appears functional, but I'm noting these 'undefined' entries in the log which maybe new, or that I haven't noticed previously.
Is it just debugging?
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:87f1e1fa47a4d50a undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:24b58fe1f550fd18 undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:e4c76dbd1c4d844a undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:ee60257a3951b4eb undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:d050b3f87d0e7c2c undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:8c0b4930d485f3e4 undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:9009cf7f724cf7e3 undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:3a5ba08ef8bc953f undefined - ui-text
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:195bc4d0420ab07a undefined - ui-chart
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:11675ce3e247ee27 undefined - ui-button
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:1a391f1b47f9ac5a undefined - ui-button
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:12c7093609532b00 undefined - ui-button
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:e2712a1bde4a33e5 undefined - ui-button
conn:fIHGK11AwN-UJ0DDAAAB on:widget-load:aa418cf38de5a548 undefined - ui-button
Have always been there, I left on default debugging for on-load, on-change and on-action whilst we're still in 0.xx.yy versioning so it's easier for me to debug other people's instances, so I'm not too worried by the logs being there, although the undefined is a little odd.
Which nodes are you using here? Suggests that whichever node you're using isn't loading state correctly from our server-side store. If it's a ui-notification or ui-control, I'd expect this, as they don't store state. Any others, and we likely have an issue.
They are ui-text, ui-button & ui-chart nodes.
I've updated my previous post above with the node types as a suffix.
** EDIT ** - Git issue Debug reporting that state not loading correctly from server store · Issue #455 · FlowFuse/node-red-dashboard · GitHub raised
Will we store the last state when updating pages in the ui-template?
Hello all
I'm trying around with the new dashboard.
So i have some troubles with the template, what i try to achieve is passing trough a msg.payload from 0 - to 100 to a progress-linear bar
however it doesn't update the progressbar. what works is the label in the same function.
i tried it in several different ways. for example with model-value={{ this.loading }}
Anyone have an idea if this is a bug or a me problem?
<template>
<v-progress-linear model-value="loading"></v-progress-linear>
<label>{{ msg.payload}}</label>
<label>{{ this.loading }}</label>
</template>
<style>
label {
color: blue
}
</style>
<script>
export default {
data () {
return {
loading: 0
};
},
mounted () {
this.$socket.on("msg-input:" + this.id, (msg) => {
this.loading = msg.payload;
});
}
}
</script>
Try
<template>
<v-progress-linear v-model="loading" color="amber" height="25"></v-progress-linear>
<label>{{ msg.payload}}</label>
<label>{{ loading }}</label>
</template>
<style>
label {
color: blue
}
</style>
<script>
export default {
data () {
return {
loading: 0
};
},
mounted () {
this.$socket.on("msg-input:" + this.id, (msg) => {
this.loading = msg.payload;
});
}
}
</script>
The
v-progress-linearcomponent will be responsive to user input when using v-model.
<template>
<v-progress-linear
style="display: flex; margin: auto; width: 200px; height: 20px; color: #BD9608; background-color: #4F4F4F; border: 1px solid #000000; border-radius: 12px;"
v-model="entrada">
<template v-slot:default="{ value }">
<strong style="color: #000000">{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-linear>
</template>
<script>
export default {
data() {
return {
chave: 'a4',
entrada: 0,
};
},
methods: {
setState(value) {
this.entrada = value;
localStorage.setItem(this.chave, value.toString());
},
recuperarEstadoAnterior() {
const savedValue = localStorage.getItem(this.chave);
if (savedValue !== null) {
this.entrada = parseInt(savedValue, 10);
}
},
},
mounted() {
this.recuperarEstadoAnterior();
this.$socket.on("msg-input:" + this.id, (msg) => {
this.setState(msg.payload);
});
},
};
</script>
<template>
<v-progress-circular size="20" style="display: flex; margin: auto; width: 75px; height: 75px; color: #BD9608; background-color: #4F4F4F; border: 1px solid #000000; border-radius: 18px;" v-model="entrada">
<template v-slot:default="{ value }">
<strong style="color: #000000">{{ Math.ceil(value) }}%</strong>
</template>
</v-progress-circular>
</template>
<script>
export default {
data() {
return {
chave: 'a5',
entrada: 0,
};
},
methods: {
setState(value) {
this.entrada = value;
localStorage.setItem(this.chave, value.toString());
},
recuperarEstadoAnterior() {
const savedValue = localStorage.getItem(this.chave);
if (savedValue !== null) {
this.entrada = parseInt(savedValue, 10);
}
},
},
mounted() {
this.recuperarEstadoAnterior();
this.$socket.on("msg-input:" + this.id, (msg) => {
this.setState(msg.payload);
});
},
};
</script>
Below are the examples I put together, but I'm waiting for more progress on the project as I came across a lot of inconsistencies.
Hi All, just wanted to point out a particular feature that I've just released into 0.11.2 as it was a common request: UI Chart - Add point shape & radius options by joepavitt · Pull Request #468 · FlowFuse/node-red-dashboard · GitHub
Should one be able to specify different shapes for each line on the chart?
Not right now, this was a first step to at least offer an improvement on the existing functionality (when it wasn't definable at all) - but agree that line-by-line or point-by-point definition as part of the msg would be a natural next step
Hi Joe
I see that you've added this feature as a ui setting in node props.
Just thinking about future consistency... are you intending eventually to also add line thickness, line style, line colour, etc, etc also as ui settings in node props?
If so, it's going to get pretty crowded in there, especially if you are allowing options line by line.
Wouldn't it be better to avoid adding such settings to the ui, and just use the msg for fine tuning the config?
Logically the colour should be set the same way as such other properties.
It's a very valid point - for me, I want NR to be as low-code as possible, so my gut would say, yes, add it into the side menu as additional options - but I do understand the consequence of overwhelming the user with too many options.
As @Colin has put - there is also then overlap with the line colours, that configures on a line-by-line basis, but maybe we need to re-think how a "line" is defined in that side editor, or draw a line with what we have then allow for further configuration via some agreed upon API?
Yes, that's why I mentioned it in the same context;
Gets my vote.
I realize that this isn't Flexdash, but I always found the way that the config was added to the msg very easy to comprehend, and implement.
Each line was defined in a particular order. so for example, line 3 was labelled Solar, with a line width of 1pt, coloured yellow and whose scale was on the left y axis, etc.
msg.labels = ["zero line", "Power grid", "Solar", "Diverted", "Diverter temp"]
msg.widths = [2, 2, 1, 2, 2]
msg.colors = ['blue', 'red', 'yellow', 'grey', 'purple']
msg.axes = ["right", "right", "left", "right", "right"]
msg.left_unit = " °C"
msg.left_decimals = 1
msg.right_unit = " W"
msg.left_min = 10
msg.left_max = 40
msg.right_decimals = 0
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy