diff options
Diffstat (limited to 'apps/samples')
-rw-r--r-- | apps/samples/vrml/ffmpeg-server.invoked.scxml (renamed from apps/samples/vrml/ffmpeg-server.scxml) | 1 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.html | 5 | ||||
-rw-r--r-- | apps/samples/vrml/viewer.js | 191 | ||||
-rw-r--r-- | apps/samples/vrml/vrml-server.scxml | 20 |
4 files changed, 160 insertions, 57 deletions
diff --git a/apps/samples/vrml/ffmpeg-server.scxml b/apps/samples/vrml/ffmpeg-server.invoked.scxml index 1fd4038..bac0792 100644 --- a/apps/samples/vrml/ffmpeg-server.scxml +++ b/apps/samples/vrml/ffmpeg-server.invoked.scxml @@ -201,6 +201,7 @@ job.frames.push(frame); } } + job.totalFrames = job.frames.length; requests[_event.origin] = {}; requests[_event.origin].job = job; //]]> diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html index 6e139e7..77bee0a 100644 --- a/apps/samples/vrml/viewer.html +++ b/apps/samples/vrml/viewer.html @@ -22,6 +22,11 @@ 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); diff --git a/apps/samples/vrml/viewer.js b/apps/samples/vrml/viewer.js index 583f06f..a3f3b70 100644 --- a/apps/samples/vrml/viewer.js +++ b/apps/samples/vrml/viewer.js @@ -96,9 +96,10 @@ function VRMLViewer(element, params) { codec !== "y41p" && codec !== "yuv4") continue; + console.log(codec); selectElem.options.push({ label: result.video[codec].longName, value: codec }); if (codec === "mpeg4") - selectElem[selectElem.options.length - 1].selected = true; + selectElem.options[selectElem.options.length - 1].selected = true; } } }); @@ -107,17 +108,26 @@ function VRMLViewer(element, params) { this.refreshServer = function(server) { self.serverURL = server; self.localStorage.put("vrmlServer", self.serverURL, null); -// self.progressElem.appendChild(self.progress.domNode); -// self.progress.start(); + 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(); } + var allItems = self.fileStore.query(); + for (var i = 0; i < allItems.total; i++) { + self.fileStore.remove(allItems[i].id); + } + }, load: function(result) { -// self.progress.stop(); - for (id in self.fileStore.query) { - self.fileStore.remove(id); + if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); } + 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); } (function fillstore(tree, parentId) { for (key in tree) { @@ -126,7 +136,7 @@ function VRMLViewer(element, params) { } else { self.fileStore.add({id:parentId+key, name:key, parent:parentId}); fillstore(tree[key], parentId+key); - } + } } } (result.models, "root", "")); } @@ -172,7 +182,7 @@ function VRMLViewer(element, params) { "dijit/Tree", "dijit/form/TextBox", "dijit/form/Button", - "dojox/mobile/ProgressIndicator", + "dojox/widget/Standby", "dijit/form/DropDownButton", "dijit/TooltipDialog", "dojo/dnd/Moveable", @@ -192,7 +202,7 @@ function VRMLViewer(element, params) { Tree, TextBox, Button, - ProgressIndicator, + Standby, DropDownButton, TooltipDialog, Moveable, @@ -212,7 +222,6 @@ function VRMLViewer(element, params) { self.element = element; self.xhr = xhr; - self.progress = new ProgressIndicator({size:40, center:false}); self.localStorage = dojox.storage.manager.getProvider(); self.localStorage.initialize(); @@ -286,9 +295,10 @@ function VRMLViewer(element, params) { // fetch special dom nodes for content self.messageBox = dojo.query("div.messages", element)[0]; self.imgElem = dojo.query("img.model", element)[0]; - self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0]; - self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0]; - self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0]; + + /** + * === POSE MANIPULATION AND RESET ==================== + */ self.resetButtonElem = dojo.query("button.resetButton", element)[0]; self.progressElem = dojo.query("div.progress", element)[0]; @@ -407,6 +417,12 @@ function VRMLViewer(element, params) { 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 @@ -480,6 +496,16 @@ function VRMLViewer(element, params) { 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 ) { @@ -506,15 +532,34 @@ function VRMLViewer(element, params) { self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip }); self.filesDropDownElem.appendChild(self.filesDropDown.domNode); - self.movieDropDownContent = domConst.toDom('<div style="overflow: auto; max-height: 420px;" />'); + 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.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; + avatarPose.width = 60; + avatarPose.height = 60; var avatarImgUrl = urlSuffixForPose(avatarPose); avatar.innerHTML = '<img src=' + self.imageURL + avatarImgUrl + ' /> '; item.srcEcc = "VRMLViewer"; @@ -524,7 +569,6 @@ function VRMLViewer(element, params) { item.pose = avatarPose; return {node: avatar, data: item, type: item.type}; } else { - // var thumb = dojo.create( 'div', { innerHTML: item.data }); // when added to list var thumb = domConst.toDom("\ @@ -535,6 +579,7 @@ function VRMLViewer(element, params) { </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>\ @@ -547,6 +592,23 @@ function VRMLViewer(element, params) { 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, @@ -555,21 +617,33 @@ function VRMLViewer(element, params) { }, relFrameLengthElem); item.relTransitionLengthSlider = new HorizontalSlider({ - value: 80, + value: 100, title: "Relative Duration of Transition", style: "width:150px;" }, relTransitionLengthElem); removeImgElem.onclick = function() { - self.addToMovieHandler.forInItems(function(obj, key, ctx) { - if (obj.data === item) { - // haha - what a mess! - self.addToMovieHandler.selectNone(); - self.addToMovieHandler.selection[key] = obj; - self.addToMovieHandler.deleteSelectedNodes(); - } - }); + 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); @@ -590,31 +664,18 @@ function VRMLViewer(element, params) { } }; - self.addToMovieHandler = new Source(self.movieDropDownContent, {copyOnly: true, creator: self.createMovieThumb}); + 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.movieDropDownContent.appendChild(dojo.create( 'div', { - innerHTML: "Format: ", - style: "margin-right: 1em; margin-left: 0.2em; display:inline;" - })); - self.movieDropDownContent.appendChild(self.movieFormatSelection.domNode); - self.movieDurationSpinner = new NumberSpinner({ - value: 10, - smallDelta: 1, - style: "width: 40px", - constraints: { min:0, places:0 }, - }); - self.movieDropDownContent.appendChild(self.movieDurationSpinner.domNode); - self.movieDropDownContent.appendChild(dojo.create( 'div', { - innerHTML: "sec ", - style: "margin-right: 1em; margin-left: 0.2em; display:inline;" - })); + 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, @@ -622,11 +683,6 @@ function VRMLViewer(element, params) { style: "width: 60px", constraints: { min:40, places:0 }, }); - self.movieDropDownContent.appendChild(self.movieHeightSpinner.domNode); - self.movieDropDownContent.appendChild(dojo.create( 'div', { - innerHTML: "x", - style: "margin-right: 0.5em; margin-left: 0.5em; display:inline;" - })); self.movieWidthSpinner = new NumberSpinner({ value: 600, @@ -634,11 +690,12 @@ function VRMLViewer(element, params) { style: "width: 60px", constraints: { min:40, places:0 }, }); - self.movieDropDownContent.appendChild(self.movieWidthSpinner.domNode); self.movieCreateButton = new Button({ label: "Create", + disabled: true, onClick: function(){ + var form = document.createElement("form"); form.setAttribute("method", "post"); @@ -670,12 +727,39 @@ function VRMLViewer(element, params) { 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.movieDropDownContent.appendChild(self.movieCreateButton.domNode); + + 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 }); @@ -689,8 +773,13 @@ function VRMLViewer(element, params) { 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); diff --git a/apps/samples/vrml/vrml-server.scxml b/apps/samples/vrml/vrml-server.scxml index 20d63a6..5ee28dd 100644 --- a/apps/samples/vrml/vrml-server.scxml +++ b/apps/samples/vrml/vrml-server.scxml @@ -129,13 +129,12 @@ <!-- 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 " + _event.fileStruct.key + "\n"); + 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('/'); @@ -155,14 +154,20 @@ _event.key = keyForFile(_event.data.file); if (_event.name === "file.existing" || _event.name === "file.added") { wrls[_event.key] = _event.data.file; - print("Inserting wrl " + _event.data.file.path + " from " +_event.data.file.relDir + " at " + _event.key + "\n"); + 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]; - print("Deleting wrl " + _event.data.file.path + " from " +_event.data.file.relDir + " at " + _event.key + "\n"); + delete models[_event.key]; + print("Deleting wrl " + _event.data.file.path + " from " + _event.data.file.relDir + " at " + _event.key + "\n"); } </script> - <if cond="models && + <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" /> @@ -186,6 +191,7 @@ <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.mimetype" /> <content expr="_event.data.content[_event.data.format]" /> </respond> <else /> @@ -198,7 +204,7 @@ </invoke> <!-- Start a nested SCXML interpreter to create movies from the images --> - <invoke type="scxml" id="scxml.ffmpeg" src="ffmpeg-server.scxml" autoforward="true"> + <invoke type="scxml" id="scxml.ffmpeg" src="ffmpeg-server.invoked.scxml" autoforward="true"> <param name="modelDir" expr="_x['args']['tmp-path']" /> </invoke> @@ -209,12 +215,14 @@ _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" /> |