557 lines
17 KiB
PHP
557 lines
17 KiB
PHP
<?php
|
||
include( "head.php" );
|
||
?>
|
||
<div class="row">
|
||
<div class="col-md-5">
|
||
<div class="thumbnail">
|
||
<div class="caption ">
|
||
<form class="form-inline ">
|
||
<div class="form-group ">
|
||
<label class="control-label">
|
||
<cn>频道</cn>
|
||
<en>Channel</en>:
|
||
</label>
|
||
<select id="channels" class="form-control"></select>
|
||
<label class="control-label" style="margin-left: 15px;">
|
||
<cn>布局</cn>
|
||
<en>Layout</en>:
|
||
</label>
|
||
<select id="SysLayout" class="form-control">
|
||
<!-- <option cn="9宫格" en="grid 3x3" value="0"></option>-->
|
||
<!-- <option cn="4分屏" en="grid 2x2"value="1"></option>-->
|
||
<!-- <option value="2">1+2</option>-->
|
||
<!-- <option cn="画中画" en="PinP" value="3"></option>-->
|
||
<!-- <option cn="单画面" en="Single" value="4"></option>-->
|
||
<!-- <option cn="上下" en="UpDown" value="5"></option>-->
|
||
<!-- <option cn="自定义" en="user" value="6"></option>-->
|
||
</select>
|
||
<label id="defLay" style="position: absolute;right: 30px;top:20px;cursor: pointer">
|
||
<i class="fa fa-cog fa-lg"></i>
|
||
</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<img id="snap" src="">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-7">
|
||
<div class="panel panel-default">
|
||
<div class="title">
|
||
<h3 class="panel-title">
|
||
<cn>布局设定</cn>
|
||
<en>Layout config</en>
|
||
</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div id="templeLay" style="position: absolute; padding: 10px; width: 33%;height: 33%; border: 1px solid #ddd; z-index: 0; background-color: #777; display: none; ">
|
||
|
||
<table style="width: 100%;">
|
||
<tr>
|
||
<td width="100%">
|
||
<select onChange="update();" id="laySrc" class="form-control input-sm">
|
||
<option cn="空" en="NULL" value="-1"></option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<button style="width: 36px;" onClick="mute(this);" class="btn btn-sm btn-disable" ><i class="fa fa-volume-off"></i></button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</div>
|
||
<div id="layout" style="position: relative; width: 100%; padding-bottom: 56.25%; background-color: #000;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="row" <?php if(isset($HDMI_Out) && !$HDMI_Out) echo 'style="display: none;"'; ?> >
|
||
<div class="col-md-12">
|
||
<div class="panel panel-default">
|
||
<div class="title">
|
||
<h3 class="panel-title">
|
||
<cn>输出设置</cn>
|
||
<en>Output Config</en>
|
||
</h3>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div id="alertOut"></div>
|
||
<form class="form-horizontal" id="output" role="form">
|
||
<div class="form-group">
|
||
<label class="col-sm-2 control-label">
|
||
<cn>混合开关</cn><en>Mix enable</en>
|
||
</label>
|
||
<div class="col-sm-5">
|
||
<input type="checkbox" zcfg="enable" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
HDMI <cn>开关</cn><en>enable</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<input type="checkbox" zcfg="output.enable" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>分辨率</cn><en>resolution</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output.output" class="form-control">
|
||
<?php
|
||
if($type!="ENC1H")
|
||
{
|
||
?>
|
||
<option value="3840x2160_60">4K60</option>
|
||
<option value="3840x2160_50">4K50</option>
|
||
<option value="3840x2160_30">4K30</option>
|
||
<?php
|
||
}
|
||
?>
|
||
<option value="1080P60">1080P60</option>
|
||
<option value="1080I60">1080I60</option>
|
||
<option value="1080P50">1080P50</option>
|
||
<option value="1080I50">1080I50</option>
|
||
<option value="1080P30">1080P30</option>
|
||
<option value="720P60">720P60</option>
|
||
<option value="720P50">720P50</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>旋转</cn><en>rotate</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output.rotate" class="form-control">
|
||
<option value="0">0</option>
|
||
<option value="90">90</option>
|
||
<option value="180">180</option>
|
||
<option value="270">270</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
-->
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>视频源</cn><en>video source</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output.src" id="hdmisrc" class="form-control">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>低延时</cn><en>low latency</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<input type="checkbox" zcfg="output.lowLatency" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<?php
|
||
echo isset($extraVo)?$extraVo:"VGA";
|
||
?>
|
||
<cn>开关</cn><en>enable</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<input type="checkbox" zcfg="output2.enable" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>分辨率</cn><en>resolution</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output2.output" class="form-control">
|
||
<option value="1080P60">1080P60</option>
|
||
<option value="1080P50">1080P50</option>
|
||
<option value="1080P30">1080P30</option>
|
||
<option value="720P60">720P60</option>
|
||
<option value="720P50">720P50</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<!--
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>旋转</cn><en>rotate</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output2.rotate" class="form-control">
|
||
<option value="0">0</option>
|
||
<option value="90">90</option>
|
||
<option value="180">180</option>
|
||
<option value="270">270</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
-->
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>视频源</cn><en>video source</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<select zcfg="output2.src" id="vgasrc" class="form-control">
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-4 control-label">
|
||
<cn>低延时</cn><en>low latency</en>
|
||
</label>
|
||
<div class="col-sm-6">
|
||
<input type="checkbox" zcfg="output2.lowLatency" class="switch form-control">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr />
|
||
<div class="form-group">
|
||
<div class="col-md-12 text-center">
|
||
<button type="button" id="save" class=" save btn btn-warning">
|
||
<cn>保存</cn>
|
||
<en>Save</en>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="vendor/switch/bootstrap-switch.min.js"></script>
|
||
<script type="text/javascript" language="javascript" src="js/confirm/jquery-confirm.min.js"></script>
|
||
<script src="js/zcfg.js"></script>
|
||
<script>
|
||
$.fn.bootstrapSwitch.defaults.size = 'small';
|
||
$.fn.bootstrapSwitch.defaults.onColor = 'warning';
|
||
navIndex( 4 );
|
||
var config = null;
|
||
var mixCfg = null;
|
||
var curChn = -1;
|
||
var defLays = null;
|
||
var curLayIndex = 0;
|
||
var SysLayout = [];
|
||
var mixV = [];
|
||
|
||
$("#myModal").on('show.bs.modal', function(){
|
||
var $this = $(this);
|
||
var $modal_dialog = $this.find('.modal-dialog');
|
||
$this.css('display', 'block');
|
||
$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
|
||
});
|
||
|
||
function isMute(obj)
|
||
{
|
||
return $(obj).hasClass("btn-disable");
|
||
}
|
||
|
||
function setMute(obj,bMute)
|
||
{
|
||
var btn=$(obj).find("i");
|
||
if(bMute){
|
||
btn.removeClass("fa-volume-up");
|
||
btn.addClass("fa-volume-off");
|
||
$(obj).removeClass("btn-warning");
|
||
$(obj).addClass("btn-disable");
|
||
}
|
||
else{
|
||
btn.removeClass("fa-volume-off");
|
||
btn.addClass("fa-volume-up");
|
||
$(obj).removeClass("btn-disable");
|
||
$(obj).addClass("btn-warning");
|
||
}
|
||
}
|
||
|
||
function mute(obj){
|
||
setMute(obj,!isMute(obj));
|
||
update();
|
||
}
|
||
function init() {
|
||
for ( var i = 0; i < config.length; i++ ) {
|
||
if(config[i].type != "file"){
|
||
$( "#laySrc" ).append( '<option value="' + config[ i ].id + '">' + config[ i ].name + '</option>' );
|
||
$( "#vgasrc" ).append( '<option value="' + config[ i ].id + '">' + config[ i ].name + '</option>' );
|
||
$( "#hdmisrc" ).append( '<option value="' + config[ i ].id + '">' + config[ i ].name + '</option>' );
|
||
|
||
}
|
||
|
||
if ( config[ i ].type != "mix" )
|
||
continue;
|
||
mixV = config[i].srcV;
|
||
$( "#channels" ).append( '<option value="' + config[ i ].id + '">' + config[ i ].name + '</option>' );
|
||
zcfg("#output",config[ i ]);
|
||
|
||
}
|
||
|
||
setInterval( show, 300 );
|
||
|
||
$( "#channels" ).change( function () {
|
||
setChannel( $( "#channels" ).val() );
|
||
} );
|
||
$( "#SysLayout" ).change( function () {
|
||
curLayIndex=$( "#SysLayout" ).val();
|
||
var defLay = defLays[curLayIndex];
|
||
var temp = [];
|
||
var type = false;
|
||
for(var i=0;i<defLay.layouts.length;i++){
|
||
var lay = defLay.layouts[i];
|
||
if(lay.id < 0){
|
||
temp.push("-1");
|
||
} else {
|
||
type = true;
|
||
temp.push(lay.id+"");
|
||
}
|
||
}
|
||
var mixSrcV = mixCfg["srcV"];
|
||
|
||
//如果自定义布局中存在指定输入源
|
||
if(type)
|
||
mixCfg["srcV"] = temp;
|
||
// for(var i=0;i<mixSrcV.length;i++){
|
||
// if( i >= temp.length)
|
||
// break;
|
||
// if(mixSrcV[i] == "-1")
|
||
// continue;
|
||
// var mark = false;
|
||
// for(var j=0;j<temp.length;j++){
|
||
// if(temp[j] == mixSrcV[i])
|
||
// mark = true;
|
||
// }
|
||
// if(!mark)
|
||
// temp[i] = mixSrcV[i];
|
||
// }
|
||
// mixCfg["srcV"] = temp;
|
||
setLayout();
|
||
update();
|
||
} );
|
||
setChannel($('#channels option:first').val() );
|
||
}
|
||
|
||
function setLayout()
|
||
{
|
||
var layout=SysLayout[curLayIndex];
|
||
$("#userLay").val(JSON.stringify(layout).replace(/},{/g,"},\n{"));
|
||
$("#layout").html('');
|
||
for(var i=0;i<layout.length;i++){
|
||
var lay=$("#templeLay").clone();
|
||
var optlist = lay.find("#laySrc").find("option").toArray();
|
||
for(var k=optlist.length-1;k>=0;k--){
|
||
var opt = optlist[k];
|
||
var id = $(opt).val()+"";
|
||
for(var n=0;n<mixV.length;n++) {
|
||
if(id == mixV[n] && id != mixV[i] && id != "-1"){
|
||
lay.find("#laySrc")[0].options.remove(k);
|
||
}
|
||
}
|
||
}
|
||
|
||
lay.css("display","block");
|
||
lay.css("left",(layout[i].x*100)+"%");
|
||
lay.css("top",(layout[i].y*100)+"%");
|
||
lay.css("width",(layout[i].w*100)+"%");
|
||
lay.css("height",(layout[i].h*100)+"%");
|
||
lay.css("z-index",i);
|
||
|
||
var color=128;
|
||
if(i%2==0){
|
||
color+=25*(i/2);
|
||
}
|
||
else{
|
||
color-=25*(i/2+1);
|
||
}
|
||
lay.css("background-color", "rgb("+color+","+color+","+color+")");
|
||
lay.appendTo("#layout");
|
||
}
|
||
|
||
var srcA=mixCfg["srcA"];
|
||
var srcV=mixCfg["srcV"];
|
||
|
||
for(var i=0;i<srcV.length && i<$("#layout #templeLay").length;i++){
|
||
$("#layout #templeLay").eq(i).find("#laySrc").val(srcV[i]);
|
||
setMute($("#layout #templeLay").eq(i).find("button"),($.inArray(srcV[i], srcA)==-1) || srcV[i]==-1 );
|
||
}
|
||
}
|
||
|
||
function setChannel( id ) {
|
||
curChn = id;
|
||
mixCfg = config[id];
|
||
// key值重新排序，为对比做准备
|
||
var layList = [];
|
||
for(var i=0;i<mixCfg["layout"].length;i++)
|
||
{
|
||
var layout = mixCfg["layout"][i];
|
||
var layObj = {
|
||
"a": layout["a"],
|
||
"x": layout["x"],
|
||
"y": layout["y"],
|
||
"w": layout["w"],
|
||
"h": layout["h"],
|
||
"index": layout["index"]
|
||
}
|
||
layList.push(layObj);
|
||
}
|
||
var str=JSON.stringify(layList);
|
||
curLayIndex=6;
|
||
for(var i=0;i<SysLayout.length;i++){
|
||
if(JSON.stringify(SysLayout[i])==str)
|
||
{
|
||
$( "#SysLayout" ).val(i);
|
||
curLayIndex=i;
|
||
}
|
||
|
||
}
|
||
|
||
if(curLayIndex==6){
|
||
$( "#SysLayout" ).val(6);
|
||
SysLayout[6]=mixCfg["layout"];
|
||
}
|
||
setLayout();
|
||
}
|
||
|
||
function update()
|
||
{
|
||
var srcV=new Array();
|
||
var srcA=new Array();
|
||
for(var i=0;i<$("#layout #templeLay").length;i++){
|
||
var id=$("#layout #templeLay").eq(i).find("#laySrc").val();
|
||
if($.inArray(id, srcV)>=0 && id!=-1){
|
||
$("#layout #templeLay").eq(i).find("#laySrc").val(-1);
|
||
setMute($("#layout #templeLay").eq(i).find("button"),true);
|
||
continue;
|
||
}
|
||
else
|
||
srcV.push(id);
|
||
if(!isMute($("#layout #templeLay").eq(i).find("button"))){
|
||
// if(config[id].type!="vi")
|
||
// setMute($("#layout #templeLay").eq(i).find("button"),true);
|
||
// else
|
||
srcA.push(id);
|
||
}
|
||
|
||
}
|
||
mixV = srcV;
|
||
for(var i=0;i<$("#layout #templeLay").length;i++){
|
||
var lay=$("#layout #templeLay").eq(i);
|
||
lay.find("#laySrc")[0].options.length = 1;
|
||
for ( var k = 0; k < config.length; k++ ) {
|
||
if(config[k].type != "file"){
|
||
if($.inArray(config[k].id+"",mixV) < 0 || config[k].id+"" == mixV[i]){
|
||
lay.find("#laySrc").append( '<option value="' + config[ k ].id + '">' + config[ k ].name + '</option>' );
|
||
}
|
||
}
|
||
}
|
||
lay.find("#laySrc").val(mixV[i]);
|
||
}
|
||
|
||
mixCfg["srcA"]=srcA;
|
||
mixCfg["srcV"]=srcV;
|
||
mixCfg["layout"]=SysLayout[curLayIndex];
|
||
save();
|
||
}
|
||
|
||
|
||
function snap() {
|
||
rpc( "enc.snap" );
|
||
}
|
||
|
||
function show() {
|
||
setTimeout( snap, 100 );
|
||
$( "#snap" ).attr( "src", "snap/snap" + curChn + ".jpg?rnd=" + Math.random() );
|
||
}
|
||
|
||
$("#defLay").click(function () {
|
||
$.confirm( {
|
||
title: '<cn>布局</cn><en>Layout</en>',
|
||
content: '<cn>是否打开布局管理器？</cn><en>Jump to Layout Manager?</en>',
|
||
buttons: {
|
||
ok: {
|
||
text: "<cn>打开</cn><en>Confirm</en>",
|
||
btnClass: 'btn-warning',
|
||
keys: [ 'enter' ],
|
||
action: function () {
|
||
window.location.href = "defLayout.php";
|
||
}
|
||
},
|
||
cancel: {
|
||
text: "<cn>取消</cn><en>Cancel</en>"
|
||
}
|
||
|
||
}
|
||
} );
|
||
});
|
||
|
||
|
||
function save() {
|
||
rpc( "enc.update", [ JSON.stringify( config, null, 2 ) ], function ( data ) {
|
||
if ( typeof ( data.error ) != "undefined" ) {
|
||
htmlAlert( "#alert", "danger", "<cn>保存设置失败！</cn><en>Save config failed!</en>", "", 2000 );
|
||
}
|
||
} );
|
||
}
|
||
|
||
$( "#save" ).click( function ( e ) {
|
||
rpc( "enc.update", [ JSON.stringify( config, null, 2 ) ], function ( data ) {
|
||
if ( typeof ( data.error ) != "undefined" ) {
|
||
htmlAlert( "#alertOut", "danger", "<cn>保存设置失败！</cn><en>Save config failed!</en>", "", 2000 );
|
||
}
|
||
else
|
||
htmlAlert( "#alertOut", "success", "<cn>保存设置成功！</cn><en>Save config success!</en>", "", 2000 );
|
||
} );
|
||
} );
|
||
|
||
$.ajaxSettings.async = false;
|
||
$.getJSON( "config/defLays.json?rnd=" + Math.random(), function ( result ) {
|
||
defLays = result;
|
||
for(var i=0;i<defLays.length;i++){
|
||
var defLay = defLays[i];
|
||
var las = defLay.layouts;
|
||
var layout = [];
|
||
for(var j=0;j<las.length;j++) {
|
||
layout.push(las[j].pos);
|
||
}
|
||
SysLayout.push(layout);
|
||
$("#SysLayout").append("<option cn='"+defLay.layName+"' en='"+defLay.layNameEn+"' value='"+defLay.layId+"'></option>");
|
||
}
|
||
} );
|
||
|
||
$.getJSON( "config/config.json?rnd=" + Math.random(), function ( result ) {
|
||
config = result;
|
||
init();
|
||
} );
|
||
$.ajaxSettings.async = true;
|
||
|
||
setInterval(function () {
|
||
$.getJSON( "config/defLays.json?rnd=" + Math.random(), function ( result ) {
|
||
defLays = result;
|
||
SysLayout = [];
|
||
for(var i=0;i<defLays.length;i++){
|
||
var defLay = defLays[i];
|
||
var las = defLay.layouts;
|
||
var layout = [];
|
||
for(var j=0;j<las.length;j++) {
|
||
layout.push(las[j].pos);
|
||
}
|
||
SysLayout.push(layout);
|
||
}
|
||
} );
|
||
},1000)
|
||
|
||
</script>
|
||
<?php
|
||
include( "foot.php" );
|
||
?>
|