Ad hoc timelapse #134
Description
``It would be useful to add a new tab in UI3 that can be used to generate ad hoc time-lapses.
The same could be achieved by creating a "snap" option on the timeline slider where moving mouse would snap to a specified time, it would have to preload all frames so you can quickly animate when using 4k footage on slow storage.
It is useful if you need to quickly check some event by skimming thru footage at the same time of day over a certain time period, e.g. it could be useful to quickly see how your garden is growing, how are structures deteriorating, or verify certain process that runs on schedule.
The difference compared to the timeline is that you can control the time of day so you get the same lighting on every frame.
Another advantage of this solution is that it will preload all images, so even you your footage is on a slow storage you can quickly "animate" it.
I've quickly drafted an HTML file that creates ad hoc time-lapses that are controlled with the slider.
How to use:
- Edit the HTML file in any text editor and modify the following lines:
var biUrl = 'http://10.10.10.11:81' //URL to your BlueIris server
var cameras = 'Back,Front,FrontDr,Side,Terrace,Doorbell' //List of cameras for the dropdown
var username = '<your BI UI3 username>'
var password = '<your BI UI3 password>'
var atHour = 12 //Time of day (hour) at which the image will be captured
var intervalSeconds = 24 * 60 * 60 //Interval between images, default every 24h
- Save and open the file in any browser
- Select the camera
- Select the time range
- Use the slider to "animate"
<!DOCTYPE html>
<html>
<head>
<script>
var biUrl = 'http://10.10.10.104:81'
var cameras = 'Back,Front,FrontDr,Side,Terrace,Doorbell'
var username = 'ai'
var password = 'ai'
var atHour = 12
var intervalSeconds = 24 * 60 * 60
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="//cdn.rawgit.com/placemarker/jQuery-MD5/master/jquery.md5.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
<title>BlueIris Timelapse</title>
</head>
<body>
Camera: <select name="cameras" id="cameras"></select>
<div id="event_period">
Date start: <input type="text" class="actual_range" id="startDate">
Date end: <input type="text" class="actual_range" id="endDate">
</div>
<div class="slidecontainer">
<input type="range" min="0" max="0" value="0" class="slider" id="myRange" style="width: 1000px;">
</div>
<div id="container"></div>
<div style="display: block; height: 2000px; width: 100px;"></div>
<script>
function addIntervals(date, intervals) {
var result = new Date(date + intervals*intervalSeconds*1000);
return result;
}
$(document).ready(function () {
cameras.split(',').forEach(camera => $('#cameras').append(`<option value="${camera}">${camera}</option>`))
var args = {cmd: "login"};
$.post("http://10.10.10.105:81/json", JSON.stringify(args),
function (data, status) {
args.session = data.session;
args.response = $.md5(username + ":" + data.session + ":" + password);
$.post("http://10.10.10.105:81/json", JSON.stringify(args));
});
$('#event_period').datepicker({
inputs: $('.actual_range'),
todayHighlight: true,
defaultViewDate: new Date()
});
$('#event_period').change(function () {
var date1 = new Date($('#startDate').val()).setHours(atHour) + 5000
var date2 = new Date($('#endDate').val()).setHours(atHour) + 5000
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * intervalSeconds)) + 1;
let max = diffDays - 1;
$("#myRange")[0].max = max;
$("#myRange")[0].value = max;
$('#container').empty();
for (let i = 0; i < diffDays; i++) {
$('#container').append($('<img>', {
src:
`${biUrl}/time/${$("#cameras").val()}?jpeg=&session=${args.session}&isolate&pos=${addIntervals(date1, i).getTime()}&decode=1&stream=0&w=3840&h=2160`,
class: 'animated', style: i === max ? '' : 'display: none;'
}))
}
});
$("#myRange").on('input propertychange', function () {
$("#container img").hide();
$("#container img").eq($('#myRange').val()).show();
});
});
</script>
</body>
</html>