Editing Panorama on web pages (section)

=Pannellum=
'''[https://pannellum.org/ Pannellum] is JavaScript library for displaying and navigate panorama images on web pages.
'''
In order to use Pannellum you must:
* Download Pannellum: https://pannellum.org/download/
* Place the downloaded files: <code>pannellum.css, pannellum.htm, pannellum.js</code> in a folder 
* Save a panorama image in the same folder 
** [https://commons.wikimedia.org/wiki/Category:360_panoramics#GallerySlideStartButtons Wikimedia commons] is a good source of panoramic images under free licenses
** Pannellum images with a '''maximum of 8000px wide''', so you might need to resize the panorama image file
* Use the API example in [https://pannellum.org/documentation/examples/simple-example/ Pannellum documentation] to write your HTML page. An example of the change code can be seen below 
* Set the pannellum.viewer with the settings for your image, most important parameters are:
** <code>"panorama":</code> defines the image file to use
** <code>"type":</code> the type of the image: [https://en.wikipedia.org/wiki/Equirectangular_projection equirectangular], [https://en.wikipedia.org/wiki/Cube_mapping cubemap], or multires
** A full list of Pannellum parameters and methods can is available in its [https://pannellum.org/documentation/api/ API documentation]

'''To run it you will need to store the folder with the library, html page and images in webserver'''.

==Example==
See live example in http://publicationstation.wdka.hro.nl/pannellum/

==HTML code==
<source lang='html4strict'>
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A simple example</title>
    <link rel="stylesheet" href="pannellum.css"/>
    <script type="text/javascript" src="pannellum.js"></script>
    <style>

      
      html {
      height: 100%;
      }

      body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: fixed;
      cursor: default;
      width: 100%;
      height: 100%;
      }
/*      
      #panorama {
      width: 600px;
      height: 400px;
      }
*/      
    </style>
  </head>
  <body>

    <div id="panorama"></div>

    <script>
     viewer =  pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "Mars.jpg",
      "autoLoad": true,
      "showFullscreenCtrl":false
      });
    </script>

  </body>
  </html>

</source>

==Interaction==
Programmatic interaction with the panorama can be achieved by using Pannellum [https://pannellum.org/documentation/api/ API]
* <code>viewer.getYawBounds()</code> returns the boundaries ( minimum and maximum) allowed pitches (in degrees)
* <code>viewer.setYaw(10)</code> set Yaw to 10
* <code>viewer.setYaw(viewer.getYaw()-100)</code> get current yaw and move -100 from it

Example in https://pannellum.org/documentation/examples/custom-controls/

[[Category:Research]] [[Category:Tutorial]]