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
Hide 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({
Ext.application({
controllers: ["Main"],
models: ["SimulationModel", "SimulationDetails"],
stores: ['SimulationStore', 'SimulationDetailsStore'],
stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
name: 'app',
requires: [
'Ext.MessageBox'
'Ext.MessageBox', 'app.CustomProxy'
],
views: ['Main', "Home", "Simulation", "List", 'Map'],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
icon: {
57: 'resources/icons/Icon.png',
......
www/app/controller/Main.js
View file @ 03f5085d
......@@ -4,64 +4,143 @@ Ext.define('app.controller.Main', {
config: {
refs: {
map: '#mapa',
sidepanel: 'listpanel',
api: 'api',
mapView: 'SimulationMap',
overlay: '#overlay',
simulation: 'simulationpanel'
},
control: {
'listpanel list': {
'listpanel #cities': {
itemtap: 'showOverlay',
tap: 'closeoverlay'
},
'sliderfield': {
change: 'callNextImage'
},
'listpanel #summary': {
itemtap: 'simulation',
},
'#mapa': {
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){
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
// var traffic = new google.maps.TrafficLayer();
// traffic.setMap(map);
},
this.selectedIndex = [];
},
showOverlay: function(list, index, element, record) {
//var area_id = record.get('area_id');
simulation: function(list, index, element, record) {
var store = Ext.getStore('SimulationDetailsStore');
var area_id = record.get('area_id');
var test_id = record.get('test_id');
var map = this.getMapView();
var dikes = null;
//store.setUrl(record.get('area_id'));
//console.log(store.getData().getCount());
//console.log(store.getData().getAt(0).get('dikes'));
//var dikes = store.getData().getAt(0).get('dikes');
var bounds = record.get('visbounds');
var center = record.get('center');
var corners = record.get('corners');
var bounds;
store.each(function(r){
bounds = r.get('visbounds');
});
var request = Ext.Ajax.request({
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){
console.log(response);
var result = Ext.decode(response.responseText);
console.log(this);
if (result['dikes'].length > 0)
map.createOverlayPolygon(result['dikes']);
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
},
});
console.log(this.getOverlay());
this.getOverlay().showBy(element);
},
showOverlay: function(list, index, element, record) {
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
},
id: 'summary',
xtype: 'list',
store: 'SimulationsSummary',
itemTpl: '<div>simulation {submitted} - {test_id}</div>',
});
//var result = Ext.decode(request.responseText);
// console.log(result);
//if (result['dikes'].length > 0)
// this.getMapView().createOverlayPolygon(result['dikes']);
this.getMapView().createMarker();
//this.getMapView().createOverlayImage(bounds);
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');
});
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
this.getMapView().createOverlayImage(bounds);
}
this.getMapView().setCenterMap(center);
},
});
callMapPolygon: function(polygon)
{
this.getMapView().createOverlayPolygon(polygon);
}
// 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']);
// },
// });
});
\ No newline at end of file
www/app/store/SimulationDetailsStore.js
View file @ 03f5085d
Ext.define('app.store.SimulationDetailsStore', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Rest'],
requires: ['app.CustomProxy'],
xtype: 'SimulationDetailsStore',
config: {
autoLoad: true,
model: 'app.model.SimulationDetails',
fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'],
proxy: {
type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/area/',
url: 'http://sangkil.science.uva.nl:8003/area/1/info.json',
reader: {
type: 'json',
},
callback: function(response) {
console.log(response.responseText);
}
},
listeners: {
beforeload: function(store){
console.log(store);
}
}
},
setUrl: function(area_id) {
var store = Ext.getStore('SimulationDetailsStore').getProxy();
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 @@
*/
Ext.define("app.view.List",
{
extend: "Ext.Container",
extend: "Ext.navigation.View",
xtype: 'listpanel',
requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
],
//stores: ['SimulationStore'],
config: {
layout: "vbox",
layout: "card",
animation: {
type: 'slide',
direction: 'left',
duration: 1000
},
items: [
{
dock: 'top',
xtype: "toolbar",
items: [
{
text: "Button",
ui: "Square",
margin: 10
}
]
},
{
id: 'cities',
xtype: 'list',
ui: 'round',
itemTpl: '<div>{name}</div>',
store: 'SimulationStore',
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', {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function()
{
this.overlayImages = [];
this.Images = [];
this.imageIndex = null;
this.imageBounds = null;
}
}
},
setGlobalMap: function(extmap, map){
......@@ -30,8 +40,16 @@ Ext.define('app.view.Map', {
this.globalExtMap.setMapOptions(options);
},
/*
* createMarker:
* sets marker at pos
* @params:
* pos = [latitude, longitude]
*
*/
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({
position: pos,
icon: 'Google_Maps_Marker.png',
......@@ -41,21 +59,50 @@ Ext.define('app.view.Map', {
},
/*create overlay*/
createOverlayImage: function(bounds) {
var image = 'floodmap1.jpg';
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
new google.maps.LatLng(bounds[0],bounds[1]));
new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
// '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) {
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
new google.maps.LatLng(bounds[0],bounds[1]));
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){
var cornerBounds = [];
console.log(corners);
console.log(corners[0].length);
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]));
}
console.log(cornerBounds);
......
www/app/view/Simulation.js
View file @ 03f5085d
Ext.define('app.view.Simulation', {
extend: 'Ext.Container',
extend: 'Ext.navigation.View',
xtype: 'simulationpanel',
config: {
title: "Map",
layout: "vbox",
layout: "card",
items: [
{
dock: "top",
xtype: 'toolbar',
items : [
{
text: "button",
ui: "square"
}
],
},
{
xtype: 'SimulationMap',
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,
bottom: -30,
right: -20,
},
{
xtype: 'segmentedbutton',
items: [
{
text: 'back'
},
{
text: 'forward'
}
]
}],
}],
},
});
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