Mostrar barras de progresso em uma apresentação Google

Nível de codificaçã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 essa solução para adicionar uma barra de progresso à parte de baixo dos slides da apresentação.

Captura de tela do complemento do editor de slides com a barra de progresso

Como funciona

O script calcula quantos slides há na apresentação e adiciona uma forma retangular na 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

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

  • Serviço de slides: recebe os slides de uma apresentação e adiciona uma forma retangular a cada um deles.

Pré-requisitos

Para usar este exemplo, você precisa dos 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 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 consentimento do OAuth mostrar o aviso Este app não está verificado, continue selecionando Avançado > Acessar {Project Name} (inseguro).

  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 essa 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

Esse exemplo é mantido pelo Google com a ajuda de especialistas em desenvolvimento do Google.

Próximas etapas