Image (4.3.2)

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the image, see Image.

Overview

The Image component displays an image on a page, which can be changed when certain conditions are met. The images used by this component must first be uploaded to a web site.

The following diagram shows an Image component being configured:

Imageconfig

 
Display:

Defines how the image will be displayed in the container. In a grid layout the container is the grid cell; in a precision layout the container is indicated by the bounding box of the Image component:

  • Center: Display the full-sized image in the middle of the container.
  • Repeat: Repeat the full-sized image horizontally and vertically in the container, starting from the top left corner.
  • Stretch: Scale the image so that the container is completely filled by the image. When the container and the image have different aspect ratios, the image is distorted by this stretching.
  • Cover: Scale the image  so that the container is completely covered by the image. Some parts of the image may not be visible in the container.
  • Contain: Scale the image so that it completely fits inside its container. There may be some areas of the container which are not covered by the image.
  • Centerleft: Display the full-sized image in the middle of the left edge of the container. 
  • Centerright: Display the full-sized image in the middle of the right edge of the container.
  • Topcenter: Display the full-sized image in the middle of the top edge of the container.
  • Topleft: Display the full-sized image in the upper left corner of the container.
  • Topright: Display the full-sized image in the upper right corner of the container.
  • Bottomcenter: Display the full-sized image in the middle of the bottom edge of the container.
  • Bottomleft: Display the full-sized image in the lower left corner of the container.
  • Bottomright: Display the full-sized image in the lower right corner of the container.
Image URL: The URL of the image to display when this condition is met.
Event: The event that is to be evaluated to see if the condition is met.
Comparison: The operator that determines the condition to be met. The operator can be a mathematical or text comparison operator.
Is Value: The value that the event is being compared with to see if the condition set by the comparison operator is met.
Default Image URL: The image to show if none of the conditions are met.

 


Tutorial

In this tutorial, we’ll look at adding an Image component that references 3 images. The page will display a smiley face, sad face, or neutral face, depending on certain conditions.

imagedisplay 

Let’s go through this process, step-by-step.


Step by Step: Displaying an Image That Changes When Conditions are Met

Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout.

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.

Step 1. Add and Configure a Combo Box

imagecombobox

This combo box will provide the basis for determining which image to show.

  • Drag and drop the Combo Box component onto the canvas.
  • Configure it as follows:
    • Option Values: (Event) optionValues
    • Selected Option: selectedOption

 

Step 2. Add Source Data

We will need some data to drive the comparisons, so let’s add this now. We’re going to add a dataset, and we're also going to publish some events from this dataset. The Image component will use these events to determine the conditions.

  • Below the canvas, click the button labelled “Add Data”.
  • Add the ProductionSumWithTargets_Perth dataset and configure it as follows:
    • Name: ProductionSumWithTargets_Perth1
    • Query: ProductionSumWithTargets_Perth
    • names: (List) BOSSIER 1, BOSSIER 2, BOSSIER 3, BOSSIER 4, BOSSIER 5, BOSSIER 6, BOSSIER 7, BOSSIER 8
    • prodEndTime: (Datetime) 01/02/2012 12:00:00 AM
    • prodStartTime: (Datetime) 01/01/2012 12:00:00 AM
    • readingType: (Text) Monthly
    • typeTemplate: (Text) Well
  • Configure the 1st event on the dataset:
    • Type: Single
    • Event: water
    • Column: Water
    • Filter Column: Entity
    • Filter Value: (Event) selectedOption
  • Configure the 2nd event on the dataset:
    • Type: Single
    • Event: watertgt
    • Column: Water Tgt
    • Filter Column: Entity
    • Filter Value: (Event) selectedOption

 

Step 3.  Set the Event Defaults

You can add an event at any time. Here we want to set the value for the event used in the Combo Box.

  • Click the Event Defaults button to the right of the canvas. 
  • Add an event called “optionValues” with a list containing the following items:  BOSSIER 1, BOSSIER 2, BOSSIER 3, BOSSIER 4, BOSSIER 5, BOSSIER 6, BOSSIER 7, BOSSIER 8

 

Step 4. Add the Image Component to the Page

imagedrag 

Drag and drop the Image component onto the canvas, and configure it as follows.

  • Display: (Options) Default
  • Default Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/neutral.png
  • Add 2 images.
  • 1st Image:
    • Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/happy.png
    • Event: water
    • Comparison: (Number) =
    • Is Value: (Event) watertgt
  • 2nd Image:
    • Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/sad.png
    • Event: water
    • Comparison: (Number) <
    • Is Value: (Event) watertgt

 

Step 5. All done!  

imagedisplay

Congratulations! You now have a page with an image that changes depending on what you select from the combo box. Click the preview preview button on the Studio toolbar to see what your page will look like in run-time.

save Don’t forget to save your page!

 

Leave a Reply

Your email address will not be published. Required fields are marked *