Skip to content
Snippets Groups Projects
Commit 5700bbf9 authored by Richard's avatar Richard
Browse files

worked on list panel

parent 8045a2c9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
www/app/controller/Main.js
+ 82
− 21
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
+ 2
− 3
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
+ 25
− 19
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
+ 2
− 2
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
+ 15
− 0
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>
......
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