Menampilkan status progres di presentasi Google Slide

Level coding: Menengah
Durasi: 15 menit
Jenis project: Add-on Editor

Tujuan

  • Pahami fungsi solusi ini.
  • Pahami apa yang dilakukan layanan Apps Script dalam solusi tersebut.
  • Siapkan skrip.
  • Jalankan skrip.

Tentang solusi ini

Gunakan solusi ini untuk menambahkan status progres ke bagian bawah slide di presentasi Anda.

Screenshot add-on Slide Editor status progres

Cara kerja

Skrip ini menghitung jumlah slide dalam presentasi dan menambahkan bentuk persegi panjang ke bagian bawah setiap slide. Skrip ini meningkatkan lebar untuk setiap bentuk persegi panjang untuk menampilkan progres dalam slide.

Layanan Apps Script

Solusi ini menggunakan layanan berikut:

  • Layanan Slide–Mendapatkan slide presentasi dan menambahkan bentuk persegi panjang ke setiap slide.

Prasyarat

Untuk menggunakan contoh ini, Anda memerlukan prasyarat berikut:

  • Akun Google (akun Google Workspace mungkin memerlukan persetujuan administrator).
  • Browser web dengan akses ke internet.

Menyiapkan skrip

  1. Klik tombol berikut untuk membuat salinan presentasi Status progres Slide. Project Apps Script untuk solusi ini dilampirkan ke presentasi.
    Buat salinan
  2. Di presentasi, klik Ekstensi > Status progres > Tampilkan status progres.
  3. Saat diminta, berikan otorisasi pada skrip. Jika layar izin OAuth menampilkan peringatan, Aplikasi ini tidak diverifikasi, lanjutkan dengan memilih Advanced > Buka {Project Name} (tidak aman).

  4. Sekali lagi, klik Ekstensi > Status progres > Tampilkan status progres.

  5. Untuk menghapus status progres, klik Ekstensi > Status progres > Sembunyikan status progres.

Meninjau kode

Untuk meninjau kode Apps Script untuk solusi ini, klik Lihat kode sumber di bawah:

Melihat kode sumber

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

Kontributor

Sampel ini dikelola oleh Google dengan bantuan dari Pakar Developer Google.

Langkah berikutnya