First working prototype. Creates image slides from Drive folder

Author: tailorvj

.gitignore

@@ -0,0 +1 @@
+.clasp.json

README.md

@@ -0,0 +1,71 @@
+## CreateSlidesFromDriveFolder
+
+A Google Slides Editor Add-on that reads all images in a Google Drive folder and creates a slide for each image in the current presentation
+
+### Develop
+
+Clone this repo. This goes without saying, right?!
+
+Make sure you have node.js (and npm naturally installed on your development system)
+
+You are going to need the Clasp CLI in order to work with this project. 
+
+**Install Clasp globally**
+
+```bash
+$ npm install -g @google/clasp
+```
+
+**Create a Clasp project**
+
+Pay attention, the project must be in the src folder, not the root!
+
+```bash
+$ cd src
+$ clasp login
+$ clasp create CreateSlidesFromDriveFolder
+$ clasp push
+$ clasp open
+```
+
+This will open your browser and you should see the code from the src folder in the Google Script editor
+
+**IMPORTANT: Never edit the code in the online editor, only in your local development environment**. We will be using Clasp to push code modifications from local development environmnent to the online testing environment. 
+
+#### Test your code in Google Script & Slides
+
+Before you begin, create a new Slides docuemnt for testing purposes on https://slides.new . Name your presenation for easy identification
+
+Now that your code is online, you have to create a test in the online editor
+
+- Press the arrow on the Deploy button
+- Select Text Deployments
+- Press the settings icon next to Select type (top left of the dialog)
+- Select Editor Add-on
+- Use the default settings, select the presentation you created for testing purposes
+- Approve your settings
+- Select the test from the list and press Execute. The presentation will open
+- Open the Extensions menu. Your add-on should have a subment on it. 
+- Test
+
+**How to get a folder id**
+
+Each folder in Google Drive has a unique ID. Just copy the id after the /folders/ part of the URL. For example, if the folder URL is https://drive.google.com/drive/folders/1I19gYQ8US-jVSFogbs_q8BZjcCu4PkCC, the id is 1I19gYQ8US-jVSFogbs_q8BZjcCu4PkCC
+
+#### Add features and use Clasp to push to your testing environment
+
+You coding is done in the local development machine from now on. Testing is done online though, so here is how to push your code and test.
+
+- Edit the code in the src folder
+- Save
+- Open a terminal in the src folder
+
+```bash
+$ clasp push
+$ clasp open
+```
+
+- Run your test deployment
+- Test
+- Close the Slides editor
+- Repeat

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "createslidesfromdrivefolder",
+  "version": "0.0.1",
+  "description": "A Google Slides Editor Add-on that reads all images in a Google Drive folder and creates a slide for each image in the current presentation",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Tailor VJ",
+  "license": "AGPLv3"
+}

src/Code.js

@@ -0,0 +1,61 @@
+function onOpen() {
+  var ui = SlidesApp.getUi();
+  ui.createAddonMenu()
+      .addItem('Create Slides from Images', 'showSidebar')
+      .addToUi();
+}
+
+function showSidebar() {
+  Logger.log('Showing sidebar...');
+  var html = HtmlService.createHtmlOutputFromFile('Page')
+      .setTitle('Select Folder')
+      .setWidth(300);
+  SlidesApp.getUi().showSidebar(html);
+}
+
+function createSlidesFromImages(folderId) {
+  if (!folderId) {
+    Logger.log('Folder ID not provided.');
+    return;
+  }
+  
+  Logger.log('Folder ID: ' + folderId);
+  
+  // Get the folder and its files
+  var folder = DriveApp.getFolderById(folderId);
+  var filesIterator = folder.getFilesByType(MimeType.PNG); // Adjusted to PNG
+  
+  // Count the total number of files
+  var files = [];
+  while (filesIterator.hasNext()) {
+    files.push(filesIterator.next());
+  }
+  Logger.log('Total PNG files found: ' + files.length);
+  
+  // Get the current Slides presentation
+  var presentation = SlidesApp.getActivePresentation();
+  var slideWidth = presentation.getPageWidth();
+  var slideHeight = presentation.getPageHeight();
+  
+  // Iterate through the files and add them to the Slides
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    Logger.log('Processing image: ' + file.getName());
+    
+    var slide = presentation.appendSlide(SlidesApp.PredefinedLayout.BLANK);
+    var image = slide.insertImage(file);
+    
+    // Center and stretch the image to fill the height of the Slides document
+    var originalWidth = image.getWidth();
+    var originalHeight = image.getHeight();
+    var newHeight = slideHeight;
+    var newWidth = originalWidth * (newHeight / originalHeight);
+    
+    image.setWidth(newWidth);
+    image.setHeight(newHeight);
+    image.setLeft((slideWidth - newWidth) / 2);
+    image.setTop(0);
+  }
+  
+  Logger.log('Total images processed: ' + files.length);
+}

src/Page.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base target="_top">
+  </head>
+  <body>
+    <div>
+      <input type="text" id="folderId" placeholder="Enter folder ID">
+      <button onclick="submitFolderId()">Submit</button>
+    </div>
+    <script>
+      function submitFolderId() {
+        var folderId = document.getElementById('folderId').value;
+        google.script.run.createSlidesFromImages(folderId);
+      }
+    </script>
+  </body>
+</html>

src/appsscript.json

@@ -0,0 +1,19 @@
+{
+  "timeZone": "Europe/Sofia",
+  "dependencies": {
+    "enabledAdvancedServices": [
+      {
+        "userSymbol": "Drive",
+        "version": "v2",
+        "serviceId": "drive"
+      },
+      {
+        "userSymbol": "Slides",
+        "version": "v1",
+        "serviceId": "slides"
+      }
+    ]
+  },
+  "exceptionLogging": "STACKDRIVER",
+  "runtimeVersion": "V8"
+}