Merge pull request #126 from mamuesp/master

Some bugfixes and some improvements

gui/red/main.js

 				if (node && (node.outputs > 0 || node._def.inputs > 0)) {
 					cpp += n.type + " ";
 					for (var j=n.type.length; j<24; j++) cpp += " ";
-					cpp += n.id + "; ";
+					var name = (n.name ? n.name : n.id);
+					name = name.replace(" ", "_").replace("+", "_").replace("-", "_");
+					cpp += name + "; ";
 					for (var j=n.id.length; j<14; j++) cpp += " ";
 					cpp += "//xy=" + n.x + "," + n.y + "\n";
 				}
 			//console.log(cpp);
 
 			RED.view.state(RED.state.EXPORT);
-			$("#dialog-form").html($("script[data-template-name='export-clipboard-dialog']").html());
-			$("#node-input-export").val(cpp);
-			$("#node-input-export").focus(function() {
+			RED.view.getForm('dialog-form', 'export-clipboard-dialog', function (d, f) {
+				$("#node-input-export").val(cpp).focus(function() {
 				var textarea = $(this);
 				textarea.select();
 				textarea.mouseup(function() {
 					textarea.unbind("mouseup");
 					return false;
 				});
-			});
+				}).focus();
 			$( "#dialog" ).dialog("option","title","Export to Arduino").dialog( "open" );
-			$("#node-input-export").focus();
+			});
 			//RED.view.dirty(false);
 		}
 	}
 	}
 
 	function loadNodes() {
-		//$.get('list.html', function(data) {
-			//$("body").append(data);
-		//setTimeout(function() {
-			$(".palette-spinner").hide();
 			$(".palette-scroll").show();
 			$("#palette-search").show();
 			RED.storage.load();
 			// if the query string has ?info=className, populate info tab
 			var info = getQueryVariable("info");
 			if (info) {
-				$("#tab-info").html('<div class="node-help">'
-					+($("script[data-help-name|='"+info+"']").html()||"")+"</div>");
+			RED.sidebar.info.setHelpContent('', info);
 			}
-		//}, 100);
-		//}, "html");
 	}
 
 	$('#btn-node-status').click(function() {toggleStatus();});
 	}
 
 	$(function() {
+		$(".palette-spinner").show();
+		$.ajaxSetup({beforeSend: function(xhr){
+			if (xhr.overrideMimeType) {
+				xhr.overrideMimeType("application/json");
+			}
+		}});
+		$.getJSON( "resources/nodes_def.json", function( data ) {
+			var nodes = data["nodes"];
+			$.each(nodes, function(key, val) {
+				RED.nodes.registerType(val["type"], val["data"]);
+			});
 		RED.keyboard.add(/* ? */ 191,{shift:true},function(){showHelp();d3.event.preventDefault();});
 		loadNodes();
+			$(".palette-spinner").hide();
+		})
 	});
 
 	return {

gui/red/nodes.js

 	var nodes = [];
 	var configNodes = {};
 	var links = [];
-	var defaultWorkspace;
+	//var defaultWorkspace;
 	var workspaces = {};
 
 	function registerType(nt,def) {
 				if (n._def.defaults.hasOwnProperty(d)) {
 					var property = n._def.defaults[d];
 					if (property.type) {
-						var type = getType(property.type)
+						var type = getType(property.type);
 						if (type && type.category == "config") {
 							var configNode = configNodes[n[d]];
 							if (configNode) {
 	function addLink(l) {
 		links.push(l);
 	}
+/*
 	function addConfig(c) {
 		configNodes[c.id] = c;
 	}
+*/
 
 	function getNode(id) {
 		if (id in configNodes) {
 				if (node._def.defaults.hasOwnProperty(d)) {
 					var property = node._def.defaults[d];
 					if (property.type) {
-						var type = getType(property.type)
+						var type = getType(property.type);
 						if (type && type.category == "config") {
 							var configNode = configNodes[node[d]];
 							if (configNode) {
 	 */
 	function cppToJSON(newNodesStr) {
 
-		var data = "";
 		var nodes = [];
+		var skipped = [];
 		var cables = [];
 
 		const CODE_START 	= "// GUItool: begin automatically generated code";
 		const CODE_END		= "// GUItool: end automatically generated code";
 		const NODE_COMMENT	= "//";
 		const NODE_AC		= "AudioConnection";
-		const NODE_AI_I2S	= "AudioInputI2S";
-		const NODE_AM_4     = "AudioMixer4";
-		const NODE_AC_SGTL  = "AudioControlSGTL5000";
 
 		var parseLine = function(line) {
 			var parts = line.match(/^(\S+)\s(.*)/).slice(1);
 						"z": 0,
 						"wires": []
 					});
+					// first solution: skip existing id
+					if (!RED.nodes.node(node.id)) {
 					nodes.push(node);
+					} else {
+						skipped.push(node.id);
+					}
 					break;
 			}
 		};
 			}
 		};
 
+/*
 		var readCode = function() {
 
 			var fileImport = $("#importInput")[0];
 				alert("Please upload a valid INO or text file.");
 			}
 		};
+ */
 
 		traverseLines(newNodesStr);
 		linkCables(cables);
 
-		return JSON.stringify(nodes);
+		return {
+			count: nodes.length,
+			skipped: skipped.length,
+			data: count > 0 ? JSON.stringify(nodes) : ""
+		};
 	}
 
 	function importNodes(newNodesObj,createNewIds) {

gui/red/ui/editor.js

 					$("#"+prefix+"-"+d).change();
 				}
 			}
-		}
+		};
 		
 		if (definition.credentials) {
 			if (node.credentials) {
 	function showEditDialog(node) {
 		editing_node = node;
 		RED.view.state(RED.state.EDITING);
-		$("#dialog-form").html($("script[data-template-name='"+node.type+"']").html());
-		prepareEditDialog(node,node._def,"node-input");
-		$( "#dialog" ).dialog("option","title","Edit "+node.type+" node").dialog( "open" );
+		//$("#dialog-form").html(RED.view.getForm(node.type));
+		RED.view.getForm("dialog-form", node.type, function (d, f) {
+			prepareEditDialog(node,node._def,"node-input");
+			$( "#dialog" ).dialog("option","title","Edit "+node.type+" node").dialog( "open" );
+		});
 	}
 
 	function showEditConfigNodeDialog(name,type,id) {
 				id: (1+Math.random()*4294967295).toString(16),
 				_def: node_def,
 				type: type
-			}
+			};
 			for (var d in node_def.defaults) {
 				if (node_def.defaults[d].value) {
 					configNode[d] = node_def.defaults[d].value;
 			}
 		}
 
-		$("#dialog-config-form").html($("script[data-template-name='"+type+"']").html());
+		//$("#dialog-config-form").html(RED.view.getForm(type));
+		RED.view.getForm("dialog-config-form", type, function (d, f) {
+
 		prepareEditDialog(configNode,node_def,"node-config-input");
 
 		var buttons = $( "#node-config-dialog" ).dialog("option","buttons");
 			.dialog("option","node-type",type)
 			.dialog("option","title",(adding?"Add new ":"Edit ")+type+" config node")
 			.dialog( "open" );
+		});
 	}
 
 	function updateConfigNodeSelect(name,type,value) {

gui/red/ui/palette.js

 		  }
 		  
 		  $("#palette-"+def.category).append(d);
-		  d.onmousedown = function(e) { e.preventDefault(); }
+		  d.onmousedown = function(e) { e.preventDefault(); };
+
+		  setTooltipContent('', nt, d);
 
-		  $(d).popover({
-				  title:d.type,
-				  placement:"right",
-				  trigger: "hover",
-				  delay: { show: 750, hide: 50 },
-				  html: true,
-				  container:'body',
-				  content: $(($("script[data-help-name|='"+nt+"']").html()||"<h2>empty</h2><p>no information available</p>").trim())[2] // TODO: how to use jQuery to always select the first <p> within the html?
-		  });
 		  $(d).click(function() {
 				RED.nodes.selectNode(d.type);
-				var help = '<div class="node-help">'+($("script[data-help-name|='"+d.type+"']").html()||"")+"</div>";
-				$("#tab-info").html(help);
+			  RED.sidebar.info.setHelpContent('', d.type);
 		  });
 		  $(d).draggable({
 			  helper: 'clone',
 			  $(this).next().slideToggle();
 			  $(this).children("i").toggleClass("expanded");
 		  });
+		}
+	}
 
+	function setTooltipContent(prefix, key, elem) {
+		// server test switched off - test purposes only
+		var patt = new RegExp(/^[http|https]/);
+		var server = false && patt.test(location.protocol);
+
+		var options = {
+			title: elem.type,
+			placement: "right",
+			trigger: "hover",
+			delay: { show: 750, hide: 50 },
+			html: true,
+			container:'body',
+			content : ""
+		};
+
+		if (!server) {
+			data = $("script[data-help-name|='" + key + "']").html();
+			var firstP = $("<div/>").append(data).children("p").first().html();
+			options.content = firstP;
+			$(elem).popover(options);
+		} else {
+			$.get( "resources/help/" + key + ".html", function( data ) {
+				var firstP = $("<div/>").append(data).children("p").first().html();
+				options.content = firstP;
+				$(elem).popover(options);
+			});
 		}
 	}
 	

gui/red/ui/tab-info.js

 			}
 		}
 		table += "</tbody></table><br/>";
