Mostrar barras de progresso em uma apresentação Google

Nível de programação: intermediário
Duração: 15 minutos
Tipo de projeto: complemento do editor

Objetivos

  • Entenda o que a solução faz.
  • Entenda o que os serviços do Apps Script fazem na solução.
  • Configure o script.
  • Execute o script.

Sobre esta solução

Use esta solução para adicionar uma barra de progresso à parte de baixo dos slides na sua apresentação.

Captura de tela da barra de progresso do complemento do Editor de apresentações

Como funciona

O script calcula quantos slides há na apresentação e adiciona uma forma de retângulo à parte de baixo de cada slide. O script aumenta a largura de cada forma retangular para mostrar o progresso nos slides.

Serviços do Apps Script

Esta solução usa o seguinte serviço:

Pré-requisitos

Para usar esta amostra, você precisa atender aos seguintes pré-requisitos:

  • Uma Conta do Google (as contas do Google Workspace podem exigir a aprovação do administrador).
  • Um navegador da Web com acesso à Internet.

Configurar o script

  1. Clique no botão a seguir para fazer uma cópia da apresentação de slides da barra de progresso. O projeto do Apps Script para essa solução está anexado à apresentação.
    Fazer uma cópia
  2. Na apresentação, clique em Extensões > Barra de progresso > Mostrar barra de progresso.

  3. Quando solicitado, autorize o script. Se a tela de permissão OAuth mostrar o aviso Este app não foi verificado, selecione Avançado > Acessar {Nome do projeto} (não seguro).

  4. Clique novamente em Extensões > Barra de progresso > Mostrar barra de progresso.

  5. Para remover a barra de progresso, clique em Extensões > Barra de progresso > Ocultar barra de progresso.

Revisar o código

Para revisar o código do Apps Script dessa solução, clique em Ver código-fonte abaixo:

Acessar o código-fonte

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

Colaboradores

Esta amostra é mantida pelo Google com a ajuda dos Google Developer Experts.

Próximas etapas