Показывать индикаторы выполнения в презентации Google Slides

Уровень владения программированием : Средний
Продолжительность : 15 минут
Тип проекта : Дополнение к редактору

Цели

  • Поймите, для чего предназначено это решение.
  • Разберитесь, что делают службы Apps Script в рамках данного решения.
  • Настройте скрипт.
  • Запустите скрипт.

Об этом решении

Воспользуйтесь этим решением, чтобы добавить индикатор выполнения в нижнюю часть слайдов вашей презентации.

Презентация Google Slides с индикатором выполнения внизу.

Как это работает

The script calculates how many slides are in the presentation and adds a rectangle shape to the bottom of each slide. The script increases the width for each rectangle shape to show progress within the slides.

Сервисы Apps Script

Данное решение использует следующую службу:

  • Сервис слайдов : получает слайды презентации и добавляет к каждому из них прямоугольную фигуру.

Предварительные требования

Для использования этого примера необходимы следующие условия:

  • Для работы потребуется учетная запись Google (для учетных записей Google Workspace может потребоваться подтверждение администратора).
  • Веб-браузер с доступом в интернет.

Настройте скрипт

  1. Нажмите следующую кнопку, чтобы создать копию презентации «План выполнения ». Проект Apps Script для этого решения прилагается к презентации.
    Сделать копию
  2. В презентации нажмите «Расширения» > «Индикатор выполнения» > «Показать индикатор выполнения» .

  3. При появлении запроса авторизуйте скрипт. Если на экране согласия OAuth отобразится предупреждение « Это приложение не проверено» , продолжите, выбрав «Дополнительно» > «Перейти к {Название проекта} (небезопасно)» .

  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.

Следующие шаги