modified to allow autoplay + timeslider

12 years ago · 0861f290d7
parent 58e9b839f2
commit 0861f290d7
3 changed files with 112 additions and 4 deletions
--- a/examples/ow-scrub.html
+++ b/examples/ow-scrub.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+    <title>CartoDB + Time</title>
+    <link rel="shortcut icon" href="http://cartodb.com/favicon/favicon_32x32.ico" />
+    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
+    <link rel="stylesheet" href="../lib/cartodb.css">
+    <link rel="stylesheet" href="../css/jqueryui-smoothness/jquery-ui-1.10.2.custom.min.css">
+    <style>
+        #torque-slider{
+            position:absolute;
+            bottom:18px;
+            right:25px;
+            width:300px;
+        }
+    </style>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+    <script type="text/javascript" src="../lib/jquery-ui-1.10.2.custom.min.js"></script>
+    <script type="text/javascript" src="../lib/wax.g.js"></script>
+    <script type="text/javascript" src="../lib/cartodb-gmapsv3.js"></script>
+    <script type="text/javascript" src="../lib/dat.gui.min.js"></script>
+    <script type="text/javascript" src="../lib/underscore-min.js"></script>
+    <script type="text/javascript" src="../lib/backbone.js"></script>
+    <script type="text/javascript" src="../lib/class.js"></script>
+    <script type="text/javascript" src="../lib/backbone.cartodb.js"></script>
+    <script type="text/javascript" src="../src/canvas_tile_layer.js"></script>
+    <script type="text/javascript" src="../src/grid_layer.js"></script>
+    <script type="text/javascript" src="../src/torque.js"></script>
+    <script type="text/javascript">
+    var gui;
+    function initialize() {
+        // initialise the google map
+        var map = new google.maps.Map(document.getElementById('map_canvas'), {
+            center:new google.maps.LatLng(30.95940879245423, -0.609375),
+            zoom:2,
+            mapTypeId:google.maps.MapTypeId.SATELLITE,
+            mapTypeControl:false,
+            minZoom:1
+        });
+
+        var map_style = {};
+        map_style.google_maps_customization_style = [
+            {
+                stylers:[
+                    { invert_lightness:true },
+                    { weight:1 },
+                    { saturation:-100 },
+                    { lightness:-40 }
+                ]
+            },
+            {
+                elementType:"labels",
+                stylers:[
+                    { visibility:"simplified" }
+                ]
+            }
+        ];
+
+        var Soft = function () {
+            this.Soft = function () {
+                map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
+                map.setOptions({styles:map_style.google_maps_customization_style});
+            }
+        }
+
+
+        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
+        map.setOptions({styles:map_style.google_maps_customization_style});
+
+        var TorqueOptions = {
+            user:'viz2',
+            table:'ow',
+            column:'date',
+            steps:750,
+            resolution:2,
+            cumulative:false,
+            clock:true,
+            fps:20,
+            fitbounds:false,
+            blendmode:'lighter',
+            trails:true,
+            point_type:'circle',
+            cellsize:1,
+            scrub: true
+        }
+
+        var torque = null;
+        Torque(function (env) {
+            Torque.app = new env.app.Instance();
+            torque = new Torque.app.addLayer(map, TorqueOptions);
+            Torque.env = env;
+        });
+
+    }
+    </script>
+</head>
+<body onload="initialize()">
+    <div id="map_canvas"></div>
+    <div class="torque_time"></div>
+    <a class="cartodb_logo" href="http://www.cartodb.com" target="_blank">CartoDB</a>
+</body>
+</html>
--- a/examples/uspo-scrub.html
+++ b/examples/uspo-scrub.html
@ -90,6 +90,7 @@
            trails: false,
            point_type:'circle',
            cellsize:2,
+            autoplay: false,
            scrub: true
        }

--- a/src/torque.js
+++ b/src/torque.js
@ -151,8 +151,8 @@ Torque.modules.layer = function (torque) {

            // If scrubbable, override other options that may have been set
            if (this.options.scrub){
-                this.options.autoplay = false;
-                this.options.trails   = false;
+                // this.options.autoplay = false;
+                // this.options.trails   = false;
                $('body').append('<div id="torque-slider"></div>');

            }
@ -234,6 +234,9 @@ Torque.modules.layer = function (torque) {

            this._display.set_time((this._current - this.start) / this._step);

+            if (this.options.scrub==true){
+                $( "#torque-slider" ).slider({ value: this._current });
+            }
            if (this.running) {
                setTimeout(function () {
                    this.play()
@ -337,11 +340,10 @@ Torque.modules.subtitles = function (torque) {

 function init_slider( that ){
    var that_opts = that.options;
-
    // Init jQuery UI options
    $("#torque-slider").slider({
        min: Math.round(that_opts.start),
-        max: Math.round(that_opts.end),
+        max: Math.floor(that_opts.end),
        value: Math.round(that_opts.start),
        step: that._step,
        slide: function(event, ui){