Hotspot

This article applies to versions 4.6.2 and later of P2 Explorer. For more, see Release History.

Overview

The Hotspot component allows a user to click on a designated area of the page, and navigate to a specified location or it can be configured to set page variables. It is transparent to the user and is ideal for overlaying on images, text labels, and other components.

A Hotspot in display mode

When a user hovers over a hotspot, the cursor changes to indicate that this is a hyperlink. When configuring the component, you should line up the hotspot borders with the components being overlaid, such as a text label and image.

Features of a Hotspot

Note: Because you are overlaying another component with a hotspot, you need to use a Precision Layout. If you drag a precision layout onto a grid cell, then you will be able to move the 'set' of components easily, by moving the grid cell around.

Related: Using a Hotspot, Link Action and Variable Mapping, Styling a Hotspot


The Hotspot Editor

Link Action, Variables, and Variable Mapping are at the heart of configuring a hotspot component — specify what to open, where to open it, and optionally add variable mapping. Alternatively, sepcify what variables to set on the current page (see Using the Hotspot to Set Page Variables).

A hotspot with a Link Action Type of: Open Trend, Open Page, New Trend or Open URL A hotspot with a Link Action Type of: Set Variables

There are two aspects to the hotspot's configuration:

Link Action

Type: Specify the type of link you want to open: trend, page, or URL. Or select Set Variables, which does not open another page or trend, but is used to set variables on the current page.

Workspace: To open pages or trends, specify the workspace containing the page or trend; this is because page and trend names can be duplicated across different workspaces.

URL: To open a URL, specify the full address.

Trend Name: For a Trend hotspot, specify which trend to open.

Page Name: For a Page hotspot, specify which page to open.

Header: For a URL hotspot, optionally specify a header.

Tab Type: This specifies where the page, trend, or URL is opened: New Explorer Tab, Same Explorer Tab, or New Browser Tab.

Note:
For security reasons, Explorer will not display insecure content within a secure context. If Explorer is using HTTPS (secure) then a URL using HTTP (insecure) will be opened in a new browser tab regardless of the specified Tab Type. I.e. If Explorer uses https but the link is to an http site, then it will open in a new browser tab.

Variable Mapping/Variables

Pass variables from the current Explorer page to the page, trend, or URL you are linking to. Click Add to add a new variable mapping, or click Remove to remove the variable mapping.

Each variable mapping needs a source (coming from the page you are on) and a target (for the trend/ page/ URL you are opening). The source and the target should have matching data types. See the tutorials for some examples.

Note that for the Set Variables Link Action type, Variables replaces Variable Mapping (see Using the Hotspot to Set Page Variables).

For a full description of these options, see Link Action, Variables, and Variable Mapping.

 


Using Multiple Hotspots

You can have multiple hotspots over a single image, as shown in this example. If you have a labelled image, you can place hotspots over the labels to link to different things.

In Display Mode In Design Mode
In display mode, the cursor changes when the user hovers over a hotspot. In design mode, each hotspot is coloured according to the style selected (by default, light pink).

Tutorials

If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.

These tutorials demonstrate how overlay hotspots over an image on a page to open different URLs, and a trend. Tutorial 1 focuses on opening a simple link, while Tutorial 2 looks at the more advanced usage of opening a trend and mapping a variable.

Tutorial 1: Hotspot for Weather Sites

In this tutorial we'll add two hotspots onto an image. We'll configure each hotspot to open a URL to different sites: Perth Weather and Sydney Weather, respectively. At the end of this tutorial your page should look something like this, in display mode:

Step 1. Prepare a Studio Page

In this step, we're going to open a new Explorer page using the Grid Layout, and then add a Precision Layout component to one of the grid cells.

1. Click the New Page button on the Home tab of the ribbon. Choose the Grid layout.

For this exercise, we'll keep the 4 grid cells.

  • Assign the second column a width of 2*
  • Assign the first row a height of 50

Related: Grid Layout

2. Drag a Precision Layout component onto the bottom right grid cell. The Precision Layout is in the Layout group.

Related: Precision Layout

 

Step 2. Add and Configure an Image

1. Drag an Image component onto the cell containing the Precision Layout. The Image is in the Display Display group icon group.

2. Configure the Image as follows:

Display CONTAIN  
Default Image australia-map Note: This image is available as part of the Sample Data for version 4.5.4 and later. If you do not have this image in your gallery, you can download it from here: https://e4helpcenter.petroleumplace.com/help/Images/australia-map.png
Position in Precision Layout Layer: Background
X: 9
Y: 19
Width: 500
Height: 448
 

