3D Rotation HELP!!

254 views
Skip to first unread message

Scott Cornell

unread,
Mar 13, 2012, 5:06:51 PM3/13/12
to UIZE JavaScript Framework Group
I am a 3D Animator. Currently I do not work with code what so ever.

Is there anywhere that I can simply input my image sequence and get
the simple drag or touch navigation found here?

http://www.uize.com/examples/3d-rotation-viewer.html?tour=all

As of right now the default navigation is perfect.

Thank you in advance for your help!
Scott

Aryan Duntley

unread,
Mar 14, 2012, 4:16:37 PM3/14/12
to ui...@googlegroups.com
Yup.  Just download the package and put the script below in your page.  Take a look at the highlighted areas, they are the things you can change or modify to customize it to your needs.  First is the CSS.  You will need everything there except for the border and the margin (you can also change the cursor if you wanted).  Oh, you can change the width and height to meet the dimensions of your images.  The links in green are not necessary, if you remove those, remove the associated Uize as well.  Lastly in blue: http://www.apple.com/html5/showcase/threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg, this is the url where all the images are stored.  This can be any url (And if you are calling from your server it can even be something like: /images/image_1.jpg.  NOTE:  This code: ' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +'/>' counts the images starting at 10 and going to 72.    Also, below in blue is totalFrames=72.  This is the max num of the #frame variable above in blue.  These can all be adjusted.  To calculate starting from frame 1, remove the (frameNo < 10 ? '0' : '')  This piece of code simply determines whether the frame number is less that ten.  If it is, it adds a zero to the number (so, 1 would be 10).  This is done only one time because the code increments plus one everytime until it hits the max num (in this case 72), then it resets to 0 and one is incremented, then it goes into the code and 1 is less than ten so it becomes 1 + "0" = 10, then all incrementations are greater than ten, etc...  Anyway.  If you want your numbers to start from 1 remove the line of code I mentioned above.  Keep in mind that the max number here is 72, but there are actually only 62 images in this example (because we are actually starting from 10 instead of 1).  You can name your images whatever you want, but make sure they are numbered from either 1 to whatever or 10 to whatever.  Then however many frames you decide to use, set that number in totalFrames=72,  where the 72 is instead, the number of frames you have.  If you are starting from one, remove (frameNo < 10 ? '0' : ''), and if you want to avoid messing with code too much, just start from 10.  Then the url of your image should have a number somewhere, so lets say your url is images/pictures/MyRoundImage_1.jpg  Now you have to change http://www.apple.com/html5/showcase/threesixty/images/optimized/Seq_v04_640x378_[#frame].jpg to this instead

images/pictures/MyRoundImage_[#frame].jpg
 and change this
 ' src="' + Uize.substituteInto (frameUrlTemplate,{frame:(frameNo < 10 ? '0' : '') + frameNo}) +'"' +'/>'
to
 ' src="' + Uize.substituteInto (frameUrlTemplate,{frame: frameNo}) +'"' +'/>'

<style type="text/css">
.rotationViewer {position:relative;    width:640px;height:378px;border-style:solid;border-width:1px;margin:auto;margin-bottom:10px;cursor:pointer;}
.rotationViewer img {position:absolute;    visibility:hidden;left:0;top:0;width:100%;height:100%;}
</style>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
    <div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div>
    <div style="text-align:center;"><p>
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (-360,2700,Uize.Curve.easeInOutPow (4))">360 counter-clockwise</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (1080,4000,Uize.Curve.easeInOutPow (4))">3 spins</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))">spin with bounce</a> /
        <a href="javascript://" class="linkedJs buttonLink" title="spin (360,4000,Uize.Curve.Mod.bend (Uize.Curve.Rubber.easeOutElastic (.1),3))">spin with elasticity</a></p>
    </div>

<script type="text/javascript">

Uize.module ({
    required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod',
        'Uize.Widget.CollectionItem.Zooming',
        'Uize.Widget.MagView'
    ],
    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 ***/
            var rotationViewer = page.addChild (
                'rotationViewer',
                Uize.Widget.Drag,
                {
                    cancelFade:{duration:5000,curve:Uize.Curve.Rubber.easeOutBounce ()},
                    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 + '" class="jabawa"' +
                                    ' 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) {
                Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
            }
           
           
     //widgetClass:'Uize.Widget.HoverFader',
    //nodes:{root:'menu1',className:/\bmenuLink\b/}

        /*** initialization ***/
            Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
            //Uize.Node.wire ('rotationViewer','click',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});

        /*** wire up the page widget ***/
            page.wireUi ();
    page.wireNode (Uize.Node.find ({tagName:'a',className:/\blinkedJs\b/}), 'click',function (){page.evaluator (this.title || this.innerHTML)});
    page.wireNode (Uize.Node.find ({tagName:'img',className:/\bjabawa\b/}), 'click',function (){alert("hey there");});
       
    }
});
/*CONTINUOUS ROTATION
      Uize.Node.wire (
            window,
            'load',
            function () {
                  setInterval(
                        function() { spin (360,2700,Uize.Curve.linear (4)) },
                        2700
                  )
            });*/

