Reformating carousel

5 files changed, 20 insertions, 56 deletions

diff --git a/node_modules/components-data/picasa-carousel.json b/node_modules/components-data/picasa-carousel.json
index 781b246e..2eb601c7 100644
--- a/node_modules/components-data/picasa-carousel.json
+++ b/node_modules/components-data/picasa-carousel.json
@@ -14,8 +14,7 @@
     ],
     "defaultStyles":  {
         "width":"800px",
-        "height":"320px",
-        "border": "1px",
-        "-webkit-perspective": "800px"
+        "height":"160px",
+        "border": "1px"
     }
 }
\ No newline at end of file
diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css
index 82b04cf9..39484e8d 100755
--- a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css
+++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css
@@ -1,6 +1,5 @@
 .montage-google-picasa-carousel, [data-montage-id="montage-google-picasa-carousel"] {
-    width: 800px;
-        height: 400px;
+        height: 300px;
     -webkit-perspective: 800px;
     background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb));
 }
diff --git a/node_modules/montage/ui/flow.reel/flow.js b/node_modules/montage/ui/flow.reel/flow.js
index f1311292..089353a8 100644
--- a/node_modules/montage/ui/flow.reel/flow.js
+++ b/node_modules/montage/ui/flow.reel/flow.js
@@ -549,7 +549,7 @@ var Flow = exports.Flow = Montage.create(Component, {
     },
 
     _range: {
-        value: 15
+        value: 25
     },
 
     lastDrawTime: {
diff --git a/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html
index 1e94f43b..3e88adc0 100644
--- a/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html
+++ b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html
@@ -20,14 +20,17 @@
 </head>
 <style>
     .Image {
-        /*
-        margin-top: -160px;
-        margin-left: -160px;
-*/
-        width: 320px;
-        height: 320px;
-        border-radius: 18px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -72px;
+        margin-left: -105px;
+        width: 206px;
+        height: 140px;
+        border-radius: 4px;
+        border: 2px solid #888;
                 background-repeat: no-repeat;
+                background-position: center center;
                 background-size: cover;
     }
 </style>
diff --git a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html
index 08b5ffa4..6774026b 100755
--- a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html
+++ b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html
@@ -83,7 +83,7 @@
                     "cameraRotationAxisX": 1,
                     "cameraRotationAxisY": 0,
                     "cameraRotationAxisZ": 0,
-                                        "scale": 380
+                                        "scale": 210
                 },
                 "bindings": {
                                         "objects": {
@@ -92,8 +92,8 @@
                         "oneway": true
                                         },
                     "path": {
-                        "boundObject": {"@": "pathLerp1"},
-                        "boundObjectPropertyPath": "resultPath",
+                        "boundObject": {"@": "path2"},
+                        "boundObjectPropertyPath": "path",
                         "oneway": true
                     },
                     "cameraRotationAngle": {
@@ -113,20 +113,6 @@
                     }
                 }
             },
-            "path1": {
-                "module": "montage/ui/flow-path",
-                "name": "FlowPath",
-                "properties": {
-                    "evalPath": [
-                        "path.translateX = slide.time-slide.index*155+50",
-                        "path.translateY = (slide.index%3)*240",
-                        "path.translateZ = -slide.time/3",
-                        "path.rotateX = slide.speed/200",
-                        "path.rotateY = 1",
-                        "path.rotateZ = slide.time/500"
-                    ]
-                }
-            },
             "path2": {
                 "module": "montage/ui/flow-path",
                 "name": "FlowPath",
@@ -134,35 +120,12 @@
                     "evalPath": [
                         "path.translateX = slide.time",
                         "path.translateY = 0",
-                        "path.translateZ = slide.time*slide.time/-1500",
+                        "path.translateZ = Math.pow(1.1, -slide.time*slide.time/30000)*600-600",
                         "path.rotateX = 0",
-                        "path.rotateY = slide.time/1200",
+                        "path.rotateY = 0",
                         "path.rotateZ = slide.speed/1500"
                     ]
                 }
-            },
-            "pathLerp1": {
-                "module": "montage/ui/flow-path-lerp",
-                "name": "FlowPathLerp",
-                "properties": {
-                    "interpolant": 1
-                },
-                "bindings": {
-                    "path1": {
-                        "boundObject": {"@": "path1"},
-                        "boundObjectPropertyPath": "path",
-                        "oneway": true
-                    },
-                    "path2": {
-                        "boundObject": {"@": "path2"},
-                        "boundObjectPropertyPath": "path",
-                        "oneway": true
-                    },
-                    "interpolant": {
-                        "boundObject": {"@": "slider1"},
-                        "boundObjectPropertyPath": "value"
-                    }
-                }
             }
 
     }
@@ -172,7 +135,7 @@
 <body>
 
     <div data-montage-id="montage-google-picasa-carousel" class="montage-google-picasa-carousel">
-        <div id="flow" class="flow" style="-webkit-perspective: 1400px; -webkit-transform-style: preserve-3d; width:800px; height:320px; border:1px;">
+        <div id="flow" class="flow" style="-webkit-perspective: 1400px; -webkit-transform-style: preserve-3d; width:800px; height:160px; border:1px;">
                 <img id="image" class="image"/>
             </div>
     </div>