Announce node-red-contrib-ui-svg : feedback request

Share Your Nodes
21

Hey Steve (@Steve-Mcl),
The version on Github has now 3 columns for clickable shapes:

image
Which results in this output message:

image
When an element ID is entered, the value will be copied to the both other columns as default value (only when those columns are still empty !!):

svg_clone_topic_payload
Due to the large number of open issues, I will implement the TypedInput as soon as I am retired :wink:
Remark: the payload format isn't yet as requested by @bakman2, but for JSON again I need a typedInput (and I'm rather short of free time since my holidays are over ...)

1 Like
22

I've implemented the typed input several times in various projects. I could help out?

23

Hi Steve,
I have implemented it also several times, but too much other things to do. So a PR is more than welcome!! Thanks for offering your help!

Just one thing: I would only add the 'json' option, if you don't mind. Then you can fill it automatically with the following (as discussed above with @bakman2):

"payload": {
  "elementId": "myCircle",
  "event": "clicked"
}

I wouldn't add the other options (like global/bool/...). We have discussed such designs already in the past (I think on the old Node-RED forum), and since then I only stick to the minimal... But perhaps others can join this discussion and convince me :cold_face:

24

Stick with minimal. Easier to grow later if required, than shrink.

25

Hey Dave,
Don't know how you do it, but with a single sentence you managed again to convince me :rofl:

1 Like
26

You were already convinced. I was just reminding you.

3 Likes
27

hmmmm, so where to start?

I know - I'll start with - I really don't mean to step on anyone's toes or upset anyone - I only wish to help :angel:

I understand @bakman2 request for "event": "clicked" but to force this into payload? Surely payload is what the user wants to send?

I know we could force the output to "payload": { "elementId": "myCircle", "event": "clicked" } but what would be the point of using a typedInput? The typedInput provides the kind of flexibility that makes node-red super convenient.

I find permitting the user to specify his own payload (be that a timestamp, bool, JSON etc) greatly reduces the need for extra change nodes afterwards.

Could we please compromise? :pray:

Someone once told me when they wish to include extra information in a msg (but not necessarily want it in the payload), to avoid collisions and to provide consistency, they add an object to the msg like msg.nodename.props & include whatever they need to. I took that on board & find it very useful.

e.g. imagine this msg structure...

{
 ui_sgv: {
  event: "click",
  elementId: "myCircle",
  coordinates: { x: 27, y: 33 }
 }
 topic : "camera/1/ptz"
 payload : { pan: 90, tilt: 120, zoom: 3 }
}
  • msg.ui_sgv is auto generated & includes whatever extra useful info we wish (and is extensible)
  • msg.topic and msg.payload are whatever the user desired (as entered in the form).

I much prefer this means of topic/payload and it is in line with many of the better nodes including (to name a few) inject, trigger, dashboard ui_button...
image
image

I have already added (on my local copy of your code) the typed input & it works great. So to round this off & hopefully I have sold it to you, this is a demo of it...

ui-svg
ui-svg.gif1460×700 1010 KB

1 Like
28

I understand @bakman2 request for "event": "clicked" but to force this into payload? Surely payload is what the user wants to send?

Leave me out of it :wink:

My request was just to have a property that represents what it is, your suggestion sounds just as great :cowboy_hat_face:

1 Like
29

Pleased I could help. Also pleased to see this settled amicably.

30

Hi Steve (@Steve-Mcl),

Nice demo!!!!
Since you are offering your help, I will try to go for your compromise :wink:

Only the msg.nodename proposal is not really my cup of tea. Don't get me wrong: I certainly see the advantages of it, but it isn't something I'm used to work with in Node-RED. If all nodes would work like that, most probably it wouldn't have triggered the little voice in my head ...

I would like to have my data being send in the msg.payload, and you want it to be in the msg.nodename.xxx. By adding an extra TypedInput (for message field), the user can decide by himself where the data needs to go. This is something I have seen in lot's of other nodes, inclusive a series of my own nodes.

For example:

image

This typedInput has only 1 type ('msg'). And when another field name is entered, we could change the name of the second column (to match the field name). Then it becomes obvious where the data is going to end in the output message....

Does this make sense? If yes, then I will inform my lawyer that we have an agreement for a PR...

1 Like
31

Tut-tut Mr Butenaers!!

1 Like
32

Gonna take several re-reads :wink:

Will sort something tomorrow.

33

Don't know if this has been mentioned but with the cameras on the map, would it not be a key feature to view the live video in a small pop-up window? Some right click command...view live or just by hovering the cursor over the symbol would bring up the live video window

1 Like
34

Hi Walter,
That is indeed something I also have been thinking of. One of my Github issues is to put the (screen) coordinates in the output message. That message can be handled in your flow like you wish. Would like to build (in the near future) a new UI node that can display a popup context menu (at the specified screen location, which means where you have clicked or in the middle of the screen, or ...). But a user could also use the output message to show a popup with my node-red-contrib-ui-camera-viewer (once it is completed ...).

Summarized: as soon as our output messages contain the coordinates, you can do whatever you like ...

3 Likes
35

Very cool indeed!!!
BR Walter

36

Hi Bart

I have been to verify import this flow into Node-red , but still error on program look like below
image
and i try to install flow
image but cann't running well.

Please advise if any step is wrong.

Thank you
Dodong

37

Wrong node installed, that is the problem you have

38

Hi @Dodong,
this node was a very early alpha version, so it isn't available on NPM yet (which means it isn't available via your Node-RED menu palette). You need to install it directly from Github, as you can see in the installation command on top of my readme page on Github.
Bart

39

Hi BartButenaers

I love the idea of this project and I think it will be a great addition to Node Red.

One feature that might be good is to have some associated text (editable at runtime) avaialable under (or above) an element icon. The use case for this could be to show the current room temperature of a temperature sensor located in a building or the operational status of a device (e.g. online or offline for a security camera)

Also, can the SVG and elements be used to change themselves on click - for example, you start by showing a top level overview of a builind, then when a floor is clicked the SVG drawing is changed to draw the floor plan (along with new elements) for the clicked level?

Kind regards

Michael

40

Hi Michael (@mikeyd0407),
You can always have a look at the open/closed issues to have an idea of the direction we are going. The next beta will contain a large list of new functionalities. One of those is the ability to change the content of "text" elements. So then you can locate a "text" element below your FontAwesome icon to display e.g. the temperature.

When you click an item, you get an output message. Based on that output message you can compose a new input message to update your drawing. It is up to the users to decide what they do with the output messages in their flows. Also the input/output message functionality will have lots of more options in the next beta...