Fortschrittsanzeige in einer Google-Präsentation anzeigen

Programmierstufe: Mittel
Dauer: 15 Minuten
Projekttyp: Editor-Add-on

Zielsetzungen

  • Verstehen Sie, was die Lösung leisten kann.
  • Informieren Sie sich darüber, wie die Apps Script-Dienste innerhalb der Lösung funktionieren.
  • Richten Sie das Skript ein.
  • Führen Sie das Skript aus.

Informationen zu dieser Lösung

Mit dieser Lösung können Sie unten auf den Folien Ihrer Präsentation eine Fortschrittsanzeige einfügen.

Screenshot der Fortschrittsanzeige des Präsentationen-Editor-Add-ons

Funktionsweise

Das Skript berechnet, wie viele Folien die Präsentation enthält, und fügt am unteren Rand jeder Folie eine Rechteckform hinzu. Das Skript erhöht die Breite jeder Rechteckform, um den Fortschritt auf den Folien anzuzeigen.

Apps Script-Dienste

Diese Lösung verwendet den folgenden Dienst:

Voraussetzungen

Sie benötigen die folgenden Voraussetzungen, um dieses Beispiel zu verwenden:

  • Ein Google-Konto (für Google Workspace-Konten ist möglicherweise die Administratorgenehmigung erforderlich).
  • Ein Webbrowser mit Zugriff auf das Internet.

Skript einrichten

  1. Klicken Sie auf die folgende Schaltfläche, um eine Kopie der Präsentation mit der Fortschrittsanzeige zu erstellen. Das Apps Script-Projekt für diese Lösung ist an die Präsentation angehängt.
    Kopie erstellen
  2. Klicken Sie in der Präsentation auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige einblenden.
  3. Autorisieren Sie das Skript, wenn Sie dazu aufgefordert werden. Wenn auf dem OAuth-Zustimmungsbildschirm die Warnung Diese Anwendung wurde nicht überprüft angezeigt wird, wählen Sie Erweitert > Zu {Projektname} wechseln (unsicher) aus.

  4. Klicken Sie noch einmal auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige anzeigen.

  5. Wenn Sie die Fortschrittsanzeige entfernen möchten, klicken Sie auf Erweiterungen > Fortschrittsanzeige > Fortschrittsanzeige ausblenden.

Code ansehen

Wenn Sie sich den Apps Script-Code für diese Lösung ansehen möchten, klicken Sie unten auf Quellcode ansehen:

Quellcode ansehen

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

Beitragende

Dieses Beispiel wird von Google mit der Unterstützung von Google Developers-Experten gepflegt.

Nächste Schritte