248 lines
10 KiB
HTML
248 lines
10 KiB
HTML
<html style="overflow-y: auto;">
|
|
<head>
|
|
<script type="text/javascript" src="jquery.js"></script>
|
|
|
|
<link type="text/css" href="jquery.ui.custom.css" rel="stylesheet" />
|
|
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
|
|
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
|
|
<script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
|
|
|
|
<link type="text/css" rel="stylesheet" href="JQuerySpinBtn.css" />
|
|
<script type="text/javascript" src="JQuerySpinBtn.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$("#tabs").tabs();
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
//top.resizeTo($(window).width(), $(document).height() + (top.outerHeight - $(window).height()));
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body style="overflow-y: auto;">
|
|
<script type="text/javascript">
|
|
|
|
function setControl(dest, plugin, id, group, value) {
|
|
$.get('./?action=command&dest=' + dest +
|
|
'&plugin=' + plugin+
|
|
'&id='+ id +
|
|
'&group='+ group +
|
|
'&value=' + value );
|
|
}
|
|
|
|
function setControl_bool(dest, plugin, id, group, value) {
|
|
if (value == false)
|
|
setControl(dest, plugin, id, group, 0);
|
|
else
|
|
setControl(dest, plugin, id, group, 1);
|
|
}
|
|
|
|
function setControl_string(dest, plugin, id, group, value) {
|
|
if (value.length < minlength) {
|
|
alert("The input string has to be least"+minlength+" characters!");
|
|
return;
|
|
}
|
|
$.get('./?action=command&dest=' + dest +
|
|
'&plugin=' + plugin+
|
|
'&id='+ id +
|
|
'&group='+ group +
|
|
'&value=' + value ,
|
|
function(data){
|
|
alert("Data Loaded: " + data);
|
|
});
|
|
}
|
|
|
|
function setResolution(plugin, controlId, group, value) {
|
|
$.get('./?action=command&dest=0' + // resolution command always goes to the input plugin
|
|
'&plugin=' + plugin+
|
|
'&id'+ controlId +
|
|
'&group=1' + // IN_CMD_RESOLUTION == 1,
|
|
'&value=' + value,
|
|
function(data){
|
|
if (data == 0) {
|
|
$("#statustd").text("Success");
|
|
} else {
|
|
$("#statustd").text("Error: " + data);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
function addControl(plugin_id, suffix) {
|
|
var dest = suffix=="in"?0:1;
|
|
$.getJSON(suffix+"put_"+plugin_id+".json",
|
|
function(data) {
|
|
$.each(data.controls, function(i,item){
|
|
$('<tr/>').attr("id", "tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id).appendTo("#controltable_"+suffix+"-"+plugin_id);
|
|
// BUTTON type controls does not have a label
|
|
if (item.type == 4) {
|
|
$("<td/>").appendTo("#tr-"+item.id);
|
|
} else {
|
|
if (item.type == 6) { // Class type controls
|
|
$("<td/>").text(item.name).attr("style", "font-weight:bold;").appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
|
|
return;
|
|
} else {
|
|
$("<td/>").text(item.name).appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
|
|
}
|
|
}
|
|
|
|
$("<td/>").attr("id", "td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id)
|
|
.appendTo("#tr_"+suffix+"_"+plugin_id+"_"+item.group+"_"+item.id);
|
|
if((item.type == 1) || (item.type == 5)) { // integer type controls
|
|
if ((item.id == 10094852) && (item.group == 1) && (item.dest == 0)) { //V4L2_CID_PAN_RELATIVE
|
|
$("<button/>")
|
|
.attr("type", "button")
|
|
.attr("style", "width: 50%; height: 100%;")
|
|
.text("<")
|
|
.click(function(){setControl(dest, plugin_id, item.id, item.group, 200);})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
$("<button/>")
|
|
.attr("type", "button")
|
|
.attr("style", "width: 50%; height: 100%;")
|
|
.text(">")
|
|
.click(function(){setControl(dest, plugin_id, item.id, item.group, -200);})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else if ((item.id == 10094853) &&
|
|
(item.group == 1) &&
|
|
(item.dest == 0)){ // V4L2_CID_TILT_RELATIVE
|
|
$("<button/>")
|
|
.attr("type", "button")
|
|
.attr("style", "width: 50%; height: 100%;")
|
|
.text("^")
|
|
.click(function(){setControl(dest, plugin_id, item.id, item.group, -200);})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
$("<button/>")
|
|
.attr("type", "button")
|
|
.attr("style", "width: 50%; height: 100%;")
|
|
.text("ˇ")
|
|
.click(function(){setControl(dest, plugin_id, item.id, item.group, 200);})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else { // another non spec control
|
|
var options = {min: item.min, max: item.max, step: item.step,}
|
|
$("<input/>")
|
|
.attr("value", item.value)
|
|
.attr("id", "spinbox-"+item.id)
|
|
.SpinButton(options)
|
|
.bind("valueChanged", function() {setControl(dest, plugin_id, item.id, item.group, $(this).val());})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
}
|
|
} else if (item.type == 2) { // boolean type controls
|
|
if (item.value == "1")
|
|
$("<input/>")
|
|
.attr("type", "checkbox")
|
|
.attr("checked", "checked")
|
|
.change(function(){setControl_bool(dest, plugin_id, item.id, item.group, ($(this).attr("checked")?1:0));})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
else
|
|
$("<input/>")
|
|
.attr("type", "checkbox")
|
|
.change(function(){setControl_bool(dest, plugin_id, item.id, item.group, ($(this).attr("checked")?1:0));})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else if (item.type == 7) { // string type controls
|
|
$("<input/>").attr("value", item.value).appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else if (item.type == 3) { // menu
|
|
$("<select/>")
|
|
.attr("name", "select-"+item.id)
|
|
.attr("id", "menu-"+item.id)
|
|
.attr("style", "width: 100%;")
|
|
.change(function(){setControl(dest, plugin_id, item.id, item.group, $(this).val());})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
$.each(item.menu, function(val, text) {
|
|
if (item.value == val) {
|
|
$("#menu-"+item.id).append($('<option></option>').attr("selected", "selected").val(val).html(text));
|
|
} else {
|
|
$("#menu-"+item.id).append($('<option></option>').val(val).html(text));
|
|
}
|
|
});
|
|
} else if (item.type == 4) { // button type
|
|
$("<button/>")
|
|
.attr("type", "button")
|
|
.attr("style", "width: 100%; height: 100%;")
|
|
.text(item.name)
|
|
.click(function(){setControl(dest, plugin_id, item.id, item.group, 0);})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else if (item.type == 7) { // string type
|
|
$("<input/>")
|
|
.attr("type", "text")
|
|
.attr("maxlength", item.max)
|
|
.change(function(){setControl_string(dest, plugin_id, item.id, item.group, $(this).text());})
|
|
.appendTo("#td_ctrl_"+suffix+"_"+plugin_id+"_"+item.group+"-"+item.id);
|
|
} else {
|
|
alert("Unknown control type: "+item.type);
|
|
}
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
$.getJSON("program.json",
|
|
function(data) {
|
|
$.each(data.inputs,
|
|
function(i,input){
|
|
$("<li/>").attr("id", "li_in-"+input.id).appendTo("#ul_tabs");
|
|
$("<a/>").attr("href", "#controldiv_in-"+input.id)
|
|
.text(input.name).appendTo("#li_in-"+input.id);
|
|
$("<div/>").attr("id", "controldiv_in-"+input.id).appendTo("#tabs");
|
|
$("<table/>").attr("id", "controltable_in-"+input.id).appendTo("#controldiv_in-"+input.id);
|
|
}
|
|
)
|
|
|
|
$.each(data.outputs,
|
|
function(i,output){
|
|
$("<li/>").attr("id", "li_out-"+output.id).appendTo("#ul_tabs");
|
|
$("<a/>").attr("href", "#controldiv_out-"+output.id)
|
|
.text(output.name).appendTo("#li_out-"+output.id);
|
|
$("<div/>").attr("id", "controldiv_out-"+output.id).appendTo("#tabs");
|
|
$("<table/>").attr("id", "controltable_out-"+output.id).appendTo("#controldiv_out-"+output.id);
|
|
}
|
|
)
|
|
|
|
$.each(data.inputs,
|
|
function(i,input){
|
|
addControl(input.id, "in");
|
|
}
|
|
)
|
|
|
|
$.each(data.outputs,
|
|
function(i,output){
|
|
addControl(output.id, "out");
|
|
}
|
|
)
|
|
|
|
$( "#tabs" ).tabs();
|
|
}
|
|
);
|
|
|
|
$(function() {
|
|
|
|
});
|
|
/*$.getJSON("input.json",
|
|
function(data) {
|
|
$.each(data.formats, function(i,item){
|
|
if (item.current == "true") {
|
|
$("<select/>")
|
|
.attr("id", "select-resolution")
|
|
.attr("style", "width: 100%;")
|
|
.change(function(){setResolution($(this).val());})
|
|
.appendTo("#resolutions");
|
|
$.each(item.resolutions, function(val,res){
|
|
if (item.currentResolution == val) {
|
|
$("#select-resolution").append($('<option></option>').attr("selected", "selected").val(val).html(res));
|
|
} else {
|
|
$("#select-resolution").append($('<option></option>').val(val).html(res));
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});*/
|
|
</script>
|
|
|
|
<div id="tabs">
|
|
<ul id="ul_tabs"></ul>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|