Miko/tar1090
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more replay interface tweaks

Browse Source
This commit is contained in:
Matthias Wirth
2021-05-24 00:27:43 +02:00
parent 14d67054f1
commit f92dfd5486
3 changed files with 76 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
html/index.html
View File

@@ -753,46 +753,11 @@
<p id="dateHint" class="hintText">Date:</p>
<input type="text" class="datepicker" id="replayDatepicker">
<p id="timeHint" class="hintText">Time:</p>
<select id="hourSelect">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
</select>
<select id="minuteSelect">
<option>00</option>
<option>15</option>
<option>30</option>
<option>45</option>
</select>
<p id="hourSelect"></p>
<p id="minuteSelect"></p>
<p id="timeZone">UTC</p>
<p id="speedHint" class="hintText">Speed:</p>
<select id="speedSelect">
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
</select>
<p id="speedSelect"></p>
<button id="findHistory">Find History</button>
</div> <!-- replayBar -->

89
html/script.js
View File

@@ -682,12 +682,8 @@ function initPage() {
ts.setUTCMinutes(numbers[4]);
}
replay = {
playing: true,
ts: ts,
ival: 60 * 1000,
speed: 30,
};
replay = replayDefaults(ts);
replay.playing = true;
}
if (onMobile)
@@ -839,17 +835,17 @@ function initPage() {
});
jQuery("#findHistory").click(function(){
console.log("replayDatepicker: "+replayDatepicker.value);
console.log("hourSelect: "+hourSelect.value);
console.log("minuteSelect: "+minuteSelect.value);
console.log("speedSelect: "+speedSelect.value);
console.log("hourSelect: "+ replay.hours);
console.log("minuteSelect: "+ replay.minutes);
console.log("speedSelect: "+ replay.speed);
let date = new Date(replayDatepicker.value);
date.setUTCHours(Number(hourSelect.value));
date.setUTCMinutes(Number(minuteSelect.value));
date.setUTCHours(Number(replay.hours));
date.setUTCMinutes(Number(replay.minutes));
replay.ival = 60 * 1000;
replay.speed = Number(speedSelect.value);
playReplay(true);
replayClear();
loadReplay(date);
});
@@ -5848,12 +5844,27 @@ function currentExtent(factor) {
return myExtent(OLMap.getView().calculateExtent(size));
}
function replayDefaults(ts) {
return {
playing: false,
ts: ts,
ival: 60 * 1000,
speed: 30,
hours: ts.getUTCHours(),
minutes: ts.getUTCMinutes(),
};
}
function replayClear() {
reaper(true);
refreshFilter();
}
function loadReplay(ts) {
let epochms = new Date().getTime();
if (epochms - ts.getTime() < 30 * 60 * 1000) {
reaper(true);
refreshFilter();
ts = new Date(epochms - 60 * 60 * 1000);
replayClear();
}
replay.ts = ts;
let xhrOverride = new XMLHttpRequest();
@@ -5953,8 +5964,7 @@ function play(index) {
return;
} else {
index = 0;
reaper(true);
refreshFilter();
replayClear();
}
}
replay.index = index;
@@ -6177,6 +6187,11 @@ function playReplay(state){
}
};
function replaySetTimeHint() {
jQuery('#timeHint').text('Time: '
+ replay.hours.toString().padStart(2, '0') + ':'
+ replay.minutes.toString().padStart(2, '0'));
}
function showReplayBar(){
console.log('showReplayBar()');
if (showingReplayBar){
@@ -6194,20 +6209,46 @@ function showReplayBar(){
let ts = new Date();
ts.setUTCHours(ts.getUTCHours() - 1);
if (!replay) {
replay = {
playing: false,
ts: ts,
ival: 60 * 1000,
speed: 30,
};
replay = replayDefaults(ts);
replay.playing = false;
}
ts = new Date(replay.ts);
ts.setUTCMinutes((parseInt((ts.getUTCMinutes() + 7.5)/15) * 15) % 60);
jQuery("#hourSelect").val(ts.getUTCHours()).change();
jQuery("#minuteSelect").val(ts.getUTCMinutes()).change();
jQuery("#replayDatepicker").datepicker('setDate', ts);
showingReplayBar = true;
jQuery('#hourSelect').slider({
value: ts.getUTCHours(),
step: 1,
min: 0,
max: 23,
slide: function(event, ui) {
replay.hours = ui.value;
replaySetTimeHint();
},
});
jQuery('#minuteSelect').slider({
value: ts.getUTCMinutes(),
step: 1,
min: 0,
max: 59,
slide: function(event, ui) {
replay.minutes = ui.value;
replaySetTimeHint();
},
});
replaySetTimeHint();
jQuery('#speedSelect').slider({
value: replay.speed,
step: 1,
min: 1,
max: 60,
slide: function(event, ui) {
replay.speed = ui.value;
jQuery('#speedHint').text('Speed: ' + replay.speed + 'x');
},
});
jQuery('#speedHint').text('Speed: ' + replay.speed + 'x');
}
};

19
html/style.css
View File

@@ -824,15 +824,15 @@ input{
position: absolute;
height: 10px;
bottom: 0%;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 3fr 1fr 1fr 1fr;
grid-template-rows: 20px 40px 20px;
justify-items: center;
align-items: center;
grid-template-areas:
". datehint timehint timehint timezonehint speedhint ."
"play date hours minutes timezone speed findhistory"
". . showingdate showingdate showingdate . ."
". . . . . . .";
". datehint timehint hours speedhint ."
"play date . minutes speed findhistory"
". . showingdate showingdate showingdate ."
". . . . . .";
}
#replayPlay{
grid-area: play;
@@ -841,13 +841,16 @@ input{
grid-area: date;
}
#hourSelect{
width: 80%;
grid-area: hours;
}
#minuteSelect{
width: 80%;
grid-area: minutes;
}
#speedSelect{
grid-area: speed;
width: 80%;
}
#findHistory{
grid-area: findhistory;
@@ -861,9 +864,6 @@ input{
#dateHint{
grid-area: datehint;
}
#speedSelect{
grid-area: speed;
}
#speedHint{
grid-area: speedhint;
}
@@ -871,8 +871,5 @@ input{
grid-area: showingdate;
justify-self:start;
}
#timeZone{
grid-area:timezone;
}