PHEREO PLAYER DOCUMENTATION


Content preparation guide

Please read this manual carefully. This guide is intended to help you to properly prepare photos for further use in Phereo 3D Photo Player. Select the desired section:

Supported Photo Formats

Phereo 3D Photo Player supports Anaglyph and Side-by-Side image modes. Both modes must be stored in one of the formats listed below:

  • JPG/JPEG, PNG, GIF
  • MPO, JPS, PNS
Anaglyph mode Side-by-side mode
Anaglyph mode Side-by-Side mode

To have Phereo 3D Photo Player display your photo content in both Anaglyph and Side-by-Side modes, a Side-by-Side source file is sufficient.

Converting Your Photos to Supported Phereo Player Formats

To have Phereo 3D Photo Player display your photo content both in Anaglyph and Side-by-Side modes, we recommend using our Phereoshop application. With Phereoshop you can automatically create an Anaglyph image from your Side-by-Side source image. Phereoshop can also help you organize your desired (sizes, formats) file structure that is supported by Phereo 3D Photo Player. The photo content preparation routine is described below.

Step 1. Download PhereoShop application.

Step 2. Import your photo(s) to Phereoshop to any album. To do that, launch Phereoshop and click on Import Photos. On the next screen click Select Photos and choose the ones you need for your player. When you’re done, click Import. Follow the import wizard instructions and then click Done.

Step 3. Choose the album where you imported your photos. Right-click on it and select Export Photos from the context menu.

Phereoshop Export Phereoshop Export

On the export screen, select Phereo 3D Photo Viewer in the “to formats” section. You can add and edit a prefix to the name of the output file(s). If a default prefix is not specified, the original file name will be used instead. The desired photo image resolution (in pixels) can be set for three image types (small, medium and large), and that is what the player will use. When you’re done with settings, click Export. You will be asked to select a folder to save the output images. When the conversion process is complete, the created folder will contain the following files (six for each source file):

  • count_yourPrefix.s.anaglyph
  • count_yourPrefix.m.anaglyph
  • count_yourPrefix.l.anaglyph
  • count_yourPrefix.s.sidebyside
  • count_yourPrefix.m.sidebyside
  • count_yourPrefix.l.sidebyside

As you can see, the file name for each image looks as follows:

count_prefix.size.mode

count — the counter for the converted photo(s), starting with 1. The counter increases its value during the conversion procedure, meaning the first converted image will have “1” in its name, the second will have “2”, and so on.

The counter will not be added to the file name if the Prefix field is left blank.

prefix — the file name specified in the Output File Prefix field.

size — photo resolution (s - small, m - medium or l - large). By default, Phereo 3D Photo Player runs in window mode that can display images in small or medium sizes (see above instructions to convert images), according to the player’s size. When switching to full screen mode, the player will automatically display the image in large size (the original size of your photo).

mode — photo format (anaglyph or side-by-side).

When you’re done, your folder should contain the following files:

File structure

Congratulations! Now that you’ve prepared photo content, you can start using Phereo 3D Photo Player. Go to Copying Your Photos to Server to copy photos to your server.

Copying your photos to server

Prepared photo content should be uploaded to the server where your website is hosted. To upload files to the server you must have access granted by your host. For *nix and Windows servers you can transfer files via FTP/SFTP or SSH protocols (you can use the free application WinSCP).

Step 1. Create a designated folder for photo files on the server. For example:

/content/photos_folder/

Step 2. Upload your folder containing the photo files:

/content/photos_folder/photos1/

Your folder on the server should look as follows:

File structure

Congratulations! Your photo content has been uploaded to the server. See the Detailed Installation Instructions section for installing Phereo 3D Photo Player and viewing your 3D photos.

Detailed installation instructions

Follow these three simple steps to put 3D photos on your website:

  1. Place your prepared photo files on the server (see Copying Your Photos to Server)
  2. Place the Phereo 3D Photo Player distribution files on the server
  3. Include Phereo 3D Photo Player in your webpages

Phereo 3D Photo Player Distribution

Download the latest version of Phereo 3D Photo Player and extract the archive. You will use the following files:

  1. Phereo player JavaScript library:
    • js/libs/jquery-1.7.2.min.js
    • js/libs/jquery.ba-postmessage.min.js
    • js/libs/class.min.js
    • js/jquery.phereo-photoplayer.min.js
    • js/jquery.phereo-photoplayer-lite.min.js (for developers)
  2. Phereo player style sheet:
    • css/phereo-photoplayer.min.css
  3. Phereo player style images (img/)
  4. PHP files (php/)

Upload this file catalogue structure to the server’s root directory. You can also create a personal directory and place the distribution files there.

File structure

That is all! Phereo 3D Photo Player has been installed on your web server.

Site Installation (PHP)

This guide for installing Phereo 3D Photo Player is designed for web hosting that supports PHP. If you’re unsure if your server supports PHP, please contact technical support.

Step 1. Upload distribution to the server (see Phereo 3D Photo Player Distribution).

Step 2. Prepare your content using the content preparation instructions and upload it to your website. Don’t forget your naming PATTERN — you will need it to link the content with the Player.

Step 3. Create .htaccess file and paste the following code:

Header set  Access-Control-Allow-Origin "http://player.phereo.com"

Place this file in your folder containing the photo files (for example: /content/photos_folder/photos1/).

You can also do the following:

Example for nginx configuration (must be compiled with ‘ngx_http_headers_module’ module):

location /path/to/images/ {
    add_header Access-Control-Allow-Origin "http://player.phereo.com";
}

