[Tynstep-svn] r232 - in trunk/step/step-web/src/main: java/com/tyndalehouse/step/models/timeline/simile webapp/js webapp/tempdev
ChrisBurrell at crosswire.org
ChrisBurrell at crosswire.org
Mon May 16 14:16:25 MST 2011
Author: ChrisBurrell
Date: 2011-05-16 14:16:25 -0700 (Mon, 16 May 2011)
New Revision: 232
Added:
trunk/step/step-web/src/main/webapp/tempdev/timeline.html
Modified:
trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileEvent.java
trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineImpl.java
trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineTranslatorImpl.java
trunk/step/step-web/src/main/webapp/js/geography.js
trunk/step/step-web/src/main/webapp/js/initLib.js
trunk/step/step-web/src/main/webapp/js/timeline.js
trunk/step/step-web/src/main/webapp/js/ui_hooks.js
Log:
timebands on timelines - next comes hotspots
Modified: trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileEvent.java
===================================================================
--- trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileEvent.java 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileEvent.java 2011-05-16 21:16:25 UTC (rev 232)
@@ -23,6 +23,8 @@
private boolean duration;
private String title;
private String description;
+ private int hotSpotId;
+
private String image; // ? should be url? TODO
private String link; // ? should be url
@@ -123,4 +125,18 @@
public void setDuration(final boolean duration) {
this.duration = duration;
}
+
+ /**
+ * @return the hotspotId
+ */
+ public int getHotSpotId() {
+ return this.hotSpotId;
+ }
+
+ /**
+ * @param hotSpotId the hotSpotId to set
+ */
+ public void setHotSpotId(final int hotSpotId) {
+ this.hotSpotId = hotSpotId;
+ }
}
Modified: trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineImpl.java
===================================================================
--- trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineImpl.java 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineImpl.java 2011-05-16 21:16:25 UTC (rev 232)
@@ -19,6 +19,7 @@
* 'description': 'by Lyonel Feininger, American/German Painter, 1871-1956',
* 'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
* 'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
+ * hotspot: '2'
* },
* ]
* }
Modified: trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineTranslatorImpl.java
===================================================================
--- trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineTranslatorImpl.java 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/java/com/tyndalehouse/step/models/timeline/simile/SimileTimelineTranslatorImpl.java 2011-05-16 21:16:25 UTC (rev 232)
@@ -32,6 +32,10 @@
e.setDescription(te.getSummary());
e.setStart(te.getFromDate().toString());
+ if (te.getHotSpot() != null) {
+ e.setHotSpotId(te.getHotSpot().getId());
+ }
+
final LocalDateTime toDate = te.getToDate();
if (toDate != null) {
e.setEnd(te.getToDate().toString());
Modified: trunk/step/step-web/src/main/webapp/js/geography.js
===================================================================
--- trunk/step/step-web/src/main/webapp/js/geography.js 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/webapp/js/geography.js 2011-05-16 21:16:25 UTC (rev 232)
@@ -6,6 +6,8 @@
this.rootElement = rootElement;
this.initialised = false;
this.passages = passages;
+ this.markers = [];
+ this.removeMarkers = true;
var self = this;
$(rootElement).hear("show-maps", function(selfElement, data) {
@@ -43,17 +45,41 @@
GeographyWidget.prototype.goToReference = function(reference) {
if(this.map) {
+
+ if(this.removeMarkers) {
+ this.removeMarkersFromMap();
+ }
+
var self = this;
-
$.getSafe(GEOGRAPHY_GET_PLACES + reference, function(places) {
$.each(places, function(index, place) {
+ var content = "<div>" + place.esvName + "<br /><div>@ " + place.latitude + ", " + place.longitude + "</div>" + place.comment + "</div>";
+ var infoWindow = new google.maps.InfoWindow({
+ content: content
+ });
+
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.latitude, place.longitude),
map: self.map,
title: place.esvName
});
+
+ self.markers.push(marker);
+ google.maps.event.addListener(marker, 'click', function() {
+ infoWindow.open(self.map, marker);
+ });
});
});
}
};
+/**
+ * removes all markers from the map
+ */
+GeographyWidget.prototype.removeMarkersFromMap = function() {
+ if(this.markers) {
+ for(var ii in this.markers) {
+ this.markers[ii].setMap(null);
+ }
+ }
+};
Modified: trunk/step/step-web/src/main/webapp/js/initLib.js
===================================================================
--- trunk/step/step-web/src/main/webapp/js/initLib.js 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/webapp/js/initLib.js 2011-05-16 21:16:25 UTC (rev 232)
@@ -2,6 +2,10 @@
* This file is used for setting up variables used by external libraries
*/
+//Set up the variables for accessing the server
+STEP_SERVER_BASE_URL = "rest/";
+
+
//Set up timeline:
Timeline_ajax_url="libs/timeline_ajax/simile-ajax-api.js";
Timeline_urlPrefix="libs/timeline_js/";
Modified: trunk/step/step-web/src/main/webapp/js/timeline.js
===================================================================
--- trunk/step/step-web/src/main/webapp/js/timeline.js 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/webapp/js/timeline.js 2011-05-16 21:16:25 UTC (rev 232)
@@ -5,9 +5,19 @@
function TimelineWidget(rootElement) {
this.rootElement = rootElement;
var self = this;
+
+ this.hotspots = [];
+ this.timebands = [];
+ this.initialised = false;
+
$(rootElement).hear("show-timeline", function(selfElement) {
//first show the bottom pane...
- self.onLoad();
+ if(!this.initialised) {
+ self.initAndLoad();
+ } else {
+ self.onLoad();
+ }
+
$(window).resize(self.onResize);
});
@@ -17,158 +27,154 @@
});
}
-var tl;
+/**
+ * @returns true if initialisation was required
+ */
+TimelineWidget.prototype.initAndLoad = function() {
+ this.initialised = true;
+ var self = this;
+
+ if(this.config == null) {
+ //we obtain the configuration from the server - this tells us about timebands -> hotspots, etc.
+ $.getSafe(TIMELINE_GET_CONFIG, function(data) {
+ //want hotspots -> timebands link (we sent the other way round to save space on the copper wire
+ $.each(data, function(timebandIndex, timeband) {
+ $.each(timeband.hotspots, function(hotspotIndex, hotspot) {
+ self.hotspots[hotspot.id] = {
+ timebandId: timeband.id,
+ description: hotspot.description,
+ scale: hotspot.scale
+ };
+ });
+
+ self.timebands[timeband.id] = { description: timeband.description, scale: timeband.scale} ;
+ });
+ self.onLoad();
+ });
+ }
+}
+
TimelineWidget.prototype.onLoad = function() {
- var eventSource = new Timeline.DefaultEventSource();
var zones = [];
+ this.theme = Timeline.ClassicTheme.create();
+ var self = this;
+ this.theme.event.bubble.width = 250;
+
- zones[0] = { start: "-1252",
- end: "-1249",
-// magnify: 1,
- unit: Timeline.DateTime.YEAR
- };
+
+ $.getSafe(TIMELINE_GET_EVENTS_IN_PERIOD +"-101690000000000/-101580000000000", function(json, url) {
+ //work out how many bands to show first!
+ var bands = self.getBands(json.events);
+ if(!self.tl) {
+ self.tl = Timeline.create(self.rootElement[0], bands, Timeline.HORIZONTAL);
+ }
+
+// bands[0].eventSource.loadJSON(json, TIMELINE_GET_EVENTS_IN_PERIOD +"-101690000000000/-101580000000000");
+ self.loadEvents(bands, json);
+ });
+}
+
+/**
+ * Returns the bands to be created given the data from the ui
+ */
+TimelineWidget.prototype.getBands = function(events) {
+ var uiTimebands = [];
+ var obtained = [];
-
- if(this.config == null) {
- $.getSafe(TIMELINE_GET_CONFIG, function(data) {
-
-// $.each(data, function(index, item) {
-// //set up the bands
-// //set up the hotspots
-// });
- });
- }
-
-//
-//
-//
-// var zones = [
-// { start: "Fri Nov 22 1963 00:00:00 GMT-0600",
-// end: "Mon Nov 25 1963 00:00:00 GMT-0600",
-// magnify: 10,
-// unit: Timeline.DateTime.DAY
-// },
-// { start: "Fri Nov 22 1963 09:00:00 GMT-0600",
-// end: "Sun Nov 24 1963 00:00:00 GMT-0600",
-// magnify: 5,
-// unit: Timeline.DateTime.HOUR
-// },
-// { start: "Fri Nov 22 1963 11:00:00 GMT-0600",
-// end: "Sat Nov 23 1963 00:00:00 GMT-0600",
-// magnify: 5,
-// unit: Timeline.DateTime.MINUTE,
-// multiple: 10
-// },
-// { start: "Fri Nov 22 1963 12:00:00 GMT-0600",
-// end: "Fri Nov 22 1963 14:00:00 GMT-0600",
-// magnify: 3,
-// unit: Timeline.DateTime.MINUTE,
-// multiple: 5
-// }
-// ];
-// var zones2 = [
-// { start: "Fri Nov 22 1963 00:00:00 GMT-0600",
-// end: "Mon Nov 25 1963 00:00:00 GMT-0600",
-// magnify: 10,
-// unit: Timeline.DateTime.WEEK
-// },
-// { start: "Fri Nov 22 1963 09:00:00 GMT-0600",
-// end: "Sun Nov 24 1963 00:00:00 GMT-0600",
-// magnify: 5,
-// unit: Timeline.DateTime.DAY
-// },
-// { start: "Fri Nov 22 1963 11:00:00 GMT-0600",
-// end: "Sat Nov 23 1963 00:00:00 GMT-0600",
-// magnify: 5,
-// unit: Timeline.DateTime.MINUTE,
-// multiple: 60
-// },
-// { start: "Fri Nov 22 1963 12:00:00 GMT-0600",
-// end: "Fri Nov 22 1963 14:00:00 GMT-0600",
-// magnify: 3,
-// unit: Timeline.DateTime.MINUTE,
-// multiple: 15
-// }
-// ];
-//
- var theme = Timeline.ClassicTheme.create();
- theme.event.bubble.width = 250;
-
+ var self = this;
+
var date = "-1250";
- var bandInfos = [
- Timeline.createBandInfo({
- width: "100%",
- intervalUnit: Timeline.DateTime.MONTH,
- intervalPixels: 150,
- zones: zones,
- eventSource: eventSource,
- date: date,
-// timeZone: -6,
- theme: theme
- })
-// ,
-// Timeline.createHotZoneBandInfo({
-// width: "20%",
-// intervalUnit: Timeline.DateTime.MONTH,
-// intervalPixels: 200,
-// zones: zones2,
-// eventSource: eventSource,
-// date: date,
-// timeZone: -6,
-// overview: true,
-// theme: theme
-// })
- ];
-// bandInfos[1].syncWith = 0;
-// bandInfos[1].highlight = true;
+ var zones = [];
-// for (var i = 0; i < bandInfos.length; i++) {
-// bandInfos[i].decorators = [
-// new Timeline.SpanHighlightDecorator({
-// startDate: "Fri Nov 22 1963 12:30:00 GMT-0600",
-// endDate: "Fri Nov 22 1963 13:00:00 GMT-0600",
-// color: "#FFC080", // set color explicitly
-// opacity: 50,
-// startLabel: "shot",
-// endLabel: "t.o.d.",
-// theme: theme
-// }),
-// new Timeline.PointHighlightDecorator({
-// date: "Fri Nov 22 1963 14:38:00 GMT-0600",
-// opacity: 50,
-// theme: theme
-// // use the color from the css file
-// }),
-// new Timeline.PointHighlightDecorator({
-// date: "Sun Nov 24 1963 13:00:00 GMT-0600",
-// opacity: 50,
-// theme: theme
-// // use the color from the css file
-// })
-// ];
-// }
-
- if(!tl) {
- tl = Timeline.create(this.rootElement[0], bandInfos, Timeline.HORIZONTAL);
- }
-
- tl.loadJSON("rest/timeline/getEventsInPeriod/-101690000000000/-101580000000000", function(json, url) {
- eventSource.loadJSON(json, url);
- });
-
-
-
-// tl.loadXML("jfk.xml", function(xml, url) { eventSource.loadXML(xml, url); });
-// setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
+ $.each(events, function(index, event) {
+ //TODO this can be optmized, since we are re-creating the uiTimebands every time
+ var hotspot = self.hotspots[event.hotSpotId];
+ if(hotspot != null) {
+ var timeband = self.timebands[hotspot.timebandId];
+ var unit = self.resolveScale(timeband.scale);
+
+ if(obtained[hotspot.timebandId] == null) {
+ obtained[hotspot.timebandId] = true;
+ var bandInfo = Timeline.createBandInfo({
+ width: "50px",
+ trackGap: 0.2,
+ trackHeight: 0.5,
+ intervalUnit: unit,
+ intervalPixels: 150,
+// zones: { start: "-2000", end: "2000", /* magnify: 1, */ unit: unit },
+ zones: { start: "-1252", end: "-1249", /* magnify: 1, */ unit: unit },
+ eventSource: new Timeline.DefaultEventSource(),
+ date: date,
+ theme: self.theme,
+ });
+
+ bandInfo.stepTimebandId = hotspot.timebandId;
+ uiTimebands.push( bandInfo );
+ }
+ }
+ });
+
+// alert(uiTimebands);
+ return uiTimebands;
}
+
+
+/**
+ * loads up the events on the correct bands
+ * the band has a property called stepTimebandId which we can match to hotspots[hotspotId].timebandId
+ */
+TimelineWidget.prototype.loadEvents = function(bands, json) {
+ var self = this;
+ var events = json.events;
+
+ $.each(bands, function(bandIndex, band) {
+ var eventsOnBand = $.grep(events, function(element, eventIndex) {
+ //TODO fix events without hotspot ids
+ var hotspot = self.hotspots[element.hotSpotId];
+ if(hotspot == null) {
+ return false;
+ }
+
+ return band.stepTimebandId == hotspot.timebandId;
+ });
+// alert(eventsOnBand.length);
+ band.eventSource.loadJSON({ dateTimeFormat: json.dateTimeFormat, events: eventsOnBand }, TIMELINE_GET_EVENTS_IN_PERIOD +"-101690000000000/-101580000000000");
+ });
+
+};
+
+/**
+ * resolves and returns the timeline scale
+ */
+TimelineWidget.prototype.resolveScale = function(scale) {
+ //TODO remove
+// return Timeline.DateTime.WEEK;
+
+ switch(scale) {
+ case 'CENTURY': return Timeline.DateTime.CENTURY;
+ case 'DAY': return Timeline.DateTime.DAY;
+ case 'DECADE': return Timeline.DateTime.DECADE;
+ case 'MILLENIUM': return Timeline.DateTime.MILLENNIUM;
+ case 'MONTH': return Timeline.DateTime.MONTH;
+ case 'WEEK': return Timeline.DateTime.WEEK;
+ case 'YEAR': return Timeline.DateTime.YEAR;
+ default: return Timeline.DateTime.MONTH;
+ }
+};
+
+/**
+ * resizes the timeline appropriately
+ */
var resizeTimerID = null;
TimelineWidget.prototype.onResize = function() {
- if (resizeTimerID == null) {
+ var self = this;
+
+ if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
- tl.layout();
+ self.tl.layout();
}, 500);
}
}
\ No newline at end of file
Modified: trunk/step/step-web/src/main/webapp/js/ui_hooks.js
===================================================================
--- trunk/step/step-web/src/main/webapp/js/ui_hooks.js 2011-05-15 13:26:17 UTC (rev 231)
+++ trunk/step/step-web/src/main/webapp/js/ui_hooks.js 2011-05-16 21:16:25 UTC (rev 232)
@@ -9,35 +9,37 @@
// The following section defines method names and controller names
// These are used as part of the rest-like calls
/////////////////////////////////////////////////////////////////////////
-BOOKMARKS_GET = "rest/favourites/getBookmarks";
-BOOKMARKS_ADD = "rest/favourites/addBookmark/";
-HISTORY_GET = "rest/favourites/getHistory/";
-HISTORY_ADD = "rest/favourites/addHistory/";
+BOOKMARKS_GET = STEP_SERVER_BASE_URL + "favourites/getBookmarks";
+BOOKMARKS_ADD = STEP_SERVER_BASE_URL + "favourites/addBookmark/";
+HISTORY_GET = STEP_SERVER_BASE_URL + "favourites/getHistory/";
+HISTORY_ADD = STEP_SERVER_BASE_URL + "favourites/addHistory/";
-BIBLE_GET_BIBLE_VERSIONS = "rest/bible/getBibleVersions/";
-BIBLE_GET_BIBLE_TEXT = "rest/bible/getBibleText/";
-BIBLE_GET_FEATURES = "rest/bible/getFeatures/";
-BIBLE_GET_ALL_FEATURES = "rest/bible/getAllFeatures/";
-MODULE_GET_ALL_MODULES = "rest/module/getAllModules/";
-MODULE_GET_ALL_INSTALLABLE_MODULES = "rest/module/getAllModules/";
-MODULE_GET_DEFINITION = "rest/module/getDefinition/";
+BIBLE_GET_BIBLE_VERSIONS = STEP_SERVER_BASE_URL + "bible/getBibleVersions/";
+BIBLE_GET_BIBLE_TEXT = STEP_SERVER_BASE_URL + "bible/getBibleText/";
+BIBLE_GET_FEATURES = STEP_SERVER_BASE_URL + "bible/getFeatures/";
+BIBLE_GET_ALL_FEATURES = STEP_SERVER_BASE_URL + "bible/getAllFeatures/";
-SETUP_IS_FIRST_TIME = "rest/setup/isFirstTime/";
-SETUP_INSTALL_DEFAULT_MODULES = "rest/setup/installDefaultModules/";
-SETUP_INSTALL_BIBLE = "rest/setup/installBible/";
+MODULE_GET_ALL_MODULES = STEP_SERVER_BASE_URL + "module/getAllModules/";
+MODULE_GET_ALL_INSTALLABLE_MODULES = STEP_SERVER_BASE_URL + "module/getAllModules/";
+MODULE_GET_DEFINITION = STEP_SERVER_BASE_URL + "module/getDefinition/";
-TIMELINE_GET_EVENTS = "rest/timeline/getEvents/";
-TIMELINE_GET_EVENTS_FROM_REFERENCE = "rest/timeline/getEventsFromReference/";
-TIMELINE_GET_CONFIG = "rest/timeline/getTimelineConfiguration";
+SETUP_IS_FIRST_TIME = STEP_SERVER_BASE_URL + "setup/isFirstTime/";
+SETUP_INSTALL_DEFAULT_MODULES = STEP_SERVER_BASE_URL + "setup/installDefaultModules/";
+SETUP_INSTALL_BIBLE = STEP_SERVER_BASE_URL + "setup/installBible/";
-USER_LOGIN = "rest/user/login/";
-USER_LOGOUT = "rest/user/logout/";
-USER_REGISTER = "rest/user/register/"
-USER_GET_LOGGED_IN_USER = "rest/user/getLoggedInUser";
+TIMELINE_GET_EVENTS = STEP_SERVER_BASE_URL + "timeline/getEvents/";
+TIMELINE_GET_EVENTS_IN_PERIOD = STEP_SERVER_BASE_URL + "timeline/getEventsInPeriod/";
+TIMELINE_GET_EVENTS_FROM_REFERENCE = STEP_SERVER_BASE_URL + "timeline/getEventsFromReference/";
+TIMELINE_GET_CONFIG = STEP_SERVER_BASE_URL + "timeline/getTimelineConfiguration";
-GEOGRAPHY_GET_PLACES = "rest/geography/getPlaces/"
+USER_LOGIN = STEP_SERVER_BASE_URL + "user/login/";
+USER_LOGOUT = STEP_SERVER_BASE_URL + "user/logout/";
+USER_REGISTER = STEP_SERVER_BASE_URL + "user/register/"
+USER_GET_LOGGED_IN_USER = STEP_SERVER_BASE_URL + "user/getLoggedInUser";
+
+GEOGRAPHY_GET_PLACES = STEP_SERVER_BASE_URL + "geography/getPlaces/"
//////////////////////////
// SOME DEFAULTS
Added: trunk/step/step-web/src/main/webapp/tempdev/timeline.html
===================================================================
--- trunk/step/step-web/src/main/webapp/tempdev/timeline.html (rev 0)
+++ trunk/step/step-web/src/main/webapp/tempdev/timeline.html 2011-05-16 21:16:25 UTC (rev 232)
@@ -0,0 +1,42 @@
+<html>
+<head>
+ <title>STEP :: Scripture Tools for Every Pastor :: Timeline</title>
+ <script>
+ <!--
+ STEP_SERVER_BASE_URL = "../rest/";
+
+
+ //Set up timeline:
+ Timeline_ajax_url="../libs/timeline_ajax/simile-ajax-api.js";
+ Timeline_urlPrefix="../libs/timeline_js/";
+ Timeline_parameters="bundle=true";
+ -->
+ </script>
+
+
+
+ <script src="../libs/timeline_js/timeline-api.js?bundle=true" type="text/javascript"></script>
+ <script src="../libs/jquery-1.4.2.min.js" type="text/javascript"></script>
+ <script src="../libs/jquery-ui-1.8.5.custom.min.js" type="text/javascript"></script>
+ <script src="../libs/jquery-shout.js" type="text/javascript"></script>
+
+ <script src="../js/util.js" type="text/javascript"></script>
+
+ <script src="../js/timeline.js" type="text/javascript"></script>
+ <script src="../js/ui_hooks.js" type="text/javascript"></script>
+
+ <script>
+ <!--
+ $(document).ready(function() {
+ var tw = new TimelineWidget($("#container"));
+ $.shout("show-timeline");
+ });
+ -->
+ </script>
+</head>
+<body>
+ <div id="container" style="height: 100%">
+ </div>
+</body>
+
+</html>
\ No newline at end of file
More information about the Tynstep-svn
mailing list