zRadar Plugin zradar.js WebGL + HTML5 only

by indexofrefraction - (send forum message)

Description

• a customisable radar icon showing the view direction and angle (fov)
• a customisable compass icon showing the view direction
• an image based compass using images for a compass needle and background

• as layer with a dynamically created SVG scaleable to any size
• as hotspot providing a canvas mode to support webgl hotspots
  this enables all features in WebVR as well ! (requires krpano 1.21+)

Table of Contents

• Description
• Syntax / XML Usage Example
• Plugin Attributes
• Plugin Actions
• Buy / Order the Plugin
• Examples
• Forum Discussion Thread

Syntax / XML Usage Example

• Add zradar.js to your project folder
• In your html (index/tour.html) ensure that you embedd krpano with html5:"only+webgl"
  

  embedpano({ html5:"only+webgl", ... });

• In your main xml (tour.xml) add the plugin
  

  <plugin name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef" />

• regular krpano plugin/layer attributes will give the radar svg a position and size
  this code is enough to display the default radar!
  (note: you can skew the radar by setting the height different than the width)
  

  <plugin name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef"
  	align="bottomright" edge="center"
  	x="100" y="100" width="100" height="100" />

• the created svg has five paths which can get styled individually.
  i.e. to use path 1 as a borderless black background you would set these attributes:
  

  <plugin name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef"
  	align="bottomright" edge="center"
  	x="100" y="100" width="100" height="100"
  	line1alpha="0" fill1color="0x000000" fill1alpha="0.5" />

• for each of the five paths you can set the line width, color, alpha, fill color and alpha
  and a radius attribute which allows to define the paths shape.
  the styling possibilites are shown in the examples
• the provided reset view action can be used in the onclick attribute
  

  <plugin name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef"
  	align="bottomright" edge="center"
  	x="100" y="100" width="100" height="100"
  	fill1color="0xff0000" fill1alpha="0.5"
  	onclick="zradar_resetview()" />

• about plugins, layers, hotspots and WebVR:
  plugins/layers and hotspots with renderer="css3d" do not show in inWebVR
  in WebVR only hotspots with renderer="webgl" can be displayed.
  
  for this zRadar has to be loaded as hotspot (requires krpano 1.21+)
  

  <hotspot name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef" />

  
  note: krpano <layer> or <plugin> elements are the same, only with different names!
  (also see documentation of the <plugin> and <hotspot> elements)
  
• about the display size:
  sizing and positioning generally works as with any regular krpano plugin and hotspot
  (see documentation of the <plugin> and <hotspot> elements)
  note: the display size is set by the plugins or hotspots width and height,
  not by the internal svgsize or canvassize values!
• about positioning:
  sizing and positioning generally works as with any regular krpano plugin and hotspot
  (see documentation of the <plugin> and <hotspot> elements)
  additionally zRadar allows unified align positioning on desktop and WebVR for hotspots
  using the zalign, zx/zy and vrscale attributes
  
  this is an example of an align positioned flying hotspot (requires krpano 1.21+)
  

  <hotspot name="zradar" url="zradar.js"
  	preload="true" keep="true" regkey="abcdef"
  	flying="1.0" zalign="topleft" zx="100" zy="100" />

• about svg and canvas mode:
  for plugins/layers and hotspots with renderer="css3d" an SVG is used
  for hotspots with renderer="webgl" (needed for WebVR) a canvas element is used
  forcecanvas="true" will force canvas mode for layers and css3d hotspots
• about the foreground and background images:
  these images are intended to create a pixel based compass
  the fg image rotates with the view angle and is normally used for a compass needle
  the svg is always displayed on top (in front of the foreground image)
  svgalpha, fgalpha and bgalpha can be used to blend the components
• about performance:
  svg mode has better scaling, a better performance and uses less memory!
  for images and canvas size use the smallest size possible!
  foreground and background image sizes and the canvas size
  should match or stay close to the used display size.

Plugin Attributes

<plugin name="zradar"
	url="zradar.js"
	preload="true"
	keep="true"
	regkey=""
	☞ basic settings
	mode="radar"
	heading="0"
	headingoffset="90"
	invert="false"
	svgsize="100"
	canvassize="256"
	canvaspixelratio="auto"
	forcecanvas="false"
	refreshrate="0"
	drag="false"
	☞ svg and image settings
	svgalpha="1.0"
	fgurl="" fgalpha="1.0"
	bgurl="" bgalpha="1.0"
	rscale="true"
	lscale="1.0"
	dscale="1.0"
	pathorder="12345"
	☞ path settings
	radius1="1.0"          radius2="0.9"          radius3="0.2|0.8|0.2"  radius4="0.2|0.8|0.2"  radius5="0.1"
	line1width="1.5"       line2width="1.5"       line3width="1.5"       line4width="3.0"       line5width="1.5"
	line1color="0xffffff"  line2olor="0xffffff"   line3color="0xffffff"  line4color="0xffffff"  line5color="0xffffff"
	line1alpha="0.0"       line2alpha="1.0"       line3alpha="1.0"       line4alpha="1.0"       line5alpha="1.0"
	fill1color="0xffffff"  fill2color="0xffffff"  fill3color="0xffffff"  fill4color="0xffffff"  fill5color="0xffffff"
	fill1alpha="0.2"       fill2alpha="0.0"       fill3alpha="0.0"       fill4alpha="0.5"       fill5alpha="0.0"
	line1cap="round"       line2cap="round"       line3cap="round"       line4cap="round"       line5cap="round"
	line1join="round"      line2join="round"      line3join="round"      line4join="round"      line5join="round"
	line1dash=""           line2dash=""           line3dash=""           line4dash=""           line5dash=""
	line1gradient="..."    line2gradient="..."    line3gradient="..."    line4gradient="..."    line5gradient=""
	fill1gradient="..."    fill2gradient="..."    fill3gradient="..."    fill4gradient="..."    fill5gradient=""
	☞ positioning settings
	zalign=""
	zx="0" zy="0"
	vrscale="1.0"
        />
    

Plugin Actions

zradar_resetview(*time, *tweentype)

Buy / Order the plugin

• krpano 1.20 or newer, html5 only! (Flash is not supported)
  support for all features requires krpano 1.21 or higher
• canvas mode for webgl hotspots (support for WebVR) requires krpano 1.21 or newer
• hotspot align positioning (zalign) is experimental and comes without warranty
• zRadar is tied to your krpano license (needs a registered version of krpano)

Examples

krpano Forum Discussion Thread