Worldmap - uibuilder pairing

General
1

Hello,

I have an interface built with uibuilder (vue + vuetify). In it I have an embedded worldmap with iframe. In my app i will have multiple concurrent users. I want uibuilder and worldmap in the same browser instance to communicate with each other through node-red. I also have events originated from node-red, i want to pass them to both.

worldmap has _sessionid, uibuilder has _socketId to identify their instances, what's the best practice of pairing them.

Thanks.

2

The use of iFrame's is fraught with issues at the best of times, I couldn't really predict what happens when you mix them with websockets.

Also, I don't know how Dave's worldmap arranges its comms, possibly using raw websockets rather than Socket.IO which is what uibuilder and Dashboard use.

uibuilder's _socketId is a Socket.IO thing, Socket.IO uses it to send a msg to a specific browser tab, the id is reset if you reload the tab so it really isn't terribly reliable. If you want to have a more reliable way of tracking a specific session, you need to add something more robust.

I've really not looked at the code for Worldmap so I don't know how it works other than I believe that it uses the LeafletJS library. You might therefore want to have a look around to see if there are any VueJS wrappers for Leaflet, I imagine there would be. Sensibly, you would then code up your page to use the same msg format as Worldmap and it could then be published as an extension to uibuilder.

A quick look at the worldmap code shows that it is using sockjs for websocket comms. It would also seem that worldmap is tied into Dashboard. but uses its own comms channel.

3

Thanks for your reply Julian,

I'll try the Dashboard plugin.

4

I don't think that is completely true. There are 2 nodes worldmap and ui_worldmap that are capable of drawing a map and I think that only the latter node requires dashboard. Correct me if I am wrong @dceejay

5

Correct - the ui one is just a wrapper around the other to help embed it in the node-red-dashboard. They "both" use sockjs as the transport.

6

I looked at the code before my comment and it did seem to reference some Dashboard-like variables is all.

7

@dceejay i couldn't find ui_worldmap node in NR palette. In management tab its shown faded.
image
worldmap and dashboard are in their latest versions.

my node red is at v1.2.9, may be that's the problem. i will try again after NR update.

8

nope, i upgrade node-red to v1.3.5, ui_worldmap is still unavailable. how can i enable it ?

9

Did you also install node-red-dashboard ? That is a prerequisite if you want to use ui_worldmap.

10

yes it's installed.

11

Maybe you need to first install dashboard and then worldmap node. If you didn’t do that you can try uninstalling the worldmap and reinstalling it.

12

I solved it, i'm putting here for future reference:

i discovered that worldmap accepts url parameters. so,

  1. when uibuilder client receives "client connect" control message containing uibuilders _socketId from server it creates the worlmap iframe with _socketId as a parameter.
  2. when worldmap iframe created it sends "connected" message to node-red.
  3. node-red receives "connected" message and parameter containing uibuilders _socketId and worldmaps _sessionid
  4. node-red sends the _sessionid of worldmap to the uibuilder instance specified by _socketId received as worldmap parameter.
  5. uibuilder instance receives message containing worldmaps session id. sets in a variable.
  6. node red can create utility functions in worldmap instance with uibuilder _socketId as a parameter
  7. hence uibuilder and worldmap instances in the same browser window "knows" eachother.
3 Likes
13

Nice, well done.

14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.