Fill Polygon is not filling the whole polygon

Former Member over 5 years ago

I have created a line chart:

Now I want to fill the space between the x axis and the line by creating a polygon and filling it. But the code (see below) results in some weird filling behavior:

The chart line looks different because I'm using random values for creating the chart. Here is the code:

function draw(dc) {
    dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
    var fillPolygonCoordinates = [];
    fillPolygonCoordinates.add([minX, minY]);

     // construct and draw lines
    for(var i=1; i < 50; ++i) {
      var x1 = minX + xAxis.getLengthInPixels() * ((i - 1) / 50.0d);
      var x2 = minX + xAxis.getLengthInPixels() * (i / 50.0d);

      var y1 = yRelativePixels[i-1];
      var y2 = yRelativePixels[i];

      var point1 = new Geo.Point(x1, y1);
      var point2 = new Geo.Point(x2, y2);
      var line = new Geo.Line(point1, point2);
      line.draw(dc);
      fillPolygonCoordinates.addAll([[x1, y1], [x2, y2]]);
    }

    fillPolygonCoordinates.addAll([[maxX, minY], [minX, minY]]);
    dc.setColor(Graphics.COLOR_GREEN, Graphics.COLOR_GREEN);
    dc.fillPolygon(fillPolygonCoordinates); // This is commented out for the first screenshot
}

What am I doing wrong here?

Travis.ConnectIQ over 5 years ago in reply to Former Member

Shouldn't you be able to avoid a bunch of allocation (all of the Geo.Point and Geo.Line instances) and re-use the coorinates in the fillPolygonCoordinates array? Maybe something like this?

dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
for(var i = 1; i < fillPolygonCoordinates.size(); ++i) {
    var pt1 = fillPolygonCoordinates[i - 1];
    var pt2 = fillPolygonCoordinates[i];
    dc.drawLine(pt1[0], pt1[1], pt2[0], pt2[1]);
}

Former Member over 5 years ago in reply to Travis.ConnectIQ

Yes absolutely. I now have the issue that the watch emulator is filling the polygon but when I'm testing on my device the polygon is buggy simular to the screenshot. I'm thinking about reducing the size of the polygon and splitting it into multiple ones and maybe this will resolve this issue. But it is still frustrating - the emulator should exactly behave as the device!

Former Member over 5 years ago in reply to Travis.ConnectIQ

So I updated the code and avoided a bunch of allocations like you suggested. This also works on my physical device. I guess Garmin needs to update their Documentation because they limit the size of polygons to an am

function draw(dc) {
    dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);

     // construct and draw lines
    for(var i=0; i < 49; ++i) {
      // for the first point the x coordinate is in the origin
      var x1 = minX + xAxis.getLengthInPixels() * (i / 49.0d);
      var y1 = yRelativePixels[i];
      var x2 = minX + xAxis.getLengthInPixels() * ((i+1) / 49.0d);
      var y2 = yRelativePixels[i+1];
      dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
      dc.drawLine(x1, y1, x2, y2);
      dc.setColor(Graphics.COLOR_RED, Graphics.COLOR_RED);
      dc.fillPolygon([[x1, minY], [x1, y1], [x2, y2], [x2, minY]]);
    }
}

Travis.ConnectIQ over 5 years ago in reply to Former Member

I guess Garmin needs to update their Documentation because they limit the size of polygons to an am

You got cut off.. What were you trying to say?

Former Member over 5 years ago in reply to Travis.ConnectIQ

It seems the emulator can draw polygons with more points than the actual device. The documentation says "Array of coordinates with a 64 point limit" but this only worked on the emulator and not on the device itself. I reduced the size of the fill polygon from 53 to polygons with only 4 points and now it works on both - the emulator and the device. This is why I believe the documentation is incorrect or the emulator is buggy.

HermoT over 5 years ago in reply to Former Member

Mine works with 60 points on the devices. And 60 is merely because I decided to use a round number. Not because this was the first number of points where it started working. It also allows for me to add extra points at the start and end to close the polygon properly.

Travis.ConnectIQ over 5 years ago in reply to Former Member

For what you are doing above, you should be able to draw a filled polygon with up to 62 points across the top and 2 points on the bottom. I haven't played with rendering graphs in a long time but it worked just fine when I did and I'm fairly certain the code has not changed. HermoT also reports that it is working for him.

If possible, could you provide a test app that demonstrates the problem of drawPolygon not working for some number of points less than or equal to 64?