$(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 = ''; var property; var value = values[sColor[key].key]; if(sColor[key].type == "array") { property = '
'; $('.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 = '
'; $('.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 = '
'+$.i18n("edt_append_percent")+'
'; else property = ''; $('.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 += '
'+$.i18n('remote_input_ip')+' '+ip+''; 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')+' '+'
'; 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 += '
'+$.i18n('remote_input_duration')+' '+duration.toFixed(0)+$.i18n('edt_append_s')+''; var btn = ''; if((compId == "EFFECT" || compId == "COLOR" || compId == "IMAGE") && priority < 254) btn += ''; 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(''); $('#auto_btn').append(''); 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('
'); } } 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='' +'' +'   ' +''; $('#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(''); 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('
'); } } // 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(); });