Google Slaytlar sunularında ilerleme çubuklarını gösterme

Kodlama seviyesi: Orta
Süre: 15 dakika
Proje türü: Düzenleyici Eklentisi

Hedefler

  • Çözümün ne işe yaradığını anlayın.
  • Apps Komut Dosyası hizmetlerinin çözümüne geçelim.
  • Komut dosyasını ayarlayın.
  • Komut dosyasını çalıştırın.

Bu çözüm hakkında

Bu çözümü kullanarak slaytların altına bir ilerleme çubuğu en iyi uygulamaları paylaşacağız.

İlerleme çubuğu Slaytlar Düzenleyici eklentisinin ekran görüntüsü

İşleyiş şekli

Komut dosyası, sunuda kaç slayt olduğunu hesaplar ve dikdörtgen şekli çizin. Komut dosyası, slaytlardaki ilerlemeyi göstermek için her bir dikdörtgen şeklini almanız gerekir.

Apps Komut Dosyası hizmetleri

Bu çözüm aşağıdaki hizmeti kullanır:

Ön koşullar

Bu örneği kullanmak için aşağıdaki ön koşullara sahip olmanız gerekir:

  • Google Hesabı (Google Workspace hesapları (yönetici onayı gerektirir).
  • İnternete erişimi olan bir web tarayıcısı.

Komut dosyasını ayarlama

  1. İlerleme çubuğu Slaytlar sunusunun bir kopyasını oluşturmak için aşağıdaki düğmeyi tıklayın en iyi uygulamaları paylaşacağız. Şu kullanıcı için Apps Komut Dosyası projesi: bu çözüm sunuma eklenir.
    Kopya oluştur
  2. Sunuda Uzantılar'ı tıklayın. > İlerleme çubuğu > İlerleme çubuğunu göster

  3. İstendiğinde komut dosyasını yetkilendirin. OAuth izin ekranında Bu uygulama doğrulanmadı uyarısı gösteriliyorsa Gelişmiş'i > seçerek devam edin {Project Name} projesine (güvenli değil) gidin.

  4. Tekrar Uzantılar > seçeneğini tıklayın. İlerleme çubuğu > İlerleme çubuğunu göster.

  5. İlerleme çubuğunu kaldırmak için Uzantılar'ı tıklayın. > İlerleme çubuğu > İlerleme çubuğunu gizle.

Kodu inceleyin

Bu çözüm için Apps Komut Dosyası kodunu incelemek üzere Aşağıdaki kaynak kodu görüntüleyin:

Kaynak kodu göster

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

Katkıda bulunanlar

Bu örnek, Google Geliştirici Uzmanları'nın yardımıyla Google tarafından yönetilir.

Sonraki adımlar