Skip to content

F
FloodSimulation-Browser
Commit af88fa74 authored by icyrizard's avatar icyrizard
Browse files
Options

Plotting is almost possible

parent ecd37581
Show whitespace changes
Inline Side-by-side
Showing with 360 additions and 49 deletions
www/app/Api.js 0 → 100644
View file @ af88fa74
// GET /drfsm/<test_id>/results/izid/<izid>.csv
// for example
// GET /drfsm/5/results/izid/1234.csv
Ext.define('app.Api', {
mixins: ['Ext.mixin.Observable'],
singleton: true,
getIzid: function(lat, lng, area_id) {
var me = this;
var requestName = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/area/1/izid.json?latlng=' + lat + ',' + lng,
success: function(response, opts){
var result = Ext.decode(response.responseText);
me.fireEvent('gotIzid', result['izid']);
},
failure: function(){
console.log('failed to get izid');
}
});
},
getCsvFile: function(test_id, izid) {
console.log(izid);
console.log()
console.log('/drfsm/'+test_id+'/results/izid/'+izid+'.csv');
var me = this;
var requestName = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+test_id+'/results/izid/'+izid+'.csv',
success: function(response, opts){
console.log(opts)
me.fireEvent('gotCsv', response.responseText)
},
failure: function(){
console.log('failed to get csv file');
}
});
}
});
\ No newline at end of file
www/app/chartData.js 0 → 100644
View file @ af88fa74
Ext.define('app.chartData', {
singleton: true,
init: function(){
self.csvFiles = new Array();
},
setCsvFile: function(file){
self.csvFiles.push(file)
}
});
\ No newline at end of file
www/app/controller/ChartController.js 0 → 100644
View file @ af88fa74
Ext.define('app.controller.ChartController', {
extend: 'Ext.app.Controller',
requires: ['app.Api'],
config: {
refs: {
Floodchart: {
xtype: 'floodChart',
selector: 'flood-chart',
autoCreate: true,
},
chartData : {
selector: 'flood-chart-id',
autoCreate: true,
},
mapView: 'SimulationMap',
},
control: {
'#mapa': {
maprender: 'addListener'
},
'#closeChart': {
tap: 'closeFloodChart'
}
},
},
init: function(){
me = this;
app.Api.on({
gotIzid: function(izid){
app.Api.getCsvFile(me.getMapView().testId, izid);
},
gotCsv: function(result){
me.plot(result);
}
});
},
addListener: function(){
me = this;
this.getMapView().on({
gotClick: function(event){
app.Api.getIzid(event.latLng.lat(), event.latLng.lng())
}
});
},
plot: function(result){
array = result.split('\n');
store = Ext.getStore('chartStore');
columns = array[0];
volume = [];
time = [];
data = []
for (i = 1; i < array.length; i++)
{
line_clmns = array[i].split(',');
data.push({
time : time.push(parseInt(line_clmns[0]) + i * 100),
volume : volume.push(line_clmns[1])
});
}
console.log(data);
this.openChart();
},
getFile: function(result){
app.Api.getCsvFile(result['izid']);
},
closeFloodChart: function(){
this.getFloodchart().hide();
},
getData: function(latLng){
app.Api.getIzid(latLng.lat(), latLng.lng())
},
openChart: function(){
this.getFloodchart().showBy(this.getMapView());
},
});
\ No newline at end of file
www/app/controller/Lsm.js 0 → 100644
View file @ af88fa74
Ext.define('app.controller.Lsm', {
extend: 'Ext.app.Controller',
config: {
refs: {
},
control: {
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
}
});
\ No newline at end of file
www/app/controller/Main.js
View file @ af88fa74
......@@ -111,20 +111,24 @@ Ext.define('app.controller.Main', {
}
},
initiateCities: function(){
init: function() {
this.selectedIndex = [];
/*default simulation type*/
this.SimulType = 'Flood';
this.test_id = null;
},
initiateCities: function() {
this.getSimOptionsButton().show();
},
/* first function to call */
setMap: function(extmap, map){
this.test_id = null;
setMap: function(extmap, map) {
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
/*default simulation type*/
this.SimulType = 'Flood';
},
stopBackwImages: function(button){
stopBackwImages: function(button) {
clearInterval(this.interval);
button.hide();
this.getPlayBackw().show();
......@@ -194,11 +198,9 @@ Ext.define('app.controller.Main', {
* of the simulation panel
*/
simulate: function(list, index, element, record) {
console.log('simulate call');
var me = this;
/*first, remove all images, even if there werent any*/
this.getMapView().removeImages();
//console.log(this.getOverlay());
/*create reference, cb looses scope of this.*/
var map = this.getMapView(),
/*The simulationDetailStore has the details of the get test_id*/
......@@ -215,9 +217,11 @@ Ext.define('app.controller.Main', {
*/
var cb = function(result){
var timesteps = result['timesteps'] || result['images'];
console.log(timesteps);
if (timesteps.length > 0)
if (timesteps.length > 0){
map.createOverlayImage(bounds, test_id, timesteps, me.SimulType);
map.testId = result['test_id'];
map.areaId = result['area_id'];
}
}
var store = Ext.getStore('SimulationDetailsStore');
......@@ -230,12 +234,10 @@ Ext.define('app.controller.Main', {
/* The information of the simulation, has data of the time
* steps available, crucial data for the displaying the images.
*/
//console.log(this.getSimulationOptions().getSelectedCls())
var url = '';
if (this.SimulType == 'Flood')
{
url = 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json';
console.log(this.SimulType);
}
else url = 'http://sangkil.science.uva.nl:8003/lsm/'+ test_id +'/visualization/paru/info.json';
this.requestInfo(test_id, cb, url);
......@@ -251,8 +253,6 @@ Ext.define('app.controller.Main', {
*/
showList: function(list, index, element, record){
this.getSimOptionsButton().hide();
//console.log(this.getSimulationOptions());
//this.getSimulationOptions().hide();
/*Remove images, even if there werent any*/
this.getMapView().removeImages();
/*store center*/
......@@ -272,15 +272,15 @@ Ext.define('app.controller.Main', {
var store_lsm = Ext.getStore('LsmStore');
store_lsm.clearFilter();
store_lsm.filter("area_id", area_id);
/* clear filter, if the flters are not cleared, they will
* be filtered on top of each other, resuting in an unwanted
* state.
/* clear filter, if the filters are not cleared, they will
* be filtered on top of each other, resulting in an unwanted
* state of the store.
*/
store.clearFilter();
store.filter("area_id", area_id);
/*push the side panel, in future create the view somewhere else*/
console.log(this.SimulType);
if (this.SimulType == 'Flood')
{
this.setThumb(center);
......@@ -290,7 +290,6 @@ Ext.define('app.controller.Main', {
this.getSidepanel().push(this.getLsmSimulation());
/*set thumb images*/
//this.setThumb(center);
/*the store with details of the of the simulation*/
var store = Ext.getStore('SimulationDetailsStore');
......@@ -300,12 +299,12 @@ Ext.define('app.controller.Main', {
if (selected == false)
{
this.selectedIndex.push(index);
var dikes = null;
var bounds = record.get('visbounds');
var corners = record.get('corners');
/*Make sure this is not done again*/
this.selectedIndex.push(index);
store.each(function(r) {
dikes = r.get('dikes');
});
......
www/app/controller/MapHelper.js 0 → 100644
View file @ af88fa74
Ext.define('app.helper.Map', {
xtype: 'MapHelper',
func: function(){
console.log(func);
}
});
\ No newline at end of file
www/app/store/LsmStore.js 0 → 100644
View file @ af88fa74
Ext.define('app.store.LsmStore', {
extend: 'Ext.data.Store',
config: {
autoLoad: true,
fields: ['area_id', 'test_id', 'submitted'],
proxy: {
type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/lsm/list.json',
reader: {
type: 'json',
rootProperty: 'simulations'
}
}
}
});
\ No newline at end of file
www/app/store/SimulationDetailsStore.js
View file @ af88fa74
Ext.define('app.store.SimulationDetailsStore', {
extend: 'Ext.data.Store',
requires: ['app.CustomProxy'],
requires: ['Ext.data.proxy.Rest'],
xtype: 'SimulationDetailsStore',
config: {
......
www/app/store/chartStore.js 0 → 100644
View file @ af88fa74
Ext.define('app.store.chartStore', {
extend: 'Ext.data.JsonStore',
config : {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
{'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
{'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
{'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
{'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
]
}
});
\ No newline at end of file
www/app/view/Chart.js
View file @ af88fa74
......@@ -9,22 +9,116 @@
// }]
// });
var chart = new Ext.chart.Chart({
width: 200,
height: 200,
animate: true,
});
// var store = new Ext.data.JsonStore({
// fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
// data: [
// {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
// {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
// {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
// {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
// {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
// ]
// });
// var chart = new Ext.chart.Chart({
// //animate: true,
// store: store,
// width: 500,
// height: 200,
// axes: [
// {
// type: "Numeric",
// position: 'left',
// fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
// title: 'Numeric',
// minimum: 0,
// },
// {
// type: 'Category',
// position: 'bottom',
// fields: ['name'],
// title: 'Category',
// label: {
// rotate: {
// degrees: 35
// }
// }
// }
// ],
// series: [{
// type: 'area',
// highlight: false,
// axis: 'left',
// xField: 'name',
// yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
// style: {
// opacity: 0.93
// }
// }]
// });
Ext.define('app.view.Chart', {
extend: 'Ext.chart.Panel',
extend: 'Ext.Panel',
id: 'flood-chart',
xtype: 'floodChart',
requires: ['Ext.data.Store'],
config: {
width: 100,
height: 100,
width: 520,
height: 220,
draggable: true,
items: [chart]
items: [{
xtype: 'chart',
id: 'flood-chart-id',
store: 'chartStore',
width: 500,
height: 200,
axes: [
{
type: "Numeric",
position: 'left',
fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
title: 'Numeric',
minimum: 0,
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Category',
label: {
rotate: {
degrees: 35
}
}
}
],
series: [{
type: 'area',
highlight: false,
axis: 'left',
xField: 'name',
yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
style: {
opacity: 0.93
}
}]
},
{
xtype: 'button',
ui: 'circle ',
id: 'closeChart',
left: -15,
top: -15,
width: 30,
height: 30,
cls: 'closebutton',
style: 'background: url(resources/images/closebutton50.png) no-repeat; background-size: 30px; border: none',
}]
}
});
......
www/app/view/List.js
View file @ af88fa74
......@@ -29,7 +29,7 @@ Ext.define("app.view.List",
items: [
{
title: 'city\'s',
title: 'Locations',
id: 'cities',
xtype: 'list',
ui: 'round',
......
www/app/view/Map.js
View file @ af88fa74
......@@ -23,6 +23,9 @@ Ext.define('app.view.Map', {
this.imageIndex = 0;
this.imageBounds = null;
this.play = false;
this.testId = 0;
this.areaId = 0;
this.listener_ref = null;
}
}
},
......@@ -34,11 +37,6 @@ Ext.define('app.view.Map', {
setGlobalMap: function(extmap, map){
this.globalMap = map;
this.globalExtMap = extmap;
google.maps.event.addListener(map, 'click', function(){
console.log('click');
});
//this.globalMap.on('click', );
},
setCenterMap: function(center){
......@@ -75,7 +73,7 @@ Ext.define('app.view.Map', {
* Bounds: array(4)
*/
createOverlayImage: function(bounds, area_id, timesteps, simulationType) {
console.log(timesteps);
var me = this;
var url = '';
if (simulationType == 'Flood')
{
......@@ -86,7 +84,6 @@ Ext.define('app.view.Map', {
url = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id + '/visualization/paru/map/';
}
else return false;
console.log(url);
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
......@@ -100,29 +97,41 @@ Ext.define('app.view.Map', {
//var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
var image = new Image();
image.src = url + timesteps[i] + '.png';
console.log(image.src);
this.overlayImages.push(new google.maps.GroundOverlay(image.src, this.imageBounds));
}
this.overlayImages[0].setMap(this.globalMap);
this.imageIndex = this.overlayImages.length;
/*remove clickevent and add to new image*/
if (this.listeners_ref != null)
google.maps.event.removeListener(listenerHandle);
this.listeners_ref = google.maps.event.addListener(this.overlayImages[0], 'click', function(event){
me.fireEvent('gotClick', event);
});
},
/* set next Image*/
nextImage: function()
{
var me = this;
if (this.overlayImages.length <= 1)
return;
var lastIndex = (this.overlayImages.length + this.imageIndex) % this.overlayImages.length;
this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % this.overlayImages.length;
//this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % (this.overlayImages.length);
console.log(this.imageIndex);
//this.overlayImages[this.imageIndex - 1].setMap(null);
this.overlayImages[this.imageIndex].setMap(this.globalMap);
this.overlayImages[lastIndex].setMap(null);
//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length);
console.log(this.imageIndex);
if (this.listeners_ref != null)
google.maps.event.removeListener(listenerHandle);
this.listeners_ref = google.maps.event.addListener(this.overlayImages[this.imageIndex], 'click', function(event){
me.fireEvent('gotClick', event);
});
this.overlayImages[lastIndex].setMap(null);
//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length)
},
/*set prev image*/
......@@ -169,7 +178,7 @@ Ext.define('app.view.Map', {
getCurrentImage: function(){
if (this.overlayImages.length > 0) {
this.overlayImages[this.imageIndex];
return this.overlayImages[this.imageIndex].url;
return this.overlayImages[this.imageIndex];
}
},
......
www/resources/css/app.css
View file @ af88fa74
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/sass/app.scss
View file @ af88fa74
......@@ -2,6 +2,8 @@
@include pictos-iconmask('close_overlay');
@include pictos-iconmask('play1');
@include pictos-iconmask('pause');
@include pictos-iconmask('closebutton50');
@include pictos-iconmask('clsbtn50');
@include pictos-iconmask('list');
@include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
@include sencha-toolbar-ui('lighter_blue', #00538F, 'glossy');
......
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