Skip to content
Snippets Groups Projects
Commit 81e416db authored by Richard's avatar Richard
Browse files

worked on report

parent d4f30553
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 285 additions and 161 deletions
docs/ipad-landscape.png 0 → 100644
+ 0
− 0
View file @ 81e416db
docs/ipad-landscape.png

1.69 MiB

docs/ipad-landscape2.png 0 → 100644
+ 0
− 0
View file @ 81e416db
docs/ipad-landscape2.png

1.69 MiB

docs/proposal/fsb.pdf
+ 0
− 0
View file @ 81e416db
No preview for this file type
docs/proposal/fsb.tex
+ 50
− 19
View file @ 81e416db
This diff is collapsed.
www/app.js
+ 4
− 3
View file @ 81e416db
......@@ -5,9 +5,9 @@ Ext.Loader.setPath({
//</debug>
Ext.application({
controllers: ["Main"],
controllers: ["Lsm", "Main"],
models: ["SimulationModel", "SimulationDetails"],
stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary', 'LsmStore'],
name: 'app',
......@@ -15,7 +15,8 @@ Ext.application({
'Ext.MessageBox', 'app.CustomProxy'
],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel'],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel',
'SimulationList', 'LsmSimulationList'],
icon: {
57: 'resources/icons/Icon.png',
......
www/app/controller/Main.js
+ 117
− 41
View file @ 81e416db
......@@ -16,6 +16,11 @@ Ext.define('app.controller.Main', {
playBackw: '#play-backw',
pauseBackw: '#pause-backw',
mapView: 'SimulationMap',
simulationList: {
selector: 'summary',
xtype: 'SimulationList',
autoCreate: true,
},
/*use this format if this object is not yet created*/
overlay: {
selector: '#overlay',
......@@ -24,11 +29,27 @@ Ext.define('app.controller.Main', {
},
/*use this format if this object is not yet created*/
simulationOptions: {
selector: 'simulation_options',
selector: '#simulation-options',
xtype: 'SimulationOptions',
autoCreate: true,
},
simOptionsButton: {
selector: '#simulationOptions',
autoCreate: true,
},
optionsList: {
selector:'#optionsList',
autoCreate: true,
},
lsmSimulation: {
selector: 'lsmsimulation-list',
xtype: 'LsmSimulationList',
autoCreate: true,
},
/*the list simulations available in the area selected*/
simulation: 'simulationpanel'
},
......@@ -36,11 +57,13 @@ Ext.define('app.controller.Main', {
/*all event listeners*/
control: {
'listpanel #cities': {
itemtap: 'showOverlay',
itemtap: 'showList',
show: 'initiateCities'
},
'listpanel #summary': {
itemtap: 'simulation',
itemtap: 'simulate',
scroll: 'scroll'
},
'#mapa': {
......@@ -60,7 +83,7 @@ Ext.define('app.controller.Main', {
},
'#simulationOptions': {
tap: 'openSimulations'
tap: 'openSimulationsOptions'
},
'#pause': {
......@@ -78,15 +101,37 @@ Ext.define('app.controller.Main', {
'#play-backw': {
tap: 'playBackwImages'
},
'#optionsList': {
itemtap: 'changeSimulationType',
},
'listpanel #lsmsimulation-list':{
itemtap: 'simulate',
show: 'allo',
}
}
},
scroll: function(){
console.log('scroll');
},
allo: function(){
console.log("allo");
},
initiateCities: function(){
this.getSimOptionsButton().show();
},
/* first function to call */
setMap: function(extmap, map){
this.test_id = null;
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
/*default simulation type*/
this.SimulType = 'Flood';
},
stopBackwImages: function(button){
......@@ -117,6 +162,7 @@ Ext.define('app.controller.Main', {
this.getPause().show();
/*create reference of the mapview, setInterval looses this. scope */
var instance = this.getMapView();
/*store this.interval, for later removal*/
this.interval = setInterval(function() {instance.nextImage()}, 500);
},
......@@ -142,9 +188,11 @@ Ext.define('app.controller.Main', {
},
closeoverlay: function() {
/*show play button and hide pause button*/
/*show play buttons and hide pause buttons*/
this.getPlay().show();
this.getPause().hide();
this.getPlayBackw().show()
this.getPauseBackw().hide();
/*clear interval, even if there wasn't any*/
clearInterval(this.interval);
......@@ -155,32 +203,35 @@ Ext.define('app.controller.Main', {
/* Initialize simulation, responds when tapped on a list item
* of the simulation panel
*/
simulation: function(list, index, element, record) {
simulate: function(list, index, element, record) {
console.log('simulate call');
var me = this;
/*first, remove all images, even if there werent any*/
this.getMapView().removeImages();
//console.log(this.getOverlay());
/*create reference, cb looses scope of this.*/
var map = this.getMapView(),
/*The simulationDetailStore has the details of the */
/*get test_id*/
/*The simulationDetailStore has the details of the get test_id*/
test_id = record.get('test_id'),
/*bounds variable used later on*/
bounds;
/*store test_id globaly for use in other functions*/
this.test_id = test_id;
this.test_id = test_id;
/* callback, executed when ajax call returns
* this function calls the map object to create overlays
* for retrieved timessteps
* for retrieved timesteps
*/
var cb = function(result){
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
var timesteps = result['timesteps'] || result['images'];
console.log(timesteps);
if (timesteps.length > 0)
map.createOverlayImage(bounds, test_id, timesteps, me.SimulType);
}
var store = Ext.getStore('SimulationDetailsStore');
/*Get visbounds, for later use in overlay map*/
store.each(function(r) {
bounds = r.get('visbounds');
......@@ -189,7 +240,15 @@ Ext.define('app.controller.Main', {
/* The information of the simulation, has data of the time
* steps available, crucial data for the displaying the images.
*/
this.requestInfo(test_id, cb);
//console.log(this.getSimulationOptions().getSelectedCls())
var url = '';
if (this.SimulType == 'Flood')
{
url = 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json';
console.log(this.SimulType);
}
else url = 'http://sangkil.science.uva.nl:8003/lsm/'+ test_id +'/visualization/paru/info.json';
this.requestInfo(test_id, cb, url);
/*show overlay*/
this.getOverlay().showBy(this.getMapView(), 'br-br');
......@@ -200,7 +259,10 @@ Ext.define('app.controller.Main', {
* Set map center to the center of the area that was tapped
* Create a polygon dikes if there is information about them
*/
showOverlay: function(list, index, element, record){
showList: function(list, index, element, record){
this.getSimOptionsButton().hide();
//console.log(this.getSimulationOptions());
//this.getSimulationOptions().hide();
/*Remove images, even if there werent any*/
this.getMapView().removeImages();
/*store center*/
......@@ -217,7 +279,9 @@ Ext.define('app.controller.Main', {
/* Instance of the store of all images data*/
var store = Ext.getStore('SimulationsSummary');
var store_lsm = Ext.getStore('LsmStore');
store_lsm.clearFilter();
store_lsm.filter("area_id", area_id);
/* clear filter, if the flters are not cleared, they will
* be filtered on top of each other, resuting in an unwanted
* state.
......@@ -226,26 +290,17 @@ Ext.define('app.controller.Main', {
store.filter("area_id", area_id);
/*push the side panel, in future create the view somewhere else*/
this.getSidepanel().push({
showAnimation: {
type: 'slide',
direction: 'left',
duration: 200
},
id: 'summary',
xtype: 'list',
store: 'SimulationsSummary',
itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' +
'src=""/> ' +
'<img class="flood_thumb" id="{test_id}_flood"' +
'style:"width: 100px;" src=""/>' +
'<div style:"clear:both">' +
'<div id="{test_id}_control" class="control"></div>' +
'</div><b>{test_id}</b>: {submitted}</div></div>',
});
console.log(this.SimulType);
if (this.SimulType == 'Flood')
{
this.setThumb(center);
this.getSidepanel().push(this.getSimulationList());
}
else if(this.SimulType == 'Lsm')
this.getSidepanel().push(this.getLsmSimulation());
/*set thumb images*/
this.setThumb(center);
//this.setThumb(center);
/*the store with details of the of the simulation*/
var store = Ext.getStore('SimulationDetailsStore');
......@@ -268,6 +323,9 @@ Ext.define('app.controller.Main', {
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
this.getSimulationOptions().show();
this.getSimulationOptions().hide();
}
this.getMapView().setCenterMap(center);
......@@ -275,28 +333,30 @@ Ext.define('app.controller.Main', {
},
/* Set the thumb, the image is the last image of the simulation */
setThumb: function(center){
setThumb: function(){
if (typeof this.test_id == undefined)
return;
var me = this;
var summary_store = Ext.getStore('SimulationsSummary');
// var mapImage ='http://maps.googleapis.com/maps/api/staticmap?center='+ center[0] +','+ center[1] + '&zoom=13&size=300x180&maptype=roadmap&sensor=false';
summary_store.each(function(record){
var test_id = record.get('test_id');
var setImages = function(result){
// document.getElementById(test_id + "_map").src = mapImage;//me.getMapView().getFloodImage(test_id, result['timesteps'][result['timesteps'].length - 1]);
var image = me.getMapView().getFloodImage(test_id, result['timesteps'][result['timesteps'].length - 1]) || 'recourses/images/noimage.png';
var image = me.getMapView().getFloodImage(test_id, result['timesteps'][result['timesteps'].length - 1]) || 'resources/images/noimage.png';
document.getElementById(test_id + "_flood").src = image;
}
me.requestInfo(record.get('test_id'), setImages);
});
},
requestInfo: function(test_id, callback){
requestInfo: function(test_id, callback, url){
var url = url || 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json';
var request = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
url: url,//'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
success: function(response, opts){
var result = Ext.decode(response.responseText);
......@@ -309,7 +369,23 @@ Ext.define('app.controller.Main', {
});
},
openSimulations: function(element){
this.getSimulationOptions().show();
openSimulationsOptions: function(element){
this.getSimulationOptions().showBy(element);
},
closeSimulationsOptions: function(element){
this.getSimulationOptions().hide();
},
changeSimulationType: function(list, index, element, record){
if (record.get('type') == 'Lsm' && this.SimulType != 'Lsm')
this.SimulType = 'Lsm'
else if (record.get('type') == 'Flood' && this.SimulType != 'Flood')
this.SimulType = 'Flood'
this.getSimulationOptions().hide();
},
pushSimulationList: function(){
//this.getSidepanel().push(this.getLsmSimulation());
}
});
www/app/view/List.js
+ 11
− 1
View file @ 81e416db
......@@ -17,9 +17,19 @@ Ext.define("app.view.List",
navigationBar:
{
title: 'simulations',
ui: 'darker_blue',
//html: '<h1>Simulations Panel</h1>',
items : [{
id: 'simulationOptions',
xtype: 'button',
text: 'simulations',
left: '100%',
top: 7,
ui: ['square','blue'],
}]
},
items: [
{
id: 'cities',
......
www/app/view/LsmSimulationList.js 0 → 100644
+ 9
− 0
View file @ 81e416db
Ext.define('app.view.LsmSimulationList', {
extend: 'Ext.List',
xtype: 'LsmSimulationList',
id: 'lsmsimulation-list',
config: {
store: 'LsmStore',
itemTpl: '{submitted}',
}
});
\ No newline at end of file
www/app/view/Main.js
+ 2
− 0
View file @ 81e416db
......@@ -9,6 +9,8 @@ Ext.define("app.view.Main", {
items: [
{
xtype: 'listpanel',
width: '20%',
style: 'border-right: 1px solid #373737',
flex: 1,
},
{
......
www/app/view/Map.js
+ 35
− 13
View file @ 81e416db
......@@ -54,19 +54,30 @@ Ext.define('app.view.Map', {
var pos = new google.maps.LatLng(pos[0], pos[1]);
new google.maps.Marker({
position: pos,
icon: 'Google_Maps_Marker.png',
icon: 'resources/images/Google_Maps_Marker.png',
map: this.globalMap,
title: 'you'
});
},
// '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) {
createOverlayImage: function(bounds, area_id, timesteps, simulationType) {
console.log(timesteps);
var url = '';
if (simulationType == 'Flood')
{
url = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/';
}
else if (simulationType == 'Lsm')
{
url = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id + '/visualization/paru/map/';
}
else return false;
console.log(url);
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
......@@ -75,30 +86,41 @@ Ext.define('app.view.Map', {
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)
{
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));
//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));
}
this.overlayImages[0].setMap(this.globalMap);
this.imageIndex = this.overlayImages.length;
},
/* set next Image*/
nextImage: function()
{
var lastImagesIndex = this.imageIndex;
this.imageIndex += this.imageIndex <= this.overlayImages.length - 2 ? 1 : 0;
if (this.imageIndex != lastImagesIndex)
{
this.overlayImages[this.imageIndex].setMap(this.globalMap);
this.overlayImages[this.imageIndex - 1].setMap(null);
}
if (this.overlayImages.length <= 1)
return;
var lastIndex = (this.overlayImages.length + this.imageIndex) % this.overlayImages.length;
this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % this.overlayImages.length;
//this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % (this.overlayImages.length);
console.log(this.imageIndex);
//this.overlayImages[this.imageIndex - 1].setMap(null);
this.overlayImages[this.imageIndex].setMap(this.globalMap);
this.overlayImages[lastIndex].setMap(null);
//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length);
console.log(this.imageIndex);
},
/*set prev image*/
prevImage: function()
{
if (this.overlayImages.length <= 1)
return;
this.overlayImages[this.imageIndex].setMap(null);
this.imageIndex -= this.imageIndex > 0 ? 1 : 0;
......
www/app/view/OptionsPanel.js
+ 9
− 5
View file @ 81e416db
......@@ -2,20 +2,24 @@ Ext.define('app.view.OptionsPanel', {
extend: 'Ext.Panel',
xtype: 'SimulationOptions',
id: 'simulation_options',
requires: ['Ext.dataview.List'],
config: {
layout: 'hbox',
right: 40,
width: 200,
height: 100,
//scroll: true,
hideOnMaskTap: true,
modal: true,
items: [{
items: [
{
xtype: 'list',
fullscreen: true,
id: 'optionsList',
width: '100%',
itemTpl: 'Simulation {type}',
data: [
{type: "Flood Simulation"},
{type: "Flood"},
{type: "Lsm"}
],
}]
}],
}
});
\ No newline at end of file
www/app/view/Simulation.js
+ 1
− 53
View file @ 81e416db
......@@ -10,62 +10,10 @@ Ext.define('app.view.Simulation', {
xtype: 'toolbar',
ui: 'darker_blue',
title: 'Flood Simulation Browser',
items : [{
id: 'simulationOptions',
xtype: 'button',
text: 'simulations',
right: 0,
top: 7,
ui: ['square','blue'],
}]
},
{
xtype: 'SimulationMap',
flex: 2,
}],
}
});
// {
// xtype: 'panel',
// id: 'overlay',
// hidden: true,
// width: 300,
// height: 80,
// scroll: false,
// items: [
// {
// xtype: 'button',
// id: 'closebutton',
// iconCls: 'delete',
// iconMask: true,
// width: 45,
// top: -30,
// left: -20,
// },
// {
// layout: 'vbox',
// top: 15,
// align: 'center',
// items : [
// {
// xtype: "button",
// id: 'backwards',
// width: 45,
// iconCls: 'arrow_left',
// floating: 'right',
// iconMask: true,
// left: 90,
// align: 'center',
// },
// {
// xtype: "button",
// id: 'forward',
// width: 45,
// floating: 'left',
// iconCls: 'arrow_right',
// align: 'center',
// left: 155,
// iconMask: true,
// }]
// },
\ No newline at end of file
});
\ No newline at end of file
www/app/view/SimulationList.js 0 → 100644
+ 27
− 0
View file @ 81e416db
Ext.define('app.view.SimulationList', {
extend: 'Ext.List',
xtype: 'SimulationList',
id: 'summary',
config: {
scrollable: {
momentum: false
},
fullscreen: true,
store: 'SimulationsSummary',
itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' +
'src=""/> ' +
'<img class="flood_thumb" id="{test_id}_flood"' +
'style:"width: 100px;" src=""/>' +
'<div style:"clear:both">'+
'<div id="{test_id}_control" class="control"></div>' +
'</div><h3><b>submitted:</b></h3> <bold>{submitted}</bold></div></div>'
},
listeners : {
scroll: function() {
console.log('scroll');
}
}
});
\ No newline at end of file
www/app/view/StepsOverlay.js
+ 4
− 4
View file @ 81e416db
......@@ -7,6 +7,7 @@ Ext.define('app.view.StepsOverlay', {
config: {
style: "background: none",
id: 'overlay',
html: 'Controls',
showAnimation: {
type: 'slideIn',
direction:'left',
......@@ -17,10 +18,9 @@ Ext.define('app.view.StepsOverlay', {
direction:'right',
},
//autoDestroy: true,
hidden: true,
width: 200,
height: 100,
width: 220,
height: 130,
scroll: false,
items: [
{
......@@ -38,7 +38,7 @@ Ext.define('app.view.StepsOverlay', {
},
{
top: 10,
left: 30,
left: 35,
align: 'center',
items : [
{
......
www/build/package/app.js
+ 1
− 1
View file @ 81e416db
This diff is collapsed.
www/build/package/index.html
+ 3
− 9
View file @ 81e416db
......@@ -64,19 +64,13 @@
}
}
.x-container .x-scroll-view{
border-right: solid #ababab;
}
.flood_thumb {
position: relative;
z-index: 100;
left: 10px;
left: 0px;
top: 10px;
width: 300px;
height: 180px;
border: solid #ababab;
width: 80%;
/* height: 180px;*/
}
.map_thumb {
......
www/index.html
+ 3
− 9
View file @ 81e416db
......@@ -64,19 +64,13 @@
}
}
.x-container .x-scroll-view{
border-right: solid #ababab;
}
.flood_thumb {
position: relative;
z-index: 100;
left: 10px;
left: 0px;
top: 10px;
width: 300px;
height: 180px;
border: solid #a0a0a0;
width: 80%;
/* height: 180px;*/
}
.map_thumb {
......
www/packager.json
+ 2
− 2
View file @ 81e416db
......@@ -5,13 +5,13 @@
* This is the name of your application, which is displayed on the device when the app is installed. On IOS, this should match
* the name of your application in the Apple Provisioning Portal.
*/
"applicationName":"My Application",
"applicationName":"Flood Simulation",
/**
* @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.codefabriek.tipspottmp",
"applicationId":"com.uva.floodsimulation",
/**
* @cfg {String} versionString
......
www/resources/css/app.css
+ 1
− 1
View file @ 81e416db
Source diff could not be displayed: it is too large. Options to address this: view the blob.
www/resources/sass/app.scss
+ 6
− 0
View file @ 81e416db
......@@ -25,4 +25,10 @@
//@include sencha-msgbox;
x-list-item {
// needs latest Compass, add '@import "compass"' to your scss
@include filter-gradient(#00000000, #a6000000, horizontal); // IE6-9
@include background-image(linear-gradient(left, rgba(0,0,0,0) 0%,rgba(132,2,2,0.77) 76%,rgba(5,0,0,1) 99%,rgba(0,0,0,0.65) 100%));
✔ copied to clipboard copy
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment