Skip to content

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

worked on list panel

parent 8045a2c9
Hide 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', {
tap: 'closeoverlay',
},
'sliderfield': {
change: 'callNextImage'
},
'listpanel #summary': {
itemtap: 'simulation',
},
......@@ -52,8 +48,10 @@ Ext.define('app.controller.Main', {
},
callRemoveImages: function() {
this.getMapView().removeImages();
console.log('hide removeimages');
this.getOverlay().hide();
},
prevImage: function(){
......@@ -65,6 +63,8 @@ Ext.define('app.controller.Main', {
},
closeoverlay: function() {
//console.log(this.getMapView().getCurrentImage());
this.setThumb();
console.log('call removeimages');
console.log(this.getOverlay());
this.getMapView().removeImages();
......@@ -72,33 +72,48 @@ Ext.define('app.controller.Main', {
},
setMap: function(extmap, map){
this.test_id = null;
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
},
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 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 bounds;
console.log(store);
store.each(function(r){
bounds = r.get('visbounds');
});
var request = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
console.log(bounds);
this.requestInfo(test_id, cb);
// 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);
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
},
});
// success: function(response, opts){
// var result = Ext.decode(response.responseText);
// if (result['timesteps'].length > 0)
// map.createOverlayImage(bounds, test_id, result['timesteps']);
// },
// failure: function(){
// console.log('failed to create images');
// }
// });
console.log(this.getOverlay());
this.getOverlay().showBy(element);
},
......@@ -122,23 +137,26 @@ Ext.define('app.controller.Main', {
direction: 'left',
duration: 200
},
id: 'summary',
xtype: 'list',
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)
{
this.selectedIndex.push(index);
var dikes = null;
var bounds = record.get('visbounds');
var corners = record.get('corners');
var store = Ext.getStore('SimulationDetailsStore');
store.setUrl(area_id);
store.load();
store.each(function(r) {
dikes = r.get('dikes');
......@@ -147,10 +165,53 @@ Ext.define('app.controller.Main', {
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
this.getMapView().createOverlayImage(bounds);
//this.getImages();
}
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
......@@ -14,12 +14,11 @@ Ext.define("app.view.Main", {
xtype: 'listpanel',
flex: 1
},
{
{
title: "map",
xtype: 'simulationpanel',
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', {
// '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' ;
createOverlayImage: function(bounds, area_id, timesteps) {
//console.log('createOverlayImage');
console.log('createOverlayImages ' + timesteps);
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
......@@ -78,36 +78,27 @@ Ext.define('app.view.Map', {
for (i in timesteps)
{
//if (i > 0 && this.overlayImages.length > 0)
// this.overlayImages[i - 1].setMap(null);
console.log(i);
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.Images.push(image);
this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
}
var overlay = new google.maps.GroundOverlay(this.Images[0], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
console.log(this.overlayImages);
this.overlayImages[0].setMap(this.globalMap);
},
nextImage: function()
{
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);
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);
}
},
prevImage: function()
......@@ -152,5 +143,20 @@ Ext.define('app.view.Map', {
});
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', {
iconCls: 'delete',
iconMask: true,
width: 45,
bottom: -30,
right: -20,
top: -30,
left: -20,
},
{
layout: 'vbox',
......
www/index.html
View file @ 5700bbf9
......@@ -63,6 +63,21 @@
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>
<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>
......
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