mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
Custom Effects - Clean-ups and Enhancements (#1163)
* Cleanup EffectFileHandler * Support Custom Effect Schemas and align EffectFileHandler * Change back to colon prefix for system effects * WebSockets - Fix error in handling fragmented frames * Correct missing colon updates * Update json with image file location for custom gif effects * Image effect deletion - considere full filename is stored in JSON * Correct selection lists indentions
This commit is contained in:
LordGrey
GitHub
@@ -1,204 +1,246 @@
|
||||
$(document).ready( function() {
|
||||
performTranslation();
|
||||
var oldDelList = [];
|
||||
var effectName = "";
|
||||
var imageData = "";
|
||||
var effects_editor = null;
|
||||
var effectPy = "";
|
||||
var testrun;
|
||||
$(document).ready(function () {
|
||||
performTranslation();
|
||||
var oldDelList = [];
|
||||
var effectName = "";
|
||||
var imageData = "";
|
||||
var effects_editor = null;
|
||||
var effectPyScript = "";
|
||||
var testrun;
|
||||
|
||||
if(window.showOptHelp)
|
||||
createHintH("intro", $.i18n('effectsconfigurator_label_intro'), "intro_effc");
|
||||
if (window.showOptHelp)
|
||||
createHintH("intro", $.i18n('effectsconfigurator_label_intro'), "intro_effc");
|
||||
|
||||
function updateDelEffectlist(){
|
||||
var newDelList = window.serverInfo.effects;
|
||||
if(newDelList.length != oldDelList.length)
|
||||
{
|
||||
$('#effectsdellist').html("");
|
||||
var usrEffArr = [];
|
||||
var sysEffArr = [];
|
||||
for(var idx=0; idx<newDelList.length; idx++)
|
||||
{
|
||||
if(!/^\:/.test(newDelList[idx].file))
|
||||
usrEffArr.push('ext_'+newDelList[idx].name+':'+newDelList[idx].name);
|
||||
else
|
||||
sysEffArr.push('int_'+newDelList[idx].name+':'+newDelList[idx].name);
|
||||
}
|
||||
$('#effectsdellist').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets'), true)).append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets'), true)).trigger('change');
|
||||
oldDelList = newDelList;
|
||||
}
|
||||
}
|
||||
|
||||
function triggerTestEffect() {
|
||||
testrun = true;
|
||||
var args = effects_editor.getEditor('root.args');
|
||||
requestTestEffect(effectName, ":/effects/" + effectPy.slice(1), JSON.stringify(args.getValue()), imageData);
|
||||
};
|
||||
|
||||
// Specify upload handler for image files
|
||||
JSONEditor.defaults.options.upload = function(type, file, cbs) {
|
||||
var fileReader = new FileReader();
|
||||
|
||||
//check file
|
||||
if (!file.type.startsWith('image')) {
|
||||
imageData = "";
|
||||
cbs.failure('File upload error');
|
||||
// TODO clear file dialog.
|
||||
showInfoDialog('error', "", $.i18n('infoDialog_writeimage_error_text', file.name));
|
||||
return;
|
||||
}
|
||||
|
||||
fileReader.onload = function () {
|
||||
imageData = this.result.split(',')[1];
|
||||
cbs.success(file.name);
|
||||
};
|
||||
|
||||
fileReader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
$("#effectslist").off().on("change", function(event) {
|
||||
if(effects_editor != null)
|
||||
effects_editor.destroy();
|
||||
|
||||
for(var idx=0; idx<effects.length; idx++){
|
||||
if (effects[idx].schemaContent.script == this.value)
|
||||
{
|
||||
effects_editor = createJsonEditor('editor_container', {
|
||||
args : effects[idx].schemaContent,
|
||||
},false, true, false);
|
||||
|
||||
effectPy = ':';
|
||||
effectPy += effects[idx].schemaContent.script;
|
||||
imageData = "";
|
||||
$("#name-input").trigger("change");
|
||||
|
||||
$("#eff_desc").html(createEffHint($.i18n(effects[idx].schemaContent.title),$.i18n(effects[idx].schemaContent.title+'_desc')));
|
||||
break;
|
||||
}
|
||||
}
|
||||
effects_editor.on('change',function() {
|
||||
if ($("#btn_cont_test").hasClass("btn-success") && effects_editor.validate().length == 0 && effectName != "")
|
||||
{
|
||||
triggerTestEffect();
|
||||
}
|
||||
if( effects_editor.validate().length == 0 && effectName != "")
|
||||
{
|
||||
$('#btn_start_test').attr('disabled', false);
|
||||
!window.readOnlyMode ? $('#btn_write').attr('disabled', false) : $('#btn_write').attr('disabled', true);
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#btn_start_test, #btn_write').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// disable or enable control elements
|
||||
$("#name-input").on('change keyup', function(event) {
|
||||
effectName = $(this).val();
|
||||
if ($(this).val() == '') {
|
||||
effects_editor.disable();
|
||||
$("#eff_footer").children().attr('disabled',true);
|
||||
} else {
|
||||
effects_editor.enable();
|
||||
$("#eff_footer").children().attr('disabled',false);
|
||||
!window.readOnlyMode ? $('#btn_write').attr('disabled', false) : $('#btn_write').attr('disabled', true);
|
||||
function updateDelEffectlist() {
|
||||
var newDelList = window.serverInfo.effects;
|
||||
if (newDelList.length != oldDelList.length) {
|
||||
$('#effectsdellist').html("");
|
||||
var usrEffArr = [];
|
||||
var sysEffArr = [];
|
||||
for (var idx = 0; idx < newDelList.length; idx++) {
|
||||
if (newDelList[idx].file.startsWith(":")) {
|
||||
sysEffArr.push(idx);
|
||||
}
|
||||
else {
|
||||
usrEffArr.push(idx);
|
||||
}
|
||||
}
|
||||
|
||||
if (usrEffArr.length > 0) {
|
||||
var usrEffGrp = createSelGroup($.i18n('remote_optgroup_usreffets'));
|
||||
for (var idx = 0; idx < usrEffArr.length; idx++)
|
||||
{
|
||||
usrEffGrp.appendChild(createSelOpt('ext_' + newDelList[usrEffArr[idx]].name, newDelList[usrEffArr[idx]].name));
|
||||
}
|
||||
$('#effectsdellist').append(usrEffGrp);
|
||||
}
|
||||
|
||||
var sysEffGrp = createSelGroup($.i18n('remote_optgroup_syseffets'));
|
||||
for (var idx = 0; idx < sysEffArr.length; idx++)
|
||||
{
|
||||
sysEffGrp.appendChild(createSelOpt('int_' + newDelList[sysEffArr[idx]].name, newDelList[sysEffArr[idx]].name));
|
||||
}
|
||||
$('#effectsdellist').append(sysEffGrp);
|
||||
|
||||
$("#effectsdellist").trigger("change");
|
||||
|
||||
oldDelList = newDelList;
|
||||
}
|
||||
}
|
||||
|
||||
function triggerTestEffect() {
|
||||
testrun = true;
|
||||
|
||||
var args = effects_editor.getEditor('root.args');
|
||||
requestTestEffect(effectName, effectPyScript, JSON.stringify(args.getValue()), imageData);
|
||||
};
|
||||
|
||||
// Specify upload handler for image files
|
||||
JSONEditor.defaults.options.upload = function (type, file, cbs) {
|
||||
var fileReader = new FileReader();
|
||||
|
||||
//check file
|
||||
if (!file.type.startsWith('image')) {
|
||||
imageData = "";
|
||||
cbs.failure('File upload error');
|
||||
// TODO clear file dialog.
|
||||
showInfoDialog('error', "", $.i18n('infoDialog_writeimage_error_text', file.name));
|
||||
return;
|
||||
}
|
||||
|
||||
fileReader.onload = function () {
|
||||
imageData = this.result.split(',')[1];
|
||||
cbs.success(file.name);
|
||||
};
|
||||
|
||||
fileReader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
$("#effectslist").off().on("change", function (event) {
|
||||
if (effects_editor != null)
|
||||
effects_editor.destroy();
|
||||
|
||||
for (var idx = 0; idx < effects.length; idx++) {
|
||||
if (effects[idx].script == this.value) {
|
||||
effects_editor = createJsonEditor('editor_container', {
|
||||
args: effects[idx].schemaContent,
|
||||
}, false, true, false);
|
||||
|
||||
effectPyScript = effects[idx].script;
|
||||
|
||||
imageData = "";
|
||||
$("#name-input").trigger("change");
|
||||
|
||||
var desc = $.i18n(effects[idx].schemaContent.title + '_desc');
|
||||
if (desc === effects[idx].schemaContent.title + '_desc') {
|
||||
desc = ""
|
||||
}
|
||||
|
||||
$("#eff_desc").html(createEffHint($.i18n(effects[idx].schemaContent.title), desc));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
effects_editor.on('change', function () {
|
||||
if ($("#btn_cont_test").hasClass("btn-success") && effects_editor.validate().length == 0 && effectName != "") {
|
||||
triggerTestEffect();
|
||||
}
|
||||
if (effects_editor.validate().length == 0 && effectName != "") {
|
||||
$('#btn_start_test').attr('disabled', false);
|
||||
!window.readOnlyMode ? $('#btn_write').attr('disabled', false) : $('#btn_write').attr('disabled', true);
|
||||
}
|
||||
else {
|
||||
$('#btn_start_test, #btn_write').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// disable or enable control elements
|
||||
$("#name-input").on('change keyup', function (event) {
|
||||
effectName = $(this).val();
|
||||
if ($(this).val() == '') {
|
||||
effects_editor.disable();
|
||||
$("#eff_footer").children().attr('disabled', true);
|
||||
} else {
|
||||
effects_editor.enable();
|
||||
$("#eff_footer").children().attr('disabled', false);
|
||||
!window.readOnlyMode ? $('#btn_write').attr('disabled', false) : $('#btn_write').attr('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
// Save Effect
|
||||
$('#btn_write').off().on('click', function () {
|
||||
requestWriteEffect(effectName, effectPyScript, JSON.stringify(effects_editor.getValue()), imageData);
|
||||
$(window.hyperion).one("cmd-create-effect", function (event) {
|
||||
if (event.response.success)
|
||||
showInfoDialog('success', "", $.i18n('infoDialog_effconf_created_text', effectName));
|
||||
});
|
||||
|
||||
// Save Effect
|
||||
$('#btn_write').off().on('click',function() {
|
||||
requestWriteEffect(effectName,effectPy,JSON.stringify(effects_editor.getValue()),imageData);
|
||||
$(window.hyperion).one("cmd-create-effect", function(event) {
|
||||
if (event.response.success)
|
||||
showInfoDialog('success', "", $.i18n('infoDialog_effconf_created_text', effectName));
|
||||
});
|
||||
if (testrun)
|
||||
setTimeout(requestPriorityClear, 100);
|
||||
});
|
||||
|
||||
if (testrun)
|
||||
setTimeout(requestPriorityClear,100);
|
||||
// Start test
|
||||
$('#btn_start_test').off().on('click', function () {
|
||||
triggerTestEffect();
|
||||
});
|
||||
|
||||
});
|
||||
// Stop test
|
||||
$('#btn_stop_test').off().on('click', function () {
|
||||
requestPriorityClear();
|
||||
testrun = false;
|
||||
});
|
||||
|
||||
// Start test
|
||||
$('#btn_start_test').off().on('click',function() {
|
||||
triggerTestEffect();
|
||||
});
|
||||
// Continuous test
|
||||
$('#btn_cont_test').off().on('click', function () {
|
||||
toggleClass('#btn_cont_test', "btn-success", "btn-danger");
|
||||
});
|
||||
|
||||
// Stop test
|
||||
$('#btn_stop_test').off().on('click',function() {
|
||||
requestPriorityClear();
|
||||
testrun = false;
|
||||
});
|
||||
// Delete Effect
|
||||
$('#btn_delete').off().on('click', function () {
|
||||
var name = $("#effectsdellist").val().split("_")[1];
|
||||
requestDeleteEffect(name);
|
||||
$(window.hyperion).one("cmd-delete-effect", function (event) {
|
||||
if (event.response.success)
|
||||
showInfoDialog('success', "", $.i18n('infoDialog_effconf_deleted_text', name));
|
||||
});
|
||||
});
|
||||
|
||||
// Continuous test
|
||||
$('#btn_cont_test').off().on('click',function() {
|
||||
toggleClass('#btn_cont_test', "btn-success", "btn-danger");
|
||||
});
|
||||
// Disable or enable Delete Effect Button
|
||||
$('#effectsdellist').off().on('change', function () {
|
||||
$(this).val() == null ? $('#btn_edit, #btn_delete').prop('disabled', true) : "";
|
||||
$(this).val().startsWith("int_") ? $('#btn_delete').prop('disabled', true) : $('#btn_delete').prop('disabled', false);
|
||||
});
|
||||
|
||||
// Delete Effect
|
||||
$('#btn_delete').off().on('click',function() {
|
||||
var name = $("#effectsdellist").val().split("_")[1];
|
||||
requestDeleteEffect(name);
|
||||
$(window.hyperion).one("cmd-delete-effect", function(event) {
|
||||
if (event.response.success)
|
||||
showInfoDialog('success', "", $.i18n('infoDialog_effconf_deleted_text', name));
|
||||
});
|
||||
});
|
||||
// Load Effect
|
||||
$('#btn_edit').off().on('click', function () {
|
||||
|
||||
// disable or enable Delete Effect Button
|
||||
$('#effectsdellist').off().on('change', function(){
|
||||
$(this).val() == null ? $('#btn_edit, #btn_delete').prop('disabled',true) : "";
|
||||
$(this).val().startsWith("int_") ? $('#btn_delete').prop('disabled',true) : $('#btn_delete').prop('disabled',false);
|
||||
});
|
||||
var name = $("#effectsdellist").val().replace("ext_", "");
|
||||
if (name.startsWith("int_")) {
|
||||
name = name.split("_").pop();
|
||||
$("#name-input").val("My Modded Effect");
|
||||
}
|
||||
else {
|
||||
name = name.split("_").pop();
|
||||
$("#name-input").val(name);
|
||||
}
|
||||
|
||||
// Load Effect
|
||||
$('#btn_edit').off().on('click', function(){
|
||||
var name = $("#effectsdellist").val().replace("ext_","");
|
||||
var efx = window.serverInfo.effects;
|
||||
for (var i = 0; i < efx.length; i++) {
|
||||
if (efx[i].name == name) {
|
||||
var py = efx[i].script;
|
||||
$("#effectslist").val(py).trigger("change");
|
||||
|
||||
if(name.startsWith("int_"))
|
||||
{ name = name.split("_").pop();
|
||||
$("#name-input").val("My Modded Effect");
|
||||
}
|
||||
else
|
||||
{
|
||||
name = name.split("_").pop();
|
||||
$("#name-input").val(name);
|
||||
}
|
||||
for (var key in efx[i].args) {
|
||||
var ed = effects_editor.getEditor('root.args.' + [key]);
|
||||
if (ed)
|
||||
ed.setValue(efx[i].args[key]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var efx = window.serverInfo.effects;
|
||||
for(var i = 0; i<efx.length; i++)
|
||||
{
|
||||
if(efx[i].name == name)
|
||||
{
|
||||
var py = efx[i].script.split("/").pop();
|
||||
$("#effectslist").val(py).trigger("change");
|
||||
//Create effect template list
|
||||
var effects = window.serverSchema.properties.effectSchemas;
|
||||
|
||||
for(var key in efx[i].args)
|
||||
{
|
||||
var ed = effects_editor.getEditor('root.args.'+[key]);
|
||||
if(ed)
|
||||
ed.setValue(efx[i].args[key]);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
$('#effectslist').html("");
|
||||
var custTemplatesIDs = [];
|
||||
var sysTemplatesIDs = [];
|
||||
|
||||
//create basic effect list
|
||||
var effects = window.serverSchema.properties.effectSchemas.internal;
|
||||
for(var idx=0; idx<effects.length; idx++)
|
||||
{
|
||||
$("#effectslist").append(createSelOpt(effects[idx].schemaContent.script, $.i18n(effects[idx].schemaContent.title)));
|
||||
}
|
||||
$("#effectslist").trigger("change");
|
||||
for (var idx = 0; idx < effects.length; idx++) {
|
||||
if (effects[idx].type === "custom")
|
||||
custTemplatesIDs.push(idx);
|
||||
else
|
||||
sysTemplatesIDs.push(idx);
|
||||
}
|
||||
|
||||
updateDelEffectlist();
|
||||
//Cannot use createSel(), as Windows filenames include colons ":"
|
||||
if (custTemplatesIDs.length > 0) {
|
||||
var custTmplGrp = createSelGroup($.i18n('remote_optgroup_templates_custom'));
|
||||
for (var idx = 0; idx < custTemplatesIDs.length; idx++)
|
||||
{
|
||||
custTmplGrp.appendChild(createSelOpt(effects[custTemplatesIDs[idx]].script, $.i18n(effects[custTemplatesIDs[idx]].schemaContent.title)));
|
||||
}
|
||||
$('#effectslist').append(custTmplGrp);
|
||||
}
|
||||
|
||||
//interval update
|
||||
$(window.hyperion).on("cmd-effects-update", function(event){
|
||||
window.serverInfo.effects = event.response.data.effects
|
||||
updateDelEffectlist();
|
||||
});
|
||||
var sysTmplGrp = createSelGroup($.i18n('remote_optgroup_templates_system'));
|
||||
for (var idx = 0; idx < sysTemplatesIDs.length; idx++)
|
||||
{
|
||||
sysTmplGrp.appendChild(createSelOpt(effects[sysTemplatesIDs[idx]].script, $.i18n(effects[sysTemplatesIDs[idx]].schemaContent.title)));
|
||||
}
|
||||
$('#effectslist').append(sysTmplGrp);
|
||||
|
||||
removeOverlay();
|
||||
$("#effectslist").trigger("change");
|
||||
|
||||
updateDelEffectlist();
|
||||
|
||||
//interval update
|
||||
$(window.hyperion).on("cmd-effects-update", function (event) {
|
||||
window.serverInfo.effects = event.response.data.effects
|
||||
updateDelEffectlist();
|
||||
});
|
||||
|
||||
removeOverlay();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user