Pokazywanie pasków postępu w prezentacji Google

Poziom kodowania: średnio zaawansowany
Czas trwania: 15 minut
Typ projektu: dodatek do edytora

Cele

  • Dowiedz się, na czym polega działanie rozwiązania.
  • Dowiedz się, jak usługi Apps Script działają w ramach rozwiązania.
  • Skonfiguruj skrypt.
  • Uruchom skrypt.

Informacje o rozwiązaniu

Dzięki temu rozwiązaniu możesz dodać pasek postępu na dole slajdów w prezentacji.

Zrzut ekranu pokazujący pasek postępu w dodatku do Prezentacji dla Edytora

Jak to działa

Skrypt oblicza liczbę slajdów w prezentacji i dodaje prostokąt do dołu każdego slajdu. Skrypt zwiększa szerokość każdego prostokąta, aby pokazać postęp na slajdach.

Usługi Apps Script

To rozwiązanie korzysta z tej usługi:

Wymagania wstępne

Aby skorzystać z tego przykładu, musisz spełnić te wymagania wstępne:

  • Konto Google (konta Google Workspace mogą wymagać zatwierdzenia przez administratora).
  • przeglądarka internetowa z dostępem do internetu;

Konfigurowanie skryptu

  1. Kliknij ten przycisk, aby utworzyć kopię prezentacji Pasek postępu w Slides. Projekt Apps Script dla tego rozwiązania jest załączony do prezentacji.
    Utwórz kopię
  2. W prezentacji kliknij Rozszerzenia > Pasek postępu > Pokaż pasek postępu.

  3. Gdy pojawi się odpowiedni komunikat, autoryzuj skrypt. Jeśli na ekranie zgody OAuth wyświetla się ostrzeżenie Ta aplikacja nie została zweryfikowana, kontynuuj, wybierając Zaawansowane > Przejdź do {Nazwa projektu} (niebezpieczne).

  4. Ponownie kliknij Rozszerzenia > Pasek postępu > Pokaż pasek postępu.

  5. Aby usunąć pasek postępu, kliknij Rozszerzenia > Pasek postępu > Ukryj pasek postępu.

Sprawdzanie kodu

Aby sprawdzić kod Apps Script dla tego rozwiązania, kliknij Wyświetl kod źródłowy poniżej:

Pokaż kod źródłowy

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();
      }
    }
  }
}

Współtwórcy

Ten przykład jest obsługiwany przez Google przy pomocy ekspertów Google ds. programowania.

Dalsze kroki