Skip to content

F
FloodSimulation-Browser
Commit 5700bbf9 authored by Richard's avatar Richard
Browse files
Options

worked on list panel

parent 8045a2c9
Show whitespace changes
Inline Side-by-side
Showing with 126 additions and 45 deletions
www/app/controller/Main.js
View file @ 5700bbf9
...@@ -16,10 +16,6 @@ Ext.define('app.controller.Main', { ...@@ -16,10 +16,6 @@ Ext.define('app.controller.Main', {
tap: 'closeoverlay', tap: 'closeoverlay',
}, },
'sliderfield': {
change: 'callNextImage'
},
'listpanel #summary': { 'listpanel #summary': {
itemtap: 'simulation', itemtap: 'simulation',
}, },
...@@ -52,8 +48,10 @@ Ext.define('app.controller.Main', { ...@@ -52,8 +48,10 @@ Ext.define('app.controller.Main', {
}, },
callRemoveImages: function() { callRemoveImages: function() {
this.getMapView().removeImages();
console.log('hide removeimages'); console.log('hide removeimages');
this.getOverlay().hide(); this.getOverlay().hide();
}, },
prevImage: function(){ prevImage: function(){
...@@ -65,6 +63,8 @@ Ext.define('app.controller.Main', { ...@@ -65,6 +63,8 @@ Ext.define('app.controller.Main', {
}, },
closeoverlay: function() { closeoverlay: function() {
//console.log(this.getMapView().getCurrentImage());
this.setThumb();
console.log('call removeimages'); console.log('call removeimages');
console.log(this.getOverlay()); console.log(this.getOverlay());
this.getMapView().removeImages(); this.getMapView().removeImages();
...@@ -72,33 +72,48 @@ Ext.define('app.controller.Main', { ...@@ -72,33 +72,48 @@ Ext.define('app.controller.Main', {
}, },
setMap: function(extmap, map){ setMap: function(extmap, map){
this.test_id = null;
this.globalMap = map; this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map); this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = []; this.selectedIndex = [];
}, },
simulation: function(list, index, element, record) { simulation: function(list, index, element, record) {
var cb = function(result){
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
}
console.log(record);
var store = Ext.getStore('SimulationDetailsStore'); var store = Ext.getStore('SimulationDetailsStore');
var test_id = record.get('test_id'); var test_id = record.get('test_id');
console.log(test_id)
this.test_id = test_id;
console.log(this.this_id);
var map = this.getMapView(); var map = this.getMapView();
var bounds; var bounds;
console.log(store);
store.each(function(r){ store.each(function(r){
bounds = r.get('visbounds'); bounds = r.get('visbounds');
}); });
var request = Ext.Ajax.request({ console.log(bounds);
method: 'GET', this.requestInfo(test_id, cb);
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',
success: function(response, opts){ // success: function(response, opts){
var result = Ext.decode(response.responseText); // var result = Ext.decode(response.responseText);
if (result['timesteps'].length > 0) // if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']); // map.createOverlayImage(bounds, test_id, result['timesteps']);
}, // },
});
// failure: function(){
// console.log('failed to create images');
// }
// });
console.log(this.getOverlay());
this.getOverlay().showBy(element); this.getOverlay().showBy(element);
}, },
...@@ -122,23 +137,26 @@ Ext.define('app.controller.Main', { ...@@ -122,23 +137,26 @@ Ext.define('app.controller.Main', {
direction: 'left', direction: 'left',
duration: 200 duration: 200
}, },
id: 'summary', id: 'summary',
xtype: 'list', xtype: 'list',
store: 'SimulationsSummary', store: 'SimulationsSummary',
itemTpl: '<div>simulation {submitted} - {test_id}</div>', itemTpl: '<div><img class="flood_thumb" id="{test_id}_flood"' +
'style="width: 180px; height: 180px;" alt="noimage.png" src=""/> ' +
'<div style:"clear:both"></div><b>{test_id}</b>: {submitted}</div>',
}); });
this.setThumb(center);
var store = Ext.getStore('SimulationDetailsStore');
store.setUrl(area_id);
store.load();
if (selected == false) if (selected == false)
{ {
this.selectedIndex.push(index); this.selectedIndex.push(index);
var dikes = null; var dikes = null;
var bounds = record.get('visbounds'); var bounds = record.get('visbounds');
var corners = record.get('corners'); var corners = record.get('corners');
var store = Ext.getStore('SimulationDetailsStore');
store.setUrl(area_id);
store.load();
store.each(function(r) { store.each(function(r) {
dikes = r.get('dikes'); dikes = r.get('dikes');
...@@ -147,10 +165,53 @@ Ext.define('app.controller.Main', { ...@@ -147,10 +165,53 @@ Ext.define('app.controller.Main', {
if (dikes.length != 0) if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes); this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center); this.getMapView().createMarker(center);
this.getMapView().createOverlayImage(bounds); //this.getImages();
} }
this.getMapView().setCenterMap(center); this.getMapView().setCenterMap(center);
}, },
setThumb: function(center){
if (typeof this.test_id == undefined)
return;
var me = this;
var summary_store = Ext.getStore('SimulationsSummary');
summary_store.each(function(record){
var test_id = record.get('test_id');
var setImages = function(result){
console.log(result);
//var mapImage ='http://maps.googleapis.com/maps/api/staticmap?center='+ center[0] +','+ center[1] + '&zoom=12&size=512x512&maptype=roadmap&sensor=false';
//document.getElementById(test_id + "_thumb").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]) || 'noimage.png';
console.log(image);
document.getElementById(test_id + "_flood").src = image;
}
console.log(record.get('test_id'));
// console.log(this.requestInfo);
me.requestInfo(record.get('test_id'), setImages);
});
// if (typeof this.test_id != undefined) {
// document.getElementById(this.test_id + "_thumb").src = this.getMapView().getCurrentImage();
// }
},
requestInfo: function(test_id, callback){
var request = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
success: function(response, opts){
var result = Ext.decode(response.responseText);
callback(result);
},
failure: function(){
console.log('failed to create images');
}
});
}
}); });
......
www/app/view/Main.js
View file @ 5700bbf9
...@@ -15,11 +15,10 @@ Ext.define("app.view.Main", { ...@@ -15,11 +15,10 @@ Ext.define("app.view.Main", {
flex: 1 flex: 1
}, },
{ {
title: "map",
xtype: 'simulationpanel', xtype: 'simulationpanel',
flex: 2 flex: 2
}, },
] ]
} }
}); });
\ No newline at end of file
www/app/view/Map.js
View file @ 5700bbf9
...@@ -62,7 +62,7 @@ Ext.define('app.view.Map', { ...@@ -62,7 +62,7 @@ Ext.define('app.view.Map', {
// 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png' // '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' ; // 'http://sangkil.science.uva.nl:8003/drfsm/207/visualization/level/map/300.png' ;
createOverlayImage: function(bounds, area_id, timesteps) { createOverlayImage: function(bounds, area_id, timesteps) {
//console.log('createOverlayImage'); console.log('createOverlayImages ' + timesteps);
this.imageIndex = 0; this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds( this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]), new google.maps.LatLng(bounds[2],bounds[3]),
...@@ -78,36 +78,27 @@ Ext.define('app.view.Map', { ...@@ -78,36 +78,27 @@ Ext.define('app.view.Map', {
for (i in timesteps) for (i in timesteps)
{ {
//if (i > 0 && this.overlayImages.length > 0) console.log(i);
// this.overlayImages[i - 1].setMap(null);
var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png'; 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.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
this.Images.push(image);
} }
var overlay = new google.maps.GroundOverlay(this.Images[0], this.imageBounds, {map: this.globalMap}); console.log(this.overlayImages);
this.overlayImages.push(overlay); this.overlayImages[0].setMap(this.globalMap);
}, },
nextImage: function() nextImage: function()
{ {
var lastImagesIndex = this.imageIndex; var lastImagesIndex = this.imageIndex;
this.imageIndex += this.imageIndex <= this.Images.length - 2 ? 1 : 0; this.imageIndex += this.imageIndex <= this.overlayImages.length - 2 ? 1 : 0;
console.log(this.imageIndex); console.log(this.imageIndex);
if (this.imageIndex != lastImagesIndex) if (this.imageIndex != lastImagesIndex)
{ {
if (this.imageIndex >= this.overlayImages.length || this.overlayImages.length == 0)
{
var overlay = new google.maps.GroundOverlay(this.Images[this.imageIndex], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
console.log(this.overlayImages);
console.log("pushed "+ overlay);
} else {
console.log(this.overlayImages);
this.overlayImages[this.imageIndex].setMap(this.globalMap); this.overlayImages[this.imageIndex].setMap(this.globalMap);
} console.log(this.overlayImages[this.imageIndex]);
this.overlayImages[this.imageIndex - 1].setMap(null); this.overlayImages[this.imageIndex - 1].setMap(null);
} }
}, },
prevImage: function() prevImage: function()
...@@ -152,5 +143,20 @@ Ext.define('app.view.Map', { ...@@ -152,5 +143,20 @@ Ext.define('app.view.Map', {
}); });
rectangle.setMap(this.globalMap); rectangle.setMap(this.globalMap);
},
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;
} }
}); });
\ No newline at end of file
www/app/view/Simulation.js
View file @ 5700bbf9
...@@ -25,8 +25,8 @@ Ext.define('app.view.Simulation', { ...@@ -25,8 +25,8 @@ Ext.define('app.view.Simulation', {
iconCls: 'delete', iconCls: 'delete',
iconMask: true, iconMask: true,
width: 45, width: 45,
bottom: -30, top: -30,
right: -20, left: -20,
}, },
{ {
layout: 'vbox', layout: 'vbox',
......
www/index.html
View file @ 5700bbf9
...@@ -63,6 +63,21 @@ ...@@ -63,6 +63,21 @@
opacity:0.3 opacity:0.3
} }
} }
.x-container .x-scroll-view{
border-right: solid #ababab;
}
.flood_thumb {
margin-right: 20px;
z-index: 100;
left: 10px;
top: 10px;
border: solid #ababab;
background: white;
}
</style> </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
......
Markdown is supported
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