summaryrefslogtreecommitdiffstats
path: root/apps/samples
diff options
context:
space:
mode:
authorStefan Radomski <radomski@tk.informatik.tu-darmstadt.de>2013-10-10 08:21:29 (GMT)
committerStefan Radomski <radomski@tk.informatik.tu-darmstadt.de>2013-10-10 08:21:29 (GMT)
commita2c45baa7a14e8caa2a8f1c3937a03f4ba9fd8d4 (patch)
tree37c2dafd11493a2221af8f616dadf465e304a5c3 /apps/samples
parent525daee195c5593f077d837a689f2c5d26f91fb0 (diff)
downloaduscxml-a2c45baa7a14e8caa2a8f1c3937a03f4ba9fd8d4.zip
uscxml-a2c45baa7a14e8caa2a8f1c3937a03f4ba9fd8d4.tar.gz
uscxml-a2c45baa7a14e8caa2a8f1c3937a03f4ba9fd8d4.tar.bz2
Base64 and MD5 for Blobs
Diffstat (limited to 'apps/samples')
-rw-r--r--apps/samples/miles/miles-connect.html52
-rw-r--r--apps/samples/miles/miles-disconnect.html52
-rw-r--r--apps/samples/miles/miles.html27
-rw-r--r--apps/samples/miles/miles.js703
-rw-r--r--apps/samples/miles/miles.scxml63
-rw-r--r--apps/samples/miles/test1.jpegbin0 -> 10996 bytes
-rw-r--r--apps/samples/miles/test2.jpegbin0 -> 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
new file mode 100644
index 0000000..e174f89
--- /dev/null
+++ b/apps/samples/miles/test1.jpeg
Binary files differ
diff --git a/apps/samples/miles/test2.jpeg b/apps/samples/miles/test2.jpeg
new file mode 100644
index 0000000..aca2300
--- /dev/null
+++ b/apps/samples/miles/test2.jpeg
Binary files differ
generated by cgit v0.12 at 2024-07-15 16:09:06 (GMT)