</script>

</body>

Scott

--
UIZE JavaScript Framework...

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

UIZE JavaScript Framework Google Group...

...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Scott Cornell

unread,
Mar 14, 2012, 5:05:17 PM3/14/12
to ui...@googlegroups.com
WHOA!!! Thanks!! I'll get back to you with the results. Thank you so much for your time and help.
--
Sincerely,
Aryan Duntley

Scott Cornell

unread,
Mar 15, 2012, 4:45:43 PM3/15/12
to ui...@googlegroups.com
Alright... here's what I've got. I think I have down what you so eloquently explained but with no resolve yet... I'm thinking it may be syntax.

Your thoughts? Thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

  <title>3D Product Viewer</title>

  <meta name="keywords" content="">

  <meta name="description" content="">

  <link rel="alternate"

 type="application/rss+xml" title="" href="">

  <link rel="stylesheet"

 href="../css/page.css">

  <link rel="stylesheet"

 href="../css/page.example.css">

  <style type="text/css">

.rotationViewer {

position:relative;

width:600px;

height:600px;

}

.rotationViewer img {

position:absolute;

visibility:hidden;

left:0;

top:0;

width:100%;

height:100%;

}

  </style>

</head>

<body>

<script type="text/javascript"

 src="js/Uize.js"></script>

<div id="page_rotationViewer"

 class="rotationViewer insetBorderColor"></div>

<script type="text/javascript">

Uize.module ({

required:[

'Uize.Widget.Page',

'Uize.Widget.Drag',

'Uize.Fade.xFactory',

'Uize.Curve.Rubber',

'Uize.Curve.Mod',

'Uize.Widget.CollectionItem.Zooming',

'Uize.Widget.MagView'

],

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 = 31,

frameUrlTemplate ='images/CAShield01_[#frame].png';

' src="' + Uize.substituteInto (frameUrlTemplate,{frame: frameNo}) +'"' +

page.wireNode (Uize.Node.find ({tagName:'img',className:/\bjabawa\b/}), 'click',function (){alert("hey there");});

}

});

/*CONTINUOUS ROTATION

Uize.Node.wire (

window,

'load',

function () {

setInterval(

function() { spin (360,2700,Uize.Curve.linear (4)) },

2700

)

});*/

</script>

</body>

</html>

Aryan Duntley

unread,
Mar 15, 2012, 5:27:42 PM3/15/12
to ui...@googlegroups.com
I don't know why you have carriage returns all over the place,but if you have that in your code, it's gonna cause all sorts of issues.  Use the code below.  It works fine.  Then you can go ahead and add your css around it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.rotationViewer {position:relative;    width:640px;height:378px;border-style:solid;border-width:0px;margin:auto;margin-bottom:10px;cursor:pointer;}

.rotationViewer img {position:absolute;    visibility:hidden;left:0;top:0;width:100%;height:100%;}
</style>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
    <div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div>

<script type="text/javascript">

Uize.module ({
    required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod',
        'Uize.Widget.CollectionItem.Zooming',
        'Uize.Widget.MagView'
    ],
    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 = 32,
                                    ' id="' + frameNodeIdPrefix + frameNo + '"' +

                                    ' src="' + Uize.substituteInto (frameUrlTemplate,{frame: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) {
                Uize.Fade.fade (updateRotation,rotation,rotation + degrees,duration,{quantization:1,curve:curve});
            }
        /*** initialization ***/
            Uize.Node.wire (window,'load',function () {spin (360,2700,Uize.Curve.easeInOutPow (4))});
        /*** wire up the page widget ***/
            page.wireUi ();
    }
});

</script>

</body>
</html>



--
UIZE JavaScript Framework...
 
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
 
UIZE JavaScript Framework Google Group...
 
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Scott Cornell

unread,
Mar 15, 2012, 6:19:04 PM3/15/12
to ui...@googlegroups.com
Thank you very much for your patience and help.
Sorry about the carriage returns. I wasn't using a very good editor. I think I have resolved that issue.
I'm not using any CSS at all. Do I need to? From your posts it seems as though I don't, so I removed that portion with some positive results.
I'm using .pngs and the filenames have 2 leading zeroes prior to the frame #. Example: CAShield01_0001.png Could either of these be posing a problem?
With that here's what I have now, with better results but something is still up.

Current Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
</style>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<script type="text/javascript">

