TimedependentPolygonmapTBWidget not working about thingsboard-widgets

[edenden1]

It seems good now.
There are 2 other bugs I noticed though:

1. When you click the play button and moving to the dashboards screen(for example) without clicking stop. You will notice when you go back to your dashboard, that the widget is in a bugged state.

2. When you on your dashboard with the dashboard and refresh the page, all the map is getting small and going to the top of the widget, and it is stuck in this state.

[erasta]

@edenden1 can you please add code / screenshot / errormsg of that crush? thanks

I identified one possible origin of the crush, you can recheck if that helps.

[edenden1]

The error has been fixed in the last version uploaded, but there is another problem.
The polygons are shown really tiny on the upper left corner of the image instead of the right location.
The devices are shown in the right location though, according to the position function provided.

This is the position function I use:
xMinMax = [154994, 155784]
yMinMax = [563428, 564085]
newXpos = (origXPos - xMinMax[0])/(xMinMax[1]-xMinMax[0])
newYpos = (origYPos - yMinMax[0])/(yMinMax[1]-yMinMax[0])
return {x: newXpos, y: 1-newYpos};

I used your code(pubsubGeoJSONmulti.py) to publish the polygons.

[erasta]

the function i use is:

return {x:(origXPos-34.5) * 50, y:(origYPos-33) * 50};

maybe you use a different coordinate system?

[edenden1]

My position function returns x and y between 0 to 1 and not from min value to max value.

[erasta]

The polygons generated on pubsubGeoJSONmulti.py are centered on (35, 32.5) with a max radius of 0.2.
Your function turn that into (x: -196.15, y: 858.5}
Maybe change pubsubGeoJSONmulti.py to generate polygons on your coordinate system?
If that still not working, i'll fix accordingly.

[edenden1]

I changed the center accordingly.
This is my polygons center.
baseX = 155380
baseY = 563830

[erasta]

Can you push your code? or activate it so the polygons are shown on my dashboards also?

[edenden1]

import paho.mqtt.client as mqtt
from time import sleep
import random
import numpy
import geopandas
from shapely.geometry import Point, Polygon
import pprint
import json

broker = "localhost"
topic_pub = 'v1/devices/me/telemetry'

attr_pub = 'v1/devices/me/attributes'

def on_message(client, userdata, message):
print("message received ", str(message.payload.decode("utf-8")))
print("message topic=", message.topic)
print("message qos=", message.qos)
print("message retain flag=", message.retain)

def on_connect(client, userdata, flags, rc):
print("Connected flags"+str(flags)+"result code " + str(rc))

class Device(object):

def __init__(self, name):
    self.name = name
    self.client = mqtt.Client()
    self.client.username_pw_set(name)
    self.client.on_message = on_message
    self.client.on_connect = on_connect
    self.client.connect('localhost', 1883, 1)
    self.client.loop_start()

def pub(self):

    props = {"A": [], "B": [], "C": []}
    for idx in range(10):
        R1 = random.randrange(10, 30)
        R2 = R1 + random.randrange(10, 20)
        R3 = R2 + random.randrange(10, 20)

        angle = numpy.arange(0, 2*numpy.pi, 0.8)
        baseX = 155380
        baseY = 563830

        X1 = baseX + R1*numpy.sin(angle)
        Y1 = baseY + R1*numpy.cos(angle)
        A1 = Polygon([[i[0], i[1]] for i in zip(X1, Y1)])
        A1s = str([[i[0], i[1]] for i in zip(X1, Y1)])

        X2 = baseX + R2*numpy.sin(angle)
        Y2 = baseY + R2*numpy.cos(angle)
        A2 = Polygon([[i[0], i[1]] for i in zip(X2, Y2)])

        X3 = baseX + R3*numpy.sin(angle)
        Y3 = baseY + R3*numpy.cos(angle)
        A3 = Polygon([[i[0], i[1]] for i in zip(X3, Y3)])

        G = geopandas.GeoDataFrame({'geometry': [A1, A2, A3]})

        totalD = G.diff()
        totalD.iloc[0] = G.iloc[0]

        for name, i in zip(["A", "B", "C"], range(totalD.size)):
            poly = totalD.iloc[i:i+1].to_json().replace('"', "'")
            sindex = idx
            polyindex = "{'index':'%s', 'name':'%s', 'value':%s}" % (idx, sindex, poly)
            props[name].append(polyindex)

    textprops = []
    for name in props:
        # proptext = props[name].to_json().replace('"', "'")
        # textprops.append('"%s": %s' % (name, proptext))

        text = '[%s]' % ",".join(props[name])
        textprops.append('"%s": "%s"' % (name, text))

    msg = '{%s}' % ",".join(textprops)
    # print(msg)
    # exit()
    self.client.publish(topic_pub, msg)

