Draw Custom Shapes in Google Slides with Apps Script
12/04/2021
In Google Slides, you can manually create circle segments, or arcs, but there doesn’t seem to be a corresponding way to create them programmatically with the Slides API or with a ready-made Apps Script method.
Searching the Slides API
Manually drawing an arc and then examining all the potential attributes of the Shape class from SlidesApp has no element that seems to refer to the arc sweep.
Getting a full JSON representation of the arc and the slide with the Slides API page GET request at most yielded these attributes:
{
"objectId": "p",
"pageElements": [
{
"objectId": "SLIDES_API17000000589_3",
"size": {...}
},
"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": {...},
"outline": {...},
"shadow": {...}
}
}
}
],
"slideProperties": {...},
"revisionId": "_7MTqW3NeaZ8yQ",
"pageProperties": {...}
}Even changing the sweep of the arc manually and comparing the two versions shows no changes except for the revisionId.
Creating Custom Shapes with Apps Script
Maybe the simplest way to create custom progress bars would be to keep static images of them in Google Drive and then insert them as images. But that’s manual work, and no one likes manual work.
Since you can load custom client-side HTML and JavaScript in a sidebar with Apps Script and getUi, that means you can use the Canvas API. Since you can use the Canvas API, that means you can create any shape you want, create an image from it, and insert it into the presentation.
Here’s a quick proof of concept. First, you’ll need the Apps Script code:
// 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 adds the data URL image to the presentation.
* @param {string} dataURL - The data URL of the generated image.
*/
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);
}With that, you’ll need the HTML and JavaScript to draw the arc:
<!-- arc-creator.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top" />
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script>
function main() {
let dataURL = createProgressArc(75);
google.script.run.addToPresentation(dataURL); // Calls the Apps Script function
}
/**
* This function creates a data URL image.
* @param {number} percentage - The percentage complete of the progress bar.
* @returns {string} The data URL of the generated image.
*/
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;
}
</script>
</html>Running this will cause Apps Script to open a sidebar and load the HTML into that sidebar. The JavaScript in the HTML will then draw an arc on the canvas and convert it to a data URL. The data URL is then sent back to Apps Script, which will convert it to an image and insert it into the presentation.
The drawback of this method is that you’ll need to have the UI open, or else it won’t run the JavaScript that is required to draw the arc.
Originally posted in Stack Overflow