ZoneMinder
/
zoneminder
mirror of https://github.com/ZoneMinder/zoneminder.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

progressBar conversion 

Convert progressBar to jquery and imporove granularity and performance
pull/2077/head
digital-gnome 2017-10-13 08:58:07 -04:00
parent 005190ab44
commit 3a4a7ada41
5 changed files with 36 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/skins/classic/css/classic/views/event.css
View File

@ -176,22 +176,14 @@ span.noneCue {
#progressBar {
position: relative;
border: 1px solid #666666;
height: 15px;
margin: 0 auto;
top: -1.5em;
height: 1.5em;
margin: 0 auto -1.5em auto;
}
#progressBar .progressBox {
position: absolute;
top: 0px;
left: 0px;
height: 15px;
background: #eeeeee;
border-left: 1px solid #999999;
}
#progressBar .complete {
background: #aaaaaa;
height: 1.5em;
background: rgba(170, 170, 170, .7);
}
#eventStills {

18
web/skins/classic/css/dark/views/event.css
View File

@ -159,22 +159,14 @@ span.noneCue {
#progressBar {
position: relative;
border: 1px solid #666666;
height: 15px;
margin: 0 auto;
top: -1.5em;
height: 1.5em;
margin: 0 auto -1.5em auto;
}
#progressBar .progressBox {
position: absolute;
top: 0px;
left: 0px;
height: 15px;
background: #eeeeee;
border-left: 1px solid #999999;
}
#progressBar .complete {
background: #aaaaaa;
height: 1.5em;
background: rgba(170, 170, 170, .7);
}
#eventStills {

18
web/skins/classic/css/flat/views/event.css
View File

@ -170,22 +170,14 @@ span.noneCue {
#progressBar {
position: relative;
border: 1px solid #666666;
height: 15px;
margin: 0 auto;
top: -1.5em;
height: 1.5em;
margin: 0 auto -1.5em auto;
}
#progressBar .progressBox {
position: absolute;
top: 0px;
left: 0px;
height: 15px;
background: #eeeeee;
border-left: 1px solid #999999;
}
#progressBar .complete {
background: #aaaaaa;
height: 1.5em;
background: rgba(170, 170, 170, .7);
}
#eventStills {

14
web/skins/classic/views/event.php
View File

@ -85,10 +85,6 @@ parseSort();
parseFilter( $_REQUEST['filter'] );
$filterQuery = $_REQUEST['filter']['query'];
$panelSections = 40;
$panelSectionWidth = (int)ceil(reScale($Event->Width(),$scale)/$panelSections);
$panelWidth = ($panelSections*$panelSectionWidth-1);
$connkey = generateConnKey();
$focusWindow = true;
@ -195,6 +191,10 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
}
} // end if stream method
?>
<div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
<div id="progressBar" style="width: <?php echo reScale($Event->Width(), $scale);?>px;">
<div class="progressBox" id="progressBox" title="" style="width: 0%;"></div>
</div><!--progressBar-->
<p id="dvrControls" class="dvrControls">
<input type="button" value="&lt;+" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" onclick="streamPrev( true );"/>
<input type="button" value="&lt;&lt;" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" disabled="disabled" onclick="streamFastRev( true );"/>
@ -212,12 +212,6 @@ if ( ZM_WEB_STREAM_METHOD == 'mpeg' && ZM_MPEG_LIVE_FORMAT ) {
<span id="progress"><?php echo translate('Progress') ?>: <span id="progressValue"></span>s</span>
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue"></span>x</span>
</div>
<div id="progressBar" class="invisible">
<?php for ( $i = 0; $i < $panelSections; $i++ ) { ?>
<div class="progressBox" id="progressBox<?php echo $i ?>" title=""></div>
<?php } ?>
</div><!--progressBar-->
<div id="alarmCueJpeg" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
</div><!--imageFeed-->
</div>
<?php } /*end if !DefaultVideo*/ ?>

