image overflays are now possible, its still buged right now

www/app.js

@@ -7,15 +7,15 @@ Ext.Loader.setPath({
 Ext.application({
     controllers: ["Main"],
     models: ["SimulationModel", "SimulationDetails"],
-    stores: ['SimulationStore', 'SimulationDetailsStore'],
+    stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
 
     name: 'app',
 
     requires: [
-        'Ext.MessageBox'
+        'Ext.MessageBox', 'app.CustomProxy'
     ],
 
-    views: ['Main', "Home", "Simulation", "List", 'Map'],
+    views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
 
     icon: {
         57: 'resources/icons/Icon.png',

www/app/controller/Main.js

@@ -4,64 +4,143 @@ Ext.define('app.controller.Main', {
     config: {
         refs: {
             map: '#mapa',
+            sidepanel: 'listpanel',
+            api: 'api',
             mapView: 'SimulationMap',
+            overlay: '#overlay',
+            simulation: 'simulationpanel'
         },
         control: {
-            'listpanel list': {
+            'listpanel #cities': {
                 itemtap: 'showOverlay',
+                tap: 'closeoverlay'
+            },
+
+            'sliderfield': {
+                change: 'callNextImage'
+            },
+
+            'listpanel #summary': {
+                itemtap: 'simulation',
             },
 
             '#mapa': {
                 maprender: 'setMap'
+            },
+
+            '#closebutton': {
+                tap: 'closeoverlay'
             }
         }
     },
 
+    callRemoveImages: function(){
+
+    },
+
+    callNextImage: function(){
+        this.getMapView().nextImage();
+    },
+
+    closeoverlay: function() {
+        console.log(this.getOverlay());
+        this.getOverlay().hide();
+    },
+
     setMap: function(extmap, map){
         this.globalMap = map;
         this.getMapView().setGlobalMap(extmap, map);
-       // var traffic = new google.maps.TrafficLayer();
-      //  traffic.setMap(map);
-    }, 
+        this.selectedIndex = [];
+    },
 
-    showOverlay: function(list, index, element, record) {
-        //var area_id = record.get('area_id');
+    simulation: function(list, index, element, record) {
         var store = Ext.getStore('SimulationDetailsStore');
-        var area_id = record.get('area_id');
+        var test_id = record.get('test_id');
         var map = this.getMapView();
-        var dikes = null;
-        //store.setUrl(record.get('area_id'));
-        //console.log(store.getData().getCount());
-        //console.log(store.getData().getAt(0).get('dikes'));
-        //var dikes = store.getData().getAt(0).get('dikes');
-        var bounds = record.get('visbounds');
-        var center = record.get('center');
-        var corners = record.get('corners');
+        var bounds;
 
+        store.each(function(r){
+            bounds = r.get('visbounds');
+        });
+       
         var request = Ext.Ajax.request({
             method: 'GET',
-            url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json',
-            
+            url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
+    
             success: function(response, opts){
-                console.log(response);
                 var result = Ext.decode(response.responseText);
-                console.log(this);
-                if (result['dikes'].length  > 0)
-                    map.createOverlayPolygon(result['dikes']);
+                if (result['timesteps'].length > 0)
+                    map.createOverlayImage(bounds, test_id, result['timesteps']);
+            },
+        });
+
+        console.log(this.getOverlay());
+        this.getOverlay().showBy(element);
+    },
+
+    showOverlay: function(list, index, element, record) {
+        this.getMapView().removeImages();
+        var center = record.get('center');
+        var selected = false;
+        var area_id = record.get('area_id');
+        for (i in this.selectedIndex)
+            if (this.selectedIndex[i] == index)
+                selected = true;
+
+        var store = Ext.getStore('SimulationsSummary');
+
+        store.clearFilter();
+        store.filter("area_id", area_id);
+
+        this.getSidepanel().push({
+            showAnimation: {
+                type: 'slide',
+                direction: 'left',
+                duration: 200
             },
+
+            id: 'summary',
+            xtype: 'list',
+            store: 'SimulationsSummary',
+            itemTpl: '<div>simulation {submitted} - {test_id}</div>',
         });
-        //var result = Ext.decode(request.responseText);
-        //  console.log(result);
-        //if (result['dikes'].length > 0)
-        //  this.getMapView().createOverlayPolygon(result['dikes']);
-        this.getMapView().createMarker();
-        //this.getMapView().createOverlayImage(bounds);
+
+        if (selected == false)
+        {
+            this.selectedIndex.push(index);
+            var dikes = null;
+            var bounds = record.get('visbounds');
+            var corners = record.get('corners');
+
+            var store = Ext.getStore('SimulationDetailsStore');
+            store.setUrl(area_id);
+            store.load();
+
+            store.each(function(r) {
+                dikes = r.get('dikes');
+            });
+            
+            if (dikes.length != 0)
+                this.getMapView().createOverlayPolygon(dikes);
+            this.getMapView().createMarker(center);
+            this.getMapView().createOverlayImage(bounds);
+        }   
         this.getMapView().setCenterMap(center);
     },
+});
+
 
-    callMapPolygon: function(polygon)
-    {
-        this.getMapView().createOverlayPolygon(polygon);
-    }
+            // this.getApi.getAreaInfo(area_id,  map.createOverlayPolygon);
+            // var request = Ext.Ajax.request({
+            //      method: 'GET',
+            //      url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json',
+                
+            //      success: function(response, opts){
+            //          console.log(response);
+            //          var result = Ext.decode(response.responseText);
+            //          console.log(this);
+            //          if (result['dikes'].length  > 0)
+            //              map.createOverlayPolygon(result['dikes']);
+            //      },
+            // });
 
-});
\ No newline at end of file

www/app/store/SimulationDetailsStore.js

 Ext.define('app.store.SimulationDetailsStore', {
 	extend: 'Ext.data.Store',
-	requires: ['Ext.data.proxy.Rest'],
+	requires: ['app.CustomProxy'],
 	xtype: 'SimulationDetailsStore',
 
 	config: {
+		autoLoad: true,
 		model: 'app.model.SimulationDetails',
 		fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'],
 		proxy: {
 			type: 'rest',
-			url: 'http://sangkil.science.uva.nl:8003/area/',
+			url: 'http://sangkil.science.uva.nl:8003/area/1/info.json',
 			reader: {
 				type: 'json',
 			},
-			 callback: function(response) {
-        		console.log(response.responseText);
-    		}
 		},
 
 		listeners: {
-			beforeload: function(store){
-				console.log(store);
-			}
+
 		}
 	},
+	
 	setUrl: function(area_id) {
 		var store = Ext.getStore('SimulationDetailsStore').getProxy();
 		store._url = 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json';
-	}
+	},
 });
\ No newline at end of file

www/app/view/List.js

@@ -4,37 +4,29 @@
  */
 Ext.define("app.view.List", 
 {
-	extend: "Ext.Container",
+	extend: "Ext.navigation.View",
 	xtype: 'listpanel',
 
 	requires: [
 		'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
 	],
 
-	//stores: ['SimulationStore'],
-
 	config: {
-		layout: "vbox",
+		layout: "card",
+        animation: {
+            type: 'slide',
+            direction: 'left',
+            duration: 1000
+        },
 		items: [
 			{
-				dock: 'top',
-				xtype: "toolbar",
-
-				items: [
-					{
-						text: "Button",
-						ui: "Square",
-						margin: 10
-					}
-				]
-			},
-			{
+				id: 'cities',
 				xtype: 'list',
 				ui: 'round',
 				itemTpl: '<div>{name}</div>',
 				store: 'SimulationStore',
 				flex: 1
-			}
+			},
 		],
 	},
 });
\ No newline at end of file

www/app/view/Map.js

@@ -12,6 +12,16 @@ Ext.define('app.view.Map', {
 				style: google.maps.NavigationControlStyle.DEFAULT
 			}
 		},
+
+		listeners: {
+			maprender: function()
+			{
+				this.overlayImages = [];
+				this.Images = [];
+				this.imageIndex = null;
+				this.imageBounds = null;
+			}
+		}
 	},
 
 	setGlobalMap: function(extmap, map){
@@ -30,8 +40,16 @@ Ext.define('app.view.Map', {
 		this.globalExtMap.setMapOptions(options);
 	},
 
+	/*
+	 * createMarker: 
+     *  sets marker at pos
+     * @params: 
+     *		pos = [latitude, longitude]
+     * 
+	 */
 	createMarker: function(pos){
-        var pos = new google.maps.LatLng(52.3700, 4.89000);
+		console.log("setmarker");
+        var pos = new google.maps.LatLng(pos[0], pos[1]);
         new google.maps.Marker({
             position: pos,
             icon: 'Google_Maps_Marker.png',
@@ -41,21 +59,50 @@ Ext.define('app.view.Map', {
 	},
 
 	/*create overlay*/
-	createOverlayImage: function(bounds) {
-		var image = 'floodmap1.jpg';
-		var imageBounds = new google.maps.LatLngBounds(
-			new google.maps.LatLng(bounds[2],bounds[3]),
-			new google.maps.LatLng(bounds[0],bounds[1]));
-		new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
+	// 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png'
+	// 'http://sangkil.science.uva.nl:8003/drfsm/207/visualization/level/map/300.png' ;
+	createOverlayImage: function(bounds, area_id, timesteps) {
+		this.imageIndex = 0;
+		this.imageBounds = new google.maps.LatLngBounds(
+				new google.maps.LatLng(bounds[2],bounds[3]),
+				new google.maps.LatLng(bounds[0],bounds[1]));
+		
+		this.bounds = bounds;
+		// delete all other images
+		if (this.overlayImages.length > 0)
+			for (i in this.overlayImages)
+				this.overlayImages[i].setMap(null);
+		//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';	
+
+		for (i in timesteps)
+		{
+			//if (i > 0 && this.overlayImages.length > 0)
+			//	this.overlayImages[i - 1].setMap(null);
+			var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
+			//var overlay = new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
+			this.Images.push(image);
+		}
+		var overlay = new google.maps.GroundOverlay(this.Images[0], this.imageBounds, {map: this.globalMap});
+		this.overlayImages.push(overlay);
+	},
+
+	nextImage: function()
+	{
+		this.imageIndex += 1;
+		this.overlayImages[this.imageIndex - 1].setMap(null);
+		var overlay = new google.maps.GroundOverlay(this.Images[this.imageIndex], this.imageBounds, {map: this.globalMap});
+		this.overlayImages.push(overlay);
+	},
+
+	removeImages: function()
+	{
+		for (i in this.overlayImages)
+			this.overlayImages[i].setMap(null);
 	},
 
 	createOverlayPolygon: function(corners){
 		var cornerBounds = [];
-		console.log(corners);
-		console.log(corners[0].length);
 		for (var i = 0; i < corners[0].length - 1; i++) {
-
-			console.log("i: " + i + corners[0][i][0] + "-" + corners[0][i][1]);
 			cornerBounds.push(new google.maps.LatLng(corners[0][i][0], corners[0][i][1]));
 		}
 		console.log(cornerBounds);

www/app/view/Simulation.js

 Ext.define('app.view.Simulation', {
-    extend: 'Ext.Container',
+    extend: 'Ext.navigation.View',
     xtype: 'simulationpanel',
 
     config: {
         title: "Map",
-        layout: "vbox",
+        layout: "card",
         items: [
-            {
-                dock: "top",
-                xtype: 'toolbar',
-
-                items : [
-                    {
-                        text: "button",
-                        ui: "square"
-                    }   
-                ],
-            },
             {
                 xtype: 'SimulationMap',      
                 flex: 2,
-            }
-        ],
+            },
+            {
+                xtype: 'panel',
+                id: 'overlay',
+                floating: true,
+                hidden: true,
+                width: 300,
+                height: 80,
+                scroll: false,
+                items: [{
+                    xtype: 'button',
+                    id: 'closebutton',
+                    iconCls: 'delete',
+                    iconMask: true,
+                    width: 45,
+                    
+                    bottom: -30,
+                    right: -20,
+                },
+                {
+                    xtype: 'segmentedbutton',
+                    items: [
+                    {
+                        text: 'back'
+                    },
+                    {
+                        text: 'forward'
+                    }
+
+                    ]
+                }],
+            }],
     },
 });