mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
UI fixes/updates (#468)
* fix logging display * hue wizard add usrname * fix restartAction sometimes not executed * remove configRevision * remove v4l2 grabMode(2d/3d) * remove latchTime from configs not in main led device schema * config comment: all grabbers can crop * remove smoothing delay&pause for effects * finalize disable effects ui * fix empty effect selects * remote page add 2D/3D videoMode * add blackborder texts * Update EffectEngine.cpp
This commit is contained in:
@@ -1,18 +1,18 @@
|
||||
$(document).ready(function() {
|
||||
performTranslation();
|
||||
|
||||
|
||||
var oldEffects = [];
|
||||
var cpcolor = '#B500FF';
|
||||
var mappingList = serverSchema.properties.color.properties.imageToLedMappingType.enum;
|
||||
var duration = 0;
|
||||
var rgb = {r:255,g:0,b:0};
|
||||
|
||||
|
||||
//create html
|
||||
createTable('ssthead', 'sstbody', 'sstcont');
|
||||
$('.ssthead').html(createTableRow([$.i18n('remote_input_origin'), $.i18n('remote_input_owner'), $.i18n('remote_input_priority'), $.i18n('remote_input_status')], true, true));
|
||||
createTable('crthead', 'crtbody', 'adjust_content', true);
|
||||
|
||||
|
||||
|
||||
|
||||
//create introduction
|
||||
if(showOptHelp)
|
||||
{
|
||||
@@ -21,12 +21,13 @@ $(document).ready(function() {
|
||||
createHint("intro", $.i18n('remote_adjustment_intro', $.i18n('remote_losthint')), "adjust_content");
|
||||
createHint("intro", $.i18n('remote_components_intro', $.i18n('remote_losthint')), "comp_intro");
|
||||
createHint("intro", $.i18n('remote_maptype_intro', $.i18n('remote_losthint')), "maptype_intro");
|
||||
createHint("intro", $.i18n('remote_videoMode_intro', $.i18n('remote_losthint')), "videomode_intro");
|
||||
}
|
||||
|
||||
|
||||
//color adjustment
|
||||
var sColor = sortProperties(serverSchema.properties.color.properties.channelAdjustment.items.properties)
|
||||
var values = serverInfo.adjustment[0]
|
||||
|
||||
|
||||
for(key in sColor)
|
||||
{
|
||||
if(sColor[key].key != "id" && sColor[key].key != "leds")
|
||||
@@ -47,18 +48,18 @@ $(document).ready(function() {
|
||||
{
|
||||
property = '<div class="checkbox"><input id="cr_'+sColor[key].key+'" type="checkbox" value="'+value+'"/><label></label></div>';
|
||||
$('.crtbody').append(createTableRow([title, property], false, true));
|
||||
|
||||
|
||||
$('#cr_'+sColor[key].key).off().on('change', function(e){
|
||||
requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), e.currentTarget.checked);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
if(sColor[key].key == "brightness" || sColor[key].key == "brightnessCompensation" || sColor[key].key == "backlightThreshold")
|
||||
if(sColor[key].key == "brightness" || sColor[key].key == "brightnessCompensation" || sColor[key].key == "backlightThreshold")
|
||||
property = '<div class="input-group"><input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0" max="100" step="10" value="'+value+'"/><span class="input-group-addon">'+$.i18n("edt_append_percent")+'</span></div>';
|
||||
else
|
||||
property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.1" max="4.0" step="0.1" value="'+value+'"/>';
|
||||
|
||||
|
||||
$('.crtbody').append(createTableRow([title, property], false, true));
|
||||
$('#cr_'+sColor[key].key).off().on('change', function(e){
|
||||
valValue(this.id,this.value,this.min,this.max);
|
||||
@@ -79,12 +80,12 @@ $(document).ready(function() {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function sendColor()
|
||||
{
|
||||
requestSetColor(rgb.r, rgb.g, rgb.b,duration);
|
||||
}
|
||||
|
||||
|
||||
function updateRemote()
|
||||
{
|
||||
if ($('#componentsbutton').length == 0)
|
||||
@@ -95,13 +96,14 @@ $(document).ready(function() {
|
||||
{
|
||||
updateInputSelect();
|
||||
updateLedMapping();
|
||||
updateVideoMode();
|
||||
updateComponents();
|
||||
updateEffectlist();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateInputSelect()
|
||||
{
|
||||
{
|
||||
$('.sstbody').html("");
|
||||
var data = "";
|
||||
var prios = serverInfo.priorities
|
||||
@@ -114,7 +116,7 @@ $(document).ready(function() {
|
||||
origin = origin.split("@");
|
||||
var ip = origin[1];
|
||||
origin = origin[0];
|
||||
|
||||
|
||||
var owner = prios[i].owner;
|
||||
var active = prios[i].active;
|
||||
var visible = prios[i].visible;
|
||||
@@ -127,7 +129,7 @@ $(document).ready(function() {
|
||||
|
||||
if (active)
|
||||
btn_type = "primary";
|
||||
|
||||
|
||||
if(priority > 254)
|
||||
continue;
|
||||
if(priority < 254 && (compId == "EFFECT" || compId == "COLOR") )
|
||||
@@ -164,15 +166,15 @@ $(document).ready(function() {
|
||||
owner = $.i18n('general_comp_UDPLISTENER');
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
if(duration && compId != "GRABBER" && compId != "PROTOSERVER")
|
||||
owner += '<br/><span style="font-size:80%; color:grey;">'+$.i18n('remote_input_duration')+' '+duration.toFixed(0)+$.i18n('edt_append_s')+'</span>';
|
||||
|
||||
|
||||
var btn = '<button id="srcBtn'+i+'" type="button" '+btn_state+' class="btn btn-'+btn_type+' btn_input_selection" onclick="requestSetSource('+priority+');">'+btn_text+'</button>';
|
||||
|
||||
|
||||
if((compId == "EFFECT" || compId == "COLOR") && priority < 254)
|
||||
btn += '<button type="button" class="btn btn-sm btn-danger" style="margin-left:10px;" onclick="requestPriorityClear('+priority+');"><i class="fa fa-close"></button>';
|
||||
|
||||
|
||||
if(btn_type != 'default')
|
||||
$('.sstbody').append(createTableRow([origin, owner, priority, btn], false, true));
|
||||
}
|
||||
@@ -182,15 +184,15 @@ $(document).ready(function() {
|
||||
var btn_call_state = (clearAll? "enabled" : "disabled");
|
||||
$('#auto_btn').html('<button id="srcBtn'+i+'" type="button" '+btn_auto_state+' class="btn '+btn_auto_color+'" style="margin-right:5px;display:inline-block;" onclick="requestSetSource(\'auto\');">'+$.i18n('remote_input_label_autoselect')+' ('+btn_auto_text+')</button>');
|
||||
$('#auto_btn').append('<button type="button" '+btn_call_state+' class="btn btn-danger" style="display:inline-block;" onclick="requestClearAll();">'+$.i18n('remote_input_clearall')+'</button>');
|
||||
|
||||
|
||||
var max_width=100;
|
||||
$('.btn_input_selection').each(function() {
|
||||
if ($(this).innerWidth() > max_width)
|
||||
max_width = $(this).innerWidth();
|
||||
});
|
||||
$('.btn_input_selection').css("min-width",max_width+"px");
|
||||
$('.btn_input_selection').css("min-width",max_width+"px");
|
||||
}
|
||||
|
||||
|
||||
function updateLedMapping()
|
||||
{
|
||||
mapping = serverInfo.ledMAppingType;
|
||||
@@ -219,7 +221,7 @@ $(document).ready(function() {
|
||||
comp_name = components[idx].name;
|
||||
comp_btn_id = "comp_btn_"+comp_name;
|
||||
comp_goff = serverInfo.hyperion.off? "disabled" : "enabled";
|
||||
|
||||
|
||||
// create btn if not there
|
||||
if ($("#"+comp_btn_id).length == 0)
|
||||
{
|
||||
@@ -236,7 +238,7 @@ $(document).ready(function() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateEffectlist()
|
||||
{
|
||||
var newEffects = serverInfo.effects;
|
||||
@@ -245,7 +247,7 @@ $(document).ready(function() {
|
||||
$('#effect_select').html('<option value="__none__"></option>');
|
||||
var usrEffArr = [];
|
||||
var sysEffArr = [];
|
||||
|
||||
|
||||
for(i = 0; i < newEffects.length; i++) {
|
||||
var effectName = newEffects[i].name;
|
||||
if(!/^\:/.test(newEffects[i].file)){
|
||||
@@ -260,20 +262,36 @@ $(document).ready(function() {
|
||||
oldEffects = newEffects;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function updateVideoMode()
|
||||
{
|
||||
videoModes = ["2D","3DSBS","3DTAB"];
|
||||
currVideoMode = serverInfo.grabbers.videomode;
|
||||
|
||||
$('#videomodebtns').html("");
|
||||
for(var ix = 0; ix < videoModes.length; ix++)
|
||||
{
|
||||
if(currVideoMode == videoModes[ix])
|
||||
btn_style = 'btn-success';
|
||||
else
|
||||
btn_style = 'btn-primary';
|
||||
$('#videomodebtns').append('<button type="button" id="vModeBtn_'+videoModes[ix]+'" class="btn '+btn_style+'" style="margin:3px;min-width:200px" onclick="requestVideoMode(\''+videoModes[ix]+'\');">'+$.i18n('remote_videoMode_'+videoModes[ix])+'</button><br/>');
|
||||
}
|
||||
}
|
||||
|
||||
// colorpicker and effect
|
||||
if (getStorage('rmcpcolor') != null)
|
||||
{
|
||||
cpcolor = getStorage('rmcpcolor');
|
||||
rgb = hexToRgb(cpcolor);
|
||||
}
|
||||
|
||||
|
||||
if (getStorage('rmduration') != null)
|
||||
{
|
||||
$("#remote_duration").val(getStorage('rmduration'));
|
||||
duration = getStorage('rmduration');
|
||||
}
|
||||
|
||||
|
||||
createCP('cp2', cpcolor, function(rgbT,hex){
|
||||
rgb = rgbT;
|
||||
sendColor()
|
||||
@@ -284,7 +302,7 @@ $(document).ready(function() {
|
||||
requestPriorityClear();
|
||||
$("#effect_select").val("__none__");
|
||||
});
|
||||
|
||||
|
||||
$("#remote_duration").off().on("change", function(){
|
||||
duration = valValue(this.id,this.value,this.min,this.max);
|
||||
setStorage('rmduration', duration);
|
||||
@@ -293,26 +311,26 @@ $(document).ready(function() {
|
||||
$("#effect_select").off().on("change", function(event) {
|
||||
sendEffect();
|
||||
});
|
||||
|
||||
|
||||
$("#remote_input_reseff, #remote_input_rescol").off().on("click", function(){
|
||||
if(this.id == "remote_input_rescol")
|
||||
sendColor();
|
||||
else
|
||||
sendEffect();
|
||||
});
|
||||
|
||||
|
||||
$("#remote_input_img").change(function(){
|
||||
readImg(this, function(src,width,height){
|
||||
console.log(src,width,height)
|
||||
requestSetImage(src,width,height,duration)
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//force first update
|
||||
updateRemote();
|
||||
|
||||
updateRemote();
|
||||
|
||||
// interval updates
|
||||
$(hyperion).on("cmd-serverinfo",updateRemote);
|
||||
|
||||
removeOverlay();
|
||||
|
||||
removeOverlay();
|
||||
});
|
||||
|
Reference in New Issue
Block a user