From 377805dce094199b9248987e8c23b5830ada5ba2 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Sun, 5 Jan 2020 17:30:51 -0500 Subject: [PATCH 1/4] convert some tags to classes instead of ids. Add margin: 0 auto so that monitor images are centered --- web/skins/classic/css/base/views/timeline.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/web/skins/classic/css/base/views/timeline.css b/web/skins/classic/css/base/views/timeline.css index c2efed713..47e7af1ce 100644 --- a/web/skins/classic/css/base/views/timeline.css +++ b/web/skins/classic/css/base/views/timeline.css @@ -40,14 +40,11 @@ margin: 4px auto 6px; } -#topPanel #imagePanel -{ - width: 50%; - float: left; +#topPanel .imagePanel { text-align: right; } -#topPanel #image { +#topPanel .image { margin: 0 auto; text-align: right; margin-right: 2px; @@ -57,7 +54,7 @@ width: 100%; } -#topPanel #image img { +#topPanel .image img { width: auto; max-width: 100%; height: 100%; @@ -66,6 +63,7 @@ bottom: 0; left: 0; right: 0; + margin: 0 auto; } #topPanel #dataPanel { From 2854f8e0023fecaa5db583a61dedc56690a00b43 Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Sun, 5 Jan 2020 17:32:27 -0500 Subject: [PATCH 2/4] simplify some code, pass around zm_event json objects instead of event_id. Each monitor has it's own image so when loading event data put it into a div/img referenced by monitor Id --- web/skins/classic/views/js/timeline.js | 79 +++++++++----------------- 1 file changed, 26 insertions(+), 53 deletions(-) diff --git a/web/skins/classic/views/js/timeline.js b/web/skins/classic/views/js/timeline.js index 0b4715f75..1fe42c46b 100644 --- a/web/skins/classic/views/js/timeline.js +++ b/web/skins/classic/views/js/timeline.js @@ -36,12 +36,6 @@ function createEventHtml(zm_event, frame) { return eventHtml; } -function showEventDetail( eventHtml ) { - $('instruction').addClass( 'hidden' ); - $('eventData').empty(); - $('eventData').adopt( eventHtml ); - $('eventData').removeClass( 'hidden' ); -} function eventDataResponse( respObj, respText ) { var zm_event = respObj.event; @@ -79,18 +73,20 @@ function frameDataResponse( respObj, respText ) { zm_event['frames'][frame.FrameId] = frame; zm_event['frames'][frame.FrameId]['html'] = createEventHtml( zm_event, frame ); - showEventData(frame.EventId, frame.FrameId); + showEventData(zm_event, frame.FrameId); } -function showEventData(eventId, frameId) { - if ( events[eventId] ) { - var zm_event = events[eventId]; +function showEventData(zm_event, frameId) { + if ( zm_event ) { if ( zm_event['frames'] ) { if ( zm_event['frames'][frameId] ) { - showEventDetail( zm_event['frames'][frameId]['html'] ); + $('instruction').addClass('hidden'); + eventData = $('eventData'+zm_event.MonitorId); + eventData.empty(); + eventData.adopt(zm_event['frames'][frameId]['html']); + eventData.removeClass('hidden'); var imagePath = 'index.php?view=image&eid='+eventId+'&fid='+frameId; - var videoName = zm_event.DefaultVideo; - loadEventImage( imagePath, eventId, frameId, zm_event.Width, zm_event.Height, zm_event.Frames/zm_event.Length, videoName, zm_event.Length, zm_event.StartTime, monitors[zm_event.MonitorId]); + loadEventImage(imagePath, zm_event, frameId); return; } else { console.log('No frames for ' + frameId); @@ -99,7 +95,7 @@ function showEventData(eventId, frameId) { console.log('No frames'); } } else { - console.log('No event for ' + eventId); + console.log('No event'); } } @@ -133,50 +129,28 @@ function previewEvent(slot) { eventId = slot.getAttribute('data-event-id'); frameId = slot.getAttribute('data-frame-id'); if ( events[eventId] ) { - showEventData(eventId, frameId); + showEventData(events[eventId], frameId); } else { requestFrameData(eventId, frameId); } } -function loadEventImage( imagePath, eid, fid, width, height, fps, videoName, duration, startTime, Monitor ) { - var vid = $('preview'); - var imageSrc = $('imageSrc'); - if ( videoName && vid ) { - vid.show(); - imageSrc.hide(); - var newsource=imagePath.slice(0, imagePath.lastIndexOf('/'))+'/'+videoName; - //console.log(newsource); - //console.log(sources[0].src.slice(-newsource.length)); - if ( newsource != vid.currentSrc.slice(-newsource.length) || vid.readyState == 0 ) { - //console.log("loading new"); - //it is possible to set a long source list here will that be unworkable? - var sources = vid.getElementsByTagName('source'); - sources[0].src = newsource; - var tracks = vid.getElementsByTagName('track'); - if (tracks.length) { - tracks[0].parentNode.removeChild(tracks[0]); - } - vid.load(); - addVideoTimingTrack(vid, Monitor.LabelFormat, Monitor.Name, duration, startTime); - vid.currentTime = fid/fps; - } else { - if ( ! vid.seeking ) { - vid.currentTime=fid/fps; - } - } - } else { - if ( vid ) vid.hide(); - imageSrc.show(); - imageSrc.setProperty('src', imagePath); - imageSrc.setAttribute('data-event-id', eid); - imageSrc.setAttribute('data-frame-id', fid); - imageSrc.onclick=window['showEvent'].bind(imageSrc, imageSrc); - } +function loadEventImage( imagePath, zm_event, fid ) { + var imageSrc = $('imageSrc'+zm_event.MonitorId); - var eventData = $('eventData'); - eventData.removeEvent('click'); - eventData.addEvent('click', showEvent.pass()); + imageSrc.show(); + imageSrc.setProperty('src', imagePath); + imageSrc.setAttribute('data-event-id', zm_event.Id); + imageSrc.setAttribute('data-frame-id', fid); + imageSrc.onclick=window['showEvent'].bind(imageSrc, imageSrc); + + var eventData = $('eventData'.zm_event.MonitorId); + if ( eventData ) { + eventData.removeEvent('click'); + eventData.addEvent('click', showEvent.pass()); + } else { + console.log("No eventdata area found for monitor " + zm_event.MonitorId); + } } function tlZoomBounds( minTime, maxTime ) { @@ -204,4 +178,3 @@ window.addEventListener("DOMContentLoaded", function() { el.onmouseover = window[el.getAttribute('data-on-mouseover-this')].bind(el, el); }); }); - From b788c432d42290eb05f7c7b49fd2f48b7a808a9b Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Sun, 5 Jan 2020 17:33:36 -0500 Subject: [PATCH 3/4] Split the data by monitor and display a monitor image/info for each monitor. --- web/skins/classic/views/timeline.php | 40 +++++++++++++++++----------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/web/skins/classic/views/timeline.php b/web/skins/classic/views/timeline.php index 2fe419efd..e07fbc893 100644 --- a/web/skins/classic/views/timeline.php +++ b/web/skins/classic/views/timeline.php @@ -494,7 +494,7 @@ for ( $i = 0; $i < $chart['graph']['width']; $i++ ) { } # end foreach MonitorId } # end foreach x -ZM\Logger::Debug(print_r( $monEventSlots,true )); +#ZM\Logger::Debug(print_r( $monEventSlots,true )); //print_r( $monFrameSlots ); //print_r( $chart ); @@ -683,23 +683,32 @@ xhtmlHeaders(__FILE__, translate('Timeline'));
+
+

