pannellum-react-rpa v1.0.1

pannellum-react-rpa

React Component library for the Pannellum project. Cloned from pannellum-react and customized for RPA needs.

Install and Import

Install pannellum-react-rpa component

 npm i pannellum-react-rpa

Import pannellum-react in your react component file by

import { Pannellum } from "pannellum-react-rpa";

Note: The main update is the removal of video functionality and the fix of jagged equirectangular images.

Demo

https://farminf.github.io/pannellum-react/

you can also use codesandbox playground

Simple Example

import React, { Component } from 'react';
import { render } from 'react-dom';

import { Pannellum } from "pannellum-react-rpa";
import myImage from "./images/alma.jpg";

const PannellumReact = () => (
  <div>
    <h1>Pannellum React Component</h>
    <Pannellum
        width="100%"
        height="500px"
        image={myImage}
        pitch={10}
        yaw={180}
        hfov={110}
        autoLoad
        onLoad={() => {
            console.log("panorama loaded");
        }}
    >
      <Pannellum.Hotspot
        type="info"
        pitch={11}
        yaw={-167}
        text="Info Hotspot Text 3"
        URL="https://github.com/farminf/pannellum-react"
      />

      <Pannellum.Hotspot
        type="info"
        pitch={31}
        yaw={-107}
        text="Info Hotspot Text 4"
        URL="https://github.com/farminf/pannellum-react"
      />
    </Pannellum>

    </div>
);

export default PannellumReact;

API

pannellum-react has most of the official pannellum properties (not all of them). It just needed to be passed as props of the pannellum component like example above.on

Props API

Additionally, by Getting refrence of the component, you can get the pannellum Viewer calling getViewer() which gives all the available functions of the viewer such as getPitch, setPitch , getyaw and etc. find here

Moreover, you can force render the component using forceRender() in case if you change a prop and didn't change constantly.(example would be hotspot: if you want to update hotspot dynamically, better to call forceRender after updating the hotspots)

example this.PanImage.current.getViewer().getPitch(), PanImage is ref of the component.

HotSpot API

Info

Custom

Example with all the available props

<Pannellum
  width="100%"
  height="500px"
  image={myImage}
  haov={180}
  vaov={90}
  vOffset={1}
  pitch={10}
  yaw={180}
  hfov={110}
  maxHfov={170}
  minHfov={30}
  autoLoad
  author=""
  title=""
  orientationOnByDefault={false}
  compass
  draggable
  keyboardZoom
  mouseZoom
  preview=""
  previewAuthor=""
  previewTitle=""
  showControls
  showFullscreenCtrl
  showZoomCtrl
  hotspotDebug={false}
  onLoad={() => {
    console.log("panorama loaded");
  }}
  onError={err => {
    console.log("Error", err);
  }}
  onErrorcleared={() => {
    console.log("Error Cleared");
  }}
  onMousedown={evt => {
    console.log("Mouse Down", evt);
  }}
  onMouseup={evt => {
    console.log("Mouse Up", evt);
  }}
  onTouchstart={evt => {
    console.log("Touch Start", evt);
  }}
  onTouchend={evt => {
    console.log("Touch End", evt);
  }}
>
  <Pannellum.Hotspot
    type="info"
    pitch={11}
    yaw={-167}
    text="Info Hotspot Text"
    URL="https://github.com/farminf"
  />

  <Pannellum.Hotspot
    type="custom"
    pitch={31}
    yaw={150}
    handleClick={(evt , args) => console.log(args.name)}
    handleClickArg={{ "name":"test" }}
    {/* there are 3 other props. see the custom hotspot doc above*/}
  />

</Pannellum>

License

pannellum-react-rpa is released under the MIT license.