mjpg-streamer/www/control.htm

248 lines
10 KiB
HTML
Raw Normal View History

2024-10-15 15:50:29 +08:00
<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>