Panorama Image Viewer gadget
Your organization must be subscribed to Igloo's Gadget Depot to use gadgets in your digital workplace. Contact your Customer Success Manager or email the Customer Success Team to subscribe to the Gadget Depot and get access to all available gadgets.
Use the Panorama Image Viewer gadget to provide users with an immersive 360° view of events, locations, and other important moments. This gadget takes equirectangular images found in a connected folder channel and processes them to provide an interactive experience. Play the video below to see the Panorama Image Viewer gadget in action.
Sections in this article:
Considerations and caveats
Image properties
- Images must be equirectangular. The gadget processes these images to provide an interactive experience. Below is an example of an equirectangular image.
- Images in the gadget are scaled to a maximum height of 600px.
- The file name of an image is used as its title in the gadget.
Set up
Follow these steps to set up this gadget:
- Place an Integrations widget on a page, space, or dashboard. For more information, see Placing and setting up a widget. For the best experience, avoid placing this gadget in side columns.
- Select the placed widget's Edit button.
- Under Integration Library, select Igloo Gadget Depot.
- Select the Panoramic Viewer gadget from the library.
- Review and make changes to the settings on the Options, Layout, and Appearance tabs. You can find details about the widget's settings in the Settings section below.
- In the widget editor, select Update to apply your changes or Cancel to discard them.
- At the bottom of your page, space, or dashboard, select Publish or Save as Draft to save your changes.
Settings
Options tab
| Setting | Description |
|---|---|
| Title | Enter a title for the widget. The title appears as a heading above the widget's contents. You should use the title to provide context to the widget and better structure a page's content by clearly denoting different sections. When entering a title, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select  Translation and enter a title for each supported language. This field can contain a maximum of 140 characters. |
| Title link | Enter the URL of a location in your digital workplace. Users who click the widget's title, if it has one, will go to this location. Whether you enter the link as a relative URL or an absolute URL does not matter, it will convert to an absolute URL the next time you edit the widget. This field can contain a maximum of 2,083 characters. |
| Description | Enter a description for the widget. The description appears between the title and the widget's contents. You can use this text to provide information to users about the widget. When entering a description, you do so only for your currently selected language. If your digital workplace supports multiple languages, you should select |
| Setting | Description |
|---|---|
| Folder Channel Path | Enter the relative URL of the folder or folder channel that contains your images. This URL does not contain the root domain of your digital workplace. Example: /event_images/360_photos This folder should only contain equirectangular images, other images may result in the gadget not functioning as expected. |
| Auto-rotate panoramas | Select to rotate the view of the active image automatically. The view of the image will rotate to the right at a speed set by Auto-rotate speed. Higher values result in faster speeds. Auto-rotation will briefly pause if a user manually rotates an image and then resume. |
| Auto-rotate speed | Enter the speed at which the panorama auto-rotates. Higher values correspond to a faster rotation. The default value is 10. |
| Setting | Description |
|---|---|
| Title Font Family | Enter which font family is used to display the titles of images. You can enter multiple font families by separating each with a comma. When multiple font families are specified, a user's browser will always attempt to use the leftmost available one. Example A: Specific font family: TahomaExample B: Mulitple font-families: Tahoma, Geneva, sans-serif |
| Title Font Size | Enter the font size (px) of image titles. The default value is 30. |
| Back Button | Enter the Font Awesome 4.7 icon used for the back button. Example: fas fa-fw fa-arrow-left |
| Next Button | Enter the Font Awesome 4.7 icon used for the forward button. Example: fas fa-fw fa-arrow-right |
Layout tab
There are currently no Layout settings.
Appearance tab
Your digital workplace's theme overwrites many of the settings on this tab. However, the settings listed below are usable.
| Setting | Description |
|---|---|
| Class | Enter CSS class selectors to provide additional styling to the widget. For more information, see Applying custom CSS to widgets. |
| Height | Select the height of the widget. The default value is Auto (left most slider position) scales the widget's height to fit its contents. You can use the slider to set a fixed height between 50px to 600px in increments of 50px. Selecting a Height other than Auto will add a vertical scrollbar to the gadget. |
How to interact with it
You can perform the following actions on the Panoramic Viewer gadget:
- Select and drag the image to rotate the view.
- Use your scroll wheel to zoom in and out on the image.
- Select the Back or Forward button to change the image.
- Select
Fullscreen to expand the gadget to take up your entire display. Press Esc to exit fullscreen. - Select
Control Settingsto adjust the following viewer settings:- Control: Change how you interact with the images in the gadget. Settings include:
- Mouse/Touch: Select to use your device's mouse or touchscreen. This is the default option.
- Sensor: Select to use your device's gyroscopic sensors.
- Mode: Change how the image is displayed. Settings include:
- Normal: Select if you are using a browser. This is the default option.
- Cardboard: Select if you are using a VR device such as Google Cardboard.
- Stereoscopic: Select if you are using a VR device that requires a Stereoscopic view.
- Control: Change how you interact with the images in the gadget. Settings include: