News Examples Documentation Download Buy Forum Contact

Documentation

Plugins

XML Extensions

Tools


Third Party Software
for krpano

Panimator Bundle
panimator add-on for Blender
timelines.js
dolly.js


by Michael Adam and Arthur van den Enk

Description

The bundle contains 3 scripts. With the Panimator add-on for Blender you can create a krpano compatible output of your animations for the 'camera' and for hotspots. With the dolly.js you can playback the camera path and behaviour you exported from Blender. With the timelines.js it is possible to playback your hotspot animations you created in Blender.
The dolly.js and timelines.js are krpano plugins.

timelines.js usage

<plugin name="timelines" 
	url="timelines.js"
	preload="true"
	keep="true"
	devices="html5"
	key="*** your licence key ***"	
/>


You need to tell the timelines a 'starting point':
This is time in seconds based on 24 fps (!)
For example:
<action name="startup" autorun="onstart">
	set(timelinetime_1, 0);
	set(timelinetime_2, 0);	
	set(timelinetime_3, 0);
</action>


For each timeline you need at least to give a speed!
The speed is NOT dynamic during playback and also connected to the timelinetime_x
<timeline_1 speed="**" />

For example:
<timeline_1 speed="12"  />
<timeline_2 speed="24"  />
<timeline_3 speed="6"  />


The Panimator add-on for Blender will output an list/array of keyframes with the variables you have choosen. You must copy these in your xml and for example include it like:
<include url="timeline_12.xml" />
A timeline xml example could look like:
<krpano>

<timekey_12 name="tq1" tx="-4737.22" ty="-5086.27" tz="-2529.31" rx="0.0" ry="572.89" rz="-60.36" alpha="0.001184" />
<timekey_12 name="tq2" tx="-4588.88" ty="-5075.62" tz="-2508.63" rx="0.0" ry="1289.64" rz="-61.4" alpha="0.004672" />
<timekey_12 name="tq3" tx="-4354.07" ty="-5058.06" tz="-2474.04" rx="0.0" ry="1284.32" rz="-63.11" alpha="0.010368" />
<timekey_12 name="tq4" tx="-4042.97" ty="-5033.75" tz="-2425.44" rx="0.0" ry="1277.02" rz="-65.45" alpha="0.018176" />
<timekey_12 name="tq5" tx="-3665.75" ty="-5002.85" tz="-2362.72" rx="0.0" ry="1267.85" rz="-68.4" alpha="0.028" />
<timekey_12 name="tq6" tx="-3232.58" ty="-4965.5" tz="-2285.79" rx="0.0" ry="1256.88" rz="-71.92" alpha="0.039744" />
etc etc etc...
	
</krpano>


It is possible to ignore a value from the array, this can also be done dynamically.
The following values are 'ignorable':
- alpha
- scale
- width
- height
- tx ty tz
- rx ry rz

For example if you want to ignore the ty from timeline_3 from the start, set the noty to 1.
(default = 0):
<timeline_3 speed="6" noty="1"  />

Available are:
- noalpha
- noscale
- nowidth
- noheight
- notx
- noty
- notz
- norx
- nory
- norz

Each timeline also needs it's own 'Skript_**timelinenumber**' action. This can be empty, but it should exist.
If you want to control the behaviour of the timeline or it's hotspot during playback you can do it there.
For example: Skript action for timeline 4
<action name="Skript_4">
	if(tq GT 90 AND tq LT 92, set(timeline_4.noscale, 1);set(hotspot[tomato],scale=1,bgcolor=0xff0000));	
	if(tq GE 149,  StopTimeline(4));
</action>

At 'tq 90' (keyframe) we set to ignore the scale from the 'timekey array' and give the hotspot a new scale and bgcolor.

You should stop a timeline when it comes to it's end ... otherwise it will keep on running with no effect other then taking much resources. When your timeline_4 has 150 keyframes (tq) then you should put in your Skript action:
if(tq GE 149, StopTimeline(4));

To play, pause or stop a timeline we provide the following action calls:
RunTimeline(**, HOTSPOTNAME);
PauseTimeline(**);
StopTimeline(**);

( tline_** is 'running' or is passive )
** = timeline number
set(hotspot[tomato].onclick, RunTimeline(23, labrador));	


Or use in a custom action for example call: PlayPauseTimeline(23, labrador);

<action name="PlayPauseTimeline">
	if(tline_%1 == 'running', 
		PauseTimeline(%1);
	,
		RunTimeline(%1, %2);
	);