+

+

+

+
-
-
- <?php echo translate('ViewEvent') ?> -
-
-
-
-
-

-

-

-

-
-
+ +
+
+
+ <?php echo translate('ViewEvent') ?>
+
+
+
+
+
+
+
+ -
From 514a64ad4580090ee253bc689d5e36ac93b770ff Mon Sep 17 00:00:00 2001 From: Isaac Connor Date: Fri, 11 Feb 2022 12:43:10 -0500 Subject: [PATCH 4/4] small code cleanup, add Warnings when using slow blend functions. --- src/zm_image.cpp | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/zm_image.cpp b/src/zm_image.cpp index 7260791a5..ea785195e 100644 --- a/src/zm_image.cpp +++ b/src/zm_image.cpp @@ -95,6 +95,7 @@ void Image::update_function_pointers() { delta8_abgr = &std_delta8_abgr; delta8_gray8 = &std_delta8_gray8; blend = &std_blend; + Warning("Using slow std functions"); } else { // Use either sse or neon, or loop unrolled version delta8_rgb = fptr_delta8_rgb; @@ -1737,7 +1738,6 @@ void Image::Overlay( const Image &image, const unsigned int lo_x, const unsigned } // end void Image::Overlay( const Image &image, unsigned int x, unsigned int y ) void Image::Blend( const Image &image, int transparency ) { - uint8_t* new_buffer; if ( !( width == image.width && height == image.height @@ -1751,7 +1751,7 @@ void Image::Blend( const Image &image, int transparency ) { if ( transparency <= 0 ) return; - new_buffer = AllocBuffer(size); + uint8_t* new_buffer = AllocBuffer(size); #ifdef ZM_IMAGE_PROFILING TimePoint start = std::chrono::steady_clock::now(); @@ -3397,6 +3397,7 @@ __attribute__((noinline)) void neon64_armv8_fastblend(const uint8_t* col1, const } __attribute__((noinline)) void std_blend(const uint8_t* col1, const uint8_t* col2, uint8_t* result, unsigned long count, double blendpercent) { + Warning("Using slow std_blend"); double divide = blendpercent / 100.0; double opacity = 1.0 - divide; const uint8_t* const max_ptr = result + count;