linkpi_firmware_history/rootfs/link/web/test.html

152 lines
5.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<title>LinkPi</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Bootstrap -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/vendor/switch/bootstrap-switch.css" rel="stylesheet">
<link href="/js/confirm/jquery-confirm.min.css" rel="stylesheet"/>
<link href="/vendor/slider/css/bootstrap-slider.min.css" rel="stylesheet" />
<link href="/vendor/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
<link href="/css/my.css" rel="stylesheet">
<link rel="stylesheet" id="langcss">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.jsonrpcclient.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/global.js"></script>
<style>
.thumbnail {
margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="container-fluid main">
<div class="row" id="preview">
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail"> <img src="...">
<div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
<div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
</div>
</div>
</div>
<button id="reset" type="button" class="btn btn-warning">
<cn>恢复出厂设置</cn>
<en>Reset default</en>
</button>
<script>
$( function () {
navIndex( 0 );
var first = true;
function getVolume() {
rpc( "enc.getVolume", null, function ( data ) {
setTimeout(getVolume,200);
for ( var i = 0; i < data.length && i<9; i++ ) {
$( "#preview #L" ).eq( i ).css( "width", (data[i].L*100/96)+"%" );
$( "#preview #R" ).eq( i ).css( "width", (data[i].R*100/96)+"%" );
}
} );
}
function show() {
rpc( "enc.snap", null, function ( ret ) {
setTimeout(show,500);
for ( var i = 0; i < 9; i++ ) {
$( "#preview img" ).eq( i ).attr( "src", "/snap/snap" + i + ".jpg?rnd=" + Math.random() );
}
} );
}
var config;
$.getJSON( "config/config.json", function ( data ) {
config = data;
} );
$(".thumbnail").each(function(index,obj){
$(obj).click(function(){
config[config.length-1].output.src=index;
config[config.length-1].srcA=[index];
rpc( "enc.update", [ JSON.stringify( config, null, 2 ) ]);
});
});
getVolume();
show();
$( "#reset" ).click( function ( e ) {
func( "resetCfg" );
});
} );
</script>
</div>
</body>
</html>