-		table  += '<div class="node-help">'+($("script[data-help-name|='"+node.type+"']").html()||"")+"</div>";
-		$("#tab-info").html(table);
+		this.setHelpContent(table, node.type);
+	}
+
+	function setHelpContent(prefix, key) {
+		// server test switched off - test purposes only
+		var patt = new RegExp(/^[http|https]/);
+		var server = false && patt.test(location.protocol);
+
+
+		prefix = prefix == "" ? "<h3>" + key + "</h3>" : prefix;
+		if (!server) {
+			data = $("script[data-help-name|='" + key + "']").html();
+			$("#tab-info").html(prefix + '<div class="node-help">' + data + '</div>');
+		} else {
+			$.get( "resources/help/" + key + ".html", function( data ) {
+				$("#tab-info").html(prefix + '<h2>' + key + '</h2><div class="node-help">' + data + '</div>');
+			}).fail(function () {
+				$("#tab-info").html(prefix);
+			});
+		}
 	}
 	
 	return {
 		refresh:refresh,
 		clear: function() {
 			$("#tab-info").html("");
-		}
+		},
+		setHelpContent: setHelpContent
 	}
 })();

gui/red/ui/view.js

 		"yellow": "#F9DF31",
 		"blue":   "#53A3F3",
 		"grey":   "#d3d3d3"