Uize.module ({
    required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod',
        'Uize.Widget.CollectionItem.Zooming',
        'Uize.Widget.MagView'
    ],
    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 = 31,
frameUrlTemplate ='images/CAShield01_00[#frame].png';

Aryan Duntley

unread,
Mar 15, 2012, 7:05:55 PM3/15/12
to ui...@googlegroups.com
Well, it seems as though you have adjusted the url correctly to account for the two extra zeroes, Is it not working correctly?  I tested the code I sent to you with dummy images labeled in the manner you had them and it all worked fine.  Let me know what problems are arising.  Usually, there simply won't be anything displayed.  If that is the case there may be some dumb error like missing a comma or semicolon.  The code I had worked fine.  To test with the extra zeroes, first use the last bit of code I sent you, unedited.  Make sure that the Uize.js file is in a subfolder called js (hence the source for the script js/Uize.js...).  Then make sure you also have a folder called images and that all of the images are there.  You can make, say 10 images without the 00 in front and then test.  If you see (for a second) a few images appear and then disappear, that means that the code is working.  The reason they will disappear is because the code tells the program to run a 360 turn through all of the images on load.  To keep them from disappearing you can change your total Frames to 10 or some small number in order to see that the pictures are actually appearing.  If they are, then you are pretty much there.  If not, there is either a syntax error, the folders and files are not in the correct place or you are not calling them correctly, or the image names are incorrect.  Let me know what is happening specifically.

--
UIZE JavaScript Framework...
 
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
 
UIZE JavaScript Framework Google Group...
 
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Aryan Duntley

unread,
Mar 15, 2012, 7:06:17 PM3/15/12
to ui...@googlegroups.com
PS. If you do not have a good text editor, download notepad++ free.
--
Sincerely,
Aryan Duntley

Scott Cornell

unread,
Mar 16, 2012, 9:30:02 AM3/16/12
to ui...@googlegroups.com
They are appearing and they do disappear quickly afterward and a single broken image icon appeasrs. They appear in a grid like fashion not as an animation. see images below.

 
 

Mark Laurel

unread,
Mar 16, 2012, 2:53:52 PM3/16/12
to ui...@googlegroups.com
Hi guys, just wanted to add what helps me when I have page errors & have trouble finding it.

Firefox has an error console that lists errors & warnings [CTRL+ SHIFT + J] brings it up. I can
simply click on an error & it will show the line that's causing it.

Very helpful in my opinion- I believe Chrome has a similar feature.


On Fri, Mar 16, 2012 at 8:30 AM, Scott Cornell <cornel...@gmail.com> wrote:
They are appearing and they do disappear quickly afterward and a single broken image icon appeasrs. They appear in a grid like fashion not as an animation. see images below.

 
 

--

Scott Cornell

unread,
Mar 16, 2012, 4:00:29 PM3/16/12
to ui...@googlegroups.com
Marcus - 
Thanks very helpful. it helped me to realize that the leading zeroes in my first 9 frame numbers was messing things up. Once removed the initial image pops up but it looks no different than a linked image... now what?

 

Aryan Duntley

unread,
Mar 16, 2012, 5:50:03 PM3/16/12
to ui...@googlegroups.com
Looks like your javascript isn't taking effect.  That is usually the cause of that sort of display, either that or the css containersd are wrong.  Make sure you are linking correctly to your Uize.js file.  Do me a favor and copy and paste the last bit of code i sent you exactly.  Then, put all the files (the images are displaying, so there should be no problem with them) especially the Uize in the exact folders as they are listed in the code (right under the body tag).  So, you should have your html file somewere.  In the same place as that html file, you should have a folder called js.  Then inside of that js file, you should put all the Uize javascript files and the subfolders that they utilize.  Very important to have Uize.js directly inside of the js folder, along with all the dependent Uize files.

On Fri, Mar 16, 2012 at 1:00 PM, Scott Cornell <cornel...@gmail.com> wrote:
Marcus - 
Thanks very helpful. it helped me to realize that the leading zeroes in my first 9 frame numbers was messing things up. Once removed the initial image pops up but it looks no different than a linked image... now what?

 

--
UIZE JavaScript Framework...
 
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
 
UIZE JavaScript Framework Google Group...
 
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Mark Laurel

unread,
Mar 16, 2012, 6:51:02 PM3/16/12
to ui...@googlegroups.com
E Hi Scott,

I was reading through your code. My naming convention for the image sequence is a bit different from yours.

mine:


   /*** configuration variables ***/
     var
       totalFrames = 90,
       frameUrlTemplate =
         '/images/360web/scrnCap360.[#frame].png';

yours:


*** configuration variables ***/
           var
               totalFrames = 31,
frameUrlTemplate ='images/CAShield01_00[#frame].png';

I have my image sequences named scrnCap360.01.png through  scrnCap360.90.png. I originally had image sequences
1 - 9 without a leading zero (scrnCap360.1.png) & I ended up with those 9 images missing so I added them (leading zeros).
That ended up with JavaScript not functioning properly = missing images.

I would suggest changing the variable to look something like:

frameUrlTemplate = 'images/CAShield[#frame].png';

I didn't test your code as Aryan did, but in my opinion, if your still getting a grid effect instead of the rotation desired, then
the way you declared that variable may be what's throwing off the frame count for UIZE to function properly.

Also please keep in mind what Aryan mentioned about external UIZE file locations.

Hope this helps...

Mark

Scott Cornell

unread,
Mar 20, 2012, 10:42:52 AM3/20/12
to ui...@googlegroups.com
Again Thank you very much for your help.

I have attached images confirming the uize.js location and the structure of the images directory as well as the new naming convention Marcus recommended as well as the updated code.

Do I need css and if i do what do I need to install and have in the code?

var
                totalFrames = 31,
                frameUrlTemplate ='images/CAShield_[#frame].png

Scott Cornell

unread,
Mar 20, 2012, 10:43:58 AM3/20/12
to ui...@googlegroups.com
Maybe this would help the back and forth. Here's all the files.
Thanks Again!!

Aryan Duntley

unread,
Mar 20, 2012, 6:41:25 PM3/20/12
to ui...@googlegroups.com
Dammit Scott! Without the right CSS The images will not be placed one on top of the other.  You want to basically position all the images in the exact same spot.  What the CSS is doing (which you for some reason removed) is making the div with a position of relative, meaning that it can be a reference point for other elements.  And then it is making all images associated with that div positioned with an absolute value relative to that div (all in the same place).  That way when you go to the next image it is in the exact same spot as the previous. 

The other issue is that you have completely removed the div in which the images will live.  Without the HTML, there is no place to put the images.  The images are still displaying because the code creates a image tag and places obscurely in the body, but the code requires and expects a div with the class of rotationViewer and a DOM element of page (page_rotationViewer).  Uize has set up it's code to view the DOM in a certain XML style hierarchy in order to access and create certain nodes. 


SO, first thing you need, that was included in the code I sent you is this CSS placed somewhere in the head tag:

<style type="text/css">
.rotationViewer {position:relative;    width:640px;height:378px;border-style:solid;border-width:1px;margin:auto;margin-bottom:10px;cursor:pointer;}

.rotationViewer img {position:absolute;    visibility:hidden;left:0;top:0;width:100%;height:100%;}
</style>

Next you need to have the div in the body of the page that allows Uize to access and recognize a certain node to which it attaches the images and functionality: 

<div id="page_rotationViewer" class="rotationViewer insetBorderColor"></div>


That is friggin all.

Finally (I was using extra classes to work on some other additional features) you can change this:


required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod',
        'Uize.Widget.CollectionItem.Zooming',
        'Uize.Widget.MagView'
    ],
