do you have to send all that with every point you send ? how do I just add a new single data point to solar for example ?
In the above example, 4 lines = 4 datapoints with a shared timestamp, so yes.
A long time since I've used Flexdash, but I think is was something like [null,null,540,null]
Another highly requested feature (PR) has just been added to ui-chart in the 0.11.3 release - "Append"/"Replace" option, also configurable on a message-by-message basis.
2 Likes
One small snag with the chart Point Style, it doesn't set to anything other than 'Circle'. I have tried setting it to 'None' but it will not 'take'.
I got round the problem by setting Radius to 0, which does work
PS Latest v0.11.3
I'm able to select the full range of options (star, triangle, rectangle etc), but selecting none results in circle points, instead of none.
(setting the size to 0 however gets rid of them)
Yes I discovered that setting Radius to 0 works.
If you go back into the node after setting Point Style to 'None' you will see that it has gone back to 'Circle'
Isn't that what I said?
For me it is only 'None' that doesn't stick. The others work ok.
Sorry, thought you meant that setting to None also resulted in circles, rather than the setting had returned to Circles, my bad.
Have to admit that I hadn't tried any other setting.
Have raised it here - UI Chart - Point Style "none" doesn't work Ā· Issue #480 Ā· FlowFuse/node-red-dashboard Ā· GitHub
Thanks for sharing
Good afternoon everybody. I've been taking some time to watch corrections and improvements in the development of the project. Some issues are still blocking my development and I wanted to know if anyone else needs the implementations I suggest so we can open requests or if I could be wrong in what I want.
1 - Multiple outputs in the ui-templat node as we can do with the functions in node-red. This would simplify the creation of simple buttons that need to separate on and off to turn something on.
2 - Make the ui-template node not allow the direct passage of the input message to the output, thus avoiding loops.
3 - Support loading status on page updates in the ui-template node. If today I mount a simple button there, when I update the page, I can't find a way to make it remember if it was on or off.
4 - I didn't discover or find a way to modify the general look of the page. Add background image. adjust borders and other group settings, pages and other things. This is essential for commercial work with node-red.
--- I'll leave these for everyone's reflection and see if I already have what I need to start working on this project.
If you're using this.send() then the latest message will be stored into our client-side datastore and can be accessed straight by using msg - see docs.
I have improved this a little with Theming updates by joepavitt Ā· Pull Request #514 Ā· FlowFuse/node-red-dashboard Ā· GitHub - which will go into a release this week.
Further customisation can always be done with defining your own CSS - I'll put together a few examples in the docs for useful CSS overrides you might want to do.
-> using msg - see docs
Link does not lead to docs.
Woops - locally working on the docs, and copied the wrong tab - thanks for pointing it out.
I really appreciate the answer. Your patience has been gold. If you can help me adjust this feature on this button, I will multiply all of this in my work. Sorry I can't reach your genius, but I'm visual lol
<template>
<v-btn ref="botao" style="display: flex; flex-direction: column; margin: auto; height: 75px; width: 75px; background-color: #4F4F4F; color: #000000; border: 1px solid #000000; font-size: 14px; border-radius: 18px;" stacked @click="alternar">
Externa
<v-icon ref="icone" style="font-size: 40px;">mdi-beach</v-icon>
</v-btn>
</template>
<script>
export default {
data() {
return {
chave: 'a2'
};
},
methods: {
alternar: function () {
if (window.localStorage.getItem(this.chave) === 'ON') {
this.desligar();
} else if (window.localStorage.getItem(this.chave) === 'OFF') {
this.ligar();
} else {
this.desligar();
}
},
ligar: function () {
window.localStorage.setItem(this.chave, 'ON');
this.$refs.icone.$el.style.color = '#BD9608';
this.$refs.icone.$el.style.textShadow = '0px 0px 10px #BD9608';
if (window.localStorage.getItem(this.chave) === 'OFF') {
this.send({ status: 'ON' });
}
},
desligar: function () {
window.localStorage.setItem(this.chave, 'OFF');
this.$refs.icone.$el.style.color = '#A9A9A9';
this.$refs.icone.$el.style.textShadow = '0px 0px 0px';
if (window.localStorage.getItem(this.chave) === 'ON') {
this.send({ status: 'OFF' });
}
},
setState (value) {
if (value === 'ON') {
this.ligar();
} else if (value === 'OFF') {
this.desligar();
}
}
},
mounted () {
this.setState(window.localStorage.getItem(this.chave));
this.$socket.on("msg-input:" + this.id, (msg) => {
this.setState(msg.payload);
});
}
}
</script>
In this example, this already works but I use browser resources to remember the state of the button when updating the page. If you can convert to make use of your method I would appreciate it.
<template>
<v-btn ref="botao" style="display: flex; flex-direction: column; margin: auto; height: 75px; width: 75px; background-color: #4F4F4F; color: #000000; border: 1px solid #000000; font-size: 14px; border-radius: 18px;" stacked @click="alternar">
Externa
<v-icon ref="icone" style="font-size: 40px; color: #A9A9A9">mdi-beach</v-icon>
</v-btn>
</template>
<script>
export default {
methods: {
alternar: function () {
if (this.msg === 'ON') {
this.desligar();
} else if (this.msg === 'OFF') {
this.ligar();
} else {
this.desligar();
}
},
ligar: function () {
this.$refs.icone.$el.style.color = '#BD9608';
this.$refs.icone.$el.style.textShadow = '0px 0px 10px #BD9608';
},
desligar: function () {
this.$refs.icone.$el.style.color = '#A9A9A9';
this.$refs.icone.$el.style.textShadow = '0px 0px 0px';
},
},
mounted() {
this.$socket.on("msg-input:" + this.id, (msg) => {
if (msg.payload === 'ON') {
this.ligar();
} else if (msg.payload === 'OFF') {
this.desligar();
}
});
},
};
</script>
I'm here if I'm understanding correctly.
Hello everyone
Does someone know a way of using images or svg stored on the node-red server in the new dashboard?
Couldn't find any examples of it.
Thanks in advance
It works pretty much same. Node-RED serves from shared folder and D2.0 is able to reach stuff.
1 Like
Hey Diego, happy to help, althgough I may have missed out a little detail in my understanding of your template. Are you sending on any messages from this ui-template?
