Commit 3c2992fc authored by Elminster2031's avatar Elminster2031 Committed by Jean-Baptiste Kempf

New LUA Web Interface

This patch removes the existing interface and replaces it with a cleaner more
user-friendly interface.

Screenshots are available here: http://www.archmageinc.com/vlcSigned-off-by: Jean-Baptiste Kempf's avatarJean-Baptiste Kempf <jb@videolan.org>
parent 9e23147f
......@@ -59,6 +59,7 @@
.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
......@@ -84,6 +85,8 @@
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-selecting { background: #FECA40; }
.ui-selected { background: #F39814; color: white; }
/* Icons
----------------------------------*/
......@@ -575,4 +578,4 @@ button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra pad
* http://docs.jquery.com/UI/Progressbar#theming
*/
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
\ No newline at end of file
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
<script language="javascript" type="text/javascript">
var video_types = new Array('avi','mp4','wmv','mov','swf','vob','mkv','mpg');
var audio_types = new Array('mp3','wav');
var browse_target = 'default';
function createElementLi(name,type,dir,ext){
var icon = type=="dir" && name=='..' ? 'Back-48.png' : (type=='dir' ? "Folder-48.png" : ($.inArray(ext,video_types)!=-1 ? "Video-48.png" : ($.inArray(ext,audio_types)!=-1 ? "Audio-48.png" : "Other-48.png")));
var open = type=="dir" ? "opendir='"+dir+"'" : (type=="file" ? "openfile='"+dir+"'" : "opendev='"+dir+"'");
var str = "<li class='system_icon ui-widget-content' "+open+" ><img src='images/"+icon+"' width='48px' height='48px' title='"+name+"' alt='"+name+"' style='border: none;background:none;'/><div style='font-size:10px;border:none;background:none;'>"+name+"</div></li>";
return str;
}
$(function(){
$('#window_browse').dialog({
autoOpen: false,
width: 600,
height: 650,
modal: true,
position: ['left','top'],
resizable: false,
buttons: {
"Open":function(){
$('li.ui-selected','#browse_elements').each(function(){
$(this).dblclick();
});
},
"Enqueue": function() {
$('li.ui-selected','#browse_elements').each(function(){
var path = this.getAttribute('opendir') ? this.getAttribute('opendir') : this.getAttribute('openfile');
switch(browse_target){
default:
sendCommand('command=in_enqueue&input='+encodeURI(path));
break;
}
});
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close")
}
}
});
});
</script>
<div id="window_browse" title="Media Browser">
<div style="height:500px;overflow: scroll;">
<ol id='browse_elements' selectable="selectable">
<li>Play List</li>
</ol>
</div>
</div>
\ No newline at end of file
<script language="javascript" type="text/javascript">
$(function(){
$('#stream_out_method').change(function(){
$('#output_options').empty();
switch($(this).val()){
case 'file':
var options = $('#file_options').clone();
break;
case 'http':
var options = $('#net_options').clone();
break;
case 'mmsh':
case 'rtp':
case 'udp':
var options = $('#net_options').clone();
$('#stream_out_file_',options).val('');
break;
}
$('[id]',options).each(function(){
$(this).attr('id',$(this).attr('id').substr(0,$(this).attr('id').length-1));
$(this).attr('name',$(this).attr('name').substr(0,$(this).attr('name').length-1));
});
$(options).css({
'visibility':'visible',
'display':'block'
})
$(options).appendTo('#output_options');
});
$('#stream_out_mux').change(function(){
if($(this).val()=='ffmpeg'){
$('#stream_out_mux_opts').val('{mux=flv}');
}else{
$('#stream_out_mux_opts').val('');
}
});
$('#window_create_stream').dialog({
autoOpen: false,
width:800,
modal: true,
position: ['left','top'],
buttons:{
"Create":function(){
var e = false;
$('input',$(this)).removeClass('ui-state-error');
$('#stream_error_container').css({
'visibility':'hidden',
'display':'none'
});
if(!$('#stream_name').val()){
$('#stream_name').addClass('ui-state-error');
e = true;
}
if(!$('#stream_input').val()){
$('#stream_input').addClass('ui-state-error');
e = true;
}
if($('#stream_out_method').val()!='file' && !$('#stream_out_port').val()){
$('#stream_out_port').addClass('ui-state-error');
e = true;
}
if($('#stream_out_method').val()!='file' && !$('#stream_out_dest').val()){
$('#stream_out_dest').addClass('ui-state-error');
e = true;
}
if($('#stream_out_method').val()=='file' && !$('#stream_out_filename').val()){
$('#stream_out_filename').addClass('ui-state-error');
e = true;
}
if(e){
$('#stream_error_message').empty();
$('#stream_error_message').append('One or more fields require attention.');
$('#stream_error_container').css({
'visibility':'visible',
'display':'block'
})
}else{
sendVLMCmd(buildStreamCode());
$(this).dialog('close');
}
},
"Cancel":function(){
$(this).dialog('close');
}
}
});
$('#button_input').click(function(){
browse_target = '#stream_input';
browse();
$('#window_browse').dialog('open');
});
$('#button_in_screen').click(function(){
$('#stream_input').val('screen://');
});
});
function buildStreamCode(){
var name = $('#stream_name').val().replace(' ','_');
var infile = $('#stream_input').val();
var vcodec = $('#stream_vcodec').val();
var vb = $('#stream_vb').val();
var fps = $('#stream_fps').val();
var scale = $('#stream_scale').val();
var dlace = $('#stream_deinterlace').is(':checked');
var acodec = $('#stream_acodec').val();
var ab = $('#stream_ab').val();
var srate = $('#stream_samplerate').val();
var channels = $('#stream_channels').val();
var scodec = $('#stream_scodec').val() && !$('#stream_soverlay').checked ? ','+$('#stream_scodec').val() : '';
var soverlay = $('#stream_soverlay').is(':checked') ? ',soverlay' : '';
var outmethod = $('#stream_out_method').val();
var mux = $('#stream_out_mux').val();
var muxoptions = $('#stream_out_mux_opts').val() ? '{'+$('#stream_out_mux_opts').val()+'}' : '';
if(outmethod=='file'){
var filename = $('#stream_out_filename').val();
}else{
var outport = $('#stream_out_port').val();
var outdest = $('#stream_out_dest').val();
var outfile = $('#stream_out_file').val();
}
var dest = outmethod=='file' ? filename : (outfile ? outdest+':'+outport+'/'+outfile : outdest+':'+outport);
var inCode = 'new '+name+' broadcast enabled input "'+infile+'" ';
var transCode = 'output #transcode{vcodec='+vcodec+',vb='+vb+',fps='+fps+',scale='+scale+',acodec='+acodec+',ab='+ab+',samplerate='+srate+',channels='+channels+scodec+soverlay+'}';
var outCode = ':std{access='+outmethod+',mux='+mux+muxoptions+',dst='+dest+'}';
return inCode+transCode+outCode;
}
</script>
<div id="window_create_stream" title="Create Stream">
<table width="100%">
<tr>
<td style="text-align:right" valign="top">
<h5>Stream Name</h5>
</td>
<td colspan="5" valign="top">
<input type="text" name="stream_name" id="stream_name" value=""/>
</td>
</tr>
<tr>
<th colspan="2" valign="top">
<h5>Video</h5>
</th>
<th colspan="2" valign="top">
<h5>Audio</h5>
</th>
<th colspan="2" valign="top">
<h5>Subtitles</h5>
</th>
<th colspan="2" valign="top">
<h5>Output</h5>
</th>
</tr>
<tr>
<td style="text-align:right" valign="top">Video Codec</td>
<td valign="top">
<select name="stream_vcodec" id="stream_vcodec">
<option value="FLV1">FLV1</option>
<option value="mp1v">mp1v</option>
<option value="mp2v">mp2v</option>
<option value="mp4v">mp4v</option>
<option value="DIV1">DIV1</option>
<option value="DIV2">DIV2</option>
<option value="DIV3">DIV3</option>
<option value="H263">H263</option>
<option value="H264">H264</option>
<option value="WMV1">WMV1</option>
<option value="WMV2">WMV2</option>
<option value="MJPG">MJPG</option>
<option value="theo">theo</option>
</select>
</td>
<td style="text-align:right" valign="top">Audio Codec</td>
<td valign="top">
<select name="stream_acodec" id="stream_acodec">
<option value="mp3">mp3</option>
<option value="mpga">mpga</option>
<option value="mp2a">mp2a</option>
<option value="mp4a">mp4a</option>
<option value="a52">a52</option>
<option value="vorb">vorb</option>
<option value="flac">flac</option>
<option value="spx">spx</option>
<option value="s16l">s16l</option>
<option value="fl32">fl32</option>
</select>
</td>
<td style="text-align:right" valign="top">Subtitle Codec</td>
<td valign="top">
<select name="stream_scodec" id="stream_scodec">
<option value="">none</option>
<option value="dvbs">dvbs</option>
</select>
</td>
<td style="text-align:right" valign="top">Output Method</td>
<td valign="top">
<select name="stream_out_method" id="stream_out_method">
<option value="http">HTTP</option>
<option value="file">File</option>
<option value="mmsh">MMSH</option>
<option value="rtp">RTP</option>
<option value="udp">UDP</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right" valign="top">Video Bit Rate</td>
<td valign="top">
<select name="stream_vb" id="stream_vb">
<option value="4096">4096</option>
<option value="3072">3072</option>
<option value="2048">2048</option>
<option value="1024">1024</option>
<option value="768">768</option>
<option value="512">512</option>
<option value="384">384</option>
<option value="256">256</option>
<option value="192">192</option>
<option value="128">128</option>
<option value="96">96</option>
<option value="64">64</option>
<option value="32">32</option>
<option value="16">16</option>
</select>
</td>
<td style="text-align:right" valign="top">Audio Bit Rate</td>
<td valign="top">
<select name="stream_ab" id="stream_ab">
<option value="512">512</option>
<option value="384">384</option>
<option value="256">256</option>
<option value="192">192</option>
<option value="128">128</option>
<option value="96">96</option>
<option value="64">64</option>
<option value="32">32</option>
<option value="16">16</option>
</select>
</td>
<td style="text-align:right" valign="top">Overlay</td>
<td valign="top">
<input type="checkbox" name="stream_soverlay" id="stream_soverlay" value="1" />
</td>
<td style="text-align:right" valign="top">Multiplexer</td>
<td valign="top">
<select name="stream_out_mux" id="stream_out_mux">
<option value="ts">MPEG TS</option>
<option value="ps">MPEG PS</option>
<option value="mpeg1">MPEG 1</option>
<option value="ogg">OGG</option>
<option value="asf">ASF</option>
<option value="mp4">MP4</option>
<option value="mov">MOV</option>
<option value="wav">WAV</option>
<option value="raw">Raw</option>
<option value="ffmpeg" selected="selected">FFMPEG</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right" valign="top">Video FPS</td>
<td valign="top">
<select name="stream_fps" id="stream_fps">
<option value="300">300</option>
<option value="120">120</option>
<option value="100">100</option>
<option value="72">72</option>
<option value="60">60</option>
<option value="50">50</option>
<option value="48">48</option>
<option value="30">30</option>
<option value="25" selected="selected">25</option>
<option value="24">24</option>
</select>
</td>
<td style="text-align:right" valign="top">Audio Sample Rate</td>
<td valign="top">
<select name="stream_samplerate" id="stream_samplerate">
<option value="192000">192 KHz</option>
<option value="96000">96 KHz</option>
<option value="50000">50 KHz</option>
<option value="48000">48 KHz</option>
<option value="44100" selected="selected">44 KHz</option>
<option value="32000">32 KHz</option>
<option value="22050">22 KHz</option>
<option value="16000">16 KHz</option>
<option value="11025">11 KHz</option>
<option value="8000">8 KHz</option>
</select>
</td>
<td colspan="2" valign="top">&nbsp;</td>
<td style="text-align:right" valign="top">MUX Options</td>
<td valign="top">
<input type="text" name="stream_out_mux_opts" id="stream_out_mux_opts" value="{mux=flv}" />
</td>
</tr>
<tr>
<td style="text-align:right" valign="top">Video Scale</td>
<td valign="top">
<select name="stream_scale" id="stream_scale">
<option value="0.25">25%</option>
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option selected="selected" value="1">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="1.75">175%</option>
<option value="2">200%</option>
</select>
</td>
<td style="text-align:right" valign="top">Audio Channels</td>
<td valign="top">
<select name="stream_channels" id="stream_channels" >
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="4">4</option>
<option value="6">6</option>
</select>
</td>
<td colspan="2" valign="top">&nbsp;</td>
<td colspan="2" rowspan="2" valign="top">
<div id="output_options">
<table>
<tr>
<td style="text-align:right" valign="top">Output Port</td>
<td valign="top"><input type="text" name="stream_out_port" id="stream_out_port" value="8081" /></td>
</tr>
<tr>
<td style="text-align:right" valign="top">Output Destination</td>
<td><input type="text" name="stream_out_dest" id="stream_out_dest" value="0.0.0.0" /></td>
</tr>
<tr>
<td style="text-align:right" valign="top">Output File</td>
<td valign="top"><input type="text" name="stream_out_file" id="stream_out_file" value="stream.flv" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top" style="text-align:right">Deinterlace</td>
<td valign="top">
<input type="checkbox" name="stream_deinterlace" id="stream_deinterlace" value="1" />
</td>
<td colspan="2" valign="top">&nbsp;</td>
<td colspan="2" valign="top">&nbsp;</td>
</tr>
<tr>
<td style="text-align:right" colspan="2" valign="top">
Input Media
</td>
<td colspan="6" valign="top">
<input type="text" name="stream_input" id="stream_input" value="" size="50" />
<div id="button_input" class="button icon ui-widget ui-state-default" title="Media File" opendialog="window_browse"><span class="ui-icon ui-icon-eject"></span></div>
<div id="button_in_screen" class="button icon ui-widget ui-state-default" title="Capture Screen" ><span class="ui-icon ui-icon-contact"></span></div>
</td>
</tr>
</table>
<div class="ui-widget" id="stream_error_container" style="display:none;visibility: hidden;">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Error:</strong> <span id="stream_error_message">Sample ui-state-error style.</span></p>
</div>
</div>
</div>
<div id="net_options" style="display:none;visibility: hidden;">
<table>
<tr>
<td style="text-align:right" valign="top">Output Port</td>
<td valign="top"><input type="text" name="stream_out_port_" id="stream_out_port_" value="8081" /></td>
</tr>
<tr>
<td style="text-align:right" valign="top">Output Destination</td>
<td valign="top"><input type="text" name="stream_out_dest_" id="stream_out_dest_" value="0.0.0.0" /></td>
</tr>
<tr>
<td style="text-align:right" valign="top">Output File</td>
<td valign="top"><input type="text" name="stream_out_file_" id="stream_out_file_" value="stream.flv" /></td>
</tr>
</table>
</div>
<div id="file_options" style="display:none;visibility: hidden;">
<table>
<tr>
<td style="text-align:right" valign="top">File Name</td>
<td valign="top"><input type="text" name="stream_out_filename_" id="stream_out_filename_"/></td>
</tr>
</table>
</div>
\ No newline at end of file
<script language="javascript" type="text/javascript">
$(function(){
$('#window_mosaic').dialog({
autoOpen: false,
width: 800,
maxWidth: 1000,
minWidth: 800,
minHeight: 500,
modal: true,
position: ['left','top'],
buttons: {
"Create": function() {
$(this).dialog("close");
},
"Cancel" : function(){
$(this).dialog("close")
}
}
});
$('#mosaic_bg').resizable({
maxWidth: 780,
ghost: true
});
$('#mosaic_tiles').draggable({
maxWidth: 780,
handle: 'h3',
containment: [13,98,99999999,99999999],
drag:function(event,ui){
var xoff = ui.offset.left - $('#mosaic_bg').offset().left;
var yoff = ui.offset.top - $('#mosaic_bg').offset().top-17;
$('#mosaic_xoff').val(xoff);
$('#mosaic_yoff').val(yoff);
}
});
$('input','#mosaic_options').change(setMosaic);
setMosaic();
});
function setMosaic(){
var rows = Number($('#mosaic_rows').val());
var cols = Number($('#mosaic_cols').val());
var n = 0;
$('#mosaic_tiles').empty()
$('#mosaic_tiles').append('<tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>');
for(var i=0;i<rows;i++){
$('#mosaic_tiles').append('<tr>');
for(var j=0;j<cols;j++){
$('tr:last','#mosaic_tiles').append('<td class="mosaic">');
$('td:last','#mosaic_tiles').append('<div id="mosaic_open__'+n+'" class="button icon ui-widget ui-state-default" title="Open Media" style="margin-top:49%"><span class="ui-icon ui-icon-eject"></span></div>');
n++;
}
}
$('.mosaic').resizable({
alsoResize: '.mosaic',
resize:function(event,ui){
$('#mosaic_width').val(ui.size.width);
$('#mosaic_height').val(ui.size.height);
$('[id^=mosaic_open]').css({
'margin-top': Number($('#mosaic_height').val()/2)
});
}
});
$('.mosaic').css({
'background': '#33FF33',
'width': Number($('#mosaic_width').val()),
'height':Number($('#mosaic_height').val()),
'text-align': 'center',
'float' : 'left',
'border' : '1px solid #990000',
'margin-left': Number($('#mosaic_rbord').val()),
'margin-right': Number($('#mosaic_rbord').val()),
'margin-top': Number($('#mosaic_cbord').val()),
'margin-bottom': Number($('#mosaic_cbord').val())
});
$('[id^=mosaic_open_]').each(function(){
$(this).css({
'margin-top': Number($('#mosaic_height').val()/2)
});
$(this).click(function(){
browse_target = '#'+$(this).attr('id');
get_dir();
$('#window_browse').dialog('open');
});
});
$('.button').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
}
</script>
<div id="window_mosaic" title="Create Mosaic">
<table id="mosaic_options">
<tr>
<td style="text-align:right">Rows:</td>
<td>
<input type="text" name="mosaic_rows" id="mosaic_rows" size="3" value="2"/>
</td>
<td style="text-align:right">x offset</td>
<td>
<input type="text" name="mosaic_xoff" id="mosaic_xoff" size="3" value="0" disabled="disabled"/>
</td>
<td style="text-align:right">row border</td>
<td>
<input type="text" name="mosaic_rbord" id="mosaic_rbord" size="3" value="5"/>
</td>
<td style="text-align:right">width</td>
<td>
<input type="text" name="mosaic_width" id="mosaic_width" size="3" value="100" disabled="disabled"/>
</td>
</tr>
<tr>
<td style="text-align:right">Columns:</td>
<td>
<input type="text" name="mosaic_cols" id="mosaic_cols" size="3" value="2"/>
</td>
<td style="text-align:right">y offset</td>
<td>
<input type="text" name="mosaic_yoff" id="mosaic_yoff" size="3" value="0" disabled="disabled"/>
</td>
<td style="text-align:right">column border</td>
<td>
<input type="text" name="mosaic_cbord" id="mosaic_cbord" size="3" value="5"/>
</td>
<td style="text-align:right">height</td>
<td>
<input type="text" name="mosaic_height" id="mosaic_height" size="3" value="100" disabled="disabled"/>
</td>
</tr>
</table>
<div id="mosaic_bg" class="ui-widget-content" style="background: #3333FF;width:400px; height:300px;text-align: center; vertical-align: middle;">
<h3 style="margin:0px;font-weight:normal" class="ui-widget-header">Background</h3>
<table id="mosaic_tiles" class="ui-widget-content" cellpadding="0" cellspacing="0">
<tr><td colspan="99"><h3 style="margin:0px;cursor:move; font-weight:normal" class="ui-widget-header">Mosaic Tiles</h3></td></tr>
<tr>
<td class="mosaic"></td>
<td class="mosaic"></td>
</tr>
<tr>
<td class="mosaic"></td>
<td class="mosaic"></td>
</tr>
</table>
</div>
</div>
\ No newline at end of file
<script language="javascript" type="text/javascript">
$(function(){
$('#window_offset').dialog({
autoOpen: false,
minWidth: 400,
position: ['left','top'],
buttons:{
"Close":function(){
$(this).dialog("close");
}
}
});
$( "#rateSlider" ).slider({
range: "min",
value: 1,
min: 1,
max: 10,
step: 0.25,
stop: function( event, ui ) {
sendCommand({
'command':'rate',
'val':(ui.value)
})
},
slide: function(event,ui){
$('#currentRate').empty();
$('#currentRate').append(ui.value+'x');
}
});
$( "#audioSlider" ).slider({
range: "min",
value: 0,
min: -10,
max: 10,
step: 0.25,
stop: function( event, ui ) {
sendCommand({
'command':'audiodelay',
'val':(ui.value)
})
},
slide: function(event,ui){
$('#currentAudioDelay').empty();
$('#currentAudioDelay').append(ui.value+'s');
}
});
$( "#subtitleSlider" ).slider({
range: "min",
value: 0,
min: -10,
max: 10,
step: 0.25,
stop: function( event, ui ) {
sendCommand({
'command':'subdelay',
'val':(ui.value)
})
},
slide: function(event,ui){
$('#currentSubtitleDelay').empty();
$('#currentSubtitleDelay').append(ui.value+'s');
}
});
});
</script>
<div id="window_offset" title="Offset Configuration">
<div>Playback Rate</div>
<div id="rateSlider" title="Playback Rate"></div>
<div id="currentRate" class="dynamic">1x</div>
<br/>
<div>Audio Delay</div>
<div id="audioSlider" title="Audio Delay"></div>
<div id="currentAudioDelay" class="dynamic">0s</div>
<br/>