to this:


required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod'
    ],

--
UIZE JavaScript Framework...
 
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
 
UIZE JavaScript Framework Google Group...
 
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Scott Cornell

unread,
Mar 21, 2012, 9:47:00 AM3/21/12
to ui...@googlegroups.com
I'm sorry, I know I'm a dunce when it comes to code but hey... I warned you... but,

HOT DAMN! It works! Aryan, Marcus, Thank you very much!

One last thing... it looks like it's moving the opposite direction that I'm dragging? 
What do I need to do to change that?

Thanks a million and thanks for putting up with me.
Scott


Aryan Duntley

unread,
Mar 21, 2012, 6:23:55 PM3/21/12
to ui...@googlegroups.com
'Drag Update':function (e) {updateRotation (dragStartRotation - e.source.eventDeltaPos [0] / 2.5)}

In this line of code, to change the direction of spin simply change the - to a +.

Scott


--
UIZE JavaScript Framework...
 
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
 
UIZE JavaScript Framework Google Group...
 
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
Sincerely,
Aryan Duntley

Mumen Shabaro

unread,
Mar 14, 2012, 2:58:17 PM3/14/12
to ui...@googlegroups.com
Hi scott,

Yes, using UIZE library would answer your question, i've a sequence of 100 image that i display it as 3D model. it's amazing and perfect. if you want any help regarding this issue, just ask.

Best Regards,
Mumen Shabaro.

Scott

--
UIZE JavaScript Framework...

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

UIZE JavaScript Framework Google Group...

...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com



--
You Gotta Risk It To Get The Biscuit
about Mumen Shabaro
Mumen Shabaro Blog



Reply all
Reply to author
Forward
0 new messages