JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q18836F
  • License MIT

Panorama 360 viewer module with hotspot

Package Exports

  • @mecenas/pan360-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mecenas/pan360-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pan360-viewer

The package allows you to view panoramas in both HMD and normal modes with the possibility of applying clickable markers. configuration:

Pan360Options {      id: string; - HTML element identifier in which the panorama will be displayed (required)      width: number; - HTML element width (required)      height: number; - height of HTML element (required)      Zoom: number; - camera zoom (optional, 20 .. 130 by default 70)      firstview: number; - initial rotation of the panorama by a given angle (optional, 0 .. 360 by default 0)      component: HTMLElement; - HTML element in which the panorama will be displayed (optional) marker: string; - marker image (optional default '/assets/hotspot.png' not included)      hotspots: HotSpot []; - array of clickable markers on the panorama (optional)      mode: number; - If it is 0 then both the reaction to device orientation and manual image dragging are enabled (after releasing the image returns to the device orientation). If 1 then you can switch between manual dragging and device orientation (optional, 0,1 by default 0) }

Marker object:

HotSpot { tilt:number; - angle -90 .. 90 pan:number; - angle 0 .. 360 size:number; name:string; text:string; }`

Methods:

show(image:string):Promise<boolean>; getScreenShot():string; - screen shot base64 image toggleHmd(); - switch HMD mode toggleManual(); - if mode 1 switch between manual drag and device orientation setHotspotsFunction((hotspotname)=>{ ... }); - set click markers funcrion destroy(); - destroy renderer and events setSize(width:number,height:number); - set HTML element dimension

Property:

hmd:boolean - get hmd mode read-only manual:boolean - get manual mode read-only

Example:

on your html page:

<div id="panorama-360-viewer"></div>

in js code:

let conf:Pan360Options = { id: "panorama-360", height: window.innerHeight, width: window.innerWidth, zoom: 100, hotspots: hotspotsarray } let panView = new Pan360View(conf); panView.show(img).then((success)=>{ // do something })