deviceName = ["A"]
DeviceList = [Device(x) for x in deviceName]

while True:
for d in DeviceList:
d.pub()
sleep(5)

[edenden1]

I tried to publish to you from my computer. Not sure if it worked

[erasta]

it worked, i m working on it. some complicated problem with image maps.

[erasta]

fixed it.
the reason the polygon is so small is because the python emits a circle with a diameter < 2

[erasta]

fixed the size also.

Note:
you have to sync the width/height ratio of the geo coordinates with that of the image.

[erasta]

also included polyimagemap.js because TB is messing up the code

[edenden1]

It seems better now. The location is still off though.

[erasta]

It seems better now. The location is still off though.

thanks,
can you be more specific?
examples would be good.

[edenden1]

I tried your new pubsubGeoJSONmulti.py and the circles are not in their right position. The center is not where it should be.

[edenden1]

And sometimes I get an error. It Writes:

Widget Error: Cannot read property '_northEast' of undefined

[edenden1]

I noticed that without other devices the location of the polygons is correct.
When I add some devices to the map the polygons shift to another(wrong) location and their size changes too.

[erasta]

just getting into it, i'll check.
But it would be extremely helpful if you logged into http://192.116.82.80:8080/dashboards/0c644790-aa68-11e9-918c-0da229dc9aca and change the dashboard to match the problem, so we'd be synchronized.

[erasta]

here i assigned the minx,miny position to the circles:

here i used the maxx, maxy position:

and here i used the exact center:

maybe you have some problems with the definitions of the position function?

[erasta]

And sometimes I get an error. It Writes:

Widget Error: Cannot read property '_northEast' of undefined

fixed this, tell me if it happens again

[edenden1]

here i assigned the minx,miny position to the circles:

here i used the maxx, maxy position:

and here i used the exact center:

maybe you have some problems with the definitions of the position function?

I added a dashboard named Eden.
I put there your widget with the polygons from device Test Device A1, and the location of the device I created named edenDevice.
You can notice the polygons are not located right (not in the center as it should be).
The edenDevice location looks good though.

[erasta]

maybe you have some problems with the definitions of the position function?

I added a dashboard named Eden.
I put there your widget with the polygons from device Test Device A1, and the location of the device I created named edenDevice.
You can notice the polygons are not located right (not in the center as it should be).
The edenDevice location looks good though.

fixed it. is it ok now?

the problem was that the dashboard was moving.

[erasta]

1. When you click the play button and moving to the dashboards screen(for example) without clicking stop. You will notice when you go back to your dashboard, that the widget is in a bugged state.

fixed (1)

[erasta]

2. When you on your dashboard with the dashboard and refresh the page, all the map is getting small and going to the top of the widget, and it is stuck in this state.

didn't understand (2)

[edenden1]

1. When you on your dashboard with the dashboard and refresh the page, all the map is getting small and going to the top of the widget, and it is stuck in this state.

didn't understand (2)

An example of the bugged state.
The map started at the top center, covering a small frame.
When I drag it down it cut in the middle as shown in the picture.

[erasta]

1. When you on your dashboard with the dashboard and refresh the page, all the map is getting small and going to the top of the widget, and it is stuck in this state.

didn't understand (2)

An example of the bugged state.
The map started at the top center, covering a small frame.
When I drag it down it cut in the middle as shown in the picture.

how did you get it to be like that?
when i refresh it just returns to the initial state

[edenden1]

1. When you on your dashboard with the dashboard and refresh the page, all the map is getting small and going to the top of the widget, and it is stuck in this state.

didn't understand (2)

An example of the bugged state.
The map started at the top center, covering a small frame.
When I drag it down it cut in the middle as shown in the picture.

how did you get it to be like that?
when i refresh it just returns to the initial state

Try to refresh a few times. Sometimes it gets into this state.
You can notice the polygons are not shown when it happens.

[erasta]

Try to refresh a few times. Sometimes it gets into this state.
You can notice the polygons are not shown when it happens.

can't recreate, might be a platform bug