Afficher les barres de progression dans une présentation Google Slides

Niveau de codage: Intermédiaire
Durée: 15 minutes
Type de projet: Module complémentaire de l'éditeur

Objectifs

  • Découvrez en quoi consiste la solution.
  • Découvrez le fonctionnement des services Apps Script dans la solution.
  • Configurez le script.
  • Exécutez le script.

À propos de cette solution

Utilisez cette solution pour ajouter une barre de progression en bas des diapositives de votre présentation.

Capture d'écran du module complémentaire de l'éditeur de diapositives de la barre de progression

Fonctionnement

Le script calcule le nombre de diapositives dans la présentation et ajoute une forme rectangulaire au bas de chaque diapositive. Le script augmente la largeur de chaque forme rectangulaire afin d'afficher la progression dans les diapositives.

Services Apps Script

Cette solution utilise le service suivant:

  • Service Slides : récupère les diapositives d'une présentation et y ajoute une forme rectangulaire.

Prérequis

Pour utiliser cet exemple, les conditions préalables suivantes doivent être remplies:

  • Un compte Google (les comptes Google Workspace peuvent nécessiter l'approbation de l'administrateur)
  • Un navigateur Web ayant accès à Internet.

Configurer le script

  1. Cliquez sur le bouton suivant pour créer une copie de la présentation Slides dans la barre de progression. Le projet Apps Script pour cette solution est joint à la présentation.
    Créer une copie
  2. Dans la présentation, cliquez sur Extensions > Barre de progression > Afficher la barre de progression.

  3. Lorsque vous y êtes invité, autorisez le script. Si l'écran de consentement OAuth affiche l'avertissement Cette application n'est pas validée, continuez en sélectionnant Avancé > Accéder à {Project Name} (non sécurisé).

  4. Cliquez à nouveau sur Extensions > Barre de progression > Afficher la barre de progression.

  5. Pour supprimer la barre de progression, cliquez sur Extensions > Barre de progression > Masquer la barre de progression.

Examiner le code

Pour consulter le code Apps Script de cette solution, cliquez sur Afficher le code source ci-dessous:

Afficher le code source

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

Contributeurs

Cet exemple est géré par Google avec l'aide d'experts Google Developers.

Étapes suivantes