plot works

docs/proposal/Makefile

+# default:
+# 	rm -f *.aux *.toc *.log *.out *.pdf
+# 	pdflatex proposel.tex
+# 	bibtex proposel.aux
+# 	pdflatex proposel.tex
+# 	pdflatex proposel.tex
+proposel.tex: title.tex fsb.tex
+
+%.pdf: %.tex
+	pdflatex $^
+	pdflatex $^
+
+%.bbl: %.bib
+	pdflatex $(^:.bib=.tex)
+	bibtex8 $(@:.bbl=.aux)
+	pdflatex $(^:.bib=.tex)
+	pdflatex $(^:.bib=.tex)
+
+clean:
+	rm -f *.aux *.toc *.log *.out
+
+realclean:
+	rm -f *.aux *.toc *.log *.out *.pdf

docs/proposal/proposel.tex

+\documentclass[a4paper, 11pt]{article}
+\usepackage[T1]{fontenc}
+\usepackage[utf8]{inputenc}
+\usepackage[margin=2.5cm, nohead]{geometry}
+\usepackage{palatino, url, multicol}
+\usepackage{amssymb, graphicx, fancyhdr, latexsym, url, verbatim}
+\usepackage{algorithm, algorithmic}
+\usepackage{hyperref}
+%\usepackage{natbib}
+\usepackage[all]{xy}
+\usepackage{listings}
+\usepackage{cite}
+\usepackage[english]{babel}
+\usepackage[font=small,format=plain,labelfont=bf,up,textfont=it,up]{caption}
+\usepackage{xspace}
+%\usepackage{subfigure} % has to be loaded after caption to prevent clash Commented, because subfig is the newer (and presumably
+% better) version of subfigure...
+\usepackage{subfig}
+\usepackage{xcolor}
+%\usepackage[titles,subfigure]{tocloft}
+%
+%
+%\setlength{\cftbeforesecskip}{0.1cm}
+\newcommand{\todo}[1]{\colorbox{red}{\color{white}#1}}
+\newcommand{\projectName}{Flood Simulation Browser\xspace}
+% xspace only puts a space where we want one!
+
+\addtolength{\footskip}{-200mm}
+\addtolength{\headheight}{-05mm}
+\addtolength{\headsep}{05mm}
+
+\pagestyle{fancy}
+\lhead{\projectName}
+\rhead{\small F.S.B.}
+%\cfoot{\footnotesize \textit{ \projectAbbreviation}\\[0.1cm] \small \thepage}
+%\cfoot{}
+%\rfoot{\thepage}
+
+
+\setlength{\parindent}{0pt}
+\setlength{\parskip}{10pt}
+
+\begin{document}
+\nocite{designing-touch, jQuery-Mobile, Siege}
+\include{title}
+%\thispagestyle{empty}
+\newpage
+
+\begin{abstract}
+
+\end{abstract}
+
+\input{fsb}
+\newpage	
+\bibliographystyle{plain}
+\bibliography{references}
+\end{document}
\ No newline at end of file

docs/proposal/references.bib

+@misc{Titanium-Appcelerator,
+    title = "Appcelerator, \url{http://www.appcelerator.com/}",
+    url = "\url{http://www.appcelerator.com/}",
+}
+
+@article{memoryleak,
+    title = "Why you should stay away from appcelerator titanium \\
+    \url{http://usingimho.wordpress.com/2011/0614/} \\
+    \url{why-you-should-stay-away-from-appcelerators-titanium/} ",
+    url = "\url{http://usingimho.wordpress.com/2011/06/14/why-you-should-stay-away-from-appcelerators-titanium/}",
+    author = "A. Dallera" ,
+}
+
+@misc{CSS3,
+    title = "CSS3 Support, \url{http://www.caniuse.com/}",
+    url = "\url{http://www.caniuse.com/}",
+}
+
+@misc{designing-touch,
+    title = "designing-touch",
+    author = "Clark,  J.",
+    year = "2012",
+    url = "\url{http://www.netmagazine.com/features/designing-touch}",
+    note = "Retrieved March 31, 2012"
+}
+
+@misc{jQuery-Mobile,
+    title = "jQuery Mobile, \url{http://jquerymobile.com/}",
+    url = "\url{http://jquerymobile.com/}",
+}
+
+
+@misc{PhoneGap,
+    title = "PhoneGap, \url{http://www.phonegap.com/}",
+    url = "\url{http://www.phonegap.com/}",
+}
+
+@misc{sencha,
+    title = "CSS3 Support, \url{http://www.sencha.com/products/touch}",
+    url = "\url{http://www.sencha.com/products/touch}",
+}
+
+@misc{Siege,
+    title = "Siege, \url{http://www.joedog.org/siege-home/}",
+    url = "\url{http://www.joedog.org/siege-home/}",
+}
+
+
+
+
+%http://www.sencha.com/products/touch
+
+%http://usingimho.wordpress.com/2011/06/14/why-you-should-stay-away-from-appcelerators-titanium/
+
+%http://caniuse.com/
+
+
+%http://www.joedog.org/siege-home/
+%http://www.netmagazine.com/features/designing-touch  John Clark 2012 on February 01, 2012 
+%http://www.appcelerator.com/
+%http://jquerymobile.com/
+%http://www.phonegap.com/
+%\end{document}

docs/proposal/title.tex

+\newcommand{\HRule}{\rule{\linewidth}{0.5mm}}
+
+\begin{titlepage}
+\begin{center}
+\includegraphics[width=1\textwidth]{uva}\\[0.5cm]
+
+\HRule \\[0.2cm]
+{ \huge \LARGE \textbf{\projectName}\\[0.1cm]
+ \vspace{0.2cm}}
+\HRule \\[0.4cm]
+\Large \today
+
+\vfill
+
+\begin{tabular}{ll}
+	\textbf{Supervisor:}  & 	\textbf{Executive:}  \\
+	Robert Belleman  - U.v.A &  Richard Torenvliet \\
+	& stdnmr: 6138861 \\ 
+	& email: Richard.Torenvliet@student.uva.nl
+\end{tabular}
+\end{center}
+\end{titlepage}
\ No newline at end of file

www/app/Api.js

-//    GET /drfsm/<test_id>/results/izid/<izid>.csv
-
-// for example
-
-//    GET /drfsm/5/results/izid/1234.csv
-
-
 Ext.define('app.Api', {
 	mixins: ['Ext.mixin.Observable'],
 	singleton: true,
@@ -13,7 +6,7 @@ Ext.define('app.Api', {
 		var me = this;
 		var requestName = Ext.Ajax.request({
             method: 'GET',
-            url: 'http://sangkil.science.uva.nl:8003/area/1/izid.json?latlng=' + lat + ',' + lng,
+            url: 'http://sangkil.science.uva.nl:8003/area/'+area_id+'/izid.json?latlng=' + lat + ',' + lng,
 	        
 	        success: function(response, opts){
 	            var result = Ext.decode(response.responseText);
@@ -21,26 +14,22 @@ Ext.define('app.Api', {
 	        },
 
 	        failure: function(){
-	             console.log('failed to get izid');
+	             console.log('getIzid: failed to get izid');
         	}
         });
 	},
 
 	getCsvFile: function(test_id, izid) {
-		console.log(izid);
-		console.log()
-		console.log('/drfsm/'+test_id+'/results/izid/'+izid+'.csv');
 		var me = this;
      	var requestName = Ext.Ajax.request({
             method: 'GET',
             url: 'http://sangkil.science.uva.nl:8003/drfsm/'+test_id+'/results/izid/'+izid+'.csv',
 	        success: function(response, opts){
-	        	console.log(opts)
 	            me.fireEvent('gotCsv', response.responseText)
 	        },
 
 	        failure: function(){
-	             console.log('failed to get csv file');
+	             console.log('getCsvFile: failed to get csv file');
         	}
         });
 	}

www/app/controller/ChartController.js

@@ -11,11 +11,13 @@ Ext.define('app.controller.ChartController', {
 				autoCreate: true,
 			},
 
-			chartData : {
+			ChartData : {
 				selector: 'flood-chart-id',
 				autoCreate: true,
 			},
 
+			ExpandButton: '#expand-button',
+
 			mapView: 'SimulationMap',
 		},
 
@@ -26,11 +28,16 @@ Ext.define('app.controller.ChartController', {
 
 			'#closeChart': {
 				tap: 'closeFloodChart'
-			}
+			},
+
+			'#expand-button': {
+				tap: 'expandChart'
+			},
 		},
 	},
 
 	init: function(){
+		self.marker = null;
 		me = this;
 		app.Api.on({
 			gotIzid: function(izid){
@@ -47,7 +54,19 @@ Ext.define('app.controller.ChartController', {
 		me = this;
 		this.getMapView().on({
 			gotClick: function(event){
-				app.Api.getIzid(event.latLng.lat(), event.latLng.lng())
+				if (self.marker != null) {
+					self.marker.setMap(null);
+					self.marker = null;
+				}
+				lat = event.latLng.lat();
+				lng = event.latLng.lng();
+				options = {
+					icon: 'resources/images/crosshair.png',
+					draggable: true,
+					raiseOnDrag: true,
+				};
+				self.marker = me.getMapView().createMarker([lat, lng], options);
+				app.Api.getIzid(lat, lng, me.getMapView().areaId)
 			}
 		});
 	},
@@ -63,31 +82,31 @@ Ext.define('app.controller.ChartController', {
 		for (i = 1; i < array.length; i++)
 		{
 			line_clmns = array[i].split(',');
+			console.log(parseInt(line_clmns[0]));
 			data.push({
-				time : time.push(parseInt(line_clmns[0]) + i * 100),
-				volume : volume.push(line_clmns[1])
+				time : parseInt(line_clmns[0]),
+				volume : parseInt(line_clmns[2]),
+				time1 : parseInt(line_clmns[0]),
+				volume1: parseInt(line_clmns[2])
 			});
 		}
 
-
-	 	console.log(data);
-	 	
-		this.openChart();
+	 	store.setData(data);
+	 	this.openChart();
 	},
 
-	getFile: function(result){
-		app.Api.getCsvFile(result['izid']);
+	openChart: function(){
+		this.getFloodchart().showBy(this.getMapView(), 'bl-bl');
+
 	},
 
 	closeFloodChart: function(){
 		this.getFloodchart().hide();
 	},
 
-	getData: function(latLng){
-		app.Api.getIzid(latLng.lat(), latLng.lng())
-	},
+	expandChart: function(){
+		
+		
+	}
 
-	openChart: function(){
-		this.getFloodchart().showBy(this.getMapView());
-	},
 });
\ No newline at end of file

www/app/controller/Main.js

@@ -373,8 +373,4 @@ Ext.define('app.controller.Main', {
             this.SimulType = 'Flood'
         this.getSimulationOptions().hide();  
     },
-
-    pushSimulationList: function(){
-        //this.getSidepanel().push(this.getLsmSimulation());
-    }
 });

www/app/store/chartStore.js

@@ -2,13 +2,13 @@ Ext.define('app.store.chartStore', {
 	extend: 'Ext.data.JsonStore',
 
 	config : {
-		fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
-    	data: [
-    		{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
-    		{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
-    		{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
-    		{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
-    		{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
-		]
+		fields: ['time', 'volume'],
+  //   	data: [
+  //   		{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
+  //   		{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
+  //   		{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
+  //   		{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
+  //   		{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
+		// ]
 	}
 });
\ No newline at end of file

www/app/view/Chart.js

-// var drawComponent = new Ext.draw.Component({
-//     config: {
-//         width: 100,
-//     },
-//     items: [{
-//         type: 'circle',
-//         fill: '#79BB3F',
-//         radius: 20,
-//     }]
-// });
-
-// var store = new Ext.data.JsonStore({
-//         fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
-//         data: [
-//             {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
-//             {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
-//             {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
-//             {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
-//             {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}                                                
-//         ]
-// });
-
-// var chart = new Ext.chart.Chart({
-//     //animate: true,
-//     store: store,
-//     width: 500,
-//     height: 200,
-    
-//     axes: [
-//         {
-//             type: "Numeric",
-//             position: 'left',
-//             fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
-//             title: 'Numeric',
-//             minimum: 0,
-//         },
-//         {
-//             type: 'Category',
-//             position: 'bottom',
-//             fields: ['name'],
-//             title: 'Category',
-//             label: {
-//                 rotate: {
-//                     degrees: 35
-//                 }
-//             }
-//         }
-//     ],
-
-//     series: [{
-//         type: 'area',
-//         highlight: false,
-//         axis: 'left',
-//         xField: 'name',
-//         yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
-//         style: {
-//             opacity: 0.93
-//         }
-//     }]
-// });
-
 Ext.define('app.view.Chart', {
 	extend: 'Ext.Panel',
     id: 'flood-chart',
@@ -67,45 +6,53 @@ Ext.define('app.view.Chart', {
 
 	config: {
         width: 520,
-        height: 220,
-        draggable: true,
+        height: 420,
+        layout: 'fit',
+        draggable: false,
 		items: [{
             xtype: 'chart',
+            theme: 'Base',
+            animate: true,
             id: 'flood-chart-id',
             store: 'chartStore',
-            width: 500,
-            height: 200,
+            width: 520,
+            height: 400,
             axes: [
                 {
                     type: "Numeric",
                     position: 'left',
-                    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
-                    title: 'Numeric',
+                    fields: ['volume'],
+                    title: 'Volume',
                     minimum: 0,
+                    adjustMinimumByMajorUnit: 0,
                 },
                 {
                     type: 'Category',
                     position: 'bottom',
-                    fields: ['name'],
-                    title: 'Category',
-                    label: {
-                        rotate: {
-                            degrees: 35
-                        }
-                    }
+                    fields: ['time'],
+                    title: 'Time Step',
+                    minimum: 0,
+                    adjustMinimumByMajorUnit: 0,
                 }
             ],
 
             series: [{
-                type: 'area',
+                type: 'line',
                 highlight: false,
+                smooth: true,
                 axis: 'left',
-                xField: 'name',
-                yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
-                style: {
-                    opacity: 0.93
-                }
-            }]
+                xField: ['time'],
+                yField: ['volume'],
+            }],
+
+            // interactions: [
+            // {
+            //     type: 'panzoom',
+            //     axes: ['bottom', 'left']
+            // },
+            // {
+            //     type: 'reset'
+            // }]
         },
         {
             xtype: 'button',
@@ -117,25 +64,22 @@ Ext.define('app.view.Chart', {
             height: 30,
             cls: 'closebutton',
             style: 'background: url(resources/images/closebutton50.png) no-repeat; background-size: 30px; border: none',
-
-        }]
+        }],
+        // {
+        //     xtype: 'button',
+        //     ui: 'toggle',
+        //     top: 0,
+        //     right: 0,
+        //     text: 'drag'
+        // },
+        // {
+        //     xtype: 'button',
+        //     id: 'expand-button',
+        //     bottom: 0,
+        //     right: 0,
+        //     iconCls: 'expand',
+        //     iconMask: true,
+            
+        // }]
     }
-});
-
+});
\ No newline at end of file
-// (function(){
-// 	var drawComponent = new Ext.draw.Component({
-//     items: [{
-//         type: 'circle',
-//         fill: '#79BB3F',
-//         radius: 100,
-//         x: 100,
-//         y: 100
-//     }]
-// });
-
-// new Ext.Panel({
-//     fullscreen: true,
-//     items: [drawComponent]
-// });
-
-// })();

www/app/view/List.js

@@ -15,7 +15,7 @@ Ext.define("app.view.List",
 		navigationBar:
 		{
 			title: 'simulations',
-			ui: 'charcoal',
+			
             items : [{
     	          id: 'simulationOptions',
 	              xtype: 'button',

www/app/view/Map.js

@@ -48,23 +48,35 @@ Ext.define('app.view.Map', {
 	 */
 	alterMapOptions: function(options){
 		this.globalExtMap.setMapOptions(options);
-	},
-
-	/*
-	 * createMarker: 
-     *  sets marker at pos
+     },
+    /*  sets marker at pos
      * @params: 
      *		pos = [latitude, longitude]
      * 
 	 */
-	createMarker: function(pos){
+	createMarker: function(pos, options){
         var pos = new google.maps.LatLng(pos[0], pos[1]);
-        new google.maps.Marker({
+        if (options != null){
+        	icon = options['icon'] || 'resources/images/Google_Maps_Marker.png';
+        	draggable = options['draggable'] || false;
+        	raiseOnDrag = options['raiseOnDrag'] || false;
+    	}
+    	else {
+    		icon = 'resources/images/Google_Maps_Marker.png';
+    		draggable = false;
+    		raiseOnDrag = false;
+    	}
+
+        marker = new google.maps.Marker({
             position: pos,
-            icon: 'resources/images/Google_Maps_Marker.png',
+            icon: icon,
             map: this.globalMap,
-            title: 'you'
+            title: 'you',
+      		raiseOnDrag: true,
+            draggable: draggable,
+
 		});
+		return marker;
 	},
 
 	// 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png'
@@ -105,7 +117,7 @@ Ext.define('app.view.Map', {
 
 		/*remove clickevent and add to new image*/
 		if (this.listeners_ref != null)
-			google.maps.event.removeListener(listenerHandle);
+			google.maps.event.removeListener(this.listeners_ref);
 
 		this.listeners_ref = google.maps.event.addListener(this.overlayImages[0], 'click', function(event){
 			me.fireEvent('gotClick', event);
@@ -124,8 +136,10 @@ Ext.define('app.view.Map', {
 		//this.overlayImages[this.imageIndex - 1].setMap(null);
 		this.overlayImages[this.imageIndex].setMap(this.globalMap);	
 
-		if (this.listeners_ref != null)
-			google.maps.event.removeListener(listenerHandle);
+		if (this.listeners_ref != null){
+			google.maps.event.removeListener(this.listeners_ref);
+		}
+
 
 		this.listeners_ref = google.maps.event.addListener(this.overlayImages[this.imageIndex], 'click', function(event){
 			me.fireEvent('gotClick', event);

www/app/view/Simulation.js

@@ -9,13 +9,7 @@ Ext.define('app.view.Simulation', {
         {   
             docked: 'top',
             xtype: 'toolbar',
-            ui: 'charcoal',
             title: 'Flood Simulation Browser',
-            items: [{
-                id: 'create-chart',
-                xtype: 'button',
-                text: 'create chart',
-            }]
         },
         {
             xtype: 'SimulationMap',