Merge pull request #54 from digital-gnome/storageareas-uifixes
Storageareas uifixes
This commit is contained in:
Isaac Connor
GitHub
commit
e64497c16a
|
|
@ -12,15 +12,17 @@
|
|||
|
||||
.alarmCue {
|
||||
background-color: #222222;
|
||||
height: 1.5em;
|
||||
height: 1.25em;
|
||||
text-align: left;
|
||||
margin: 0 auto 0 auto;
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
.alarmCue span {
|
||||
background-color:red;
|
||||
height: 1.5em;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
span.noneCue {
|
||||
|
|
@ -43,11 +45,6 @@ span.noneCue {
|
|||
padding: 2px;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
postion: relative;
|
||||
}
|
||||
|
||||
#menuBar1 {
|
||||
width: 100%;
|
||||
padding: 3px 0;
|
||||
|
|
@ -117,6 +114,11 @@ span.noneCue {
|
|||
float: right;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#imageFeed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -184,14 +186,16 @@ span.noneCue {
|
|||
|
||||
#progressBar {
|
||||
position: relative;
|
||||
top: -1.5em;
|
||||
height: 1.5em;
|
||||
margin: 0 auto -1.5em auto;
|
||||
top: -1.25em;
|
||||
height: 1.25em;
|
||||
margin: 0 auto -1.25em auto;
|
||||
}
|
||||
|
||||
#progressBar .progressBox {
|
||||
height: 1.5em;
|
||||
transition: width .1s;
|
||||
height: 100%;
|
||||
background: rgba(170, 170, 170, .7);
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
#eventStills {
|
||||
|
|
@ -223,6 +227,7 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#eventImagePanel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -267,7 +272,7 @@ span.noneCue {
|
|||
|
||||
#eventImageNav {
|
||||
position: relative;
|
||||
margin: 4px 0 0 0;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
#eventImageNav input {
|
||||
|
|
@ -276,20 +281,20 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#thumbsSliderPanel {
|
||||
width: 400px;
|
||||
margin: 4px auto 0;
|
||||
background: #888888;
|
||||
padding: 1px;
|
||||
width: 80%;
|
||||
margin: 0px auto 4px auto;
|
||||
}
|
||||
|
||||
#thumbsSlider {
|
||||
width: 400px;
|
||||
height: 10px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
top: -1.25em;
|
||||
margin: 0 0 -1.25em 0;
|
||||
}
|
||||
|
||||
#thumbsKnob {
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
background-color: #444444;
|
||||
width: 1em;
|
||||
height: 100%;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,16 @@
|
|||
#scaleControl {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#controls {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#controls a {
|
||||
width: 40px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#firstLink {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
}
|
||||
|
||||
#prevLink {
|
||||
position: absolute;
|
||||
left: 37%;
|
||||
}
|
||||
|
||||
#nextLink {
|
||||
position: absolute;
|
||||
left: 63%;
|
||||
}
|
||||
|
||||
#lastLink {
|
||||
position: absolute;
|
||||
left: 87%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
|
||||
#monitors .alert {
|
||||
color: #ffa500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#monitors .imageFeed {
|
||||
|
|
|
|||
|
|
@ -460,9 +460,9 @@ th.table-th-sort-rev span.table-th-sort-span {
|
|||
button,
|
||||
input[type=button],
|
||||
input[type=submit] {
|
||||
background-color: #3498db;
|
||||
color: #fff;
|
||||
border-color: #3498db;
|
||||
background-color: #444444;
|
||||
color: #eeeeee;
|
||||
border-color: #444444;
|
||||
text-transform: uppercase;
|
||||
font-weight: 200;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -472,7 +472,7 @@ input[type=submit] {
|
|||
button:hover,
|
||||
input[type=button]:hover,
|
||||
input[type=submit]:hover {
|
||||
background-color: #34a2ee;
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -482,9 +482,9 @@ button:disabled,
|
|||
input[disabled],
|
||||
input[type=button]:disabled,
|
||||
input[type=submit]:disabled {
|
||||
color: #ffffff;
|
||||
background-color: #aaaaaa;
|
||||
border-color: #bbbbbb;
|
||||
color: #888888;
|
||||
background-color: #666666;
|
||||
border-color: #666666;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -534,8 +534,10 @@ input[type=submit]:disabled {
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.table-striped > tbody > tr:nth-of-type(2n+1) {
|
||||
background: none;
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.table-hover>tbody>tr:hover {
|
||||
background-color: #444444;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,25 +12,23 @@
|
|||
|
||||
.alarmCue {
|
||||
background-color: #222222;
|
||||
height: 1.5em;
|
||||
height: 1.25em;
|
||||
text-align: left;
|
||||
margin: 0 auto 0 auto;
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
.alarmCue span {
|
||||
background-color:red;
|
||||
height: 1.5em;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
span.noneCue {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#dataBar {
|
||||
width: 100%;
|
||||
margin: 2px auto;
|
||||
|
|
@ -99,6 +97,10 @@ span.noneCue {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#imageFeed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -166,14 +168,16 @@ span.noneCue {
|
|||
|
||||
#progressBar {
|
||||
position: relative;
|
||||
top: -1.5em;
|
||||
height: 1.5em;
|
||||
margin: 0 auto -1.5em auto;
|
||||
top: -1.25em;
|
||||
height: 1.25em;
|
||||
margin: 0 auto -1.25em auto;
|
||||
}
|
||||
|
||||
#progressBar .progressBox {
|
||||
height: 1.5em;
|
||||
transition: width .1s;
|
||||
height: 100%;
|
||||
background: rgba(170, 170, 170, .7);
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
#eventStills {
|
||||
|
|
@ -206,6 +210,7 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#eventImagePanel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -250,7 +255,7 @@ span.noneCue {
|
|||
|
||||
#eventImageNav {
|
||||
position: relative;
|
||||
margin: 4px 0 0 0;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
#eventImageNav input {
|
||||
|
|
@ -259,25 +264,20 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#thumbsSliderPanel {
|
||||
width: 400px;
|
||||
margin: 4px auto 0;
|
||||
background: #888888;
|
||||
padding: 1px;
|
||||
width: 80%;
|
||||
margin: 0px auto 4px auto;
|
||||
}
|
||||
|
||||
#thumbsSlider {
|
||||
width: 400px;
|
||||
height: 10px;
|
||||
background: #dddddd;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
top: -1.25em;
|
||||
margin: 0 0 -1.25em 0;
|
||||
}
|
||||
|
||||
#thumbsKnob {
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
background-color: #444444;
|
||||
width: 1em;
|
||||
height: 100%;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,16 @@
|
|||
#scaleControl {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#controls {
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#controls a {
|
||||
width: 40px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#firstLink {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
}
|
||||
|
||||
#prevLink {
|
||||
position: absolute;
|
||||
left: 37%;
|
||||
}
|
||||
|
||||
#nextLink {
|
||||
position: absolute;
|
||||
left: 63%;
|
||||
}
|
||||
|
||||
#lastLink {
|
||||
position: absolute;
|
||||
left: 87%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
|
||||
#monitors .alert {
|
||||
color: #ffa500;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#monitors .imageFeed {
|
||||
|
|
|
|||
|
|
@ -12,15 +12,17 @@
|
|||
|
||||
.alarmCue {
|
||||
background-color: #222222;
|
||||
height: 1.5em;
|
||||
height: 1.25em;
|
||||
text-align: left;
|
||||
margin: 0 auto 0 auto;
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
.alarmCue span {
|
||||
background-color:red;
|
||||
height: 1.5em;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
span.noneCue {
|
||||
|
|
@ -50,7 +52,6 @@ span.noneCue {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
#menuBar1 #nameControl {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -85,15 +86,6 @@ span.noneCue {
|
|||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
#menuBar1:after,
|
||||
#menuBar2:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#menuBar1:after,
|
||||
#menuBar2:after {
|
||||
|
|
@ -104,6 +96,12 @@ span.noneCue {
|
|||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#imageFeed {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -177,14 +175,16 @@ span.noneCue {
|
|||
|
||||
#progressBar {
|
||||
position: relative;
|
||||
top: -1.5em;
|
||||
height: 1.5em;
|
||||
margin: 0 auto -1.5em auto;
|
||||
top: -1.25em;
|
||||
height: 1.25em;
|
||||
margin: 0 auto -1.25em auto;
|
||||
}
|
||||
|
||||
#progressBar .progressBox {
|
||||
height: 1.5em;
|
||||
transition: width .1s;
|
||||
height: 100%;
|
||||
background: rgba(170, 170, 170, .7);
|
||||
border-radius: 0 0 .3em .3em;
|
||||
}
|
||||
|
||||
#eventStills {
|
||||
|
|
@ -217,6 +217,7 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#eventImagePanel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -261,7 +262,7 @@ span.noneCue {
|
|||
|
||||
#eventImageNav {
|
||||
position: relative;
|
||||
margin: 4px 0 0 0;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
#eventImageNav input {
|
||||
|
|
@ -270,82 +271,20 @@ span.noneCue {
|
|||
}
|
||||
|
||||
#thumbsSliderPanel {
|
||||
width: 400px;
|
||||
margin: 4px auto 0;
|
||||
background: #888888;
|
||||
padding: 1px;
|
||||
width: 80%;
|
||||
margin: 0px auto 4px auto;
|
||||
}
|
||||
|
||||
#thumbsSlider {
|
||||
width: 400px;
|
||||
height: 10px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
height: 1.25em;
|
||||
position: relative;
|
||||
top: -1.25em;
|
||||
margin: 0 0 -1.25em 0;
|
||||
}
|
||||
|
||||
#thumbsKnob {
|
||||
width: 8px;
|
||||
height: 10px;
|
||||
background-color: #444444;
|
||||
}
|
||||
#eventVideo {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 5px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity .3s;
|
||||
-moz-transition: opacity .3s;
|
||||
-o-transition: opacity .3s;
|
||||
-ms-transition: opacity .3s;
|
||||
transition: opacity .3s;
|
||||
background-image: linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
|
||||
background-image: -o-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
|
||||
background-image: -moz-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(3,113,168) 13%, rgb(0,136,204) 100%);
|
||||
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0.13, rgb(3,113,168)),
|
||||
color-stop(1, rgb(0,136,204))
|
||||
);
|
||||
}
|
||||
|
||||
#eventVideo:hover #video-controls {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
button {
|
||||
background: rgba(0,0,0,.5);
|
||||
border: 0;
|
||||
color: #EEE;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#seekbar {
|
||||
width: 360px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#volume-bar {
|
||||
width: 60px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 1em;
|
||||
height: 100%;
|
||||
background-color: #999999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,29 +6,11 @@
|
|||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#controls a {
|
||||
width: 40px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#firstLink {
|
||||
position: absolute;
|
||||
left: 13%;
|
||||
}
|
||||
|
||||
#prevLink {
|
||||
position: absolute;
|
||||
left: 37%;
|
||||
}
|
||||
|
||||
#nextLink {
|
||||
position: absolute;
|
||||
left: 63%;
|
||||
}
|
||||
|
||||
#lastLink {
|
||||
position: absolute;
|
||||
left: 87%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ $scales = array(
|
|||
'12.5' => '1/8x',
|
||||
);
|
||||
|
||||
if (isset($_REQUEST['view'])) unset($scales[$_REQUEST['view'] == 'event' ? '' : 'auto']); //Remove the option we aren't using on montage or event
|
||||
if (isset($_REQUEST['view'])) unset($scales[$_REQUEST['view'] == 'montage' ? 'auto' : '']); //Only use fixed width/Height on montage
|
||||
|
||||
$bandwidth_options = array(
|
||||
'high' => translate('High'),
|
||||
|
|
|
|||
|
|
@ -104,6 +104,10 @@ function parseFilterToTree( $filter ) {
|
|||
$sqlValue = "E.StartTime";
|
||||
$dtAttr = true;
|
||||
break;
|
||||
case 'StartDateTime':
|
||||
$sqlValue = "E.StartTime";
|
||||
$dtAttr = true;
|
||||
break;
|
||||
case 'Date':
|
||||
$sqlValue = "to_days( E.StartTime )";
|
||||
$dtAttr = true;
|
||||
|
|
@ -196,6 +200,9 @@ function parseFilterToTree( $filter ) {
|
|||
case 'DateTime':
|
||||
$value = "'".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."'";
|
||||
break;
|
||||
case 'StartDateTime':
|
||||
$value = "'".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."'";
|
||||
break;
|
||||
case 'Date':
|
||||
$value = "to_days( '".strftime( STRF_FMT_DATETIME_DB, strtotime( $value ) )."' )";
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -333,3 +333,36 @@ function changeFilter( e ) {
|
|||
Cookie.write( e.name, e.value, { duration: 10*365 } );
|
||||
window.location = window.location;
|
||||
}
|
||||
|
||||
var resizeTimer;
|
||||
|
||||
function endOfResize(e) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(changeScale, 250);
|
||||
}
|
||||
|
||||
function scaleToFit (baseWidth, baseHeight, scaleEl, bottomEl) {
|
||||
$j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected
|
||||
let ratio = baseWidth / baseHeight;
|
||||
let container = $j('#content');
|
||||
let viewPort = $j(window);
|
||||
// jquery does not provide a bottom offet, and offset dows not include margins. outerHeight true minus false gives total vertical margins.
|
||||
let bottomLoc = bottomEl.offset().top + (bottomEl.outerHeight(true) - bottomEl.outerHeight()) + bottomEl.outerHeight(true);
|
||||
let newHeight = viewPort.height() - (bottomLoc - scaleEl.outerHeight(true))
|
||||
let newWidth = ratio * newHeight;
|
||||
if (newWidth > container.innerWidth()) {
|
||||
newWidth = container.innerWidth();
|
||||
newHeight = newWidth / ratio;
|
||||
}
|
||||
let autoScale = Math.round(newWidth / baseWidth * SCALE_BASE);
|
||||
let scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get();
|
||||
scales.shift();
|
||||
let closest;
|
||||
$j(scales).each(function () { //Set zms scale to nearest regular scale. Zoom does not like arbitrary scale values.
|
||||
if (closest == null || Math.abs(this - autoScale) < Math.abs(closest - autoScale)) {
|
||||
closest = this.valueOf();
|
||||
}
|
||||
});
|
||||
autoScale = closest;
|
||||
return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.vjs-tech {
|
||||
pointer-events: none;
|
||||
transition: transform .25s;
|
||||
}
|
||||
|
||||
.vjs-captions-button {
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@ Warning("Streamsrc: $streamSrc");
|
|||
}
|
||||
} // end if stream method
|
||||
?>
|
||||
<div id="alarmCue" class="alarmCue" style="width: <?php echo reScale($Event->Width(), $scale);?>px;"></div>
|
||||
<div id="alarmCue" class="alarmCue"></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-->
|
||||
|
|
@ -220,6 +220,13 @@ Warning("Streamsrc: $streamSrc");
|
|||
</div>
|
||||
</div>
|
||||
<div id="eventImageNav">
|
||||
<div id="thumbsSliderPanel">
|
||||
<div id="alarmCue" class="alarmCue"></div>
|
||||
<div id="thumbsSlider">
|
||||
<div id="thumbsKnob">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="eventImageButtons">
|
||||
<div id="prevButtonsPanel">
|
||||
<input id="prevEventBtn" type="button" value="<E" onclick="prevEvent()" disabled="disabled"/>
|
||||
|
|
@ -230,12 +237,6 @@ Warning("Streamsrc: $streamSrc");
|
|||
<input id="nextEventBtn" type="button" value="E>" onclick="nextEvent()" disabled="disabled"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="thumbsSliderPanel">
|
||||
<div id="thumbsSlider">
|
||||
<div id="thumbsKnob">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ $lastFid = $maxFid;
|
|||
$alarmFrame = $Frame->Type()=='Alarm';
|
||||
|
||||
if ( isset( $_REQUEST['scale'] ) ) {
|
||||
$scale = validInt($_REQUEST['scale']);
|
||||
$scale = $_REQUEST['scale'];
|
||||
} else if ( isset( $_COOKIE['zmWatchScale'.$Monitor->Id()] ) ) {
|
||||
$scale = $_COOKIE['zmWatchScale'.$Monitor->Id()];
|
||||
} else if ( isset( $_COOKIE['zmWatchScale'] ) ) {
|
||||
|
|
|
|||
|
|
@ -50,13 +50,13 @@ function initialAlarmCues (eventId) {
|
|||
|
||||
function setAlarmCues (data) {
|
||||
cueFrames = data.frames;
|
||||
alarmSpans = renderAlarmCues();
|
||||
alarmSpans = renderAlarmCues(vid ? $j("#videoobj") : $j("#evtStream"));//use videojs width or zms width
|
||||
$j(".alarmCue").html(alarmSpans);
|
||||
}
|
||||
|
||||
function renderAlarmCues () {
|
||||
function renderAlarmCues (containerEl) {
|
||||
if (cueFrames) {
|
||||
var cueRatio = (vid ? $j("#videoobj").width() : $j("#evtStream").width()) / (cueFrames[cueFrames.length - 1].Delta * 100);//use videojs width or zms width
|
||||
var cueRatio = containerEl.width() / (cueFrames[cueFrames.length - 1].Delta * 100);
|
||||
var minAlarm = Math.ceil(1/cueRatio);
|
||||
var spanTimeStart = 0;
|
||||
var spanTimeEnd = 0;
|
||||
|
|
@ -134,45 +134,21 @@ function setButtonState( element, butClass ) {
|
|||
}
|
||||
}
|
||||
|
||||
var resizeTimer;
|
||||
|
||||
function endOfResize(e) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(changeScale, 250);
|
||||
}
|
||||
|
||||
function scaleToFit () {
|
||||
$j(window).on('resize', endOfResize) //set delayed scaling when Scale to Fit is selected
|
||||
let ratio = eventData.Width/eventData.Height;
|
||||
let container = $j('#content');
|
||||
let feed = $j(vid ? '#videoobj' : '#evtStream');
|
||||
let viewPort = $j(window);
|
||||
let newHeight = viewPort.height() - (container.outerHeight(true) - feed.outerHeight(true));
|
||||
let newWidth = ratio * newHeight;
|
||||
if (newWidth > container.innerWidth()) {
|
||||
newWidth = container.innerWidth();
|
||||
newHeight = newWidth / ratio;
|
||||
}
|
||||
let autoScale = Math.round(newWidth / eventData.Width * SCALE_BASE);
|
||||
let scales = $j('#scale option').map(function() {return parseInt($j(this).val());}).get();
|
||||
scales.shift();
|
||||
let closest = null;
|
||||
$j(scales).each(function () { //Set zms scale to nearest regular scale. Zoom does not like arbitrary scale values.
|
||||
if (closest == null || Math.abs(this - autoScale) < Math.abs(closest - autoScale)) {
|
||||
closest = this.valueOf();
|
||||
}
|
||||
});
|
||||
autoScale = closest;
|
||||
return {width: Math.floor(newWidth), height: Math.floor(newHeight), autoScale: autoScale};
|
||||
}
|
||||
|
||||
function changeScale() {
|
||||
let scale = $j('#scale').val();
|
||||
let newWidth = null;
|
||||
let newHeight = null;
|
||||
let autoScale = null;
|
||||
let newWidth;
|
||||
let newHeight;
|
||||
let autoScale;
|
||||
let eventViewer;
|
||||
let alarmCue = $j('div.alarmCue');
|
||||
let bottomEl = streamMode == 'stills' ? $j('#eventImageNav') : $j('#replayStatus');
|
||||
if (streamMode == 'stills') {
|
||||
eventViewer = $j('#eventThumbs');
|
||||
} else {
|
||||
eventViewer = $j(vid ? '#videoobj' : '#evtStream');
|
||||
}
|
||||
if (scale == "auto") {
|
||||
let newSize = scaleToFit();
|
||||
let newSize = scaleToFit(eventData.Width, eventData.Height, eventViewer, bottomEl);
|
||||
newWidth = newSize.width;
|
||||
newHeight = newSize.height;
|
||||
autoScale = newSize.autoScale;
|
||||
|
|
@ -181,16 +157,18 @@ function changeScale() {
|
|||
newWidth = eventData.Width * scale / SCALE_BASE;
|
||||
newHeight = eventData.Height * scale / SCALE_BASE;
|
||||
}
|
||||
let alarmCue = $j('div.alarmCue');
|
||||
let eventViewer = $j(vid ? '#videoobj' : '#evtStream')
|
||||
eventViewer.width(newWidth);
|
||||
if (!(streamMode == 'stills')) eventViewer.width(newWidth); //stills handles its own width
|
||||
eventViewer.height(newHeight);
|
||||
if ( !vid ) { // zms needs extra sizing
|
||||
streamScale(scale == "auto" ? autoScale : scale);
|
||||
alarmCue.width(newWidth);
|
||||
drawProgressBar();
|
||||
}
|
||||
alarmCue.html(renderAlarmCues());//just re-render alarmCues. skip ajax call
|
||||
if (streamMode == 'stills') {
|
||||
slider.autosize();
|
||||
alarmCue.html(renderAlarmCues($j('#thumbsSliderPanel')));
|
||||
} else {
|
||||
alarmCue.html(renderAlarmCues(eventViewer));//just re-render alarmCues. skip ajax call
|
||||
}
|
||||
if (scale == "auto") {
|
||||
Cookie.write('zmEventScaleAuto', 'auto', {duration: 10*365});
|
||||
}else{
|
||||
|
|
@ -505,6 +483,7 @@ function streamQuery() {
|
|||
|
||||
var slider = null;
|
||||
var scroll = null;
|
||||
var currEventId = null;
|
||||
var CurEventDefVideoPath = null;
|
||||
|
||||
function getEventResponse( respObj, respText ) {
|
||||
|
|
@ -698,13 +677,11 @@ function resetEventStills() {
|
|||
fid = 1;
|
||||
else if ( fid > eventData.Frames )
|
||||
fid = eventData.Frames;
|
||||
checkFrames( eventData.Id, fid );
|
||||
checkFrames( eventData.Id, fid, ($j('#eventImagePanel').css('display')=='none'?'':'true'));
|
||||
scroll.toElement( 'eventThumb'+fid );
|
||||
}
|
||||
} ).set( 0 );
|
||||
}
|
||||
if ( $('eventThumbs').getStyle( 'height' ).match( /^\d+/ ) < (parseInt(eventData.Height)+80) )
|
||||
$('eventThumbs').setStyle( 'height', ($j(vid ? '#videoobj' : '#evtStream').height())+'px' );
|
||||
}
|
||||
|
||||
function getFrameResponse( respObj, respText ) {
|
||||
|
|
@ -893,6 +870,7 @@ function showStream() {
|
|||
$('streamEvent').addClass( 'hidden' );
|
||||
|
||||
streamMode = 'video';
|
||||
if (scale == 'auto') changeScale();
|
||||
}
|
||||
|
||||
function showStills() {
|
||||
|
|
@ -924,6 +902,7 @@ function showStills() {
|
|||
);
|
||||
}
|
||||
resetEventStills();
|
||||
if (scale == 'auto') changeScale();
|
||||
}
|
||||
|
||||
function showFrameStats() {
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ var canEditEvents = <?php echo canEdit( 'Events' )?'true':'false' ?>;
|
|||
var streamTimeout = <?php echo 1000*ZM_WEB_REFRESH_STATUS ?>;
|
||||
|
||||
var canStreamNative = <?php echo canStreamNative()?'true':'false' ?>;
|
||||
var streamMode = '<?php echo $streamMode ?>';
|
||||
|
||||
//
|
||||
// Strings
|
||||
|
|
|
|||
|
|
@ -1,15 +1,35 @@
|
|||
function changeScale() {
|
||||
var scale = $('scale').get('value');
|
||||
var img = $('frameImg');
|
||||
if ( img ) {
|
||||
var baseWidth = $('base_width').value;
|
||||
var baseHeight = $('base_height').value;
|
||||
var newWidth = ( baseWidth * scale ) / SCALE_BASE;
|
||||
var newHeight = ( baseHeight * scale ) / SCALE_BASE;
|
||||
let scale = $j('#scale').val();
|
||||
let img = $j('#frameImg');
|
||||
let controlsLinks = {
|
||||
next: $j('#nextLink'),
|
||||
prev: $j('#prevLink'),
|
||||
first: $j('#firstLink'),
|
||||
last: $j('#lastLink')
|
||||
}
|
||||
|
||||
img.style.width = newWidth + "px";
|
||||
img.style.height = newHeight + "px";
|
||||
if (img) {
|
||||
let baseWidth = $j('#base_width').val();
|
||||
let baseHeight = $j('#base_height').val();
|
||||
if (scale == "auto") {
|
||||
let newSize = scaleToFit(baseWidth, baseHeight, img, $j('#controls'));
|
||||
newWidth = newSize.width;
|
||||
newHeight = newSize.height;
|
||||
autoScale = newSize.autoScale;
|
||||
} else {
|
||||
$j(window).off('resize', endOfResize); //remove resize handler when Scale to Fit is not active
|
||||
newWidth = baseWidth * scale / SCALE_BASE;
|
||||
newHeight = baseHeight * scale / SCALE_BASE;
|
||||
}
|
||||
img.css('width', newWidth + "px");
|
||||
img.css('height', newHeight + "px");
|
||||
}
|
||||
Cookie.write( 'zmWatchScale', scale, { duration: 10*365 } );
|
||||
$j.each(controlsLinks, function(k, anchor) { //Make frames respect scale choices
|
||||
anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&'));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
if (scale == "auto") $j(document).ready(changeScale);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
var scale = "<?php echo $scale ?>";
|
||||
|
||||
var SCALE_BASE = <?php echo SCALE_BASE ?>;
|
||||
|
|
|
|||
|
|
@ -25,8 +25,19 @@ function showPtzControls() {
|
|||
|
||||
function changeScale() {
|
||||
var scale = $('scale').get('value');
|
||||
var newWidth = ( monitorWidth * scale ) / SCALE_BASE;
|
||||
var newHeight = ( monitorHeight * scale ) / SCALE_BASE;
|
||||
var newWidth;
|
||||
var newHeight;
|
||||
if (scale == "auto") {
|
||||
let newSize = scaleToFit(monitorWidth, monitorHeight, $j('#liveStream'+monitorId), $j('#replayStatus'));
|
||||
newWidth = newSize.width;
|
||||
newHeight = newSize.height;
|
||||
autoScale = newSize.autoScale;
|
||||
} else {
|
||||
$j(window).off('resize', endOfResize); //remove resize handler when Scale to Fit is not active
|
||||
newWidth = monitorWidth * scale / SCALE_BASE;
|
||||
newHeight = monitorHeight * scale / SCALE_BASE;
|
||||
}
|
||||
|
||||
|
||||
Cookie.write( 'zmWatchScale'+monitorId, scale, { duration: 10*365 } );
|
||||
|
||||
|
|
@ -36,7 +47,7 @@ function changeScale() {
|
|||
streamImg.style.width = newWidth + "px";
|
||||
streamImg.style.height = newHeight + "px";
|
||||
|
||||
streamImg.src = streamImg.src.replace(/scale=\d+/i, 'scale='+scale);
|
||||
streamImg.src = streamImg.src.replace(/scale=\d+/i, 'scale='+(scale== 'auto' ? autoScale : scale));
|
||||
} else {
|
||||
console.error("No element found for liveStream.");
|
||||
}
|
||||
|
|
@ -655,6 +666,7 @@ function initPage() {
|
|||
|
||||
if ( refreshApplet && appletRefreshTime )
|
||||
appletRefresh.delay( appletRefreshTime*1000 );
|
||||
if (scale == "auto") changeScale();
|
||||
}
|
||||
|
||||
// Kick everything off
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ var monitorWidth = <?php echo $monitor->Width() ?>;
|
|||
var monitorHeight = <?php echo $monitor->Height() ?>;
|
||||
var monitorUrl = '<?php echo ( $monitor->Server()->Url() ) ?>';
|
||||
|
||||
var scale = <?php echo $scale ?>;
|
||||
var scale = '<?php echo $scale ?>';
|
||||
|
||||
var statusRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_STATUS ?>;
|
||||
var eventsRefreshTimeout = <?php echo 1000*ZM_WEB_REFRESH_EVENTS ?>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue