Visualising positions of AGV in a factory

fleh

Hi guys,

my name is Frank I am new to this forum and just started to use the fantastic piece of software. With the dashboard designer showing a few great-looking bar and line charts was easy, but moving to the next level feels harder.

As written in the title, I would like to visualise the positions of vehicles moving around in our factory. I set up separate data points for x and y values for each AGV which get updated every second. Using the examples I uploaded an SVG file with the factory layout but now what? Drawing a circle and letting it disappear after a certain duration would probably be best because the AGV can also leave the monitored areas. But I have no idea how to do that and perhaps there is a better way to achieve this... ?!

Thanks a lot in advance for your ideas!

Cheers
Frank

phildunlap

Hi Frank, welcome to the forum!

I suspect Jared's implementation of the heat map in this thread would be a good place to start: https://forum.infiniteautomation.com/topic/4166/heat-map

You may find also useful information in this thread about using the userModule to define components or filters that can manipulate it into the form the charts accept: https://forum.infiniteautomation.com/topic/3503/how-to-chart-with-data-points-in-the-x-axis-instead-of-time/5 but there is not a scatter plot component currently, so you'd have to make them independent series to use the serial chart and have only dots.

Jared Wiltshire

@fleh said in Visualising positions of AGV in a factory:

my name is Frank I am new to this forum and just started to use the fantastic piece of software. With the dashboard designer showing a few great-looking bar and line charts was easy, but moving to the next level feels harder.

Hi Frank, thanks for the positive feedback.

@fleh said in Visualising positions of AGV in a factory:

As written in the title, I would like to visualise the positions of vehicles moving around in our factory. I set up separate data points for x and y values for each AGV which get updated every second.

OK good start, have you tagged the data points for each AGV accordingly?

@fleh said in Visualising positions of AGV in a factory:

Using the examples I uploaded an SVG file with the factory layout but now what?

Try adding something like this to your page, for this example I have 2 data points per AGV which are named X and Y and have a tag of AGV=xyz, the point values range from 0-100.

<div class="ma-designer-root" id="630d53f8-408f-44aa-8276-0a43683f1aab" style="width: 1366px; height: 768px; position: relative;" ng-init="agvs = {}">
    <svg id="7417126d-2cd1-4c84-bca7-d9776897da2d" style="position: absolute; left: 0px; top: 150px;" xmlns="http://www.w3.org/2000/svg" width="800" height="600">
        <g ng-repeat="(agv, agvPoints) in agvs" ng-attr-transform="translate({{agvPoints.X.value / 100 * 800}} {{agvPoints.Y.value / 100 * 600}})">
            <circle fill="red" r="10"></circle>
            <text ng-bind="agv"></text>
        </g>
    </svg>
    <ma-point-query id="bf2e31cd-c4bd-4d76-886e-af56d3c9dc4b" style="position: absolute; left: 0px; top: 0px;" points="points" query="'tags.AGV=ne=null'"></ma-point-query>
    
    <ma-get-point-value ng-repeat="point in points track by point.xid" point="point" ng-init="agvs[point.tags.AGV][point.name] = point">
    </ma-get-point-value>
</div>

Basically we query for all data points which have a tag of AGV. Then we loop over them and get their point values and add them to the agvs object by their AGV tag then their name.

Inside the SVG we then add a group containing a circle and label for each AGV and translate it by the X and Y coordinates.

fleh

Thanks for the warm welcome, Phil and Jared! I had some questions about purchasing the Mango ES already and you are just as responsive now as Joel was then. Fabulous!

@phildunlap The links look interesting! With x and y axes, the scatter plots certainly have the right structure but is a chart component flexible enough for visualising vehicle movements? I will have to remove plotted dots, for example ... and a background-image would also be nice to have.

@Jared-Wiltshire: Good question about the tagging! All data points have descriptive names and XIDs but I did not group them any further. Since I have full control over the data source, I could also use a completely different structure to transfer the vehicle positions to Mango. Could you think of something simpler? In my previous implementation I sent an dictionary with the structure

