Versions Compared

Version Old Version 1 New Version 2
Changes made by

mihael (Unlicensed)

Benedict Häfeli

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This article provides in detail explanations of detailed instructions for configuring a Panorama Feed functionality.

Creating the feed

List A list of all your feeds that user can manage can be seen after when selecting ‘Image feeds’ option in portal the side menu.

...

In the upper right corner, the ‘Create feed’ button will appear. Selecting Clicking it, form can be filled inyou get to the standard options for feed configuration.

...

Name, title, and camera can here be set , but type of feed needs to be ‘Panorama’here as for any other feed. Change the type to ‘Panorama’, and you will be presented with further options that apply specifically to panorama feeds.

After saving, the feed will appear in the feeds list.

Editing the feed

In order to edit the feed later, right click on the panorama feed and select ‘Edit’.

...

New form will be open which allows feed editing as well as

Panorama feed specific options

Panorama feeds have expanded options which let you define hotspots and logos creation.

Hotspots

Clicking the ‘Add’ button in Hotspots section will create a form for hotspot configuration.

...

  • x and y position of panorama image, in image-relative coordinates (0/0 is upper-left corner, 1/1 is lower right)

  • label that will be shown displayed as the title of this hotspot

  • link to which you will be redirected upon clicking the hotspot

  • text which An expanded description that will appear on holding the mouse pointer when hovering over the hotspot

  • icon of 24 types to choose from

  • color with 16 options

  • stalk length from no height to 5 different lengths

  • label alignment of left and right direction

...

  • Choose one from a variety of icons that you feel matches the purpose of your hotspot best.

  • color Select a color in which the hotspot and its stalk will be displayed.

  • stalk length The stalk will always point to the configured x/y coordinates, while its length determines how far above the icon will be displayed.

  • label alignment Whether the label should be displayed to the left or the right of the icon.

Also, hotspots can be deleted by clicking the round red delete button.

Logos

Clicking the ‘Add’ button in the Logos section will create a form for logo configurationto configure a logo for your feed. You may configure multiple logos for the same feed.

...

The parameters bellow can be configuredfollowing parameters are configurable:

  • URL: A fully qualified URL of the logo to be displayedType of logo that can beto the image you want to use as logo.

  • Type: There’s three possible types of logos that determine where or when they’ll be shown:

    • top left corner - Multiple logos can be configured, and will be displayed in order.

    • top right corner - Multiple logos can be configured, and will be displayed in order.

    • loading screen

  • Link to which you will be redirected upon clicking the logo

...

    • - Only one logo may be configured for the loading screen. It will be shown while the feed loads and the screen is otherwise black.

  • Link: Here you may configure a link a viewer will be taken to when they click on the logo. Leave this blank if you do not want the logo to be interactable.

Logos can be deleted again by clicking the red delete button.

Viewing your panorama feed

Once everything is set, the Panorama feed can be accessed by right click -clicking in the feeds list and selecting ‘View Feed’.

...

Alternatively, the feed can be accessed from browsing the camera images and selecting the feed in publication section in the lower right corner. Or by entering the address directly into the internet browser’s address bar: https://feed.yellow.webcam/feed/{token} in which token is generated upon feed creation.

User Interface

On start of the panofeed, the latest image starts to pan slowly to the right.

the identity token of your feed that was generated at its creation.

Embedding the feed

For information on how to integrate a feed, please refer to our documentation on that.

URL parameters

You can further customise the initial appearance of your feed by url parameters. URL parameters can be appended to the url with a preceding ‘?' and separated by a '&’ character (see example below).

There are two parameters available:

  • hot=false: If set to false, the feed will not display hotspots unless the user activates them in the feed. Default is true.

  • ui=false: If set to false, the feed will not display the UI unless the user activates it in the feed. Default is true.

As a short example, if you want your feed to display without hotspots or user interface unless the user chooses to display them, modify the link in the src attribute of the Iframe:

src="https://dev.yellow.webcam/feed/SOMETOKEN?ui=false&hot=false"

Panofeed User Interface

...

  1. Logos are displayed in upper left or right corner.

  2. Hotspots are displayed in appropriate locations, colors, stalk sizes, and directionalignments.

  3. General Data Protection Regulation (GDPR) can be checked here

  4. Feed navigation bar includes:

    1. zoom in

    2. zoom out

    3. show / hide hotspots

    4. show / hide timeline (see below)

    5. enter / exit full screen mode

  5. Show / hide user interface

Timeline

Selecting When clicking on the timeline, new options are shown.:

...

  1. Date and time of a preview image

  2. Preview of an image

  3. Slider picker for the last 30 days

  4. Time picker for images

    1. It contains an icon which returns to the latest preview image

Clicking on the image preview will go to the selected image and hide the timeline menu.
The clock can be rewound up to 30 days into the past, or 60 circles, since one turn equals to 12 hours.
Previews will change accordingly and to the nearest time available.

Embedding the feed

In feeds menu, right click on the panorama feed and select the ‘Embed’ option.

...

This will open up a pop up window with the code needed to be inserted into desired website.

...

<iframe
src="https://dev.yellow.webcam/feed/VPHUNYYYG"
Here arguments can be added ?ui=true/false for user interface visibility
and &hot=true/false for hotspots visibility, so source can be for example:
src="https://dev.yellow.webcam/feed/VPHUNYYYG?ui=false&hot=false"
for no ui and hotspot visibility.
width="800"
height="533"
Size can be set with desired width and height of iframe
allowfullscreen=”true”
Allows full screen to be enabled or disabled
></iframe>

‘Link to Image’ option will open the latest image in new tab.
‘Delete’ option will delete the feed.

Mobile layout of the components may be slightly different, but the functionality remains the same.