-	}
+	};
 
 	var outer = d3.select("#chart")
 		.append("svg:svg")
 				moveTouchCenter = [
 					touch1['pageX']+(b/2),
 					touch1['pageY']+(a/2)
-				]
+				];
 				startTouchDistance = Math.sqrt((a*a)+(b*b));
 			} else {
 				var obj = d3.select(document.body);
 				nn.type = selected_tool;
 				nn._def = RED.nodes.getType(nn.type);
 				nn.id = RED.nodes.cppName(nn);
+
+				nn._def.defaults = nn._def.defaults ? nn._def.defaults  : {};
+				nn._def.defaults.name = { value: nn.id };
+
 				nn.outputs = nn._def.outputs;
 				nn.changed = true;
 
 					node.x = 25
 				}
 				var rmlinks = RED.nodes.remove(node.id);
-				for (var i=0; i < rmlinks.length; i++) {
-					var link = rmlinks[i];
+				for (var j=0; j < rmlinks.length; j++) {
+					var link = rmlinks[j];
 					//console.log("delete link: " + link.source.id + ":" + link.sourcePort
 					//	+ " -> " + link.target.id + ":" + link.targetPort);
 					if (link.source == node) {
 				.on("mouseup", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
 				.on("touchend", (function(d,n){return function(d){portMouseUp(d,1,n);}})(rect, n))
 				.on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || mousedown_port_type != 1 ));})
-				.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
+				.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);});
 			RED.nodes.removeLink(selected_link);
 			removedLinks.push(selected_link);
 			setDirty(true);
 					node.attr("id",d.id);
 					//var l = d._def.label;
 					//l = (typeof l === "function" ? l.call(d) : l)||"";