60
web/skins/classic/views/js/event.js
View File

@ -216,7 +216,7 @@ function getCmdResponse( respObj, respText ) {
streamImg.src = streamImg.src.replace( /auth=\w+/i, 'auth='+streamStatus.auth );
} // end if haev a new auth hash
streamCmdTimer = streamQuery.delay( streamTimeout );
streamCmdTimer = streamQuery.delay( streamTimeout ); //Timeout is refresh rate for progressBox and time display
}
var streamReq = new Request.JSON( { url: thisUrl, method: 'get', timeout: AJAX_TIMEOUT, link: 'chain', onSuccess: getCmdResponse } );
@ -800,57 +800,30 @@ function videoEvent() {
createPopup( '?view=video&eid='+eventData.Id, 'zmVideo', 'video', eventData.Width, eventData.Height );
}
// Called on each event load, because each event can be a different length.
// Called on each event load because each event can be a different width
function drawProgressBar() {
// Make it invisible so we don't see the update happen
$('progressBar').addClass( 'invisible' );
var barWidth = 0;
var cells = $('progressBar').getElements( 'div' );
var cells_length = cells.length;
var cellWidth = parseInt( ((eventData.Width * $j('#scale').val()) / SCALE_BASE) / cells_length );
for ( var index = 0; index < cells_length; index += 1 ) {
var cell = $( cells[index] );
function test (cell, index) {
if ( index == 0 )
cell.setStyles( { 'left': barWidth, 'width': cellWidth, 'borderLeft': 0 } );
else
cell.setStyles( { 'left': barWidth, 'width': cellWidth } );
var offset = parseInt( (index*eventData.Length)/cells_length );
cell.setProperty( 'title', '+'+secsToTime(offset)+'s' );
cell.removeEvents( 'click' );
cell.addEvent( 'click', function() { streamSeek( offset ); } );
barWidth += cell.getCoordinates().width;
}
test (cell, index);
}
$('progressBar').setStyle( 'width', barWidth );
$('progressBar').removeClass( 'invisible' );
var barWidth = (eventData.Width * $j('#scale').val()) / SCALE_BASE;
$j('#progressBar').css( 'width', barWidth );
}
// Changes the colour of the cells making up the completed progress bar
// Shows current stream progress.
function updateProgressBar() {
if ( ! ( eventData && streamStatus ) ) {
return;
} // end if ! eventData && streamStatus
var cells = $('progressBar').getElements( 'div' );
var cells_length = cells.length;
var completeIndex = parseInt(((cells_length+1)*streamStatus.progress)/eventData.Length);
for ( var index = 0; index < cells_length; index += 1 ) {
var cell = $( cells[index] );
if ( index < completeIndex ) {
if ( !cell.hasClass( 'complete' ) ) {
cell.addClass( 'complete' );
}
} else {
if ( cell.hasClass( 'complete' ) ) {
cell.removeClass( 'complete' );
}
} // end if
} // end function
var curWidth = (streamStatus.progress / parseFloat(eventData.Length)) * 100;
$j("#progressBox").css('width', curWidth + '%');
} // end function updateProgressBar()
// Handles seeking when clicking on the progress bar.
function progressBarSeek (){
$j('#progressBar').click(function(e){
var x = e.pageX - $j(this).offset().left;
var seekTime = (x / $j('#progressBar').width()) * parseFloat(eventData.Length);
streamSeek (seekTime);
});
}
function handleClick( event ) {
var target = event.target;
var x = event.page.x - $(target).getLeft();
@ -982,6 +955,7 @@ function initPage() {
window.videoobj.load();
streamPlay(); */
} else {
progressBarSeek ();
streamCmdTimer = streamQuery.delay( 250 );
eventQuery.pass( eventData.Id ).delay( 500 );
initialAlarmCues(eventData.Id); //call ajax+renderAlarmCues for nph-zms.