Configuring Image Fetching

TABLE OF CONTENTS

• How It Works
• Configuration Steps
  • Step 1: Create Data sets
  • Step 2: Add UI Components
  • Step 3: Add Event Handlers

Image Fetching enhances user experience by ensuring that images are available instantly when needed, reducing load times. This article outlines the steps to implement image preloading.

How It Works

The fetching mechanism ensures seamless transitions between tasks by loading images in the background before they are needed. The process follows these key steps:

1. When the user initiates an action (e.g., clicking a button), the app determines which images are required for the next task.

2. A hidden Container Component preloads images in the background while users interact with the current content.

3. When needed, preloaded images are fetched from the data sets and displayed immediately, preventing noticeable load times.

4. Event handlers detect user actions (e.g., button clicks) and update the displayed images dynamically.

5. UI components, such as Cards and Images, retrieve and render preloaded content.

Configuration Steps

The image fetching configuration consists of:

1. Creating Data sets.
2. Adding UI Components. 
3. Adding Event Handlers.

Step 1: Create Data sets

To fetch images, we first need to define Data sets.

To add a Data set:

1. Under Explorer and Components > Explorer, click App.
2. Under Appearance and Configuration > Configuration, locate the Data sets section. 
3. Click Add data set and enter the suggested values for each Data set:
   
   
   Images Collection Data set

   This data set manages images using JavaScript.

   Setting	Value
   Name	Images Collection
   Type	Javascript
   Evaluate automatically	Enabled
   Output	Output data type: Object Array: Enabled Click Add field: Data type: Object Name: Images Array: Enabled Hover over the newly added field and click the plus icon (+): Data type: Text Name: img Array: Disabled
   Code	return [ { Images: [ {img: "https://picsum.photos/id/237/200/300"}, {img: "https://picsum.photos/id/17/2500/1667"}, {img: "https://picsum.photos/id/28/4928/3264"}, {img: "https://picsum.photos/id/35/2758/3622"} ] }, { Images: [ {img: "https://picsum.photos/id/9/5000/3269"}, {img: "https://picsum.photos/id/13/2500/1667"} ] }, { Images: [ {img: "https://picsum.photos/id/21/3008/2008"}, {img: "https://picsum.photos/id/36/4179/2790"}, {img: "https://picsum.photos/id/40/4106/2806"}, {img: "https://picsum.photos/id/42/3456/2304"} ] }, { Images: [ {img: "https://picsum.photos/id/50/4608/3072"}, {img: "https://picsum.photos/id/76/4912/3264"}, {img: "https://picsum.photos/id/63/5000/2813"}, {img: "https://picsum.photos/id/73/5000/3333"} ] }, { Images: [ {img: "https://picsum.photos/id/75/1999/2998"}, {img: "https://picsum.photos/id/82/1500/997"}, {img: "https://picsum.photos/id/84/1280/848"} ] } ];

   
   
   Images Data set

   This data set stores available images.

   Setting	Value
   Name	Images
   Type	Variable
   Expression	{{{Images Collection}}}
   Evaluate automatically	Enabled

   
   
   Next Images Data set

   This data set contains the next set of images to be displayed when transitioning between tasks.

   Setting	Value
   Name	Next Images
   Type	Javascript
   Evaluate automatically	Disabled
   Input	Data set: Images Required: Enabled
   Output	Output data type: Text Array: Disabled
   Code	return inputs["Images"].slice(1)

   
   
   Image Set Current Data set

   This data set holds the images currently displayed on the screen.

   Setting	Value
   Name	Image Set Current
   Type	Javascript
   Evaluate automatically	Enabled
   Input	Data set: Images Required: Enabled
   Output	Output data type: Object Array: Disabled
   Code	return inputs["Images"][0];

   
   
   Image Set Next Data set

   This data set preloads images for the next task.

   Setting	Value
   Name	Image Set Next
   Type	Javascript
   Evaluate automatically	Enabled
   Input	Data set: Images Required: Enabled
   Output	Output data type: Object Array: Disabled Click Add field, then click the Edit icon: Data type: Object Name: Images Array: Enabled Hover over the newly added field and click the plus icon (+): Data type: Text Name: img Array: Disabled
   Code	return inputs["Images"][1];

   
   
   

Step 2: Add UI Components

In this step, we'll add the required UI components to the App:

• (1) Add the Container Component (Containers > Container). This component will be used for preloading images in the background.
  • Inside the Container Component, add the Box component (Graphical > Box) for structure.
  • Inside the Container Component, add the Card Component (Data > Card) with the following  Configuration:
    
    

    Setting	Value
    Data set	Image Set Next
    Data path	Images

    • Inside the Card Component, add the Image Component:
      
      

      Setting	Value
      Data set	Card card data (from the enclosing card)
      Data path	img

  • Inside the Container Component, add the Image Component.
    
    Go back to the Container Component's configuration and set Size & position to X:10, Y:5, W:1, H:1 which keeps the Component small but active for the browser.
• (2) Add the Button Component. This button will update the images when clicked.
• (3) Add the Card Component (Data > Card). This component will display the current image/images.

  Setting	Value
  Data set	Image Set Current
  Data path	Images

  • Inside the Card Component, add another Image component with the following Configuration:
    
    

    Setting	Value
    Data set	Card card data (from the enclosing card)
    Data path	img

Step 3: Add Event Handlers

The Button component's configuration consists of the following event handlers, which should be configured in the same order as listed below: