3D Rotation Viewer - noob question

[Gid]

hi

i'm trying to change this line of code

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

is there a way to setup infinite spin for the 3D Rotation Viewer ??

[Ben Ilegbodu]

Well if you want infinite fade, one way you can accomplish it is by continuously calling the spin method w a set interval that matches the duration of the spin:

    /*** create the Uize.Widget instance ***/

      var rotationViewer = page.addChild (

        'rotationViewer',

        Uize.Widget,

        {

          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));

        }

      }

    /*** 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 () {

         setInterval(

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

           2700

         )

       });

You may noticed that I changed 'Uize.Widget.Drag' to just 'Uize.Widget' since if it has infinite spin, you shouldn't want dragging anymore.  I also got rid of all the other code relating to handling dragging.

I've also attached the HTML file of the full example page w/ "infinite" rotate.

Ben Ilegbodu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit WardTog - Hometown Pride T-Shirts, Mugs, and more!
http://www.wardtog.com/
http://twitter.com/wardtog

God bless you!

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

[Aryan]

The documentation reads more like a reference library so it is difficult to find the basics.  I am going to make an attempt at soliciting some knowledge from this forum.  Beginning with the 3D rotator because that is how I initially found Uize, I have canged the code from the UizeDotCom.page include to the instance of a vanilla? widget.page.  I have not yet read up on how to include several widgets into one application, but that is the goal.  My first question is about the links: [a tag] href="javascript://" class="linkedJs buttonLink" title="spin (360,2700,Uize.Curve.easeInOutPow (4))">360 clockwise[/a tag] and so on.  They are calling javascript:// which I guess is similar to '#' in jquery, however I can't seem to figure out how Uize actually interacts with the the html in this fashion (actions generated by the DOM (I think these actions... href ... are DOM generated)).  It is obvious that the code that listens for these events was included in the UizeDotCom.page widget, but I cannot seem to locate anything that specifically stands out as this type of interaction.  The only things I have been able to find so far are possibly this: nodes:{root:'page_menu1HoverFader',className:/\bmenuLink\b/}, however this was a part of a hover event or a hover widget.  Playing with this yielded no results.  The other possibility I saw was Uize.Node.wire ('','click',function () {alert ('You clicked me')});.  But the problem here is that it expects an id element as the first parameter and the link above does not have an id.  Passing the class is obviously useless, the only thing I think I could do would be to somehow create an object that referenced a tags with the class of x.  But I do not know how to do this here.  I looked through the UizeDotCom page because that is obviously where the interactivity is handled, but I was unable to notice anything that resembled this interaction.

Any help would be appreciated.

Uize.module ({
    required:[
        'Uize.Widget.Page',
        'Uize.Widget.Drag',
        'Uize.Fade.xFactory',
        'Uize.Curve.Rubber',
        'Uize.Curve.Mod'
    ],
    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 + '"' +
                                    ' 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))});

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