-					var l = d.id;
+					var l = d.name ? d.name : d.id;
 					d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
 					d.h = Math.max(node_height,(Math.max(d.outputs,d._def.inputs)||0) * 15);
 
 
 						if ("right" == d._def.align) {
 							icon_group.attr('class','node_icon_group node_icon_group_'+d._def.align);
-							icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)})
+							icon_shade_border.attr("d",function(d) { return "M 0 1 l 0 "+(d.h-2)});
 							//icon.attr('class','node_icon node_icon_'+d._def.align);
 							//icon.attr('class','node_icon_shade node_icon_shade_'+d._def.align);
 							//icon.attr('class','node_icon_shade_border node_icon_shade_border_'+d._def.align);
 							//    icon_shade.attr("x",function(d){return d.w-30});
 							//    icon_shade_border.attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2);});
 							//}
-						}
+						};
 						
 						//icon.style("pointer-events","none");
 						icon_group.style("pointer-events","none");
 						if (d.resize) {
 							//var l = d._def.label;
 							//l = (typeof l === "function" ? l.call(d) : l)||"";
-							var l = d.id;
+							var l = d.name ? d.name : d.id;
 							d.w = Math.max(node_width,calculateTextWidth(l)+(d._def.inputs>0?7:0) );
 							d.h = Math.max(node_height,(Math.max(d.outputs,d._def.inputs)||0) * 15);
 						}
 										return d._def.label;
 									}
 								}
-								return ""; */
-								return d.id;
+								return "n.a.";
+								 */
+								return d.name ? d.name : d.id;
 						})
 							.attr('y', function(d){return (d.h/2)-1;})
 							.attr('class',function(d){
 								}
 							}
 							return ""; */
-							return d.id;
+							return d.name ? d.name : d.id;
 						});
 						if (!showStatus || !d.status) {
 							thisNode.selectAll('.node_status_group').style("display","none");
 
 		link.exit().remove();
 
-		var links = vis.selectAll(".link_path")
+		var links = vis.selectAll(".link_path");
 		links.attr("d",function(d){
 				var numOutputs = d.source.outputs || 1;
 				var sourcePort = d.sourcePort || 0;
 					" C "+(d.x1+scale*node_width)+" "+(d.y1+scaleY*node_height)+" "+
 					(d.x2-scale*node_width)+" "+(d.y2-scaleY*node_height)+" "+
 					(d.x2)+" "+d.y2;
-		})
+		});
 
 		link.classed("link_selected", function(d) { return d === selected_link || d.selected; });
 		link.classed("link_unknown",function(d) { return d.target.type == "unknown" || d.source.type == "unknown"});
 	function importNodes(newNodesStr,touchImport) {
 		
 		var createNewIds = true;
-		
-		// TODO: solve this more elegant as the system expects
+		var useStorage = false;
+
 		if ($("#node-input-arduino").prop('checked') === true) {
-			newNodesStr = RED.nodes.cppToJSON(newNodesStr);
+			nodesJSON = RED.nodes.cppToJSON(newNodesStr);
+			if (nodesJSON.count <= 0 || nodesJSON.skipped > 0) {
+				var note = "No (or not all) nodes imported, because some IDs existed already!";
+				RED.notify("<strong>Note</strong>: " + note, "warning");
+			}
+
+			newNodesStr = nodesJSON.data;
 			createNewIds = false;
+
+			if (useStorage) {
 			RED.storage.clear();
 			localStorage.setItem("audio_library_guitool", newNodesStr);
 			RED.storage.load();
 			redraw();
 			return;
 		}
+		}
 
 		try {
 			var result = RED.nodes.import(newNodesStr,createNewIds);
 	function showExportNodesDialog() {
 		mouse_mode = RED.state.EXPORT;
 		var nns = RED.nodes.createExportableNodeSet(moving_set);
-		$("#dialog-form").html($("script[data-template-name='export-clipboard-dialog']").html());
-		$("#node-input-export").val(JSON.stringify(nns));
-		$("#node-input-export").focus(function() {
+		//$("#dialog-form").html(getForm("dialog-form", "export-clipboard-dialog"));
+		var frm = getForm("dialog-form", "export-clipboard-dialog", function (d, f) {
+			$("#node-input-export").val(JSON.stringify(nns)).focus(function() {
 				var textarea = $(this);
 				textarea.select();
 				textarea.mouseup(function() {
 						textarea.unbind("mouseup");
 						return false;
 				});
-		});
+			}).focus();
 		$( "#dialog" ).dialog("option","title","Export nodes to clipboard").dialog( "open" );
-		$("#node-input-export").focus();
+		});
 	}
 
 	function showExportNodesLibraryDialog() {
 		mouse_mode = RED.state.EXPORT;
 		var nns = RED.nodes.createExportableNodeSet(moving_set);
-		$("#dialog-form").html($("script[data-template-name='export-library-dialog']").html());
+		//$("#dialog-form").html(this.getForm('export-library-dialog'));
+		getForm("dialog-form", "export-library-dialog", function(d, f) {
 		$("#node-input-filename").attr('nodes',JSON.stringify(nns));
 		$( "#dialog" ).dialog("option","title","Export nodes to library").dialog( "open" );
+		});
 	}
 
 	function showImportNodesDialog() {
 		mouse_mode = RED.state.IMPORT;
-		$("#dialog-form").html($("script[data-template-name='import-dialog']").html());
+		//$("#dialog-form").html(this.getForm('import-dialog'));
+		getForm("dialog-form", "import-dialog", function(d, f) {
 		$("#node-input-import").val("");
 		$( "#dialog" ).dialog("option","title","Import nodes").dialog( "open" );
+		});
 	}
 
 	function showRenameWorkspaceDialog(id) {
 		$( "#node-dialog-rename-workspace" ).dialog("open");
 	}
 
+	function getForm(formId, key, callback) {
+		var form = $("<h2>No form found.</h2>");
+		var frmPlugin = "resources/form/" + key + ".html";
+		$.get(frmPlugin, function(data) {
+			form = $("#" + formId);
+			$(form).empty();
+			$(form).append(data);
+			if(typeof callback == 'function') {
+				callback.call(this, form);
+			}
+		});
+		return form;
+	}
+
 	$("#node-dialog-rename-workspace form" ).submit(function(e) { e.preventDefault();});
 	$( "#node-dialog-rename-workspace" ).dialog({
 		modal: true,
 			RED.nodes.eachNode(function(n) { n.dirty = true;});
 			//TODO: subscribe/unsubscribe here
 			redraw();
-		}
+		},
+		getForm: getForm
 	};
 })();

