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

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

מטרות

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

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

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

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

איך זה עובד

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

שירותי Apps Script

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

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

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

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

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

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

  1. תוכלו ללחוץ על הלחצן הבא כדי ליצור עותק של המצגת ב-Slides עם סרגל ההתקדמות. פרויקט Apps Script של הפתרון הזה מצורף למצגת.
    יצירת עותק
  2. במצגת, לוחצים על נכסים > סרגל התקדמות > הצגת סרגל התקדמות.

  3. כשמוצגת בקשה, מאשרים את הסקריפט. אם במסך ההסכמה של OAuth מוצגת האזהרה, האפליקציה הזו לא מאומתת, ממשיכים בלחיצה על אפשרויות מתקדמות > מעבר אל {Project Name} (לא בטוח).

  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.

השלבים הבאים