Increase the length of ARC programmatically

Question

I am trying to show ARC over the circle. I want to increase the ARC length. Manually I can increase but I am not getting how to increase the length of ARC programmatically.

If I will get how to increase the length of ARC then I will create multiple circles per my requirement.

let circleBlue1 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 610, 110, 70, 70);
    circleBlue1.getBorder().setWeight(8).getLineFill().setSolidFill("#007A86");
    circleBlue1.getFill().setSolidFill('#FFFFFF');


let circleBlue2 = slide.insertShape(SlidesApp.ShapeType.ELLIPSE, 622, 122, 46, 46);
    circleBlue2.getBorder().setWeight(12).getLineFill().setSolidFill("#007A86");
    circleBlue2.getFill().setSolidFill('#FFFFFF');


let arc1 = slide.insertShape(SlidesApp.ShapeType.ARC, 610, 110, 70, 70);
    arc1.setRotation(200);
    arc1.getBorder().setWeight(8).getLineFill().setSolidFill("#D9D9D9");


let arc2 = slide.insertShape(SlidesApp.ShapeType.ARC, 622, 122, 46, 46);
    arc2.setRotation(200);
    arc2.getBorder().setWeight(12).getLineFill().setSolidFill("#D9D9D9");

Result coming:

Required results:

Answer 1

AFAIK its not possible via Apps Script or the API

I tried examining all the possible attributes in Apps Script but none changed when I modified the sweep of the arc. Then I tried checking the slides API

Which at most gave me these parameters:

{   
  "objectId": "p",  
  "pageElements": [ 
    {   
      "objectId": "SLIDES_API17000000589_3",    
      "size": { 
        "width": {  
          "magnitude": 3000000, 
          "unit": "EMU" 
        },  
        "height": { 
          "magnitude": 3000000, 
          "unit": "EMU" 
        }   
      },    
      "transform": {    
        "scaleX": -0.1652,  
        "scaleY": -0.1636,  
        "shearX": -0.1057,  
        "shearY": 0.1067,   
        "translateX": 6532089.87,   
        "translateY": 1296513.29,   
        "unit": "EMU"   
      },    
      "shape": {    
        "shapeType": "ARC", 
        "shapeProperties": {    
          "shapeBackgroundFill": {  
            "propertyState": "NOT_RENDERED",    
            "solidFill": {  
              "color": {    
                "themeColor": "LIGHT2"  
              },    
              "alpha": 1    
            }   
          },    
          "outline": {  
            "outlineFill": {    
              "solidFill": {    
                "color": {  
                  "rgbColor": { 
                    "red": 0.8509804,   
                    "green": 0.8509804, 
                    "blue": 0.8509804   
                  } 
                },  
                "alpha": 1  
              } 
            },  
            "weight": { 
              "magnitude": 152400,  
              "unit": "EMU" 
            },  
            "dashStyle": "SOLID"    
          },    
          "shadow": {   
            "type": "OUTER",    
            "transform": {  
              "scaleX": 1,  
              "scaleY": 1,  
              "unit": "EMU" 
            },  
            "alignment": "BOTTOM_LEFT", 
            "blurRadius": { 
              "unit": "EMU" 
            },  
            "color": {  
              "rgbColor": {}    
            },  
            "alpha": 1, 
            "rotateWithShape": false,   
            "propertyState": "NOT_RENDERED" 
          },    
          "contentAlignment": "MIDDLE", 
          "autofit": {  
            "autofitType": "NONE",  
            "fontScale": 1  
          } 
        }   
      } 
    }   
  ],    
  "slideProperties": {  
    "layoutObjectId": "p2", 
    "masterObjectId": "simple-light-2", 
    "notesPage": {  
      "objectId": "p:notes",    
      "pageType": "NOTES",  
      "pageElements": [ 
        {   
          "objectId": "i2", 
          "size": { 
            "width": {  
              "magnitude": 3000000, 
              "unit": "EMU" 
            },  
            "height": { 
              "magnitude": 3000000, 
              "unit": "EMU" 
            }   
          },    
          "transform": {    
            "scaleX": 2.032025, 
            "scaleY": 1.143,    
            "translateX": 381300,   
            "translateY": 685800,   
            "unit": "EMU"   
          },    
          "shape": {    
            "shapeProperties": {    
              "outline": {  
                "propertyState": "INHERIT"  
              } 
            },  
            "placeholder": {    
              "type": "SLIDE_IMAGE",    
              "parentObjectId": "n:slide"   
            }   
          } 
        },  
        {   
          "objectId": "i3", 
          "size": { 
            "width": {  
              "magnitude": 3000000, 
              "unit": "EMU" 
            },  
            "height": { 
              "magnitude": 3000000, 
              "unit": "EMU" 
            }   
          },    
          "transform": {    
            "scaleX": 1.8288,   
            "scaleY": 1.3716,   
            "translateX": 685800,   
            "translateY": 4343400,  
            "unit": "EMU"   
          },    
          "shape": {    
            "shapeType": "TEXT_BOX",    
            "shapeProperties": {    
              "shapeBackgroundFill": {  
                "propertyState": "INHERIT"  
              },    
              "outline": {  
                "propertyState": "INHERIT"  
              },    
              "shadow": {   
                "propertyState": "INHERIT"  
              },    
              "autofit": {  
                "fontScale": 1  
              } 
            },  
            "placeholder": {    
              "type": "BODY",   
              "index": 1,   
              "parentObjectId": "n:text"    
            }   
          } 
        }   
      ],    
      "pageProperties": {   
        "pageBackgroundFill": { 
          "propertyState": "INHERIT"    
        }   
      },    
      "notesProperties": {  
        "speakerNotesObjectId": "i3"    
      } 
    }   
  },    
  "revisionId": "_7MTqW3NeaZ8yQ",   
  "pageProperties": {   
    "pageBackgroundFill": { 
      "propertyState": "INHERIT"    
    }   
  } 
}

