linkpi_firmware_history/rootfs/link/web/mix.php

690 lines
23 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?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 (!$hardware["function"]["videoOut"]) 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>Interface</en>
</label>
<div class="col-sm-6">
<select zcfg="output.type" class="form-control">
<option value="hdmi">HDMI</option>
<option value="dvi">DVI</option>
</select>
</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 ($hardware["capability"]["maxOutput"]=="4K60") {
?>
<option value="3840x2160_60">4K60</option>
<option value="3840x2160_50">4K50</option>
<?php
}
if ($hardware["capability"]["maxOutput"]=="4K60" || $hardware["capability"]["maxOutput"]=="4K30")
{
?>
<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="1080P25">1080P25</option>
<option value="1080P24">1080P24</option>
<option value="720P60">720P60</option>
<option value="720P50">720P50</option>
<option value="1920x2160_30">1920x2160_30</option>
<option value="2560x1600_60">2560x1600_60</option>
<option value="2560x1440_60">2560x1440_60</option>
<option value="2560x1440_30">2560x1440_30</option>
<option value="1920x1200_60">1920x1200_60</option>
<option value="1680x1050_60">1680x1050_60</option>
<option value="1600x1200_60">1600x1200_60</option>
<option value="1440x900_60">1440x900_60</option>
<option value="1366x768_60">1366x768_60</option>
<option value="1280x1024_60">1280x1024_60</option>
<option value="1280x800_60">1280x800_60</option>
<option value="1024x768_60">1024x768_60</option>
<option value="800x600_60">800x600_60</option>
<option value="576P50">576P50</option>
<option value="480P60">480P60</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>
<?php
if ($hardware["chip"]=="SS524V100" || $hardware["chip"]=="SS528V100" || $hardware["chip"]=="HI3531DV200") {
?>
<div class="form-group">
<label class="col-sm-4 control-label">
<cn>左右镜像</cn>
<en>mirror</en>
</label>
<div class="col-sm-6">
<input type="checkbox" zcfg="output.mirror" class="switch form-control">
</div>
</div>
<?php
}
?>
<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 class="form-group ">
<label class="col-sm-4 control-label">
<cn>色域转换</cn>
<en>CSC</en>
</label>
<div class="col-sm-6">
<select zcfg="output.csc.matrix" class="form-control">
<option value="identity" cn="不转换" en="Identity"></option>
<option value="601_709">601 to 709</option>
<option value="709_601">709 to 601</option>
</select>
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>亮度</cn>
<en>luma</en>
</label>
<div class="col-sm-6">
<input zcfg="output.csc.luma" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>对比度</cn>
<en>contrast</en>
</label>
<div class="col-sm-6">
<input zcfg="output.csc.contrast" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>饱和度</cn>
<en>saturation</en>
</label>
<div class="col-sm-6">
<input zcfg="output.csc.saturation" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>色调</cn>
<en>hue</en>
</label>
<div class="col-sm-6">
<input zcfg="output.csc.hue" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group" style="height:34px">
</div>
<div class="form-group">
<label class="col-sm-4 control-label">
<?php
echo $hardware["capability"]["extraVo"];
?>
<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="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="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>
<?php
if ($hardware["chip"]=="SS524V100" || $hardware["chip"]=="SS528V100" || $hardware["chip"]=="HI3531DV200") {
?>
<div class="form-group">
<label class="col-sm-4 control-label">
<cn>左右镜像</cn>
<en>mirror</en>
</label>
<div class="col-sm-6">
<input type="checkbox" zcfg="output2.mirror" class="switch form-control">
</div>
</div>
<?php
}
?>
<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 class="form-group ">
<label class="col-sm-4 control-label">
<cn>色域转换</cn>
<en>CSC</en>
</label>
<div class="col-sm-6">
<select zcfg="output2.csc.matrix" class="form-control">
<option value="identity" cn="不转换" en="Identity"></option>
<option value="601_709">601 to 709</option>
<option value="709_601">709 to 601</option>
</select>
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>亮度</cn>
<en>luma</en>
</label>
<div class="col-sm-6">
<input zcfg="output2.csc.luma" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>对比度</cn>
<en>contrast</en>
</label>
<div class="col-sm-6">
<input zcfg="output2.csc.contrast" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>饱和度</cn>
<en>saturation</en>
</label>
<div class="col-sm-6">
<input zcfg="output2.csc.saturation" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</div>
</div>
<div class="form-group ">
<label class="col-sm-4 control-label">
<cn>色调</cn>
<en>hue</en>
</label>
<div class="col-sm-6">
<input zcfg="output2.csc.hue" class="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" />
</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/slider/bootstrap-slider.min.js" type="text/javascript"></script>
<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>
$(".slider").slider();
$.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++) {
$("#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 tempV = [];
var tempA = [];
var typeV = false;
var typeA = false;
for (var i = 0; i < defLay.layouts.length; i++) {
var lay = defLay.layouts[i];
if (lay.id < 0) {
tempV.push("-1");
} else {
typeV = true;
tempV.push(lay.id + "");
if(lay.ado) {
tempA.push(lay.id + "");
typeA = true;
}
}
}
if (typeV)
mixCfg["srcV"] = tempV;
if (typeA)
mixCfg["srcA"] = tempA;
setLayout();
update();
});
setChannel($('#channels option:first').val());
update();
}
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") {
// console.log(id);
// 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);
for (var i = 0; i < SysLayout.length; i++) {
if (JSON.stringify(SysLayout[i]) == str) {
$("#SysLayout").val(i);
curLayIndex = i;
}
}
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 ($.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;
</script>
<?php
include("foot.php");
?>