Snapshot Plugin for Krpano for HTML5 only

by Jerome Boccon-Gibod - jerome@360images.fr

Description

A HTML5 only plugin to take snapshots of a 360 panorama or a 360 video displayed by krpano and share it on social networks, send it by email or download it.

• On desktop you can choose the aspect ratio of the viewfinder and let the user change it or not.
• You can setup color, padding, aspect or the viewfinder.
• You can add a watermark to the snapshots.
• You can display a message to explain how it works the first time the plugin is used.
• You can setup the subject and text of the emails.
• You can setup the snapshot button position on mobile.
• You can setup the snapshot size and quality.
• You can change the snapshot folder path.
• You can share the snapshots on Facebook - Twitter - Google+ - LinkedIn - Pinterest - Tumblr - Weibo - Email - Download and choose to enable or disable each network.
• The share will include the snapshot and a link to the panorama or the tour (the link will open the shared scene if it's a tour).

Download

krpano Forum Discussion Thread

Krpano Snapshot Plugin Thread

Screenshots

Syntax / HTML Usage

Embed jquery script before </head/>

<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/></script>

Setup html5:"only+webgl" and webglsettings:{preserveDrawingBuffer:true}

<script>embedpano({swf:"krpano.swf", xml:"tour.xml", target:"pano", html5:"only+webgl", webglsettings:{preserveDrawingBuffer:true}, passQueryParameters:true});</script>

Syntax / XML Usage Example

Simple include syntax

<include url="panoshot/panoshoot.xml"/>

Full include syntax

<include url="panoshot/panoshoot.xml"/>
<panoshot 
	show_snapshot_onstart="false"
	maxsize="1024" 
	jpeg_quality="0.6" 
	watermark="true"  
	snapshot_name="360_Snapshot"
	show_ratio="true" 
	ratio_icon_position_align="right"   
	viewfinder_ratio_width="16" 
	viewfinder_ratio_height="9"    
	viewfinder_padding="150"
	viewfinder_glass="true"
	viewfinder_bg_color="0x000000"
	viewfinder_bg_alpha="0.7"
	viewfinder_border="3 0xffffff 1"
	snapshot_icon_y="100"    
	email_subject="Check this out !" 
	email_line1="I took this picture !" 
	email_line2="Take yours >" 
	show_msg="true"
	tutorial_msg="Move the panorama to [b]compose[/b], [b]capture[/b] and [b]share your view ![/b]"
	share_msg="[b]Wow, nice pic ![/b][br]You can now [b]share it[/b] on your social networks ![br]∨"
	share_txt="Share on"
	mobile_button_align="bottom"
	mobile_button_edge=""
	mobile_button_x=""
	mobile_button_y="50"
	plugin_path="panoshot/"
	sound_path="panoshot/"
	external_php_server="false"
	external_php_server_path=""
/>

Select social networks to enable

    <social_but name="panoshot_facebook" show="true"/>
    <social_but name="panoshot_twitter" show="true"/>
    <social_but name="panoshot_googleplus" show="true"/>
    <social_but name="panoshot_linkedin" show="true"/>
    <social_but name="panoshot_pininterest" show="true"/>
    <social_but name="panoshot_tumblr" show="true"/>
    <social_but name="panoshot_vk" show="false"/>
    <social_but name="panoshot_weibo" show="false"/>
    <social_but name="panoshot_email" show="true"/>
    <social_but name="panoshot_download" show="true"/>
    

Plugin Attributes

• show_snapshot_onstart  (optionally)
  • Should the snapshot UI be displayed onstart
  • If set to true the snapshot UI will be displayed onxmlcomplete
  • If set to false you can display the Snapshot UI by calling the action show_snapshot(true) and hide it again calling show_snapshot(false)
  • default=false
• maxsize  (optionally)
  • Maximum size or the snapshot
  • If viewfinder is bigger the snapshot will be resized
  • If the viewfinder is smaller the snapshot will keep its size
• jpeg_quality  (optionally)
  • Jpeg quality size or the snapshot
  • 0.0 - 1.0, default=0.6
  • Not recommanded to change this value (too much compression or too big file)
• watermark  (optionally)
  • Add a watermark on the snapshot
  • the watermark must be a png file located in the panoshot folder and named watermark.png
  • default=true
• snapshot_name  (optionally)
  • Name of the snapshot file when downloaded
  • default=360_Snapshot
• show_ratio  (optionally)
  • Display the ratio icons on the right
  • If set to false no icons to close the Snapshot UI will be displayed, in that case you can clode the Snapshot UI calling show_snapshot(false)
  • default=true
• ratio_icon_position_align  (optionally)
  • Display the ratio icons on the left or right of the screen.
  • Available options : left - right
  • default=right
• viewfinder_ratio_width  (optionally)
  • The viewfinder ratio width
  • Can be anything but the available icons are 16/9 - 3/2 - 4/3 - 1/1
  • default=16
• viewfinder_ratio_height  (optionally)
  • The viewfinder ratio height
  • Can be anything but the available icons are 16/9 - 3/2 - 4/3 - 1/1
  • default=9
• viewfinder_padding  (optionally)
  • padding between the viewfinder and the window
  • will be top/bottom or left/right padding depending on viewfinder and window aspect ratio
  • default=150
• viewfinder_glass  (optionally)
  • Display the focussing screen in the viewfinder
  • default=true
• viewfinder_bg_color  (optionally)
  • The viewfinder overlay color
  • default=0x000000
• viewfinder_bg_alpha  (optionally)
  • The viewfinder overlay alpha
  • default=0.7
• viewfinder_border  (optionally)
  • The viewfinder border
  • default=3 0xffffff 1
• snapshot_icon_y  (optionally)
  • The y position of the snapshot button when the viewfinder is set to "screen"
  • default=100
• email_subject  (optionally)
  • The email subject
  • default=Check this out !
• email_line1  (optionally)
  • The text before the snapshot url in the email
  • default=I took this picture !
• email_line1  (optionally)
  • The text before the panorama url in the email
  • default=Take yours >
• show_msg  (optionally)
  • Show or not tutorial and share message
  • default=true
• tutorial_msg  (optionally)
  • The text displayed the first time snapshot UI is displayed
  • Will be only displayed once
• share_msg  (optionally)
  • The text displayed the first time a snapshot is displayed
  • Will be only displayed once
• share_txt  (optionally)
  • The text displayed next to the social icons
  • default=Share on
• mobile_button_align  (optionally)
  • The snapshot button alignment for mobile and tablet
  • default=bottom
• mobile_button_edge  (optionally)
  • The snapshot button edge for mobile and tablet
  • default=
• mobile_button_x  (optionally)
  • The snapshot button x value for mobile and tablet
  • default=
• mobile_button_y  (optionally)
  • The snapshot button y value for mobile and tablet
  • default=50
• plugin_path  (optionally)
  • The relative path to the panoshot folder from the %FIRSTXML% file
  • default=panoshot/
• sound_path  (optionally)
  • The relative path to the sound folder where is shutter.mp3 from the %FIRSTXML% file
  • default=panoshot/
• external_php_server  (optionally)
  • Host the php file on an external server
  • Can be usefull if your tour is hosted on a Amazon server without php.
  • default=false
• external_php_server_path  (optionally)
  • Absolute path of the php folder if external_php_server is set on true
  • default=
• social_but  (optionally)
  • choose to enable or disable social networks share buttons.
  • show="true/false"

Plugin Actions

• show_snapshot(true/false)
  • Show or hide the Snapshot UI
  • The var snapshot_ison will be set to true or false so you can check is the Snapshot UI is visible or not and do something

    if(snapshot_ison == true,do_something,do_something_else)

  • The action mysnapshot will be called with the same var (true or false) so you can call a custom action in the same time you display or hide the Snapshot UI

    <action name="mysnapshot">
    	 if(%1 == true,set(layer[show_snapshot_button].visible,false),set(layer[show_snapshot_button].visible,true))
    </action>

Notes

• Works only in HTML5 and krpano version min 1.19 pr4!
• Works only in with PreserveDrawingBuffer enabled!
  • webglsettings:{preserveDrawingBuffer:true}
• Works only in Jquery embeded!
  • <script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/></script>

License

This plugin is offered as a commercial plugin. It is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will the author of the plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not the plugin author have been advised of the possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event the plugin author will have no liability arising out of this agreement.

If you need a custom version of the Snapshot for Krpano plugin feel free to shoot me an email !

Panorama Example

Video Example

Full demo here