3D Rotation Issue

56 views
Skip to first unread message

Siying Wei

unread,
Jul 10, 2013, 9:44:43 AM7/10/13
to ui...@googlegroups.com
Hi, I tried to use my image instead of the original image frame, however it doesn't show anything after I changed the code...Does anybody know how to fix it ? Thanks a lot!! 
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:529px;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 = 37,
                frameUrlTemplate ='images/pictures/0_[#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:'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