gui/resources/nodes_def.json

+{"nodes":[
+  {"type":"AudioInputI2S","data":{"defaults":{"name":{"value":"new"}},"shortName":"i2s","inputs":0,"outputs":2,"category":"input-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioInputAnalog","data":{"defaults":{"name":{"value":"new"}},"shortName":"adc","inputs":0,"outputs":1,"category":"input-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioInputI2Sslave","data":{"defaults":{"name":{"value":"new"}},"shortName":"i2ss","inputs":0,"outputs":2,"category":"input-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioOutputI2S","data":{"defaults":{"name":{"value":"new"}},"shortName":"i2s","inputs":2,"outputs":0,"category":"output-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioOutputSPDIF","data":{"defaults":{"name":{"value":"new"}},"shortName":"spdif","inputs":2,"outputs":0,"category":"output-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioOutputAnalog","data":{"defaults":{"name":{"value":"new"}},"shortName":"dac","inputs":1,"outputs":0,"category":"output-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioOutputPWM","data":{"defaults":{"name":{"value":"new"}},"shortName":"pwm","inputs":1,"outputs":0,"category":"output-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioOutputI2Sslave","data":{"defaults":{"name":{"value":"new"}},"shortName":"i2ss","inputs":2,"outputs":0,"category":"output-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioMixer4","data":{"defaults":{"name":{"value":"new"}},"shortName":"mixer","inputs":4,"outputs":1,"category":"mixer-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioPlayMemory","data":{"defaults":{"name":{"value":"new"}},"shortName":"playMem","inputs":0,"outputs":1,"category":"play-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioPlaySdWav","data":{"defaults":{"name":{"value":"new"}},"shortName":"playSdWav","inputs":0,"outputs":2,"category":"play-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioPlaySdRaw","data":{"defaults":{"name":{"value":"new"}},"shortName":"playSdRaw","inputs":0,"outputs":1,"category":"play-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioPlaySerialflashRaw","data":{"defaults":{"name":{"value":"new"}},"shortName":"playFlashRaw","inputs":0,"outputs":1,"category":"play-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioPlayQueue","data":{"defaults":{"name":{"value":"new"}},"shortName":"queue","inputs":0,"outputs":1,"category":"play-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioRecordQueue","data":{"defaults":{"name":{"value":"new"}},"shortName":"queue","inputs":1,"outputs":0,"category":"record-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthWaveformSine","data":{"defaults":{"name":{"value":"new"}},"shortName":"sine","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthWaveformSineModulated","data":{"defaults":{"name":{"value":"new"}},"shortName":"sine_fm","inputs":1,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthWaveform","data":{"defaults":{"name":{"value":"new"}},"shortName":"waveform","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthToneSweep","data":{"defaults":{"name":{"value":"new"}},"shortName":"tonesweep","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthWaveformDc","data":{"defaults":{"name":{"value":"new"}},"shortName":"dc","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthNoiseWhite","data":{"defaults":{"name":{"value":"new"}},"shortName":"noise","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioSynthNoisePink","data":{"defaults":{"name":{"value":"new"}},"shortName":"pink","inputs":0,"outputs":1,"category":"synth-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectFade","data":{"defaults":{"name":{"value":"new"}},"shortName":"fade","inputs":1,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectChorus","data":{"defaults":{"name":{"value":"new"}},"shortName":"chorus","inputs":1,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectFlange","data":{"defaults":{"name":{"value":"new"}},"shortName":"flange","inputs":1,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectEnvelope","data":{"defaults":{"name":{"value":"new"}},"shortName":"envelope","inputs":1,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectMultiply","data":{"defaults":{"name":{"value":"new"}},"shortName":"multiply","inputs":2,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectDelay","data":{"defaults":{"name":{"value":"new"}},"shortName":"delay","inputs":1,"outputs":8,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectDelayExternal","data":{"defaults":{"name":{"value":"new"}},"shortName":"delayExt","inputs":1,"outputs":8,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioEffectBitcrusher","data":{"shortName":"bitcrusher","inputs":1,"outputs":1,"category":"effect-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioFilterBiquad","data":{"defaults":{"name":{"value":"new"}},"shortName":"biquad","inputs":1,"outputs":1,"category":"filter-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioFilterFIR","data":{"defaults":{"name":{"value":"new"}},"shortName":"fir","inputs":1,"outputs":1,"category":"filter-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioFilterStateVariable","data":{"defaults":{"name":{"value":"new"}},"shortName":"filter","inputs":2,"outputs":3,"category":"filter-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioAnalyzePeak","data":{"defaults":{"name":{"value":"new"}},"shortName":"peak","inputs":1,"outputs":0,"category":"analyze-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioAnalyzeFFT256","data":{"defaults":{"name":{"value":"new"}},"shortName":"fft256","inputs":1,"outputs":0,"category":"analyze-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioAnalyzeFFT1024","data":{"defaults":{"name":{"value":"new"}},"shortName":"fft1024","inputs":1,"outputs":0,"category":"analyze-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioAnalyzeToneDetect","data":{"defaults":{"name":{"value":"new"}},"shortName":"tone","inputs":1,"outputs":0,"category":"analyze-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioAnalyzePrint","data":{"defaults":{"name":{"value":"new"}},"shortName":"print","inputs":1,"outputs":0,"category":"analyze-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioControlSGTL5000","data":{"defaults":{"name":{"value":"new"}},"shortName":"sgtl5000","inputs":0,"outputs":0,"category":"control-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioControlWM8731","data":{"defaults":{"name":{"value":"new"}},"shortName":"wm8731","inputs":0,"outputs":0,"category":"control-function","color":"#E6E0F8","icon":"arrow-in.png"}},
+  {"type":"AudioControlWM8731master","data":{"defaults":{"name":{"value":"new"}},"shortName":"wm8731m","inputs":0,"outputs":0,"category":"control-function","color":"#E6E0F8","icon":"arrow-in.png"}}
+]}

gui/style.css

 
 #palette {
    background: #f3f3f3;
-   width: 140px;
+   width: 160px;
    text-align: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    border: 2px solid #999;
    background-position: 5% 50%;
    background-repeat: no-repeat;
-   width: 90px;
+   width: 110px;
    background-size: contain;
    position: relative;
 }
    border: 1px solid #999;
 }
 .palette_port_output {
-    left:85px;
+    left:105px;
 }
 
 .palette_node:hover .palette_port {