Skip to content

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

can now play trough images

parent 04b400d7
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 144 deletions
www/app.js
View file @ e831c4ac
......@@ -15,7 +15,7 @@ Ext.application({
'Ext.MessageBox', 'app.CustomProxy'
],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel'],
icon: {
57: 'resources/icons/Icon.png',
......
www/app/controller/Main.js
View file @ e831c4ac
/**
* Main controller object
*
*
*/
Ext.define('app.controller.Main', {
extend: 'Ext.app.Controller',
config: {
/*references to objects in the viewport*/
refs: {
map: '#mapa',
sidepanel: 'listpanel',
api: 'api',
play: '#play',
pause: '#pause',
playBackw: '#play-backw',
pauseBackw: '#pause-backw',
mapView: 'SimulationMap',
/*use this format if this object is not yet created*/
overlay: {
selector: 'overlay',
selector: '#overlay',
xtype: 'StepsOverlay',
autoCreate: true,
},
/*use this format if this object is not yet created*/
simulationOptions: {
selector: 'simulation_options',
xtype: 'SimulationOptions',
autoCreate: true,
},
/*the list simulations available in the area selected*/
simulation: 'simulationpanel'
},
/*all event listeners*/
control: {
'listpanel #cities': {
itemtap: 'showOverlay',
tap: 'closeoverlay',
},
'listpanel #summary': {
itemtap: 'simulation',
//tap: 'closeoverlay',
},
'#ext-button-1': {
tap: 'callRemoveImages'
},
'#mapa': {
......@@ -46,117 +59,173 @@ Ext.define('app.controller.Main', {
tap: 'nextImage'
},
'#overlay': {
hide: 'callRemoveImages',
'#simulationOptions': {
tap: 'openSimulations'
},
'#opensimulations': {
tap: 'openSimulations'
}
'#pause': {
tap: 'stopPlayImages'
},
'#play': {
tap: 'playImages'
},
'#pause-backw': {
tap: 'stopBackwImages'
},
'#play-backw': {
tap: 'playBackwImages'
},
}
},
callRemoveImages: function() {
//console.log(this.getMapView());
//this.getMapView().removeImages();
//console.log('hide removeimages');
//this.getOverlay().hide();
/* first function to call */
setMap: function(extmap, map){
this.test_id = null;
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
},
stopBackwImages: function(button){
clearInterval(this.interval);
button.hide();
this.getPlayBackw().show();
},
playBackwImages: function(button){
this.getPlay().show();
this.getPause().hide()
clearInterval(this.interval);
button.hide();
this.getPauseBackw().show();
var instance = this.getMapView();
this.interval = setInterval(function() {instance.prevImage()}, 500);
},
/*loop trough images, see map module*/
playImages: function(button){
this.getPlayBackw().show()
this.getPauseBackw().hide();
clearInterval(this.interval);
/*hide this button*/
button.hide();
/*show pause button*/
this.getPause().show();
/*create reference of the mapview, setInterval looses this. scope */
var instance = this.getMapView();
this.interval = setInterval(function() {instance.nextImage()}, 500);
},
/*stop looping trough images*/
stopPlayImages: function(button){
clearInterval(this.interval);
/*hide this pause button*/
button.hide();
/*show play button*/
this.getPlay().show();
/*remove interval function*/
clearInterval(this.interval);
},
/*show prev image*/
prevImage: function(){
this.getMapView().prevImage();
},
/*show next image*/
nextImage: function(){
this.getMapView().nextImage();
},
closeoverlay: function() {
console.log('close overlay');
//console.log(this.getMapView().getCurrentImage());
//this.setThumb();
/*show play button and hide pause button*/
this.getPlay().show();
this.getPause().hide();
/*clear interval, even if there wasn't any*/
clearInterval(this.interval);
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){
this.test_id = null;
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
this.selectedIndex = [];
//
},
/* Initialize simulation, responds when tapped on a list item
* of the simulation panel
*/
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();
/*first, remove all images, even if there werent any*/
this.getMapView().removeImages();
//console.log(this.getOverlay());
//if (this.getOverlay() != undefined);
// this.getOverlay().destroy();
//this.getSimulation().add({xtype: 'StepsOverlay'});
//console.log(Ext.getCmp('StepsOverlay'));
/*create reference, cb looses scope of this.*/
var map = this.getMapView(),
/*The simulationDetailStore has the details of the */
/*get test_id*/
test_id = record.get('test_id'),
/*bounds variable used later on*/
bounds;
/*store test_id globaly for use in other functions*/
this.test_id = test_id;
/* callback, executed when ajax call returns
* this function calls the map object to create overlays
* for retrieved timessteps
*/
var cb = function(result){
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
}
var store = Ext.getStore('SimulationDetailsStore');
var test_id = record.get('test_id');
this.test_id = test_id;
var map = this.getMapView();
var bounds;
store.each(function(r){
/*Get visbounds, for later use in overlay map*/
store.each(function(r) {
bounds = r.get('visbounds');
});
/* The information of the simulation, has data of the time
* steps available, crucial data for the displaying the images.
*/
this.requestInfo(test_id, cb);
/*show overlay*/
this.getOverlay().showBy(this.getMapView(), 'br-br');
},
/* When an area is selected, this function is executed
* Pushes a list to the view with data of the available simulations
* Set map center to the center of the area that was tapped
* Create a polygon dikes if there is information about them
*/
showOverlay: function(list, index, element, record){
/*Remove images, even if there werent any*/
this.getMapView().removeImages();
/*store center*/
var center = record.get('center');
var selected = false;
var area_id = record.get('area_id');
/* This is used because this function may only be
* executed onece. */
var selected = false;
for (i in this.selectedIndex)
if (this.selectedIndex[i] == index)
selected = true;
/* Instance of the store of all images data*/
var store = Ext.getStore('SimulationsSummary');
/* clear filter, if the flters are not cleared, they will
* be filtered on top of each other, resuting in an unwanted
* state.
*/
store.clearFilter();
store.filter("area_id", area_id);
/*push the side panel, in future create the view somewhere else*/
this.getSidepanel().push({
showAnimation: {
type: 'slide',
......@@ -166,13 +235,21 @@ Ext.define('app.controller.Main', {
id: 'summary',
xtype: 'list',
store: 'SimulationsSummary',
itemTpl: '<div><img class="flood_thumb" id="{test_id}_flood"' +
'style="height: 180px;" alt="noimage.png" src=""/> ' +
itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' +
'src=""/> ' +
'<img class="flood_thumb" id="{test_id}_flood"' +
'style:"width: 100px;" src=""/>' +
'<div style:"clear:both">' +
'<div id="{test_id}_control" class="control"></div>' +
'<div style:"clear:both"></div><b>{test_id}</b>: {submitted}</div>',
'</div><b>{test_id}</b>: {submitted}</div></div>',
});
/*set thumb images*/
this.setThumb(center);
/*the store with details of the of the simulation*/
var store = Ext.getStore('SimulationDetailsStore');
/*change url, a short coming of the store object of sencha touch*/
store.setUrl(area_id);
store.load();
......@@ -184,7 +261,6 @@ Ext.define('app.controller.Main', {
var bounds = record.get('visbounds');
var corners = record.get('corners');
store.each(function(r) {
dikes = r.get('dikes');
});
......@@ -198,26 +274,23 @@ Ext.define('app.controller.Main', {
this.getMapView().alterMapOptions({zoom: 13});
},
/* Set the thumb, the image is the last image of the simulation */
setThumb: function(center){
if (typeof this.test_id == undefined)
return;
var me = this;
var summary_store = Ext.getStore('SimulationsSummary');
// var mapImage ='http://maps.googleapis.com/maps/api/staticmap?center='+ center[0] +','+ center[1] + '&zoom=13&size=300x180&maptype=roadmap&sensor=false';
summary_store.each(function(record){
var test_id = record.get('test_id');
var setImages = function(result){
console.log(result);
//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';
// document.getElementById(test_id + "_map").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]) || 'recourses/images/noimage.png';
document.getElementById(test_id + "_flood").src = image;
}
me.requestInfo(record.get('test_id'), setImages);
});
// if (typeof this.test_id != undefined) {
// document.getElementById(this.test_id + "_thumb").src = this.getMapView().getCurrentImage();
// }
},
requestInfo: function(test_id, callback){
......@@ -236,23 +309,7 @@ Ext.define('app.controller.Main', {
});
},
openSimulations: function(){
console.log('opensimulations');
openSimulations: function(element){
this.getSimulationOptions().show();
}
});
// 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/model/SimulationModel.js
View file @ e831c4ac
......@@ -2,6 +2,6 @@ Ext.define('app.model.SimulationModel', {
extend: 'Ext.data.Model',
config: {
fields: ['name', 'corners', 'visbounds', 'area_id', 'center'],
fields: ['name', 'corners', 'visbounds', 'area_id', 'center', 'size'],
},
});
\ No newline at end of file
www/app/store/SimulationStore.js
View file @ e831c4ac
/*list of areas*/
Ext.define('app.store.SimulationStore', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Rest'],
......
www/app/store/SimulationsSummary.js
View file @ e831c4ac
/*second card list-window*/
Ext.define('app.store.SimulationsSummary', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Rest'],
......
www/app/view/List.js
View file @ e831c4ac
......@@ -7,13 +7,19 @@ Ext.define("app.view.List",
extend: "Ext.navigation.View",
xtype: 'listpanel',
requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
],
title: 'Simulations',
config: {
ui: 'lighter_blue',
navigationBar:
{
ui: 'darker_blue',
//html: '<h1>Simulations Panel</h1>',
},
items: [
{
id: 'cities',
......
www/app/view/Map.js
View file @ e831c4ac
......@@ -18,11 +18,11 @@ Ext.define('app.view.Map', {
listeners: {
maprender: function()
{
console.log('maprender');
this.overlayImages = [];
this.Images = [];
this.imageIndex = 0;
this.imageBounds = null;
this.play = false;
}
}
},
......@@ -51,7 +51,6 @@ Ext.define('app.view.Map', {
*
*/
createMarker: function(pos){
console.log("setmarker");
var pos = new google.maps.LatLng(pos[0], pos[1]);
new google.maps.Marker({
position: pos,
......@@ -61,33 +60,31 @@ Ext.define('app.view.Map', {
});
},
/*create overlay*/
// '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' ;
/*create overlays with area_id, bounds and timesteps
* Bounds: array(4)
*/
createOverlayImage: function(bounds, area_id, timesteps) {
console.log('createOverlayImages ' + 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 > 1)
{
this.removeImages();
}
//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';
for (i in timesteps)
{
console.log(i);
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[0].setMap(this.globalMap);
},
/* set next Image*/
nextImage: function()
{
var lastImagesIndex = this.imageIndex;
......@@ -97,10 +94,9 @@ Ext.define('app.view.Map', {
this.overlayImages[this.imageIndex].setMap(this.globalMap);
this.overlayImages[this.imageIndex - 1].setMap(null);
}
},
/*set prev image*/
prevImage: function()
{
this.overlayImages[this.imageIndex].setMap(null);
......@@ -109,13 +105,11 @@ Ext.define('app.view.Map', {
if (this.imageIndex >= 0)
{
this.overlayImages[this.imageIndex].setMap(this.globalMap);
console.log(this.overlayImages[this.imageIndex]);
}
},
removeImages: function()
{
console.log('removedImages');
for (i in this.overlayImages)
this.overlayImages[i].setMap(null);
this.imageIndex = 0;
......@@ -144,13 +138,11 @@ Ext.define('app.view.Map', {
getCurrentImage: function(){
if (this.overlayImages.length > 0) {
this.overlayImages[this.imageIndex];
console.log(this.overlayImages[this.imageIndex]);
return this.overlayImages[this.imageIndex].url;
}
},
getFloodImage: function(test_id, timestep){
console.log(timestep);
if (timestep)
return 'http://sangkil.science.uva.nl:8003/drfsm/' + test_id + '/visualization/level/map/' + timestep + '.png';
else return false;
......
www/app/view/StepsOverlay.js
View file @ e831c4ac
......@@ -5,6 +5,7 @@ Ext.define('app.view.StepsOverlay', {
config: {
style: "background: none",
id: 'overlay',
showAnimation: {
type: 'slideIn',
......@@ -16,10 +17,9 @@ Ext.define('app.view.StepsOverlay', {
direction:'right',
},
//draggable: true,
autoDestroy: true,
//autoDestroy: true,
hidden: true,
width: 120,
width: 200,
height: 100,
scroll: false,
items: [
......@@ -38,7 +38,7 @@ Ext.define('app.view.StepsOverlay', {
},
{
top: 10,
left: 20,
left: 30,
align: 'center',
items : [
{
......@@ -51,7 +51,7 @@ Ext.define('app.view.StepsOverlay', {
floating: 'right',
iconMask: true,
align: 'center',
left: 40
},
{
top: 50,
......@@ -64,7 +64,63 @@ Ext.define('app.view.StepsOverlay', {
iconCls: 'arrow_down',
align: 'center',
iconMask: true,
}]
left: 40
},
{
top: 24,
xtype: "button",
id: 'play',
ui: 'blue',
cls: 'overlay-button',
width: 40,
floating: 'left',
iconCls: 'arrow_right',
align: 'center',
iconMask: true,
left: 85,
},
{
top: 24,
hidden: true,
xtype: "button",
id: 'pause',
ui: 'red',
cls: 'overlay-button',
width: 40,
floating: 'left',
iconCls: 'pause',
align: 'center',
iconMask: true,
left: 85,
},
{
top: 24,
xtype: "button",
id: 'play-backw',
ui: 'blue',
cls: 'overlay-button',
width: 40,
floating: 'left',
iconCls: 'arrow_left',
align: 'center',
iconMask: true,
left: 0,
},
{
top: 24,
hidden: true,
xtype: "button",
id: 'pause-backw',
ui: 'red',
cls: 'overlay-button',
width: 40,
floating: 'left',
iconCls: 'pause',
align: 'center',
iconMask: true,
left: 0,
}],
}],
listeners: [{
......
www/build/native/My Application.app/Info.plist
View file @ e831c4ac
......@@ -2,6 +2,8 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>BuildMachineOSBuild</key>
<string>11D50</string>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
......@@ -14,29 +16,45 @@
<string>resources/icons/Icon~ipad.png</string>
</array>
<key>CFBundleIdentifier</key>
<string>com.mycompany.myAppID</string>
<string>com.codefabriek.tipspottmp</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>My Application</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleResourceSpecification</key>
<string>ResourceRules.plist</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleSupportedPlatforms</key>
<array>
<string>iPhoneSimulator</string>
<string>iPhoneOS</string>
</array>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>DTCompiler</key>
<string>com.apple.compilers.llvm.clang.1_0</string>
<key>DTPlatformBuild</key>
<string>9A334</string>
<key>DTPlatformName</key>
<string>iphonesimulator</string>
<string>iphoneos</string>
<key>DTPlatformVersion</key>
<string>5.0</string>
<key>DTSDKBuild</key>
<string>9A334</string>
<key>DTSDKName</key>
<string>iphonesimulator5.0</string>
<string>iphoneos5.0</string>
<key>DTXcode</key>
<string>0420</string>
<key>DTXcodeBuild</key>
<string>4D199</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>MinimumOSVersion</key>
<string>3.0</string>
<key>UIDeviceFamily</key>
<array>
<integer>1</integer><integer>2</integer>
......
www/build/native/My Application.app/webapp/app.js
View file @ e831c4ac
This source diff could not be displayed because it is too large. You can view the blob instead.
www/build/native/My Application.app/webapp/index.html
View file @ e831c4ac
......@@ -70,12 +70,17 @@
.flood_thumb {
margin-right: 20px;
position: absolute;
z-index: 100;
left: 10px;
top: 10px;
border: solid #ababab;
background: white;
}
.map_thumb {
position: relative;
left: 0px;
top: 0px;
}
#overlay {
......
www/build/native/My Application.app/webapp/resources/css/app.css
View file @ e831c4ac
This source diff could not be displayed because it is too large. You can view the blob instead.
www/build/package/app.js
View file @ e831c4ac
This source diff could not be displayed because it is too large. You can view the blob instead.
www/build/package/index.html
View file @ e831c4ac
......@@ -70,12 +70,19 @@
.flood_thumb {
margin-right: 20px;
position: relative;
z-index: 100;
left: 10px;
top: 10px;
width: 300px;
height: 180px;
border: solid #ababab;
background: white;
}
.map_thumb {
position: relative;
left: 0px;
top: 0px;
}
#overlay {
......
www/build/package/resources/css/app.css
View file @ e831c4ac
This source diff could not be displayed because it is too large. You can view the blob instead.
www/index.html
View file @ e831c4ac
......@@ -70,12 +70,19 @@
.flood_thumb {
margin-right: 20px;
position: relative;
z-index: 100;
left: 10px;
top: 10px;
border: solid #ababab;
background: white;
width: 300px;
height: 180px;
border: solid #a0a0a0;
}
.map_thumb {
position: relative;
left: 0px;
top: 0px;
}
#overlay {
......
www/packager.json
View file @ e831c4ac
......@@ -11,7 +11,7 @@
* @cfg {String} applicationId
* This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
*/
"applicationId":"com.mycompany.myAppID",
"applicationId":"com.codefabriek.tipspottmp",
/**
* @cfg {String} versionString
......@@ -63,7 +63,7 @@
* - Android
* - AndroidEmulator
*/
"platform":"iOSSimulator",
"platform":"Android",
/**
* @cfg {String} deviceType
......@@ -84,7 +84,7 @@
* This is the location of your certificate.
* This is required when you are developing for Android or you are developing on Windows.
*/
"certificatePath":"/path/to/certificate.file",
"certificatePath":"~/Documents/UvA/floodsimulation/FloodSimulation-Browser/flood-key.keystore",
/**
* @cfg {String} certificateAlias
......
www/packager.temp.json deleted 100644 → 0
View file @ 04b400d7
{"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
www/resources/css/app.css
View file @ e831c4ac
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 @ e831c4ac
@import 'sencha-touch/default/all';
@include pictos-iconmask('close_overlay');
@include pictos-iconmask('play1');
@include pictos-iconmask('pause');
@include sencha-toolbar-ui('darker_blue', #003F69, 'glossy');
@include sencha-toolbar-ui('lighter_blue', #386EBA, 'glossy');
@include sencha-toolbar-ui('lighter_blue', #00538F, 'glossy');
@include sencha-button-ui('blue', #003F69, 'glossy');
@include sencha-button-ui('red', #C40000, 'glossy');
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
......
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