Commit aa854e04 authored by Richard's avatar Richard

got it working, overlay

parent 39849b20
...@@ -7,7 +7,12 @@ Ext.define('app.controller.Main', { ...@@ -7,7 +7,12 @@ Ext.define('app.controller.Main', {
sidepanel: 'listpanel', sidepanel: 'listpanel',
api: 'api', api: 'api',
mapView: 'SimulationMap', mapView: 'SimulationMap',
overlay: '#overlay', overlay: {
selector: 'overlay',
xtype: 'StepsOverlay',
autoCreate: true,
},
simulation: 'simulationpanel' simulation: 'simulationpanel'
}, },
control: { control: {
...@@ -18,6 +23,7 @@ Ext.define('app.controller.Main', { ...@@ -18,6 +23,7 @@ Ext.define('app.controller.Main', {
'listpanel #summary': { 'listpanel #summary': {
itemtap: 'simulation', itemtap: 'simulation',
tap: 'closeoverlay',
}, },
'#ext-button-1': { '#ext-button-1': {
...@@ -48,9 +54,10 @@ Ext.define('app.controller.Main', { ...@@ -48,9 +54,10 @@ Ext.define('app.controller.Main', {
}, },
callRemoveImages: function() { callRemoveImages: function() {
this.getMapView().removeImages(); //console.log(this.getMapView());
console.log('hide removeimages'); //this.getMapView().removeImages();
this.getOverlay().hide(); //console.log('hide removeimages');
//this.getOverlay().hide();
}, },
...@@ -63,12 +70,18 @@ Ext.define('app.controller.Main', { ...@@ -63,12 +70,18 @@ Ext.define('app.controller.Main', {
}, },
closeoverlay: function() { closeoverlay: function() {
console.log('close overlay');
//console.log(this.getMapView().getCurrentImage()); //console.log(this.getMapView().getCurrentImage());
this.setThumb(); //this.setThumb();
console.log('call removeimages');
console.log(this.getOverlay());
this.getMapView().removeImages(); this.getMapView().removeImages();
//this.getOverlay().destroy();
//this.getSimulation().remove(this.getOverlay());
this.getOverlay().hide(); this.getOverlay().hide();
// if (this.getOverlay() != undefined)
// this.getOverlay.destroy();
//this.getOverlay().slideOut('r');
//console.log('closedOverlay');
}, },
setMap: function(extmap, map){ setMap: function(extmap, map){
...@@ -76,48 +89,57 @@ Ext.define('app.controller.Main', { ...@@ -76,48 +89,57 @@ Ext.define('app.controller.Main', {
this.globalMap = map; this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map); this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = []; this.selectedIndex = [];
//
}, },
simulation: function(list, index, element, record) { simulation: function(list, index, element, record) {
// if (this.selectedElement != undefined)
// this.selectedElement.setLeft(0, true);
// this.selectedElement = element;
// this.selectedElement.setLeft(-400, true);
//var overlay = this.getOverlay();
//console.log(overlay);
//Ext.create('app.view.StepsOverlay').hide();
//Ext.create('app.view.StepsOverlay').show();
// el.slideOu({
// duration: 100,
// to: {
// opacity: 0
// }
// });
//console.log(controls);
//this.getMapView().add({xtype: 'StepsOverlay'});
//console.log(this.getMapView());
// console.log(this.getOverlay());
// if (this.getOverlay() != undefined)
// this.getOverlay.destroy();
//console.log(this.getOverlay());
//if (this.getOverlay() != undefined);
// this.getOverlay().destroy();
//this.getSimulation().add({xtype: 'StepsOverlay'});
//console.log(Ext.getCmp('StepsOverlay'));
var cb = function(result){ var cb = function(result){
if (result['timesteps'].length > 0) if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']); map.createOverlayImage(bounds, test_id, result['timesteps']);
} }
console.log(record);
var store = Ext.getStore('SimulationDetailsStore'); var store = Ext.getStore('SimulationDetailsStore');
var test_id = record.get('test_id'); var test_id = record.get('test_id');
console.log(test_id)
this.test_id = test_id; this.test_id = test_id;
console.log(this.this_id);
var map = this.getMapView(); var map = this.getMapView();
var bounds; var bounds;
console.log(store);
store.each(function(r){ store.each(function(r){
bounds = r.get('visbounds'); bounds = r.get('visbounds');
}); });
console.log(bounds);
this.requestInfo(test_id, cb); this.requestInfo(test_id, cb);
// var request = Ext.Ajax.request({ this.getOverlay().hide().showBy(this.getMapView(), 'br-br');
// 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']);
// },
// failure: function(){
// console.log('failed to create images');
// }
// });
this.getOverlay().showBy(element);
}, },
showOverlay: function(list, index, element, record) { showOverlay: function(list, index, element, record){
this.getMapView().removeImages(); this.getMapView().removeImages();
var center = record.get('center'); var center = record.get('center');
var selected = false; var selected = false;
...@@ -141,7 +163,8 @@ Ext.define('app.controller.Main', { ...@@ -141,7 +163,8 @@ Ext.define('app.controller.Main', {
xtype: 'list', xtype: 'list',
store: 'SimulationsSummary', store: 'SimulationsSummary',
itemTpl: '<div><img class="flood_thumb" id="{test_id}_flood"' + itemTpl: '<div><img class="flood_thumb" id="{test_id}_flood"' +
'style="width: 180px; height: 180px;" alt="noimage.png" src=""/> ' + 'style="height: 180px;" alt="noimage.png" src=""/> ' +
'<div id="{test_id}_control" class="control"></div>' +
'<div style:"clear:both"></div><b>{test_id}</b>: {submitted}</div>', '<div style:"clear:both"></div><b>{test_id}</b>: {submitted}</div>',
}); });
this.setThumb(center); this.setThumb(center);
...@@ -165,9 +188,10 @@ Ext.define('app.controller.Main', { ...@@ -165,9 +188,10 @@ Ext.define('app.controller.Main', {
if (dikes.length != 0) if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes); this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center); this.getMapView().createMarker(center);
//this.getImages();
} }
this.getMapView().setCenterMap(center); this.getMapView().setCenterMap(center);
this.getMapView().alterMapOptions({zoom: 13});
}, },
setThumb: function(center){ setThumb: function(center){
...@@ -182,13 +206,9 @@ Ext.define('app.controller.Main', { ...@@ -182,13 +206,9 @@ Ext.define('app.controller.Main', {
//var mapImage ='http://maps.googleapis.com/maps/api/staticmap?center='+ center[0] +','+ center[1] + '&zoom=12&size=512x512&maptype=roadmap&sensor=false'; //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]); //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'; 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; document.getElementById(test_id + "_flood").src = image;
} }
console.log(record.get('test_id'));
// console.log(this.requestInfo);
me.requestInfo(record.get('test_id'), setImages); me.requestInfo(record.get('test_id'), setImages);
}); });
// if (typeof this.test_id != undefined) { // if (typeof this.test_id != undefined) {
......
...@@ -3,7 +3,8 @@ Ext.define('app.store.SimulationsSummary', { ...@@ -3,7 +3,8 @@ Ext.define('app.store.SimulationsSummary', {
requires: ['Ext.data.proxy.Rest'], requires: ['Ext.data.proxy.Rest'],
config: { config: {
autoLoad: true, autoLoad: true,
fields :['simulations', 'area_id', 'test_id', 'submitted'],
fields :['area_id', 'test_id', 'submitted'],
proxy : { proxy : {
type: 'rest', type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/drfsm/list.json?summary', url: 'http://sangkil.science.uva.nl:8003/drfsm/list.json?summary',
...@@ -12,6 +13,5 @@ Ext.define('app.store.SimulationsSummary', { ...@@ -12,6 +13,5 @@ Ext.define('app.store.SimulationsSummary', {
rootProperty: 'simulations' rootProperty: 'simulations'
} }
} }
} },
}); });
\ No newline at end of file
...@@ -10,14 +10,9 @@ Ext.define("app.view.List", ...@@ -10,14 +10,9 @@ Ext.define("app.view.List",
requires: [ requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map' 'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
], ],
title: 'Simulations',
config: { config: {
layout: "card",
animation: {
type: 'slide',
direction: 'left',
duration: 1000
},
items: [ items: [
{ {
id: 'cities', id: 'cities',
...@@ -25,8 +20,6 @@ Ext.define("app.view.List", ...@@ -25,8 +20,6 @@ Ext.define("app.view.List",
ui: 'round', ui: 'round',
itemTpl: '<div>{name}</div>', itemTpl: '<div>{name}</div>',
store: 'SimulationStore', store: 'SimulationStore',
flex: 1 }],
},
],
}, },
}); });
\ No newline at end of file
Ext.define("app.view.Main", { Ext.define("app.view.Main", {
extend: 'Ext.Container', extend: 'Ext.Container',
requires: ['Ext.TitleBar'], requires: ['Ext.TitleBar'],
config: { config: {
title: "Simulation Browser", title: "Simulation Browser",
layout: "hbox", layout: "hbox",
fullscreen: true, fullscreen: true,
layout: "hbox",
items: [ items: [
{ {
xtype: 'listpanel', xtype: 'listpanel',
flex: 1 flex: 1,
}, },
{ {
title: "map",
xtype: 'simulationpanel', xtype: 'simulationpanel',
flex: 2 flex: 2
}, }],
]
} }
}); });
\ No newline at end of file
...@@ -4,6 +4,7 @@ Ext.define('app.view.Map', { ...@@ -4,6 +4,7 @@ Ext.define('app.view.Map', {
id: 'mapa', id: 'mapa',
config: { config: {
useLoadMask : true,
mapOptions : { mapOptions : {
zoom : 12, zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP, mapTypeId : google.maps.MapTypeId.ROADMAP,
...@@ -16,6 +17,7 @@ Ext.define('app.view.Map', { ...@@ -16,6 +17,7 @@ Ext.define('app.view.Map', {
listeners: { listeners: {
maprender: function() maprender: function()
{ {
console.log('maprender');
this.overlayImages = []; this.overlayImages = [];
this.Images = []; this.Images = [];
this.imageIndex = 0; this.imageIndex = 0;
...@@ -82,7 +84,6 @@ Ext.define('app.view.Map', { ...@@ -82,7 +84,6 @@ Ext.define('app.view.Map', {
var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png'; var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds)); this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
} }
console.log(this.overlayImages);
this.overlayImages[0].setMap(this.globalMap); this.overlayImages[0].setMap(this.globalMap);
}, },
...@@ -90,11 +91,9 @@ Ext.define('app.view.Map', { ...@@ -90,11 +91,9 @@ Ext.define('app.view.Map', {
{ {
var lastImagesIndex = this.imageIndex; var lastImagesIndex = this.imageIndex;
this.imageIndex += this.imageIndex <= this.overlayImages.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 != lastImagesIndex)
{ {
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); this.overlayImages[this.imageIndex - 1].setMap(null);
} }
...@@ -103,11 +102,7 @@ Ext.define('app.view.Map', { ...@@ -103,11 +102,7 @@ Ext.define('app.view.Map', {
prevImage: function() prevImage: function()
{ {
console.log(this.overlayImages);
console.log(this.overlayImages[this.imageIndex]);
console.log(this.imageIndex);
this.overlayImages[this.imageIndex].setMap(null); this.overlayImages[this.imageIndex].setMap(null);
console.log('removed');
this.imageIndex -= this.imageIndex > 0 ? 1 : 0; this.imageIndex -= this.imageIndex > 0 ? 1 : 0;
if (this.imageIndex >= 0) if (this.imageIndex >= 0)
......
Ext.define('app.view.Simulation', { Ext.define('app.view.Simulation', {
extend: 'Ext.navigation.View', extend: 'Ext.Panel',
xtype: 'simulationpanel', xtype: 'simulationpanel',
config: { config: {
title: "Map", layout: 'card',
layout: "card", items:
items: [ [
{
xtype: 'SimulationMap',
flex: 2,
},
{
xtype: 'panel',
id: 'overlay',
floating: true,
hidden: true,
width: 300,
height: 80,
scroll: false,
items: [
{ {
xtype: 'button', dock: 'top',
id: 'closebutton', xtype: 'toolbar',
iconCls: 'delete', title: 'Flood Simulation Browser'
iconMask: true,
width: 45,
top: -30,
left: -20,
}, },
{ {
layout: 'vbox', xtype: 'SimulationMap',
top: 15, flex: 2,
align: 'center',
items : [
{
xtype: "button",
id: 'backwards',
width: 45,
iconCls: 'arrow_left',
floating: 'right',
iconMask: true,
left: 90,
align: 'center',
},
{
xtype: "button",
id: 'forward',
width: 45,
floating: 'left',
iconCls: 'arrow_right',
align: 'center',
left: 155,
iconMask: true,
}]
}], }],
}] }
},
}); });
// {
// xtype: 'panel',
// id: 'overlay',
// hidden: true,
// width: 300,
// height: 80,
// scroll: false,
// items: [
// {
// xtype: 'button',
// id: 'closebutton',
// iconCls: 'delete',
// iconMask: true,
// width: 45,
// top: -30,
// left: -20,
// },
// {
// layout: 'vbox',
// top: 15,
// align: 'center',
// items : [
// {
// xtype: "button",
// id: 'backwards',
// width: 45,
// iconCls: 'arrow_left',
// floating: 'right',
// iconMask: true,
// left: 90,
// align: 'center',
// },
// {
// xtype: "button",
// id: 'forward',
// width: 45,
// floating: 'left',
// iconCls: 'arrow_right',
// align: 'center',
// left: 155,
// iconMask: true,
// }]
// },
\ No newline at end of file
Ext.define('app.view.StepsOverlay', { Ext.define('app.view.StepsOverlay', {
extend: 'Ext.Panel', extend: 'Ext.Container',
xtype: 'StepsOverlay', xtype: 'StepsOverlay',
id: 'overlay', requires : ['Ext.Anim'],
config: { config: {
floating: true, id: 'overlay',
modal: true, showAnimation: {
width: 300, type: 'slideIn',
height: 50, direction:'left',
},
hideAnimation:{
type: 'slideOut',
direction:'right',
},
dragging: true,
autoDestroy: true,
hidden: true,
width: 200,
height: 80,
scroll: false, scroll: false,
items: [
{
xtype: 'button',
id: 'closebutton',
iconCls: 'delete',
iconMask: true,
width: 45,
top: -30,
right: 10,
border: 'solid',
handler: this.closebutton,
scope: this,
},
{
top: 15,
align: 'center',
items : [
{
xtype: "button",
id: 'backwards',
width: 45,
iconCls: 'arrow_left',
floating: 'right',
iconMask: true,
left: 10,
align: 'center',
},
{
xtype: "button",
id: 'forward',
width: 45,
floating: 'left',
iconCls: 'arrow_right',
align: 'center',
left: 100,
iconMask: true,
}]
}],
listeners: [{
hide: function(){
console.log('hide StepsOverlay');
}
}],
closebutton: function(){
console.log('closebutton');
Ext.dispatch({
controller: app.controller.Main,
action: 'closeoverlay'
});
}
} }
}); });
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<true/> <true/>
<key>UIDeviceFamily</key> <key>UIDeviceFamily</key>
<array> <array>
<integer>2</integer> <integer>1</integer><integer>2</integer>
</array> </array>
<key>UISupportedInterfaceOrientations</key> <key>UISupportedInterfaceOrientations</key>
<array> <array>
......
...@@ -63,6 +63,21 @@ ...@@ -63,6 +63,21 @@
opacity:0.3 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> </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b< <script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
......
This diff is collapsed.
...@@ -63,6 +63,21 @@ ...@@ -63,6 +63,21 @@
opacity:0.3 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> </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b< <script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
......
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
* - iPad * - iPad
* - Universal * - Universal
*/ */
"deviceType":"iPad", "deviceType":"Universal",
/** /**
* @cfg {String} certificatePath * @cfg {String} certificatePath
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
* @cfg {String} sdkPath * @cfg {String} sdkPath
* This is the path to the Android SDK, if you are developing an Android application. * This is the path to the Android SDK, if you are developing an Android application.
*/ */
"sdkPath":"/path/to/android-sdk", "sdkPath":"~/Documents/android-sdk-macosx",
/** /**
* @cfg androidAPILevel * @cfg androidAPILevel
......
{"applicationName":"My Application","applicationId":"com.mycompany.myAppID","versionString":"1.0","iconName":"resources/icons/Icon~ipad.png","inputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/package","outputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/native","configuration":"Debug","platform":"iOSSimulator","deviceType":"iPad","certificatePath":"/path/to/certificate.file","certificateAlias":"","sdkPath":"/path/to/android-sdk","androidAPILevel":"15","orientations":["portrait","landscapeLeft","landscapeRight","portraitUpsideDown"]} {"applicationName":"My Application","applicationId":"com.mycompany.myAppID","versionString":"1.0","iconName":"resources/icons/Icon~ipad.png","inputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/package","outputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/native","configuration":"Debug","platform":"iOSSimulator","deviceType":"Universal","certificatePath":"/path/to/certificate.file","certificateAlias":"","sdkPath":"~/Documents/android-sdk-macosx","androidAPILevel":"15","orientations":["portrait","landscapeLeft","landscapeRight","portraitUpsideDown"]}
\ No newline at end of file \ No newline at end of file
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