can now play trough images

www/app.js

@@ -15,7 +15,7 @@ Ext.application({
         'Ext.MessageBox', 'app.CustomProxy'
     ],
 
-    views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
+    views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel'],
 
     icon: {
         57: 'resources/icons/Icon.png',

www/app/model/SimulationModel.js

@@ -2,6 +2,6 @@ Ext.define('app.model.SimulationModel', {
 	extend: 'Ext.data.Model',
 	
 	config: {
-		fields: ['name', 'corners', 'visbounds', 'area_id', 'center'],
+		fields: ['name', 'corners', 'visbounds', 'area_id', 'center', 'size'],
 	},
 });
\ No newline at end of file

www/app/store/SimulationStore.js

+/*list of areas*/
 Ext.define('app.store.SimulationStore', {
 	extend: 'Ext.data.Store',
 	requires: ['Ext.data.proxy.Rest'],

www/app/store/SimulationsSummary.js

+/*second card list-window*/
 Ext.define('app.store.SimulationsSummary', {
 	extend: 'Ext.data.Store',
 	requires: ['Ext.data.proxy.Rest'],

www/app/view/List.js

@@ -7,13 +7,19 @@ Ext.define("app.view.List",
 	extend: "Ext.navigation.View",
 	xtype: 'listpanel',
 
+
 	requires: [
 		'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
 	],
 	title: 'Simulations',
 
 	config: {
-		ui: 'lighter_blue',
+		
+		navigationBar:
+		{
+			ui: 'darker_blue',
+			//html: '<h1>Simulations Panel</h1>',
+		},
 		items: [
 			{
 				id: 'cities',

www/app/view/Map.js

@@ -18,11 +18,11 @@ Ext.define('app.view.Map', {
 		listeners: {
 			maprender: function()
 			{
-				console.log('maprender');
 				this.overlayImages = [];
 				this.Images = [];
 				this.imageIndex = 0;
 				this.imageBounds = null;
+				this.play = false;
 			}
 		}
 	},
@@ -51,7 +51,6 @@ Ext.define('app.view.Map', {
      * 
 	 */
 	createMarker: function(pos){
-		console.log("setmarker");
         var pos = new google.maps.LatLng(pos[0], pos[1]);
         new google.maps.Marker({
             position: pos,
@@ -61,33 +60,31 @@ Ext.define('app.view.Map', {
 		});
 	},
 
-	/*create overlay*/
+	
 	// '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' ;
+	/*create overlays with area_id, bounds and timesteps
+	 * Bounds: array(4) 
+	*/
 	createOverlayImage: function(bounds, area_id, timesteps) {
-		console.log('createOverlayImages ' +  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 > 1)
-		{
 			this.removeImages();
-		}
 		//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';	
 
 		for (i in timesteps)
 		{
-			console.log(i);
 			var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
 			this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
 		}
 		this.overlayImages[0].setMap(this.globalMap);
 	},
 
+	/* set next Image*/
 	nextImage: function()
 	{
 		var lastImagesIndex = this.imageIndex;
@@ -97,10 +94,9 @@ Ext.define('app.view.Map', {
 			this.overlayImages[this.imageIndex].setMap(this.globalMap);
 			this.overlayImages[this.imageIndex - 1].setMap(null);
 		}
-
-		
 	},
 
+	/*set prev image*/
 	prevImage: function()
 	{
 		this.overlayImages[this.imageIndex].setMap(null);
@@ -109,13 +105,11 @@ Ext.define('app.view.Map', {
 		if (this.imageIndex >= 0)
 		{
 			this.overlayImages[this.imageIndex].setMap(this.globalMap);
-			console.log(this.overlayImages[this.imageIndex]);
 		}
 	},
 
 	removeImages: function()
 	{
-		console.log('removedImages');
 		for (i in this.overlayImages)
 			this.overlayImages[i].setMap(null);
 		this.imageIndex = 0;
@@ -144,13 +138,11 @@ Ext.define('app.view.Map', {
 	getCurrentImage: function(){
 		if (this.overlayImages.length > 0) {
 			this.overlayImages[this.imageIndex];
-			console.log(this.overlayImages[this.imageIndex]);
 			return this.overlayImages[this.imageIndex].url;
 		}	
 	},
 
 	getFloodImage: function(test_id, timestep){
-		console.log(timestep);
 		if (timestep)
 			return 'http://sangkil.science.uva.nl:8003/drfsm/' + test_id + '/visualization/level/map/' + timestep + '.png';
 		else return false;

www/app/view/StepsOverlay.js

@@ -5,6 +5,7 @@ Ext.define('app.view.StepsOverlay', {
 	
     
     config: {
+    	style: "background: none",
     	id: 'overlay',
     	showAnimation: {
     		type: 'slideIn',
@@ -16,10 +17,9 @@ Ext.define('app.view.StepsOverlay', {
     		direction:'right',
     	},
 
-    	//draggable: true,
-    	autoDestroy: true,
+    	//autoDestroy: true,
     	hidden: true,
-	    width: 120,
+	    width: 200,
 	    height: 100,
 	    scroll: false,
 	    items: [
@@ -38,7 +38,7 @@ Ext.define('app.view.StepsOverlay', {
 	    },
 	    {
 	        top: 10,
-	        left: 20,
+	        left: 30,
 	        align: 'center',
 	        items : [
 	        {
@@ -51,7 +51,7 @@ Ext.define('app.view.StepsOverlay', {
 	            floating: 'right',
 	            iconMask: true,
 	            align: 'center',
-
+	            left: 40
 	        },
 	        {
 	        	top: 50,
@@ -64,7 +64,63 @@ Ext.define('app.view.StepsOverlay', {
 	            iconCls: 'arrow_down',
 	            align: 'center',
 	            iconMask: true,
-	        }]
+	            left: 40
+	        },
+	        {
+	        	top: 24,
+	            xtype: "button",
+	            id: 'play',
+	            ui: 'blue',
+	            cls: 'overlay-button',
+	            width: 40,
+	            floating: 'left',
+	            iconCls: 'arrow_right',
+	            align: 'center',
+	            iconMask: true,
+	            left: 85,
+	        },
+
+	        {
+	        	top: 24,
+	        	hidden: true,
+	            xtype: "button",
+	            id: 'pause',
+	            ui: 'red',
+	            cls: 'overlay-button',
+	            width: 40,
+	            floating: 'left',
+	            iconCls: 'pause',
+	            align: 'center',
+	            iconMask: true,
+	            left: 85,
+	        },
+	        {
+	        	top: 24,
+	            xtype: "button",
+	            id: 'play-backw',
+	            ui: 'blue',
+	            cls: 'overlay-button',
+	            width: 40,
+	            floating: 'left',
+	            iconCls: 'arrow_left',
+	            align: 'center',
+	            iconMask: true,
+	            left: 0,
+	        },
+	        {
+	        	top: 24,
+	        	hidden: true,
+	            xtype: "button",
+	            id: 'pause-backw',
+	            ui: 'red',
+	            cls: 'overlay-button',
+	            width: 40,
+	            floating: 'left',
+	            iconCls: 'pause',
+	            align: 'center',
+	            iconMask: true,
+	            left: 0,
+	        }],
 	    }],
 
 	    listeners: [{

www/build/native/My Application.app/Info.plist

@@ -2,6 +2,8 @@
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
 <dict>
+	<key>BuildMachineOSBuild</key>
+	<string>11D50</string>
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
@@ -14,29 +16,45 @@
 	<string>resources/icons/Icon~ipad.png</string>
 	</array>
 	<key>CFBundleIdentifier</key>
-	<string>com.mycompany.myAppID</string>
+	<string>com.codefabriek.tipspottmp</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
 	<string>My Application</string>
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
+	<key>CFBundleResourceSpecification</key>
+	<string>ResourceRules.plist</string>
 	<key>CFBundleShortVersionString</key>
 	<string>1.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleSupportedPlatforms</key>
 	<array>
-		<string>iPhoneSimulator</string>
+		<string>iPhoneOS</string>
 	</array>
 	<key>CFBundleVersion</key>
 	<string>1.0</string>
+	<key>DTCompiler</key>
+	<string>com.apple.compilers.llvm.clang.1_0</string>
+	<key>DTPlatformBuild</key>
+	<string>9A334</string>
 	<key>DTPlatformName</key>
-	<string>iphonesimulator</string>
+	<string>iphoneos</string>
+	<key>DTPlatformVersion</key>
+	<string>5.0</string>
+	<key>DTSDKBuild</key>
+	<string>9A334</string>
 	<key>DTSDKName</key>
-	<string>iphonesimulator5.0</string>
+	<string>iphoneos5.0</string>
+	<key>DTXcode</key>
+	<string>0420</string>
+	<key>DTXcodeBuild</key>
+	<string>4D199</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>MinimumOSVersion</key>
+	<string>3.0</string>
 	<key>UIDeviceFamily</key>
 	<array>
 	<integer>1</integer><integer>2</integer>

www/build/native/My Application.app/webapp/index.html

@@ -70,12 +70,17 @@
 
 
         .flood_thumb {
-            margin-right: 20px;
+            position: absolute;
             z-index: 100;
             left: 10px;
             top: 10px;
             border: solid #ababab;
-            background: white;
+        }
+
+        .map_thumb {
+            position: relative;
+            left: 0px;
+            top: 0px;  
         }
 
         #overlay {

www/build/package/index.html

@@ -70,12 +70,19 @@
 
 
         .flood_thumb {
-            margin-right: 20px;
+            position: relative;
             z-index: 100;
             left: 10px;
             top: 10px;
+            width: 300px;
+            height: 180px;
             border: solid #ababab;
-            background: white;
+        }
+
+        .map_thumb {
+            position: relative;
+            left: 0px;
+            top: 0px;  
         }
 
         #overlay {

www/index.html

@@ -70,12 +70,19 @@
 
 
         .flood_thumb {
-            margin-right: 20px;
+            position: relative;
             z-index: 100;
             left: 10px;
             top: 10px;
-            border: solid #ababab;
-            background: white;
+            width: 300px;
+            height: 180px;
+            border: solid #a0a0a0;
+        }
+
+        .map_thumb {
+            position: relative;
+            left: 0px;
+            top: 0px;  
         }
 
         #overlay {

www/packager.json

@@ -11,7 +11,7 @@
 	 * @cfg {String} applicationId
 	 * This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
 	 */
-	"applicationId":"com.mycompany.myAppID",
+	"applicationId":"com.codefabriek.tipspottmp",
 
 	/**
 	 * @cfg {String} versionString
@@ -63,7 +63,7 @@
 	 *  - Android
 	 *  - AndroidEmulator
 	 */
-	"platform":"iOSSimulator",
+	"platform":"Android",
 
 	/**
 	 * @cfg {String} deviceType
@@ -84,7 +84,7 @@
 	 * This is the location of your certificate.
 	 * This is required when you are developing for Android or you are developing on Windows.
 	 */
-	"certificatePath":"/path/to/certificate.file",
+	"certificatePath":"~/Documents/UvA/floodsimulation/FloodSimulation-Browser/flood-key.keystore",
 
 	/**
 	 * @cfg {String} certificateAlias

www/packager.temp.json

-{"applicationName":"My Application","applicationId":"com.mycompany.myAppID","versionString":"1.0","iconName":"resources/icons/Icon~ipad.png","inputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/package","outputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/native","configuration":"Debug","platform":"iOSSimulator","deviceType":"Universal","certificatePath":"/path/to/certificate.file","certificateAlias":"","sdkPath":"~/Documents/android-sdk-macosx","androidAPILevel":"15","orientations":["portrait","landscapeLeft","landscapeRight","portraitUpsideDown"]}
\ No newline at end of file

www/resources/sass/app.scss

 @import 'sencha-touch/default/all';
 @include pictos-iconmask('close_overlay');
+@include pictos-iconmask('play1');
+@include pictos-iconmask('pause');
 @include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
-@include sencha-toolbar-ui('lighter_blue', #386EBA, 'glossy');
+@include sencha-toolbar-ui('lighter_blue', #00538F, 'glossy');
 @include sencha-button-ui('blue', #003F69, 'glossy');
 @include sencha-button-ui('red', #C40000, 'glossy');
 
+
 // You may remove any of the following modules that you
 // do not use in order to create a smaller css file.
 @include sencha-panel;