Skip to content

F
FloodSimulation-Browser
Commit 03f5085d authored by Richard's avatar Richard
Browse files
Options

image overflays are now possible, its still buged right now

parent be7c95c3
Show whitespace changes
Inline Side-by-side
Showing with 221 additions and 87 deletions
www/app.js
View file @ 03f5085d
...@@ -7,15 +7,15 @@ Ext.Loader.setPath({ ...@@ -7,15 +7,15 @@ Ext.Loader.setPath({
Ext.application({ Ext.application({
controllers: ["Main"], controllers: ["Main"],
models: ["SimulationModel", "SimulationDetails"], models: ["SimulationModel", "SimulationDetails"],
stores: ['SimulationStore', 'SimulationDetailsStore'], stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
name: 'app', name: 'app',
requires: [ requires: [
'Ext.MessageBox' 'Ext.MessageBox', 'app.CustomProxy'
], ],
views: ['Main', "Home", "Simulation", "List", 'Map'], views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
icon: { icon: {
57: 'resources/icons/Icon.png', 57: 'resources/icons/Icon.png',
......
www/app/controller/Main.js
View file @ 03f5085d
...@@ -4,64 +4,143 @@ Ext.define('app.controller.Main', { ...@@ -4,64 +4,143 @@ Ext.define('app.controller.Main', {
config: { config: {
refs: { refs: {
map: '#mapa', map: '#mapa',
sidepanel: 'listpanel',
api: 'api',
mapView: 'SimulationMap', mapView: 'SimulationMap',
overlay: '#overlay',
simulation: 'simulationpanel'
}, },
control: { control: {
'listpanel list': { 'listpanel #cities': {
itemtap: 'showOverlay', itemtap: 'showOverlay',
tap: 'closeoverlay'
},
'sliderfield': {
change: 'callNextImage'
},
'listpanel #summary': {
itemtap: 'simulation',
}, },
'#mapa': { '#mapa': {
maprender: 'setMap' maprender: 'setMap'
},
'#closebutton': {
tap: 'closeoverlay'
} }
} }
}, },
callRemoveImages: function(){
},
callNextImage: function(){
this.getMapView().nextImage();
},
closeoverlay: function() {
console.log(this.getOverlay());
this.getOverlay().hide();
},
setMap: function(extmap, map){ setMap: function(extmap, map){
this.globalMap = map; this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map); this.getMapView().setGlobalMap(extmap, map);
// var traffic = new google.maps.TrafficLayer(); this.selectedIndex = [];
// traffic.setMap(map);
}, },
showOverlay: function(list, index, element, record) { simulation: function(list, index, element, record) {
//var area_id = record.get('area_id');
var store = Ext.getStore('SimulationDetailsStore'); var store = Ext.getStore('SimulationDetailsStore');
var area_id = record.get('area_id'); var test_id = record.get('test_id');
var map = this.getMapView(); var map = this.getMapView();
var dikes = null; var bounds;
//store.setUrl(record.get('area_id'));
//console.log(store.getData().getCount()); store.each(function(r){
//console.log(store.getData().getAt(0).get('dikes')); bounds = r.get('visbounds');
//var dikes = store.getData().getAt(0).get('dikes'); });
var bounds = record.get('visbounds');
var center = record.get('center');
var corners = record.get('corners');
var request = Ext.Ajax.request({ var request = Ext.Ajax.request({
method: 'GET', method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json', url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
success: function(response, opts){ success: function(response, opts){
console.log(response);
var result = Ext.decode(response.responseText); var result = Ext.decode(response.responseText);
console.log(this); if (result['timesteps'].length > 0)
if (result['dikes'].length > 0) map.createOverlayImage(bounds, test_id, result['timesteps']);
map.createOverlayPolygon(result['dikes']);
}, },
}); });
//var result = Ext.decode(request.responseText);
// console.log(result); console.log(this.getOverlay());
//if (result['dikes'].length > 0) this.getOverlay().showBy(element);
// this.getMapView().createOverlayPolygon(result['dikes']); },
this.getMapView().createMarker();
//this.getMapView().createOverlayImage(bounds); showOverlay: function(list, index, element, record) {
this.getMapView().setCenterMap(center); this.getMapView().removeImages();
var center = record.get('center');
var selected = false;
var area_id = record.get('area_id');
for (i in this.selectedIndex)
if (this.selectedIndex[i] == index)
selected = true;
var store = Ext.getStore('SimulationsSummary');
store.clearFilter();
store.filter("area_id", area_id);
this.getSidepanel().push({
showAnimation: {
type: 'slide',
direction: 'left',
duration: 200
}, },
callMapPolygon: function(polygon) id: 'summary',
xtype: 'list',
store: 'SimulationsSummary',
itemTpl: '<div>simulation {submitted} - {test_id}</div>',
});
if (selected == false)
{ {
this.getMapView().createOverlayPolygon(polygon); 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');
});
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
this.getMapView().createOverlayImage(bounds);
}
this.getMapView().setCenterMap(center);
},
}); });
// this.getApi.getAreaInfo(area_id, map.createOverlayPolygon);
// var request = Ext.Ajax.request({
// method: 'GET',
// url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json',
// success: function(response, opts){
// console.log(response);
// var result = Ext.decode(response.responseText);
// console.log(this);
// if (result['dikes'].length > 0)
// map.createOverlayPolygon(result['dikes']);
// },
// });
www/app/store/SimulationDetailsStore.js
View file @ 03f5085d
Ext.define('app.store.SimulationDetailsStore', { Ext.define('app.store.SimulationDetailsStore', {
extend: 'Ext.data.Store', extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Rest'], requires: ['app.CustomProxy'],
xtype: 'SimulationDetailsStore', xtype: 'SimulationDetailsStore',
config: { config: {
autoLoad: true,
model: 'app.model.SimulationDetails', model: 'app.model.SimulationDetails',
fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'], fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'],
proxy: { proxy: {
type: 'rest', type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/area/', url: 'http://sangkil.science.uva.nl:8003/area/1/info.json',
reader: { reader: {
type: 'json', type: 'json',
}, },
callback: function(response) {
console.log(response.responseText);
}
}, },
listeners: { listeners: {
beforeload: function(store){
console.log(store);
}
} }
}, },
setUrl: function(area_id) { setUrl: function(area_id) {
var store = Ext.getStore('SimulationDetailsStore').getProxy(); var store = Ext.getStore('SimulationDetailsStore').getProxy();
store._url = 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json'; store._url = 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json';
} },
}); });
\ No newline at end of file
www/app/view/List.js
View file @ 03f5085d
...@@ -4,37 +4,29 @@ ...@@ -4,37 +4,29 @@
*/ */
Ext.define("app.view.List", Ext.define("app.view.List",
{ {
extend: "Ext.Container", extend: "Ext.navigation.View",
xtype: 'listpanel', xtype: 'listpanel',
requires: [ requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map' 'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
], ],
//stores: ['SimulationStore'],
config: { config: {
layout: "vbox", layout: "card",
items: [ animation: {
{ type: 'slide',
dock: 'top', direction: 'left',
xtype: "toolbar", duration: 1000
items: [
{
text: "Button",
ui: "Square",
margin: 10
}
]
}, },
items: [
{ {
id: 'cities',
xtype: 'list', xtype: 'list',
ui: 'round', ui: 'round',
itemTpl: '<div>{name}</div>', itemTpl: '<div>{name}</div>',
store: 'SimulationStore', store: 'SimulationStore',
flex: 1 flex: 1
} },
], ],
}, },
}); });
\ No newline at end of file
www/app/view/Map.js
View file @ 03f5085d
...@@ -12,6 +12,16 @@ Ext.define('app.view.Map', { ...@@ -12,6 +12,16 @@ Ext.define('app.view.Map', {
style: google.maps.NavigationControlStyle.DEFAULT style: google.maps.NavigationControlStyle.DEFAULT
} }
}, },
listeners: {
maprender: function()
{
this.overlayImages = [];
this.Images = [];
this.imageIndex = null;
this.imageBounds = null;
}
}
}, },
setGlobalMap: function(extmap, map){ setGlobalMap: function(extmap, map){
...@@ -30,8 +40,16 @@ Ext.define('app.view.Map', { ...@@ -30,8 +40,16 @@ Ext.define('app.view.Map', {
this.globalExtMap.setMapOptions(options); this.globalExtMap.setMapOptions(options);
}, },
/*
* createMarker:
* sets marker at pos
* @params:
* pos = [latitude, longitude]
*
*/
createMarker: function(pos){ createMarker: function(pos){
var pos = new google.maps.LatLng(52.3700, 4.89000); console.log("setmarker");
var pos = new google.maps.LatLng(pos[0], pos[1]);
new google.maps.Marker({ new google.maps.Marker({
position: pos, position: pos,
icon: 'Google_Maps_Marker.png', icon: 'Google_Maps_Marker.png',
...@@ -41,21 +59,50 @@ Ext.define('app.view.Map', { ...@@ -41,21 +59,50 @@ Ext.define('app.view.Map', {
}, },
/*create overlay*/ /*create overlay*/
createOverlayImage: function(bounds) { // 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png'
var image = 'floodmap1.jpg'; // 'http://sangkil.science.uva.nl:8003/drfsm/207/visualization/level/map/300.png' ;
var imageBounds = new google.maps.LatLngBounds( createOverlayImage: function(bounds, area_id, timesteps) {
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]), new google.maps.LatLng(bounds[2],bounds[3]),
new google.maps.LatLng(bounds[0],bounds[1])); new google.maps.LatLng(bounds[0],bounds[1]));
new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
this.bounds = bounds;
// delete all other images
if (this.overlayImages.length > 0)
for (i in this.overlayImages)
this.overlayImages[i].setMap(null);
//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';
for (i in timesteps)
{
//if (i > 0 && this.overlayImages.length > 0)
// this.overlayImages[i - 1].setMap(null);
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);
}
var overlay = new google.maps.GroundOverlay(this.Images[0], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
},
nextImage: function()
{
this.imageIndex += 1;
this.overlayImages[this.imageIndex - 1].setMap(null);
var overlay = new google.maps.GroundOverlay(this.Images[this.imageIndex], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
},
removeImages: function()
{
for (i in this.overlayImages)
this.overlayImages[i].setMap(null);
}, },
createOverlayPolygon: function(corners){ createOverlayPolygon: function(corners){
var cornerBounds = []; var cornerBounds = [];
console.log(corners);
console.log(corners[0].length);
for (var i = 0; i < corners[0].length - 1; i++) { for (var i = 0; i < corners[0].length - 1; i++) {
console.log("i: " + i + corners[0][i][0] + "-" + corners[0][i][1]);
cornerBounds.push(new google.maps.LatLng(corners[0][i][0], corners[0][i][1])); cornerBounds.push(new google.maps.LatLng(corners[0][i][0], corners[0][i][1]));
} }
console.log(cornerBounds); console.log(cornerBounds);
......
www/app/view/Simulation.js
View file @ 03f5085d
Ext.define('app.view.Simulation', { Ext.define('app.view.Simulation', {
extend: 'Ext.Container', extend: 'Ext.navigation.View',
xtype: 'simulationpanel', xtype: 'simulationpanel',
config: { config: {
title: "Map", title: "Map",
layout: "vbox", layout: "card",
items: [ items: [
{ {
dock: "top", xtype: 'SimulationMap',
xtype: 'toolbar', flex: 2,
},
{
xtype: 'panel',
id: 'overlay',
floating: true,
hidden: true,
width: 300,
height: 80,
scroll: false,
items: [{
xtype: 'button',
id: 'closebutton',
iconCls: 'delete',
iconMask: true,
width: 45,
items : [ bottom: -30,
right: -20,
},
{ {
text: "button", xtype: 'segmentedbutton',
ui: "square" items: [
} {
], text: 'back'
}, },
{ {
xtype: 'SimulationMap', text: 'forward'
flex: 2,
} }
],
]
}],
}],
}, },
}); });
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