Mostrare le barre di avanzamento in una presentazione di Presentazioni Google

Livello di codifica: intermedio
Durata: 15 minuti
Tipo di progetto: componente aggiuntivo dell'editor

Obiettivi

  • Scopri cosa fa la soluzione.
  • Scopri cosa fanno i servizi di Apps Script all'interno della soluzione.
  • Configura lo script.
  • Esegui lo script.

Informazioni su questa soluzione

Utilizza questa soluzione per aggiungere una barra di avanzamento nella parte inferiore delle slide della presentazione.

Screenshot della barra di avanzamento del componente aggiuntivo Editor di Presentazioni

Come funziona

Lo script calcola quante sono le diapositive della presentazione e aggiunge una forma rettangolare nella parte inferiore di ogni diapositiva. Lo script aumenta la larghezza di ogni forma rettangolare per mostrare l'avanzamento all'interno delle diapositive.

Servizi Apps Script

Questa soluzione utilizza il seguente servizio:

  • Servizio Presentazioni: recupera le diapositive di una presentazione e aggiunge una forma rettangolare a ciascuna.

Prerequisiti

Per utilizzare questo esempio, sono necessari i seguenti prerequisiti:

  • Un Account Google (gli account Google Workspace potrebbero richiedere l'approvazione dell'amministratore).
  • Un browser web con accesso a internet.

Configurare lo script

  1. Fai clic sul pulsante seguente per creare una copia della presentazione di Slides Barra di avanzamento. Il progetto Apps Script per questa soluzione è allegato alla presentazione.
    Crea una copia
  2. Nella presentazione, fai clic su Estensioni > Barra di avanzamento > Mostra barra di avanzamento.

  3. Quando richiesto, autorizza lo script. Se nella schermata per il consenso OAuth viene visualizzato l'avviso Questa app non è verificata, prosegui selezionando Avanzate > Vai a {Project Name} (non sicuro).

  4. Fai di nuovo clic su Estensioni > Barra di avanzamento > Mostra barra di avanzamento.

  5. Per rimuovere la barra di avanzamento, fai clic su Estensioni > Barra di avanzamento > Nascondi barra di avanzamento.

Esamina il codice

Per esaminare il codice di Apps Script per questa soluzione, fai clic su Visualizza codice sorgente di seguito:

Visualizza codice sorgente

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

Collaboratori

Questo Sample è gestito da Google con l'aiuto degli esperti Google Developer.

Passaggi successivi