How to draw a shape (square or rectangle) on an image?

anon-10 · December 27, 2018, 7:00am

This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

Hello, I am working on an app that uses google vision api for object detection. I am trying to draw a square or a rectangle around the detected object to show it clearly to the user.

I receive the vertices of the shape from the google api and I can read them successfully.

If there is a function like addPolygon in map api that could take the vertices and draw the shape on the image widget that would be great.

Below is an example of the received JSON response.

Thanks in advance.

{
  "responses": [
    {
      "localizedObjectAnnotations": [
        {
          "mid": "/m/01bqk0",
          "name": "Bicycle wheel",
          "score": 0.89648587,
          "boundingPoly": {
            "normalizedVertices": [
              {
                "x": 0.32076266,
                "y": 0.78941387
              },
              {
                "x": 0.43812272,
                "y": 0.78941387
              },
              {
                "x": 0.43812272,
                "y": 0.97331065
              },
              {
                "x": 0.32076266,
                "y": 0.97331065
              }
            ]
          }
        },
      ]
    }
  ]
}

anon-11 · January 6, 2019, 2:18am

Hi @Hvnnvh Suthewlvnd , There is no direct API which can do this. But you can use dynamic flex containers to create a square or rectangle at any desired location over the image widget. But based on the accuracy of the vertices above I assume you have to create some complex logic which can put the shape right on place based on the image dimensions.

anon-11 · January 8, 2019, 11:01pm

Hello @Hvnnvh Suthewlvnd

Please find the documentation link which tells you what are the methods available for Map . check if this helps you.

https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Default.htm#Map_Methods.htm#addPolyg%3FTocPath%3DWidgets%7CMap%2520Widget%7CMethods%7C_____5