Hi Alex, fantastic tutorial! There does seem to be one problem though and I’m not having any luck trying to fix it. If you move the arm slider before the base, the pivot point of the base moves when sliding. Do you know why this is happening?
It's been a while since I used it, but I remember it was very tricky to deal with. AFAIR re-grouping the elements or dynamically change the pivotal point in node messages was helpful.
hello Alex, this is a great job. I want to create an SVG animation similar to a level gauge, to represent water levels. How to make it with cx_move?? please advise me. Thanks you...
At the repo where is a version 2 readme github.com/alex-controlx/red-dashboard-svg-control/blob/master/README.2.MD there you can find the `movePayload` interface. Also at 46:00 there is an example of the move payload (but be aware it is version 1).
Hello Alex, first of all thank you for this video!!! I would be interested to know if it is possible to display images with a "1" signal and not hide them with a "1"? I would also like to integrate pictures with a digital display, possibly also buttons. Do you have any documents or links that you could suggest to me? Thanks, Greetings
The functionality to hide can be easily inverted. You can add a CSS property to your image, like so: "display: none". That will make the image hidden by default. To show it you send "1" to a function node where you can invert it to "0" and vice versa. To use buttons use version 2. It is available on GitHub.
I tried it today but nothing worked, text was fine in the svg editor you mentioned, but after exporting it shifts, also thr github mentions thr status supports tspans but in my experience it doesn't, only first line gets changed. Very disappointing but thank you, it's not yoyr fault.
Yes, it is a bit tricky to make an SVG file. It requires to be careful with grouping and positioning. All elements required Move will have to be without translation properties. If something doesn't work, leave a comment/bug at GitHub. This way it will be easier to track and solve the issues.
Many thanks my friend, this video was very helpful however I have a problem and if you can help me I would really appreciate it. Regarding to the "spray@cx_hide" part, in my project I am using 5 different sensors instead of switch but the problem is whenever one of the sensors is true, all five graphical objects are shown on my screen. I don't know how to separate these five sensor signals from each others so that each sensor makes it's own graphical object activated. Looking forward for your kind reply.
If you have a few devices to show and hide you need to assign different IDs. For example spray one should be "spray1@cx_hide", spray 2 is "spray2@cx_hide" and so on. Then create 5 switches which will be controlling unique IDs.
Hi Alex, looks promising! I will give it a try (designing in Inkscape with attributes configuration) and report back. But what I'm also looking for is to change the line-thickness and when hoovering that a graphic is presented (but I think that is possible with just javascript and inkscape drawing). Mario
@@alexsharikov1435 Hi Alex, IT works! When I woke up this morning in Belgium near Bruges, Google informed me with your message of the update. Time difference is the max ... I tested it out and all went well. I made a POC drawing with Inkscape, an open source vector drawing with native svg document encoding. In the software, you can add the id with the object properties (CTRL+SHIFT+O) and you can shrink the page size to your drawing layout (making it a perfect fit). Bonus is that (chrome) shows the "Title" object property as a popup! The text was updated every second with current time using simpletime node, and the color of the lines and objects with the colour picker. Tx & IOU! Aussies are awesome ... We know Frank Farina, Robbie McEwen, Angus from Maker's Muse youtube channel and off course Mick Dundee :) I will try to visualise data bandwidth and power consumption in my house with these tools ... and maybe expanding some svg settings using your concept. Mario
@@alexsharikov1435 please Alex do you know how i can change two same things in same funcion example: using function cx_color in template to change color of two things in same time when i click in one button(switch) It must be send two topic in function node but how i can do this and what is the syntax of two variable topic in same functiin(color)
Can you also ad a button in SVG that controls things in node red?
gracias, está muy explícito todo.
Hello Alex,
How to set if we have many inputs change status at the same time? The Template only receive one input at a time.
You can send an array of requests in the payload. It will change a number of statues using only one message.
Hi Alex, fantastic tutorial! There does seem to be one problem though and I’m not having any luck trying to fix it. If you move the arm slider before the base, the pivot point of the base moves when sliding. Do you know why this is happening?
It's been a while since I used it, but I remember it was very tricky to deal with. AFAIR re-grouping the elements or dynamically change the pivotal point in node messages was helpful.
Nice video thanks.
For the gate slider you don't have to invert if you set the slider min=90 & max=0.
Try 0 to -90. It should work, as this value transferred to coordinates on the screen and it can go negative relatively to original position.
hello Alex, this is a great job. I want to create an SVG animation similar to a level gauge, to represent water levels. How to make it with cx_move?? please advise me.
Thanks you...
At the repo where is a version 2 readme github.com/alex-controlx/red-dashboard-svg-control/blob/master/README.2.MD there you can find the `movePayload` interface. Also at 46:00 there is an example of the move payload (but be aware it is version 1).
Thank you very much.
very nice!
This is so cool... thank you !
what is the name for the software for drawing SVG ?
Boxy SVG
is it not available anymore? I can't install it through npm
This isn't a NPM package. You need to copy and paste the text from the template.html into the template node.
Hello Alex, first of all thank you for this video!!!
I would be interested to know if it is possible to display images with a "1" signal and not hide them with a "1"?
I would also like to integrate pictures with a digital display, possibly also buttons.
Do you have any documents or links that you could suggest to me?
Thanks, Greetings
The functionality to hide can be easily inverted. You can add a CSS property to your image, like so: "display: none". That will make the image hidden by default. To show it you send "1" to a function node where you can invert it to "0" and vice versa.
To use buttons use version 2. It is available on GitHub.
Thank you for the fast answer. I'm not familiar with programming, do you have an example where it works?
If you aren't familiar with programming you can use Switch and Change nodes. I don't have any code examples at hand. Try googling it.
I tried it today but nothing worked, text was fine in the svg editor you mentioned, but after exporting it shifts, also thr github mentions thr status supports tspans but in my experience it doesn't, only first line gets changed.
Very disappointing but thank you, it's not yoyr fault.
Yes, it is a bit tricky to make an SVG file. It requires to be careful with grouping and positioning. All elements required Move will have to be without translation properties. If something doesn't work, leave a comment/bug at GitHub. This way it will be easier to track and solve the issues.
Many thanks my friend, this video was very helpful however I have a problem and if you can help me I would really appreciate it.
Regarding to the "spray@cx_hide" part, in my project I am using 5 different sensors instead of switch but the problem is
whenever one of the sensors is true, all five graphical objects are shown on my screen. I don't know how to separate
these five sensor signals from each others so that each sensor makes it's own graphical object activated.
Looking forward for your kind reply.
If you have a few devices to show and hide you need to assign different IDs. For example spray one should be "spray1@cx_hide", spray 2 is "spray2@cx_hide" and so on. Then create 5 switches which will be controlling unique IDs.
@@alexsharikov1435 Thanks a lot, now it's working perfectly fine. Keep up the good work my friend.
Thank you.. Awesone
Hi Alex, looks promising! I will give it a try (designing in Inkscape with attributes configuration) and report back. But what I'm also looking for is to change the line-thickness and when hoovering that a graphic is presented (but I think that is possible with just javascript and inkscape drawing). Mario
@@alexsharikov1435 Hi Alex, IT works! When I woke up this morning in Belgium near Bruges, Google informed me with your message of the update. Time difference is the max ...
I tested it out and all went well. I made a POC drawing with Inkscape, an open source vector drawing with native svg document encoding. In the software, you can add the id with the object properties (CTRL+SHIFT+O) and you can shrink the page size to your drawing layout (making it a perfect fit). Bonus is that (chrome) shows the "Title" object property as a popup! The text was updated every second with current time using simpletime node, and the color of the lines and objects with the colour picker.
Tx & IOU! Aussies are awesome ... We know Frank Farina, Robbie McEwen, Angus from Maker's Muse youtube channel and off course Mick Dundee :)
I will try to visualise data bandwidth and power consumption in my house with these tools ... and maybe expanding some svg settings using your concept.
Mario
was it an alternative for boxy svg for free ?
@@alexsharikov1435 thanks bro can you explain the java script how you create it or provide me any source to learn it
@@alexsharikov1435 i do this it work for me will you move the shoulder and wrist separately in next tutorial?
Bro please can you send me the flow of full project you showed us in the beginning
Because i dont find it in github link
Please i want it
@@alexsharikov1435 thanks bro🌷
@@alexsharikov1435 please Alex do you know how i can change two same things in same funcion example: using function cx_color in template to change color of two things in same time when i click in one button(switch)
It must be send two topic in function node but how i can do this and what is the syntax of two variable topic in same functiin(color)
hello Alex, this is awesome. please i will need your help, want to create such HMI for a water station
No problem, how can I help?
Thanks You!
You are welcome!