diff options
Diffstat (limited to 'apps/samples/vrml')
29 files changed, 0 insertions, 5566 deletions
diff --git a/apps/samples/vrml/README.md b/apps/samples/vrml/README.md deleted file mode 100644 index 2a019da..0000000 --- a/apps/samples/vrml/README.md +++ /dev/null @@ -1,150 +0,0 @@ -# VRML Server - -The VRML Server allows clients to retrieve sceneshots of 3D models on the filesystem in a variety of formats. - -## General Mode of Operation - -The VRML server will monitor its vrml directory recursively for <tt>vrml</tt> and <tt>wrl</tt> -files. Whenever such a file is found, it is converted into a native, binary representation and -saved in the tmp directory. Clients can now access sceneshots of this model by specifying the -desired pose and format. - -## Accessing Sceneshots - -In the simplest case, a sceneshot is retrieved by simply requested its respective URL on the VRML server: - -<tt>http://host/vrml/HARD_MP_VAL_000.png</tt> - -All paths start with vrml and then reflect the vrml directory structure as it is being monitored. When a directory -<tt>foo</tt> was added (either by creation or linking) in the vrml directory, its 3D models will be available at: - -<tt>http://host/vrml/foo/FANCY_MODEL_000.png</tt> - -When you do not pass any parameters, you will get a sceneshot of the model with its largest, axis aligned surface area -facing the camera. That is, the model will be rotated by multiples of 90deg to show the side of the bounding box which -has the largest surface area. The implied assumption is that this side is suited to identify the model and its eventual -problems the quickest. - -If you do not like the standard sceneshot, you can pass a couple of parameters to adapt most aspects of the scene: - -<table> - <tr><th>Name</th><th>Range</th><th>Description</th></tr> - <tr><td><tt>pitch</tt></td><td>[0 .. 2π] rad</td><td>Rotation along the x-axis</td></tr> - <tr><td><tt>roll</tt></td><td>[0 .. 2π] rad</td><td>Rotation along the z-axis</td></tr> - <tr><td><tt>yaw</tt></td><td>[0 .. 2π] rad</td><td>Rotation along the y-axis</td></tr> - <tr><td><tt>zoom</tt></td><td>[0 .. ∞] bounding-sphere units</td><td>Distance of camera to model center</td></tr> - <tr><td><tt>x</tt></td><td>[-∞ .. ∞] OpenGL units</td><td>Translation on x-axis</td></tr> - <tr><td><tt>y</tt></td><td>[-∞ .. ∞] OpenGL units</td><td>Translation on y-axis</td></tr> - <tr><td><tt>z</tt></td><td>[-∞ .. ∞] OpenGL units</td><td>Translation on z-axis (consider using zoom instead)</td></tr> - <tr><td><tt>width</tt></td><td>[0 .. BIG] pixels</td><td>The width of the image (limited by your GPU)</td></tr> - <tr><td><tt>height</tt></td><td>[0 .. BIG] pixels</td><td>The height of the image</td></tr> - <tr><td><tt>autorotate</tt></td><td>[<tt>on</tt> | <tt>off</tt>]</td><td>Whether or not to autorotate first</td></tr> -</table> - -<tt>http://host/vrml/HARD_MP_VAL_000.png?pitch=0.3&width=2560&height=1600</tt> - -There are some caveats: -<ul> - <li>With euler angles such as pitch/roll/yaw, a gimbal lock can occur. - <li>Choosing zoom, x, y or z to big will move the model off the clipping distance. - <li>width and height have no upper limit, this might be a potential DoS. - <li>When observing series of models with autorotating on, not every model is guaranteed to start with the same pose. - <li>The OpenGL units really ought to be expressed in multiples of bounding-sphere units. -</ul> - -## REST API - -The main purpose of the REST API is to provide clients with a list of available model files. - -<table> - <tr><th>Path</th><th>Type</th><th>Return Value</th><th>Example</th></tr> - <tr> - <td><tt>/vrml</tt></td> - <td><tt>GET</tt></td> - <td> - A JSON structure identifying all known models in the hierarchy as found on the filesystem.<br/> - - The entries are organized in a tree, reflecting the original locations relative to the vrml - directory. The suffix of <tt>png</tt> is just one example, supported extensions are ultimately - defined by the available <a href="http://www.link.de/here">OSG writer plugins</a>, but limited for - now to <tt>gif</tt>, <tt>jpg</tt>, <tt>png</tt>, <tt>tif</tt> and <tt>bmp</tt>. - </td> - <td> -<pre> -{ - "models": { - "HARD_MP_VAL_000": { - "path": "/HARD_MP_VAL_000.png", - "url": "http://host/vrml/HARD_MP_VAL_000.png" - }, - "HARD_MP_VAL_001": { - "path": "/HARD_MP_VAL_001.png", - "url": "http://host/vrml/HARD_MP_VAL_001.png" - }, - "data": { - "SOFT_MP_VAL_000": { - "path": "/data/SOFT_MP_VAL_000.png", - "url": "http://host/vrml/data/SOFT_MP_VAL_000.png" - }, - ... -</pre> - </td> - </tr> - - <tr> - <td><tt>/vrml/models</tt>, <tt>/vrml/wrls</tt></td> - <td><tt>GET</tt></td> - <td> - A JSON structure with information about the available binary model files in the tmp directory or the wrl - files in the vrml directory respectively.<br/> - - The entries correspond to the tree at <tt>/vrml</tt> but all paths are flattened using the path delimiter - ('<tt>:</tt>' per default). - </td> - <td> -<pre> -{ - "HARD_MP_VAL_000": { - "atime": 1363002503, - "ctime": 1362521747, - "dir": "/tmp", - "extension": "osgb", - "group": "/", - "mtime": "1362521747", - "name": "HARD_MP_VAL_000.osgb", - "path": "/tmp/HARD_MP_VAL_000.osgb", - "relDir": "/", - "relPath": "/HARD_MP_VAL_000.osgb", - "size": "580201", - "strippedName": "HARD_MP_VAL_000" - }, -... -</pre> - </td> - </tr> - - <tr> - <td><tt>/vrml/processed</tt></td> - <td><tt>GET</tt></td> - <td> - A JSON structure with information about the sceneshots that were requested recently and are still on disc.<br/> - - The individual entries within a model key encode the request parameters seperated by underscores, that is:<br/> - The euler angles <tt>pitch</tt>, <tt>roll</tt>, <tt>yaw</tt>, <tt>zoom</tt>, translation in <tt>x</tt>, translation - in <tt>y</tt>, translation in <tt>z</tt>, <tt>width</tt>, <tt>height</tt>, and whether or not to <tt>autorotate</tt>. - </td> - <td> - <pre> -{ - "HARD_MP_VAL_000": { - "0.94_0_0_1_0_0_0_640_480_on.png": { - "atime": 1363002687, - "ctime": 1363002687, - "dir": "/tmp", -... - </pre> - </td> - </tr> - - -</table> diff --git a/apps/samples/vrml/annotations.js b/apps/samples/vrml/annotations.js deleted file mode 100644 index b91ccfa..0000000 --- a/apps/samples/vrml/annotations.js +++ /dev/null @@ -1,70 +0,0 @@ -function Annotations(element, params) { - - // private attributes - var self = this; - var dojo = require("dojo"); - var domConst = dojo.require('dojo/dom-construct'); - var xhr = dojo.require("dojo/_base/xhr"); - - if (typeof(element) === 'string') { - element = dojo.byId(element); - } - - // private instanceId - if (!Annotations.instances) - Annotations.instances = 0; - var instanceId = Annotations.instances++; - - // public attributes - this.annotations = []; - this.vrmlViewer = params.viewer; - - // establish our dom - element.appendChild(domConst.toDom('\ - <div style="text-align: right"><div class="annotation" /></div><button type="button" class="annotate"></button></div>\ - <div class="messages"></div>\ - ')); - - this.annotationTextElem = dojo.query("div.annotation", element)[0]; - this.annotateButtonElem = dojo.query("button.annotate", element)[0]; - this.messagesElem = dojo.query("div.messages", element)[0]; - - // privileged public methods - this.annotate = function(text) { - var pose = dojo.clone(self.vrmlViewer.pose); - var imageURL = self.vrmlViewer.imageURL; - var annoLink = document.createElement("a"); - var annoText = document.createTextNode(text + "\n"); - annoLink.setAttribute("href", "#"); - annoLink.appendChild(annoText); - annoLink.onclick = function() { - self.vrmlViewer.setPose(imageURL, pose); - } - this.messagesElem.appendChild(annoLink); - } - - require(["dijit/form/TextBox"], function(TextBox) { - self.annotationBox = new TextBox({ - name: "Annotation", - style: "width: 70%", - onKeyDown: function(e) { - var code = e.keyCode || e.which; - if( code === 13 ) { - e.preventDefault(); - self.annotate(this.get("value")); - return false; - } - }, - }, self.annotationTextElem); - }); - - require(["dijit/form/Button"], function(Button) { - self.resetButton = new Button({ - label: "Annotate", - onClick: function(){ - self.annotate(self.annotationBox.get("value")); - } - }, self.annotateButtonElem); - }); - -} diff --git a/apps/samples/vrml/ffmpeg-server.invoked.scxml b/apps/samples/vrml/ffmpeg-server.invoked.scxml deleted file mode 100644 index 0c6449f..0000000 --- a/apps/samples/vrml/ffmpeg-server.invoked.scxml +++ /dev/null @@ -1,245 +0,0 @@ -<scxml datamodel="ecmascript"> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/dump.js" /> - - <script> -//<![CDATA[ - function clone(item) { - if (!item) { return item; } // null, undefined values check - - var types = [ Number, String, Boolean ], - result; - - // normalizing primitives if someone did new String('aaa'), or new Number('444'); - types.forEach(function(type) { - if (item instanceof type) { - result = type( item ); - } - }); - - if (typeof result == "undefined") { - if (Object.prototype.toString.call( item ) === "[object Array]") { - result = []; - item.forEach(function(child, index, array) { - result[index] = clone( child ); - }); - } else if (typeof item == "object") { - // testing that this is DOM - if (item.nodeType && typeof item.cloneNode == "function") { - var result = item.cloneNode( true ); - } else if (!item.prototype) { // check that this is a literal - if (item instanceof Date) { - result = new Date(item); - } else { - // it is an object literal - result = {}; - for (var i in item) { - result[i] = clone( item[i] ); - } - } - } else { - // depending what you would like here, - // just keep the reference, or create new object - if (false && item.constructor) { - // would not advice to do that, reason? Read below - result = new item.constructor(); - } else { - result = item; - } - } - } else { - result = item; - } - } - - return result; - } -//]]> - </script> - - <datamodel> - <data id="modelDir" /> - <data id="requests">{}</data> - </datamodel> - - <state id="start"> - <onentry> - <log expr="modelDir" /> - </onentry> - <invoke type="osgconvert" id="osgvonvert.frame"> - <param name="threads" expr="1" /> - <finalize> - <script> - requests[_event.data.context].job.renderedFrames++; - </script> - <!-- osgconverter will copy its send request for the reply so these are still available --> - <send target="#_ffmpeg" event="render.frame"> - <param name="frame" expr="_event.data.content.bmp" /> - <param name="context" expr="_event.data.context" /> - </send> - <if cond="requests[_event.data.context].job.renderedFrames >= requests[_event.data.context].job.totalFrames"> - <send target="#_ffmpeg" event="render.end"> - <param name="context" expr="_event.data.context" /> - </send> - </if> - </finalize> - </invoke> - - <invoke type="ffmpeg" id="ffmpeg"> - <finalize> - <script> -// dump(_event); - </script> - <send target="#_parent" event="render.done"> - <param name="context" expr="_event.data.context" /> - <param name="movie" expr="_event.data.movie" /> - <param name="mimetype" expr="_event.data.mimetype" /> - <param name="filename" expr="_event.data.filename" /> - </send> - <script> - // free up job in requests - requests[_event.data.context] = undefined; - </script> - - </finalize> - </invoke> - - <state id ="idle"> - <!-- <onentry> - <script> - print("Invokers:"); - dump(_invokers['ffmpeg']); - </script> - </onentry> --> - <transition event="http.post" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'movie'"> - <!-- - Something to encode just arrived. - Interpolate pose information and send each frame to the osg converter. - The finalize of the osgconverter will send the images to ffmpeg whose - finalize will trigger the response. - --> - <script> -//<![CDATA[ - dump(_event); - var pathDelim = ':'; // we need to flatten directories - this will seperate them in filenames - - // store event - var job = {}; - job.event = _event; - job.framesPerSec = 25; - job.lengthInSec = _event.data.content.data.movieLength; - job.format = _event.data.content.data.format; - job.height = _event.data.content.data.height; - job.width = _event.data.content.data.width; - job.keyFrames = _event.data.content.data.frames; - job.frames = []; - job.totalFrames = job.lengthInSec * job.framesPerSec - job.renderedFrames = 0; - - // sanitize - if (job.height % 2) - job.height++; - if (job.width % 2) - job.width++; - - // calculate overall relative length - var totalRelLength = 0; - for (var index in job.keyFrames) { - totalRelLength += job.keyFrames[index].relFrameLength; - } - var framesToRelLength = job.totalFrames / totalRelLength; - - // create frames - for (var kfIndex = 0; job.keyFrames[kfIndex]; kfIndex++) { - var nextPose = false; - if (job.keyFrames[kfIndex + 1]) { - nextPose = job.keyFrames[kfIndex + 1].pose; - } - var keyFrame = job.keyFrames[kfIndex]; - - keyFrame.file = keyFrame.imagePath.substr(1); - - keyFrame.modelFile = keyFrame.file + ".osgb"; - keyFrame.modelFile = keyFrame.modelFile.replace(/\//g, pathDelim); - keyFrame.modelFile = modelDir + '/' + keyFrame.modelFile; - - var currentPose = keyFrame.pose; - var thisFrames = Math.round(keyFrame.relFrameLength * framesToRelLength); - var startTransitionAt = Math.round((100 - keyFrame.relTransitionLength) * 0.01 * thisFrames); - var transitionFrames = thisFrames - startTransitionAt; - - //print("---------------------\n"); - //print("lengthInSec: " + job.lengthInSec + "\n"); - //print("totalFrames: " + job.totalFrames + "\n"); - //print("thisFrames for " + kfIndex + ": " + thisFrames + "\n"); - //print("startTransitionAt for " + kfIndex + ": " + startTransitionAt + "\n"); - //print("transitionFrames for " + kfIndex + ": " + transitionFrames + "\n"); - - for (var frameIndex = 0; frameIndex < thisFrames && job.frames.length <= job.totalFrames; frameIndex++) { - var frame = clone(keyFrame); - - if (frameIndex > startTransitionAt && nextPose) { - - var transitionProgress = (frameIndex - startTransitionAt) / transitionFrames; - frame.pose.pitch += (nextPose.pitch - frame.pose.pitch) * transitionProgress; - frame.pose.roll += (nextPose.roll - frame.pose.roll) * transitionProgress; - frame.pose.yaw += (nextPose.yaw - frame.pose.yaw) * transitionProgress; - frame.pose.x += (nextPose.x - frame.pose.x) * transitionProgress; - frame.pose.y += (nextPose.y - frame.pose.y) * transitionProgress; - frame.pose.z += (nextPose.z - frame.pose.z) * transitionProgress; - frame.pose.zoom += (nextPose.zoom - frame.pose.zoom) * transitionProgress; - - //print("#########################\n"); - //print("Transition at: " + frameIndex + " \ Progress: " + transitionProgress + "\n"); - //print("Interpolated pose:\n") - //dump(frame.pose); - } - - job.frames.push(frame); - } - } - job.totalFrames = job.frames.length; - requests[_event.origin] = {}; - requests[_event.origin].job = job; -//]]> - </script> - <send target="#_ffmpeg" event="render.start" idlocation="requests[_event.origin].sendId"> - <param name="context" expr="_event.origin" /> - <param name="format" expr="requests[_event.origin].job.format" /> - <param name="width" expr="requests[_event.origin].job.width" /> - <param name="height" expr="requests[_event.origin].job.height" /> - </send> - <foreach array="requests[_event.origin].job.frames" item="frame" index="index"> - <send target="#_osgvonvert.frame"> - <param name="format" expr="'bmp'" /> - <!-- param name="dest" expr="'/Users/sradomski/Desktop/ctrl/' + index + '.bmp'" / --> - <param name="source" expr="frame.modelFile" /> - <param name="pitch" expr="frame.pose.pitch" /> - <param name="roll" expr="frame.pose.roll" /> - <param name="yaw" expr="frame.pose.yaw" /> - <param name="zoom" expr="frame.pose.zoom" /> - <param name="x" expr="frame.pose.x" /> - <param name="y" expr="frame.pose.y" /> - <param name="z" expr="frame.pose.z" /> - <param name="width" expr="requests[_event.origin].job.width" /> - <param name="height" expr="requests[_event.origin].job.height" /> - <param name="autorotate" expr="frame.pose.autorotate" /> - <param name="context" expr="_event.origin" /> - </send> - </foreach> - </transition> - - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 3 && - _event.data.pathComponent[1] === 'movie' && - _event.data.pathComponent[2] === 'codecs'"> - <log expr="_invokers['ffmpeg']" /> - <send target="#_parent" event="send.codecs"> - <param name="context" expr="_event.origin" /> - <param name="codecs" expr="_invokers['ffmpeg']" /> - </send> - </transition> - </state> - </state> -</scxml>
\ No newline at end of file diff --git a/apps/samples/vrml/img/Tutorial.png b/apps/samples/vrml/img/Tutorial.png Binary files differdeleted file mode 100644 index 7f5a041..0000000 --- a/apps/samples/vrml/img/Tutorial.png +++ /dev/null diff --git a/apps/samples/vrml/img/Tutorial.pxm b/apps/samples/vrml/img/Tutorial.pxm Binary files differdeleted file mode 100644 index 682a00c..0000000 --- a/apps/samples/vrml/img/Tutorial.pxm +++ /dev/null diff --git a/apps/samples/vrml/img/close.png b/apps/samples/vrml/img/close.png Binary files differdeleted file mode 100644 index 7233cbe..0000000 --- a/apps/samples/vrml/img/close.png +++ /dev/null diff --git a/apps/samples/vrml/img/drag.png b/apps/samples/vrml/img/drag.png Binary files differdeleted file mode 100644 index b398a3f..0000000 --- a/apps/samples/vrml/img/drag.png +++ /dev/null diff --git a/apps/samples/vrml/img/drag2.png b/apps/samples/vrml/img/drag2.png Binary files differdeleted file mode 100644 index 4dfb651..0000000 --- a/apps/samples/vrml/img/drag2.png +++ /dev/null diff --git a/apps/samples/vrml/img/drag3.png b/apps/samples/vrml/img/drag3.png Binary files differdeleted file mode 100644 index 467ba6e..0000000 --- a/apps/samples/vrml/img/drag3.png +++ /dev/null diff --git a/apps/samples/vrml/img/pitchRoll-handle.png b/apps/samples/vrml/img/pitchRoll-handle.png Binary files differdeleted file mode 100644 index fcff0dd..0000000 --- a/apps/samples/vrml/img/pitchRoll-handle.png +++ /dev/null diff --git a/apps/samples/vrml/img/pitchRoll.png b/apps/samples/vrml/img/pitchRoll.png Binary files differdeleted file mode 100644 index 4f73745..0000000 --- a/apps/samples/vrml/img/pitchRoll.png +++ /dev/null diff --git a/apps/samples/vrml/img/pitchRoll.pxm b/apps/samples/vrml/img/pitchRoll.pxm Binary files differdeleted file mode 100644 index 1dbc3e2..0000000 --- a/apps/samples/vrml/img/pitchRoll.pxm +++ /dev/null diff --git a/apps/samples/vrml/img/pitchRoll3.png b/apps/samples/vrml/img/pitchRoll3.png Binary files differdeleted file mode 100644 index ede9247..0000000 --- a/apps/samples/vrml/img/pitchRoll3.png +++ /dev/null diff --git a/apps/samples/vrml/img/xy-handle.png b/apps/samples/vrml/img/xy-handle.png Binary files differdeleted file mode 100644 index 0edb8cc..0000000 --- a/apps/samples/vrml/img/xy-handle.png +++ /dev/null diff --git a/apps/samples/vrml/img/xy.png b/apps/samples/vrml/img/xy.png Binary files differdeleted file mode 100644 index fe081ee..0000000 --- a/apps/samples/vrml/img/xy.png +++ /dev/null diff --git a/apps/samples/vrml/img/xy.pxm b/apps/samples/vrml/img/xy.pxm Binary files differdeleted file mode 100644 index 5e077ef..0000000 --- a/apps/samples/vrml/img/xy.pxm +++ /dev/null diff --git a/apps/samples/vrml/img/xy2.png b/apps/samples/vrml/img/xy2.png Binary files differdeleted file mode 100644 index 2cc3f15..0000000 --- a/apps/samples/vrml/img/xy2.png +++ /dev/null diff --git a/apps/samples/vrml/img/yawZoom-handle.png b/apps/samples/vrml/img/yawZoom-handle.png Binary files differdeleted file mode 100644 index f6a54ee..0000000 --- a/apps/samples/vrml/img/yawZoom-handle.png +++ /dev/null diff --git a/apps/samples/vrml/img/yawZoom.png b/apps/samples/vrml/img/yawZoom.png Binary files differdeleted file mode 100644 index a256b3b..0000000 --- a/apps/samples/vrml/img/yawZoom.png +++ /dev/null diff --git a/apps/samples/vrml/img/yawZoom.pxm b/apps/samples/vrml/img/yawZoom.pxm Binary files differdeleted file mode 100644 index ec00b18..0000000 --- a/apps/samples/vrml/img/yawZoom.pxm +++ /dev/null diff --git a/apps/samples/vrml/stress-vrml-server.pl b/apps/samples/vrml/stress-vrml-server.pl deleted file mode 100755 index 4145f29..0000000 --- a/apps/samples/vrml/stress-vrml-server.pl +++ /dev/null @@ -1,35 +0,0 @@ -#!/usr/bin/perl -w - -use Math::Round; - -my $pi = 3.14159; - -# make one thousand requests with random parameters -for (my $i = 0; $i < 1000; $i++) { - my $pitch = rand(2*$pi); - my $roll = rand(2*$pi); - my $yaw = rand(2*$pi); - my $width = rand(400) + 200; - my $height = rand(400) + 200; - my $url = "http://epikur.local:8080/vrml/HARD_MP_VAL_002.png". - "?pitch=".sprintf("%.3f",$pitch). - "&roll=".sprintf("%.3f",$roll). - "&yaw=".sprintf("%.3f",$yaw). - "&width=".sprintf("%.0f",$width). - "&height=".sprintf("%.0f",$height); - print $url."\n"; - `wget '$url'`; -} - -# for (my $pitch = 0; $pitch < 2*$pi; $pitch += 0.01) { -# for (my $roll = 0; $roll < 2*$pi; $roll += 0.01) { -# for (my $yaw = 0; $yaw < 2*$pi; $yaw += 0.01) { -# my $url = "http://epikur.local:8081/vrml/HARD_MP_VAL_002.png". -# "?pitch=".sprintf("%.3f",$pitch). -# "&roll=".sprintf("%.3f",$roll). -# "&yaw=".sprintf("%.3f",$yaw); -# print $url."\n"; -# `wget '$url'`; -# } -# } -# }
\ No newline at end of file diff --git a/apps/samples/vrml/viewer-webgl-setpose.js b/apps/samples/vrml/viewer-webgl-setpose.js deleted file mode 100644 index e2d3c6c..0000000 --- a/apps/samples/vrml/viewer-webgl-setpose.js +++ /dev/null @@ -1,1353 +0,0 @@ -// Define the namespace -// var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {}; - -// eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) { -VRMLViewer = function (element, params) { - element.innerHTML = "<div name='vrmlviewer'/>"; - - this.updatePose = function(pose) { - console.log("Updating pose."); - console.log("Pose = " + JSON.stringify(pose, null, 4)); - if (!pose.width) pose.width = self.pose.width; - if (!pose.height) pose.height = self.pose.height; - // this.setScene(this.imagePath, this.imageFormat, pose, this.serverURL); - }; - - // private attributes - var self = this; - var batchChanges = false; - var webGLManipulatorsSetup = false; - var currWebGLModel = ""; - - // private instanceId - // if (!eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances) - // eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances = 0; - // this.instanceId = eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances++; - - if (!VRMLViewer.instances) - VRMLViewer.instances = 0; - this.instanceId = VRMLViewer.instances++; - - // public attribute defaults - this.width = 450; - this.height = 350; - - { - var pose = { - pitch: 0, - roll: 0, - yaw: 0, - zoom: 1, - x: 0, - y: 0, - z: 0, - autorotate: false, - }; - this.pose = pose; - } - - this.enableMovies = false; - this.enableDND = true; - this.enableWebGL = true; - this.enableSceneshots = false; - this.enableDraggables = false; - this.treeNavigationStyle = true; - this.listNavigationStyle = true; - this.listDirectory = ""; - - this.serverURL = "localhost:8080"; - this.imagePath = ""; - this.imageFormat = ".png"; - this.resRoot = ""; - - osg.setNotifyLevel(osg.ERROR); - - // copy over values from constructor arguments - if (params) { - for (var param in params) { - if (self.hasOwnProperty(param)) { - self[param] = params[param]; - } else { - console.log("Unknown paramter " + param); - } - } - } - - if (!self.pose.width) - self.pose.width = self.width; - if (!self.pose.height) - self.pose.height = self.height; - - var hasWebGL = function() { - try { - if (!window.WebGLRenderingContext) { - return false; - } - var canvas = document.createElement("canvas"); - var names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"]; - for (var i = 0; i < 4; i++) { - var gl = canvas.getContext(names[i]); - if (gl) { - return true; - } - } - } catch(e) { - return false; - } - return false; - }; - - if (self.enableWebGL && !hasWebGL()) { - console.log("Your browser does no support WebGL, falling back to sceneshots"); - self.enableWebGL = false; - self.enableSceneshots = true; - } - - /** - * normalize given parameters - */ - var normalizeParams = function() { - // make sure server url begins with protocol and does *not* ends in / - if (!self.serverURL.substring(0, 7) == "http://" && - !self.serverURL.substring(0, 8) == "https://") - self.serverURL = "http://" + self.serverURL; - if (!self.serverURL.lastIndexOf("/") === self.serverURL.length) - self.serverURL += self.serverURL.substring(0, self.serverURL - 1); - - // make sure we have a listDirectory with navigation style list ending in / - if (self.modelNavigationStyle === "list" && !self.listDirectory && self.imagePath) - self.listDirectory = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); - if (!self.listDirectory.indexOf("/", self.listDirectory.length - 1) !== -1) - self.listDirectory += "/"; - - // use latest image if none given - if (!self.imagePath) - self.imagePath = self.listDirectory + "latest"; - - if (!self.imageFormat.substring(0, 1) !== ".") - self.imageFormat = "." + self.imageFormat; - }; - normalizeParams(); - - /** - * Fetch a remote WebGL model and return a future for it - */ - var getWebGLModel = function(url) { - console.log("Loading " + url); - if (self.webGLStandby) { self.webGLStandby.show(); } - var defer = osgDB.Promise.defer(); - var node = new osg.MatrixTransform(); - // node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, [])); - var loadModel = function(url) { - osg.log("loading " + url); - var req = new XMLHttpRequest(); - req.open('GET', url, true); - req.onreadystatechange = function(aEvt) { - if (req.readyState == 4) { - if(req.status == 200) { - osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) { - - console.log("Loaded " + url); - - var rotate = []; - osg.Matrix.makeIdentity(rotate); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - - node.setMatrix(rotate); - node.addChild(child); - defer.resolve(node); - osg.log("success " + url); - - }); - if (self.webGLStandby) { self.webGLStandby.hide(); } - } else { - osg.log("error " + url); - if (self.webGLStandby) { self.webGLStandby.hide(); } - } - } - }; - req.send(null); - }; - loadModel(url); - return defer.promise; - }; - - /** - * Concatenate pose as query string - */ - var urlSuffixForPose = function(pose) { - var queryString = - '?width=' + pose.width + - '&height=' + pose.height + - '&pitch=' + pose.pitch + - '&roll=' + pose.roll + - '&yaw=' + pose.yaw + - '&x=' + pose.x + - '&y=' + pose.y + - '&z=' + pose.z + - '&zoom=' + pose.zoom + - '&autorotate=' + (pose.autorotate ? '1' : '0'); - return queryString; - }; - - /** - * Get relative position of two elements - */ - var moverRelativeTo = function(mover, container) { - // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag - var absolutePosition = function(el) { - for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); - return {x: lx,y: ly}; - }; - - var containerPos = absolutePosition(container); - return { - x: mover.x - containerPos.x, - y: mover.y - containerPos.y - }; - }; - - var eulerToMatrix = function(pitch, roll, yaw) { - // see http://www.flipcode.com/documents/matrfaq.html#Q36 - var m = osg.Matrix.makeIdentity([]); - - var A = Math.cos(pitch); - var B = Math.sin(pitch); - var C = Math.cos(roll); - var D = Math.sin(roll); - var E = Math.cos(yaw); - var F = Math.sin(yaw); - var AD = A * D; - var BD = B * D; - - osg.Matrix.setRow(m, 0, (C * E), (-C * F), (-D), 0); - osg.Matrix.setRow(m, 1, (-BD * E + A * F), (BD * F + A * E), (-B * C), 0); - osg.Matrix.setRow(m, 2, (AD * E + B * F), (-AD * F + B * E), (A * C), 0); - osg.Matrix.setRow(m, 3, 0, 0, 0, 1); - - return m; - } - - var matrixToEuler = function(m) { - // see: http://www.flipcode.com/documents/matrfaq.html#Q37 - var angleX = 0; - var angleZ = 0; - var D = -1 * Math.asin(osg.Matrix.get(m,0,2)); /* Calculate Y-axis angle */ - var angleY = D; - var C = Math.cos(angleY); - - /* Gimbal lock? */ - if (Math.abs(C) > 0.005) { - var tr_x = osg.Matrix.get(m,2,2) / C; /* No, so get X-axis angle */ - var tr_y = -1 * osg.Matrix.get(m,1,2) / C; - angleX = Math.atan2( tr_y, tr_x ); - tr_x = osg.Matrix.get(m,0,0) / C; /* Get Z-axis angle */ - tr_y = -1 * osg.Matrix.get(m,0,1) / C; - angleZ = Math.atan2( tr_y, tr_x ); - } else { - /* Gimball lock has occurred */ - angleX = 0; /* Set X-axis angle to zero */ - var tr_x = osg.Matrix.get(m,1,1); /* And calculate Z-axis angle */ - var tr_y = osg.Matrix.get(m,1,0); - angleZ = Math.atan2( tr_y, tr_x ); - } - - /* Clamp all angles to range */ - return { - pitch: angleX % (2 * 3.14159), - roll: angleY % (2 * 3.14159), - yaw: angleZ % (2 * 3.14159) - }; - } - - // get list of supported ffmpeg codecs from server - this.populateMovieCodecs = function(server, selectElem) { - self.xhr.get({ - // The URL to request - url: server, - handleAs:"json", - headers:{"X-Requested-With":null}, - load: function(result) { - for (var codec in result.video) { - if (codec !== "mpeg1video" && - codec !== "mpeg2video" && - codec !== "mpeg4" && - codec !== "h264" && - codec !== "ayuv" && - codec !== "flashsv" && - codec !== "flashsv2" && - codec !== "flv" && - codec !== "rv40" && - codec !== "theora" && - codec !== "v210" && - codec !== "v308" && - codec !== "v408" && - codec !== "v410" && - codec !== "wmv3" && - codec !== "y41p" && - codec !== "yuv4") - continue; - // console.log(codec); - selectElem.options.push({ label: result.video[codec].longName, value: codec }); - if (codec === "mpeg4") - selectElem.options[selectElem.options.length - 1].selected = true; - } - } - }); - }; - - // update list of vrml files from server - this.refreshServer = function(server, params) { - if (!self.listNavigationStyle && !self.treeNavigationStyle) - return; - - self.serverURL = server; - if (!params) - params = {}; - if (self.fileStandby) { self.fileStandby.show(); } - - self.xhr.get({ - // The URL to request - url: server, - handleAs:"json", - headers:{"X-Requested-With":null}, - error: function(result) { - - if (self.browseButton) { self.browseButton.setAttribute('label', 'Browse'); } - if (self.fileStandby) { self.fileStandby.hide(); } - - if (!params.skipTree) { - if (self.fileTreeStore) { - var allItems = self.fileTreeStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileTreeStore.remove(allItems[i].id); - } - } - } - if (!params.skipList) { - if (self.fileListStore) { - var allItems = self.fileListStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileListStore.remove(allItems[i].id); - } - } - } - }, - load: function(result) { -// self.localStorage.put("vrmlServer", self.serverURL, null); - if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } - if (self.fileStandby) { self.fileStandby.hide(); } - - if (self.treeNavigationStyle && !params.skipTree) { - // empty store - var allItems = self.fileTreeStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileTreeStore.remove(allItems[i].id); - } - - // parse result as tree - (function fillstore(tree, parentId) { - // todo: respect navigation style - for (key in tree) { - if ('url' in tree[key]) { - self.fileTreeStore.add({id:parentId+key, name:key, url:tree[key].path, parent:parentId}); - } else { - self.fileTreeStore.add({id:parentId+key, name:key, parent:parentId}); - fillstore(tree[key], parentId+key); - } - } - } (result.models, "root", "")); - } - if (self.listNavigationStyle && !params.skipList) { - - // empty store - var allItems = self.fileListStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileListStore.remove(allItems[i].id); - } - - // parse result as list - if (!self.listDirectory) - console.log("Requested modelNavigationStyle === list but provided no listDirectory"); - var dirs = self.listDirectory.split("/"); - var models = result.models; - for (var dir in dirs) { - if (!dirs[dir].length) - continue; - if (dirs[dir] in models) { - models = models[dirs[dir]]; - } else { - console.log("No " + dirs[dir] + " in " + models); - } - } - for (var key in models) { - var url = self.serverURL + models[key].path; - self.fileListStore.add({id:key, value:models[key].path, label:key, name:key, url:url}); - } - self.fileListSelect.startup(); - } - // self.updateScene(); - } - }); - }; - - this.getPose = function() { - if (self.webGLViewer && self.webGLViewer.getSceneData()) { - var rotate = []; - osg.Matrix.makeIdentity(rotate); - - osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - osg.Matrix.postMult(self.webGLViewer.getSceneData().getMatrix(), rotate); - - var pose = matrixToEuler(rotate); - return pose; - } else { - return { - pitch: self.pose.pitch, - roll: self.pose.roll, - yaw: self.pose.yaw, - } - } - } - - this.setPose = function(pose) { - this.setScene(self.imagePath, self.imageFormat, pose, self.serverURL); - } - - this.setScene = function(imagePath, imageFormat, pose, serverURL) { - - if (serverURL && serverURL != self.serverURL) { - self.refreshServer(serverURL); - } - - self.imagePath = imagePath; - self.imageFormat = imageFormat; - - for (var key in pose) { - self.pose[key] = pose[key]; - } - - self.pose.pitch = (2 * 3.14159 + self.pose.pitch) % (2 * 3.14159); - self.pose.roll = (2 * 3.14159 + self.pose.roll) % (2 * 3.14159); - self.pose.yaw = (2 * 3.14159 + self.pose.yaw) % (2 * 3.14159); - - var pitch = (self.pose.pitch / (2 * 3.14159) + 0.5) * 100; - var roll = (self.pose.roll / (2 * 3.14159) + 0.5) * 100; - var yaw = (self.pose.yaw / (2 * 3.14159) + 0.5) * 100; - var x = ((self.pose.x / 100) + 0.5) * 100; - var y = ((self.pose.y / 100) + 0.5) * 100; - var zoom = (((self.pose.zoom - 1) / 3) + 0.5) * 100; - - // console.log("pitch: " + pitch); - - if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.right = pitch + "%"; - if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.top = roll + "%"; - if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.right = yaw + "%"; - if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.top = zoom + "%"; - if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.right = x + "%"; - if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.top = y + "%"; - - self.updateScene(); - }; - - // update the scene - this.updateScene = function() { - if (self.serverURL && self.imagePath && !self.batchChanges) { - // console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose)); - - if (self.enableWebGL) { - var setWebGLPose = function() { - - // reset camera controls - self.webGLViewer.getManipulator().reset(); - self.webGLViewer.getManipulator().computeHomePosition(); - - var bs = self.webGLViewer.getSceneData().getBound(); - var zoom = 1; //self.pose.zoom || 10; - var eye = [0, 0, bs.radius() * (1.9 * zoom)]; - // var center = bs.center(); - // var up = [1,1,0]; - - self.webGLViewer.getManipulator().setEyePosition(eye); - - // var poseMatrix = eulerToMatrix(self.pose.pitch, self.pose.yaw, -1 * self.pose.roll); - var poseMatrix = eulerToMatrix(self.pose.pitch * -1, self.pose.roll * -1, self.pose.yaw); - - var rotate = []; - osg.Matrix.makeIdentity(rotate); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[])); - osg.Matrix.postMult(poseMatrix, rotate); - - // osg.Matrix.preMult(rotate, poseMatrix); - self.webGLViewer.getSceneData().setMatrix(rotate); - - } - - if (self.imagePath != currWebGLModel) { - currWebGLModel = self.imagePath; - osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) { - self.webGLViewer.setSceneData(model); - if (!webGLManipulatorsSetup) { - self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false); - self.webGLViewer.getManipulator().computeHomePosition(); - } - webGLManipulatorsSetup = true; - setWebGLPose(); - }); - } - if (self.webGLViewer && currWebGLModel == self.imagePath && self.webGLViewer.getSceneData()) { - setWebGLPose(); - } - } - if (self.enableSceneshots) { - self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose); - if (self.enableMovies && self.movieAddButton) { - // we are showing an image, activate movie controls - self.movieAddButton.domNode.style.display = ""; - self.movieDropDown.domNode.style.display = ""; - } - } - } - }; - - require(["dojo/dom-construct", - "dojo/_base/xhr", - "dojo/dom", - "dojo/on", - "dojo/_base/array", - "dojox/storage", - "dojo/store/Memory", - "dojo/store/Observable", - "dijit/tree/ObjectStoreModel", - "dojo/data/ObjectStore", - "dijit/Tree", - "dijit/form/TextBox", - "dijit/form/Button", - "dojox/widget/Standby", - "dijit/form/DropDownButton", - "dijit/TooltipDialog", - "dojo/dnd/Moveable", - "dojo/ready", - "dojo/dnd/Source", - "dijit/form/HorizontalSlider", - "dijit/form/Select", - "dijit/form/NumberSpinner"], - function(domConst, - xhr, - dom, - on, - array, - storage, - Memory, - Observable, - ObjectStoreModel, - ObjectStore, - Tree, - TextBox, - Button, - Standby, - DropDownButton, - TooltipDialog, - Moveable, - ready, - Source, - HorizontalSlider, - Selector, - NumberSpinner) { - - ready(function() { - - if (typeof(element) === 'string') { - element = dom.byId(element); - } - element.style.height = self.pose.height; - element.style.width = self.pose.width; - - self.element = element; - self.xhr = xhr; - - // establish our dom - element.appendChild(domConst.toDom('\ - <table>\ - <tr>\ - <td valign="top">\ - <div style="position: relative; padding: 0px; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <div class="screenShot" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <img class="screenShot" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\ - </div>\ - <div class="webGL" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <canvas class="webGL" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></canvas>\ - </div>\ - <div style="z-index: -1; position: absolute; right: 45%; top: 45%">\ - <div class="progress"></div>\ - </div>\ - <div style="position: absolute; left: 10px; top: 10px">\ - <table></tr>\ - <td class="treeNavigation filesDropDown" style="vertical-align: middle"></td>\ - <td class="movieControls">\ - <div class="movieDropDown" style="display: inline"></div>\ - <button type="button" class="movieAddButton"></button>\ - </td>\ - <td align="right"><button type="button" class="resetButton"></button></td>\ - <td class="dndHandler" style="vertical-align: middle; padding-top: 4px;"></td>\ - </tr></table>\ - </div>\ - <div style="position: absolute; right: 10px; top: 15%; height: 50%">\ - <div class="zoomSlide"></div>\ - </div>\ - <div class="draggable" style="position: absolute; right: 50%; top: 50%">\ - <div class="pitchRollHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="pitchRollHandlerImg" src="' + self.resRoot + 'img/pitchRoll-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ - <div class="yawZoomHandler">\ - <div style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px; position: absolute; left: -34px;">\ - <table>\ - <tr>\ - <td><img class="yawZoomHandlerImg" src="' + self.resRoot + 'img/yawZoom-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - </div>\ - <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ - <div class="xyHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="xyHandlerImg" src="' + self.resRoot + 'img/xy-handle.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="xLabel"></div><div class="yLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div class="listNavigation" style="position: absolute; left: 10px; bottom: 10px">\ - <table></tr>\ - <td style="vertical-align: middle"><button class="prevButton" type="button" /></td>\ - <td style="vertical-align: middle"><div class="fileList" /></td>\ - <td style="vertical-align: middle"><button class="nextButton" type="button" /></td>\ - </tr></table>\ - </div>\ - </div>\ - </td>\ - <td valign="top" height="100%">\ - </td>\ - </tr>\ - <tr>\ - <td colspan="2"><div class="messages"></div></td>\ - </tr>\ - </table>\ - ')); - - // fetch special dom nodes for content - self.messageBox = dojo.query("div.messages", element)[0]; - self.imgElem = dojo.query("img.screenShot", element)[0]; - - /** - * === WebGL ==================== - */ - var activateWebGL = function(enable) { - if (enable) { - self.canvasElem = dojo.query("canvas.webGL", element)[0]; - self.canvasElem.style.width = self.width; - self.canvasElem.style.height = self.height; - self.canvasElem.width = self.width; - self.canvasElem.height = self.height; - - if (self.webGLViewer === undefined) { - self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true }); - self.webGLViewer.init(); - self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]); - self.webGLViewer.setupManipulator(); - self.webGLViewer.run(); - - self.webGLStandby = new Standby({target: self.element }); - self.element.appendChild(self.webGLStandby.domNode); - } - - // show elements - array.forEach(dojo.query(".webGL", element), function(entry, i) { - entry.style.display = "inline"; - }); - } else { - if (self.webGLViewer) { - self.webGLViewer.stop(); - } - // hide elements - array.forEach(dojo.query(".webGL", element), function(entry, i) { - entry.style.display = "none"; - }); - } - }; - activateWebGL(self.enableWebGL); - - var activateScreenshot = function(enable) { - if (enable) { - array.forEach(dojo.query(".screenShot", element), function(entry, i) { - entry.style.display = "inline"; - }); - } else { - array.forEach(dojo.query(".screenShot", element), function(entry, i) { - entry.style.display = "none"; - }); - } - }; - activateScreenshot(self.enableSceneshots); - - - /** - * === POSE MANIPULATION AND RESET ==================== - */ - self.resetButtonElem = dojo.query("button.resetButton", element)[0]; - self.resetButton = new Button({ - label: "Reset", - onClick: function() { - if (self.webGLViewer) { - self.webGLViewer.setupManipulator(); - self.webGLViewer.getManipulator().computeHomePosition(); - } - self.pose.x = 0; - self.pose.y = 0; - self.pose.pitch = 0; - self.pose.roll = 0; - self.pose.yaw = 0; - self.pose.zoom = 1; - - if (self.xyHandler) self.xyHandler.node.style.left = 0; - if (self.xyHandler) self.xyHandler.node.style.top = 0; - if (self.pitchRollHandler) self.pitchRollHandler.node.style.left = 0; - if (self.pitchRollHandler) self.pitchRollHandler.node.style.top = 0; - if (self.yawZoomHandler) self.yawZoomHandler.node.style.left = 0; - if (self.yawZoomHandler) self.yawZoomHandler.node.style.top = 0; - - self.updateScene(); - } - }, self.resetButtonElem); - - var activateDraggables = function(enable) { - if (enable) { - if (self.pitchRollHandler == undefined) { - self.progressElem = dojo.query("div.progress", element)[0]; - - self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0]; - self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0]; - self.xyHandlerElem = dojo.query(".xyHandler", element)[0]; - - self.pitchRollHandler = new Moveable(self.pitchRollHandlerElem); - self.pitchRollHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query("div.pitchLabel", mover.node)[0]; - var rollLabel = dojo.query("div.rollLabel", mover.node)[0]; - pitchLabel.innerHTML = ''; - rollLabel.innerHTML = ''; - self.updateScene(); - }; - self.pitchRollHandler.onMoving = function(mover) { - var handlerImg = dojo.query(".pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query(".pitchLabel", mover.node)[0]; - var rollLabel = dojo.query(".rollLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 30; - offset.y += 20; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 2; - - self.pose.roll = offset.x / self.pose.width - 0.5; - self.pose.pitch = offset.y / self.pose.height - 0.5; - self.pose.pitch *= -1; - self.pose.roll *= 2 * 3.14159; - self.pose.pitch *= 2 * 3.14159; - self.pose.roll = Math.ceil((self.pose.roll) * 10) / 10; - self.pose.pitch = Math.ceil((self.pose.pitch) * 10) / 10; - pitchLabel.innerHTML = 'Pitch:' + self.pose.pitch; - rollLabel.innerHTML = 'Roll:' + self.pose.roll; - }; - - self.yawZoomHandler = new Moveable(self.yawZoomHandlerElem); - self.yawZoomHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - yawLabel.innerHTML = ''; - zoomLabel.innerHTML = ''; - self.updateScene(); - }; - self.yawZoomHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 7; - offset.y += 9; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 2; - self.pitchRollHandlerElem.style.zIndex = 1; - - // self.pose.pitch = self.pose.pitch % (2 * 3.14159); - // self.pose.roll = self.pose.roll % (2 * 3.14159); - self.pose.yaw = (self.pose.width - offset.x) / self.pose.width - 0.5; - self.pose.zoom = offset.y / self.pose.height - 0.5; - self.pose.yaw *= 2 * 3.14159; - self.pose.zoom = self.pose.zoom * 3 + 1; - self.pose.zoom = Math.ceil((self.pose.zoom) * 10) / 10; - self.pose.yaw = Math.ceil((self.pose.yaw) * 10) / 10; - yawLabel.innerHTML = 'Yaw:' + self.pose.yaw; - zoomLabel.innerHTML = 'Zoom:' + self.pose.zoom; - }; - - self.xyHandler = new Moveable(self.xyHandlerElem); - self.xyHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - - xLabel.innerHTML = ''; - yLabel.innerHTML = ''; - - self.updateScene(); - }; - self.xyHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 3; - offset.y += 13; - - self.xyHandlerElem.style.zIndex = 2; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 1; - - self.pose.x = offset.x / self.pose.width - 0.5; - self.pose.y = offset.y / self.pose.height - 0.5; - self.pose.x *= 100; - self.pose.y *= 100; - self.pose.y = Math.ceil((self.pose.y) * 10) / 10; - self.pose.x = Math.ceil((self.pose.x) * 10) / 10; - xLabel.innerHTML = 'X:' + self.pose.x; - yLabel.innerHTML = 'Y:' + self.pose.y; - }; - } - - // show all draggables - array.forEach(dojo.query(".draggable", element), function(entry, i) { - entry.style.display = "inline"; - }); - - } else { - // show all draggables - array.forEach(dojo.query(".draggable", element), function(entry, i) { - entry.style.display = "none"; - }); - } - }; - activateDraggables(self.enableDraggables); - - /** - * === DRAG HANDLER ==================== - */ - var activateDND = function(enable) { - if (enable) { - self.createAvatar = function(item, mode) { - if (mode == 'avatar') { - // create your avatar if you want - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width=60; - avatarPose.height=60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl; - item.imagePath = self.imagePath; - item.imageFormat = self.imageFormat; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } - var handler = dojo.create( 'div', { innerHTML: '<img src="' + self.resRoot + 'img/drag.png" width="20px" />' }); - return {node: handler, data: item, type: item.type}; - }; - - self.dndHandler = new Source(dojo.query("td.dndHandler", element)[0], {copyOnly: true, creator: self.createAvatar}); - self.dndHandler.insertNodes(false, [ { } ]); - - array.forEach(dojo.query(".dndHandler", element), function(entry, i) { - entry.style.display = "inline"; - }); - - } else { - array.forEach(dojo.query(".dndHandler", element), function(entry, i) { - entry.style.display = "none"; - }); - - } - }; - - activateDND(self.enableDND); - - /** - * === FILE NAVIGATION ==================== - */ - - var activateListNavigation = function(enable) { - if (enable) { - array.forEach(dojo.query(".listNavigation", element), function(entry, i) { - entry.style.display = "inline"; - }); - - if (!self.fileListStore) { - // setup fileStore - self.fileListStore = new Observable(new Memory({ - data: [], - })); - - self.prevButtonElem = dojo.query("button.prevButton", element)[0]; - self.nextButtonElem = dojo.query("button.nextButton", element)[0]; - self.fileListElem = dojo.query("div.fileList", element)[0]; - - self.fileListSelect = new Selector({ - store: new ObjectStore({ objectStore: self.fileListStore }), - onChange: function(name) { - var item = self.fileListStore.query({ id: name })[0]; - self.imagePath = self.listDirectory + item.name; - self.updateScene(); - } - }, self.fileListElem); - - self.prevButton = new Button({ - label: "<", - onClick: function() { - var allItems = self.fileListStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break; - } - } - - if (foundAt > 0) { - self.imagePath = self.listDirectory + allItems[foundAt - 1].name; - self.fileListSelect.attr( 'value', allItems[foundAt - 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt - 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt - 1].url); - self.updateScene(); - } - } - }, self.prevButtonElem); - - self.nextButton = new Button({ - label: ">", - onClick: function() { - var allItems = self.fileListStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - // console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break; - } - } - if (foundAt + 1 < allItems.total) { - self.imagePath = self.listDirectory + allItems[foundAt + 1].name + ".png"; - self.fileListSelect.attr( 'value', allItems[foundAt + 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt + 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt + 1].url); - self.updateScene(); - } - } - }, self.nextButtonElem); - } - } else { - array.forEach(dojo.query(".listNavigation", element), function(entry, i) { - entry.style.display = "none"; - }); - } - }; - activateListNavigation(self.listNavigationStyle); - - var activateTreeNavigation = function(enable) { - if (enable) { - - array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { - entry.style.display = ""; - }); - - if (!self.fileTreeStore) { - // setup fileStore - self.fileTreeStore = new Observable(new Memory({ - data: [ { id: 'root', name:'3D Models'} ], - getChildren: function(object){ - return this.query({parent: object.id}); - } - })); - - self.fileTreeModel = new ObjectStoreModel({ - store: self.fileTreeStore, - query: { id: "root" } - }); - - // setup actual tree dijit - self.fileTree = new dijit.Tree({ - id: "fileTree" + self.instanceId, - model: self.fileTreeModel, - persist: false, - showRoot: false, - style: "height: 300px;", - onClick: function(item){ - if ('url' in item) { - self.imagePath = item.url; - var newListDir = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); - if (newListDir.length > 0) - newListDir += '/'; - if (newListDir !== self.listDirectory) { - self.listDirectory = newListDir; - self.refreshServer(self.serverURL, { skipTree: true }); - } - self.updateScene(); - } - }, - getIconClass: function(item, opened) { - return (!item || !('url' in item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"; - }, - getIconStyle: function(item, opened){ - if('url' in item) { - return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"}; - } - } - }); - - self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; - - self.serverBox = new TextBox({ - name: "Server", - value: self.serverURL, - style: "width: 65%", - - onKeyUp: function(e) { - if (self.browseButton) { - if (this.get("value") !== self.serverURL) { - self.browseButton.setAttribute('label', 'Browse'); - } else { - self.browseButton.setAttribute('label', 'Refresh'); - } - } - }, - - onKeyDown: function(e) { - var code = e.keyCode || e.which; - if( code === 13 ) { - e.preventDefault(); - self.refreshServer(this.get("value")); - return false; - } - }, - }); - - self.browseButton = new Button({ - label: "Browse", - onClick: function(){ - self.refreshServer(self.serverBox.get("value")); - } - }); - - self.filesDropDownContent = domConst.toDom('<div />'); - self.filesDropDownContent.appendChild(self.serverBox.domNode); - self.filesDropDownContent.appendChild(self.browseButton.domNode); - self.filesDropDownContent.appendChild(self.fileTree.domNode); - - self.filesToolTip = new TooltipDialog({ content:self.filesDropDownContent, style:"max-height:320px"}); - self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip }); - self.filesDropDownElem.appendChild(self.filesDropDown.domNode); - - self.fileStandby = new Standby({target: self.filesDropDownContent }); - self.filesDropDownContent.appendChild(self.fileStandby.domNode); - } - } else { - array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { - entry.style.display = "none"; - }); - } - }; - - activateTreeNavigation(self.treeNavigationStyle); - - /** - * === MOVIE DROPDOWN ==================== - */ - - var activateMovies = function(enable) { - if (enable) { - self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; - self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; - - self.movieDropDownContent = domConst.toDom( - '<div style="overflow: auto; max-height: 420px;"> \ - <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \ - <div class=\"dndArea\" /> \ - </div>' - ); - - self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0]; - self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0]; - self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0]; - - self.createMovieThumb = function(item, mode) { - if (mode == 'avatar') { - // when dragged - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width = 60; - avatarPose.height = 60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + avatarImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } else { - - // when added to list - var thumb = domConst.toDom("\ - <div>\ - <table><tr><td>\ - <img class=\"movieThumb\"/>\ - <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\ - </td><td align=\"left\">\ - <table><tr>\ - <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\ - <td><div class=\"fillInSeries\" \></td>\ - </tr><tr>\ - <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\ - </tr></table>\ - </td></tr></table>\ - </div>\ - "); - thumb = dojo.query("div", thumb)[0]; - - var thumbImgElem = dojo.query("img.movieThumb", thumb)[0]; - var removeImgElem = dojo.query("img.removeThumb", thumb)[0]; - var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0]; - var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0]; - var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0]; - - item.getThisAndNeighborsFromDnD = function() { - var thisAndNeighbors = {}; - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - if (obj.data === item) { - thisAndNeighbors.this = { key: key, obj: obj }; - } else { - thisAndNeighbors.before = { key: key, obj: obj }; - } - if (thisAndNeighbors.this) { - thisAndNeighbors.after = { key: key, obj: obj }; - return thisAndNeighbors; - } - }); - return thisAndNeighbors; - }; - - item.relFrameLengthSlider = new HorizontalSlider({ - value: 50, - title: "Relative Duration of Frame", - style: "width:150px;" - }, relFrameLengthElem); - - item.relTransitionLengthSlider = new HorizontalSlider({ - value: 100, - title: "Relative Duration of Transition", - style: "width:150px;" - }, relTransitionLengthElem); - - removeImgElem.onclick = function() { - var thisItem = item.getThisAndNeighborsFromDnD(); - if (thisItem.this) { - // haha - what a mess! - self.addToMovieHandler.selectNone(); - self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj; - self.addToMovieHandler.deleteSelectedNodes(); - } - // disable create button if this was the last one - if (!thisItem.after || !thisItem.before) { - self.movieCreateButton.setAttribute('disabled', true); - } - } - - item.fillInSeriesButton = new Button({ - label: "Insert Series", - style: "display: none;", - onClick: function(){ - alert("foo"); - } - }, fillInSeriesElem); - - removeImgElem.src = self.resRoot + "img/close.png"; - - var thumbPose = dojo.clone(self.pose); - thumbPose.width = self.pose.width / 10; - thumbPose.height = self.pose.height / 10; - var thumbImgUrl = urlSuffixForPose(thumbPose); - - thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl; - // removeImgElem.src = self.resRoot + 'img/close.png'; - - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + thumbImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = thumbPose; - - return {node: thumb, data: item, type: item.type}; - } - }; - - self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb}); - - self.movieFormatSelection = new Selector({ - name: "movieFormat", - style: "width: 320px", - options: [] - }); - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} )); - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"})); - self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode); - - self.movieHeightSpinner = new NumberSpinner({ - value: 400, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieWidthSpinner = new NumberSpinner({ - value: 600, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieCreateButton = new Button({ - label: "Create", - disabled: true, - onClick: function(){ - - var form = document.createElement("form"); - - form.setAttribute("method", "post"); - form.setAttribute("action", self.serverURL + "/movie"); - - var submitData = {}; - submitData.frames = []; - submitData.movieLength = self.movieDurationSpinner.value; - submitData.format = self.movieFormatSelection.value; - submitData.width = self.movieWidthSpinner.value; - submitData.height = self.movieHeightSpinner.value; - - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - var jsonData = { - iconPoseUrl: obj.data.iconPoseUrl, - imagePath: obj.data.imagePath, - serverURL: obj.data.serverURL, - pose: obj.data.pose, - relFrameLength: obj.data.relFrameLengthSlider.value, - relTransitionLength: obj.data.relTransitionLengthSlider.value, - } - submitData.frames.push(jsonData); - }); - - var hiddenField = document.createElement("input"); - hiddenField.setAttribute("type", "hidden"); - hiddenField.setAttribute("name", "data"); - hiddenField.setAttribute("value", JSON.stringify(submitData)); - - form.appendChild(hiddenField); - - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - } - }); - - self.movieDurationSpinner = new NumberSpinner({ - value: 10, - smallDelta: 1, - style: "width: 40px", - constraints: { min:0, places:0 }, - }); - - // append format duration cell - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} )); - var movieDimensionCell = dojo.create('td'); - movieDimensionCell.appendChild(self.movieWidthSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} )); - movieDimensionCell.appendChild(self.movieHeightSpinner.domNode); - movieDimensionCell.appendChild(self.movieDurationSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} )); - self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell); - - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"})); - self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode); - - - self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent }); - self.movieDropDown = new DropDownButton({ - label: "Movie", - style: "display: none;", - dropDown: self.movieToolTip }); - self.movieDropDownElem.appendChild(self.movieDropDown.domNode); - - self.movieAddButton = new Button({ - label: "+", - style: "margin-left: -10px; display: none;", - onClick: function(){ - if (self.movieFormatSelection.options.length == 0) { - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - } - // we could pass item.data here to creator - self.addToMovieHandler.insertNodes(false, [ { } ]); - self.movieCreateButton.setAttribute('disabled', false); - - } - }, self.movieAddButtonElem); - } else { - // remove movie controls - var movieControls = dojo.query("td.movieControls", element)[0]; - movieControls.parentNode.removeChild(movieControls); - } - } - activateMovies(self.enableMovies); - - // do we have parameters for the initial pose? - if(self.params && self.params.pose) - self.setScene(self.params.imagePath, self.params.pose, self.params.serverURL); - - if (self.serverURL) { - self.refreshServer(self.serverURL); - self.updateScene(); - } - - }); - }); - -}; diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js deleted file mode 100644 index 19a589f..0000000 --- a/apps/samples/vrml/viewer-webgl.js +++ /dev/null @@ -1,1290 +0,0 @@ -// Define the namespace -var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {}; - -eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) { - - console.log(params); - - // private attributes - var self = this; - var batchChanges = false; - var webGLManipulatorsSetup = false; - - // private instanceId - // if (!VRMLViewer.instances) - // VRMLViewer.instances = 0; - // this.instanceId = VRMLViewer.instances++; - - // private instanceId - if (!eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances) - eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances = 0; - this.instanceId = eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances++; - - // public attribute defaults - this.width = 450; - this.height = 350; - - { - var pose = { - pitch: 0, - roll: 0, - yaw: 0, - zoom: 1, - x: 0, - y: 0, - z: 0, - width: false, - height: false, - autorotate: false, - } - this.pose = pose; - } - - this.enableMovies = false; - this.enableDND = true; - this.enableWebGL = true; - this.enableSceneshots = false; - this.enableDraggables = false; - this.enablePosePublishing = true; - this.treeNavigationStyle = true; - this.listNavigationStyle = true; - this.listDirectory = ""; - - this.serverURL = "localhost:8082"; - this.webSocketURL = "localhost:8083"; - this.imagePath = ""; - this.imageFormat = ".png"; - this.resRoot = ""; - - // copy over values from constructor arguments - if (params) { - for (var param in params) { - if (self.hasOwnProperty(param)) { - self[param] = params[param]; - } else { - console.log("Unknown paramter " + param); - } - } - } - - if (!self.pose.width) - self.pose.width = self.width; - if (!self.pose.height) - self.pose.height = self.height; - - this.hasWebSockets = ("WebSocket" in window); - - if (self.enablePosePublishing && !self.hasWebSockets) { - console.log("Your browser does not support WebSockets, deactivating pose publishing"); - self.enablePosePublishing = false; - } - - var hasWebGL = function() { - try { - if (!window.WebGLRenderingContext) { - return false; - } - var canvas = document.createElement("canvas"); - var names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"]; - for (var i = 0; i < 4; i++) { - var gl = canvas.getContext(names[i]); - if (gl) { - return true; - } - } - } catch(e) { - return false; - } - return false; - } - self.hasWebGL = hasWebGL(); - - if (self.enableWebGL && !hasWebGL()) { - console.log("Your browser does not support WebGL, falling back to sceneshots"); - self.enableWebGL = false; - self.enableSceneshots = true; - } - - // see http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript - function syntaxHighlight(json) { - if (typeof json != 'string') { - json = JSON.stringify(json, undefined, 2); - } - json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); - return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { - var cls = 'number'; - if (/^"/.test(match)) { - if (/:$/.test(match)) { - cls = 'key'; - } else { - cls = 'string'; - } - } else if (/true|false/.test(match)) { - cls = 'boolean'; - } else if (/null/.test(match)) { - cls = 'null'; - } - return '<span class="' + cls + '">' + match + '</span>'; - }); - } - - // normalize parameters - var normalizeParams = function() { - // make sure server url begins with protocol and does *not* ends in / - if (!self.serverURL.substring(0, 7) == "http://" && - !self.serverURL.substring(0, 8) == "https://") - self.serverURL = "http://" + self.serverURL; - if (!self.serverURL.lastIndexOf("/") === self.serverURL.length) - self.serverURL += self.serverURL.substring(0, self.serverURL - 1); - - // make sure we have a listDirectory with navigation style list ending in / - if (self.modelNavigationStyle === "list" && !self.listDirectory && self.imagePath) - self.listDirectory = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); - if (!self.listDirectory.indexOf("/", self.listDirectory.length - 1) !== -1) - self.listDirectory += "/"; - - // use latest image if none given - if (!self.imagePath) - self.imagePath = self.listDirectory + "latest"; - - if (!self.imageFormat.substring(0, 1) !== ".") - self.imageFormat = "." + self.imageFormat; - } - normalizeParams(); - - var getWebGLModel = function(url) { - if (self.webGLStandby) { self.webGLStandby.show(); } - var defer = osgDB.Promise.defer(); - var node = new osg.MatrixTransform(); - //node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, [])); - var loadModel = function(url) { - osg.log("loading " + url); - var req = new XMLHttpRequest(); - req.open('GET', url, true); - req.onreadystatechange = function(aEvt) { - if (req.readyState == 4) { - if(req.status == 200) { - osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) { - node.setMatrix(osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[])); - node.addChild(child); - defer.resolve(node); - osg.log("success " + url); - }); - } else { - osg.log("error " + url); - } - if (self.webGLStandby) { self.webGLStandby.hide(); } - } - }; - req.send(null); - }; - loadModel(url); - return defer.promise; - } - - var urlSuffixForPose = function(pose) { - var queryString = - '?width=' + pose.width + - '&height=' + pose.height + - '&pitch=' + pose.pitch + - '&roll=' + pose.roll + - '&yaw=' + pose.yaw + - '&x=' + pose.x + - '&y=' + pose.y + - '&z=' + pose.z + - '&zoom=' + pose.zoom + - '&autorotate=' + (pose.autorotate ? '1' : '0'); - return queryString; - }; - - var moverRelativeTo = function(mover, container) { - var containerPos = absolutePosition(container); - return { - x: mover.x - containerPos.x, - y: mover.y - containerPos.y - }; - }; - - // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag - var absolutePosition = function(el) { - for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); - return {x: lx,y: ly}; - }; - - // update the scene - this.updateScene = function() { - if (self.serverURL && self.imagePath && !self.batchChanges) { - console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose)); - if (self.enableWebGL) { - osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) { - self.webGLViewer.setSceneData(model); - if (!webGLManipulatorsSetup) { - self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false); - self.webGLViewer.getManipulator().computeHomePosition(); - } - webGLManipulatorsSetup = true; - }); - } - if (self.enableSceneshots) { - self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose); - if (self.enableMovies && self.movieAddButton) { - // we are showing an image, activate movie controls - self.movieAddButton.domNode.style.display = ""; - self.movieDropDown.domNode.style.display = ""; - } - } - } - }; - - // get list of supported ffmpeg codecs from server - this.populateMovieCodecs = function(server, selectElem) { - self.xhr.get({ - // The URL to request - url: server, - handleAs:"json", - headers:{"X-Requested-With":null}, - load: function(result) { - for (var codec in result.video) { - if (codec !== "mpeg1video" && - codec !== "mpeg2video" && - codec !== "mpeg4" && - codec !== "h264" && - codec !== "ayuv" && - codec !== "flashsv" && - codec !== "flashsv2" && - codec !== "flv" && - codec !== "rv40" && - codec !== "theora" && - codec !== "v210" && - codec !== "v308" && - codec !== "v408" && - codec !== "v410" && - codec !== "wmv3" && - codec !== "y41p" && - codec !== "yuv4") - continue; - //console.log(codec); - selectElem.options.push({ label: result.video[codec].longName, value: codec }); - if (codec === "mpeg4") - selectElem.options[selectElem.options.length - 1].selected = true; - } - } - }); - } - - // update list of vrml files from server - this.refreshServer = function(server, params) { - self.serverURL = server; - if (!params) - params = {}; - if (self.fileStandby) { self.fileStandby.show(); } - - self.xhr.get({ - // The URL to request - url: server, - handleAs:"json", - headers:{"X-Requested-With":null}, - error: function(result) { - - if (self.browseButton) { self.browseButton.setAttribute('label', 'Browse'); } - if (self.fileStandby) { self.fileStandby.hide(); } - - if (!params.skipTree) { - if (self.fileTreeStore) { - var allItems = self.fileTreeStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileTreeStore.remove(allItems[i].id); - } - } - } - if (!params.skipList) { - if (self.fileListStore) { - var allItems = self.fileListStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileListStore.remove(allItems[i].id); - } - } - } - }, - load: function(result) { -// self.localStorage.put("vrmlServer", self.serverURL, null); - if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } - if (self.fileStandby) { self.fileStandby.hide(); } - - if (self.treeNavigationStyle && !params.skipTree) { - // empty store - var allItems = self.fileTreeStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileTreeStore.remove(allItems[i].id); - } - - // parse result as tree - (function fillstore(tree, parentId) { - // todo: respect navigation style - for (key in tree) { - if ('url' in tree[key]) { - self.fileTreeStore.add({id:parentId+key, name:key, url:tree[key].path, parent:parentId}); - } else { - self.fileTreeStore.add({id:parentId+key, name:key, parent:parentId}); - fillstore(tree[key], parentId+key); - } - } - } (result.models, "root", "")); - } - if (self.listNavigationStyle && !params.skipList) { - - // empty store - var allItems = self.fileListStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileListStore.remove(allItems[i].id); - } - - // parse result as list - if (!self.listDirectory) - console.log("Requested modelNavigationStyle === list but provided no listDirectory"); - var dirs = self.listDirectory.split("/"); - var models = result.models; - for (var dir in dirs) { - if (!dirs[dir].length) - continue; - if (dirs[dir] in models) { - models = models[dirs[dir]]; - } else { - console.log("No " + dirs[dir] + " in " + models); - } - } - for (var key in models) { - var url = self.serverURL + models[key].path; - self.fileListStore.add({id:key, value:models[key].path, label:key, name:key, url:url}); - } - self.fileListSelect.startup(); - } - //self.updateScene(); - } - }); - }; - - this.setPose = function(imagePath, imageFormat, pose, serverURL) { - if (serverURL && serverURL != self.serverURL) { - self.refreshServer(serverURL); - } - self.imagePath = imagePath; - self.imageFormat = imageFormat; - self.pose = pose; - - var pitch = (pose.pitch % (2 * 3.14159) + 0.5) * 100; - var roll = (pose.roll % (2 * 3.14159) + 0.5) * 100; - var yaw = (pose.yaw % (2 * 3.14159) + 0.5) * 100; - - var x = ((pose.x / 100) + 0.5) * 100; - var y = ((pose.y / 100) + 0.5) * 100; - - var zoom = (((pose.zoom - 1) / 3) + 0.5) * 100; - - self.pitchRollHandlerElem.parentNode.style.right = pitch + "%"; - self.pitchRollHandlerElem.parentNode.style.top = roll + "%"; - self.yawZoomHandlerElem.parentNode.style.right = yaw + "%"; - self.yawZoomHandlerElem.parentNode.style.top = zoom + "%"; - self.xyHandlerElem.parentNode.style.right = x + "%"; - self.xyHandlerElem.parentNode.style.top = y + "%"; - - self.updateScene(); - }; - - require(["dojo/dom-construct", - "dojo/_base/xhr", - "dojo/dom", - "dojo/on", - "dojo/_base/array", - "dojox/storage", - "dojo/store/Memory", - "dojo/store/Observable", - "dijit/tree/ObjectStoreModel", - "dojo/data/ObjectStore", - "dijit/Tree", - "dijit/form/TextBox", - "dijit/form/Button", - "dojox/widget/Standby", - "dijit/form/DropDownButton", - "dijit/TooltipDialog", - "dojo/dnd/Moveable", - "dojo/ready", - "dojo/dnd/Source", - "dijit/form/HorizontalSlider", - "dijit/form/Select", - "dijit/form/NumberSpinner"], - function(domConst, - xhr, - dom, - on, - array, - storage, - Memory, - Observable, - ObjectStoreModel, - ObjectStore, - Tree, - TextBox, - Button, - Standby, - DropDownButton, - TooltipDialog, - Moveable, - ready, - Source, - HorizontalSlider, - Selector, - NumberSpinner) { - - ready(function() { - - if (typeof(element) === 'string') { - element = dom.byId(element); - } - element.style.height = self.pose.height; - element.style.width = self.pose.width; - - self.element = element; - self.xhr = xhr; - - // establish our dom - element.appendChild(domConst.toDom('\ - <table>\ - <tr>\ - <td valign="top">\ - <div style="position: relative; padding: 0px; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <div class="screenShot" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <img class="screenShot" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\ - </div>\ - <div class="webGL" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\ - <canvas class="webGL" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></canvas>\ - </div>\ - <div style="z-index: -1; position: absolute; right: 45%; top: 45%">\ - <div class="progress"></div>\ - </div>\ - <div style="position: absolute; left: 10px; top: 10px">\ - <table></tr>\ - <td class="treeNavigation filesDropDown" style="vertical-align: middle"></td>\ - <td class="movieControls">\ - <div class="movieDropDown" style="display: inline"></div>\ - <button type="button" class="movieAddButton"></button>\ - </td>\ - <td align="right"><button type="button" class="resetButton"></button></td>\ - <td class="dndHandler" style="vertical-align: middle; padding-top: 4px;"></td>\ - </tr></table>\ - </div>\ - <div style="position: absolute; right: 10px; top: 15%; height: 50%">\ - <div class="zoomSlide"></div>\ - </div>\ - <div class="draggable" style="position: absolute; right: 50%; top: 50%">\ - <div class="pitchRollHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="pitchRollHandlerImg" src="' + self.resRoot + 'img/pitchRoll-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ - <div class="yawZoomHandler">\ - <div style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px; position: absolute; left: -34px;">\ - <table>\ - <tr>\ - <td><img class="yawZoomHandlerImg" src="' + self.resRoot + 'img/yawZoom-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - </div>\ - <div class="draggable"style="position: absolute; right: 50%; top: 50%">\ - <div class="xyHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="xyHandlerImg" src="' + self.resRoot + 'img/xy-handle.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="xLabel"></div><div class="yLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div class="listNavigation" style="position: absolute; left: 10px; bottom: 10px">\ - <table></tr>\ - <td style="vertical-align: middle"><button class="prevButton" type="button" /></td>\ - <td style="vertical-align: middle"><div class="fileList" /></td>\ - <td style="vertical-align: middle"><button class="nextButton" type="button" /></td>\ - </tr></table>\ - </div>\ - </div>\ - </td>\ - <td valign="top" height="100%">\ - </td>\ - </tr>\ - <tr>\ - <td colspan="2"><div class="messages"></div></td>\ - </tr>\ - </table>\ - ')); - - // fetch special dom nodes for content - self.messageBox = dojo.query("div.messages", element)[0]; - self.imgElem = dojo.query("img.screenShot", element)[0]; - - /** - * === WebGL ==================== - */ - var activateWebGL = function(enable) { - if (enable) { - self.canvasElem = dojo.query("canvas.webGL", element)[0]; - self.canvasElem.style.width = self.width; - self.canvasElem.style.height = self.height; - self.canvasElem.width = self.width; - self.canvasElem.height = self.height; - - // osgDB.Promise.when(getWebGLModel('http://localhost:8081/vrml/cranehook/cranehook_bad_convergence/HARD_MP_VAL_013.osgjs')).then(function(model) { - // self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true }); - // self.webGLViewer.init(); - // self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]); - // self.webGLViewer.setSceneData(model); - // self.webGLViewer.setupManipulator(); - // self.webGLViewer.getManipulator().computeHomePosition(); - // self.webGLViewer.run(); - // }); - - if (self.webGLViewer === undefined) { - self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true }); - self.webGLViewer.init(); - self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]); - self.webGLViewer.setupManipulator(); - self.webGLViewer.run(); - - self.webGLStandby = new Standby({target: self.element }); - self.element.appendChild(self.webGLStandby.domNode); - } - - // show elements - array.forEach(dojo.query(".webGL", element), function(entry, i) { - entry.style.display = "inline"; - }) - } else { - if (self.webGLViewer) { - self.webGLViewer.stop(); - } - // hide elements - array.forEach(dojo.query(".webGL", element), function(entry, i) { - entry.style.display = "none"; - }) - } - } - activateWebGL(self.enableWebGL); - - var activateScreenshot = function(enable) { - if (enable) { - array.forEach(dojo.query(".screenShot", element), function(entry, i) { - entry.style.display = "inline"; - }); - } else { - array.forEach(dojo.query(".screenShot", element), function(entry, i) { - entry.style.display = "none"; - }); - } - } - activateScreenshot(self.enableSceneshots); - - /** - * === POSE MANIPULATION AND RESET ==================== - */ - - self.resetButtonElem = dojo.query("button.resetButton", element)[0]; - self.resetButton = new Button({ - label: "Reset", - onClick: function() { - if (self.webGLViewer) { - self.webGLViewer.setupManipulator(); - self.webGLViewer.getManipulator().computeHomePosition(); - } - self.pose.x = 0; - self.pose.y = 0; - self.pose.pitch = 0; - self.pose.roll = 0; - self.pose.yaw = 0; - self.pose.zoom = 1; - - self.xyHandler.node.style.left = 0; - self.xyHandler.node.style.top = 0; - self.pitchRollHandler.node.style.left = 0; - self.pitchRollHandler.node.style.top = 0; - self.yawZoomHandler.node.style.left = 0; - self.yawZoomHandler.node.style.top = 0; - - self.updateScene(); - } - }, self.resetButtonElem); - - var activateDraggables = function(enable) { - if (enable) { - if (self.pitchRollHandler == undefined) { - self.progressElem = dojo.query("div.progress", element)[0]; - - self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0]; - self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0]; - self.xyHandlerElem = dojo.query(".xyHandler", element)[0]; - - self.pitchRollHandler = new Moveable(self.pitchRollHandlerElem); - self.pitchRollHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query("div.pitchLabel", mover.node)[0]; - var rollLabel = dojo.query("div.rollLabel", mover.node)[0]; - pitchLabel.innerHTML = ''; - rollLabel.innerHTML = ''; - self.updateScene(); - }; - self.pitchRollHandler.onMoving = function(mover) { - var handlerImg = dojo.query(".pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query(".pitchLabel", mover.node)[0]; - var rollLabel = dojo.query(".rollLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 30; - offset.y += 20; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 2; - - self.pose.roll = offset.x / self.pose.width - 0.5; - self.pose.pitch = offset.y / self.pose.height - 0.5; - self.pose.pitch *= -1; - self.pose.roll *= 2 * 3.14159; - self.pose.pitch *= 2 * 3.14159; - self.pose.roll = Math.ceil((self.pose.roll) * 10) / 10; - self.pose.pitch = Math.ceil((self.pose.pitch) * 10) / 10; - pitchLabel.innerHTML = 'Pitch:' + self.pose.pitch; - rollLabel.innerHTML = 'Roll:' + self.pose.roll; - }; - - self.yawZoomHandler = new Moveable(self.yawZoomHandlerElem); - self.yawZoomHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - yawLabel.innerHTML = ''; - zoomLabel.innerHTML = ''; - self.updateScene(); - }; - self.yawZoomHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 7; - offset.y += 9; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 2; - self.pitchRollHandlerElem.style.zIndex = 1; - - // self.pose.pitch = self.pose.pitch % (2 * 3.14159); - // self.pose.roll = self.pose.roll % (2 * 3.14159); - self.pose.yaw = (self.pose.width - offset.x) / self.pose.width - 0.5; - self.pose.zoom = offset.y / self.pose.height - 0.5; - self.pose.yaw *= 2 * 3.14159; - self.pose.zoom = self.pose.zoom * 3 + 1; - self.pose.zoom = Math.ceil((self.pose.zoom) * 10) / 10; - self.pose.yaw = Math.ceil((self.pose.yaw) * 10) / 10; - yawLabel.innerHTML = 'Yaw:' + self.pose.yaw; - zoomLabel.innerHTML = 'Zoom:' + self.pose.zoom; - }; - - self.xyHandler = new Moveable(self.xyHandlerElem); - self.xyHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - - xLabel.innerHTML = ''; - yLabel.innerHTML = ''; - - self.updateScene(); - }; - self.xyHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 3; - offset.y += 13; - - self.xyHandlerElem.style.zIndex = 2; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 1; - - self.pose.x = offset.x / self.pose.width - 0.5; - self.pose.y = offset.y / self.pose.height - 0.5; - self.pose.x *= 100; - self.pose.y *= 100; - self.pose.y = Math.ceil((self.pose.y) * 10) / 10; - self.pose.x = Math.ceil((self.pose.x) * 10) / 10; - xLabel.innerHTML = 'X:' + self.pose.x; - yLabel.innerHTML = 'Y:' + self.pose.y; - }; - } - - // show all draggables - array.forEach(dojo.query(".draggable", element), function(entry, i) { - entry.style.display = "inline"; - }) - - } else { - // show all draggables - array.forEach(dojo.query(".draggable", element), function(entry, i) { - entry.style.display = "none"; - }) - } - } - activateDraggables(self.enableDraggables); - - /** - * === DRAG HANDLER ==================== - */ - var activateDND = function(enable) { - if (enable) { - self.createAvatar = function(item, mode) { - if (mode == 'avatar') { - // create your avatar if you want - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width=60; - avatarPose.height=60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl; - item.imagePath = self.imagePath; - item.imageFormat = self.imageFormat; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } - var handler = dojo.create( 'div', { innerHTML: '<img src="' + self.resRoot + 'img/drag.png" width="20px" />' }); - return {node: handler, data: item, type: item.type}; - }; - - self.dndHandler = new Source(dojo.query("td.dndHandler", element)[0], {copyOnly: true, creator: self.createAvatar}); - self.dndHandler.insertNodes(false, [ { } ]); - - array.forEach(dojo.query(".dndHandler", element), function(entry, i) { - entry.style.display = "inline"; - }) - - } else { - array.forEach(dojo.query(".dndHandler", element), function(entry, i) { - entry.style.display = "none"; - }) - - } - } - activateDND(self.enableDND); - - /** - * === FILE NAVIGATION ==================== - */ - - var activateListNavigation = function(enable) { - if (enable) { - array.forEach(dojo.query(".listNavigation", element), function(entry, i) { - entry.style.display = "inline"; - }); - - if (!self.fileListStore) { - // setup fileStore - self.fileListStore = new Observable(new Memory({ - data: [], - })); - - self.prevButtonElem = dojo.query("button.prevButton", element)[0]; - self.nextButtonElem = dojo.query("button.nextButton", element)[0]; - self.fileListElem = dojo.query("div.fileList", element)[0]; - - self.fileListSelect = new Selector({ - store: new ObjectStore({ objectStore: self.fileListStore }), - onChange: function(name) { - var item = self.fileListStore.query({ id: name })[0]; - self.imagePath = self.listDirectory + item.name; - self.updateScene(); - } - }, self.fileListElem); - - self.prevButton = new Button({ - label: "<", - onClick: function() { - var allItems = self.fileListStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break; - } - } - - if (foundAt > 0) { - self.imagePath = self.listDirectory + allItems[foundAt - 1].name; - self.fileListSelect.attr( 'value', allItems[foundAt - 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt - 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt - 1].url); - self.updateScene(); - } - } - }, self.prevButtonElem); - - self.nextButton = new Button({ - label: ">", - onClick: function() { - var allItems = self.fileListStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - //console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break - } - } - if (foundAt + 1 < allItems.total) { - self.imagePath = self.listDirectory + allItems[foundAt + 1].name + ".png"; - self.fileListSelect.attr( 'value', allItems[foundAt + 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt + 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt + 1].url); - self.updateScene(); - } - } - }, self.nextButtonElem); - } - } else { - array.forEach(dojo.query(".listNavigation", element), function(entry, i) { - entry.style.display = "none"; - }); - } - } - activateListNavigation(self.listNavigationStyle); - - var activateTreeNavigation = function(enable) { - if (enable) { - - array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { - entry.style.display = ""; - }); - - if (!self.fileTreeStore) { - // setup fileStore - self.fileTreeStore = new Observable(new Memory({ - data: [ { id: 'root', name:'3D Models'} ], - getChildren: function(object){ - return this.query({parent: object.id}); - } - })); - - self.fileTreeModel = new ObjectStoreModel({ - store: self.fileTreeStore, - query: { id: "root" } - }); - - // setup actual tree dijit - self.fileTree = new dijit.Tree({ - id: "fileTree" + self.instanceId, - model: self.fileTreeModel, - persist: false, - showRoot: false, - style: "height: 300px;", - onClick: function(item){ - if ('url' in item) { - self.imagePath = item.url; - var newListDir = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); - if (newListDir.length > 0) - newListDir += '/'; - if (newListDir !== self.listDirectory) { - self.listDirectory = newListDir; - self.refreshServer(self.serverURL, { skipTree: true }); - } - self.updateScene(); - } - }, - getIconClass: function(item, opened) { - return (!item || !('url' in item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"; - }, - getIconStyle: function(item, opened){ - if('url' in item) { - return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"}; - } - } - //return {backgroundImage: "url('" + item.url + "?width=16&height=16')"}; - }); - - self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; - - self.serverBox = new TextBox({ - name: "Server", - value: self.serverURL, - style: "width: 65%", - - onKeyUp: function(e) { - if (self.browseButton) { - if (this.get("value") !== self.serverURL) { - self.browseButton.setAttribute('label', 'Browse'); - } else { - self.browseButton.setAttribute('label', 'Refresh'); - } - } - }, - - onKeyDown: function(e) { - var code = e.keyCode || e.which; - if( code === 13 ) { - e.preventDefault(); - self.refreshServer(this.get("value")); - return false; - } - }, - }); - - self.browseButton = new Button({ - label: "Browse", - onClick: function(){ - self.refreshServer(self.serverBox.get("value")); - } - }); - - self.filesDropDownContent = domConst.toDom('<div />'); - self.filesDropDownContent.appendChild(self.serverBox.domNode); - self.filesDropDownContent.appendChild(self.browseButton.domNode); - self.filesDropDownContent.appendChild(self.fileTree.domNode); - - self.filesToolTip = new TooltipDialog({ content:self.filesDropDownContent, style:"max-height:320px"}); - self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip }); - self.filesDropDownElem.appendChild(self.filesDropDown.domNode); - - self.fileStandby = new Standby({target: self.filesDropDownContent }); - self.filesDropDownContent.appendChild(self.fileStandby.domNode); - } - } else { - array.forEach(dojo.query(".treeNavigation", element), function(entry, i) { - entry.style.display = "none"; - }); - } - } - activateTreeNavigation(self.treeNavigationStyle); - - if (self.serverURL) { - self.refreshServer(self.serverURL); - self.updateScene(); - } - - - /** - * === Pose Publishing ==================== - */ - - var activatePosePublishing = function(enable) { - if (enable && self.hasWebSockets) { - self.poseWebSocket = new WebSocket(self.webSocketURL); - - self.poseWebSocket.onopen = function(evt) { - foo = 0; - function publishPose() { - foo++; - var viewMatrix = self.webGLViewer.getCamera().getViewMatrix(); - var roundMatrix = []; - for (var i = 0; i < 16; i++) { - roundMatrix[i] = viewMatrix[i].toFixed(5); - if (roundMatrix[i] == -0.0) roundMatrix[i] = 0.0; - } - self.poseWebSocket.send(JSON.stringify(roundMatrix)); - self.messageBox.innerHTML = "<pre>SEND" + syntaxHighlight(roundMatrix) + "</pre>"; - // self.poseWebSocket.send(foo); - // self.messageBox.innerHTML = "<pre>SEND" + foo + "</pre>"; - if (self.enablePosePublishing) { - setTimeout(publishPose, 200); - } - } - self.messageBox.innerHTML = "<pre>Starting</pre>"; - publishPose(); - }; - self.poseWebSocket.onclose = function(evt) { - }; - self.poseWebSocket.onmessage = function(evt) { - var result = JSON.parse(evt.data); - self.messageBox.innerHTML = "<pre>RCVD" + syntaxHighlight(JSON.parse(result.data.content)) + "</pre>"; - }; - self.poseWebSocket.onerror = function(evt) { - }; - } else { - - } - } - activatePosePublishing(self.enablePosePublishing); - - /** - * === MOVIE DROPDOWN ==================== - */ - - if (self.enableMovies) { - self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; - self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; - - self.movieDropDownContent = domConst.toDom( - '<div style="overflow: auto; max-height: 420px;"> \ - <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \ - <div class=\"dndArea\" /> \ - </div>' - ); - - self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0]; - self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0]; - self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0]; - - self.createMovieThumb = function(item, mode) { - if (mode == 'avatar') { - // when dragged - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width = 60; - avatarPose.height = 60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + avatarImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } else { - - // when added to list - var thumb = domConst.toDom("\ - <div>\ - <table><tr><td>\ - <img class=\"movieThumb\"/>\ - <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\ - </td><td align=\"left\">\ - <table><tr>\ - <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\ - <td><div class=\"fillInSeries\" \></td>\ - </tr><tr>\ - <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\ - </tr></table>\ - </td></tr></table>\ - </div>\ - "); - thumb = dojo.query("div", thumb)[0]; - - var thumbImgElem = dojo.query("img.movieThumb", thumb)[0]; - var removeImgElem = dojo.query("img.removeThumb", thumb)[0]; - var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0]; - var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0]; - var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0]; - - item.getThisAndNeighborsFromDnD = function() { - var thisAndNeighbors = {}; - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - if (obj.data === item) { - thisAndNeighbors.this = { key: key, obj: obj }; - } else { - thisAndNeighbors.before = { key: key, obj: obj }; - } - if (thisAndNeighbors.this) { - thisAndNeighbors.after = { key: key, obj: obj }; - return thisAndNeighbors; - } - }); - return thisAndNeighbors; - }; - - item.relFrameLengthSlider = new HorizontalSlider({ - value: 50, - title: "Relative Duration of Frame", - style: "width:150px;" - }, relFrameLengthElem); - - item.relTransitionLengthSlider = new HorizontalSlider({ - value: 100, - title: "Relative Duration of Transition", - style: "width:150px;" - }, relTransitionLengthElem); - - removeImgElem.onclick = function() { - var thisItem = item.getThisAndNeighborsFromDnD(); - if (thisItem.this) { - // haha - what a mess! - self.addToMovieHandler.selectNone(); - self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj; - self.addToMovieHandler.deleteSelectedNodes(); - } - // disable create button if this was the last one - if (!thisItem.after || !thisItem.before) { - self.movieCreateButton.setAttribute('disabled', true); - } - } - - item.fillInSeriesButton = new Button({ - label: "Insert Series", - style: "display: none;", - onClick: function(){ - alert("foo"); - } - }, fillInSeriesElem); - - removeImgElem.src = self.resRoot + "img/close.png"; - - var thumbPose = dojo.clone(self.pose); - thumbPose.width = self.pose.width / 10; - thumbPose.height = self.pose.height / 10; - var thumbImgUrl = urlSuffixForPose(thumbPose); - - thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl; - // removeImgElem.src = self.resRoot + 'img/close.png'; - - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + thumbImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = thumbPose; - - return {node: thumb, data: item, type: item.type}; - } - }; - - self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb}); - - self.movieFormatSelection = new Selector({ - name: "movieFormat", - style: "width: 320px", - options: [] - }); - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} )); - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"})); - self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode); - - self.movieHeightSpinner = new NumberSpinner({ - value: 400, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieWidthSpinner = new NumberSpinner({ - value: 600, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieCreateButton = new Button({ - label: "Create", - disabled: true, - onClick: function(){ - - var form = document.createElement("form"); - - form.setAttribute("method", "post"); - form.setAttribute("action", self.serverURL + "/movie"); - - var submitData = {}; - submitData.frames = []; - submitData.movieLength = self.movieDurationSpinner.value; - submitData.format = self.movieFormatSelection.value; - submitData.width = self.movieWidthSpinner.value; - submitData.height = self.movieHeightSpinner.value; - - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - var jsonData = { - iconPoseUrl: obj.data.iconPoseUrl, - imagePath: obj.data.imagePath, - serverURL: obj.data.serverURL, - pose: obj.data.pose, - relFrameLength: obj.data.relFrameLengthSlider.value, - relTransitionLength: obj.data.relTransitionLengthSlider.value, - } - submitData.frames.push(jsonData); - }); - - var hiddenField = document.createElement("input"); - hiddenField.setAttribute("type", "hidden"); - hiddenField.setAttribute("name", "data"); - hiddenField.setAttribute("value", JSON.stringify(submitData)); - - form.appendChild(hiddenField); - - // this will not save the returned binary file - // self.xhr.post({ - // form: form, - // load: function(data){ - // alert("asd"); - // } - // }); - - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - } - }); - - self.movieDurationSpinner = new NumberSpinner({ - value: 10, - smallDelta: 1, - style: "width: 40px", - constraints: { min:0, places:0 }, - }); - - // append format duration cell - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} )); - var movieDimensionCell = dojo.create('td'); - movieDimensionCell.appendChild(self.movieWidthSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} )); - movieDimensionCell.appendChild(self.movieHeightSpinner.domNode); - movieDimensionCell.appendChild(self.movieDurationSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} )); - self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell); - - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"})); - self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode); - - - self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent }); - self.movieDropDown = new DropDownButton({ - label: "Movie", - style: "display: none;", - dropDown: self.movieToolTip }); - self.movieDropDownElem.appendChild(self.movieDropDown.domNode); - - self.movieAddButton = new Button({ - label: "+", - style: "margin-left: -10px; display: none;", - onClick: function(){ - if (self.movieFormatSelection.options.length == 0) { - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - } - // we could pass item.data here to creator - self.addToMovieHandler.insertNodes(false, [ { } ]); - self.movieCreateButton.setAttribute('disabled', false); - - } - }, self.movieAddButtonElem); - } else { - // remove movie controls - var movieControls = dojo.query("td.movieControls", element)[0]; - movieControls.parentNode.removeChild(movieControls); - } - - // do we have parameters for the initial pose? - if(self.params && self.params.pose) - self.setPose(self.params.imagePath, self.params.pose, self.params.serverURL); - - }); - }); - - -}
\ No newline at end of file diff --git a/apps/samples/vrml/viewer.css b/apps/samples/vrml/viewer.css deleted file mode 100644 index 089d29a..0000000 --- a/apps/samples/vrml/viewer.css +++ /dev/null @@ -1,157 +0,0 @@ -/* Progress Indicator */ -.mblProgressIndicator { - position: relative; - top: 0px; -} -.mblHeading .mblProgressIndicator { - margin: 5px; - float: left; -} -.mblProgContainer { - position: absolute; - width: 100%; - height: 100%; -} -.mblProgressIndicatorCenter { - position: absolute; - top: 180px; - left: 50%; -} -.mblProgressIndicatorCenter .mblProgContainer { - left: -50%; - -webkit-transform-origin: 50% 0; - -moz-transform-origin: 50% 0; -} -.mblProg { - position: absolute; - left: 2px; - top: 0px; - width: 11px; - font-size: 1px; - height: 4px; - overflow: hidden; - -webkit-transform-origin: 0 2px; - -moz-transform-origin: 0 2px; - background-color: #c0c0c0; - border-radius: 2px; -} -.mblProg0 { - -webkit-transform: translate(18px, 10px) rotate(-90.1deg); - -moz-transform: translate(18px, 10px) rotate(-90.1deg); -} -.mblProg1 { - -webkit-transform: translate(22px, 11px) rotate(-60deg); - -moz-transform: translate(22px, 11px) rotate(-60deg); -} -.mblProg2 { - -webkit-transform: translate(25px, 14px) rotate(-30deg); - -moz-transform: translate(25px, 14px) rotate(-30deg); -} -.mblProg3 { - -webkit-transform: translate(26px, 18px) rotate(0deg); - -moz-transform: translate(26px, 18px) rotate(0deg); -} -.mblProg4 { - -webkit-transform: translate(25px, 22px) rotate(30deg); - -moz-transform: translate(25px, 22px) rotate(30deg); -} -.mblProg5 { - -webkit-transform: translate(22px, 25px) rotate(60deg); - -moz-transform: translate(22px, 25px) rotate(60deg); -} -.mblProg6 { - -webkit-transform: translate(18px, 26px) rotate(90.1deg); - -moz-transform: translate(18px, 26px) rotate(90.1deg); -} -.mblProg7 { - -webkit-transform: translate(14px, 25px) rotate(120deg); - -moz-transform: translate(14px, 25px) rotate(120deg); -} -.mblProg8 { - -webkit-transform: translate(11px, 22px) rotate(150deg); - -moz-transform: translate(11px, 22px) rotate(150deg); -} -.mblProg9 { - -webkit-transform: translate(10px, 18px) rotate(180deg); - -moz-transform: translate(10px, 18px) rotate(180deg); -} -.mblProg10 { - -webkit-transform: translate(11px, 14px) rotate(210deg); - -moz-transform: translate(11px, 14px) rotate(210deg); -} -.mblProg11 { - -webkit-transform: translate(14px, 11px) rotate(240deg); - -moz-transform: translate(14px, 11px) rotate(240deg); -} -.mblProg0Color { - background-color: #c0c0c0; -} -.mblProg1Color { - background-color: #c0c0c0; -} -.mblProg2Color { - background-color: #c0c0c0; -} -.mblProg3Color { - background-color: #c0c0c0; -} -.mblProg4Color { - background-color: #c0c0c0; -} -.mblProg5Color { - background-color: #c0c0c0; -} -.mblProg6Color { - background-color: #b8b9b8; -} -.mblProg7Color { - background-color: #aeafae; -} -.mblProg8Color { - background-color: #a4a5a4; -} -.mblProg9Color { - background-color: #9a9a9a; -} -.mblProg10Color { - background-color: #8e8e8e; -} -.mblProg11Color { - background-color: #838383; -} -.mblProgWhite .mblProg0Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg1Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg2Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg3Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg4Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg5Color { - background-color: #adb9c9; -} -.mblProgWhite .mblProg6Color { - background-color: #acb9cb; -} -.mblProgWhite .mblProg7Color { - background-color: #b7c2d2; -} -.mblProgWhite .mblProg8Color { - background-color: #c4cdda; -} -.mblProgWhite .mblProg9Color { - background-color: #d1d8e2; -} -.mblProgWhite .mblProg10Color { - background-color: #dee3ea; -} -.mblProgWhite .mblProg11Color { - background-color: #eceff3; -} diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html deleted file mode 100644 index c585aaa..0000000 --- a/apps/samples/vrml/viewer.html +++ /dev/null @@ -1,177 +0,0 @@ -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -<html> -<head> - <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> - <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/tundra/tundra.css"> - <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/FloatingPane.css"> - <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/layout/resources/ResizeHandle.css"> - <link rel="stylesheet" href="viewer.css"> - - <style type="text/css"> - .alternateDock { - position:absolute; - background-color:#ededed; - right:0px; top:0px; - border-left:1px solid #ccc; - height:100%; - - } - #alternateDock ul.dojoxDockList { display:block; } - .testFixedSize { - width:300px; - height:200px; - padding:7px; - } - - .dijitMenuItemLabel { - font-size: 12px; - } - - .tundra .dijitTooltipContainer { - background-color:rgba(200,200,200,0.5); - background:rgba(200,200,200,0.5); - } -/* .removeThumb { - background-image: url(img/close.png); - background-repeat: no-repeat; - background-size: 100%; - text-align: center; - border: 0px; - width: 20px; - height: 20px; - vertical-align: top; - margin: -3px 0px 0px -8px; - } -*/ </style> - - <script type="text/javascript"> - // dojoConfig = { - // async : false, - // isDebug : true, - // debugAtAllCosts : true, - // } - </script> - - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/osg.js"></script> - <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script> - <script type="text/javascript" src="viewer-webgl.js"></script> - <script type="text/javascript" src="annotations.js"></script> - - <script type="text/javascript"> - - require(["dojo/domReady!", "dojo"], function(dom, dojo) { - // var viewer1 = new VRMLViewer("scene1", { - // pose: { - // pitch : 0, - // roll : 0, - // yaw : 0, - // zoom : 1, - // x : 0, - // y : 0, - // z : 0, - // autorotate : true - // }, - // height: 300, - // width: 400, - // enableMovies: false, - // enableDND: false, - // enableWebGL: true, - // enableSceneshots: false, - // enableDraggables: false, - // enablePosePublishing: true, - // listNavigationStyle: true, - // treeNavigationStyle: true, - // listDirectory: "10975/57", - // imagePath: "10975/57/latest", - // imageFormat: "png", - // serverURL: "http://femkit.smartvortex.eu:8086/vrml/", - // }); - - var vrmlViewer = new eu_smartvorex_femkit_ui_modelviewer.VRMLViewer("scene1", { - resRoot: "/img/tridi/", - enableMovies: false, - enableDND: false, - enableWebGL: true, - enableSceneshots: false, - enableDraggables: false, - listNavigationStyle: true, - treeNavigationStyle: true, - width: 550, - height: 550, - imagePath: "/10975/56/latest", - imageFormat: "png", - listDirectory: "/10975/56", - serverURL: "http://femkit.smartvortex.eu:8086/vrml", - }); - - // http://femkit.smartvortex.eu:8086/vrml/10975/57/latest.osgjs - - // var viewer2 = new VRMLViewer("scene2", { - // pose: { - // pitch : 0, - // roll : 0, - // yaw : 0, - // zoom : 1, - // x : 0, - // y : 0, - // z : 0, - // autorotate : true - // }, - // height: 300, - // width: 400, - // enableMovies: false, - // enableDND: false, - // enableWebGL: false, - // enableSceneshots: true, - // enableDraggables: false, - // enablePosePublishing: true, - // listNavigationStyle: false, - // treeNavigationStyle: false, - // listDirectory: "/cranehook/cranehook_bad_convergence", - // imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_000", - // imageFormat: "png", - // serverURL: "http://femkit.smartvortex.eu:8086/vrml/", - // }); - - // setTimeout(function() { - // setInterval(function(){ - // var pose1 = viewer1.getPose(); - // var pose2 = viewer2.getPose(); - // console.log("Pose1 - pitch: " + pose1.pitch + ", roll: " + pose1.roll + ", yaw: " + pose1.yaw); - // console.log("Pose2 - pitch: " + pose2.pitch + ", roll: " + pose2.roll + ", yaw: " + pose2.yaw); - // - // pose1.pitch += 0.1; - // pose2.pitch += 0.1; - // - // pose1.roll += 0.2; - // pose2.roll += 0.2; - // - // pose1.yaw += 0.4; - // pose2.yaw += 0.4; - // - // viewer1.setPose(pose2); - // viewer2.setPose(pose2); - // - // }, 400); - // }, 1000); - }); - - - </script> - </head> - <body class="tundra"> - <table align="center"> - <tr> - <td ><br /><br /><br /><br /><br /><br /> - <div id="scene1" /> - </td> - <td><br /><br /><br /><br /><br /><br /> - <div id="scene2" /> - </td> - </tr> - <tr><td> - <div id="annotations1"></div> - </td></tr> - </table> - </body> -</html> diff --git a/apps/samples/vrml/viewer.js b/apps/samples/vrml/viewer.js deleted file mode 100644 index 4b59a8c..0000000 --- a/apps/samples/vrml/viewer.js +++ /dev/null @@ -1,984 +0,0 @@ -function VRMLViewer(element, params) { - - // private attributes - var self = this; - var batchChanges = false; - - // private instanceId - if (!VRMLViewer.instances) - VRMLViewer.instances = 0; - this.instanceId = VRMLViewer.instances++; - - // public attribute defaults - this.width = 450; - this.height = 350; - - { - var pose = { - pitch: 0, - roll: 0, - yaw: 0, - zoom: 1, - x: 0, - y: 0, - z: 0, - width: this.width, - height: this.height, - autorotate: false, - } - this.pose = pose; - } - - this.enableMovies = true; - this.enableDND = true; - this.modelNavigationStyle = "tree"; // tree, list, none - this.poseNavigationStyle = "draggables"; // draggables, sliders - this.listDirectory = ""; - this.serverURL = "localhost:8080"; - this.imagePath = ""; - this.resRoot = ""; - - // copy over values from constructor arguments - if (params) { - for (var param in params) { - if (self.hasOwnProperty(param)) - self[param] = params[param]; - } - } - - // normalize parameters - - // make sure server url begins with protocol and does *not* ends in / - if (!self.serverURL.substring(0, 7) == "http://" && - !self.serverURL.substring(0, 8) == "https://") - self.serverURL = "http://" + self.serverURL; - if (!self.serverURL.lastIndexOf("/") === self.serverURL.length) - self.serverURL += self.serverURL.substring(0, self.serverURL - 1); - - // make sure we have a listDirectory with navigation style list ending in / - if (self.modelNavigationStyle === "list" && !self.listDirectory && self.imagePath) - self.listDirectory = self.imagePath.substring(0, self.imagePath.lastIndexOf("/")); - if (!self.listDirectory.indexOf("/", self.listDirectory.length - 1) !== -1) - self.listDirectory += "/"; - - // use latest image if none given - if (!self.imagePath) - self.imagePath = self.listDirectory + "latest.png"; - - // privileged public methods - this.updateScene = function() { - if (self.serverURL && self.imagePath && !self.batchChanges) { - self.imgElem.src = self.serverURL + self.imagePath + urlSuffixForPose(self.pose); - if (self.enableMovies) { - // we are showing an image, activate movie controls - self.movieAddButton.domNode.style.display = ""; - self.movieDropDown.domNode.style.display = ""; - } - } - }; - - var urlSuffixForPose = function(pose) { - var queryString = - '?width=' + pose.width + - '&height=' + pose.height + - '&pitch=' + pose.pitch + - '&roll=' + pose.roll + - '&yaw=' + pose.yaw + - '&x=' + pose.x + - '&y=' + pose.y + - '&z=' + pose.z + - '&zoom=' + pose.zoom + - '&autorotate=' + (pose.autorotate ? '1' : '0'); - return queryString; - }; - - var moverRelativeTo = function(mover, container) { - var containerPos = absolutePosition(container); - return { - x: mover.x - containerPos.x, - y: mover.y - containerPos.y - }; - }; - - // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag - var absolutePosition = function(el) { - for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent); - return {x: lx,y: ly}; - }; - - this.populateMovieCodecs = function(server, selectElem) { - self.xhr.get({ - // The URL to request - url: server, - handleAs:"json", - headers:{"X-Requested-With":null}, - load: function(result) { - for (var codec in result.video) { - if (codec !== "mpeg1video" && - codec !== "mpeg2video" && - codec !== "mpeg4" && - codec !== "h264" && - codec !== "ayuv" && - codec !== "flashsv" && - codec !== "flashsv2" && - codec !== "flv" && - codec !== "rv40" && - codec !== "theora" && - codec !== "v210" && - codec !== "v308" && - codec !== "v408" && - codec !== "v410" && - codec !== "wmv3" && - codec !== "y41p" && - codec !== "yuv4") - continue; - //console.log(codec); - selectElem.options.push({ label: result.video[codec].longName, value: codec }); - if (codec === "mpeg4") - selectElem.options[selectElem.options.length - 1].selected = true; - } - } - }); - } - - this.setServer = function(serverURL) { - if (!serverURL || serverURL == self.serverURL) { - // nothing to do - return; - } - - self.serverURL = serverURL; - if (self.fileStandby) { self.fileStandby.show(); } - - self.xhr.get({ - // The URL to request - url: serverURL, - handleAs:"json", - headers:{"X-Requested-With":null}, - error: function(result) { - - if (self.browseButton) { self.browseButton.setAttribute('label', 'Browse'); } - if (self.fileStandby) { self.fileStandby.hide(); } - var allItems = self.fileStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileStore.remove(allItems[i].id); - } - }, - load: function(result) { - self.localStorage.put("vrmlServer", self.serverURL, null); - if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } - if (self.fileStandby) { self.fileStandby.hide(); } - - // empty store - var allItems = self.fileStore.query(); - for (var i = 0; i < allItems.total; i++) { - self.fileStore.remove(allItems[i].id); - } - - if (self.modelNavigationStyle === "tree") { - - // parse result as tree - (function fillstore(tree, parentId) { - // todo: respect navigation style - for (key in tree) { - if ('url' in tree[key]) { - self.fileStore.add({id:parentId+key, name:key, url:self.serverURL + tree[key].path, parent:parentId}); - } else { - self.fileStore.add({id:parentId+key, name:key, parent:parentId}); - fillstore(tree[key], parentId+key); - } - } - } (result.models, "root", "")); - } else if (self.modelNavigationStyle === "list") { - - // parse result as list - if (!self.listDirectory) - console.log("Requested modelNavigationStyle === list but provided no listDirectory"); - var dirs = self.listDirectory.split("/"); - var models = result.models; - for (var dir in dirs) { - if (!dirs[dir].length) - continue; - if (dirs[dir] in models) { - models = models[dirs[dir]]; - } else { - console.log("No " + dirs[dir] + " in " + models); - } - } - for (var key in models) { - var url = self.serverURL + models[key].path; - self.fileStore.add({id:key, value:url, label:key, name:key, url:url}); - } - self.fileListSelect.startup(); - } - - self.updateScene(); - } - }); - }; - - this.setModel = function(imagePath) { - self.imagePath = imagePath; - } - - this.setPose = function(imagePath, pose, serverURL) { - if (serverURL && serverURL != self.serverURL) { - self.refreshServer(serverURL); - } - self.imagePath = imagePath; - self.pose = pose; - - var pitch = (pose.pitch % (2 * 3.14159) + 0.5) * 100; - var roll = (pose.roll % (2 * 3.14159) + 0.5) * 100; - var yaw = (pose.yaw % (2 * 3.14159) + 0.5) * 100; - - var x = ((pose.x / 100) + 0.5) * 100; - var y = ((pose.y / 100) + 0.5) * 100; - - var zoom = (((pose.zoom - 1) / 3) + 0.5) * 100; - - self.pitchRollHandlerElem.parentNode.style.right = pitch + "%"; - self.pitchRollHandlerElem.parentNode.style.top = roll + "%"; - self.yawZoomHandlerElem.parentNode.style.right = yaw + "%"; - self.yawZoomHandlerElem.parentNode.style.top = zoom + "%"; - self.xyHandlerElem.parentNode.style.right = x + "%"; - self.xyHandlerElem.parentNode.style.top = y + "%"; - - self.updateScene(); - }; - - require(["dojo/dom-construct", - "dojo/_base/xhr", - "dojo/dom", - "dojo/on", - "dojox/storage", - "dojo/store/Memory", - "dojo/store/Observable", - "dijit/tree/ObjectStoreModel", - "dojo/data/ObjectStore", - "dijit/Tree", - "dijit/form/TextBox", - "dijit/form/Button", - "dojox/widget/Standby", - "dijit/form/DropDownButton", - "dijit/TooltipDialog", - "dojo/dnd/Moveable", - "dojo/ready", - "dojo/dnd/Source", - "dijit/form/HorizontalSlider", - "dijit/form/Select", - "dijit/form/NumberSpinner"], - function(domConst, - xhr, - dom, - on, - storage, - Memory, - Observable, - ObjectStoreModel, - ObjectStore, - Tree, - TextBox, - Button, - Standby, - DropDownButton, - TooltipDialog, - Moveable, - ready, - Source, - HorizontalSlider, - Selector, - NumberSpinner) { - - ready(function() { - - if (typeof(element) === 'string') { - element = dom.byId(element); - } - element.style.height = self.pose.height; - element.style.width = self.pose.width; - - self.element = element; - self.xhr = xhr; - self.localStorage = dojox.storage.manager.getProvider(); - self.localStorage.initialize(); - - // establish our dom - element.appendChild(domConst.toDom('\ - <table>\ - <tr>\ - <td valign="top">\ - <div style="position: relative; padding: 0px">\ - <img class="model" src="' + self.resRoot + 'img/Tutorial.png" style="z-index: -1; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\ - <div style="z-index: 1; position: absolute; right: 45%; top: 45%">\ - <div class="progress"></div>\ - </div>\ - <div style="position: absolute; left: 10px; top: 10px">\ - <table></tr>\ - <td class="filesDropDown" style="vertical-align: middle"></td>\ - <td class="movieControls">\ - <div class="movieDropDown" style="display: inline"></div>\ - <button type="button" class="movieAddButton"></button>\ - </td>\ - <td align="right"><button type="button" class="resetButton"></button></td>\ - <td class="dragHandler" style="vertical-align: middle; padding-top: 4px;"></td>\ - </tr></table>\ - </div>\ - <div style="position: absolute; right: 10px; top: 15%; height: 50%">\ - <div class="zoomSlide"></div>\ - </div>\ - <div style="position: absolute; right: 50%; top: 50%">\ - <div class="pitchRollHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="pitchRollHandlerImg" src="' + self.resRoot + 'img/pitchRoll-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div style="position: absolute; right: 50%; top: 50%">\ - <div class="yawZoomHandler">\ - <div style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px; position: absolute; left: -34px;">\ - <table>\ - <tr>\ - <td><img class="yawZoomHandlerImg" src="' + self.resRoot + 'img/yawZoom-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - </div>\ - <div style="position: absolute; right: 50%; top: 50%">\ - <div class="xyHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\ - <table>\ - <tr>\ - <td><img class="xyHandlerImg" src="' + self.resRoot + 'img/xy-handle.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\ - <td><div class="xLabel"></div><div class="yLabel"></div></td>\ - </tr>\ - </table>\ - </div>\ - </div>\ - <div class="listNavigation" style="position: absolute; left: 10px; bottom: 10px">\ - <table></tr>\ - <td style="vertical-align: middle"><button class="prevButton" type="button" /></td>\ - <td style="vertical-align: middle"><div class="fileList" /></td>\ - <td style="vertical-align: middle"><button class="nextButton" type="button" /></td>\ - </tr></table>\ - </div>\ - </div>\ - </td>\ - <td valign="top" height="100%">\ - </td>\ - </tr>\ - <tr>\ - <td colspan="2"><div class="messages"></div></td>\ - </tr>\ - </table>\ - ')); - - // fetch special dom nodes for content - self.messageBox = dojo.query("div.messages", element)[0]; - self.imgElem = dojo.query("img.model", element)[0]; - - /** - * === POSE MANIPULATION AND RESET ==================== - */ - - self.resetButtonElem = dojo.query("button.resetButton", element)[0]; - self.progressElem = dojo.query("div.progress", element)[0]; - - self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0]; - self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0]; - self.xyHandlerElem = dojo.query(".xyHandler", element)[0]; - - self.pitchRollHandler = new Moveable(self.pitchRollHandlerElem); - self.pitchRollHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query("div.pitchLabel", mover.node)[0]; - var rollLabel = dojo.query("div.rollLabel", mover.node)[0]; - - pitchLabel.innerHTML = ''; - rollLabel.innerHTML = ''; - - self.updateScene(); - }; - self.pitchRollHandler.onMoving = function(mover) { - // mover.node.style.backgroundColor = "rgba(255,255,255,0.5)"; - // mover.node.style.borderRadius = "5px"; - // mover.node.style.mozBorderRadius = "5px"; - // mover.node.style.webkitBorderRadius = "5px"; - var handlerImg = dojo.query(".pitchRollHandlerImg", mover.node)[0]; - var pitchLabel = dojo.query(".pitchLabel", mover.node)[0]; - var rollLabel = dojo.query(".rollLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 30; - offset.y += 20; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 2; - - // self.pose.pitch = self.pose.pitch % (2 * 3.14159); - // self.pose.roll = self.pose.roll % (2 * 3.14159); - self.pose.roll = offset.x / self.pose.width - 0.5; - self.pose.pitch = offset.y / self.pose.height - 0.5; - self.pose.pitch *= -1; - self.pose.roll *= 2 * 3.14159; - self.pose.pitch *= 2 * 3.14159; - self.pose.roll = Math.ceil((self.pose.roll) * 10) / 10; - self.pose.pitch = Math.ceil((self.pose.pitch) * 10) / 10; - pitchLabel.innerHTML = 'Pitch:' + self.pose.pitch; - rollLabel.innerHTML = 'Roll:' + self.pose.roll; - }; - - self.yawZoomHandler = new Moveable(self.yawZoomHandlerElem); - self.yawZoomHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - - yawLabel.innerHTML = ''; - zoomLabel.innerHTML = ''; - - self.updateScene(); - }; - self.yawZoomHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0]; - var yawLabel = dojo.query("div.yawLabel", mover.node)[0]; - var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 7; - offset.y += 9; - - self.xyHandlerElem.style.zIndex = 1; - self.yawZoomHandlerElem.style.zIndex = 2; - self.pitchRollHandlerElem.style.zIndex = 1; - - // self.pose.pitch = self.pose.pitch % (2 * 3.14159); - // self.pose.roll = self.pose.roll % (2 * 3.14159); - self.pose.yaw = (self.pose.width - offset.x) / self.pose.width - 0.5; - self.pose.zoom = offset.y / self.pose.height - 0.5; - self.pose.yaw *= 2 * 3.14159; - self.pose.zoom = self.pose.zoom * 3 + 1; - self.pose.zoom = Math.ceil((self.pose.zoom) * 10) / 10; - self.pose.yaw = Math.ceil((self.pose.yaw) * 10) / 10; - yawLabel.innerHTML = 'Yaw:' + self.pose.yaw; - zoomLabel.innerHTML = 'Zoom:' + self.pose.zoom; - }; - - self.xyHandler = new Moveable(self.xyHandlerElem); - self.xyHandler.onMoveStop = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - - xLabel.innerHTML = ''; - yLabel.innerHTML = ''; - - self.updateScene(); - }; - self.xyHandler.onMoving = function(mover) { - var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0]; - var xLabel = dojo.query("div.xLabel", mover.node)[0]; - var yLabel = dojo.query("div.yLabel", mover.node)[0]; - var offset = moverRelativeTo(handlerImg, self.element); - - offset.x += 3; - offset.y += 13; - - self.xyHandlerElem.style.zIndex = 2; - self.yawZoomHandlerElem.style.zIndex = 1; - self.pitchRollHandlerElem.style.zIndex = 1; - - self.pose.x = offset.x / self.pose.width - 0.5; - self.pose.y = offset.y / self.pose.height - 0.5; - self.pose.x *= 100; - self.pose.y *= 100; - self.pose.y = Math.ceil((self.pose.y) * 10) / 10; - self.pose.x = Math.ceil((self.pose.x) * 10) / 10; - xLabel.innerHTML = 'X:' + self.pose.x; - yLabel.innerHTML = 'Y:' + self.pose.y; - }; - - - /** - * === DRAG HANDLER ==================== - */ - if (self.enableDND) { - self.createAvatar = function(item, mode) { - if (mode == 'avatar') { - // create your avatar if you want - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width=60; - avatarPose.height=60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.imagePath + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + avatarImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } - var handler = dojo.create( 'div', { innerHTML: '<img src="' + self.resRoot + 'img/drag.png" width="20px" />' }); - return {node: handler, data: item, type: item.type}; - }; - - self.dragHandler = new Source(dojo.query("td.dragHandler", element)[0], {copyOnly: true, creator: self.createAvatar}); - self.dragHandler.insertNodes(false, [ { } ]); - } - - /** - * === FILE NAVIGATION ==================== - */ - - if (self.modelNavigationStyle !== 'none') { - if (self.modelNavigationStyle === 'list') { - - // setup fileStore - self.fileStore = new Observable(new Memory({ - data: [], - })); - - self.prevButtonElem = dojo.query("button.prevButton", element)[0]; - self.nextButtonElem = dojo.query("button.nextButton", element)[0]; - self.fileListElem = dojo.query("div.fileList", element)[0]; - - var os = new ObjectStore({ objectStore: self.fileStore }); - - self.fileListSelect = new Selector({ - store: os, - onChange: function(name) { - var item = self.fileStore.query({ id: name })[0]; - self.imagePath = self.listDirectory + item.name + ".png"; - self.updateScene(); - } - }, self.fileListElem); - - self.prevButton = new Button({ - label: "<", - onClick: function() { - var allItems = self.fileStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - //console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break; - } - } - - if (foundAt > 0) { - self.imagePath = self.listDirectory + allItems[foundAt - 1].name + ".png"; - self.fileListSelect.attr( 'value', allItems[foundAt - 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt - 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt - 1].url); - self.updateScene(); - } - } - }, self.prevButtonElem); - - self.nextButton = new Button({ - label: ">", - onClick: function() { - var allItems = self.fileStore.query(); - var foundAt = 0; - for (var i = 0; i < allItems.total; i++) { - //console.log(self.serverURL + self.imagePath + " === " + allItems[i].url); - if (self.serverURL + self.imagePath === allItems[i].url) { - foundAt = i; - break - } - } - if (foundAt + 1 < allItems.total) { - self.imagePath = self.listDirectory + allItems[foundAt + 1].name + ".png"; - self.fileListSelect.attr( 'value', allItems[foundAt + 1].id ); - if (self.serverURL + self.imagePath !== allItems[foundAt + 1].url) - console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt + 1].url); - self.updateScene(); - } - } - }, self.nextButtonElem); - - } else { - - // setup fileStore - self.fileStore = new Observable(new Memory({ - data: [ { id: 'root', name:'3D Models'} ], - getChildren: function(object){ - return this.query({parent: object.id}); - } - })); - - self.fileTreeModel = new ObjectStoreModel({ - store: self.fileStore, - query: { id: "root" } - }); - - // setup actual tree dijit - self.fileList = new dijit.Tree({ - id: "fileList" + self.instanceId, - model: self.fileTreeModel, - persist: false, - showRoot: false, - style: "height: 300px;", - onClick: function(item){ - if ('url' in item) { - self.imagePath = item.url; - self.updateScene(); - } - }, - getIconClass: function(item, opened) { - return (!item || !('url' in item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf"; - }, - getIconStyle: function(item, opened){ - if('url' in item) { - return { backgroundImage: "url('" + item.url + "?width=16&height=16')"}; - } - } - //return {backgroundImage: "url('" + item.url + "?width=16&height=16')"}; - }); - - self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; - - self.serverBox = new TextBox({ - name: "Server", - value: self.serverURL, - style: "width: 65%", - - onKeyUp: function(e) { - if (self.browseButton) { - if (this.get("value") !== self.serverURL) { - self.browseButton.setAttribute('label', 'Browse'); - } else { - self.browseButton.setAttribute('label', 'Refresh'); - } - } - }, - - onKeyDown: function(e) { - var code = e.keyCode || e.which; - if( code === 13 ) { - e.preventDefault(); - self.refreshServer(this.get("value")); - return false; - } - }, - }); - - self.browseButton = new Button({ - label: "Browse", - onClick: function(){ - self.refreshServer(self.serverBox.get("value")); - } - }); - - self.filesDropDownContent = domConst.toDom('<div />'); - self.filesDropDownContent.appendChild(self.serverBox.domNode); - self.filesDropDownContent.appendChild(self.browseButton.domNode); - self.filesDropDownContent.appendChild(self.fileList.domNode); - - self.filesToolTip = new TooltipDialog({ content:self.filesDropDownContent, style:"max-height:320px"}); - self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip }); - self.filesDropDownElem.appendChild(self.filesDropDown.domNode); - - self.fileStandby = new Standby({target: self.filesDropDownContent }); - self.filesDropDownContent.appendChild(self.fileStandby.domNode); - } - } - - var savedServerURL = self.localStorage.get("vrmlServer"); - if (savedServerURL && !self.serverURL) { - self.serverURL = savedServerURL; - } - if (self.serverURL) { - self.refreshServer(self.serverURL); - } - /** - * === MOVIE DROPDOWN ==================== - */ - - if (self.enableMovies) { - self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; - self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; - - self.movieDropDownContent = domConst.toDom( - '<div style="overflow: auto; max-height: 420px;"> \ - <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \ - <div class=\"dndArea\" /> \ - </div>' - ); - - self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0]; - self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0]; - self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0]; - - self.createMovieThumb = function(item, mode) { - if (mode == 'avatar') { - // when dragged - var avatar = dojo.create( 'div', { innerHTML: item.data }); - var avatarPose = dojo.clone(self.pose); - avatarPose.width = 60; - avatarPose.height = 60; - var avatarImgUrl = urlSuffixForPose(avatarPose); - avatar.innerHTML = '<img src=' + self.imagePath + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + avatarImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = avatarPose; - return {node: avatar, data: item, type: item.type}; - } else { - - // when added to list - var thumb = domConst.toDom("\ - <div>\ - <table><tr><td>\ - <img class=\"movieThumb\"/>\ - <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\ - </td><td align=\"left\">\ - <table><tr>\ - <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\ - <td><div class=\"fillInSeries\" \></td>\ - </tr><tr>\ - <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\ - </tr></table>\ - </td></tr></table>\ - </div>\ - "); - thumb = dojo.query("div", thumb)[0]; - - var thumbImgElem = dojo.query("img.movieThumb", thumb)[0]; - var removeImgElem = dojo.query("img.removeThumb", thumb)[0]; - var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0]; - var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0]; - var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0]; - - item.getThisAndNeighborsFromDnD = function() { - var thisAndNeighbors = {}; - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - if (obj.data === item) { - thisAndNeighbors.this = { key: key, obj: obj }; - } else { - thisAndNeighbors.before = { key: key, obj: obj }; - } - if (thisAndNeighbors.this) { - thisAndNeighbors.after = { key: key, obj: obj }; - return thisAndNeighbors; - } - }); - return thisAndNeighbors; - }; - - item.relFrameLengthSlider = new HorizontalSlider({ - value: 50, - title: "Relative Duration of Frame", - style: "width:150px;" - }, relFrameLengthElem); - - item.relTransitionLengthSlider = new HorizontalSlider({ - value: 100, - title: "Relative Duration of Transition", - style: "width:150px;" - }, relTransitionLengthElem); - - removeImgElem.onclick = function() { - var thisItem = item.getThisAndNeighborsFromDnD(); - if (thisItem.this) { - // haha - what a mess! - self.addToMovieHandler.selectNone(); - self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj; - self.addToMovieHandler.deleteSelectedNodes(); - } - // disable create button if this was the last one - if (!thisItem.after || !thisItem.before) { - self.movieCreateButton.setAttribute('disabled', true); - } - } - - item.fillInSeriesButton = new Button({ - label: "Insert Series", - style: "display: none;", - onClick: function(){ - alert("foo"); - } - }, fillInSeriesElem); - - removeImgElem.src = self.resRoot + "img/close.png"; - - var thumbPose = dojo.clone(self.pose); - thumbPose.width = self.pose.width / 10; - thumbPose.height = self.pose.height / 10; - var thumbImgUrl = urlSuffixForPose(thumbPose); - - thumbImgElem.src = self.imagePath + thumbImgUrl; - // removeImgElem.src = self.resRoot + 'img/close.png'; - - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imagePath + thumbImgUrl; - item.imagePath = self.imagePath; - item.serverURL = self.serverURL; - item.pose = thumbPose; - - return {node: thumb, data: item, type: item.type}; - } - }; - - self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb}); - - self.movieFormatSelection = new Selector({ - name: "movieFormat", - style: "width: 320px", - options: [] - }); - self.populateMovieCodecs("http://" + self.serverURL + '/movie/codecs', self.movieFormatSelection); - - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} )); - self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"})); - self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode); - - self.movieHeightSpinner = new NumberSpinner({ - value: 400, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieWidthSpinner = new NumberSpinner({ - value: 600, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); - - self.movieCreateButton = new Button({ - label: "Create", - disabled: true, - onClick: function(){ - - var form = document.createElement("form"); - - form.setAttribute("method", "post"); - form.setAttribute("action", self.serverURL + "/movie"); - - var submitData = {}; - submitData.frames = []; - submitData.movieLength = self.movieDurationSpinner.value; - submitData.format = self.movieFormatSelection.value; - submitData.width = self.movieWidthSpinner.value; - submitData.height = self.movieHeightSpinner.value; - - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - var jsonData = { - iconPoseUrl: obj.data.iconPoseUrl, - imagePath: obj.data.imagePath, - serverURL: obj.data.serverURL, - pose: obj.data.pose, - relFrameLength: obj.data.relFrameLengthSlider.value, - relTransitionLength: obj.data.relTransitionLengthSlider.value, - } - submitData.frames.push(jsonData); - }); - - var hiddenField = document.createElement("input"); - hiddenField.setAttribute("type", "hidden"); - hiddenField.setAttribute("name", "data"); - hiddenField.setAttribute("value", JSON.stringify(submitData)); - - form.appendChild(hiddenField); - - // this will not save the returned binary file - // self.xhr.post({ - // form: form, - // load: function(data){ - // alert("asd"); - // } - // }); - - document.body.appendChild(form); - form.submit(); - document.body.removeChild(form); - } - }); - - self.movieDurationSpinner = new NumberSpinner({ - value: 10, - smallDelta: 1, - style: "width: 40px", - constraints: { min:0, places:0 }, - }); - - // append format duration cell - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} )); - var movieDimensionCell = dojo.create('td'); - movieDimensionCell.appendChild(self.movieWidthSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} )); - movieDimensionCell.appendChild(self.movieHeightSpinner.domNode); - movieDimensionCell.appendChild(self.movieDurationSpinner.domNode); - movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} )); - self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell); - - self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"})); - self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode); - - - self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent }); - self.movieDropDown = new DropDownButton({ - label: "Movie", - style: "display: none;", - dropDown: self.movieToolTip }); - self.movieDropDownElem.appendChild(self.movieDropDown.domNode); - - self.movieAddButton = new Button({ - label: "+", - style: "margin-left: -10px; display: none;", - onClick: function(){ - if (self.movieFormatSelection.options.length == 0) { - self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection); - } - // we could pass item.data here to creator - self.addToMovieHandler.insertNodes(false, [ { } ]); - self.movieCreateButton.setAttribute('disabled', false); - - } - }, self.movieAddButtonElem); - } else { - // remove movie controls - var movieControls = dojo.query("td.movieControls", element)[0]; - movieControls.parentNode.removeChild(movieControls); - } - - self.resetButton = new Button({ - label: "Reset", - onClick: function(){ - self.pose.x = 0; - self.pose.y = 0; - self.pose.pitch = 0; - self.pose.roll = 0; - self.pose.yaw = 0; - self.pose.zoom = 1; - - self.xyHandler.node.style.left = 0; - self.xyHandler.node.style.top = 0; - self.pitchRollHandler.node.style.left = 0; - self.pitchRollHandler.node.style.top = 0; - self.yawZoomHandler.node.style.left = 0; - self.yawZoomHandler.node.style.top = 0; - - self.updateScene(); - } - }, self.resetButtonElem); - - // do we have parameters for the initial pose? - if(self.params && self.params.pose) - self.setPose(self.params.imagePath, self.params.pose, self.params.serverURL); - - }); - }); - - -} diff --git a/apps/samples/vrml/vrml-server.caching.scxml b/apps/samples/vrml/vrml-server.caching.scxml deleted file mode 100644 index 2d935cd..0000000 --- a/apps/samples/vrml/vrml-server.caching.scxml +++ /dev/null @@ -1,416 +0,0 @@ -<scxml datamodel="ecmascript" name="vrml"> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/dump.js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/string. .js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/array.last.js" /> - <script> - var wrls = {}; // information of the wrl, vrml files - var models = {}; // information of the osgb files - var processed = {}; // information about processed files - - var pathDelim = ':'; // we need to flatten directories - this will seperate them in filenames - - /** - * This pattern matches the query string we use as part of generated image filenames - */ - var numPattern = '(-?[0-9]+\.?[0-9]*)'; - var formatPattern = new RegExp( - '-(' + numPattern + // pitch - '_' + numPattern + // roll - '_' + numPattern + // yaw - '_' + numPattern + // zoom - '_' + numPattern + // x - '_' + numPattern + // y - '_' + numPattern + // z - '_' + numPattern + // width - '_' + numPattern + // height - '_(off|on)' + // autorotate - ')\\.\\w+$'); // end - - /** - * Transform a file we found into a processed or model struct - */ - function fileToStruct(file) { - var struct = {}; - var formatMatch = formatPattern.exec(file.name); - // is this a processed file? - if (formatMatch && formatMatch.length == 12) { - struct.key = file.relDir.replace(/\//g, pathDelim).substr(1) + file.name.substr(0, file.name.length - formatMatch[0].length); - struct.format = formatMatch[1] + '.' + file.extension; - struct.pitch = parseFloat(formatMatch[2]); - struct.roll = parseFloat(formatMatch[3]); - struct.yaw = parseFloat(formatMatch[4]); - struct.zoom = parseFloat(formatMatch[5]); - struct.x = parseFloat(formatMatch[6]); - struct.y = parseFloat(formatMatch[7]); - struct.z = parseFloat(formatMatch[8]); - struct.width = parseFloat(formatMatch[9]); - struct.height = parseFloat(formatMatch[10]); - struct.autorotate = parseFloat(formatMatch[11]); - } else { - struct.key = file.relDir.replace(/\//g, pathDelim).substr(1) + file.strippedName; - } - return struct; - } - - /** - * Transform a http request into something to look up in the processed structure - */ - function reqToStruct(req) { - var struct = {}; - - var query = (('query' in req) ? req.query : {}); - - struct.pitch = (('pitch' in query && isNumber(query.pitch)) ? query.pitch : 0); - struct.roll = (('roll' in query && isNumber(query.roll)) ? query.roll : 0); - struct.yaw = (('yaw' in query && isNumber(query.yaw)) ? query.yaw : 0); - struct.zoom = (('zoom' in query && isNumber(query.zoom)) ? query.zoom : 1); - struct.x = (('x' in query && isNumber(query.x)) ? query.x : 0); - struct.y = (('y' in query && isNumber(query.y)) ? query.y : 0); - struct.z = (('z' in query && isNumber(query.z)) ? query.z : 0); - struct.width = (('width' in query && isNumber(query.width)) ? query.width : 640); - struct.height = (('height' in query && isNumber(query.height)) ? query.height : 480); - struct.autorotate = (('autorotate' in query && (query.autorotate === 'on' || query.autorotate === 'off')) ? query.autorotate : 'on'); - - var fileComp = req.pathComponent[req.pathComponent.length - 1]; - struct.file = fileComp.substr(0, fileComp.indexOf('.')); - struct.ext = fileComp.substr(fileComp.indexOf('.') + 1); - - struct.key = _event.data.pathComponent.slice(1, _event.data.pathComponent.length - 1).join(pathDelim); - if (struct.key.length > 0) - struct.key += pathDelim; - struct.key += struct.file; - - struct.format = - struct.pitch + '_' + - struct.roll + '_' + - struct.yaw + '_' + - struct.zoom + '_' + - struct.x + '_' + - struct.y + '_' + - struct.z + '_' + - struct.width + '_' + - struct.height + '_' + - struct.autorotate + '.' + - struct.ext; - return struct; - } - - function isSupportedFormat(extension) { - if (extension === "gif") - return true; - if (extension === "jpg") - return true; - if (extension === "jpeg") - return true; - if (extension === "png") - return true; - if (extension === "tif") - return true; - if (extension === "tiff") - return true; - if (extension === "bmp") - return true; - return false; - } - - // list all available models in a summary format for the topmost request - function overviewList() { - var struct = {}; - struct.models = {}; - for (key in models) { - var model = models[key]; - var group = models[key].group - var name = model.strippedName.split(pathDelim).last(); - var entry = assign(struct, ['models'].concat(group.substr(1).split('/')).concat(name), {}); - entry.url = - _ioprocessors['http'].location + model.relDir + model.strippedName.split(pathDelim).join('/') + '.png'; - entry.path = model.relDir + model.strippedName.split(pathDelim).join('/') + '.png'; - } - return struct; - } - - // check whether a given string represents a number - function isNumber(n) { - return !isNaN(parseFloat(n)) && isFinite(n); - } - - // allow to set deep keys in an object - function assign(obj, path, value) { - if (typeof path === 'string') - path = path.split('.'); - if (!(path instanceof Array)) - return undefined; - - lastKeyIndex = path.length-1; - for (var i = 0; i < lastKeyIndex; ++ i) { - key = path[i]; - if (key.length == 0) - continue; - if (!(key in obj)) - obj[key] = {} - obj = obj[key]; - } - obj[path[lastKeyIndex]] = value; - return obj[path[lastKeyIndex]]; - } - </script> - <state id="main"> - <!-- Stop processing if no vrml-path was given on command line --> - <transition target="final" cond="_x['args']['vrml-path'] == undefined || _x['args']['vrml-path'].length == 0"> - <log expr="'No --vrml-path given'" /> - </transition> - - <!-- Stop processing if no tmp-path was given on command line --> - <transition target="final" cond="_x['args']['tmp-path'] == undefined || _x['args']['tmp-path'].length == 0"> - <log expr="'No --tmp-path given'" /> - </transition> - - <!-- Stop processing if any error occurs --> - <transition target="final" event="error"> - <log expr="'An error occured:'" /> - <script>dump(_event);</script> - </transition> - - <!-- Start the directory monitor for generated files --> - <invoke type="dirmon" id="dirmon.processed"> - <param name="dir" expr="_x['args']['tmp-path']" /> - <param name="recurse" expr="false" /> - <param name="reportExisting" expr="true" /> - <!-- Called for every file we found --> - <finalize> - <script> - _event.fileStruct = fileToStruct(_event.data.file); - - if (_event.data.file.extension === "osgb") { - // this is a binary 3D file converted from the wrls - - if (_event.name === "file.deleted") { - delete models[_event.fileStruct.key]; - print("Removed a vanished osgb file at " + _event.fileStruct.key + "\n"); - } else { - models[_event.fileStruct.key] = _event.data.file; - models[_event.fileStruct.key].group = '/' + _event.data.file.name.split(pathDelim).slice(0,-1).join('/'); - print("Inserted a new osgb file at " + _event.fileStruct.key + "\n"); - } - - } else if ('format' in _event.fileStruct) { - // this is a processed file generated for some request - - if (_event.name === "file.deleted") { - delete processed[_event.fileStruct.key][_event.fileStruct.format]; - print("Removed a vanished processed file at " + _event.fileStruct.key + "\n"); - } else { - if (!(_event.fileStruct.key in processed)) { - processed[_event.fileStruct.key] = {} - } - processed[_event.fileStruct.key][_event.fileStruct.format] = _event.data.file; - print("Inserted a new processed file at " + _event.fileStruct.key + "\n"); - } - } else { - print("Ignoring " + _event.data.file.name + "\n"); - } - </script> - </finalize> - </invoke> - - <!-- Start the directory monitor for wrl files --> - <invoke type="dirmon" id="dirmon.vrml"> - <param name="dir" expr="_x['args']['vrml-path']" /> - <param name="recurse" expr="true" /> - <param name="suffix" expr="'vrml wrl'" /> - <finalize> - <script> - _event.fileStruct = fileToStruct(_event.data.file); - if (_event.name === "file.existing" || _event.name === "file.added") { - wrls[_event.fileStruct.key] = _event.data.file; - print("Inserting wrl " + _event.data.file.path + " from " +_event.data.file.relDir + " at " + _event.fileStruct.key + "\n"); - } - if (_event.name === "file.deleted") { - delete wrls[_event.fileStruct.key]; - print("Deleting wrl " + _event.data.file.path + " from " +_event.data.file.relDir + " at " + _event.fileStruct.key + "\n"); - } - </script> - <if cond="models && - (!(_event.fileStruct.key in models) || - wrls[_event.fileStruct.key].mtime > models[_event.fileStruct.key].mtime) - "> - <send target="#_osgvonvert.osgb"> - <param name="source" expr="_event.data.file.path" /> - <param name="dest" expr="_x['args']['tmp-path'] + '/' + _event.fileStruct.key + '.osgb'" /> - </send> - </if> - </finalize> - </invoke> - - <!-- Start the osgconvert invoker to transform 3D files --> - <invoke type="osgconvert" id="osgvonvert.osgb"> - <param name="threads" expr="4" /> - <finalize> - <script> - //dump(_event); - </script> - <!-- <file operation="write" contentexpr="_event.data.content" sandbox="off" urlexpr="_event.data.dest" /> --> - </finalize> - <!--finalize> - <script> - // we could put the file into the osgbs or processed here, but we rely on the directory monitors for now - print("Received " + _event.name + " regarding " + _event.data.dest + "\n"); - </script> - </finalize--> - </invoke> - - <!-- Start a nested SCXML interpreter to create movies from the images --> - <!-- <invoke type="scxml" id="scxml.ffmpeg" src="ffmpeg-server.scxml" autoforward="true"> - <param name="modelDir" expr="_x['args']['tmp-path']" /> - </invoke> --> - - <!-- Idle here --> - <state id="idle"> - <!--onentry> - <log expr="_event" /> - </onentry --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length >= 2 && - _event.data.pathComponent[_event.data.pathComponent.length - 1].indexOf('.') !== -1"> - <!-- request for a specific format - http://host/vrml/relative/path/format?query=string --> - <script> - _event.fileStruct = reqToStruct(_event.data); - _event.dest = _x['args']['tmp-path'] + '/' + _event['fileStruct'].key + '-' + _event['fileStruct'].format; - print("Got a request for [" + _event['fileStruct'].key + '-' + _event['fileStruct'].format + "]\n"); -// dump(_event); - </script> - <if cond="_event['fileStruct'].key in models && isSupportedFormat(_event['fileStruct'].ext)"> - <!-- There is such a file available as osgb --> - <if cond=" - _event['fileStruct'].key in processed && - _event['fileStruct'].format in processed[_event['fileStruct'].key]"> - <script> - //print("Sending " + processed[_event['fileStruct'].key][_event['fileStruct'].format].path + "\n"); - </script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content fileexpr="processed[_event['fileStruct'].key][_event['fileStruct'].format].path" /> - </respond> - <else /> - <if cond="_event.name. ('postponed')"> - <!-- - A postponed event we couldn't answer - --> - <respond status="404" to="_event.origin"> - <header name="Connection" value="close" /> - </respond> - <else /> - <script> - print("Processing outfile " + _event['dest'] + " from model " + _event['file'] + "\n"); - </script> - <send target="#_osgvonvert.osgb"> - <param name="source" expr="models[_event['fileStruct'].key].path" /> - <param name="dest" expr="_event['dest']" /> - <param name="pitch" expr="_event.fileStruct.pitch" /> - <param name="roll" expr="_event.fileStruct.roll" /> - <param name="yaw" expr="_event.fileStruct.yaw" /> - <param name="zoom" expr="_event.fileStruct.zoom" /> - <param name="x" expr="_event.fileStruct.x" /> - <param name="y" expr="_event.fileStruct.y" /> - <param name="z" expr="_event.fileStruct.z" /> - <param name="width" expr="_event.fileStruct.width" /> - <param name="height" expr="_event.fileStruct.height" /> - <param name="autorotate" expr="_event.fileStruct.autorotate" /> - </send> - <!-- - Redeliver the event once the untilexpr is true. The untilexpr has to evaluate - into another valid expression that we will check again on stable configurations. - --> - <postpone - untilexpr=" - '\'' + _event['fileStruct'].key + '\' in processed && - \'' + _event['fileStruct'].format + '\'' + ' in processed[\'' + _event['fileStruct'].key + '\'] || - _event.name === \'convert.failure\' && _event.data.dest === \'' + _event['dest'] + '\'' - "/> - </if> - </if> - <else /> - <!-- There is no such model --> - <respond status="404" to="_event.origin"> - <header name="Connection" value="close" /> - </respond> - </if> - </transition> - - <!-- - process request for JSON datastructures - --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'models'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="models" /> - </respond> - </transition> - - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'processed'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="processed" /> - </respond> - </transition> - - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'wrls'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="wrls" /> - </respond> - </transition> - - <!-- request for topmost list of all files --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 1"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="overviewList()" /> - </respond> - </transition> - - <!-- XHR CORS preflight response --> - <transition event="http.options" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Access-Control-Allow-Origin" value="*" /> - <header name="Access-Control-Allow-Methods" value="GET, OPTIONS" /> - <header name="Access-Control-Allow-Headers" value="X-Requested-With" /> - </respond> - </transition> - - <transition event="render.done" target="idle"> - <script>dump(_event);</script> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" valueexpr="_event.data.mimetype" /> - <header name="Content-Disposition" valueexpr="'attachment; filename=' + _event.data.filename" /> - <content expr="_event.data.movie" /> - </respond> - </transition> - - </state> - </state> - <state id="final" final="true" /> -</scxml>
\ No newline at end of file diff --git a/apps/samples/vrml/vrml-server.pre-osgjs.scxml b/apps/samples/vrml/vrml-server.pre-osgjs.scxml deleted file mode 100644 index a51c5f3..0000000 --- a/apps/samples/vrml/vrml-server.pre-osgjs.scxml +++ /dev/null @@ -1,333 +0,0 @@ -<scxml datamodel="ecmascript" name="vrml"> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/dump.js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/string. .js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/array.last.js" /> - <script> - var wrls = {}; // information of the wrl, vrml files - var models = {}; // information of the osgb files - - var pathDelim = ':'; // we need to flatten directories - this will seperate them in filenames - - /** - * Transform a http request into a pose - */ - function reqToStruct(req) { - var struct = {}; - - var query = (('query' in req) ? req.query : {}); - - struct.pitch = (('pitch' in query && isNumber(query.pitch)) ? query.pitch : 0); - struct.roll = (('roll' in query && isNumber(query.roll)) ? query.roll : 0); - struct.yaw = (('yaw' in query && isNumber(query.yaw)) ? query.yaw : 0); - struct.zoom = (('zoom' in query && isNumber(query.zoom)) ? query.zoom : 1); - struct.x = (('x' in query && isNumber(query.x)) ? query.x : 0); - struct.y = (('y' in query && isNumber(query.y)) ? query.y : 0); - struct.z = (('z' in query && isNumber(query.z)) ? query.z : 0); - struct.width = (('width' in query && isNumber(query.width)) ? query.width : 640); - struct.height = (('height' in query && isNumber(query.height)) ? query.height : 480); - struct.autorotate = (('autorotate' in query && (query.autorotate === 'on' || query.autorotate === 'off')) ? query.autorotate : 'on'); - - var fileComp = req.pathComponent[req.pathComponent.length - 1]; - struct.file = fileComp.substr(0, fileComp.indexOf('.')); - struct.ext = fileComp.substr(fileComp.indexOf('.') + 1); - - struct.key = _event.data.pathComponent.slice(1, _event.data.pathComponent.length - 1).join(pathDelim); - if (struct.key.length > 0) - struct.key += pathDelim; - - // support for meta file "latest.ext" - if (struct.file === "latest") { - var latestStamp = 0; - for (var key in models) { - if (key.substring(0, struct.key.length) == struct.key) { - if (models[key].ctime > latestStamp) { - var name = models[key].strippedName; - struct.file = name.substring(name.lastIndexOf(pathDelim) + 1); - latestStamp = models[key].ctime; - } - } - } - } - - struct.key += struct.file; - - return struct; - } - - function keyForFile(file) { - var key = file.relDir.replace(/\//g, pathDelim).substr(1) + file.strippedName; - return key; - } - - function isSupportedFormat(extension) { - if (extension === "gif") - return true; - if (extension === "jpg") - return true; - if (extension === "jpeg") - return true; - if (extension === "png") - return true; - if (extension === "tif") - return true; - if (extension === "tiff") - return true; - if (extension === "bmp") - return true; - return false; - } - - // list all available models in a summary format for the topmost request - function overviewList() { - var struct = {}; - struct.models = {}; - for (key in models) { - var model = models[key]; - var group = models[key].group - var name = model.strippedName.split(pathDelim).last(); - var entry = assign(struct, ['models'].concat(group.substr(1).split('/')).concat(name), {}); - entry.url = - _ioprocessors['http'].location + model.relDir + model.strippedName.split(pathDelim).join('/') + '.png'; - entry.path = model.relDir + model.strippedName.split(pathDelim).join('/') + '.png'; - } - return struct; - } - - // check whether a given string represents a number - function isNumber(n) { - return !isNaN(parseFloat(n)) && isFinite(n); - } - - // allow to set deep keys in an object - function assign(obj, path, value) { - if (typeof path === 'string') - path = path.split('.'); - if (!(path instanceof Array)) - return undefined; - - lastKeyIndex = path.length-1; - for (var i = 0; i < lastKeyIndex; ++ i) { - key = path[i]; - if (key.length == 0) - continue; - if (!(key in obj)) - obj[key] = {} - obj = obj[key]; - } - obj[path[lastKeyIndex]] = value; - return obj[path[lastKeyIndex]]; - } - </script> - <state id="main"> - <!-- Stop processing if no vrml-path was given on command line --> - <transition target="final" cond="_x['args']['vrml-path'] == undefined || _x['args']['vrml-path'].length == 0"> - <log expr="'No --vrml-path given'" /> - </transition> - - <!-- Stop processing if no tmp-path was given on command line --> - <transition target="final" cond="_x['args']['tmp-path'] == undefined || _x['args']['tmp-path'].length == 0"> - <log expr="'No --tmp-path given'" /> - </transition> - - <!-- Stop processing if any error occurs --> - <transition target="final" event="error"> - <log expr="'An error occured:'" /> - <script>dump(_event);</script> - </transition> - - <!-- Start the directory monitor for generated files --> - <invoke type="dirmon" id="dirmon.processed"> - <param name="dir" expr="_x['args']['tmp-path']" /> - <param name="recurse" expr="false" /> - <param name="reportExisting" expr="true" /> - <param name="suffix" expr="'osgb'" /> - <!-- Called for every file we found --> - <finalize> - <script> - var key = keyForFile(_event.data.file); - // this is a binary 3D file converted from the wrls - - if (_event.name === "file.deleted") { - delete models[key]; - print("Removed a vanished osgb file at " + key + "\n"); - } else { - models[key] = _event.data.file; - models[key].group = '/' + _event.data.file.name.split(pathDelim).slice(0,-1).join('/'); - print("Inserted a new osgb file at " + key + "\n"); - } - </script> - </finalize> - </invoke> - - <!-- Start the directory monitor for wrl files --> - <invoke type="dirmon" id="dirmon.vrml"> - <param name="dir" expr="_x['args']['vrml-path']" /> - <param name="recurse" expr="true" /> - <param name="suffix" expr="'vrml wrl'" /> - <finalize> - <script> - _event.key = keyForFile(_event.data.file); - if (_event.name === "file.existing" || _event.name === "file.added") { - wrls[_event.key] = _event.data.file; - var dirMonFile = _event.data.file.relDir.substr(1) + _event.data.file.strippedName + ".osgb" - // we already procressed this file - if (_invokers['dirmon.processed'].file[dirMonFile]) { - models[_event.key] = _event.data.file; - } - print("Inserting wrl " + _event.data.file.path + " from " + _event.data.file.relDir + " at " + _event.key + "\n"); - } - if (_event.name === "file.deleted") { - delete wrls[_event.key]; - delete models[_event.key]; - print("Deleting wrl " + _event.data.file.path + " from " + _event.data.file.relDir + " at " + _event.key + "\n"); - } - </script> - <if cond="models && _event.name !== 'file.deleted' && - (!(_event.key in models) || wrls[_event.key].mtime > models[_event.key].mtime)"> - <send target="#_osgvonvert.osgb"> - <param name="source" expr="_event.data.file.path" /> - <param name="dest" expr="_x['args']['tmp-path'] + '/' + _event.key + '.osgb'" /> - </send> - </if> - </finalize> - </invoke> - - <!-- Start the osgconvert invoker to transform 3D files --> - <invoke type="osgconvert" id="osgvonvert.osgb"> - <param name="threads" expr="4" /> - <finalize> - <script> - //dump(_event); - </script> - <if cond="'context' in _event.data"> - <!-- this was generated in reply to a request --> - <if cond="_event.name. ('success')"> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <header name="Content-Type" valueexpr="_event.data.content[_event.data.format].mimetype" /> - <content expr="_event.data.content[_event.data.format]" /> - </respond> - <else /> - <respond status="404" to="_event.data.context"> - <header name="Connection" value="close" /> - </respond> - </if> - </if> - </finalize> - </invoke> - - <!-- Start a nested SCXML interpreter to create movies from the images --> - <invoke type="scxml" id="scxml.ffmpeg" src="ffmpeg-server.invoked.scxml" autoforward="true"> - <param name="modelDir" expr="_x['args']['tmp-path']" /> - </invoke> - - <!-- Idle here --> - <state id="idle"> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length >= 2 && - _event.data.pathComponent[_event.data.pathComponent.length - 1].indexOf('.') !== -1"> - <!-- request for a specific format http://host/vrml/relative/path/format?query=string --> - <script> - //dump(_invokers['dirmon.vrml']); - _event.fileStruct = reqToStruct(_event.data); - </script> - <if cond="_event.fileStruct.key in models && isSupportedFormat(_event['fileStruct'].ext)"> - <!-- There is such a file available as osgb --> - <send target="#_osgvonvert.osgb"> - <param name="source" expr="models[_event['fileStruct'].key].path" /> - <param name="format" expr="_event['fileStruct'].ext" /> - <param name="pitch" expr="_event.fileStruct.pitch" /> - <param name="roll" expr="_event.fileStruct.roll" /> - <param name="yaw" expr="_event.fileStruct.yaw" /> - <param name="zoom" expr="_event.fileStruct.zoom" /> - <param name="x" expr="_event.fileStruct.x" /> - <param name="y" expr="_event.fileStruct.y" /> - <param name="z" expr="_event.fileStruct.z" /> - <param name="width" expr="_event.fileStruct.width" /> - <param name="height" expr="_event.fileStruct.height" /> - <param name="autorotate" expr="_event.fileStruct.autorotate" /> - <param name="context" expr="_event.origin" /> - </send> - <else /> - <!-- There is no such model --> - <respond status="404" to="_event.origin"> - <header name="Connection" value="close" /> - </respond> - </if> - </transition> - - <!-- - process request for JSON datastructures - --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'models'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="models" /> - </respond> - </transition> - - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'wrls'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="wrls" /> - </respond> - </transition> - - <!-- request for topmost list of all files --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 1"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="overviewList()" /> - </respond> - </transition> - - <!-- XHR CORS preflight response --> - <transition event="http.options" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Access-Control-Allow-Origin" value="*" /> - <header name="Access-Control-Allow-Methods" value="GET, OPTIONS" /> - <header name="Access-Control-Allow-Headers" value="X-Requested-With" /> - </respond> - </transition> - - <transition event="render.done" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" valueexpr="_event.data.mimetype" /> - <header name="Content-Disposition" valueexpr="'attachment; filename=' + _event.data.filename" /> - <content expr="_event.data.movie" /> - </respond> - </transition> - - <transition event="send.codecs" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" valueexpr="_event.data.mimetype" /> - <header name="Content-Disposition" valueexpr="'attachment; filename=' + _event.data.filename" /> - <content expr="_event.data.codecs" /> - </respond> - </transition> - - </state> - </state> - <state id="final" final="true" /> -</scxml>
\ No newline at end of file diff --git a/apps/samples/vrml/vrml-server.scxml b/apps/samples/vrml/vrml-server.scxml deleted file mode 100644 index 529a469..0000000 --- a/apps/samples/vrml/vrml-server.scxml +++ /dev/null @@ -1,356 +0,0 @@ -<scxml datamodel="ecmascript" name="vrml"> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/dump.js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/string. .js" /> - <script src="http://uscxml.tk.informatik.tu-darmstadt.de/scripts/array.last.js" /> - <script> - var wrls = {}; // information of the wrl, vrml files - var models = {}; // information of the osgb / osgjs files - - var pathDelim = ':'; // we need to flatten directories - this will seperate them in filenames - - /** - * Transform a http request into a pose - */ - function reqToStruct(req) { - var struct = {}; - - var query = (('query' in req) ? req.query : {}); - - struct.pitch = (('pitch' in query && isNumber(query.pitch)) ? query.pitch : 0); - struct.roll = (('roll' in query && isNumber(query.roll)) ? query.roll : 0); - struct.yaw = (('yaw' in query && isNumber(query.yaw)) ? query.yaw : 0); - struct.zoom = (('zoom' in query && isNumber(query.zoom)) ? query.zoom : 1); - struct.x = (('x' in query && isNumber(query.x)) ? query.x : 0); - struct.y = (('y' in query && isNumber(query.y)) ? query.y : 0); - struct.z = (('z' in query && isNumber(query.z)) ? query.z : 0); - struct.width = (('width' in query && isNumber(query.width)) ? query.width : 640); - struct.height = (('height' in query && isNumber(query.height)) ? query.height : 480); - struct.autorotate = (('autorotate' in query && (query.autorotate === 'on' || query.autorotate === 'off')) ? query.autorotate : 'on'); - - var fileComp = req.pathComponent[req.pathComponent.length - 1]; - struct.file = fileComp.substr(0, fileComp.indexOf('.')); - struct.ext = fileComp.substr(fileComp.indexOf('.') + 1); - - struct.key = _event.data.pathComponent.slice(1, _event.data.pathComponent.length - 1).join(pathDelim); - if (struct.key.length > 0) - struct.key += pathDelim; - - // support for meta file "latest.ext" - if (struct.file === "latest") { - var latestStamp = 0; - for (var key in models) { - if (key.substring(0, struct.key.length) == struct.key) { - if (models[key].ctime > latestStamp) { - var name = models[key].strippedName; - struct.file = name.substring(name.lastIndexOf(pathDelim) + 1); - latestStamp = models[key].ctime; - } - } - } - } - - struct.key += struct.file; - return struct; - } - - function keyForFile(file) { - var key = file.relDir.replace(/\//g, pathDelim).substr(1) + file.strippedName; - return key; - } - - function isSupportedFormat(extension) { - if (extension === "gif") - return true; - if (extension === "jpg") - return true; - if (extension === "jpeg") - return true; - if (extension === "png") - return true; - if (extension === "tif") - return true; - if (extension === "tiff") - return true; - if (extension === "bmp") - return true; - if (extension === "osgjs") - return true; - return false; - } - - // list all available models in a summary format for the topmost request - function overviewList() { - var struct = {}; - struct.models = {}; - for (key in models) { - var model = models[key]; - var group = models[key].group - var name = model.strippedName.split(pathDelim).last(); - var entry = assign(struct, ['models'].concat(group.substr(1).split('/')).concat(name), {}); - entry.url = - _ioprocessors['http'].location + model.relDir + model.strippedName.split(pathDelim).join('/'); - entry.path = model.relDir + model.strippedName.split(pathDelim).join('/'); - } - return struct; - } - - // check whether a given string represents a number - function isNumber(n) { - return !isNaN(parseFloat(n)) && isFinite(n); - } - - // allow to set deep keys in an object - function assign(obj, path, value) { - if (typeof path === 'string') - path = path.split('.'); - if (!(path instanceof Array)) - return undefined; - - lastKeyIndex = path.length-1; - for (var i = 0; i < lastKeyIndex; ++ i) { - key = path[i]; - if (key.length == 0) - continue; - if (!(key in obj)) - obj[key] = {} - obj = obj[key]; - } - obj[path[lastKeyIndex]] = value; - return obj[path[lastKeyIndex]]; - } - </script> - <state id="main"> - <!-- Stop processing if no vrml-path was given on command line --> - <transition target="final" cond="_x.args == undefined || _x.args['vrml-path'] == undefined || _x.args['vrml-path'].length == 0"> - <log expr="'No --vrml-path given'" /> - </transition> - - <!-- Stop processing if no tmp-path was given on command line --> - <transition target="final" cond="_x.args == undefined || _x.args['tmp-path'] == undefined || _x.args['tmp-path'].length == 0"> - <log expr="'No --tmp-path given'" /> - </transition> - - <!-- Stop processing if any error occurs --> - <transition target="final" event="error"> - <log expr="'An error occured:'" /> - <script>dump(_event);</script> - </transition> - - <!-- Start the directory monitor for generated files --> - <invoke type="dirmon" id="dirmon.processed"> - <param name="dir" expr="_x['args']['tmp-path']" /> - <param name="recurse" expr="false" /> - <param name="reportExisting" expr="true" /> - <param name="suffix" expr="'osgb'" /> - <!-- Called for every file we found --> - <finalize> - <script> - var key = keyForFile(_event.data.file); - // this is a binary 3D file converted from the wrls - if (_event.name === "file.deleted") { - delete models[key]; - print("Removed a vanished osgb file at " + key + "\n"); - } else { - models[key] = _event.data.file; - models[key].group = '/' + _event.data.file.name.split(pathDelim).slice(0,-1).join('/'); - print("Inserted a new osgb file at " + key + "\n"); - } - </script> - </finalize> - </invoke> - - <!-- Start the directory monitor for wrl files --> - <invoke type="dirmon" id="dirmon.vrml"> - <param name="dir" expr="_x['args']['vrml-path']" /> - <param name="recurse" expr="true" /> - <param name="suffix" expr="'vrml wrl'" /> - <finalize> - <script> - _event.key = keyForFile(_event.data.file); - if (_event.name === "file.existing" || _event.name === "file.added") { - wrls[_event.key] = _event.data.file; - var dirMonFile = _event.data.file.relDir.substr(1) + _event.data.file.strippedName + ".osgb" - // we already procressed this file - if (_invokers['dirmon.processed'].file[dirMonFile]) { - models[_event.key] = _event.data.file; - } - print("Inserting wrl " + _event.data.file.path + " from " + _event.data.file.relDir + " at " + _event.key + "\n"); - } - if (_event.name === "file.deleted") { - delete wrls[_event.key]; - delete models[_event.key]; - print("Deleting wrl " + _event.data.file.path + " from " + _event.data.file.relDir + " at " + _event.key + "\n"); - } - </script> - <if cond="models && _event.name !== 'file.deleted' && - (!(_event.key in models) || wrls[_event.key].mtime > models[_event.key].mtime)"> - <send target="#_osgvonvert.toNative"> - <param name="source" expr="_event.data.file.path" /> - <param name="dest" expr="_x['args']['tmp-path'] + '/' + _event.key + '.osgb'" /> - <param name="optimizegeometry" expr="true" /> - </send> - </if> - </finalize> - </invoke> - - <!-- Start the osgconvert invoker to transform 3D files --> - <invoke type="osgconvert" id="osgvonvert.toNative"> - <param name="threads" expr="4" /> - </invoke> - - <invoke type="osgconvert" id="osgvonvert.toClient"> - <param name="threads" expr="4" /> - <finalize> - <script> - //dump(_event); - </script> - <if cond="'context' in _event.data"> - <!-- this was generated in reply to a request --> - <if cond="_event.name. ('success')"> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <header name="Content-Type" valueexpr="_event.data.content[_event.data.format].mimeType" /> - <content expr="_event.data.content[_event.data.format]" /> - </respond> - <else /> - <respond status="404" to="_event.data.context"> - <header name="Connection" value="close" /> - </respond> - </if> - </if> - </finalize> - </invoke> - - <!-- Start a nested SCXML interpreter to create movies from the images --> - <invoke type="scxml" id="scxml.ffmpeg" src="ffmpeg-server.invoked.scxml" autoforward="true"> - <param name="modelDir" expr="_x['args']['tmp-path']" /> - </invoke> - - <!-- Idle here --> - <state id="idle"> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length >= 2 && - _event.data.pathComponent[_event.data.pathComponent.length - 1].indexOf('.') !== -1"> - <!-- request for a specific format http://host/vrml/relative/path/format?query=string --> - <script> - //dump(_invokers['dirmon.vrml']); - _event.fileStruct = reqToStruct(_event.data); - </script> - <if cond="_event.fileStruct.key in models && isSupportedFormat(_event['fileStruct'].ext)"> - <!-- There is such a file available as osgb --> - <send target="#_osgvonvert.toClient"> - <param name="source" expr="models[_event['fileStruct'].key].path" /> - <param name="format" expr="_event['fileStruct'].ext" /> - <param name="pitch" expr="_event.fileStruct.pitch" /> - <param name="roll" expr="_event.fileStruct.roll" /> - <param name="yaw" expr="_event.fileStruct.yaw" /> - <param name="zoom" expr="_event.fileStruct.zoom" /> - <param name="x" expr="_event.fileStruct.x" /> - <param name="y" expr="_event.fileStruct.y" /> - <param name="z" expr="_event.fileStruct.z" /> - <param name="width" expr="_event.fileStruct.width" /> - <param name="height" expr="_event.fileStruct.height" /> - <param name="autorotate" expr="_event.fileStruct.autorotate" /> - <param name="context" expr="_event.origin" /> - </send> - <else /> - <!-- There is no such model --> - <send target="#_osgvonvert.toClient"> - <param name="source" expr="'/scratch/vrml/404.wrl'" /> - <param name="format" expr="_event['fileStruct'].ext" /> - <param name="pitch" expr="_event.fileStruct.pitch" /> - <param name="roll" expr="_event.fileStruct.roll" /> - <param name="yaw" expr="_event.fileStruct.yaw" /> - <param name="zoom" expr="_event.fileStruct.zoom" /> - <param name="x" expr="_event.fileStruct.x" /> - <param name="y" expr="_event.fileStruct.y" /> - <param name="z" expr="_event.fileStruct.z" /> - <param name="width" expr="_event.fileStruct.width" /> - <param name="height" expr="_event.fileStruct.height" /> - <param name="autorotate" expr="_event.fileStruct.autorotate" /> - <param name="context" expr="_event.origin" /> - </send> - - </if> - </transition> - - <!-- - process request for JSON datastructures - --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'models'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="models" /> - </respond> - </transition> - - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 2 && - _event.data.pathComponent[1] === 'wrls'"> - <script>//dump(_event)</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="wrls" /> - </respond> - </transition> - - <!-- request for topmost list of all files --> - <transition event="http.get" target="idle" cond=" - _event.data.pathComponent.length == 1"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <header name="Access-Control-Allow-Origin" value="*" /> - <content expr="overviewList()" /> - </respond> - </transition> - - <!-- XHR CORS preflight response --> - <transition event="http.options" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.origin"> - <header name="Access-Control-Allow-Origin" value="*" /> - <header name="Access-Control-Allow-Methods" value="GET, OPTIONS" /> - <header name="Access-Control-Allow-Headers" value="X-Requested-With" /> - </respond> - </transition> - - <transition event="ws.*" target="idle"> - <script>dump(_event);</script> - <send targetexpr="_event.origin" type="websocket"> - <content expr="_event" /> <!-- reply with event --> - </send> - </transition> - - <transition event="render.done" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" valueexpr="_event.data.movie.mimeType" /> - <header name="Content-Disposition" valueexpr="'attachment; filename=' + _event.data.filename" /> - <content expr="_event.data.movie" /> - </respond> - </transition> - - <transition event="send.codecs" target="idle"> - <script>//dump(_event);</script> - <respond status="200" to="_event.data.context"> - <header name="Connection" value="close" /> - <header name="Content-Type" value="application/json" /> - <content expr="_event.data.codecs" /> - </respond> - </transition> - - </state> - </state> - <state id="final" final="true" /> -</scxml> |
