worked on presentation and made components draggable

docs/end_presentation/Makefile

@@ -2,7 +2,6 @@ presentation.pdf: presentation.tex
 
 %.pdf: %.tex
 	pdflatex $^
-	pdflatex $^
 
 %.bbl: %.bib
 	pdflatex scriptie.tex

docs/end_presentation/presentation.tex

@@ -20,6 +20,9 @@
 \begin{frame}
 \maketitle
 \end{frame}
+\begin{frame}
+\tableofcontents
+\end{frame}
 \section{Introductie}
 \begin{frame}
 \frametitle{Introduction}
@@ -29,9 +32,11 @@
 \item Urban Flood Project
 \item Early Warning System
 \item Burgers en Hulpdiensten
+\item Steeds Belangrijker
 \item Sensoren in dijk + Internet
-\item Water Simulatie
 \item Hoogte Kaart
+\item Water Simulatie
+\item Voorlichting met multi-touch table
 \end{itemize}
 \column{2.0in}
 \begin{figure}
@@ -46,7 +51,6 @@
 \begin{columns}[c]
 \column{5cm}
 \begin{itemize}
-\item Visualisatie laten zien
 \item Informeren over overstromingsgebied
 \item Zien wat er als eerst onderwater gaat
 \item Evacuatie routes
@@ -61,16 +65,18 @@
 \end{figure}
 \end{columns}
 \end{frame}
-\section{De requirements}
+\section{Dit project}
 \begin{frame}
-\frametitle{Requirements}
+\frametitle{Dit Project}
 \begin{itemize}
+\item Toegankelijkheid vergroten
 \item Browser geschikt maken voor Tablets
 \item Server levert plaatjes + coördinaten (Bounding Box)
-\item Plaatjes over Google maps leggen - uitgebreid API support voor overlays
+\item Plaatjes over een kaart leggen, e.g. Google Maps
 \item Intuïtief design
-\item Taal/framework keuze
-\item Mijn eis is: Crossplatform
+\item Extra eis: Crossplatform, daarmee meer publiek
+\item Onderzoek taal/framework keuze voor Crossplatform
+\item Extra onderzoek: Back-end server testen.
 \end{itemize}
 \end{frame}
 \section{App Design}
@@ -80,9 +86,10 @@
 \column{5cm}
 \begin{itemize}
 \item Hoe mensen tablets vasthouden (Clark, 2012)
-\item Letten op hierachie in importantie bij plaatsing componenten
+\item Letten op hierachie bij plaatsing componenten(belangrijke knoppen bovenaan)
 \item Weergeven van simulaties (Locaties en bijbehorende simulaties)
 \item Simulatiestappen kunnen doorlopen (controls).
+\item Plotten van informatie over overstroming.
 \end{itemize}
 \column{5cm}
 \begin{figure}
@@ -123,20 +130,22 @@
 \begin{frame}
 \frametitle{Implementatie}
 \begin{columns}
-\column{5cm}
+\column{6cm}
 \begin{itemize}
 \item Sencha Touch 2
-\item Layout
+\item Download sencha touch + SDK Tools (command line tool)
+\item Start met leeg project: \\ \texttt{\$ sencha generate app my\_app}
+\item Layouts bieden layout
 \item Flex 1, 2
 \item List Objecten
 \item Map Object
 \end{itemize}
-\column{5cm}
+\column{4cm}
 \begin{figure}
 \includegraphics[scale=0.3]{docktop.png}
 \end{figure}
 \begin{figure}
-\includegraphics[scale=0.1]{ui/fsb_layout.png}
+\includegraphics[width=4cm]{ui/fsb_layout.png}
 \end{figure}
 \end{columns}
 \end{frame}
@@ -149,7 +158,7 @@
   *+<5ex>[F]{Store}\ar[r]^{\txt<5pc>{fields}} &   *+<5ex>[F]{List}\ar[r] & \includegraphics[scale=0.2]{ui/citieslist.png}\ar[dr] \\
   *+<5ex>[F]{Store}\ar[r]^{\txt<5pc>{fields}} &   *+<5ex>[F]{List}\ar[rr] & & \includegraphics[scale=0.2]{ui/simselected.png}
 }
