Web Publishing

STKObject : Javascript ShiVa3D Player detection and embed script

Changelog

1.8.1
- enhanced Java detection
- added compatibility with Ajax loading
- added Opera compatibility for Java installation
- fixed a bug with IE7 Vista leading to an installation failure
- fixed a bug with Firefox 3.6 leading to an installation failure
- fixed a bug with IE when Java is not available, installation opened in a new tab

How it works

Using stkobject.js is easy, include the stkobject.js Javascript file, then just call a function to embed your content.
The plugin will be installed and updated if needed

This an example of code needed to embed a stk :

<!-- Include this file as long as you call stkobject function ( < 13ko )-->
  <script src="http://player.stonetrip.com/stkobject1.8.js" type="text/javascript"></script>  
<!-- End -->

<!-- Display the 3d content -->  
  <div align="center" id="S3DContent">
    <script language="javascript" type="text/javascript">     
      stkobject( '640' , '480' , 'http://www.myurl.com/myGame.stk');  
    </script>  
  </div>
<!-- End -->

What the code does:

<script src="http://player.stonetrip.com/stkobject1.8.js" type="text/javascript"></script>

Embed the remote javascript file on your webpage

<div align="center" id="S3DContent">...</div>

Prepare an HTML element that will hold the installation process

stkobject( width , height , stk [, Server, QuitURL, LoadImg, LoadingData, 
AlternativePluginURL, ErrorURL, ForceFailsafe, AllowFullscreen, AdditionalStartupEnv, 
AppAALevel, AppShadowLevel, AppPostRELevel, AppReflectLevel, SmartCache, Language, 
CustomInstallerImageUrl, ImageType, AlternativeContent, PluginBackgroundColor, 
ContextMenu, Ajax ] );

Create a new stkobject and pass in the required arguments :

width- the width of the 3d content, in pixel or percent
height - the height of the 3d content, in pixel or percent
stk - the absolute file path to the stk file

Optional arguments are :

Common
Server - URL to the ShiVa 3D server
QuitURL -URL to redirect after an application exit (cf api )
LoadImg - deprecated
LoadingData - URL to your custom loader (instead of the green bar)
AlternativePluginURL - Use a different plugin release (not recommended)
ErrorURL - URL to redirect after an application error

Options
ForceFailsafe - No shader
AllowFullscreen - Use Right-click to switch to full screen
AdditionalStartupEnv - Additional startup environment variable
AppAALevel - Reduce aliasing
AppPostRELevel - Allow Reflection and refraction
AppReflectLevel - Allow Reflection and refraction
SmartCache - Allow multiple sockets for data streaming (cf api )

Installation customization
Language - If you have created custom installer image, you can specify a language
CustomInstallerImageUrl - The url where your pictures are stored
ImageType - extension of your custom images
AlternativeContent - Use an alternative content for the installation
PluginBackgroundColor - The background color of the plugin when updating

Misc
ContextMenu - Enable/Disable right click options
Ajax - If the plugin is loaded dynamically or when the dom is ready

Public function

Return true if the Java machine is available, set useAjax true if this function is called after the DOM is ready

Call this function to install the plugin, set notJava true if you want to use the old style installation with exe download, set useAjax true if this function is called after the DOM is ready

Return true if the plugin is installed and up to date

Call this function to execute a HUD action, you can pass optional arguments

Call this function to load a new content in the ShiVa3D Player

Color customization

ShiVa3D Webplayer allows developer to customize the installation process, color and loading in a simple way.

In the js call to stkobject, set the PluginBackgroundColor arguments to set the color displayed when the plugin is updating ( hexa web color )
if you are not using a custom loader, set the AdditionalStartupEnv (<V t='2' n='S3DStartUpOptions.BackgroundColor'>R,G,B</V>) to set the loader background color
Exemple :

PluginBackgroundColor = 000000
AdditionalStartupEnv = <V t='2' n='S3DStartUpOptions.BackgroundColor'>000,000,000</V>


PluginBackgroundColor = ffffff
AdditionalStartupEnv = <V t='2' n='S3DStartUpOptions.BackgroundColor'>255,255,255</V>

Installation customization

You can change the installation pictures.

In the Generator, check Custom plugin installer picture, you will then have to fill the Picture Folder URL, select an extension and language.


The Picture Folder URL is where the plugin will download the pictures,
Click Download sample and psd files to get the original files, change them and upload them to your server.

The folder on the server might look like that :


If you change the language, you must also create pictures in the targeted language plus the pictures in english.

You can also specify an Alternative content if you prefer to have instruction is flash for instance.

STKObject examples

Full page design : the 3D content will fill the entire page

In the header tag

<style type="text/css">
  body,html,div{ height:100%; margin:0; overflow:hidden}
</style>

The JS call

 stkobject( '100%' , '100%' , 'http://www.stonetrip.com/content/techdemo/TheAirSpray.stk' , '' , '' , '' , '' , '' , '' , 0 , 0 , "<V t='2' n='S3DStartUpOptions.BackgroundColor'>034,034,034</V>" , 0 , 0 , 0 , 0 , 1, null , null , null, 0,'222222',1);

Demonstration

---

Change pack : change STK file without page reload

<input type="submit" name="button" id="button" value="Change Pack" onclick="ChangeSTK('http://www.stonetrip.com/content/techdemo/EarthScreensaverHD.stk')" />

Demonstration

---

Background Color : loader and updater displayed with a clear blue background

<body bgcolor='#F0FFFF'>

then

stkobject( '640' , '480' , 'http://www.stonetrip.com/content/techdemo/TheAirSpray.stk' , '' , '' , '' , '' , '' , '' , 0 , 1 , "<V t='2' n='S3DStartUpOptions.BackgroundColor'>240,255,255</V>" , 0 , 0 , 0 , 0 , 1, null , null , null, 0,'F0FFFF',1);

Demonstration

---

Lightbox : display 3D content using a lightbox

In the header tag

  <!-- Include this code for the squeeze box effects -->
    <link rel='stylesheet' href='http://player.stonetrip.com/Generator/css/SqueezeBox.css'  type='text/css' />
    <script src='http://player.stonetrip.com/Generator/scripts/mootools-1.2.js' type='text/javascript'></script>
    <script src='http://player.stonetrip.com/Generator/scripts/SqueezeBox.js' type='text/javascript'></script>
    <script type='text/javascript'>
    /*<![CDATA[ */
      window.addEvent('domready', function() {
       SqueezeBox.assign($$('a.boxed'), {
       parse: 'rel'
       });
      });
    /* ]]> */
  </script>

 <!-- End -->

then

<a href="stk.html" class="boxed" rel="{handler:'iframe',size:{x:650,y:490}}">The link</a>

stk.html contains the full code to display 3d content

Demonstration