Hello, I am quite new here and i am working with ST32cubeMonitor.
I urgently need a possibility to show several oscillating values in a complex
y over x version. Is there any possibility to make such a module by myself ? and how did this work or are there tools or examples which do such visualisation ?
Thank you for helping.
Welcome to the forum @Tetrastruct
Can you show is an example of what you want the display to look like? Also in what format are the complex values in node red?
Hello Colin,
Thank you very much for your answer. Maybe you are the one who can help me a little bit and take me
at the hand for some informations. I dived in the monitor program by trail and error and had some success to visualize my STM32F405 datas. The main issue is to show datas y over x, because in the drive control techniques you vhave always to handle with rotating vactors and their position to each other.
Normaly you can also use complex numbers to describe these vectors mathematically. So the visualisation is not only for complex numers also for kartesion vectors or vectors in polar coordinates.
My need is to take always pairs of (x,y) values, isolate them and link them to a block where this datastream is imediately shown as a point in the coordinate system. The coordinate system should stay still without autoscaling, by putting some cornerpoints at the maximum values i.e.
I am trieing to build such a block by the tools in the monitor program, but I have no experiences, ho to direct a isolated variable into a msg.template.
I found an example to show points y over x and modified it, (see the code) but all my tries how to bring the datastream of an isolated variable into this file had no success cause of my low experience.
Could you tell me how I can direct a isolated variable into another program?
The added file works and shows at the dashboard what i imagine. It sould also work for more variable-pairs, lets say max 10 pairs.
Please answer me. Im sitting here in Germany waiting for help to do it by my own.
Bye Bye and thank you
Reinhard
<canvas id="Polartest" width="3" height="3" style="border:2px solid #000000;"></canvas>
<script>
new Chart(document.getElementById("Polartest"), {
type: 'bubble',
data: {
labels: "label",
datasets: [
{
label: "Bases",
backgroundColor: "rgba(255, 216, 0, 1.0)",
borderColor: "#000",
data: [
{ x: 0 , y: 0 , r: 4}
]
},
{
label: "corner",
backgroundColor: "rgba(255, 255, 255, 1.0)",
borderColor: "#000",
data: [
{ x: 2048, y: 2048, r: 2},
{ x: -2048, y: -2048, r: 2},
{ x: -2048, y: 2048, r: 2},
{ x: 2048, y: -2048, r: 2}
]
},
{
label: ["POI"],
backgroundColor: "rgba(72, 255, 70,1.0)",
borderColor: "#000",
data: [
{x: -1, y: 1, r: 4 }
]
}
]
},
options: {
legend: {
display: true,
labels: {
fontColor: 'rgb(255, 99, 132)'
}
},
title: {
display: true,
text: 'Complex Space Vectors'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "y-Axes"
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "x-Axes"
}
}]
}
}
});
</script>
`
This template i created by changing an examle I found and it shows a little bit what i mean.
When I put it this in a </> template it works- But how can i direct my variables (isolated) to the x, y positions of theis template. This is the my main question.
Thank youHave you tried the node-red-node-ui-vega node?
There are several examples that you can import from the Node-RED editor menu:
Import > Examples > node-red-node-ui-vega
Here is a demo...
Demo flow...
[{"id":"21e0e3e1.04f72c","type":"ui_vega","z":"459244a5.abbb6c","group":"84147604.b29078","name":"Vega","order":3,"width":"10","height":"9","vega":"","x":390,"y":100,"wires":[]},{"id":"cea3fa34.2ba198","type":"template","z":"459244a5.abbb6c","name":"Tree Data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"[\n {\n \"id\": 0,\n \"name\": \"@node-red\"\n },\n {\n \"id\": 1,\n \"name\": \"util\",\n \"parent\": 0\n },\n {\n \"id\": 2,\n \"name\": \"lib\",\n \"parent\": 1\n },\n {\n \"id\": 3,\n \"name\": \"nodes\",\n \"parent\": 0\n },\n {\n \"id\": 4,\n \"name\": \"locales\",\n \"parent\": 3\n },\n {\n \"id\": 5,\n \"name\": \"ja\",\n \"parent\": 4\n },\n {\n \"id\": 6,\n \"name\": \"zh-CN\",\n \"parent\": 4\n },\n {\n \"id\": 7,\n \"name\": \"de\",\n \"parent\": 4\n },\n {\n \"id\": 8,\n \"name\": \"ko\",\n \"parent\": 4\n },\n {\n \"id\": 9,\n \"name\": \"en-US\",\n \"parent\": 4\n },\n {\n \"id\": 10,\n \"name\": \"core\",\n \"parent\": 3\n },\n {\n \"id\": 11,\n \"name\": \"parsers\",\n \"parent\": 10\n },\n {\n \"id\": 12,\n \"name\": \"hardware\",\n \"parent\": 10\n },\n {\n \"id\": 13,\n \"name\": \"core\",\n \"parent\": 10\n },\n {\n \"id\": 14,\n \"name\": \"lib\",\n \"parent\": 13\n },\n {\n \"id\": 15,\n \"name\": \"debug\",\n \"parent\": 14\n },\n {\n \"id\": 16,\n \"name\": \"io\",\n \"parent\": 10\n },\n {\n \"id\": 17,\n \"name\": \"lib\",\n \"parent\": 16\n },\n {\n \"id\": 18,\n \"name\": \"logic\",\n \"parent\": 10\n },\n {\n \"id\": 19,\n \"name\": \"storage\",\n \"parent\": 10\n },\n {\n \"id\": 20,\n \"name\": \"icons\",\n \"parent\": 3\n },\n {\n \"id\": 21,\n \"name\": \"editor-api\",\n \"parent\": 0\n },\n {\n \"id\": 22,\n \"name\": \"lib\",\n \"parent\": 21\n },\n {\n \"id\": 23,\n \"name\": \"auth\",\n \"parent\": 22\n },\n {\n \"id\": 24,\n \"name\": \"admin\",\n \"parent\": 22\n },\n {\n \"id\": 25,\n \"name\": \"editor\",\n \"parent\": 22\n },\n {\n \"id\": 26,\n \"name\": \"runtime\",\n \"parent\": 0\n },\n {\n \"id\": 27,\n \"name\": \"locales\",\n \"parent\": 26\n },\n {\n \"id\": 28,\n \"name\": \"ja\",\n \"parent\": 27\n },\n {\n \"id\": 29,\n \"name\": \"de\",\n \"parent\": 27\n },\n {\n \"id\": 30,\n \"name\": \"ko\",\n \"parent\": 27\n },\n {\n \"id\": 31,\n \"name\": \"en-US\",\n \"parent\": 27\n },\n {\n \"id\": 32,\n \"name\": \"lib\",\n \"parent\": 26\n },\n {\n \"id\": 33,\n \"name\": \"nodes\",\n \"parent\": 32\n },\n {\n \"id\": 34,\n \"name\": \"context\",\n \"parent\": 33\n },\n {\n \"id\": 35,\n \"name\": \"flows\",\n \"parent\": 33\n },\n {\n \"id\": 36,\n \"name\": \"library\",\n \"parent\": 32\n },\n {\n \"id\": 37,\n \"name\": \"storage\",\n \"parent\": 32\n },\n {\n \"id\": 38,\n \"name\": \"localfilesystem\",\n \"parent\": 37\n },\n {\n \"id\": 39,\n \"name\": \"projects\",\n \"parent\": 38\n },\n {\n \"id\": 40,\n \"name\": \"ssh\",\n \"parent\": 39\n },\n {\n \"id\": 41,\n \"name\": \"git\",\n \"parent\": 39\n },\n {\n \"id\": 42,\n \"name\": \"api\",\n \"parent\": 32\n },\n {\n \"id\": 43,\n \"name\": \"registry\",\n \"parent\": 0\n },\n {\n \"id\": 44,\n \"name\": \"lib\",\n \"parent\": 43\n },\n {\n \"id\": 45,\n \"name\": \"editor-client\",\n \"parent\": 0\n },\n {\n \"id\": 46,\n \"name\": \"locales\",\n \"parent\": 45\n },\n {\n \"id\": 47,\n \"name\": \"ja\",\n \"parent\": 46\n },\n {\n \"id\": 48,\n \"name\": \"zh-CN\",\n \"parent\": 46\n },\n {\n \"id\": 49,\n \"name\": \"de\",\n \"parent\": 46\n },\n {\n \"id\": 50,\n \"name\": \"ko\",\n \"parent\": 46\n },\n {\n \"id\": 51,\n \"name\": \"en-US\",\n \"parent\": 46\n },\n {\n \"id\": 52,\n \"name\": \"templates\",\n \"parent\": 45\n },\n {\n \"id\": 53,\n \"name\": \"src\",\n \"parent\": 45\n },\n {\n \"id\": 54,\n \"name\": \"images\",\n \"parent\": 53\n },\n {\n \"id\": 55,\n \"name\": \"typedInput\",\n \"parent\": 54\n },\n {\n \"id\": 56,\n \"name\": \"icons\",\n \"parent\": 54\n },\n {\n \"id\": 57,\n \"name\": \"js\",\n \"parent\": 53\n },\n {\n \"id\": 58,\n \"name\": \"ui\",\n \"parent\": 57\n },\n {\n \"id\": 59,\n \"name\": \"touch\",\n \"parent\": 58\n },\n {\n \"id\": 60,\n \"name\": \"projects\",\n \"parent\": 58\n },\n {\n \"id\": 61,\n \"name\": \"editors\",\n \"parent\": 58\n },\n {\n \"id\": 62,\n \"name\": \"common\",\n \"parent\": 58\n },\n {\n \"id\": 63,\n \"name\": \"text\",\n \"parent\": 57\n },\n {\n \"id\": 64,\n \"name\": \"sass\",\n \"parent\": 53\n },\n {\n \"id\": 65,\n \"name\": \"ui\",\n \"parent\": 64\n },\n {\n \"id\": 66,\n \"name\": \"common\",\n \"parent\": 65\n },\n {\n \"id\": 67,\n \"name\": \"ace\",\n \"parent\": 53\n },\n {\n \"id\": 68,\n \"name\": \"mode\",\n \"parent\": 67\n },\n {\n \"id\": 69,\n \"name\": \"bin\",\n \"parent\": 67\n },\n {\n \"id\": 70,\n \"name\": \"snippets\",\n \"parent\": 69\n },\n {\n \"id\": 71,\n \"name\": \"vendor\",\n \"parent\": 53\n },\n {\n \"id\": 72,\n \"name\": \"bootstrap\",\n \"parent\": 71\n },\n {\n \"id\": 73,\n \"name\": \"css\",\n \"parent\": 72\n },\n {\n \"id\": 74,\n \"name\": \"js\",\n \"parent\": 72\n },\n {\n \"id\": 75,\n \"name\": \"img\",\n \"parent\": 72\n },\n {\n \"id\": 76,\n \"name\": \"marked\",\n \"parent\": 71\n },\n {\n \"id\": 77,\n \"name\": \"jsonata\",\n \"parent\": 71\n },\n {\n \"id\": 78,\n \"name\": \"jquery\",\n \"parent\": 71\n },\n {\n \"id\": 79,\n \"name\": \"css\",\n \"parent\": 78\n },\n {\n \"id\": 80,\n \"name\": \"smoothness\",\n \"parent\": 79\n },\n {\n \"id\": 81,\n \"name\": \"images\",\n \"parent\": 80\n },\n {\n \"id\": 82,\n \"name\": \"js\",\n \"parent\": 78\n },\n {\n \"id\": 83,\n \"name\": \"i18next\",\n \"parent\": 71\n },\n {\n \"id\": 84,\n \"name\": \"d3\",\n \"parent\": 71\n },\n {\n \"id\": 85,\n \"name\": \"ace\",\n \"parent\": 71\n },\n {\n \"id\": 86,\n \"name\": \"snippets\",\n \"parent\": 85\n },\n {\n \"id\": 87,\n \"name\": \"font-awesome\",\n \"parent\": 71\n },\n {\n \"id\": 88,\n \"name\": \"css\",\n \"parent\": 87\n },\n {\n \"id\": 89,\n \"name\": \"fonts\",\n \"parent\": 87\n }\n]\n","output":"json","x":380,"y":200,"wires":[["e1ab4237.3d54c"]]},{"id":"5ce63905.31c738","type":"http in","z":"459244a5.abbb6c","name":"","url":"/tree-data","method":"get","upload":false,"swaggerDoc":"","x":200,"y":200,"wires":[["cea3fa34.2ba198"]]},{"id":"e1ab4237.3d54c","type":"http response","z":"459244a5.abbb6c","name":"","statusCode":"","headers":{},"x":570,"y":200,"wires":[]},{"id":"e8086d9c.1ec5a","type":"comment","z":"459244a5.abbb6c","name":"↓ Display on Dashboard","info":"","x":220,"y":40,"wires":[]},{"id":"f7890dd7.a12d1","type":"comment","z":"459244a5.abbb6c","name":"↓ Provide URL access of data used in Vega spec.","info":"","x":300,"y":160,"wires":[]},{"id":"140b0f1062b96436","type":"inject","z":"459244a5.abbb6c","name":"example 2","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"$schema\":\"https://vega.github.io/schema/vega/v5.json\",\"description\":\"A radar chart example, showing multiple dimensions in a radial layout.\",\"width\":480,\"height\":450,\"padding\":5,\"autosize\":{\"type\":\"none\",\"contains\":\"padding\"},\"signals\":[{\"name\":\"radius\",\"update\":\"width / 2\"}],\"data\":[{\"name\":\"table\",\"url\":\"/example2data\"},{\"name\":\"keys\",\"source\":\"table\",\"transform\":[{\"type\":\"aggregate\",\"groupby\":[\"key\"]}]}],\"scales\":[{\"name\":\"angular\",\"type\":\"point\",\"range\":{\"signal\":\"[-PI, PI]\"},\"padding\":0.5,\"domain\":{\"data\":\"table\",\"field\":\"key\"}},{\"name\":\"radial\",\"type\":\"linear\",\"range\":{\"signal\":\"[0, radius]\"},\"zero\":true,\"nice\":false,\"domain\":{\"data\":\"table\",\"field\":\"value\"},\"domainMin\":0},{\"name\":\"color\",\"type\":\"ordinal\",\"domain\":{\"data\":\"table\",\"field\":\"category\"},\"range\":{\"scheme\":\"category10\"}}],\"encode\":{\"enter\":{\"x\":{\"signal\":\"radius\"},\"y\":{\"signal\":\"radius\"}}},\"marks\":[{\"type\":\"group\",\"name\":\"categories\",\"zindex\":1,\"from\":{\"facet\":{\"data\":\"table\",\"name\":\"facet\",\"groupby\":[\"category\"]}},\"marks\":[{\"type\":\"line\",\"name\":\"category-line\",\"from\":{\"data\":\"facet\"},\"encode\":{\"enter\":{\"interpolate\":{\"value\":\"linear-closed\"},\"x\":{\"signal\":\"scale('radial', datum.value) * cos(scale('angular', datum.key))\"},\"y\":{\"signal\":\"scale('radial', datum.value) * sin(scale('angular', datum.key))\"},\"stroke\":{\"scale\":\"color\",\"field\":\"category\"},\"strokeWidth\":{\"value\":1},\"fill\":{\"scale\":\"color\",\"field\":\"category\"},\"fillOpacity\":{\"value\":0.1}}}},{\"type\":\"text\",\"name\":\"value-text\",\"from\":{\"data\":\"category-line\"},\"encode\":{\"enter\":{\"x\":{\"signal\":\"datum.x\"},\"y\":{\"signal\":\"datum.y\"},\"text\":{\"signal\":\"datum.datum.value\"},\"align\":{\"value\":\"center\"},\"baseline\":{\"value\":\"middle\"},\"fill\":{\"value\":\"black\"}}}}]},{\"type\":\"rule\",\"name\":\"radial-grid\",\"from\":{\"data\":\"keys\"},\"zindex\":0,\"encode\":{\"enter\":{\"x\":{\"value\":0},\"y\":{\"value\":0},\"x2\":{\"signal\":\"radius * cos(scale('angular', datum.key))\"},\"y2\":{\"signal\":\"radius * sin(scale('angular', datum.key))\"},\"stroke\":{\"value\":\"lightgray\"},\"strokeWidth\":{\"value\":1}}}},{\"type\":\"text\",\"name\":\"key-label\",\"from\":{\"data\":\"keys\"},\"zindex\":1,\"encode\":{\"enter\":{\"x\":{\"signal\":\"(radius + 5) * cos(scale('angular', datum.key))\"},\"y\":{\"signal\":\"(radius + 5) * sin(scale('angular', datum.key))\"},\"text\":{\"field\":\"key\"},\"align\":[{\"test\":\"abs(scale('angular', datum.key)) > PI / 2\",\"value\":\"right\"},{\"value\":\"left\"}],\"baseline\":[{\"test\":\"scale('angular', datum.key) > 0\",\"value\":\"top\"},{\"test\":\"scale('angular', datum.key) == 0\",\"value\":\"middle\"},{\"value\":\"bottom\"}],\"fill\":{\"value\":\"black\"},\"fontWeight\":{\"value\":\"bold\"}}}},{\"type\":\"line\",\"name\":\"outer-line\",\"from\":{\"data\":\"radial-grid\"},\"encode\":{\"enter\":{\"interpolate\":{\"value\":\"linear-closed\"},\"x\":{\"field\":\"x2\"},\"y\":{\"field\":\"y2\"},\"stroke\":{\"value\":\"lightgray\"},\"strokeWidth\":{\"value\":1}}}}]}","payloadType":"json","x":200,"y":120,"wires":[["21e0e3e1.04f72c"]]},{"id":"af3636ee0ac08a17","type":"inject","z":"459244a5.abbb6c","name":"example 1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"width\":480,\"height\":450,\"padding\":5,\"autosize\":\"none\",\"signals\":[{\"name\":\"originX\",\"update\":\"width / 2\"},{\"name\":\"originY\",\"update\":\"height / 2\"}],\"data\":[{\"name\":\"tree\",\"url\":\"/tree-data\",\"transform\":[{\"type\":\"stratify\",\"key\":\"id\",\"parentKey\":\"parent\"},{\"type\":\"tree\",\"method\":\"tidy\",\"size\":[1,230],\"as\":[\"alpha\",\"radius\",\"depth\",\"children\"]},{\"type\":\"formula\",\"expr\":\"(360 * datum.alpha + 270) % 360\",\"as\":\"angle\"},{\"type\":\"formula\",\"expr\":\"PI * datum.angle / 180\",\"as\":\"radians\"},{\"type\":\"formula\",\"expr\":\"inrange(datum.angle, [90, 270])\",\"as\":\"leftside\"},{\"type\":\"formula\",\"expr\":\"originX + datum.radius * cos(datum.radians)\",\"as\":\"x\"},{\"type\":\"formula\",\"expr\":\"originY + datum.radius * sin(datum.radians)\",\"as\":\"y\"}]},{\"name\":\"links\",\"source\":\"tree\",\"transform\":[{\"type\":\"treelinks\"},{\"type\":\"linkpath\",\"shape\":\"line\",\"orient\":\"radial\",\"sourceX\":\"source.radians\",\"sourceY\":\"source.radius\",\"targetX\":\"target.radians\",\"targetY\":\"target.radius\"}]}],\"scales\":[{\"name\":\"color\",\"type\":\"linear\",\"range\":{\"scheme\":\"magma\"},\"domain\":{\"data\":\"tree\",\"field\":\"depth\"},\"zero\":true}],\"marks\":[{\"type\":\"path\",\"from\":{\"data\":\"links\"},\"encode\":{\"update\":{\"x\":{\"signal\":\"originX\"},\"y\":{\"signal\":\"originY\"},\"path\":{\"field\":\"path\"},\"stroke\":{\"value\":\"#ccc\"}}}},{\"type\":\"symbol\",\"from\":{\"data\":\"tree\"},\"encode\":{\"enter\":{\"size\":{\"value\":100},\"stroke\":{\"value\":\"#fff\"}},\"update\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"},\"fill\":{\"scale\":\"color\",\"field\":\"depth\"}}}},{\"type\":\"text\",\"from\":{\"data\":\"tree\"},\"encode\":{\"enter\":{\"text\":{\"field\":\"name\"},\"fontSize\":{\"value\":12},\"baseline\":{\"value\":\"middle\"}},\"update\":{\"x\":{\"field\":\"x\"},\"y\":{\"field\":\"y\"},\"dx\":{\"signal\":\"(datum.leftside ? -1 : 1) * 6\"},\"angle\":{\"signal\":\"datum.leftside ? datum.angle - 180 : datum.angle\"},\"align\":{\"signal\":\"datum.leftside ? 'right' : 'left'\"},\"opacity\":1}}}]}","payloadType":"json","x":200,"y":80,"wires":[["21e0e3e1.04f72c"]]},{"id":"595b88879081fe98","type":"http in","z":"459244a5.abbb6c","name":"","url":"/example2data","method":"get","upload":false,"swaggerDoc":"","x":210,"y":260,"wires":[["8c90127a27538b1c"]]},{"id":"8c90127a27538b1c","type":"template","z":"459244a5.abbb6c","name":"Example 2 Data","field":"payload","fieldType":"msg","format":"handlebars","syntax":"plain","template":"[\n {\n \"key\": \"key-0\",\n \"value\": 19,\n \"category\": 0\n },\n {\n \"key\": \"key-1\",\n \"value\": 22,\n \"category\": 0\n },\n {\n \"key\": \"key-2\",\n \"value\": 14,\n \"category\": 0\n },\n {\n \"key\": \"key-3\",\n \"value\": 38,\n \"category\": 0\n },\n {\n \"key\": \"key-4\",\n \"value\": 23,\n \"category\": 0\n },\n {\n \"key\": \"key-5\",\n \"value\": 5,\n \"category\": 0\n },\n {\n \"key\": \"key-6\",\n \"value\": 27,\n \"category\": 0\n },\n {\n \"key\": \"key-0\",\n \"value\": 13,\n \"category\": 1\n },\n {\n \"key\": \"key-1\",\n \"value\": 12,\n \"category\": 1\n },\n {\n \"key\": \"key-2\",\n \"value\": 42,\n \"category\": 1\n },\n {\n \"key\": \"key-3\",\n \"value\": 13,\n \"category\": 1\n },\n {\n \"key\": \"key-4\",\n \"value\": 6,\n \"category\": 1\n },\n {\n \"key\": \"key-5\",\n \"value\": 15,\n \"category\": 1\n },\n {\n \"key\": \"key-6\",\n \"value\": 8,\n \"category\": 1\n }\n]","output":"json","x":400,"y":260,"wires":[["6a488ad61cb33960"]]},{"id":"6a488ad61cb33960","type":"http response","z":"459244a5.abbb6c","name":"","statusCode":"","headers":{},"x":570,"y":260,"wires":[]},{"id":"84147604.b29078","type":"ui_group","name":"Group 1","tab":"56d91d75.d0ebf4","order":1,"disp":false,"width":"10","collapse":false},{"id":"56d91d75.d0ebf4","type":"ui_tab","name":"[Vega] Tree Layout","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Here is another demo automating chartjs
Hi Steven, Thanks for your answer.
I think my main problem is that I do not know the syntax how to bring a running variable into a function and at the end in a msg.
Reinhard
Can you give me ahint what I have zo study to learn that or did you know an example ?
I recommend watching this playlist: Node-RED Essentials. The videos are done by the developers of node-red. They're nice & short and to the point. You will understand a whole lot more in about 1 hour. A small investment for a lot of gain.
