diff options
Diffstat (limited to 'apps/samples/miles')
-rw-r--r-- | apps/samples/miles/miles-connect.html | 52 | ||||
-rw-r--r-- | apps/samples/miles/miles-disconnect.html | 52 | ||||
-rw-r--r-- | apps/samples/miles/miles.html | 27 | ||||
-rw-r--r-- | apps/samples/miles/miles.js | 703 | ||||
-rw-r--r-- | apps/samples/miles/miles.scxml | 63 | ||||
-rw-r--r-- | apps/samples/miles/test1.jpeg | bin | 0 -> 10996 bytes | |||
-rw-r--r-- | apps/samples/miles/test2.jpeg | bin | 0 -> 40332 bytes |
7 files changed, 147 insertions, 750 deletions
diff --git a/apps/samples/miles/miles-connect.html b/apps/samples/miles/miles-connect.html deleted file mode 100644 index ae5f77e..0000000 --- a/apps/samples/miles/miles-connect.html +++ /dev/null @@ -1,52 +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"> - - <style type="text/css"> - </style> - - <script type="text/javascript"> - // dojoConfig = { - // async : false, - // isDebug : true, - // debugAtAllCosts : true, - // } - </script> - - <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script> - <script type="text/javascript" src="viewer.js"></script> - - <script type="text/javascript"> - require(["dojo/domReady!", "dojo"], function(dom, dojo) { - var jsonHere = { - "email": "someone@here.com", - "reflectorIP": "88.131.107.12", - "problemName": "Fancy problem" - } - var xhr = dojo.require("dojo/_base/xhr"); - xhr.post({ - // The URL to request - url: "http://localhost:8080/miles/connect", - handleAs:"json", - postData: dojo.toJson(jsonHere), - headers:{ - "X-Requested-With": null, - "Content-Type": "application/json", - }, - load: function(result) { - - } - }); - }); - </script> - </head> - <body class="tundra"> - <div style="width: 600px; height: 400px"> - <div id="scene1"></div> - </div> - </body> -</html> diff --git a/apps/samples/miles/miles-disconnect.html b/apps/samples/miles/miles-disconnect.html deleted file mode 100644 index 30f5b39..0000000 --- a/apps/samples/miles/miles-disconnect.html +++ /dev/null @@ -1,52 +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"> - - <style type="text/css"> - </style> - - <script type="text/javascript"> - // dojoConfig = { - // async : false, - // isDebug : true, - // debugAtAllCosts : true, - // } - </script> - - <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script> - <script type="text/javascript" src="viewer.js"></script> - - <script type="text/javascript"> - require(["dojo/domReady!", "dojo"], function(dom, dojo) { - var jsonHere = { - "email": "someone@here.com", - "reflectorIP": "88.131.107.12", - "problemName": "Fancy problem" - } - var xhr = dojo.require("dojo/_base/xhr"); - xhr.post({ - // The URL to request - url: "http://localhost:8080/miles/disconnect", - handleAs:"json", - postData: dojo.toJson(jsonHere), - headers:{ - "X-Requested-With": null, - "Content-Type": "application/json", - }, - load: function(result) { - - } - }); - }); - </script> - </head> - <body class="tundra"> - <div style="width: 600px; height: 400px"> - <div id="scene1"></div> - </div> - </body> -</html> diff --git a/apps/samples/miles/miles.html b/apps/samples/miles/miles.html new file mode 100644 index 0000000..019ead4 --- /dev/null +++ b/apps/samples/miles/miles.html @@ -0,0 +1,27 @@ +<!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"> + + <style type="text/css"> + </style> + + <script type="text/javascript"> + </script> + + <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script> + <script src="miles.js"></script> + + <script type="text/javascript"> + require(["dojo/domReady!"], function(dom) { + var milesSession = new Miles("miles1"); + }); + </script> + </head> + <body class="tundra"> + <div style="width: 600px; height: 400px"> + <div id="miles1"></div> + </div> + </body> +</html> diff --git a/apps/samples/miles/miles.js b/apps/samples/miles/miles.js index a3cdcae..b9348e8 100644 --- a/apps/samples/miles/miles.js +++ b/apps/samples/miles/miles.js @@ -1,664 +1,131 @@ function Miles(element, params) { - // private attributes var self = this; // private instanceId if (!Miles.instances) Miles.instances = 0; + + // public attributes this.instanceId = Miles.instances++; + this.element = element; + this.connected = false; + this.imageIteration = 0; + + // private attributes + var scxmlURL = "127.0.0.1:8080" + var reflectorIp = "127.0.0.1" + var email = "me@somehost.de"; + var problemName = "some really hard problem"; - // public attributes - this.reflectorURL = "127.0.0.1"; + // override with parameters if given this.params = params; - - // privileged public methods - this.foo = function() { - }; - - // privileged private methods - var bar = function(param1, param2) { + if (params && params.scxmlURL) scxmlURL = params.scxmlURL; + if (params && params.reflectorIp) reflectorIp = params.reflectorIp; + if (params && params.email) email = params.email; + if (params && params.problemName) problemName = params.problemName; + + this.connect = function() { + self.xhr.post({ + // The URL to request + url: "http://" + scxmlURL + "/miles/connect", + handleAs:"json", + postData: dojo.toJson({ + reflectorIp: reflectorIp, + email: email, + problemName: problemName + }), + headers:{ + "X-Requested-With": null, + "Content-Type": "application/json", + }, + load: function(result) { + // we expect nothing in return + self.connected = true; + // trigger continuously loading the image + refreshImage(); + } + }); + } + + var refreshImage = function() { + self.xhr.get({ + // The URL to request + url: "http://" + scxmlURL + "/miles/image", + handleAs:"text", + postData: dojo.toJson({ + reflectorIp: reflectorIp, + email: email, + problemName: problemName + }), + headers:{ + "X-Requested-With": null, + "Content-Type": "application/json", + }, + load: function(result) { + self.pictureElem.src = "data:image/jpeg;base64," + result; + if (self.connected) { + self.messageElem.innerHTML = self.imageIteration++; + refreshImage(); + } + } + }); + }; - // start of actual class after we fetched all dojo thingies require(["dojo/dom-construct", "dojo/_base/xhr", - "dojo/dom", - "dojo/on", - "dojox/storage", - "dojo/store/Memory", - "dojo/store/Observable", - "dijit/tree/ObjectStoreModel", - "dijit/Tree", - "dijit/form/TextBox", - "dijit/form/Button", - "dojox/widget/Standby", + "dojo/dom", "dijit/form/DropDownButton", "dijit/TooltipDialog", - "dojo/dnd/Moveable", - "dojo/ready", - "dojo/dnd/Source", - "dijit/form/HorizontalSlider", - "dijit/form/Select", - "dijit/form/NumberSpinner"], + "dojo/ready"], function(domConst, xhr, - dom, - on, - storage, - Memory, - Observable, - ObjectStoreModel, - Tree, - TextBox, - Button, - Standby, + dom, DropDownButton, TooltipDialog, - Moveable, - ready, - Source, - HorizontalSlider, - Selector, - NumberSpinner) { - + ready) { ready(function() { + self.xhr = xhr; if (typeof(element) === 'string') { element = dom.byId(element); } - - 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>\ + <img class="picture" src="test.jpeg"></img>\ <div style="position: absolute; left: 10px; top: 10px">\ <table></tr>\ - <td class="filesDropDown" style="vertical-align: middle"></td>\ - <td>\ - <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>\ + <td class="control" style="vertical-align: middle"></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>\ </td>\ - <td valign="top" height="100%">\ - </td>\ </tr>\ <tr>\ - <td colspan="2"><div class="messages"></div></td>\ + <td valign="top">\ + <div class="messages" style="position: relative; padding: 0px">\ + </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; - }; - - /** - * === FILES DROPDOWN ==================== - */ - - self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; - - 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.imageURL + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imageURL + avatarImgUrl; - item.imageURL = self.imageURL; - 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, [ { } ]); - - // setup fileStore for tree list - 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.imageURL = 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')"}; - - }); - - if (self.params && self.params.serverURL) - self.serverURL = self.params.serverURL; - var savedServerURL = self.localStorage.get("vrmlServer"); - if (savedServerURL && !self.serverURL) { - self.serverURL = savedServerURL; - self.refreshServer(savedServerURL); - } - - 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); - - /** - * === MOVIE DROPDOWN ==================== - */ - - 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.pictureElem = dojo.query("img.picture", element)[0]; + self.controlElem = dojo.query("td.control", element)[0]; + self.messageElem = dojo.query("div.messages", element)[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.imageURL + avatarImgUrl + ' /> '; - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imageURL + avatarImgUrl; - item.imageURL = self.imageURL; - 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.imageURL + thumbImgUrl; - // removeImgElem.src = self.resRoot + 'img/close.png'; - - item.srcEcc = "VRMLViewer"; - item.iconPoseUrl = self.imageURL + thumbImgUrl; - item.imageURL = self.imageURL; - 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); + // the control dropdown button + self.controlDropDownContent = domConst.toDom('<div />'); + self.controlToolTip = new TooltipDialog({ content:self.controlDropDownContent, style:"max-height:320px"}); + self.controlDropDown = new DropDownButton({ label: "Connect", dropDown: self.controlToolTip }); + self.controlElem.appendChild(self.controlDropDown.domNode); - self.movieHeightSpinner = new NumberSpinner({ - value: 400, - smallDelta: 1, - style: "width: 60px", - constraints: { min:40, places:0 }, - }); + self.connect(); - 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, - imageURL: obj.data.imageURL, - 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); - - - 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.imageURL, self.params.pose, self.params.serverURL); - - }); - }); - - + }) + }); } diff --git a/apps/samples/miles/miles.scxml b/apps/samples/miles/miles.scxml index 524729f..7014502 100644 --- a/apps/samples/miles/miles.scxml +++ b/apps/samples/miles/miles.scxml @@ -4,48 +4,55 @@ <invoke type="miles" id="miles"> <param name="foo" expr="'asdf'" /> <finalize> - <script> - </script> + <if cond="_event.data.origin"> + <!-- log label="Reply-length" expr="_event.data.base64.length" / --> + <respond status="200" to="_event.data.origin"> + <header name="Content-Type" value="text/ascii" /> + <content expr="_event.data.base64" /> + </respond> + </if> </finalize> </invoke> <state id="idle"> - <!-- XHR CORS preflight response --> + <!-- XHR CORS preflight respond --> <transition event="http.options" target="idle"> - <script>dump(_event);</script> - <response status="200" requestexpr="_event.origin"> + <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" /> - </response> + </respond> </transition> - <transition event="http.post" target="idle"> - <script>dump(_event);</script> + <transition event="http.*" target="idle"> + <script>//dump(_event);</script> <if cond="_event.data.pathComponent[1] === 'session'"> - <response status="200" requestexpr="_event.origin" /> + <respond status="200" to="_event.origin" /> + + <elseif cond="_event.data.pathComponent[1] === 'connect'" /> + <send target="#_miles" event="connect"> + <param name="reflectorIP" expr="_event.data.content.reflectorIP" /> + <param name="email" expr="_event.data.content.email" /> + <param name="problemName" expr="_event.data.content.problemName" /> + </send> + <respond status="200" to="_event.origin" /> - <elseif cond="_event.data.pathComponent[1] === 'connect'"> - <send target="#_miles" event="connect"> - <param name="reflectorIP" expr="_event.data.content.reflectorIP" /> - <param name="email" expr="_event.data.content.email" /> - <param name="problemName" expr="_event.data.content.problemName" /> - </send> - <response status="200" requestexpr="_event.origin" /> - - </elseif> - <elseif cond="_event.data.pathComponent[1] === 'disconnect'"> - <send target="#_miles" event="disconnect"> - <param name="reflectorIP" expr="_event.data.content.reflectorIP" /> - <param name="problemName" expr="_event.data.content.problemName" /> - </send> - <response status="200" requestexpr="_event.origin" /> + <elseif cond="_event.data.pathComponent[1] === 'disconnect'" /> + <send target="#_miles" event="disconnect"> + <param name="reflectorIP" expr="_event.data.content.reflectorIP" /> + <param name="problemName" expr="_event.data.content.problemName" /> + </send> + <respond status="200" to="_event.origin" /> - </elseif> - <else> - <response status="404" requestexpr="_event.origin" /> + <elseif cond="_event.data.pathComponent[1] === 'image'" /> + <send target="#_miles" event="image"> + <param name="origin" expr="_event.origin" /> + </send> + + <else /> + <respond status="404" to="_event.origin" /> - </else> </if> </transition> </state> diff --git a/apps/samples/miles/test1.jpeg b/apps/samples/miles/test1.jpeg Binary files differnew file mode 100644 index 0000000..e174f89 --- /dev/null +++ b/apps/samples/miles/test1.jpeg diff --git a/apps/samples/miles/test2.jpeg b/apps/samples/miles/test2.jpeg Binary files differnew file mode 100644 index 0000000..aca2300 --- /dev/null +++ b/apps/samples/miles/test2.jpeg |