3D rotation issue..

16 views
Skip to first unread message

Siying Wei

unread,
Jul 9, 2013, 3:13:53 PM7/9/13
to ui...@googlegroups.com
I'm trying to using this code and put my own image sequence instead, and somehow it just doesn't work.
Can anybody help me to figure out the error?

here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title>3D Rotation Viewer | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="animation drag-and-drop ipad touch Uize.Widget.Drag Uize.Widget.Fade.xFactory"/>
  <meta name="description" content="Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="css/page.css"/>
  <link rel="stylesheet" href="css/page.example.css"/>
  <style type="text/css">
    .rotationViewer {
      position:relative;
      width:701px;
      height:360px;
      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>
   

<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 = 27,
                frameUrlTemplate ='images/pictures/MyImage_[#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}) +'"' +'/>'
                            );
                        }
                        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:'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>
Reply all
Reply to author
Forward
0 new messages