Example for Apache configuration (must be compiled with ‘mod_headers’ module):

<Directory /path/to/images/>
    Header set  Access-Control-Allow-Origin "http://player.phereo.com"
</Directory>

Paste the following PHP code on the page:

<?
require($_SERVER['DOCUMENT_ROOT'].'/phereo-photoplayer/php/phereo.php');
// Image directory
$IMAGES_BASE_URL = 'http://yoursite.com/path_to_your_content/';
// User login
$username = '';
// User password
$secret_key = '';
$password = phereo_player_generate_password($secret_key);
// Images array for display in the player
$images = array(
    $IMAGES_BASE_URL.'count_yourPrefix.%size%.%mode%',
);
// Image default mode
$mode = 'sidebyside';
$params = json_encode(array(
    'username' => $username,
    'password' => $password,
    'images'=> $images,
    'mode'=> $mode,
    'modes'=> array('nvidia', 'anaglyph', 'interlace', 'sidebyside', 'wiggle', 'mono'),
));
?>

To include style files in the webpage, paste the following tag in the HEAD section:

<link rel="stylesheet" href="/phereo-photoplayer/css/phereo-photoplayer.min.css" />

Paste the following code in BODY section where you want to see the player:

<div id="player" style="width: 800px; height: 400px;"></div>
<script src="/phereo-photoplayer/js/libs/jquery-1.7.2.min.js"></script>
<script src="/phereo-photoplayer/js/libs/jquery.ba-postmessage.min.js"></script>
<script src="/phereo-photoplayer/js/libs/class.min.js"></script>
<script src="/phereo-photoplayer/js/jquery.phereo-photoplayer.min.js"></script>
<script type="text/javascript">
    $("#player").phereoPlayer(<?php echo $params ?>);
</script>

If the distribution files were put in a directory other than home, match the file path to your specified location.

Change the following parameters to adjust the player to your needs:

$IMAGES_BASE_URL — path to the directory where photo content is placed

$username — consumer key that was issued to you on the site

$secret_key — consumer secret key that was issued to you on the site

$mode = 'sidebyside' — change sidebyside to ‘anaglyph’ if you want Anaglyph to be the default 3D mode

$images = array($IMAGES_BASE_URL.'count_yourPrefix.%size%.%mode%',) — enter the path to your content and the pattern of filenames used when preparing your content. The player will automatically replace %size% with a resolution level constant and %mode% with viewing mode constant (anaglyph or sidebyside).

Pay attention to the following token:

$IMAGES_BASE_URL .'count_yourPrefix.%size%.%mode%'

This is a file storage template, which contains 2 mandatory meta tags:

  1. %size%
  2. %mode%

Therefore, if you’ve named your files like in the first example:

/photos_folder/photos1/01_photo.m.sidebyside

The token will come out as follows:

$IMAGES_BASE_URL.'photos1/01_photo.%size%.%mode%'

and $IMAGES_BASE_URL have to be:

$IMAGES_BASE_URL = 'http://yoursite.com/photos_folder/';

If you want to view more images, you’ll need to add additional rows to the $images array:

$images = array(
    $IMAGES_BASE_URL.'01_yourPrefix1.%size%.%mode%',
    $IMAGES_BASE_URL.'02_yourPrefix2.%size%.%mode%',
    $IMAGES_BASE_URL.'03_yourPrefix3.%size%.%mode%',
);

The $images array may contain an arbitrarily large number of your images, thus the amount of displayed images in the player is unlimited.

How to use Phereo 3D Photo Player

If you followed the instructions correctly, you should see the player displaying your image on the page it was added to.

If the username or the secret key was entered incorrectly, or if the player wasn’t properly installed (see Site Installation), it will display a black screen.

By default Phereo 3D Photo Player displays images in the format set in the $mode parameter (anaglyph or side-by-side). A black screen is also displayed when the server does not have the source image in the required format.

If you are using Internet Explorer you may see the following warning message: “Internet Explorer restricted this web page from running scripts or ActiveX controls.” In this case, the user must manually allow Phereo 3D Photo Player script execution by clicking “Allow blocked content”.

ActiveX

Phereo 3D Photo Player window features several controls described below.

  1. Switch to 3D Vision viewing mode (only active if NVIDIA 3D Vision is available on the system)
  2. Switch to Anaglyph viewing mode
  3. Switch to Interlaced viewing mode
  4. Switch to Side-by-Side viewing mode
  5. Switch to Wiggle viewing mode
  6. Switch to 2D (left stereomate)
  7. Go to previous image (if available)
  8. Go to next image (if available)
  9. Switch to full screen viewing mode
  10. Switch to 3D TV viewing mode (Squeezed Side-by-Side)
Phereo 3D Photo

In 3D TV mode, image navigation is controlled by the Left and Right keyboard arrows.

If the user’s hardware has NVIDIA 3D Vision support and it is enabled in the system settings, changing the viewing mode to 3D Vision will switch to it automatically.

If the user’s system doesn’t have NVIDIA 3D Vision technology, the 3D Vision viewing mode button is disabled. If the user has NVIDIA 3D Vision technology but it is disabled in the system settings, switching to 3D Vision viewing mode will result in the following error message: “Error displaying stereo image: NVIDIA stereo not enabled/available on system”.

See Also

Phereshop

View 3D photos in different stereo modes, including NVIDIA 3D VISION

3D Photo

View thousands stereo photos on your Android device

Video Player

Add 3D video on your site
If you have already an account on Phereo 3D Video website you can use these credentials for authorization on this website.
Enter your email in the form below