Muestra barras de progreso en una presentación de Google

Nivel de programación: Intermedio
Duración: 15 minutos
Tipo de proyecto: Complemento del editor

Objetivos

• Comprende qué hace la solución.
• Comprende qué hacen los servicios de Apps Script dentro de la solución.
• Configura la secuencia de comandos.
• Ejecuta la secuencia de comandos.

Acerca de esta solución

Usa esta solución para agregar una barra de progreso en la parte inferior de las diapositivas de tu presentación.

Cómo funciona

La secuencia de comandos calcula cuántas diapositivas hay en la presentación y agrega una forma de rectángulo en la parte inferior de cada diapositiva. La secuencia de comandos aumenta el ancho de cada forma de rectángulo para mostrar el progreso en las diapositivas.

Servicios de Apps Script

En esta solución, se usa el siguiente servicio:

• Servicio de Slides: Obtiene las diapositivas de una presentación y agrega una forma de rectángulo a cada una.

Requisitos previos

Para usar esta muestra, necesitas cumplir con los siguientes requisitos previos:

• Una Cuenta de Google (es posible que las cuentas de Google Workspace requieran la aprobación del administrador)
• Un navegador web con acceso a Internet

Configura la secuencia de comandos

1. Haz clic en el siguiente botón para hacer una copia de la presentación de Presentaciones de la barra de progreso. El proyecto de Apps Script para esta solución se adjunta a la presentación.
   Crear una copia
2. En la presentación, haz clic en Extensiones > Barra de progreso > Mostrar barra de progreso.

3. Cuando se te solicite, autoriza la secuencia de comandos. Si la pantalla de consentimiento de OAuth muestra la advertencia Esta app no está verificada, selecciona Opciones avanzadas > Ir a {Nombre del proyecto} (no seguro) para continuar.

4. Nuevamente, haz clic en Extensiones > Barra de progreso > Mostrar barra de progreso.

5. Para quitar la barra de progreso, haz clic en Extensiones > Barra de progreso > Ocultar barra de progreso.

Revisa el código

Para revisar el código de Apps Script de esta solución, haz clic en Ver código fuente a continuación:

Ver el código fuente

slides/progress/progress.gs

Ver en GitHub

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

Colaboradores

Google mantiene esta muestra con la ayuda de los Google Developer Experts.

Próximos pasos

• Extiende Presentaciones de Google con Apps Script
• Referencia del servicio de Slides