Panofeed Documentation

Owned by mihael (Unlicensed)
Last updated: Apr 17, 2024 by Benedict Häfeli
6 min read

This article provides detailed instructions for configuring a Panorama Feed.

Creating the feed

A list of all your feeds can be seen when selecting ‘Image feeds’ option in the side menu.

In the upper right corner, the ‘Create feed’ button will appear. Clicking it, you get to the standard options for feed configuration.

Selection_182.png

 

Name, title, token alias and camera can be set here as for any other feed. Change the type to ‘Panorama’ (you must select a camera first before being able to choose the feed type), and you will be presented with further options that apply specifically to panorama feeds.

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

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

 

Panorama feed specific options

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

Compass

Panofeeds can optionally display a compass tape on top of the screen, and/or a compass rose either in the upper-right corner, or in the lower-right corner if the upper-right corner is taken up by a logo.

Defining North

The compass will need to know where in your image north is. This is defined the same way as the position of hotspots are defined, with a fractional number defining how many percent of the total image width the point is distant from the left edge of the image. For example, 0 (0%) means north is the left edge of your image, 1 (100%) means north is the right edge, 0.5 (50%) means it’s right in the middle, and so on.

Non-360 degree panoramas

If your panorama is not a full 360 degree panorama, there is the possibility that north is not in the image. In this case, you may enter a value larger than 1 to push the position outside the image (for example, 1.5 (150%) would mean that north is half the width of the image beyond its right edge).

In this case, the compass will also need to know how large the field of view of your panorama actually is. You must enter this in the “compass angle” field in order for the compass to display correctly on such feeds.

Error page

You may enter an optional url into the error page field. If the feed is unavailable for some reason, or has no images to show, it will be redirected to this url.

If you check the “Show error page right now” box, any further requests to the feed will be redirected to the url you entered in the “error page url” field until the box is unchecked again, even if there would not be no actual error. This is handy to enforce an intentional downtime of the feed, for example for maintenance purposes.

Hotspots

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

The parameters bellow can be configured:

  • 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 displayed as the title of this hotspot

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

  • text An expanded description that will appear when hovering over the hotspot. This may contain an image. To embedd an image in the text box, use the syntax <img my-image-url.ext>. This is not an html tag.Generic html tags are not being rendered. It is a special bit of syntax that will load the image from the url and display it above the text. The width of the image is limited to the width of the text box, and it cannot be resized.

  • icon 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 red delete button.

Logos

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

The following parameters are configurable:

  • URL: A fully qualified URL to 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 - 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-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 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.

  • time=false: When set, the image timestamp in the lower left corner of the screen will not be displayed.

  • logos=false: When set, logos will not be displayed. This is often used when embedding the feed in the providers own website.

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://feed.yellow.camera/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 alignments.

  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

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.