timelapse.xhtml
5.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:map="http://java.sun.com/jsf/composite/cditools/map"
xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<h:body>
<ui:composition template="#{sessionHandler.template}">
<f:metadata>
<f:viewParam name="mapId" value="#{timelapseMapView.mapId}"/>
<f:event type="preRenderView" listener="#{timelapseMapView.init}"/>
</f:metadata>
<ui:define name="content">
<script type="text/javascript">
//<![CDATA[
var datetimeFormat = '#{sessionHandler.datetimeFormat}';
var firstTime = new Date(#{timelapseMapView.firstTime.time});
var lastTime = new Date(#{timelapseMapView.lastTime.time});
var varDiff = #{timelapseMapView.lastTime.time - timelapseMapView.firstTime.time};
var imgurl = "#{request.contextPath}/PlaceMap?mapid=#{timelapseMapView.mapId}×tamp=";
function changeStamp(i) {
var ts = $('#timestamp');
setStamp(parseInt(ts.val()) + parseInt(i));
}
function updateTsDate() {
var d = new Date(getTimelapseStamp());
var tsDate = $('#timelapseDate');
tsDate.val(d.toJSON());
reloadImage();
}
function reloadImage() {
var img = $('#tsimage');
img.attr('src', imgurl + getTimelapseStamp());
}
function getTimelapseStamp() {
var ret = firstTime.getTime() + getOffsetMs();
if (ret > lastTime.getTime()) {
ret = lastTime.getTime()
} else if (ret < firstTime.getTime()) {
ret = firstTime.getTime();
}
return ret;
}
function setStamp(stamp){
$('#timestamp').val(stamp);
updateTsDate();
PF('slider').setValue(stamp);
}
function getOffsetMs() {
return parseInt($('#timestamp').val())*1000;
}
function loadDateString(entry) {
console.log(entry);
var d = new Date($('#timelapseDate').val());
var ts = $('#timestamp').val(d.getTime());
updateTsDate();
}
$().ready(function () {
$('#TimelapseDate').val(firstTime.toJSON());
updateTsDate();
});
//]]>
</script>
<div>
<h:outputText value="#{i18n['map.timelapse.startTime']}" />
<h:outputText value="#{timelapseMapView.firstTime}">
<f:convertDateTime pattern="#{sessionHandler.datetimeFormat}"
timeZone="#{sessionHandler.timezone}"/>
</h:outputText></div>
<div>
<h:outputText value="#{i18n['map.timelapse.endTime']}" />
<h:outputText value="#{timelapseMapView.lastTime}">
<f:convertDateTime pattern="#{sessionHandler.datetimeFormat}"
timeZone="#{sessionHandler.timezone}"/>
</h:outputText>
</div>
<div>
<button onclick="setStamp(0)"><-</button>
<button onclick="changeStamp(-604800)">-7d</button>
<button onclick="changeStamp(-86400)">-1d</button>
<button onclick="changeStamp(-21600)">-6h</button>
<button onclick="changeStamp(-300)">-5min</button>
<input id="timelapseDate" onchange="loadDateString(this);" type="text"/>
<button onclick="changeStamp(300)">+5min</button>
<button onclick="changeStamp(21600)">+6h</button>
<button onclick="changeStamp(86400)">+1d</button>
<button onclick="changeStamp(604800)">+7d</button>
<button onclick="setStamp(#{(timelapseMapView.lastTime.time - timelapseMapView.firstTime.time)/1000})">-></button>
</div>
<h:inputText id="timestamp" value="#{timelapseMapView.timestampValue}"/>
<p:slider widgetVar="slider" style="width: 200px;" for="timestamp" onSlideEnd="updateTsDate()"
maxValue="#{(timelapseMapView.lastTime.time - timelapseMapView.firstTime.time)/1000}"/>
<img id="tsimage" alt="Timelapse image"
src="#{request.contextPath}/PlaceMap?mapid=#{timelapseMapView.mapId}&timestamp=#{timelapseMapView.firstTime.time}"/>
</ui:define>
</ui:composition>
</h:body>
</html>