Mostrar barras de progresso em uma apresentação Google

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

Objetivos

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

Sobre esta solução

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

Captura de tela do complemento do Editor de Apresentações na barra de progresso

Como funciona

O script calcula quantos slides há na apresentação e adiciona uma retangular à parte inferior 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 este exemplo, você precisa dos seguintes pré-requisitos:

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

Configurar o script

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

  3. Quando solicitado, autorize o script. Se a tela de permissão OAuth exibir o aviso Este app não foi verificado, continue selecionando Avançado > Acesse {Project Name} (não seguro).

  4. Novamente, clique 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 para esta solução, clique em Veja o 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

Este exemplo é mantido pelo Google com a ajuda de especialistas do Google Developers.

Próximas etapas