hyperion.ng/assets/webconfig/js/content_remote.js
SJunkies 3ff7fe483f
fix: small collection of bugfixed debugger hints and warnings (#801)
* small collection of bugfixed debugger hints / warnings

* 'toStdVector' has been explicitly marked deprecated

* fixed double zip naming in artifacts

* V4L2 WebUI Fix

* Some code fixes based on alerts from lgtm.com

* only execute dynamic v4l2 enum code, if V4L2_AVAIL

* very high critical bugfix ;)

* merge fix

* some lgtm.com fixes

* lgtm fixes

* undo localtime_r fix

Co-authored-by: Paulchen Panther <16664240+Paulchen-Panther@users.noreply.github.com>
2020-05-25 21:51:11 +02:00

427 lines
15 KiB
JavaScript

$(document).ready(function() {
performTranslation();
var oldEffects = [];
var cpcolor = '#B500FF';
var mappingList = window.serverSchema.properties.color.properties.imageToLedMappingType.enum;
var duration = 0;
var rgb = {r:255,g:0,b:0};
var lastImgData = "";
var lastFileName= "";
//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(window.showOptHelp)
{
createHint("intro", $.i18n('remote_color_intro', $.i18n('remote_losthint')), "color_intro");
createHint("intro", $.i18n('remote_input_intro', $.i18n('remote_losthint')), "sstcont");
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(window.serverSchema.properties.color.properties.channelAdjustment.items.properties);
var values = window.serverInfo.adjustment[0];
for(var key in sColor)
{
if(sColor[key].key != "id" && sColor[key].key != "leds")
{
var title = '<label for="cr_'+sColor[key].key+'">'+$.i18n(sColor[key].title)+'</label>';
var property;
var value = values[sColor[key].key];
if(sColor[key].type == "array")
{
property = '<div id="cr_'+sColor[key].key+'" class="input-group colorpicker-component" ><input type="text" class="form-control" /><span class="input-group-addon"><i></i></span></div>';
$('.crtbody').append(createTableRow([title, property], false, true));
createCP('cr_'+sColor[key].key, value, function(rgb,hex,e){
requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), '['+rgb.r+','+rgb.g+','+rgb.b+']');
});
}
else if(sColor[key].type == "boolean")
{
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")
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);
requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), e.currentTarget.value);
});
}
}
}
function sendEffect()
{
var efx = $("#effect_select").val();
if(efx != "__none__")
{
requestPriorityClear();
$(window.hyperion).one("cmd-clear", function(event) {
setTimeout(function() {requestPlayEffect(efx,duration)}, 100);
});
}
}
function sendColor()
{
requestSetColor(rgb.r, rgb.g, rgb.b,duration);
}
function updateInputSelect()
{
$('.sstbody').html("");
var prios = window.serverInfo.priorities;
var clearAll = false;
for(var i = 0; i < prios.length; i++)
{
var origin = prios[i].origin ? prios[i].origin : "System";
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;
var priority = prios[i].priority;
var compId = prios[i].componentId;
var duration = prios[i].duration_ms/1000;
var value = "0,0,0";
var btn_type = "default";
var btn_text = $.i18n('remote_input_setsource_btn');
var btn_state = "enabled";
if (active)
btn_type = "primary";
if(priority > 254)
continue;
if(priority < 254 && (compId == "EFFECT" || compId == "COLOR" || compId == "IMAGE") )
clearAll = true;
if (visible)
{
btn_state = "disabled";
btn_type = "success";
btn_text = $.i18n('remote_input_sourceactiv_btn');
}
if(ip)
origin += '<br/><span style="font-size:80%; color:grey;">'+$.i18n('remote_input_ip')+' '+ip+'</span>';
if("value" in prios[i])
value = prios[i].value.RGB;
switch (compId)
{
case "EFFECT":
owner = $.i18n('remote_effects_label_effects')+' '+owner;
break;
case "COLOR":
owner = $.i18n('remote_color_label_color')+' '+'<div style="width:18px; height:18px; border-radius:20px; margin-bottom:-4px; border:1px grey solid; background-color: rgb('+value+'); display:inline-block" title="RGB: ('+value+')"></div>';
break;
case "IMAGE":
owner = $.i18n('remote_effects_label_picture')+' '+owner;
break;
case "GRABBER":
owner = $.i18n('general_comp_GRABBER')+': ('+owner+')';
break;
case "V4L":
owner = $.i18n('general_comp_V4L')+': ('+owner+')';
break;
case "BOBLIGHTSERVER":
owner = $.i18n('general_comp_BOBLIGHTSERVER');
break;
case "FLATBUFSERVER":
owner = $.i18n('general_comp_FLATBUFSERVER');
break;
case "PROTOSERVER":
owner = $.i18n('general_comp_PROTOSERVER');
break;
}
if(duration && compId != "GRABBER" && compId != "FLATBUFSERVER" && 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" || compId == "IMAGE") && 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));
}
var btn_auto_color = (window.serverInfo.priorities_autoselect? "btn-success" : "btn-danger");
var btn_auto_state = (window.serverInfo.priorities_autoselect? "disabled" : "enabled");
var btn_auto_text = (window.serverInfo.priorities_autoselect? $.i18n('general_btn_on') : $.i18n('general_btn_off'));
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");
}
function updateLedMapping()
{
var mapping = window.serverInfo.imageToLedMappingType;
$('#mappingsbutton').html("");
for(var ix = 0; ix < mappingList.length; ix++)
{
if(mapping == mappingList[ix])
var btn_style = 'btn-success';
else
var btn_style = 'btn-primary';
$('#mappingsbutton').append('<button type="button" id="lmBtn_'+mappingList[ix]+'" class="btn '+btn_style+'" style="margin:3px;min-width:200px" onclick="requestMappingType(\''+mappingList[ix]+'\');">'+$.i18n('remote_maptype_label_'+mappingList[ix])+'</button><br/>');
}
}
function initComponents()
{
var components = window.comps;
var hyperionEnabled = true;
components.forEach( function(obj) {
if (obj.name == "ALL")
{
hyperionEnabled = obj.enabled;
}
});
for (const comp of components)
{
if(comp.name === "ALL")
continue;
const enable_style = (comp.enabled? "checked" : "");
const comp_btn_id = "comp_btn_"+comp.name;
if ($("#"+comp_btn_id).length === 0)
{
var d='<span style="display:block;margin:3px">'
+'<input id="'+comp_btn_id+'"'+enable_style+' type="checkbox"'
+'data-toggle="toggle" data-onstyle="success" data-on="'+$.i18n('general_btn_on')+'" data-off="'+$.i18n('general_btn_off')+'">'
+'&nbsp;&nbsp;&nbsp;<label>'+$.i18n('general_comp_'+comp.name)+'</label>'
+'</span>';
$('#componentsbutton').append(d);
$(`#${comp_btn_id}`).bootstrapToggle();
$(`#${comp_btn_id}`).bootstrapToggle((hyperionEnabled ? "enable" : "disable"));
$(`#${comp_btn_id}`).change(e => {
requestSetComponentState(e.currentTarget.id.split('_').pop(), e.currentTarget.checked);
//console.log(e.currentTarget.checked)
});
}
}
}
function updateComponent( component )
{
if (component.name == "ALL")
{
var components = window.comps;
var hyperionEnabled = component.enabled;
for (const comp of components)
{
if(comp.name === "ALL")
continue;
const comp_btn_id = "comp_btn_"+comp.name;
if ( !hyperionEnabled )
{
$(`#${comp_btn_id}`).bootstrapToggle('off');
$(`#${comp_btn_id}`).bootstrapToggle("disable");
}
else
{
$(`#${comp_btn_id}`).bootstrapToggle("enable");
if ( comp.enabled !== $(`#${comp_btn_id}`).prop("checked") )
{
$(`#${comp_btn_id}`).bootstrapToggle().prop('checked', comp.enabled).change();
}
}
}
}
else
{
const comp_btn_id = "comp_btn_"+component.name;
//console.log ("updateComponent: ", component.name, "Current Checked: ", $(`#${comp_btn_id}`).prop("checked"), "New Checked: ", component.enabled, );
// In case Buttons were disabled before, status may be different to component status
if ( component.enabled != $(`#${comp_btn_id}`).prop("checked") )
{
// console.log ("Update status to Checked = ", component.enabled);
if ( component.enabled )
$(`#${comp_btn_id}`).bootstrapToggle("on");
else
$(`#${comp_btn_id}`).bootstrapToggle("off");
}
}
}
function updateEffectlist()
{
var newEffects = window.serverInfo.effects;
if (newEffects.length != oldEffects.length)
{
$('#effect_select').html('<option value="__none__"></option>');
var usrEffArr = [];
var sysEffArr = [];
for(var i = 0; i < newEffects.length; i++) {
var effectName = newEffects[i].name;
if(!/^\:/.test(newEffects[i].file)){
usrEffArr.push(effectName);
}
else{
sysEffArr.push(effectName);
}
}
$('#effect_select').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets')));
$('#effect_select').append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets')));
oldEffects = newEffects;
}
}
function updateVideoMode()
{
var videoModes = ["2D","3DSBS","3DTAB"];
var currVideoMode = window.serverInfo.videomode;
$('#videomodebtns').html("");
for(var ix = 0; ix < videoModes.length; ix++)
{
if(currVideoMode == videoModes[ix])
var btn_style = 'btn-success';
else
var 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();
setStorage('rmcpcolor', hex);
updateInputSelect();
});
$("#reset_color").off().on("click", function(){
requestPriorityClear();
lastImgData = "";
$("#effect_select").val("__none__");
$("#remote_input_img").val("");
});
$("#remote_duration").off().on("change", function(){
duration = valValue(this.id,this.value,this.min,this.max);
setStorage('rmduration', duration);
});
$("#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_repimg").off().on("click", function(){
if(lastImgData != "")
requestSetImage(lastImgData, duration, lastFileName);
});
$("#remote_input_img").change(function(){
readImg(this, function(src,fileName){
lastFileName = fileName;
if(src.includes(","))
lastImgData = src.split(",")[1];
else
lastImgData = src;
requestSetImage(lastImgData, duration, lastFileName);
});
});
//force first update
initComponents();
updateInputSelect();
updateLedMapping();
updateVideoMode();
updateEffectlist();
// interval updates
$(window.hyperion).on('components-updated', function(e, comp){
//console.log ("components-updated", e, comp);
updateComponent (comp);
});
$(window.hyperion).on("cmd-priorities-update", function(event){
window.serverInfo.priorities = event.response.data.priorities;
window.serverInfo.priorities_autoselect = event.response.data.priorities_autoselect;
updateInputSelect();
});
$(window.hyperion).on("cmd-imageToLedMapping-update", function(event){
window.serverInfo.imageToLedMappingType = event.response.data.imageToLedMappingType;
updateLedMapping();
});
$(window.hyperion).on("cmd-videomode-update", function(event){
window.serverInfo.videomode = event.response.data.videomode;
updateVideoMode();
});
$(window.hyperion).on("cmd-effects-update", function(event){
window.serverInfo.effects = event.response.data.effects;
updateEffectlist();
});
removeOverlay();
});