Skip to content

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

got it working, overlay

parent 39849b20
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 136 deletions
www/app/controller/Main.js
View file @ aa854e04
......@@ -7,7 +7,12 @@ Ext.define('app.controller.Main', {
sidepanel: 'listpanel',
api: 'api',
mapView: 'SimulationMap',
overlay: '#overlay',
overlay: {
selector: 'overlay',
xtype: 'StepsOverlay',
autoCreate: true,
},
simulation: 'simulationpanel'
},
control: {
......@@ -18,6 +23,7 @@ Ext.define('app.controller.Main', {
'listpanel #summary': {
itemtap: 'simulation',
tap: 'closeoverlay',
},
'#ext-button-1': {
......@@ -48,9 +54,10 @@ Ext.define('app.controller.Main', {
},
callRemoveImages: function() {
this.getMapView().removeImages();
console.log('hide removeimages');
this.getOverlay().hide();
//console.log(this.getMapView());
//this.getMapView().removeImages();
//console.log('hide removeimages');
//this.getOverlay().hide();
},
......@@ -63,12 +70,18 @@ Ext.define('app.controller.Main', {
},
closeoverlay: function() {
console.log('close overlay');
//console.log(this.getMapView().getCurrentImage());
this.setThumb();
console.log('call removeimages');
console.log(this.getOverlay());
//this.setThumb();
this.getMapView().removeImages();
//this.getOverlay().destroy();
//this.getSimulation().remove(this.getOverlay());
this.getOverlay().hide();
// if (this.getOverlay() != undefined)
// this.getOverlay.destroy();
//this.getOverlay().slideOut('r');
//console.log('closedOverlay');
},
setMap: function(extmap, map){
......@@ -76,48 +89,57 @@ Ext.define('app.controller.Main', {
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
//
},
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){
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');
});
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']);
// },
// failure: function(){
// console.log('failed to create images');
// }
// });
this.getOverlay().showBy(element);
this.getOverlay().hide().showBy(this.getMapView(), 'br-br');
},
showOverlay: function(list, index, element, record) {
showOverlay: function(list, index, element, record){
this.getMapView().removeImages();
var center = record.get('center');
var selected = false;
......@@ -141,7 +163,8 @@ Ext.define('app.controller.Main', {
xtype: 'list',
store: 'SimulationsSummary',
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>',
});
this.setThumb(center);
......@@ -165,9 +188,10 @@ Ext.define('app.controller.Main', {
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
//this.getImages();
}
}
this.getMapView().setCenterMap(center);
this.getMapView().alterMapOptions({zoom: 13});
},
setThumb: function(center){
......@@ -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';
//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) {
......@@ -198,8 +218,8 @@ Ext.define('app.controller.Main', {
requestInfo: function(test_id, callback){
var request = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_id +'/info.json',
success: function(response, opts){
var result = Ext.decode(response.responseText);
......
www/app/store/SimulationsSummary.js
View file @ aa854e04
......@@ -3,7 +3,8 @@ Ext.define('app.store.SimulationsSummary', {
requires: ['Ext.data.proxy.Rest'],
config: {
autoLoad: true,
fields :['simulations', 'area_id', 'test_id', 'submitted'],
fields :['area_id', 'test_id', 'submitted'],
proxy : {
type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/drfsm/list.json?summary',
......@@ -12,6 +13,5 @@ Ext.define('app.store.SimulationsSummary', {
rootProperty: 'simulations'
}
}
}
},
});
\ No newline at end of file
www/app/view/List.js
View file @ aa854e04
......@@ -10,14 +10,9 @@ Ext.define("app.view.List",
requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
],
title: 'Simulations',
config: {
layout: "card",
animation: {
type: 'slide',
direction: 'left',
duration: 1000
},
items: [
{
id: 'cities',
......@@ -25,8 +20,6 @@ Ext.define("app.view.List",
ui: 'round',
itemTpl: '<div>{name}</div>',
store: 'SimulationStore',
flex: 1
},
],
}],
},
});
\ No newline at end of file
www/app/view/Main.js
View file @ aa854e04
Ext.define("app.view.Main", {
extend: 'Ext.Container',
requires: ['Ext.TitleBar'],
config: {
title: "Simulation Browser",
layout: "hbox",
fullscreen: true,
layout: "hbox",
items: [
{
xtype: 'listpanel',
flex: 1
flex: 1,
},
{
title: "map",
{
xtype: 'simulationpanel',
flex: 2
},
]
}],
}
});
\ No newline at end of file
www/app/view/Map.js
View file @ aa854e04
......@@ -4,6 +4,7 @@ Ext.define('app.view.Map', {
id: 'mapa',
config: {
useLoadMask : true,
mapOptions : {
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
......@@ -16,6 +17,7 @@ Ext.define('app.view.Map', {
listeners: {
maprender: function()
{
console.log('maprender');
this.overlayImages = [];
this.Images = [];
this.imageIndex = 0;
......@@ -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';
this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
}
console.log(this.overlayImages);
this.overlayImages[0].setMap(this.globalMap);
},
......@@ -90,11 +91,9 @@ Ext.define('app.view.Map', {
{
var lastImagesIndex = this.imageIndex;
this.imageIndex += this.imageIndex <= this.overlayImages.length - 2 ? 1 : 0;
console.log(this.imageIndex);
if (this.imageIndex != lastImagesIndex)
{
this.overlayImages[this.imageIndex].setMap(this.globalMap);
console.log(this.overlayImages[this.imageIndex]);
this.overlayImages[this.imageIndex - 1].setMap(null);
}
......@@ -103,11 +102,7 @@ Ext.define('app.view.Map', {
prevImage: function()
{
console.log(this.overlayImages);
console.log(this.overlayImages[this.imageIndex]);
console.log(this.imageIndex);
this.overlayImages[this.imageIndex].setMap(null);
console.log('removed');
this.imageIndex -= this.imageIndex > 0 ? 1 : 0;
if (this.imageIndex >= 0)
......
www/app/view/Simulation.js
View file @ aa854e04
Ext.define('app.view.Simulation', {
extend: 'Ext.navigation.View',
extend: 'Ext.Panel',
xtype: 'simulationpanel',
config: {
title: "Map",
layout: "card",
items: [
{
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,
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,
}]
}],
}]
layout: 'card',
items:
[
{
dock: 'top',
xtype: 'toolbar',
title: 'Flood Simulation Browser'
},
{
xtype: 'SimulationMap',
flex: 2,
}],
}
});
// {
// 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
www/app/view/StepsOverlay.js
View file @ aa854e04
Ext.define('app.view.StepsOverlay', {
extend: 'Ext.Panel',
extend: 'Ext.Container',
xtype: 'StepsOverlay',
id: 'overlay',
config: {
floating: true,
modal: true,
width: 300,
height: 50,
scroll: false,
requires : ['Ext.Anim'],
config: {
id: 'overlay',
showAnimation: {
type: 'slideIn',
direction:'left',
},
hideAnimation:{
type: 'slideOut',
direction:'right',
},
dragging: true,
autoDestroy: true,
hidden: true,
width: 200,
height: 80,
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'
});
}
}
});
\ No newline at end of file
});
www/build/native/My Application.app/Info.plist
View file @ aa854e04
......@@ -39,7 +39,7 @@
<true/>
<key>UIDeviceFamily</key>
<array>
<integer>2</integer>
<integer>1</integer><integer>2</integer>
</array>
<key>UISupportedInterfaceOrientations</key>
<array>
......
www/build/native/My Application.app/webapp/index.html
View file @ aa854e04
......@@ -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 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<
......
www/build/package/app.js
View file @ aa854e04
This diff is collapsed.
www/build/package/index.html
View file @ aa854e04
......@@ -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 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<
......
www/packager.json
View file @ aa854e04
......@@ -77,7 +77,7 @@
* - iPad
* - Universal
*/
"deviceType":"iPad",
"deviceType":"Universal",
/**
* @cfg {String} certificatePath
......@@ -103,7 +103,7 @@
* @cfg {String} sdkPath
* 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
......
www/packager.temp.json
View file @ aa854e04
{"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"]}
\ No newline at end of file
{"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
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