Home > Tools & Templates > Equipment Prioritization Slideshow > How-to: Offline HTML Slideshow

How-to: Offline HTML Slideshow Configuration

Setup & Customization Guide: Prioritizing Industrial Plant Equipment

by IndustryDocs

Welcome! This guide will help you use and customize your "Prioritizing Industrial Plant Equipment" slideshow. This unique platform allows you to view and adapt the presentation without needing PowerPoint or an internet connection.

What You've Received

Your download should contain the following:

  • prioritizing-equipment-slideshow.html: This is the main slideshow file.
  • A folder named font-awsm: This folder contains a required font for rendering the slideshow controls.
  • A folder named ss-images: This folder contains all the default images used in the slideshow.

Crucial: The prioritizing-equipment-slideshow.html file, the font-awsm folder, and the ss-images folder must be kept in the same directory (folder) for the images and controls to display correctly. Do not move the HTML file unless you also move the ss-images and font-awsm folders with it, maintaining their relative path.

Opening the Slideshow

  1. Ensure the prioritizing-equipment-slideshow.html file and the ss-images folder are in the same location on your computer.
  2. Simply double-click the prioritizing-equipment-slideshow.html file).
  3. The slideshow will open in your default web browser. You'll first see a splash screen with an "Enter" button. Click "Enter" to begin the presentation.

No Internet Needed! Once you have the files, you can view the slideshow offline.

Navigating the Slideshow

You have several ways to move through the slides (see product page for full list of controls):

  • Next Slide: Click the right arrow icon, press Right Arrow, or swipe left.
  • Previous Slide: Click the left arrow icon, press Left Arrow, or swipe right.
  • Swipe Left and Swipe Right are supported on touchscreen devices.
  • Fullscreen: Click the expand/compress icon or press F.
  • Auto-Cycle: Click the play/pause icon or press Spacebar.
  • Slide Heading, Main Text, and Visual Suggestion overlays are movable via drag on supported devices. This allows the user to temporarily move the overlay in the event that it is overlapping something visually important.

Customizing the Slideshow Content

The slideshow content is defined within a hidden HTML table inside the prioritizing-equipment-slideshow.html file. You can edit this file with any HTML or text editor (e.g., Notepad, VS Code, Sublime Text, TextEdit).

Locating the Data Table

  1. Open prioritizing-equipment-slideshow.html in a text editor.
  2. Search for the HTML comment: or the ID id="hiddenSlideData". The table starts shortly after this.
  3. Each slide is represented by a table row (...).

Understanding the Slide Data Structure

Each table row <tr> ... </tr> (slide) contains four <td> ... </td> (table data/cell) elements:

<tr>
   <td>default-image.jpg</td>  <!-- 1. Image Filename (in ss-images/) -->
   <td>Slide Heading</td>  <!-- 2. Slide Heading (supports HTML) -->
   <td><p>Main slide text content.</p></td>  <!-- 3. Main Text Content (supports HTML) -->
   <td>[VISUAL SUGGESTION: A chart showing X, or a photo of Y.]</td>  <!-- 4. Visual Suggestion (supports HTML) -->
</tr>
  • Cell 1: Image Filename: The name of the image file (e.g., slide01.jpg) located in the ss-images/ folder.
  • Cell 2: Slide Heading: The main title for the slide.
  • Cell 3: Main Text Content: The primary text for the slide. You can use HTML tags like <p>, <ul>, <li>, <b>, <i> for formatting.
  • Cell 4: Visual Suggestion: This cell provides guidance or ideas for the type of image that would be effective for this slide. This text appears as an overlay on the slide.

Important Note: When any of the above values are empty, the corresponding overlay will not be displayed. This includes the "missing slide..." message when the Image Filename is not specified.

Common Customizations

  • Changing Text or Headings: Simply edit the HTML content within the 2nd or 3rd <td> of the desired slide row.
  • Replacing a Default Image with Your Own:
    1. Place your custom image (e.g., my-custom-photo.png) into the ss-images/ folder.
    2. In the HTML data table, find the row for the slide you want to change.
    3. Modify the content of the first <td> to your new image's filename: e.g., <td>my-custom-photo.png</td>.
    4. You might also want to clear or update the "Visual Suggestion" text in the 4th <td> if your new image fulfills or changes that suggestion.
  • Reordering Slides: Carefully cut the entire <tr>...</tr> block for a slide and paste it into a new position within the <tbody> of the table.
  • Adding a New Slide:
    1. Copy an existing <tr>...</tr> block.
    2. Paste it where you want the new slide to appear.
    3. Update the four <td> cells with your new image filename, heading, text, and visual suggestion.
    4. Ensure the new image file is placed in the ss-images/ folder.
  • Removing a Slide: Delete the entire <tr>...</tr> block for the slide you wish to remove.

Be Careful When Editing HTML: Ensure you don't accidentally delete crucial tags like <tr>, </tr>, <td>, or </td>. It's a good idea to back up the original .html file before making significant changes.

Customizing the Slideshow Behavior

Important Configuration Settings

Editing the Configuration
Locate the following code within the <script> ... </script> tags:

// --- Configuration ---
const config = { IMAGE_SUBFOLDER: "ss-images/", AUTO_CYCLE_DELAY: 4000, AUTO_CYCLE_DEFAULT_ON: false, SHOW_VISUAL_SUGGESTIONS: true };
  • AUTO_CYCLE_DELAY: Specifies interval when auto-cycle is enabled. Specified in ms (milliseconds), 4000 = 4 seconds.
  • AUTO_CYCLE_DEFAULT_ON: Boolean true or false. Enables auto-cycle feature when slideshow starts, user presses "Start Slideshow" button.
  • SHOW_VISUAL_SUGGESTIONS: Boolean true or false. Enables or disables the display of the slide's Visual Suggestion (table data column 4).

Distributing the Slideshow

If you need to share this presentation with others:

  1. Create a new folder (e.g., "Equipment Prioritization Slideshow").
  2. Copy all 3 of the following:   the prioritizing-equipment-slideshow.html file, the entire font-awsm folder, and the entire ss-images folder into this new folder.
  3. You can then zip this new folder and share the single zip file.
  4. The recipient will need to unzip the folder and then open the .html file as described above.

Troubleshooting

  • Images Not Showing: The most common reason is that the ss-images folder is not in the same directory as the .html file, or the image filenames in the HTML table don't exactly match the files in the folder (case-sensitive on some systems).
  • Navigation / Controls Not Showing: The most common reason is that the font-awsm folder is not in the same directory as the .html file.
  • Changes Not Appearing: After editing the HTML file, make sure you save the changes in your text editor. You may also need to refresh the slideshow in your browser (often F5 or Ctrl+R / Cmd+R). If using a "hard refresh" (often Ctrl+Shift+R / Cmd+Shift+R), it can help clear cached versions.

Explore the possibilities and see how this flexible platform can transform your presentations!