[UI3][Timeline] Proof of concept implementation of the Timeline

elektro255

n3wb
Joined
Jul 30, 2020
Messages
15
Reaction score
9
Location
Canada
Today I've quickly scripted a proof of concept Timeline in UI3 and decided to share it with everyone.

This is just PoC so expect many bugs and limitations, due to lack of time I'm not planning to support it, I might eventually fix some bugs and move the code to ui3-local-overrides.js but for now, it is shipped as-is, feel free to adopt this project.
It is available here GitHub - s-pw/ui3: A powerful, modern HTML5 web interface for Blue Iris. , install using manual steps as you would do with regular UI3.

It was created to fix the following problems in UI3:
  • when the clip is very long e.g. 24h seeking is very inaccurate where few pixels can seek by minutes making it useless for viewing short events
  • when clips are shorter it is impossible to view timelapse using seek for long events e.g. how was snow melting during the day or how the garden changed over months/seasons
  • searching confirmed events is hard, you can't easily tell which events occurred over a short period of time
Demo:
demo.gif


Usage:
usage.png
There are 2 main areas:
  1. Seek Area - click and drag to preview across all clips and play the clip when you stop dragging
  2. Zoom Area - use mouse wheel or touch gesture to zoom in/out and drag to move the timeline

Seek Area also shows the confirmed events as dots (hoover over the dot will show Deepstack memo and image in a tooltip)
Confirmed alerts are colored using Deepstack memo:
  • green - person
  • blue - car/truck
  • gray - other

Between areas there are colored bars that show clips (hoover over the line to show preview and name in a tooltip):
  • green - New
  • yellow - Stored
Requirements:
  • it was tested with continuously recorded clips with Deepstack (BI v5.5.1.5 - 5.5.4.3), it also requires clip categories named New and Stored, it might not work with other configurations
  • Show Cameras in Group Dropdowns has to be enabled in the UI3 setting and single-camera selected
  • supports BVR clips only

Known problems:
  • random bugs when switching between tabs
  • timeline sometimes not loading
  • no error handling
  • H.264 player will reset timeline on playback start (use JPEG stream instead)
  • the tooltip on events doesn't work well on touch devices (not implemented as it is slightly harder than just using mouseover event)
  • works correctly with single camera only
  • seek indicator isn't updated as video plays (can be fixed with chart.marker.updateMarker(date);)
 
Last edited:

AKE

n3wb
Joined
Feb 21, 2017
Messages
6
Reaction score
3
This is excellent. I remember Geovision used to have a feature like this that was extremely useful. Good work!
 

elektro255

n3wb
Joined
Jul 30, 2020
Messages
15
Reaction score
9
Location
Canada
Removing line
Code:
global.addEventListener('resize', chart._initialize, true);
fixes the "H.264 player will reset timeline on playback start (use JPEG stream instead)" problem but breaks window resizing.
 

elektro255

n3wb
Joined
Jul 30, 2020
Messages
15
Reaction score
9
Location
Canada
I've created a new release Release 179-timeline · s-pw/ui3

Changes:
  • updated to UI3 179
  • clicking on a drop opens the clip
  • partial camera group support - show last viewed camera when seeking
  • seek indicator is updated during playback
  • truck events marked red
  • fixed some bugs when switching between tabs
  • fixed window resizing
  • fixed timeline zoom reset on video playback start
Known problems:
  • on a first load the drop has to be clicked twice to start clip playback
  • changing browser tabs hides timeline - select camera or switch UI3 tabs to load it back
 
Last edited:

elektro255

n3wb
Joined
Jul 30, 2020
Messages
15
Reaction score
9
Location
Canada
New release Release 193-timeline · s-pw/ui3
Changes:
  • update to 193
  • fix loading when there are no confirmed alerts
  • fix seek time on currently played clip
  • fix visibility problems (disappears after resizing when not visible)
  • fix alert click playback
 

Corvus85

Getting the hang of it
Joined
Aug 18, 2021
Messages
495
Reaction score
79
Location
Australia
This is exactly what I need. Amazing work.
How do I install this on my BI machine? I don't remember 'installing' regular UI3, I just enabled it via the webserver tab in BI settings.
 

elektro255

n3wb
Joined
Jul 30, 2020
Messages
15
Reaction score
9
Location
Canada
Instruction is in the GitHub description:
Manual installation
If you wish to manually install UI3 (maybe to get a bugfix without waiting for it to arrive in a Blue Iris update), you can get it from the releases tab: Releases · s-pw/ui3
To install, just extract everything to Blue Iris's www directory and overwrite all files. The default path to this folder is C:\Program Files\Blue Iris 5\www.
Since it is an experimental feature that might break some other features, make a copy of www directory before copying files.


also, check requirements:
  • it was tested with continuously recorded clips with Deepstack (BI v5.5.1.5 - 5.5.4.3), it also requires clip categories named New and Stored, it might not work with other configurations
  • Show Cameras in Group Dropdowns has to be enabled in the UI3 setting and single-camera selected
  • supports BVR clips only
 

bp2008

Staff member
Joined
Mar 10, 2014
Messages
12,666
Reaction score
14,006
Location
USA
You can put this copy of UI3 into a subfolder and everything will be fine, it won't get overwritten when Blue Iris is updated, and it won't break anything.
 

TheWaterbug

Getting comfortable
Joined
Oct 20, 2017
Messages
707
Reaction score
1,526
Location
Palos Verdes
Top