Google Slaytlar sunusunda ilerleme çubukları 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 dahilinde neler yaptığını anlayın.
  • Komut dosyasını ayarlayın.
  • Komut dosyasını çalıştırın.

Bu çözüm hakkında

Bu çözümü kullanarak sununuzdaki slaytların altına bir ilerleme çubuğu ekleyebilirsiniz.

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

İşleyiş şekli

Komut dosyası, sunuda kaç slayt olduğunu hesaplar ve her slaytın alt kısmına bir dikdörtgen şekil ekler. Komut dosyası, slaytlar içindeki ilerlemeyi göstermek için her bir dikdörtgen şeklin genişliğini artırır.

Apps Komut Dosyası hizmetleri

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

  • Slaytlar hizmeti: Sununun slaytlarını alır ve her birine dikdörtgen şekil ekler.

Ön koşullar

Bu örneği kullanmak için aşağıdaki önkoşullara ihtiyacınız vardır:

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

Komut dosyasını ayarlayın

  1. İlerleme çubuğu Slaytlar sunusunun bir kopyasını oluşturmak için aşağıdaki düğmeyi tıklayın. Bu çözümle ilgili Apps Komut Dosyası projesi sunuma eklenmiştir.
    Kopya oluştur
  2. Sunuda Uzantılar > İlerleme çubuğu > İlerleme çubuğunu göster'i tıklayın.

  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} adlı projeye git (güvenli değil).

  4. Tekrar, Uzantılar > İlerleme çubuğu > İlerleme çubuğunu göster'i tıklayın.

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

Kodu inceleyin

Bu çözümün Apps Komut Dosyası kodunu incelemek için aşağıdaki Kaynak kodu görüntüle'yi tıklayın:

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 sağlanır.

Sonraki adımlar