Related: Image

 

Step 3. Add the Hotspots

1. Drag 2 Hotspot components onto the page, and position them directly over the "Perth" and "Sydney" areas in the Image. The Hotspot is in the Control Controls group.

2. Resize the hotspot to fit the areas, as follows:

  Perth Sydney
Position in Precision Layout Layer: Foreground
X: 36
Y: 285
Width: 94
Height: 33
Layer: Foreground
X: 424
Y: 332
Width: 94
Height: 33

 

Step 4. Configure the Hotspots

In this step, we'll configure each of the hotspots to open a weather page in a new Explorer tab.

  Perth Sydney  
Link Action
Type
Open URL Open URL  
URL https://weather.yahoo.com.au/local-forecast/wa/perth https://weather.yahoo.com.au/local-forecast/nsw/sydney Select 'Text' from the drop-down list, and type in the text box.
Header Perth Weather Sydney Weather Select 'Text' from the drop-down list, and type in the text box.
Note: If you omit the Header, Explorer will open this URL with a header of "New Page".
Tab Type New Explorer Tab New Explorer Tab  

 

Step 5. Test the Hotspots

You now have a page with 2 hotspots, that will open pages for Perth and Sydney weather in a new Explorer tab.

  • Click the Finish and Open button on the Studio toolbar to save your page, and see what it will look like in display mode.
  • Hover over the Perth section of the image, then click it. The Perth Weather page opens in a new tab inside Explorer.
  • Click the Perth section of the image, to open the Sydney Weather page in a new Explorer tab.


Tutorial 2: Hotspot for Opening a New Trend

This tutorial follows on from Tutorial 1. We'll add a hotspot over a text label, to open a new trend in a separate Explorer tab. Using Variable Mapping, we'll then configure the hotspot to send the Sample Method selected from a combo box, to the new trend. When you have finished this tutorial, your page should look like this:

 

Step 1. Add and Configure a Text Label

On the page used in Tutorial 1, drag and drop a Text Label component onto the middle of the map, and configure it as follows:

Content Open Trend  
Position in Precision Layout Layer: Foreground
X: 168
Y: 171
Width: 147
Height: 42
 

Related: Text Label

 

Step 2. Add and Configure a Combo Box

Drag and drop a Combo Box component onto the map, and position it to the left of Darwin. Configure it as follows:

Option Values Average, LinearInterpolate, LastKnownValue, Raw  
Option Names Average, Linear Interpolate, Last Known Value, Raw  
Selected Option pageSampleMethod The Combo Box will interact with this Page Default variable.
Position in Precision Layout Layer: Foreground
X: 16
Y: 25
Width: 109
Height: 34
 

Related: Combo Box

Step 3. Add and Configure a Hotspot

In this step, we'll drag and drop a hotspot over the text label, and then configure it to open a blank trend in a new Explorer tab.

Drag a Hotspot component onto the page, and position it over the text label. Configure it as follows:

Link Action
Type
New Trend  
Tab Type New Explorer Tab  
Variable Mapping Click 'Add' to add a variable mapping  
Source pageSampleMethod First, select 'Variable' from the drop-down list. This is the page default variable that contains the value selected from the combo box.
Target sampleMethod The value from the source field will be passed to this Trend Variable Parameter.
Position in Precision Layout Layer: Foreground
X: 128
Y: 135
Width: 229
Height: 119
 

 

Step 4. Test the Hotspot

You now have a fully functioning hotspot, that will open a new trend when clicked.

  • Click the Finish and Open button on the Studio toolbar to see your page in display mode.
  • Select Linear Interpolate from the Combo Box.
  • Click the text "Open Trend". A blank trend opens in a new Explorer tab, with the Linear Interpolate sample method selected.

 


Using the Hotspot to Set Page Variables

From version 4.6.2, there is a new Link Action type called Set Variables.

You can use this link action to set page variables, instead of opening a different page, trend, or URL. When you choose the Set Variables link action, you add Variables instead of Variable Mapping. There are two tutorials covering this new Link Action type: Hyperlink Tutorial: Adding a Hyperlink to Set Page Variables, and Status Tile Tutorial: Status Tiles with Set Variables Link Action.

 

Release History

  • Hotspot 4.6.2 (this release)
    • New Link Action type: Set Variables
  • 4.5.4
    • Tab Action 'New Browser Tab' is now available for all Link Action Types
    • Whenever HTTP content is accessed from an HTTPS instance of Explorer, a New Browser tab opens, regardless of the Tab Type specified in the Link Action editor
  • Hotspot 4.4.0
    • Initial release

Comments are closed