Expand effect engine & ui update (#445)

* update

* update

* update

* .

* .

* .

* update

* .

* .

* .

* .

* update

* .

* update

* .

* update

* update

* update

* update

* update

* update

* .

* update

* update

* update

* .

* .

* .

* Revert "."

This reverts commit 4dd6404b32.

* update

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* ...

* .

* .

* .

* .

* .

* .

* .

* .

* .

* update

* update

* update

* remove svg and pic

* colorpicker imgs to base64 to prevent delayed load if not cached

* fix json2python func

* update swirl with rgba

* add double swirl, tune default val in schema, update explanation

* adjust swirl.py

* FileObserver for config checks with timer as fallback (#4)

assets/webconfig/js/content_effects.js

@@ -9,15 +9,7 @@ $(document).ready( function() {
 	var backgroundEffect_editor = null;
 	
 	if(showOptHelp)
-	{
-		//effect path
-		if(storedAccess != 'default')
-		{
-			$('#conf_cont').append(createRow('conf_cont_ef'))
-			$('#conf_cont_ef').append(createOptPanel('fa-spinner', $.i18n("edt_conf_effp_heading_title"), 'editor_container_effects', 'btn_submit_effects'));
-			$('#conf_cont_ef').append(createHelpTable(schema.effects.properties, $.i18n("edt_conf_effp_heading_title")));
-		}
-		
+	{		
 		//foreground effect
 		$('#conf_cont').append(createRow('conf_cont_fge'))
 		$('#conf_cont_fge').append(createOptPanel('fa-spinner', $.i18n("edt_conf_fge_heading_title"), 'editor_container_foregroundEffect', 'btn_submit_foregroundEffect'));
@@ -27,15 +19,22 @@ $(document).ready( function() {
 		$('#conf_cont').append(createRow('conf_cont_bge'))
 		$('#conf_cont_bge').append(createOptPanel('fa-spinner', $.i18n("edt_conf_bge_heading_title"), 'editor_container_backgroundEffect', 'btn_submit_backgroundEffect'));
 		$('#conf_cont_bge').append(createHelpTable(schema.backgroundEffect.properties, $.i18n("edt_conf_bge_heading_title")));
+		
+		//effect path
+		if(storedAccess != 'default')
+		{
+			$('#conf_cont').append(createRow('conf_cont_ef'))
+			$('#conf_cont_ef').append(createOptPanel('fa-spinner', $.i18n("edt_conf_effp_heading_title"), 'editor_container_effects', 'btn_submit_effects'));
+			$('#conf_cont_ef').append(createHelpTable(schema.effects.properties, $.i18n("edt_conf_effp_heading_title")));
+		}
 	}
 	else
 	{
-		if(storedAccess != 'default')	
-			$('#conf_cont').append(createOptPanel('fa-spinner', $.i18n("edt_conf_effp_heading_title"), 'editor_container_effects', 'btn_submit_effects'));
-		
 		$('#conf_cont').addClass('row');
 		$('#conf_cont').append(createOptPanel('fa-spinner', $.i18n("edt_conf_fge_heading_title"), 'editor_container_foregroundEffect', 'btn_submit_foregroundEffect'));
 		$('#conf_cont').append(createOptPanel('fa-spinner', $.i18n("edt_conf_bge_heading_title"), 'editor_container_backgroundEffect', 'btn_submit_backgroundEffect'));
+		if(storedAccess != 'default')	
+			$('#conf_cont').append(createOptPanel('fa-spinner', $.i18n("edt_conf_effp_heading_title"), 'editor_container_effects', 'btn_submit_effects'));
 	}
 	
 	if(storedAccess != 'default')
@@ -68,34 +67,10 @@ $(document).ready( function() {
 	
 	foregroundEffect_editor.on('change',function() {
 		foregroundEffect_editor.validate().length ? $('#btn_submit_foregroundEffect').attr('disabled', true) : $('#btn_submit_foregroundEffect').attr('disabled', false);
-		
-		var type = foregroundEffect_editor.getEditor('root.foregroundEffect.type');
-		if(type.value == "color")
-		{
-			foregroundEffect_editor.getEditor('root.foregroundEffect.effect').disable();
-			foregroundEffect_editor.getEditor('root.foregroundEffect.color').enable();
-		}
-		else
-		{
-			foregroundEffect_editor.getEditor('root.foregroundEffect.effect').enable();
-			foregroundEffect_editor.getEditor('root.foregroundEffect.color').disable();
-		}
 	});
 	
 	backgroundEffect_editor.on('change',function() {
 		backgroundEffect_editor.validate().length ? $('#btn_submit_backgroundEffect').attr('disabled', true) : $('#btn_submit_backgroundEffect').attr('disabled', false);
-		
-		var type = backgroundEffect_editor.getEditor('root.backgroundEffect.type');
-		if(type.value == "color")
-		{
-			backgroundEffect_editor.getEditor('root.backgroundEffect.effect').disable();
-			backgroundEffect_editor.getEditor('root.backgroundEffect.color').enable();
-		}
-		else
-		{
-			backgroundEffect_editor.getEditor('root.backgroundEffect.effect').enable();
-			backgroundEffect_editor.getEditor('root.backgroundEffect.color').disable();
-		}
 	});
 	
 	$('#btn_submit_foregroundEffect').off().on('click',function() {
@@ -143,12 +118,8 @@ $(document).ready( function() {
 				$('#root_backgroundEffect_effect').html($('#root_foregroundEffect_effect').html());
 				oldEffects = newEffects;
 			
-				$('#root_foregroundEffect_effect').val(confFgEff).change();
-				//$('select').trigger('change');
-				//var fgeff = foregroundEffect_editor.getEditor('root.foregroundEffect.effect').setValue(confFgEff);
-				//console.log(fgeff);
-			
-				$('#root_backgroundEffect_effect').val(confBgEff).change();
+				$('#root_foregroundEffect_effect').val(confFgEff);			
+				$('#root_backgroundEffect_effect').val(confBgEff);
 			}
 		}
 	}

assets/webconfig/js/content_effectsconfigurator.js

@@ -13,17 +13,18 @@ $(document).ready( function() {
 		var newDelList = serverInfo.effects;
 		if(newDelList.length != oldDelList.length)
 		{
-			var EffectHtml = null;
+			$('#effectsdellist').html("");
+			var usrEffArr = [];
+			var sysEffArr = [];
 			for(var idx=0; idx<newDelList.length; idx++)
 			{
 				if(!/^\:/.test(newDelList[idx].file))
-				{
-					EffectHtml += '<option value="'+newDelList[idx].name+'">'+newDelList[idx].name+'</option>';
-				}
+					usrEffArr.push('ext_'+newDelList[idx].name+':'+newDelList[idx].name);
+				else
+					sysEffArr.push('int_'+newDelList[idx].name+':'+newDelList[idx].name);
 			}
-			$("#effectsdellist").html(EffectHtml);
+			$('#effectsdellist').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets'), true)).append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets'), true)).trigger('change');
 			oldDelList = newDelList;
-			$('#effectsdellist').trigger('change');
 		}
 	}
 	
@@ -35,15 +36,23 @@ $(document).ready( function() {
 	
 	
 	$("#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){
+			if (effects[idx].schemaContent.script == this.value)
+			{
 				effects_editor = createJsonEditor('editor_container', {
 				args : effects[idx].schemaContent,
-				},false, true);
-			effectPy = ':';
-			effectPy += effects[idx].schemaContent.script;
+				},false, true, false);
+				
+				effectPy = ':';
+				effectPy += effects[idx].schemaContent.script;
+				$("#name-input").trigger("change");
+
+				$("#eff_desc").html(createEffHint($.i18n(effects[idx].schemaContent.title),$.i18n(effects[idx].schemaContent.title+'_desc')));
+				break;
 			}
-			$("#name-input").trigger("change");
 		}
 		effects_editor.on('change',function() {
 			if ($("#btn_cont_test").hasClass("btn-success") && effects_editor.validate().length == 0 && effectName != "")
@@ -52,13 +61,11 @@ $(document).ready( function() {
 			}
 			if( effects_editor.validate().length == 0 && effectName != "")
 			{
-				$('#btn_start_test').attr('disabled', false);
-				$('#btn_write').attr('disabled', false);
+				$('#btn_start_test, #btn_write').attr('disabled', false);
 			}
 			else
 			{
-				$('#btn_start_test').attr('disabled', true);
-				$('#btn_write').attr('disabled', true);
+				$('#btn_start_test, #btn_write').attr('disabled', true);
 			}
 		});
 	});
@@ -109,11 +116,40 @@ $(document).ready( function() {
 	});
 	
 	$('#effectsdellist').off().on('change', function(){
-		if ($(this).val() == null) {
-            $('#btn_delete').prop('disabled',true);
-        } else {
-            $('#btn_delete').prop('disabled',false);
-        }
+		$(this).val() == null ? $('#btn_edit, #btn_delete').prop('disabled',true) : "";
+		$(this).val().startsWith("int_") ? $('#btn_delete').prop('disabled',true) : $('#btn_delete').prop('disabled',false);
+	});
+	
+	$('#btn_edit').off().on('click', function(){
+		var name = $("#effectsdellist").val();
+		
+		if(name.startsWith("int_"))
+		{	name = name.split("_").pop();
+			$("#name-input").val("My Modded Effect");
+		}
+		else
+		{
+			name = name.split("_").pop();
+			$("#name-input").val(name);
+		}
+
+		var efx = 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");
+
+				for(key in efx[i].args)
+				{
+					var ed = effects_editor.getEditor('root.args.'+[key]);
+					if(ed)
+						ed.setValue(efx[i].args[key]);
+				}
+				break;
+			}
+		}
 	});
 	
 	//create basic effect list

assets/webconfig/js/content_logging.js

@@ -6,6 +6,7 @@
 $(document).ready(function() {
 	
 	var messages;
+	var loguplmess = "";
 	var reportUrl = 'https://report.hyperion-project.org/#';
 	
 	$('#conf_cont').append(createOptPanel('fa-reorder', $.i18n("edt_conf_log_heading_title"), 'editor_container', 'btn_submit'));
@@ -68,28 +69,7 @@ $(document).ready(function() {
 		var info;
 		
 		//create log
-		if(messages)
-		{
-			for(var i = 0; i<messages.length; i++)
-			{
-				app_name = messages[i].appName;
-				logger_name = messages[i].loggerName;
-				function_ = messages[i].function;
-				line = messages[i].line;
-				file_name = messages[i].fileName;
-				msg = messages[i].message;
-				level_string = messages[i].levelString;
-				debug = "";
-			
-				if(level_string == "DEBUG") {
-					debug = "<"+file_name+":"+line+":"+function_+"()> ";
-				}
-				
-				log += "["+app_name+" "+logger_name+"] <"+level_string+"> "+debug+msg+"\n";
-			}
-		}
-		else
-			log = "Log was empty!";
+		log = (messages ? loguplmess : "Log was empty!");
 
 		//create general info
 		info = "### GENERAL ### \n";
@@ -187,10 +167,11 @@ $(document).ready(function() {
 				var debug = "";
 				
 				if(level_string == "DEBUG") {
-					debug = "&lt;"+file_name+":"+line+":"+function_+"()&gt; ";
+					debug = "("+file_name+":"+line+":"+function_+"()) ";
 				}
 				
-				$("#logmessages").html($("#logmessages").html()+"\n <code>"+"["+app_name+" "+logger_name+"] &lt;"+level_string+"&gt; "+debug+msg+"</code>");
+				$("#logmessages").append("\n <code>"+"["+app_name+" "+logger_name+"] ("+level_string+") "+debug+msg+"</code>");
+				loguplmess += "["+app_name+" "+logger_name+"] ("+level_string+") "+debug+msg+"\n";
 			}
 			if($("#btn_autoscroll").hasClass('btn-success')){
 				$('#logmessages').stop().animate({

assets/webconfig/js/content_remote.js

@@ -277,7 +277,6 @@ $(document).ready(function() {
 	createCP('cp2', cpcolor, function(rgbT,hex){
 		rgb = rgbT;
 		sendColor()
-		$("#effect_select").val("__none__");
 		setStorage('rmcpcolor', hex);
 	});
 

assets/webconfig/js/ledsim.js

@@ -13,7 +13,7 @@ $(document).ready(function() {
 		{
 			createHint('intro', $.i18n('main_ledsim_text'), 'ledsim_text');
 			$('#ledsim_text').css({'margin':'10px 15px 0px 15px'});
-			$('#ledsim_text .intro-hint').css("margin","0px")
+			$('#ledsim_text .bs-callout').css("margin","0px")
 		}
 		
 		if(getStorage('ledsim_width') != null)

assets/webconfig/js/lib/jsoneditor.js

@@ -1439,6 +1439,81 @@ JSONEditor.AbstractEditor = Class.extend({
     this.link_watchers = [];
 
     if(options.container) this.setContainer(options.container);
+	this.registerDependencies();
+  },
+  registerDependencies: function() {
+    this.dependenciesFulfilled = true;
+    var deps = this.options.dependencies;
+    if (!deps) {
+      return;
+    }
+    
+    var self = this;
+    Object.keys(deps).forEach(function(dependency) {
+      var path = self.path.split('.');
+      path[path.length - 1] = dependency;
+      path = path.join('.');
+      var choices = deps[dependency];
+      self.jsoneditor.watch(path, function() {
+        self.checkDependency(path, choices);
+      });
+    });
+  },
+  checkDependency: function(path, choices) {
+    var wrapper = this.control || this.container;
+    if (this.path === path || !wrapper) {
+      return;
+    }
+    
+    var self = this;
+    var editor = this.jsoneditor.getEditor(path);
+    var value = editor ? editor.getValue() : undefined;
+    var previousStatus = this.dependenciesFulfilled;
+    this.dependenciesFulfilled = false;
+    
+	if (!editor || !editor.dependenciesFulfilled) {
+      this.dependenciesFulfilled = false;
+    } else if (Array.isArray(choices)) {
+      choices.some(function(choice) {
+        if (value === choice) {
+          self.dependenciesFulfilled = true;
+          return true;
+        }
+      });
+    } else if (typeof choices === 'object') {
+      if (typeof value !== 'object') {
+        this.dependenciesFulfilled = choices === value;
+      } else {
+        Object.keys(choices).some(function(key) {
+          if (!choices.hasOwnProperty(key)) {
+            return false;
+          }
+          if (!value.hasOwnProperty(key) || choices[key] !== value[key]) {
+            self.dependenciesFulfilled = false;
+            return true;
+          }
+          self.dependenciesFulfilled = true;
+        });
+      }
+    } else if (typeof choices === 'string' || typeof choices === 'number') {
+      this.dependenciesFulfilled = value === choices;
+    } else if (typeof choices === 'boolean') {
+      if (choices) {
+        this.dependenciesFulfilled = value;
+      } else {
+        this.dependenciesFulfilled = !value;
+      }
+    }
+	
+    if (this.dependenciesFulfilled !== previousStatus) {
+      this.notify();
+    }
+
+    if (this.dependenciesFulfilled) {
+      wrapper.style.display = 'block';
+    } else {
+      wrapper.style.display = 'none';
+    }
   },
   setContainer: function(container) {
     this.container = container;
@@ -6205,7 +6280,67 @@ JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.ext
         $(this.input).colorpicker().on('changeColor', function(e) {
             $(myinput).val(e.color.toRGB()).change();
         });     
-    }
+    },
+	
+  destroy: function() {
+	$(this.input).colorpicker('destroy');
+  }
+});
+
+// colorpickerRGBA creation and handling, build on top of strings editor
+JSONEditor.defaults.editors.colorPickerRGBA = JSONEditor.defaults.editors.string.extend({
+    getValue: function() {
+        if ($(this.input).data("colorpicker") !== undefined) {
+            var color = $(this.input).data('colorpicker').color.toRGB();
+            return [color.r,color.g, color.b, color.a];
+        }
+        else {
+            return [0,0,0,1];
+        }
+    },
+
+    setValue: function(val) {
+        $(this.input).colorpicker('updateInput', 'rgba('+val+')');
+        $(this.input).colorpicker('updateData', val);
+       // $(this.input).colorpicker('updatePicker', rgb2hex(val));
+        $(this.input).colorpicker('updateComponent', 'rgba('+val+')');
+     },
+   
+   
+   
+    build: function() {
+        this._super();
+        var myinput = this;
+        $(myinput.input).parent().attr("class", $(myinput.input).parent().attr('class') + " colorpicker-element input-group");
+        $(myinput.input).append("<span class='input-group-addon' id='event_catcher'><i></i></span>");
+        $(myinput.input).colorpicker({
+            format: 'rgba',
+            customClass: 'colorpicker-2x',
+            sliders: {
+                saturation: {
+                    maxLeft: 200,
+                    maxTop: 200
+                },
+                hue: {
+                    maxTop: 200
+                },
+                alpha: {
+                    maxTop: 200
+                }
+            },
+        })
+
+        $("#event_catcher").detach().insertAfter(myinput.input);
+        $("#event_catcher").attr("id", "selector");
+       
+        $(this.input).colorpicker().on('changeColor', function(e) {
+            $(myinput).val(e.color.toRGB()).change();
+        });     
+    },
+  
+  destroy: function() {
+	$(this.input).colorpicker('destroy');
+  }
 });
 
 var matchKey = (function () {
@@ -7083,6 +7218,12 @@ JSONEditor.defaults.resolvers.unshift(function(schema) {
         return "colorPicker";
     }
 });
+// colorpickerRGBA extend for strings
+JSONEditor.defaults.resolvers.unshift(function(schema) {
+    if(schema.type === "array" && schema.format === "colorpickerRGBA") {
+        return "colorPickerRGBA";
+    }
+});
 
 /**
  * This is a small wrapper for using JSON Editor like a typical jQuery plugin.

assets/webconfig/js/ui_utils.js

@@ -238,6 +238,11 @@ function createHint(type, text, container, buttonid, buttontxt)
 	}
 }
 
+function createEffHint(title, text)
+{
+	return '<div class="bs-callout bs-callout-primary" style="margin-top:0px"><h4>'+title+'</h4>'+text+'</div>';
+}
+
 function valValue(id,value,min,max)
 {
 	if(typeof max === 'undefined' || max == "")
@@ -285,34 +290,39 @@ function isJsonString(str)
 	return "";
 }
 
-function createJsonEditor(container,schema,setconfig,usePanel)
+function createJsonEditor(container,schema,setconfig,usePanel,arrayre)
 {
 	$('#'+container).off();
 	$('#'+container).html("");
 	
+	//JSONEditor.plugins.selectize.enable = true;
+	
+	if (typeof arrayre === 'undefined')
+		arrayre = true;
+	
 	var editor = new JSONEditor(document.getElementById(container),
 	{
 		theme: 'bootstrap3',
 		iconlib: "fontawesome4",
 		disable_collapse: 'true',
 		form_name_root: 'sa',
-		disable_edit_json: 'true',
-		disable_properties: 'true',
-		disable_array_reorder: 'true',
-		no_additional_properties: 'true',
-		disable_array_delete_all_rows: 'true',
-		disable_array_delete_last_row: 'true',
+		disable_edit_json: true,
+		disable_properties: true,
+		disable_array_reorder: arrayre,
+		no_additional_properties: true,
+		disable_array_delete_all_rows: true,
+		disable_array_delete_last_row: true,
 		access: storedAccess,
 		schema: {
 			title:'',
 			properties: schema
 		}
 	});
-	
+
 	if(usePanel)
 	{
 		$('#'+container+' .well').first().removeClass('well well-sm');
-		$('#'+container+' h4').remove();
+		$('#'+container+' h4').first().remove();
 		$('#'+container+' .well').first().removeClass('well well-sm');
 	}
 
@@ -591,14 +601,21 @@ function createSelOpt(opt, title)
 	return el;
 }
 
-function createSel(array, group)
+function createSel(array, group, split)
 {
-	if (array.length != "0")
+	if (array.length != 0)
 	{
 		var el = createSelGroup(group);
 		for(var i=0; i<array.length; i++)
 		{
-			var opt = createSelOpt(array[i])
+			var opt;
+			if(split)
+			{
+				opt = array[i].split(":")
+				opt = createSelOpt(opt[0],opt[1])
+			}
+			else
+				opt = createSelOpt(array[i])
 			el.appendChild(opt);
 		}
 		return el;