</action>


dolly.js usage

the dolly.js plugin works quite the same as the timelines.js plugin. But there are differences.
<plugin name="dolly" 
	url="dolly.js"
	preload="true"
	keep="true"
	devices="html5"
	key="*** your licence key ***"	
/>


You need to tell the dolly a 'starting point':
This is time in seconds based on 24 fps(!)
For example:
<action name="startup" autorun="onstart">
	set(dollytime_1, 0);
	set(dollytime_2, 0);	
	set(dollytime_3, 0);
</action>


For each dolly you need at least to give a speed!
The speed is NOT dynamic during playback and also connected to the dollytime_x
<dolly_1 speed="**" />

For example:
<dolly_1 speed="12"  />
<dolly_2 speed="24"  />
<dolly_3 speed="6"  />


The Panimator add-on for Blender will output an list/array of keyframes with the variables you have choosen. You must copy these in your xml and for example include it like:
<include url="dolly_6.xml" />
A dolly xml example could look like:
<krpano>

<waypoint_1 name="cq1" tx="3627.7" ty="-174.0" tz="-87.12" hlookat="-90.05" vlookat="-0.01" camroll="0.0" />
<waypoint_1 name="cq2" tx="3624.27" ty="-174.0" tz="-85.44" hlookat="-90.21" vlookat="-0.03" camroll="0.0" />
<waypoint_1 name="cq3" tx="3618.66" ty="-174.0" tz="-82.68" hlookat="-90.47" vlookat="-0.06" camroll="0.0" />
<waypoint_1 name="cq4" tx="3610.93" ty="-174.0" tz="-78.89" hlookat="-90.83" vlookat="-0.1" camroll="0.0" />
<waypoint_1 name="cq5" tx="3601.16" ty="-174.0" tz="-74.09" hlookat="-91.3" vlookat="-0.16" camroll="0.0" />
<waypoint_1 name="cq6" tx="3589.43" ty="-174.0" tz="-68.34" hlookat="-91.86" vlookat="-0.22" camroll="0.0" />
etc etc etc...
	
</krpano>


It is possible to ignore a value from the array, this can also be done dynamically.
The following values are 'ignorable':
- hlookat
- vlookat
- fov
- camroll
- tx ty tz

For example if you want to ignore the fov from dolly_3 from the start to activate it later perhaps, set the 'nofov' to 1.
(default = 0):
<dolly_3 speed="6" nofov="1"  />

Available are:
- nohlookat
- novlookat
- nofov
- nocamroll
- notx
- noty
- notz

Each dolly also needs it's own 'Plot_**dolly number**' action. This can be empty, but it should exist.
If you want to control the behaviour of the dolly during playback you can do it there.
For example: Plot action for dolly 4
<action name="Plot_4">
	if(cq GT 999, StopDolly(4);set(hotspot[lemon].active, false));	
</action>

At 'cq 999' (keyframe) we stop the dolly and set the lemon hotspot active : false..

You should stop a dolly when it comes to it's end ... otherwise it will keep on running with no effect other then taking much resources. When your dolly_4 has 1000 keyframes (cq) then you should put in your Plot action:
if(cq GE 999, StopDolly(4));

To play, pause or stop a dolly we provide the following action calls:
RunDolly(**);
PauseDolly(**);
StopDolly(**);

( dollytrack_** is 'running' or is passive )
** = dolly number
set(hotspot[tomato].onclick, RunDolly(12));	


Or use in a custom action for example call: PlayPauseDolly(12);

<action name="PlayPauseDolly">
	if(dollytrack_%1 == 'running', 
		PauseDolly(%1);
	,
		RunDolly(%1);
	);
</action>

Additional info

The timelines and dolly 'clock' is now fixed on 24 frames a second. So when you use the Blender default framerate of 24 fps in your animation, then with 'speed' setting to 24 would playback it at the same speed. But you can also playback at another speed.

As an example.. let's imagine a dolly path of 4000 frames in blender. We can scale that to 1000 frames in blender and export. ( that would save us 3000 lines of xml !) Then we can do playback with speed 6 and we'll see it playback at the normal speed, without any stuttering. In Blender we only used 2 decimals during export.

If you experience 'stuttering' of a timeline or dolly during playback, you can export your animation with more decimals and/or scale the animation frame amount up. In combination with your 'speed' setting you should be able to make it nice and smooth. This can be specific for each variable.