نمایش نوارهای پیشرفت در ارائه اسلایدهای Google

سطح کدنویسی : متوسط
مدت زمان : 15 دقیقه
نوع پروژه : افزودنی ویرایشگر

اهداف

  • درک کنید که راه حل چه کاری انجام می دهد.
  • آنچه را که سرویس های Apps Script در راه حل انجام می دهند، بدانید.
  • اسکریپت را تنظیم کنید
  • اسکریپت را اجرا کنید.

در مورد این راه حل

از این راه حل برای اضافه کردن نوار پیشرفت به پایین اسلایدهای ارائه خود استفاده کنید.

اسکرین شات از نوار پیشرفت افزودنی ویرایشگر اسلایدها

چگونه کار می کند

اسکریپت تعداد اسلایدهای ارائه را محاسبه می کند و یک شکل مستطیل به پایین هر اسلاید اضافه می کند. اسکریپت عرض را برای هر شکل مستطیل افزایش می دهد تا پیشرفت را در اسلایدها نشان دهد.

خدمات اسکریپت برنامه ها

این راه حل از سرویس زیر استفاده می کند:

  • سرویس اسلاید - اسلایدهای ارائه را دریافت می کند و به هر یک یک شکل مستطیل اضافه می کند.

پیش نیازها

برای استفاده از این نمونه به پیش نیازهای زیر نیاز دارید:

  • یک حساب Google (حساب‌های Google Workspace ممکن است به تأیید سرپرست نیاز داشته باشند).
  • یک مرورگر وب با دسترسی به اینترنت.

اسکریپت را تنظیم کنید

  1. روی دکمه زیر کلیک کنید تا یک کپی از نمایش اسلایدهای نوار پیشرفت ایجاد کنید. پروژه Apps Script برای این راه حل به ارائه پیوست شده است.
    یک کپی تهیه کنید
  2. در ارائه، روی برنامه‌های افزودنی > نوار پیشرفت > نمایش نوار پیشرفت کلیک کنید.

  3. وقتی از شما خواسته شد، اسکریپت را مجاز کنید. اگر صفحه رضایت OAuth اخطار را نشان می‌دهد، این برنامه تأیید نشده است ، با انتخاب پیشرفته > رفتن به {Project Name} (ناامن) ادامه دهید.

  4. مجدداً روی برنامه‌های افزودنی > نوار پیشرفت > نمایش نوار پیشرفت کلیک کنید.

  5. برای حذف نوار پیشرفت، روی برنامه‌های افزودنی > نوار پیشرفت > پنهان کردن نوار پیشرفت کلیک کنید.

کد را مرور کنید

برای بررسی کد Apps Script برای این راه حل، روی مشاهده کد منبع در زیر کلیک کنید:

مشاهده کد منبع

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

مشارکت کنندگان

این نمونه توسط گوگل با کمک کارشناسان توسعه دهنده گوگل نگهداری می شود.

مراحل بعدی