{agv1_x: x, agv1_y: y, agv1_property_foo: foo,  agv1_property_bar: bar, 
 agv2_x: x, agv2_y: y, agv2_property_foo: foo,  agv2_property_bar: bar, 
 ...}

to the webserver and displayed the points on an HTML5 canvas by iterating over the dict when new data came in. It worked OK but but position updates took essentially place at same discrete time step and hence the movements looked coarse. Coming from Python this felt like an anti-pattern but I had no good idea how to do it better...

I will sleep over your idea with the tags and iterating over them! Thanks for the HTML-noob-friendly code!

Jared Wiltshire

@fleh said in Visualising positions of AGV in a factory:

Good question about the tagging! All data points have descriptive names and XIDs but I did not group them any further.

OK yeah I'd suggest tagging them, see here - https://forum.infiniteautomation.com/topic/4153/using-ma-state-params/11

It will be more obvious and easier come 3.6 which is due very soon.

@fleh said in Visualising positions of AGV in a factory:

Since I have full control over the data source, I could also use a completely different structure to transfer the vehicle positions to Mango. Could you think of something simpler?

I'm not sure what your coordinate system looks like, but I think the example I posted above works fine for X, Y coordinates.

@fleh said in Visualising positions of AGV in a factory:

to the webserver and displayed the points on an HTML5 canvas by iterating over the dict when new data came in. It worked OK but but position updates took essentially place at same discrete time step and hence the movements looked coarse.

With the example I posted above it uses WebSockets (inside the <ma-get-point-value> components) to receive point value updates (i.e. the x and y values).

@fleh said in Visualising positions of AGV in a factory:

I will sleep over your idea with the tags and iterating over them! Thanks for the HTML-noob-friendly code!

If you do want to get more in depth and write some AngularJS JavaScript code see here - https://help.infiniteautomation.com/getting-started-with-a-user-module
It often makes things easier than trying to do it all in the markup if you are comfortable with JavaScript.

Another thing you may want to look at, is this component which is in Mango 3.6, it uses d3.js to generate a graph in SVG. d3 could be very nice for your graphic I think. d3 is not packaged with Mango 3.5 so you will have to wait for Mango 3.6 for this.
https://github.com/infiniteautomation/ma-dashboards/tree/main/UI/web-src/ngMango/components/heatMap

richard.mortimer

@jared-wiltshire said in Visualising positions of AGV in a factory:

d3 is not packaged with Mango 3.5 so you will have to wait for Mango 3.6 for this.

Is there a release date for 3.6?

Cheers

Richard

Jared Wiltshire

@richard-mortimer said in Visualising positions of AGV in a factory:

@jared-wiltshire said in Visualising positions of AGV in a factory:

d3 is not packaged with Mango 3.5 so you will have to wait for Mango 3.6 for this.

Is there a release date for 3.6?

Cheers

Richard

We have released 5 betas, full release should not be far away.

fleh

@jared-wiltshire said in Visualising positions of AGV in a factory:

OK yeah I'd suggest tagging them, see here - https://forum.infiniteautomation.com/topic/4153/using-ma-state-params/11

Alright. I wrote a Python-Script which generates the data source and and data points. Brilliant idea of yours to have the configuration accessible via JSON.

@jared-wiltshire said in Visualising positions of AGV in a factory:

With the example I posted above it uses WebSockets (inside the <ma-get-point-value> components) to receive point value updates (i.e. the x and y values).

That's what I used to in the last implementation. But one either has to create a Websocket for each device or transfer all positions every time something changes...

I love how flexible Mango is and will use this AGV example to learn more about web technologies. No matter whether it is SVG, angular or d3.js.... all good from my side. Thanks for your inspirations!

phildunlap

Glad to hear it!

@fleh said in Visualising positions of AGV in a factory:

That's what I used to in the last implementation. But one either has to create a Websocket for each device or transfer all positions every time something changes...

Hmm? You can register for any number of point events through a single websocket, so I'm not sure what you mean.