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

elektro255

elektro255

n3wb
Jul 30, 2020
15
9
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:
  • Like
Reactions: bp2008 and BORIStheBLADE
This is excellent. I remember Geovision used to have a feature like this that was extremely useful. Good work!
 
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.
 
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:
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.
 
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.
Click to expand...
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
 
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.
 
  • Like
Reactions: Sphinxicus and sebastiantombs
You must log in or register to reply here.
Top Bottom