UIZE 3D Rotation Viewer Issue

Question

I'm not familiar about this open source code and how it could work.. Currently i'm experimenting a 3d product rotation by using javascript, and found this online. The original image sequence is based on the iphone 3d rotation pictures.

So I copy the code and want to replace with my own image sequence. I've changed the frame number and the path of the frameUrlTemplate.. I've follow one of the tutorial online, but it doesn't work.....there's no image be shown on the page..

here's my code..does anybody know how to fix it? Or I missed anything?

<!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> <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>

Uize.module ({ required:[ 'UizeSite.Page.Example.library', 'UizeSite.Page.Example', 'Uize.Widget.Drag', 'Uize.Fade.xFactory', 'Uize.Curve.Rubber', 'Uize.Curve.Mod', 'Uize.Widget.V2', 'Uize.Widgets.Button.Widget' ], builder:function () { 'use strict';

/*** create the example page widget ***/
  var page = window.page = UizeSite.Page.Example ({evaluator:function (code) {eval (code)}});

/*** 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 + '"' +
              ' 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});
  }

/*** add the buttons for triggering different spins ***/
  page.addChild ('spinButtons',Uize.Widget.V2,{built:false})
    .addChildren (
      {
        clockwise:{
          text:'360 clockwise',
          action:function () {spin (360,2700,Uize.Curve.easeInOutPow (4))}
        },
        counterClockwise:{
          text:'360 counter-clockwise',
          action:function () {spin (-360,2700,Uize.Curve.easeInOutPow (4))}
        },
        threeSpins:{
          text:'3 spins',
          action:function () {spin (1080,4000,Uize.Curve.easeInOutPow (4))}
        },
        withBounce:{
          text:'spin with bounce',
          action:function () {spin (360,2700,Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))}
        },
        withElasticity:{
          text:'spin with elasticity',
          action:function () {spin (360,4000,Uize.Curve.Mod.bend (Uize.Curve.Rubber.easeOutElastic (.1),3))}
        }
      },
      {
        widgetClass:Uize.Widgets.Button.Widget,
        size:'small'
      }
    )
  ;

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

/*** wire up the page widget ***/
  page.wireUi ();

} });

</script>

</body> </html>

Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

siying wei

siying wei

UIZE 3D Rotation Viewer Issue

John Paul Ashenfelter

John Paul Ashenfelter