הצגה של סרגלי התקדמות במצגת ב-Google Slides

רמת קידוד: בינונית
משך זמן: 15 דקות
סוג הפרויקט: תוסף לעריכה

מטרות

  • להבין מה הפתרון עושה.
  • הסבר על הפעולות של שירותי Apps Script בתוך הפתרון.
  • מגדירים את הסקריפט.
  • מריצים את הסקריפט.

מידע על הפתרון הזה

אפשר להשתמש בפתרון הזה כדי להוסיף סרגל התקדמות לתחתית השקפים במצגת.

צילום מסך של סרגל ההתקדמות בתוסף העריכה של Slides

איך זה עובד

הסקריפט מחשב את מספר השקפים במצגת ומוסיף צורת מלבן לתחתית כל שקף. הסקריפט מגדיל את הרוחב של כל צורה מלבנית כדי להציג את ההתקדמות במצגות.

שירותי Apps Script

הפתרון הזה משתמש בשירות הבא:

  • שירות Slides – השירות מקבל את השקפים של המצגת ומוסיף לכל אחד מהם צורה של מלבן.

דרישות מוקדמות

כדי להשתמש בדוגמה הזו, צריך לעמוד בדרישות המוקדמות הבאות:

  • חשבון Google (יכול להיות שחשבונות Google Workspace ידרשו אישור אדמין).
  • דפדפן אינטרנט עם גישה לאינטרנט.

הגדרת הסקריפט

  1. לוחצים על הלחצן הבא כדי ליצור עותק של המצגת ב-Slides בנושא סרגל התקדמות. פרויקט Apps Script של הפתרון הזה מצורף למצגת.
    יצירת עותק
  2. במצגת, לוחצים על תוספים > סרגל התקדמות > הצגת סרגל ההתקדמות.
  3. כשמוצגת בקשה, מאשרים את הסקריפט. אם במסך ההסכמה ל-OAuth מוצגת האזהרה This app isn't verified, ממשיכים על ידי בחירה באפשרות Advanced > Go to {Project Name} (unsafe).

  4. שוב, לוחצים על תוספים > סרגל התקדמות > הצגת סרגל התקדמות.

  5. כדי להסיר את סרגל ההתקדמות, לוחצים על תוספים > סרגל התקדמות > הסתרת סרגל ההתקדמות.

בדיקת הקוד

כדי לבדוק את הקוד של Apps Script לפתרון הזה, לוחצים על הצגת קוד המקור בהמשך:

הצגת קוד המקור

slides/progress/progress.gs
/**
 * @OnlyCurrentDoc Adds progress bars to a presentation.
 */
const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

/**
 * Runs when the add-on is installed.
 * @param {object} e The event parameter for a simple onInstall trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode. (In practice, onInstall triggers always
 *     run in AuthMode.FULL, but onOpen triggers may be AuthMode.LIMITED or
 *     AuthMode.NONE.)
 */
function onInstall(e) {
  onOpen();
}

/**
 * Trigger for opening a presentation.
 * @param {object} e The onOpen event.
 */
function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

/**
 * Create a rectangle on every slide with different bar widths.
 */
function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

/**
 * Deletes all progress bar rectangles.
 */
function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

תורמים

Google שומרת על הדוגמה הזו בעזרת מומחי הפיתוח של Google.

השלבים הבאים