add edit and save layout
This commit is contained in:
Isaac Connor
parent
207b66c8fa
commit
c69e2468b0
|
|
@ -13,6 +13,7 @@ function Monitor( monitorData ) {
|
|||
this.streamCmdTimer = null;
|
||||
|
||||
this.start = function( delay ) {
|
||||
console.log(delay);
|
||||
this.streamCmdTimer = this.streamCmdQuery.delay( delay, this );
|
||||
};
|
||||
|
||||
|
|
@ -32,7 +33,7 @@ function Monitor( monitorData ) {
|
|||
if ( this.streamCmdTimer )
|
||||
this.streamCmdTimer = clearTimeout( this.streamCmdTimer );
|
||||
|
||||
var stream = $j('#liveStream'+this.id )[0];
|
||||
var stream = $j('#liveStream'+this.id)[0];
|
||||
if ( respObj.result == 'Ok' ) {
|
||||
this.status = respObj.status;
|
||||
this.alarmState = this.status.state;
|
||||
|
|
@ -81,9 +82,10 @@ function Monitor( monitorData ) {
|
|||
// Try to reload the image stream.
|
||||
if ( stream )
|
||||
stream.src = stream.src.replace( /auth=\w+/i, 'auth='+this.status.auth );
|
||||
console.log("Changed auth to " + this.status.auth );
|
||||
console.log("Changed auth from " + auth_hash + " to " + this.status.auth );
|
||||
auth_hash = this.status.auth;
|
||||
}
|
||||
} // end if haev a new auth hash
|
||||
} // end if have a new auth hash
|
||||
} else {
|
||||
console.error( respObj.message );
|
||||
// Try to reload the image stream.
|
||||
|
|
@ -93,7 +95,7 @@ function Monitor( monitorData ) {
|
|||
} else {
|
||||
console.log( 'No stream to reload?' );
|
||||
}
|
||||
}
|
||||
} // end if Ok or not
|
||||
var streamCmdTimeout = statusRefreshTimeout;
|
||||
if ( this.alarmState == STATE_ALARM || this.alarmState == STATE_ALERT )
|
||||
streamCmdTimeout = streamCmdTimeout/5;
|
||||
|
|
@ -114,11 +116,10 @@ function Monitor( monitorData ) {
|
|||
}
|
||||
|
||||
function selectLayout( element ) {
|
||||
layout = $(element).get('value');
|
||||
layout = $j(element).val();
|
||||
|
||||
if ( layout_id = parseInt(layout) ) {
|
||||
layout = layouts[layout];
|
||||
console.log("Have layout # " + layout_id);
|
||||
|
||||
for ( var i = 0; i < monitors.length; i++ ) {
|
||||
monitor = monitors[i];
|
||||
|
|
@ -134,7 +135,6 @@ console.log("Have layout # " + layout_id);
|
|||
if ( layout.default ) {
|
||||
styles = layout.default;
|
||||
for ( style in styles ) {
|
||||
console.log("applying " + style + ': ' + styles[style]);
|
||||
monitor_frame.css(style, styles[style]);
|
||||
}
|
||||
} // end if default styles
|
||||
|
|
@ -142,7 +142,6 @@ console.log("applying " + style + ': ' + styles[style]);
|
|||
if ( layout[monitor.id] ) {
|
||||
styles = layout[monitor.id];
|
||||
for ( style in styles ) {
|
||||
console.log("applying " + style + ': ' + styles[style]);
|
||||
monitor_frame.css(style, styles[style]);
|
||||
}
|
||||
} // end if specific monitor style
|
||||
|
|
@ -152,7 +151,7 @@ console.log("applying " + style + ': ' + styles[style]);
|
|||
return;
|
||||
}
|
||||
Cookie.write( 'zmMontageLayout', layout_id, { duration: 10*365 } );
|
||||
if ( layout_id != 1 ) { // 'montage_freeform.css' ) {
|
||||
if ( layouts[layout_id].Name != 'Freeform' ) { // 'montage_freeform.css' ) {
|
||||
Cookie.write( 'zmMontageScale', '', { duration: 10*365 } );
|
||||
$('scale').set('value', '' );
|
||||
$('width').set('value', '');
|
||||
|
|
@ -260,52 +259,15 @@ function changeScale() {
|
|||
Cookie.write( 'zmMontageHeight', '', { duration: 10*365 } );
|
||||
}
|
||||
|
||||
var monitors = new Array();
|
||||
function initPage() {
|
||||
for ( var i = 0; i < monitorData.length; i++ ) {
|
||||
monitors[i] = new Monitor( monitorData[i] );
|
||||
var delay = Math.round( (Math.random()+0.5)*statusRefreshTimeout );
|
||||
monitors[i].start( delay );
|
||||
}
|
||||
selectLayout($('layout'));
|
||||
|
||||
$j('#monitors .monitorFrame').draggable({
|
||||
cursor: 'crosshair',
|
||||
revert: 'invalid'
|
||||
});
|
||||
|
||||
function toGrid(value) {
|
||||
function toGrid(value) {
|
||||
return Math.round(value / 80) * 80;
|
||||
}
|
||||
|
||||
$j('#monitors').droppable({
|
||||
accept: '#monitors .monitorFrame',
|
||||
drop: function(event, ui) {
|
||||
//console.log(event);
|
||||
$j(this).removeClass('border over');
|
||||
$j(ui.draggable).detach().
|
||||
appendTo($j(this).find('ul')).
|
||||
draggable({
|
||||
containment: '.fw-content',
|
||||
cursor: 'help',
|
||||
grid: [ 80, 80 ]
|
||||
}).
|
||||
css({
|
||||
position: 'absolute',
|
||||
left: toGrid(event.clientX - $j('#monitors').offset().left),
|
||||
top: toGrid(event.clientY - $j('#monitors').offset().top)
|
||||
});
|
||||
},
|
||||
over: function(event, elem) {
|
||||
console.log('over');
|
||||
$j(this).addClass('over');
|
||||
},
|
||||
out: function(event, elem) {
|
||||
$j(this).removeClass('over');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Makes monitorFrames draggable.
|
||||
function edit_layout(button) {
|
||||
console.log("edit click");
|
||||
|
||||
for ( var x = 0; x < monitors.length; x++ ) {
|
||||
var monitor = monitors[x];
|
||||
|
||||
|
|
@ -318,7 +280,50 @@ function edit_layout(button) {
|
|||
monitor_frame.css('float','none');
|
||||
monitor_frame.css('position','absolute');
|
||||
} // end foreach monitor
|
||||
|
||||
$j('#monitors .monitorFrame').draggable({
|
||||
cursor: 'crosshair',
|
||||
//revert: 'invalid'
|
||||
});
|
||||
$j('#SaveLayout').show();
|
||||
$j('#EditLayout').hide();
|
||||
} // end function edit_layout
|
||||
|
||||
function save_layout(button) {
|
||||
var form=button.form;
|
||||
var Positions = new Array();
|
||||
for ( var x = 0; x < monitors.length; x++ ) {
|
||||
var monitor = monitors[x];
|
||||
monitor_frame = $j('#monitorFrame'+monitor.id);
|
||||
|
||||
Positions[monitor.id] = {
|
||||
width: monitor_frame.css('width'),
|
||||
height: monitor_frame.css('width'),
|
||||
top: monitor_frame.css('top'),
|
||||
bottom: monitor_frame.css('bottom'),
|
||||
left: monitor_frame.css('left'),
|
||||
right: monitor_frame.css('right'),
|
||||
position: monitor_frame.css('position'),
|
||||
float: monitor_frame.css('float'),
|
||||
};
|
||||
} // end foreach monitor
|
||||
form.Positions.value = JSON.stringify( Positions );
|
||||
form.submit();
|
||||
}
|
||||
function cancel_layout(button) {
|
||||
$j('#SaveLayout').hide();
|
||||
$j('#EditLayout').show();
|
||||
}
|
||||
|
||||
var monitors = new Array();
|
||||
function initPage() {
|
||||
for ( var i = 0; i < monitorData.length; i++ ) {
|
||||
monitors[i] = new Monitor(monitorData[i]);
|
||||
var delay = Math.round( (Math.random()+0.75)*statusRefreshTimeout );
|
||||
console.log("delay: " + delay);
|
||||
//monitors[i].start(delay);
|
||||
}
|
||||
selectLayout('#zmMontageLayout');
|
||||
}
|
||||
// Kick everything off
|
||||
window.addEvent( 'domready', initPage );
|
||||
|
|
|
|||
|
|
@ -59,20 +59,6 @@ if ( isset( $_REQUEST['scale'] ) ) {
|
|||
if ( ! $scale )
|
||||
$scale = 100;
|
||||
|
||||
$focusWindow = true;
|
||||
|
||||
/*
|
||||
$layouts = array(
|
||||
'montage_freeform.css' => translate('MtgDefault'),
|
||||
'montage_2wide.css' => translate('Mtg2widgrd'),
|
||||
'montage_3wide.css' => translate('Mtg3widgrd'),
|
||||
'montage_4wide.css' => translate('Mtg4widgrd'),
|
||||
'montage_3wide50enlarge.css' => translate('Mtg3widgrx'),
|
||||
);
|
||||
foreach ( MontageLayout::find() as $Layout ) {
|
||||
$layouts[$Layout->Id()] = $Layout->Name();
|
||||
}
|
||||
*/
|
||||
$layouts = MontageLayout::find(NULL, array('order'=>"lower('Name')"));
|
||||
$layoutsById = array();
|
||||
foreach ( $layouts as $l ) {
|
||||
|
|
@ -83,15 +69,23 @@ $layout = '';
|
|||
if ( isset($_COOKIE['zmMontageLayout']) )
|
||||
$layout = $_COOKIE['zmMontageLayout'];
|
||||
|
||||
session_start();
|
||||
$options = array();
|
||||
if ( isset($_COOKIE['zmMontageWidth']) and $_COOKIE['zmMontageWidth'] )
|
||||
$options['width'] = $_COOKIE['zmMontageWidth'];
|
||||
else
|
||||
if ( isset($_COOKIE['zmMontageWidth']) and $_COOKIE['zmMontageWidth'] ) {
|
||||
$_SESSION['zmMontageWidth'] = $options['width'] = $_COOKIE['zmMontageWidth'];
|
||||
} elseif ( isset($_SESSION['zmMontageWidth']) and $_SESSION['zmMontageWidth'] ) {
|
||||
$options['width'] = $_SESSION['zmMontageWidth'];
|
||||
} else
|
||||
$options['width'] = '';
|
||||
|
||||
if ( isset($_COOKIE['zmMontageHeight']) and $_COOKIE['zmMontageHeight'] )
|
||||
$options['height'] = $_COOKIE['zmMontageHeight'];
|
||||
$_SESSION['zmMontageHeight'] = $options['height'] = $_COOKIE['zmMontageHeight'];
|
||||
else if ( isset($_SESSION['zmMontageHeight']) and $_SESSION['zmMontageHeight'] )
|
||||
$options['height'] = $_SESSION['zmMontageHeight'];
|
||||
else
|
||||
$options['height'] = '';
|
||||
session_write_close();
|
||||
|
||||
if ( $scale )
|
||||
$options['scale'] = $scale;
|
||||
|
||||
|
|
@ -102,6 +96,9 @@ ob_end_clean();
|
|||
|
||||
$monitors = array();
|
||||
foreach( $displayMonitors as &$row ) {
|
||||
if ( $row['Function'] == 'None' )
|
||||
continue;
|
||||
|
||||
$row['Scale'] = $scale;
|
||||
$row['PopupScale'] = reScale( SCALE_BASE, $row['DefaultScale'], ZM_WEB_DEFAULT_SCALE );
|
||||
|
||||
|
|
@ -143,15 +140,24 @@ if ( $showZones ) {
|
|||
</div>
|
||||
<?php echo $filterbar ?>
|
||||
<div id="sizeControl">
|
||||
<form action="index.php?view=montage" method="post">
|
||||
<input type="hidden" name="object" value="MontageLayout"/>
|
||||
|
||||
<span id="widthControl"><label><?php echo translate('Width') ?>:</label><?php echo htmlSelect( 'width', $widths, $options['width'], 'changeSize(this);' ); ?></span>
|
||||
<span id="heightControl"><label><?php echo translate('Height') ?>:</label><?php echo htmlSelect( 'height', $heights, $options['height'], 'changeSize(this);' ); ?></span>
|
||||
<span id="scaleControl"><label><?php echo translate('Scale') ?>:</label><?php echo htmlSelect( 'scale', $scales, $scale, 'changeScale(this);' ); ?></span>
|
||||
<span id="layoutControl">
|
||||
<label for="layout"><?php echo translate('Layout') ?>:</label>
|
||||
<?php echo htmlSelect( 'layout', $layoutsById, $layout, 'selectLayout(this);' )?>
|
||||
<?php echo htmlSelect( 'zmMontageLayout', $layoutsById, $layout, array( 'onchange'=>'selectLayout(this);', 'id'=>'zmMontageLayout') ); ?>
|
||||
</span>
|
||||
<input type="button" value="<?php echo translate('EditLayout') ?>" onclick="edit_layout(this);"/>
|
||||
<input type="button" value="<?php echo translate('SaveLayout') ?>" onclick="save_layout(this);"/>
|
||||
<input type="hidden" name="Positions"/>
|
||||
<input type="button" id="EditLayout" value="<?php echo translate('EditLayout') ?>" onclick="edit_layout(this);"/>
|
||||
<span id="SaveLayout" style="display:none;">
|
||||
<input type="text" name="Name" placeholder="Enter new name for layout if desired" />
|
||||
<input type="button" name="action" value="<?php echo translate('Save') ?>" onclick="save_layout(this);"/>
|
||||
<input type="button" value="Cancel" onclick="cancel_layout(this);"/>
|
||||
</span>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content">
|
||||
|
|
@ -160,7 +166,7 @@ if ( $showZones ) {
|
|||
foreach ( $monitors as $monitor ) {
|
||||
$connkey = $monitor->connKey(); // Minor hack
|
||||
?>
|
||||
<div id="monitorFrame<?php echo $monitor->Id() ?>" class="monitorFrame" title="<?php echo $monitor->Id() . ' ' .$monitor->Name() ?>">
|
||||
<div id="monitorFrame<?php echo $monitor->Id() ?>" class="monitorFrame" title="<?php echo $monitor->Id() . ' ' .$monitor->Name() ?>" style="<?php echo $options['width'] ? 'width:'.$options['width'].'px;':''?>">
|
||||
<div id="monitor<?php echo $monitor->Id() ?>" class="monitor idle">
|
||||
<div id="imageFeed<?php echo $monitor->Id() ?>" class="imageFeed" onclick="createPopup( '?view=watch&mid=<?php echo $monitor->Id() ?>', 'zmWatch<?php echo $monitor->Id() ?>', 'watch', <?php echo reScale( $monitor->Width(), $monitor->PopupScale() ); ?>, <?php echo reScale( $monitor->Height(), $monitor->PopupScale() ); ?> );">
|
||||
<?php
|
||||
|
|
@ -201,16 +207,13 @@ foreach ( $monitors as $monitor ) {
|
|||
$row['Coords'] = pointsToCoords( $row['Points'] );
|
||||
$row['AreaCoords'] = preg_replace( '/\s+/', ',', $row['Coords'] );
|
||||
$zones[] = $row;
|
||||
}
|
||||
|
||||
} // end foreach Zone
|
||||
?>
|
||||
|
||||
<svg class="zones" id="zones<?php echo $monitor->Id() ?>" style="position:absolute; top: 0; left: 0; background: none; width: <?php echo $width ?>px; height: <?php echo $height ?>px;">
|
||||
<?php
|
||||
foreach( array_reverse($zones) as $zone ) {
|
||||
?>
|
||||
<polygon points="<?php echo $zone['AreaCoords'] ?>" class="<?php echo $zone['Type']?>" />
|
||||
<?php
|
||||
echo '<polygon points="'. $zone['AreaCoords'] .'" class="'. $zone['Type'].'" />';
|
||||
} // end foreach zone
|
||||
?>
|
||||
Sorry, your browser does not support inline SVG
|
||||
|
|
|
|||
Loading…
Reference in New Issue