long_description.html

<style>
    #globecontainer canvas {
        position:relative !important;
    }
</style>
<div class="row-fluid">
    <div class="span12">
        <p>
        Urban Parks is a <strong>demo application</strong> for PyBossa that shows how you can 
        crowdsourcing a geo localization problem.
        </p>
        <p>
        This application uses a list of cities from all over the world. The 
        goal is really simple: navigate the map in order to find an urban park.
        </p>
        <p>
        When the user finds one park, adds one marker to indicate the position and
        saves the coordinates in GeoJSON format to easily parse it at a later stage.
        </p>
    </div>
</div>
<div class="row-fluid">
    <div class="span12">
        <h2>Results <small>urban parks reported by the volunteers in a 3D globe</small></h2>
        <p>This 3D Globe uses the HTML5 WebGL technology for showing the results, each blue pike represents and urban park submitted by a volunteer, almost in realtime from this <strong>demo application</strong>.</p>
        <p>You can rotate the globe by clicking on it and dragging it!</p>
        <div id="notwebgl" style="display:none">
        <span class="label label-danger"><i class="icon-bullhorn"></i> Error:</span> 
        Sorry, your browser or your GPU do not support WebGL so we can not show you the results in a 3D Globe using WebGL. 
        <p>
        If your browser and your computer would support <strong>WebGL</strong>, you will be able to view the answers from the users in a 3D world globe like this:
        </p>

        <img src="https://pbs.twimg.com/media/AxxDoY9CIAET_0L.png">
        </div>
        <div id="globecontainer" style="position:relative;"></div>
        <script type="text/javascript" src="/static/globe/third-party/Three/ThreeWebGL.js"></script>
        <script type="text/javascript" src="/static/globe/third-party/Three/ThreeExtras.js"></script>
        <script type="text/javascript" src="/static/globe/third-party/Three/RequestAnimationFrame.js"></script>
        <script type="text/javascript" src="/static/globe/third-party/Three/Detector.js"></script>
        <script type="text/javascript" src="/static/globe/third-party/Tween.js"></script>
        <script type="text/javascript" src="/static/globe/third-party/Tween.js"></script>
        <script type="text/javascript" src="/static/globe/globe.js"></script>
        <script>
        /**
         * dat.globe Javascript WebGL Globe Toolkit
         * http://dataarts.github.com/dat.globe
         *
         * Copyright 2011 Data Arts Team, Google Creative Lab
         *
         * Licensed under the Apache License, Version 2.0 (the 'License');
         * you may not use this file except in compliance with the License.
         * You may obtain a copy of the License at
         *
         * http://www.apache.org/licenses/LICENSE-2.0
         */
        
        var DAT = DAT || {};
        
        DAT.Globe = function(container, colorFn) {
        
          colorFn = colorFn || function(x) {
            var c = new THREE.Color();
            c.setHSV( ( 0.6 - ( x * 0.5 ) ), 1.0, 1.0 );
            return c;
          };
        
          var Shaders = {
            'earth' : {
              uniforms: {
                'texture': { type: 't', value: 0, texture: null }
              },
              vertexShader: [
                'varying vec3 vNormal;',
                'varying vec2 vUv;',
                'void main() {',
                  'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
                  'vNormal = normalize( normalMatrix * normal );',
                  'vUv = uv;',
                '}'
              ].join('\n'),
              fragmentShader: [
                'uniform sampler2D texture;',
                'varying vec3 vNormal;',
                'varying vec2 vUv;',
                'void main() {',
                  'vec3 diffuse = texture2D( texture, vUv ).xyz;',
                  'float intensity = 1.05 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) );',
                  'vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );',
                  'gl_FragColor = vec4( diffuse + atmosphere, 1.0 );',
                '}'
              ].join('\n')
            },
            'atmosphere' : {
              uniforms: {},
              vertexShader: [
                'varying vec3 vNormal;',
                'void main() {',
                  'vNormal = normalize( normalMatrix * normal );',
                  'gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
                '}'
              ].join('\n'),
              fragmentShader: [
                'varying vec3 vNormal;',
                'void main() {',
                  'float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 12.0 );',
                  'gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * intensity;',
                '}'
              ].join('\n')
            }
          };
        
          var camera, scene, sceneAtmosphere, renderer, w, h;
          var vector, mesh, atmosphere, point;
        
          var overRenderer;
        
          var imgDir = '/static/img/';
        
          var curZoomSpeed = 0;
          var zoomSpeed = 50;
        
          var mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 };
          var rotation = { x: 0, y: 0 },
              target = { x: Math.PI*3/2, y: Math.PI / 6.0 },
              targetOnDown = { x: 0, y: 0 };
        
          var distance = 100000, distanceTarget = 100000;
          var padding = 40;
          var PI_HALF = Math.PI / 2;
        
          function init() {
        
            container.style.color = '#fff';
            container.style.font = '13px/20px Arial, sans-serif';
        
            var shader, uniforms, material;
            w = container.offsetWidth || window.innerWidth;
            h = container.offsetHeight || window.innerHeight;
        
            camera = new THREE.Camera(
                30, w / h, 1, 10000);
            camera.position.z = distance;
        
            vector = new THREE.Vector3();
        
            scene = new THREE.Scene();
            sceneAtmosphere = new THREE.Scene();
        
            var geometry = new THREE.Sphere(200, 40, 30);
        
            shader = Shaders['earth'];
            uniforms = THREE.UniformsUtils.clone(shader.uniforms);
        
            uniforms['texture'].texture = THREE.ImageUtils.loadTexture(imgDir+'world' +
                '.jpg');
        
            material = new THREE.MeshShaderMaterial({
        
                  uniforms: uniforms,
                  vertexShader: shader.vertexShader,
                  fragmentShader: shader.fragmentShader
        
                });
        
            mesh = new THREE.Mesh(geometry, material);
            mesh.matrixAutoUpdate = false;
            scene.addObject(mesh);
        
            shader = Shaders['atmosphere'];
            uniforms = THREE.UniformsUtils.clone(shader.uniforms);
        
            material = new THREE.MeshShaderMaterial({
        
                  uniforms: uniforms,
                  vertexShader: shader.vertexShader,
                  fragmentShader: shader.fragmentShader
        
                });
        
            mesh = new THREE.Mesh(geometry, material);
            mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.1;
            mesh.flipSided = true;
            mesh.matrixAutoUpdate = false;
            mesh.updateMatrix();
            sceneAtmosphere.addObject(mesh);
        
            geometry = new THREE.Cube(0.75, 0.75, 1, 1, 1, 1, null, false, { px: true,
                  nx: true, py: true, ny: true, pz: false, nz: true});
        
            for (var i = 0; i < geometry.vertices.length; i++) {
        
              var vertex = geometry.vertices[i];
              vertex.position.z += 0.5;
        
            }
        
            point = new THREE.Mesh(geometry);
        
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.autoClear = false;
            renderer.setClearColorHex(0x000000, 0.0);
            renderer.setSize(w, h);
        
            renderer.domElement.style.position = 'absolute';
        
            container.appendChild(renderer.domElement);
        
            container.addEventListener('mousedown', onMouseDown, false);
        
            container.addEventListener('mousewheel', onMouseWheel, false);
        
            document.addEventListener('keydown', onDocumentKeyDown, false);
        
            window.addEventListener('resize', onWindowResize, false);
        
            container.addEventListener('mouseover', function() {
              overRenderer = true;
            }, false);
        
            container.addEventListener('mouseout', function() {
              overRenderer = false;
            }, false);
          }
        
          addData = function(data, opts) {
            var lat, lng, size, color, i, step, colorFnWrapper;
        
            opts.animated = opts.animated || false;
            this.is_animated = opts.animated;
            opts.format = opts.format || 'magnitude'; // other option is 'legend'
            console.log(opts.format);
            if (opts.format === 'magnitude') {
              step = 3;
              colorFnWrapper = function(data, i) { return colorFn(data[i+2]); }
            } else if (opts.format === 'legend') {
              step = 4;
              colorFnWrapper = function(data, i) { return colorFn(data[i+3]); }
            } else {
              throw('error: format not supported: '+opts.format);
            }
        
            if (opts.animated) {
              if (this._baseGeometry === undefined) {
                this._baseGeometry = new THREE.Geometry();
                for (i = 0; i < data.length; i += step) {
                  lat = data[i];
                  lng = data[i + 1];
        //        size = data[i + 2];
                  color = colorFnWrapper(data,i);
                  size = 0;
                  addPoint(lat, lng, size, color, this._baseGeometry);
                }
              }
              if(this._morphTargetId === undefined) {
                this._morphTargetId = 0;
              } else {
                this._morphTargetId += 1;
              }
              opts.name = opts.name || 'morphTarget'+this._morphTargetId;
            }
            var subgeo = new THREE.Geometry();
            for (i = 0; i < data.length; i += step) {
              lat = data[i];
              lng = data[i + 1];
              color = colorFnWrapper(data,i);
              size = data[i + 2];
              size = size*200;
              addPoint(lat, lng, size, color, subgeo);
            }
            if (opts.animated) {
              this._baseGeometry.morphTargets.push({'name': opts.name, vertices: subgeo.vertices});
            } else {
              this._baseGeometry = subgeo;
            }
        
          };
        
          function createPoints() {
            if (this._baseGeometry !== undefined) {
              if (this.is_animated === false) {
                this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({
                      color: 0xffffff,
                      vertexColors: THREE.FaceColors,
                      morphTargets: false
                    }));
              } else {
                if (this._baseGeometry.morphTargets.length < 8) {
                  console.log('t l',this._baseGeometry.morphTargets.length);
                  var padding = 8-this._baseGeometry.morphTargets.length;
                  console.log('padding', padding);
                  for(var i=0; i<=padding; i++) {
                    console.log('padding',i);
                    this._baseGeometry.morphTargets.push({'name': 'morphPadding'+i, vertices: this._baseGeometry.vertices});
                  }
                }
                this.points = new THREE.Mesh(this._baseGeometry, new THREE.MeshBasicMaterial({
                      color: 0xffffff,
                      vertexColors: THREE.FaceColors,
                      morphTargets: true
                    }));
              }
              scene.addObject(this.points);
            }
          }
        
          function addPoint(lat, lng, size, color, subgeo) {
            var phi = (90 - lat) * Math.PI / 180;
            var theta = (180 - lng) * Math.PI / 180;
        
            point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
            point.position.y = 200 * Math.cos(phi);
            point.position.z = 200 * Math.sin(phi) * Math.sin(theta);
        
            point.lookAt(mesh.position);
        
            point.scale.z = -size;
            point.updateMatrix();
        
            var i;
            for (i = 0; i < point.geometry.faces.length; i++) {
        
              point.geometry.faces[i].color = color;
        
            }
        
            GeometryUtils.merge(subgeo, point);
          }
        
          function onMouseDown(event) {
            event.preventDefault();
        
            container.addEventListener('mousemove', onMouseMove, false);
            container.addEventListener('mouseup', onMouseUp, false);
            container.addEventListener('mouseout', onMouseOut, false);
        
            mouseOnDown.x = - event.clientX;
            mouseOnDown.y = event.clientY;
        
            targetOnDown.x = target.x;
            targetOnDown.y = target.y;
        
            container.style.cursor = 'move';
          }
        
          function onMouseMove(event) {
            mouse.x = - event.clientX;
            mouse.y = event.clientY;
        
            var zoomDamp = distance/1000;
        
            target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp;
            target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp;
        
            target.y = target.y > PI_HALF ? PI_HALF : target.y;
            target.y = target.y < - PI_HALF ? - PI_HALF : target.y;
          }
        
          function onMouseUp(event) {
            container.removeEventListener('mousemove', onMouseMove, false);
            container.removeEventListener('mouseup', onMouseUp, false);
            container.removeEventListener('mouseout', onMouseOut, false);
            container.style.cursor = 'auto';
          }
        
          function onMouseOut(event) {
            container.removeEventListener('mousemove', onMouseMove, false);
            container.removeEventListener('mouseup', onMouseUp, false);
            container.removeEventListener('mouseout', onMouseOut, false);
          }
        
          function onMouseWheel(event) {
            event.preventDefault();
            if (overRenderer) {
              zoom(event.wheelDeltaY * 0.3);
            }
            return false;
          }
        
          function onDocumentKeyDown(event) {
            switch (event.keyCode) {
              case 38:
                zoom(100);
                event.preventDefault();
                break;
              case 40:
                zoom(-100);
                event.preventDefault();
                break;
            }
          }
        
          function onWindowResize( event ) {
            console.log('resize');
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
          }
        
          function zoom(delta) {
            distanceTarget -= delta;
            distanceTarget = distanceTarget > 1000 ? 1000 : distanceTarget;
            distanceTarget = distanceTarget < 350 ? 350 : distanceTarget;
          }
        
          function animate() {
            requestAnimationFrame(animate);
            render();
          }
        
          function render() {
            zoom(curZoomSpeed);
        
            rotation.x += (target.x - rotation.x) * 0.1;
            rotation.y += (target.y - rotation.y) * 0.1;
            distance += (distanceTarget - distance) * 0.3;
        
            camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
            camera.position.y = distance * Math.sin(rotation.y);
            camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
        
            vector.copy(camera.position);
        
            renderer.clear();
            renderer.render(scene, camera);
            renderer.render(sceneAtmosphere, camera);
          }
        
          init();
          this.animate = animate;
        
        
          this.__defineGetter__('time', function() {
            return this._time || 0;
          });
        
          this.__defineSetter__('time', function(t) {
            var validMorphs = [];
            var morphDict = this.points.morphTargetDictionary;
            for(var k in morphDict) {
              if(k.indexOf('morphPadding') < 0) {
                validMorphs.push(morphDict[k]);
              }
            }
            validMorphs.sort();
            var l = validMorphs.length-1;
            var scaledt = t*l+1;
            var index = Math.floor(scaledt);
            for (i=0;i<validMorphs.length;i++) {
              this.points.morphTargetInfluences[validMorphs[i]] = 0;
            }
            var lastIndex = index - 1;
            var leftover = scaledt - index;
            if (lastIndex >= 0) {
              this.points.morphTargetInfluences[lastIndex] = 1 - leftover;
            }
            this.points.morphTargetInfluences[index] = leftover;
            this._time = t;
          });
        
          this.addData = addData;
          this.createPoints = createPoints;
          this.renderer = renderer;
          this.scene = scene;
        
          return this;
        
        };

        </script>
        <script type="text/javascript">

          if(!Detector.webgl){
            Detector.addGetWebGLMessage();
            $("#notwebgl").show();
          } else {

            var years = ['Urban Parks'];
            var container = document.getElementById('globecontainer');
            var globe = new DAT.Globe(container);
            var i, tweens = [];

            var settime = function(globe, t) {
              return function() {
                new TWEEN.Tween(globe).to({time: t/years.length},500).easing(TWEEN.Easing.Cubic.EaseOut).start();
              };
            };

            var xhr;
            TWEEN.start();


            xhr = new XMLHttpRequest();
            //xhr.open('GET', 'globe/population909500.json', true);
            xhr.open('GET', 'http://crowdcrafting.org/api/taskrun?app_id=149&limit=1000', true);
            xhr.onreadystatechange = function(e) {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                  var data = JSON.parse(xhr.responseText);
                  console.log("Urban Parks demos!!");
                  //console.log(data);
                  //console.log(data[0]['info']['city']);
                  //console.log(data[0]['info']['urbanpark']['geometry']['coordinates']);
                  window.data = data;
                  var d = [];
                  //console.log(data[0]);
                  //if ('coordinates' in data[0]['info']['urbanpark']['geometry'])
                  for (i=0;i<data.length;i++) {
                      console.log(data[i]['info']['urbanpark']);
                      if (typeof data[i]['info']['urbanpark'] !== 'string')
                      {
                      d.push(data[i]['info']['urbanpark']['geometry']['coordinates'][1],
                             data[i]['info']['urbanpark']['geometry']['coordinates'][0],
                              0.07);
                      }
                  }
                  d = [['Urban Parks', d]];
                  console.log(d);
                  data = d;
                  for (i=0;i<data.length;i++) {
                    globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: true});
                  }
                  globe.createPoints();
                  settime(globe,0)();
                  globe.animate();
                }
              }
            };
            xhr.send(null);
          }

        </script>

        <span class="label label-warning">
            <i class="icon icon-white icon-bullhorn"></i>
             Note</span> If you want to learn more about how to use this application as a template,
         check the:
         <ul>
             <li><a href="http://github.com/PyBossa/app-geocoding">source code</a>,</li>
             <li><a href="https://docs.google.com/spreadsheet/ccc?key=0AsNlt0WgPAHwdGZnbjdwcnhKRVNlN1dGXy0tTnNWWXc&usp=sharing">Google Spreadsheet Task template</a>,</li>
             <li><a href="http://app-geocoding.readthedocs.org/en/latest/index.html"> specific documentation,</a></li>
             <li><a href="http://docs.pybossa.com/">the official documentation of PyBossa</a> and </li>
             <li><a href="http://docs.pybossa.com/en/latest/user/tutorial.html">the step by step tutorial.</a></li>
         </ul>
        </p>
    </div>
</div>