<?php
include( "head.php" );
?>
<link href="/css/fontawesome-iconpicker.min.css" rel="stylesheet">
<link href="/css/loading.css" rel="stylesheet">
<div id="alert"></div>
<div class="row" id="effect">
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-default">
<div class="title">
<h3 class="panel-title">
<cn>按键管理</cn>
<en>Controler manager</en>
</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-3 col-md-offset-1 text-center">
<cn>名称</cn>
<en>Name</en>
</div>
<div class="col-md-3 col-sm-3 text-center">
<cn>图标</cn>
<en>Icon</en>
</div>
<div class="col-md-3 col-sm-3 text-center">
<cn>操作</cn>
<en>Operate</en>
</div>
</div>
</div>
<hr style="margin-top:10px; margin-bottom: 10px;"/>
<div id="remoteBtns" class="form-group"></div>
<hr style="margin-top:10px; margin-bottom: 10px;"/>
<div class="form-group">
<div class="row">
<div class="col-md-7">
<div class="text-right">
<button type="button" class="btn btn-warning text-center" id="addRemote" style="outline: none;width: 112px;height: 34px" >
<div class="fa" style="font-weight: bold;font-size: 15px;">
<cn>添加按键</cn>
<en>Add</en>
</div>
<div class="sp sp-circle hide"></div>
</button>
</div>
</div>
<div class="col-md-5" style="padding: 0">
<div class="row">
<div class="col-md-12">
<div class="text-left" style="margin-top: 20px;color: #cccccc">
<small id="addHint" class="hide" style="button:0">
<cn>按键识别中...</cn>
<en>Will be recognition...</en>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="title">
<h3 class="panel-title">
<cn>方案管理</cn>
<en>Project manager</en>
</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 col-sm-3 control-label">
<cn>按键方案</cn>
<en>Projects</en>
</label>
<div class="col-md-6 col-sm-6">
<cn>
<select id="projectsCH" class="form-control"></select>
</cn>
<en>
<select id="projectsEN" class="form-control"></select>
</en>
</div>
<div class="col-md-3 col-sm-3">
<div id="setProject" class="btn btn-warning">
<cn>启用</cn>
<en>Use</en>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="title">
<h3 class="panel-title">
<cn>功能设置</cn>
<en>Feature setting</en>
</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-sm-3 col-md-offset-1 text-center">
<cn>按键</cn>
<en>Button</en>
</div>
<div class="col-md-3 col-sm-3 text-center">
<cn>短按</cn>
<en>Short Press</en>
</div>
<div class="col-md-3 col-sm-3 text-center">
<cn>长按</cn>
<en>Long Press</en> <span style="font-size: 6px;color: grey;">[>3s]</span></div>
</div>
</div>
<hr style="margin-top:10px; margin-bottom: 10px;"/>
<div id="featureItem" class="form-group"></div>
<hr style="margin-top:10px; margin-bottom: 10px;"/>
<div class="form-group">
<div class="text-center">
<button type="button" id="saveProject" class="btn btn-warning col-xs-4 col-xs-offset-4 col-md-2 col-md-offset-5">
<cn>保存</cn>
<en>Save</en>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 20%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">
<cn>识别到新的按键</cn>
<en>Recognize the new button</en>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-7" style="line-height: 34px;font-size: 14px">
<span>
<cn>选择一个按键图标：</cn>
<en>Select a button icon:</en>
</span>
</div>
<div class="col-md-5">
<div class="btn-group">
<button type="button" class="btn iconpicker-component" ><i id="icon" class="fa fa-power-off"></i></button>
<button type="button" class="icp icp-dd btn dropdown-toggle" data-selected="fa-car" data-toggle="dropdown">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="dropdown-menu"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">
<cn>取消</cn>
<en>Cancel</en>
</button>
<button type="button" class="btn btn-warning" onclick="onNewRemoteBtn()">
<cn>确定</cn>
<en>OK</en>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-sm" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width: 20%">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">
<cn>提示</cn>
<en>Info</en>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-7" style="line-height: 34px;font-size: 14px">
<span>
<cn>确认删除?</cn>
<en>Confirm deletion?</en>
</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">
<cn>取消</cn>
<en>Cancel</en>
</button>
<button type="button" class="btn btn-warning" onclick="onDelRemoteBtn()">
<cn>确定</cn>
<en>OK</en>
</button>
</div>
</div>
</div>
</div>
<script src="./js/fontawesome-iconpicker.min.js"></script>
<script src="./js/handlebars-v4.7.6.js"></script>
<!--按键管理模板-->
<script id="tpl" type="text/x-handlebars-template">
{{#each this}}
<div class="row">
<div class="col-md-9 col-md-offset-1">
{{#handleHr @index 10}} {{/handleHr}}
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-md-offset-1 text-center" style="line-height: 22px">
<span>
<cn>{{btnNameCN}}</cn>
<en>{{btnNameEN}}</en>
</span>
</div>
<div class="col-md-3 col-sm-3 text-center" style="font-size: 20px;line-height: 22px">
{{#showIcon icon}} {{/showIcon}}
</div>
<div class="col-md-3 col-sm-3 text-center" style="line-height: 22px;cursor: pointer">
<a onclick="deleteBtn({{btnId}})">
<cn>删除</cn>
<en>delete</en>
</a>
</div>
</div>
{{/each}}
</script>
<!--功能布局模板-->
<script id="tpl1" type="text/x-handlebars-template">
{{#each this}}
<div class="row">
<div class="col-md-9 col-md-offset-1">
{{#handleHr @index 8}} {{/handleHr}}
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-md-offset-1 text-center" style="font-size: 18px;line-height: 18px">
{{#showIcon icon}} {{/showIcon}}
</div>
<div class="col-md-3 col-sm-3 text-center" style="font-size: 18px;line-height: 18px">
{{#handleDrop @index 2 icon tapCH tapEN "tap"}} {{/handleDrop}}
</div>
<div class="col-md-3 col-sm-3 text-center" style="font-size: 18px;line-height: 18px">
{{#handleDrop @index 3 icon pressCH pressEN "press"}} {{/handleDrop}}
</div>
</div>
{{/each}}
</script>
<!--选择按键功能模板-->
<script id="tpl2" type="text/x-handlebars-template">
<div class="dropup">
<button type="button" class="dropdown-toggle" style="font-size:10px;outline: none;border: none;width: 140px;height: 25px;background: white" id="{{menuId}}" data-toggle="dropdown">
<cn>{{ch}}</cn>
<en>{{en}}</en>
<span class="caret"></span>
</button>
<div class="dropdown-menu" style="width: 550px;padding:20px 0px 10px 20px">
<div class="row">
<div class="col-md-4">
<ul>
{{#each mods1}}
<li class="dropdown-header">
<cn>{{titleCH}}</cn>
<en>{{titleEN}}</en>
</li>
{{#each func}}
<li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
<cn>{{ch}}</cn>
<en>{{en}}</en>
</a>
</li>
{{/each}}
<li class="divider"></li>
{{/each}}
</ul>
</div>
<div class="col-md-4">
<ul>
{{#each mods2}}
<li class="dropdown-header">
<cn>{{titleCH}}</cn>
<en>{{titleEN}}</en>
</li>
{{#each func}}
<li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
<cn>{{ch}}</cn>
<en>{{en}}</en>
</a>
</li>
{{/each}}
<li class="divider"></li>
{{/each}}
</ul>
</div>
<div class="col-md-4">
<ul>
{{#each mods3}}
<li class="dropdown-header">
<cn>{{titleCH}}</cn>
<en>{{titleEN}}</en>
</li>
{{#each func}}
<li><a style="cursor: pointer;font-size: 12px;" onclick="setDropVal('{{../../menuId}}','{{ch}}','{{en}}','{{../../icon}}','{{../../type}}')">
<cn>{{ch}}</cn>
<en>{{en}}</en>
</a>
</li>
{{/each}}
<li class="divider"></li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</script>
<script>
var iconMap = {"my-ok":"ok", "my-9":"9", "my-8":"8", "my-7":"7", "my-6":"6", "my-5":"5", "my-4":"4", "my-3":"3", "my-2":"2", "my-1":"1", "my-0":"0",}
var iconArray = ['fa-power-off','fa-bars','fa-caret-up', 'fa-caret-left','fa-caret-right','fa-caret-down', 'fa-volume-down','fa-volume-up','fa-home','fa-clone', 'fa-reply','my-ok','my-0','my-1','my-2','my-3','my-4', 'my-5','my-6','my-7','my-8','my-9']
var iconSelect = "fa-power-off";
var remoteCode = "";
var wsocket = null;
var btnArray = [];
var delBtnId = -1;
var features = null;
var feaArray = [];
//注册helper
Handlebars.registerHelper("showIcon",function (value,options) {
var html = "";
if(value.match(/^fa-/)){
html = '<i class="fa '+value+'"></i>'
} else {
html = '<span style="font-weight: bold">'+iconMap[value]+'</span>'
}
return html;
})
//注册helper
Handlebars.registerHelper("handleHr",function (value,hh,options) {
var html = "";
if(value !== 0){
html = "<hr style=\"margin-top:"+hh+"px; margin-bottom: "+hh+"px;\"/>";
}
return html;
})
//注册helper
Handlebars.registerHelper("handleDrop",function (index,num,icon,ch,en,type,options) {
var nn = (index+1)*num;
features["ch"] = ch;
features["en"] = en;
features["menuId"] = "menu_"+icon+nn;
features["type"] = type;
features["icon"] = icon;
var tpl = $("#tpl2").html();
var template = Handlebars.compile(tpl);
var html = template(features);
return html;
})
function setDropVal(id,valCH,valEN,icon,type){
var html = "<cn>"+valCH+"</cn><en>"+valEN+"</en><span class='caret'></span>";
$("#"+id).html(html);
for(var i=0;i<feaArray.length;i++){
var config = feaArray[i];
if(config["used"]){
var btns = config["btns"];
for(var j=0;j<btns.length;j++){
var btn = btns[j];
if(btn["icon"] == icon){
if(type == "tap"){
btn["tapCH"] = valCH;
btn["tapEN"] = valEN;
}
if(type == "press"){
btn["pressCH"] = valCH;
btn["pressEN"] = valEN;
}
}
}
}
}
}
// Modal垂直居中
$("#myModal,#infoModal").on('show.bs.modal', function(){
var $this = $(this);
var $modal_dialog = $this.find('.modal-dialog');
// 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
$this.css('display', 'block');
$modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});
// Modal关闭
$("#myModal").on('hide.bs.modal', function(){
$("#addRemote").find(".fa").removeClass("hide");
$("#addRemote").find(".sp").addClass("hide");
$("#addHint").addClass("hide");
wsocket.close();
});
// 初始化websocket
function initWSocket() {
var wsuri = 'ws://' + location.hostname + '/api/remote/socket.io' // ws地址
wsocket = new WebSocket(wsuri)
wsocket.onopen = function () {
wsocket.send('bind')
};
wsocket.onmessage = function (msg) {
var data = JSON.parse(msg.data);
if(data.state === 0)
return;
remoteCode = data["high"]+data["low"];
var mark = false;
for(var i=0;i<btnArray.length;i++){
var btn = btnArray[i];
if(btn["remoteCode"] === remoteCode)
mark = true;
}
if(mark) {
htmlAlert("#alert", "danger", "<cn>重复按键,请重试！</cn><en>Repeat the key, Please try again!</en>", "", 3000);
return;
}
$('#myModal').modal({
keyboard: false,
show: true,
backdrop: "static"
});
};
wsocket.onerror = function () {
$("#addRemote").find(".fa").removeClass("hide");
$("#addRemote").find(".sp").addClass("hide");
$("#addHint").addClass("hide");
};
wsocket.onclose = function () {
$("#addRemote").find(".fa").removeClass("hide");
$("#addRemote").find(".sp").addClass("hide");
$("#addHint").addClass("hide");
};
}
function initRemoteBtns() {
var theme_tpl = $("#tpl").html();
var template = Handlebars.compile(theme_tpl);
var html = template(btnArray);
$("#remoteBtns").html(html);
}
function initFeatures() {
for(var i=0;i<feaArray.length;i++){
var config = feaArray[i];
if(config["used"]){
var tpl1 = $("#tpl1").html();
var tem = Handlebars.compile(tpl1);
var ht = tem(config["btns"]);
$("#featureItem").html(ht);
}
}
}
function deleteBtn(btnId) {
delBtnId = btnId;
$("#infoModal").modal({
keyboard: false,
show: true,
backdrop: "static"
});
}
function onDelRemoteBtn() {
var index = -1;
for(var i=0;i<btnArray.length;i++){
var btn = btnArray[i];
if(btn["btnId"] === delBtnId){
index = i;
}
}
btnArray.splice(index,1);
for(var i=0;i<btnArray.length;i++){
btnArray[i].btnNameCN = "按键"+(i+1);
btnArray[i].btnNameEN = "Button"+(i+1);
}
func("saveConfigFile",{path: "/config/misc/remote/remote.json",data: JSON.stringify(btnArray,null,2)},function (res) {
if(res["result"] === "OK"){
initRemoteBtns();
$('#infoModal').modal("hide");
for(var i=0;i<feaArray.length;i++){
var config = feaArray[i];
config["btns"].splice(index,1);
}
func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
if(res["result"] === "OK")
initFeatures();
})
}
})
}
function onNewRemoteBtn() {
var count = btnArray.length;
var obj = {
btnId:(count+1),
remoteCode:remoteCode,
btnNameCN:"按键 "+(count+1),
btnNameEN:"Button "+(count+1),
icon:iconSelect,
}
btnArray.push(obj);
func("saveConfigFile",{path: "/config/misc/remote/remote.json",data: JSON.stringify(btnArray,null,2)},function (res) {
if(res["result"] === "OK"){
initRemoteBtns();
$('#myModal').modal("hide");
for(var i=0;i<feaArray.length;i++){
var feaObj = {
icon: iconSelect,
code: remoteCode,
tapCH:"未启用",
tapEN:"None",
pressCH:"未启用",
pressEN:"None"
}
var config = feaArray[i];
config["btns"].push(feaObj);
}
func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
if(res["result"] === "OK")
initFeatures();
})
}
})
}
$("#addRemote").click(function () {
if($(this).find(".fa").hasClass("hide")) {
$(this).find(".fa").removeClass("hide");
$(this).find(".sp").addClass("hide");
$("#addHint").addClass("hide");
wsocket.close();
return;
}
$(this).find(".fa").addClass("hide");
$(this).find(".sp").removeClass("hide");
$("#addHint").removeClass("hide");
initWSocket();
});
$("#setProject").click(function () {
var id = $("#projectsCH").val();
for(var i=0;i<feaArray.length;i++){
var config = feaArray[i];
if(config["id"] === parseInt(id))
config["used"] = true;
else
config["used"] = false;
}
func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
if(res["result"] === "OK"){
rpc6("remote.updateConfig", [], function (data) {
initFeatures();
});
}
})
});
$("#projectsCH").change(function () {
var id = $("#projectsCH").val();
$("#projectsEN").val(id);
});
$("#projectsEN").change(function () {
var id = $("#projectsEN").val();
$("#projectsCH").val(id);
});
$("#saveProject").click(function () {
func("saveConfigFile",{path: "/config/misc/remote/remfea.json",data: JSON.stringify(feaArray,null,2)},function (res) {
if(res["result"] === "OK"){
rpc6("remote.updateConfig", [], function (data) {
htmlAlert("#alert", "success", "<cn>保存成功！</cn><en>Save success!</en>", "", 3000);
});
}
})
});
$('.btn-group>button').one("click",function(){
$('.icp-dd').iconpicker({
title: false,
icons: iconArray,
emptyIconValue: 'none',
});
}) ;
$('.icp-dd').on('iconpickerCreated', function(event){
for(var i=0;i<iconArray.length;i++){
var icon = iconArray[i];
if(icon.match(/^my-/)){
$("."+icon).html(iconMap[icon])
}
}
});
$('.icp-dd').on('iconpickerSetValue', function(event){
let cl = event.iconpickerValue;
if(cl.match(/^my-/)) {
$("#icon").html(iconMap[cl])
} else {
$("#icon").html("");
}
});
$('.icp-dd').on('iconpickerSelected', function(event){
iconSelect = event.iconpickerValue;
});
$( function () {
navIndex( 4 );
$.ajax({url:"/config/misc/remote/remote.json",success:function(data){
btnArray = data;
initRemoteBtns();
$.ajax({url:"/config/misc/remote/remods.json",success:function(data){
features = data;
var mods3 = new Array();
var func = new Array();
var obj = {
titleCH:"布局模块",
titleEN:"Layout",
func:func
}
mods3.push(obj);
features["mods3"] = mods3;
//加载自定义布局模块
$.ajax({url:"/config/defLays.json",success:function (data) {
//var func = new Array();
for(var i=0;i<data.length;i++){
var mark = false;
var layouts = data[i].layouts;
for(var j=0;j<layouts.length;j++) {
var id = layouts[j].id;
if(parseInt(id) >= 0){
mark = true;
break;
}
}
if(mark){
var lay = {
ch:data[i].layName,
en:data[i].layNameEn
}
func.push(lay);
}
}
}})
$.ajax({url:"/config/misc/remote/remfea.json",success:function(data){
feaArray = data;
initFeatures();
for(var i=0;i<feaArray.length;i++){
var config = feaArray[i];
var optionCH = new Option(config["nameCH"],config["id"]);
if(config["used"])
optionCH.selected = true;
$("#projectsCH").append(optionCH);
var optionEN = new Option(config["nameEN"],config["id"]);
if(config["used"])
optionEN.selected = true;
$("#projectsEN").append(optionEN);
}
}
});
}
});
}
});
});
</script>
<?php
include( "foot.php" );
?>