Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

UIZE 3D Rotation Viewer Issue

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>

<script type="text/javascript" src="js/Uize.js"></script>

<div class="main"> <!-- explanation copy -->

<!-- HTML "wireframe" for 3D rotation viewer -->

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

<div id="page_spinButtons" style="text-align: center;"></div> </div>

<!-- JavaScript code to make the static bar HTML "come alive" -->

<script type="text/javascript">

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!

Did you ever find a solution?