-\caption{Store and List}
+\caption{Stores and Lists}
 \end{figure}
 \end{frame}
 \begin{frame}
@@ -192,8 +201,9 @@
 \begin{frame}
 \begin{itemize}
 \frametitle{Deployment}
-\item Test in Browser
-\item Build: \textit{sencha app build native}
+\item Snel testen in browser (webkit)
+\item Build naar device:\texttt{\$ sencha app build native}
+\item \texttt{packager.json}
 \begin{itemize}
 	\item iOSSimulator
 	\item iOS
@@ -205,6 +215,7 @@
 
 \section{Server Testing}
 \begin{frame}[fragile]
+\frametitle{Test in Browser}
 \begin{itemize}
 \item Tool: Siege
 \item \url{sangkil.science.uva.nl}
@@ -254,23 +265,25 @@ done
 \bibitem{urban flood}
   Urban Flood Project,
   \url{http://urbanflood.eu/default.aspx}.
-  Retrieved 9 april
+
 \bibitem{Sencha Touch}
 	Sencha Touch 2.
 	\url{http://docs.sencha.com/touch/2-0/}.
-	Retrieved 9 april
+
 \bibitem{Google Maps API}
 	Google Maps API,
 	\url{https://developers.google.com/maps/}.
-	Retrieved 9 april
 \bibitem{PhoneGap}
 	PhoneGap
 	\url{http://www.PhoneGap.com}.
-	Retrieved 9 april
 \bibitem{Titanium Mobile}
 	Titanium Appcelerator,
 	\url{http://www.appcelerator.com/}.
-	Retrieved 9 april
+\bibitem{Scalability}
+	Freimuth, D., Hu E.,LaVoie,  J.,Mraz, R., Nahum, E., Pradhan, P., \& Tracey, J. (2005). Server Network Scalability and TCP Offload.
+	IBM T. J. Watson Research Center
+\bibitem{Touch}
+	Clark,  J.(2012). designing-touch. \url{http://www.netmagazine.com/features/designing-touch}.
 \end{thebibliography}
 \end{frame}
 \begin{frame}

www/app/controller/ChartController.js

@@ -38,10 +38,11 @@ Ext.define('app.controller.ChartController', {
 
 	init: function(){
 		self.marker = null;
-		me = this;
+		map = this.getMapView();
+
 		app.Api.on({
 			gotIzid: function(izid){
-				app.Api.getCsvFile(me.getMapView().testId, izid);
+				app.Api.getCsvFile(map.testId, izid);
 			},
 
 			gotCsv: function(result){
@@ -52,7 +53,8 @@ Ext.define('app.controller.ChartController', {
 
 	addListener: function(){
 		me = this;
-		this.getMapView().on({
+		map = this.getMapView();
+		map.on({
 			gotClick: function(event){
 				if (self.marker != null) {
 					self.marker.setMap(null);
@@ -61,12 +63,19 @@ Ext.define('app.controller.ChartController', {
 				lat = event.latLng.lat();
 				lng = event.latLng.lng();
 				options = {
-					icon: 'resources/images/crosshair.png',
+					icon: 'resources/images/marker.png',
 					draggable: true,
 					raiseOnDrag: true,
 				};
-				self.marker = me.getMapView().createMarker([lat, lng], options);
-				app.Api.getIzid(lat, lng, me.getMapView().areaId)
+
+				self.marker = map.createMarker([lat, lng], options);
+				app.Api.getIzid(lat, lng, map.areaId);
+			},
+			dragend: function(event){
+				console.log(event);
+				lat = event.latLng.lat();
+				lng = event.latLng.lng();
+				app.Api.getIzid(lat, lng, map.areaId);		
 			}
 		});
 	},
@@ -82,12 +91,9 @@ 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 : parseInt(line_clmns[0]),
 				volume : parseInt(line_clmns[2]),
-				time1 : parseInt(line_clmns[0]),
-				volume1: parseInt(line_clmns[2])
 			});
 		}
 
@@ -96,7 +102,7 @@ Ext.define('app.controller.ChartController', {
 	},
 
 	openChart: function(){
-		this.getFloodchart().showBy(this.getMapView(), 'bl-bl');
+		this.getFloodchart().showBy(this.getMapView(), 't-t');
 
 	},
 

www/app/controller/Main.js

@@ -243,7 +243,7 @@ Ext.define('app.controller.Main', {
         this.requestInfo(test_id, cb, url);
 
         /*show overlay*/
-        this.getOverlay().showBy(this.getMapView(), 'br-br');
+        this.getOverlay().showBy(this.getMapView(), 'tr-tr');
     },
 
     /* When an area is selected, this function is executed

www/app/view/Chart.js

@@ -8,14 +8,15 @@ Ext.define('app.view.Chart', {
         width: 520,
         height: 420,
         layout: 'fit',
-        draggable: false,
+        draggable: true,
 		items: [{
             xtype: 'chart',
             theme: 'Base',
             animate: true,
             id: 'flood-chart-id',
             store: 'chartStore',
-            width: 520,
+            left: 20,
+            width: 490,
             height: 400,
             axes: [
                 {
@@ -56,14 +57,13 @@ Ext.define('app.view.Chart', {
         },
         {
             xtype: 'button',
-            ui: 'circle ',
+            ui: 'close',
             id: 'closeChart',
-            left: -15,
-            top: -15,
-            width: 30,
-            height: 30,
-            cls: 'closebutton',
-            style: 'background: url(resources/images/closebutton50.png) no-repeat; background-size: 30px; border: none',
+            left: 0,
+            top: 0,
+            iconCls: 'delete',
+            iconMask: true,
+            //style: 'background: url(resources/images/closebutton50.png) no-repeat; background-size: 30px; border: none',
         }],
         // {
         //     xtype: 'button',

www/app/view/List.js

@@ -8,7 +8,7 @@ Ext.define("app.view.List",
 	xtype: 'listpanel',
 
 	requires: [
-		'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
+		'Ext.data.Store', 'Ext.dataview.List'
 	],
 	title: 'Simulations',
 	config: {

www/app/view/Map.js

@@ -26,6 +26,7 @@ Ext.define('app.view.Map', {
 				this.testId = 0;
 				this.areaId = 0;
 				this.listener_ref = null;
+				this.marker_listener = null;
 			}
 		}
 	},
@@ -55,6 +56,7 @@ Ext.define('app.view.Map', {
      * 
 	 */
 	createMarker: function(pos, options){
+		map = this.globalExtMap;
         var pos = new google.maps.LatLng(pos[0], pos[1]);
         if (options != null){
         	icon = options['icon'] || 'resources/images/Google_Maps_Marker.png';
@@ -76,6 +78,12 @@ Ext.define('app.view.Map', {
             draggable: draggable,
 
 		});
+		if (this.marker_listener != null)
+			google.maps.event.removeListener(this.marker_listener);
+
+		this.marker_listener = google.maps.event.addListener(marker, 'dragend', function(event){
+			map.fireEvent('dragend', event);
+		});
 		return marker;
 	},
 
@@ -109,6 +117,7 @@ Ext.define('app.view.Map', {
 			//var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
 			var image = new Image();
 			image.src = url + timesteps[i] + '.png';
+			console.log(image.src);
 			this.overlayImages.push(new google.maps.GroundOverlay(image.src, this.imageBounds));
 		}
 
@@ -140,7 +149,6 @@ Ext.define('app.view.Map', {
 			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/StepsOverlay.js

@@ -14,15 +14,11 @@ Ext.define('app.view.StepsOverlay', {
     		direction:'left',
     	},
 
-    	hideAnimation:{
-    		type: 'slideOut',
-    		direction:'right',
-    	},
-
 		hidden: true,
 	    width: 220,
 	    height: 130,
 	    scroll: false,
+	    draggable: true,
 	    items: [
 	    {
 	        xtype: 'button',
@@ -123,14 +119,7 @@ Ext.define('app.view.StepsOverlay', {
 	        }],
 	    }],
 
-	    listeners: [{
-	    	hide: function(){
-	    		console.log('hide StepsOverlay');
-	    	}
-	    }],
-
 	    closebutton: function(){
-	    	console.log('closebutton');
 	    	Ext.dispatch({
 	    		controller: app.controller.Main,
 	    		action: 'closeoverlay'