Photo Sphere Viewer

[derRenner]

Für ein Kundenwebprojekt musste eine Darstellung von 360° Panorama/Spheren-Bilder implementiert werden.
Diese Darstellungsmöglichkeit wurde mit Rocksolid Custom Elements umgesetzt und basiert auf
https://photo-sphere-viewer.js.org
https://github.com/mistic100/Photo-Sphere-Viewer

Contao 4.9.3
Rocksolid Custom Elements
Webprojekt

rsce_panorama_config.php

<?php

return array(
    'label' => [
        'de' => ['Panoramabild','Panoramabild'],
    ],
    'types' => ['content','module'],
    'contentCategory' => 'beRecont',
    'moduleCategory' => 'beRecont',
    'standardFields' => ['cssID'],
    'fields' => [
        'description' => [
            'label' => ['Panoramabild','https://photo-sphere-viewer.js.org/'],
            'inputType' => 'group',
        ],
        'panoramaImage' => [
            'label' => ['Panoramabild','Wählen Sie das Panoramabild aus'],
            'inputType' => 'fileTree',
            'eval' => [
                'fieldType' => 'radio',
                'filesOnly' => true,
                'extensions' => 'jpg',
                'mandatory' => true,
            ],
        ],
        'viewerID' => [
            'label' => ['Panoramabild ID','Vergeben Sie ein ID (default: viewer)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50 clr',
                'mandatory' => true,
            ],
            'default' => 'viewer',
        ],
        'caption' => [
            'label' => ['Beschreibung','Optional: Geben Sie eine Beschreibung ein'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
                'allowHtml' => true,
            ],
            'default' => 'GWerkhaus Horn',
        ],
        'navbar' => [
            'label' => ['Navbar','Geben Sie die Liste der Icons in der Navbar ein (default: autorotate zoom download caption fullscreen)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50 clr',
            ],
            'default' => 'autorotate zoom download caption fullscreen',
        ],
        'zoom' => [
            'label' => ['Zoom','Zoom für den Bildausschnitt wählen (Wert zwischen 0 (max) und 100 (min) default: 50)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
                'mandatory' => true,
            ],
            'default' => '50',
        ],
        'autorotate' => [
            'label' => ['Autorotate',''],
            'inputType' => 'checkbox',
            'eval' => [
                'tl_class' => 'w50 clr m12',
            ],
            'default' => true,
        ],
        'autorotateDelay' => [
            'label' => ['Autorotate Verzögerung','Wert in ms bis die Rotation beginnt'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50 clr',
                'allowHtml' => true,
            ],
            'default' => '2000',
        ],
        'autorotateSpeed' => [
            'label' => ['Rotationsgeschwindigkeit','Wert in rpm (default: 1rpm)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50 clr',
                'allowHtml' => true,
            ],
            'default' => '1rpm',
        ],
        'longitude' => [
            'label' => ['Initial Longitude','Anfangswert Blickwinkel vertikal (Wert zwischen 0 und 2?)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50 clr',
                'allowHtml' => true,
            ],
            'default' => '1.5',
        ],
        'latitude' => [
            'label' => ['Initial Latitude','Anfangswert Blickwinkel horizontal (Wert zwischen -?/2 und ?/2)'],
            'inputType' => 'text',
            'eval' => [
                'tl_class' => 'w50',
                'allowHtml' => true,
            ],
            'default' => '-0.5',
        ],
    ],
);

rsce_panorama.html5

<?php

# $GLOBALS['TL_HEAD'][] = '<style>#viewer{width:auto;height:50vh;}</style>';
$GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/layout/assets/css/photo-sphere-viewer.css"/>';
# $GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/three.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/browser.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/photo-sphere-viewer.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>';

?>

<div id="<?php echo $this->viewerID ?>" style="width:auto;height:50vh"></div>

<script>
// https://photo-sphere-viewer.js.org/guide/config.html#standard-options
new PhotoSphereViewer.Viewer({
  panorama: '<?php if (null !== ($objFile = Contao\FilesModel::findByUuid($this->panoramaImage))): $imagePath = $objFile->path; echo $imagePath; endif; ?>',
  container: '<?php echo $this->viewerID ?>',
  caption: '<?php echo $this->caption ?>',
  navbar: '<?php echo $this->navbar ?>',
  defaultLat: <?php echo $this->latitude ?>,
  defaultLong: <?php echo $this->longitude ?>,
  mousewheel: false,
  touchmoveTwoFingers: false,
  <?php if ($this->autorotate == true): echo 'autorotateDelay: ' . $this->autorotateDelay . ','; endif; ?>
  autorotateSpeed: '<?php echo $this->autorotateSpeed ?>',
  defaultZoomLvl: <?php echo $this->zoom ?>,
});
</script>

Backendansicht: