# 3D Rotation Viewer - noob question

88 views

### Gid

Nov 5, 2011, 3:44:58 PM11/5/11
to UIZE JavaScript Framework Group
hi

i'm trying to change this line of code

/*** initialization ***/
2700,Uize.Curve.easeInOutPow (4))});

is there a way to setup infinite spin for the 3D Rotation Viewer ??

### Ben Ilegbodu

Dec 21, 2011, 2:42:24 PM12/21/11
Well if you want infinite fade, one way you can accomplish it is by continuously calling the spin method w a set interval that matches the duration of the spin:

/*** create the Uize.Widget instance ***/
'rotationViewer',
Uize.Widget,
{
html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);

/*** wire up the drag widget with events for updating rotation degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}

/*** function for animating spin ***/
function spin (degrees,duration,curve) {
}

/*** initialization ***/
Uize.Node.wire (
window,
function () {
setInterval(
function() { spin (360,2700,Uize.Curve.linear (4)) },
2700
)
});

You may noticed that I changed 'Uize.Widget.Drag' to just 'Uize.Widget' since if it has infinite spin, you shouldn't want dragging anymore.  I also got rid of all the other code relating to handling dragging.

I've also attached the HTML file of the full example page w/ "infinite" rotate.

Ben Ilegbodu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Hometown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/

God bless you!

--
UIZE JavaScript Framework...

...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908

rotation.html

### Aryan

Mar 2, 2012, 8:42:47 AM3/2/12

Any help would be appreciated.

Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Drag',
'Uize.Curve.Rubber',
'Uize.Curve.Mod'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = Uize.Widget.Page ({evaluator:function (code) {eval (code)}});//{idPrefix:'page'}
//var page = Uize.Widget.Page ();
/*** configuration variables ***/
var
totalFrames = 72,
frameUrlTemplate =
'http://www.apple.com/html5/showcase/threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg'
;

/*** state variables ***/
var
rotation = 0,
lastFrameNo = -1,
dragStartRotation
;

/*** create the Uize.Widget.Drag instance ***/

'rotationViewer',
Uize.Widget.Drag,
{
releaseTravel:function (speed) {
var
deceleration = 5000, // measured in pixels/s/s
duration = speed / deceleration
;
return {
duration:duration,
distance:Math.round (speed * duration / 2),
curve:function (_value) {return 1 - (_value = 1 - _value) * _value}
};
},

html:function (input) {
var
htmlChunks = [],
frameNodeIdPrefix = input.idPrefix + '-frame'
;
for (var frameNo = 0; ++frameNo <= totalFrames;) {
htmlChunks.push (
'<img' +
' id="' + frameNodeIdPrefix + frameNo + '"' +
' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +
'/>'
);
}
return htmlChunks.join ('');
},
built:false
}
);

/*** wire up the drag widget with events for updating rotation degree ***/
function updateRotation (newRotation) {
rotation = ((newRotation % 360) + 360) % 360;
var frameNo = 1 + Math.round (rotation / 360 * (totalFrames - 1));
if (frameNo != lastFrameNo) {
rotationViewer.showNode ('frame'+ lastFrameNo,false);
rotationViewer.showNode ('frame'+ (lastFrameNo = frameNo));
}
}
rotationViewer.wire ({
'Drag Start':function () {dragStartRotation = rotation},
'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}

});

/*** function for animating spin ***/
function spin (degrees,duration,curve) {
}