I changed the sweep of the arc manually and there was no change in any of the attributes except for the revisionId.

So in this case, seeing as I cannot find any existing feature requests for this, you might want to file one yourself using the following template:

https://issuetracker.google.com/issues/new?component=191598&template=823918

Explaining that there is no way to modify the sweep of an arc via the API or Apps Script. Ensure to add as much information and justification as possible to increase your chances of it getting noticed.

Workarounds

The most simple way is probably to make the progress bars you think you will use and then keep them in drive and insert them when you need them. That is, have maybe 10 images for each progress stage you want.

Alternatively, there is a slightly more complex method using the canvas API. Since you can load HTML in the sidebar via getUi, you can also create images with the canvas API, and likewise you can create images from that and pass them to your presentation.

Here is a demonstration:

Code.gs

function test(){
  // This creates the HTML output from the file arc-creator.html
  let html = HtmlService.createHtmlOutputFromFile('arc-creator')
  // This uses the html to load the sidebar
  SlidesApp.getUi().showSidebar(html)
}

// This function will be called from the HTML once the canvas has finished drawing.
function addToPresentation(dataURL){
  let slide = SlidesApp.getActivePresentation().getSlides()[0]
  // Convert the data Url to png and add to Presentation
  var type = (dataURL.split(";")[0]).replace('data:','');
  var img = Utilities.base64Decode(dataURL.split(",")[1]);
  var blob = Utilities.newBlob(img, type, "image.png");
  slide.insertImage(blob);
}

arc-creator.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
  </body>
<script>

// This is the function that creates a data URL image
// The argument is the percentage complete of the progress bar

function createProgressArc(number){
  // ID the canvas element and initialize the context
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  // Some utility variables
  var cw=context.canvas.width/2;
  var ch=context.canvas.height/2;
  
  // Drawing background
  context.clearRect(0,0,200,200);
  

  // Drawing first circle
  context.beginPath();
  context.arc(cw,ch,50,0,2*Math.PI);
  context.fillStyle='#FFF';
  context.fill();
  context.strokeStyle='#e7f2ba';
  context.lineWidth = 10;
  context.stroke();

  // Drawing arc
  context.fillStyle='#000';
  context.strokeStyle='#b3cf3c';
  context.lineWidth=10;
  context.beginPath();
  let progress = (2 * Math.PI) * (number/100)
  context.arc(cw,ch,50,0,progress);
  context.stroke();

  // Converting to data URL
  var dataURL = canvas.toDataURL("image/png");
  return dataURL;
}

let dataURL = createProgressArc(75)

// Here is where the resulting image is sent back to the Presentation as a data URL
google.script.run.addToPresentation(dataURL)

</script>
</html>

Running this will open a sidebar in the UI, draw the image and then add the image to the first slide.

The drawback of this method is that you need to have the UI open, or else it won't run the JavaScript that is required to draw the arc.

References

• SlidesApp
• Overview
• presentations.pages.get
• Canvas
• Canvas Arc