strix

A simple web UI for motion
git clone https://www.brianlane.com/git/strix
Log | Files | Refs | LICENSE

commit 686de2b096bcad00d61a29355ecdebd7f6d2beaf
parent b73611102b1a704892a0256e89d1b68359ef1b40
Author: Brian C. Lane <bcl@brianlane.com>
Date:   Sun, 27 Feb 2022 17:27:53 -0800

Add daily headers and links to jump to them

Diffstat:
Msrc/strix/ui/events.html | 61+++++++++++++++++++++++++++++++++++++++++++++++++++----------
Msrc/strix/ui/index.html | 8++------
Msrc/strix/ui/style.css | 49++++++++++++++++++++++++++++++++++++++++++++++---
3 files changed, 99 insertions(+), 19 deletions(-)

diff --git a/src/strix/ui/events.html b/src/strix/ui/events.html @@ -7,10 +7,16 @@ <link href="/style.css" rel="stylesheet" type="text/css" /> </head> <body> + <div id="topview"> <div id="viewer"> <video controls autoplay=false playsinline=true></video> </div> - <div id="calendar"></div> + <div id="days"> + <ul id="daylinks"> + <li><a id="scrollback" onclick="">Jump Back</a></li> + </ul> + </div> + </div> <div id="events"></div> @@ -19,12 +25,29 @@ var camera_events; function nice_time_string(time_str) { var d = new Date(time_str); + return nice_short_time_string(time_str) + " " + d.toLocaleTimeString(); +} + +function nice_short_time_string(time_str) { + var d = new Date(time_str); // DoW Mo Day Year var fields = d.toDateString().split(" "); - return fields.slice(0,3).join(" ") + " " + d.toLocaleTimeString(); + return fields.slice(0,3).join(" "); +} + +function add_day(starttime) { + let newLi = document.createElement("li"); + let newDay = document.createElement("a"); + newDay.innerHTML = nice_short_time_string(starttime); + newDay.href = `#${starttime}`; + newLi.appendChild(newDay); + + document.querySelector("#daylinks").appendChild(newLi); } function get_all_events(camera_name) { + var last_start = 0; + // The API returns the events with the oldest one first in the .events list fetch("/api/events/"+camera_name+"?limit=0") .then(resp => resp.json()) @@ -32,29 +55,44 @@ function get_all_events(camera_name) { // Save for onclick actions camera_events = data.events[camera_name]; var events = document.querySelector("#events"); - // Try to get the size of the thumbnail images + + // off-screen image used for onload to get width and height let oneImg = document.createElement("img"); oneImg.onload = function() { width = this.width; height = this.height; - html = data.events[camera_name].map(event => { + html = data.events[camera_name].reverse().map(event => { let alt = nice_time_string(event.start); - return `<img class="thumbnail" - onclick="javascript:load_viewer('${event.video}');" + let html = `<img class="thumbnail" + onclick="javascript:load_viewer('${event.video}', scrollY);" title="${alt}" loading="lazy" width=${width} height=${height} src="${event.thumbnail}" />` - }).reverse().join("\n"); - events.innerHTML = html; + // Show a day banner every time it passes midnight + let od = new Date(last_start).getDay(); + let nd = new Date(event.start).getDay(); + if (last_start == 0) { + banner = `<div class="newday" id="${event.start}"><h1 align="center">${alt}</h1>`; + html = banner + html; + } + else if (od != nd) { + banner = `</div><div class="newday" id="${event.start}"><h1 align="center">${alt}</h1>`; + html = banner + html; + add_day(event.start); + } + last_start = event.start; + return html; + }).join(""); + events.innerHTML = html + "</div>"; } // Load the 1st thumbnail, triggering onload for it oneImg.src = data.events[camera_name][0].thumbnail; }); } -function load_viewer(event) { +function load_viewer(event, scrollY) { scroll(0,0); // Set the viewere to the event video @@ -62,6 +100,9 @@ function load_viewer(event) { viewer.src = event; viewer.autoplay = true; + // Setup the scrollback link + var sb = document.querySelector("#scrollback"); + sb.onclick = function() {scroll(0, scrollY);}; } function setup_page() { @@ -77,7 +118,7 @@ function setup_page() { // Load the viewer with the event, if one was selected if (event != null) { - load_viewer(event); + load_viewer(event, 0); } } diff --git a/src/strix/ui/index.html b/src/strix/ui/index.html @@ -95,16 +95,12 @@ function setup_page() { <tr class="controls"> <td class="prev">&lt</td> <td class="thumbnails"><div> - <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> - <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> - <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> - <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> - <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> + <a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a><a class="video" target="video" href="/"><img class="thumbnail" src="/" /></a> </div></td> <td class="next">&gt</td></tr> </table> </div>`; - }).join("\n"); + }).join(""); live_feeds.innerHTML = html; set_feed_href(); diff --git a/src/strix/ui/style.css b/src/strix/ui/style.css @@ -14,12 +14,54 @@ body { } } +#topview { + width: 100%; + height: 100% +} + #viewer { + width: 80%; + display: inline-block; } video { width: 100%; - height: 100%; +} + + +#days { + display: inline-block; + overflow: auto; +} + +#days ul { + list-style: none; + line-height: 1.3em; + background-color: #f1f1f1; + margin: 0; + padding: 0; +} + +#days li a { + display: block; + color: #000; + text-decoration: none; + padding: 8px 16px; +} + +#days li a:hover { + background-color: #555; + color: white; +} + +.newday { + display: inline; + whitespace: nowrap; +} + +.newday h1 { + border: 1px solid black; + margin: 2px; } #events { @@ -45,8 +87,9 @@ td.prev:hover,td.next:hover { img.thumbnail { width: 20%; height: auto; - display: block; - float: left; + display: inline; + vertical-align: text-bottom; +# float: left; } img.thumbnail:hover {