update adjustments and ui (#384)

* update

* update

* testit

* Revert "testit"

This reverts commit b1cc645161.

* update schema

* update

* add adjustment to serverinfo

* remove Adjustbool

* remove v4l2only

* fix json check for create effect

* update deb

* update

* update remote adjust

* update

* add eff schemas

assets/webconfig/js/content_colors.js

@@ -1,9 +1,8 @@
-
-var editor_color = null;
-var editor_smoothing = null;
-var editor_blackborder = null;
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+$(document).ready( function() {
+	performTranslation();
+	var editor_color = null;
+	var editor_smoothing = null;
+	var editor_blackborder = null;
 	
 	if(showOptHelp)
 	{
@@ -68,11 +67,15 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#btn_submit_blackborder').off().on('click',function() {
 		requestWriteConfig(editor_blackborder.getValue());
 	});
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	
+	//create introduction
+	if(showOptHelp)
+	{
+		createHint("intro", $.i18n('conf_colors_color_intro'), "editor_container_color");
+		createHint("intro", $.i18n('conf_colors_smoothing_intro'), "editor_container_smoothing");
+		createHint("intro", $.i18n('conf_colors_blackborder_intro'), "editor_container_blackborder");
+	}
+	
+	removeOverlay();
 });
 

assets/webconfig/js/content_dashboard.js

@@ -0,0 +1,46 @@
+$(document).ready( function() {
+	performTranslation();
+	
+	function updateComponents()
+	{
+		var components = serverInfo.info.components;
+		components_html = "";
+		for ( idx=0; idx<components.length;idx++)
+		{
+			components_html += '<tr><td>'+$.i18n('general_comp_'+components[idx].name)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
+		}
+		$("#tab_components").html(components_html);
+	}
+	
+	// get active led device
+	var leddevice = serverInfo.info.ledDevices.active;
+	$('#dash_leddevice').html(leddevice);
+
+	// get host
+	var hostname = serverInfo.info.hostname;
+	$('#dash_systeminfo').html(hostname+':'+jsonPort);
+	
+	$.get( "https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/version.json", function( data ) {
+		parsedUpdateJSON = JSON.parse(data);
+		latestVersion = parsedUpdateJSON[0].versionnr;
+		var cleanLatestVersion = latestVersion.replace(/\./g, '');
+		var cleanCurrentVersion = currentVersion.replace(/\./g, '');
+
+		$('#currentversion').html(currentVersion);
+		$('#latestversion').html(latestVersion);
+		
+		if ( cleanCurrentVersion < cleanLatestVersion )
+			$('#versioninforesult').html('<div style="margin:0px;" class="alert alert-warning">'+$.i18n('dashboard_infobox_message_updatewarning', latestVersion)+'</div>');
+		else
+			$('#versioninforesult').html('<div style="margin:0px;" class="alert alert-success">'+$.i18n('dashboard_infobox_message_updatesuccess')+'</div>');
+	});
+	
+	//interval update
+	updateComponents();
+	$(hyperion).on("cmd-serverinfo",updateComponents);
+	
+	if(showOptHelp)
+		createHintH("intro", $.i18n('dashboard_label_intro'), "dash_intro");
+	
+	removeOverlay();
+});

assets/webconfig/js/content_effects.js

@@ -1,13 +1,12 @@
-var olddEffects = [];
-var editorReady = false;
-var effects_editor = null;
-var confFgEff = parsedConfJSON.foregroundEffect.effect;
-var confBgEff = parsedConfJSON.backgroundEffect.effect;
-var foregroundEffect_editor = null;
-var backgroundEffect_editor = null;
-
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+$(document).ready( function() {
+	performTranslation();
+	var oldEffects = [];
+	var editorReady = false;
+	var effects_editor = null;
+	var confFgEff = serverConfig.foregroundEffect.effect;
+	var confBgEff = serverConfig.backgroundEffect.effect;
+	var foregroundEffect_editor = null;
+	var backgroundEffect_editor = null;
 	
 	if(showOptHelp)
 	{
@@ -108,44 +107,50 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		//requestWriteConfig(backgroundEffect_editor.getValue());
 		console.log(backgroundEffect_editor.getValue());
 	});
-
-});
-
-function updateEffectlist(event){
-	if(editorReady)
+	
+	//create introduction
+	if(showOptHelp)
 	{
-		var newEffects = event.response.info.effects;
-		if (newEffects.length != olddEffects.length)
+		createHint("intro", $.i18n('conf_effect_path_intro'), "editor_container_effects");
+		createHint("intro", $.i18n('conf_effect_fgeff_intro'), "editor_container_foregroundEffect");
+		createHint("intro", $.i18n('conf_effect_bgeff_intro'), "editor_container_backgroundEffect");
+	}
+
+	function updateEffectlist(){
+		if(editorReady)
 		{
-			$('#root_foregroundEffect_effect').html('');
-			var usrEffArr = [];
-			var sysEffArr = [];
-		
-			for(i = 0; i < newEffects.length; i++)
+			var newEffects = serverInfo.info.effects;
+			if (newEffects.length != oldEffects.length)
 			{
-				var effectName = newEffects[i].name;
-				if(!/^\:/.test(newEffects[i].file))
-					usrEffArr.push(effectName);
-				else
-					sysEffArr.push(effectName);
+				$('#root_foregroundEffect_effect').html('');
+				var usrEffArr = [];
+				var sysEffArr = [];
+		
+				for(i = 0; i < newEffects.length; i++)
+				{
+					var effectName = newEffects[i].name;
+					if(!/^\:/.test(newEffects[i].file))
+						usrEffArr.push(effectName);
+					else
+						sysEffArr.push(effectName);
+				}
+				$('#root_foregroundEffect_effect').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets')));
+				$('#root_foregroundEffect_effect').append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets')));
+				$('#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').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets')));
-			$('#root_foregroundEffect_effect').append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets')));
-			$('#root_backgroundEffect_effect').html($('#root_foregroundEffect_effect').html());
-			olddEffects = 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();
 		}
 	}
-}
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	
+	//interval update
 	$(hyperion).on("cmd-serverinfo",updateEffectlist);
+	
+	removeOverlay();
 });

assets/webconfig/js/content_effectsconfigurator.js

@@ -1,8 +1,15 @@
-
+$(document).ready( function() {
+	performTranslation();
 	var oldDelList = [];
+	var effectName = "";
+	var effects_editor = null;	
+	var effectPy = "";
 	
-	function updateDelEffectlist(event){
-		var newDelList = event.response.info.effects
+	if(showOptHelp)
+		createHintH("intro", $.i18n('effectsconfigurator_label_intro'), "intro_effc");
+	
+	function updateDelEffectlist(){
+		var newDelList = serverInfo.info.effects;
 		if(newDelList.length != oldDelList.length)
 		{
 			var EffectHtml = null;
@@ -18,35 +25,12 @@
 			$('#effectsdellist').trigger('change');
 		}
 	}
-
-$(hyperion).one("cmd-config-getschema", function(event) {
-	effects = parsedConfSchemaJSON.properties.effectSchemas.internal
-	EffectsHtml = "";
-	for(var idx=0; idx<effects.length; idx++)
-		{
-			EffectsHtml += '<option value="'+effects[idx].schemaContent.script+'">'+$.i18n(effects[idx].schemaContent.title)+'</option>';
-		}
-		$("#effectslist").html(EffectsHtml);
-		$("#effectslist").trigger("change");
-	});
-	
-	function validateEditor() {
-		if(effects_editor.validate().length)
-		{
-			showInfoDialog('error', $.i18n('infoDialog_effconf_invalidvalue_title'), $.i18n('infoDialog_effconf_invalidvalue_text'));
-			return false;
-		}
-		return true;
-	};
 	
 	function triggerTestEffect() {
 		var args = effects_editor.getEditor('root.args');
 		requestTestEffect(effectName, ":/effects/" + effectPy.slice(1), JSON.stringify(args.getValue()));
 	};
 	
-	effectName = "";
-	effects_editor = null;	
-	effectPy = "";
 	
 	$("#effectslist").off().on("change", function(event) {
 		for(var idx=0; idx<effects.length; idx++){
@@ -60,14 +44,24 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 			$("#name-input").trigger("change");
 		}
 		effects_editor.on('change',function() {
-			if ($("#btn_cont_test").hasClass("btn-success") && validateEditor())
+			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);
+				$('#btn_write').attr('disabled', false);
+			}
+			else
+			{
+				$('#btn_start_test').attr('disabled', true);
+				$('#btn_write').attr('disabled', true);
+			}
 		});
 	});
 	
-	$("#name-input").on('change keydown click focusout', function(event) {
+	$("#name-input").on('change keyup', function(event) {
 		effectName = $(this).val();
 		if ($(this).val() == '') {
             effects_editor.disable();
@@ -79,18 +73,16 @@ $(hyperion).one("cmd-config-getschema", function(event) {
     });
 	
 	$('#btn_write').off().on('click',function() {
-		if(validateEditor())
-		{
-			requestWriteEffect(effectName,effectPy,JSON.stringify(effects_editor.getValue()));
-			showInfoDialog('success', "", $.i18n('infoDialog_effconf_created_text', effectName));
-		}
+		requestWriteEffect(effectName,effectPy,JSON.stringify(effects_editor.getValue()));
+		$(hyperion).one("cmd-create-effect", function(event) {
+			if (event.response.success)
+				showInfoDialog('success', "", $.i18n('infoDialog_effconf_created_text', effectName));
+		});
+		
 	});
 
 	$('#btn_start_test').off().on('click',function() {
-		if(validateEditor())
-		{
-			triggerTestEffect();
-		}
+		triggerTestEffect();
 	});
 	
 	$('#btn_stop_test').off().on('click',function() {
@@ -104,7 +96,10 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#btn_delete').off().on('click',function() {
 		var name = $("#effectsdellist").val();
 		requestDeleteEffect(name);
-		showInfoDialog('success', "", $.i18n('infoDialog_effconf_deleted_text', name));
+		$(hyperion).one("cmd-delete-effect", function(event) {
+			if (event.response.success)
+				showInfoDialog('success', "", $.i18n('infoDialog_effconf_deleted_text', name));
+		});
 	});
 	
 	$('#effectsdellist').off().on('change', function(){
@@ -115,8 +110,18 @@ $(hyperion).one("cmd-config-getschema", function(event) {
         }
 	});
 	
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	//create basic effect list
+	var effects = 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");
+	
+	updateDelEffectlist();
+	
+	//interval update
 	$(hyperion).on("cmd-serverinfo",updateDelEffectlist);
-});
+	
+	removeOverlay();
+});

assets/webconfig/js/content_general.js

@@ -1,7 +1,9 @@
-
-var conf_editor = null;
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+$(document).ready( function() {
+	performTranslation();
+	
+	var importedConf;
+	var confName;
+	var conf_editor = null;
 	
 	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_gen_heading_title"), 'editor_container', 'btn_submit'));
 	if(showOptHelp)
@@ -23,16 +25,7 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		requestWriteConfig(conf_editor.getValue());
 	});
 	
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
-	
-	var importedConf;
-	var confName;
-	
+	//import
 	function dis_imp_btn(state)
 	{
 		state ? $('#btn_import_conf').attr('disabled', true) : $('#btn_import_conf').attr('disabled', false);
@@ -68,9 +61,9 @@ $(document).ready( function() {
 					else
 					{
 						//check config revision
-						if(content.general.configVersion !== parsedConfJSON.general.configVersion)
+						if(content.general.configVersion !== serverConfig.general.configVersion)
 						{
-							showInfoDialog('error', "", $.i18n('infoDialog_import_reverror_text', f.name, content.general.configVersion, parsedConfJSON.general.configVersion));
+							showInfoDialog('error', "", $.i18n('infoDialog_import_reverror_text', f.name, content.general.configVersion, serverConfig.general.configVersion));
 							dis_imp_btn(true);
 						}
 						else
@@ -86,21 +79,6 @@ $(document).ready( function() {
 		}
 	}
 	
-	$('#btn_export_conf').off().on('click', function(){
-		var crev = parsedConfJSON.general.configVersion;
-		var name = parsedConfJSON.general.name;
-	
-		var d = new Date();
-		var month = d.getMonth()+1;
-		var day = d.getDate();
-
-		var timestamp = d.getFullYear() + '.' +
-			(month<10 ? '0' : '') + month + '.' +
-			(day<10 ? '0' : '') + day;
-	
-		download(JSON.stringify(parsedConfJSON, null, "\t"), 'Hyperion-Config ('+name+') '+timestamp+'.json', "application/json");
-	});
-	
 	$('#btn_import_conf').off().on('click', function(){
 		showInfoDialog('import', $.i18n('infoDialog_import_confirm_title'), $.i18n('infoDialog_import_confirm_text', confName));
 			
@@ -117,5 +95,25 @@ $(document).ready( function() {
 			showInfoDialog('error', "", $.i18n('infoDialog_import_comperror_text'));
 	});
 	
+	//export
+	$('#btn_export_conf').off().on('click', function(){
+		var name = serverConfig.general.name;
+	
+		var d = new Date();
+		var month = d.getMonth()+1;
+		var day = d.getDate();
+
+		var timestamp = d.getFullYear() + '.' +
+			(month<10 ? '0' : '') + month + '.' +
+			(day<10 ? '0' : '') + day;
+	
+		download(JSON.stringify(serverConfig, null, "\t"), 'Hyperion-'+currentVersion+'-Backup ('+name+') '+timestamp+'.json', "application/json");
+	});
+	
+	//create introduction
+	if(showOptHelp)
+		createHint("intro", $.i18n('conf_general_intro'), "editor_container");
+	
+	removeOverlay();
 });
 

assets/webconfig/js/content_grabber.js

@@ -1,8 +1,7 @@
- 
-var conf_editor_v4l2 = null;
-var conf_editor_fg = null;
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+$(document).ready( function() {
+	performTranslation();
+	var conf_editor_v4l2 = null;
+	var conf_editor_fg = null;
 	
 	if(showOptHelp)
 	{
@@ -48,12 +47,14 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#btn_submit_v4l2').off().on('click',function() {
 		requestWriteConfig(conf_editor_v4l2.getValue());
 	});
-
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	
+	//create introduction
+	if(showOptHelp)
+	{
+		createHint("intro", $.i18n('conf_grabber_fg_intro'), "editor_container_fg");
+		createHint("intro", $.i18n('conf_grabber_v4l_intro'), "editor_container_v4l2");
+	}
+	
+	removeOverlay();
 });
 

assets/webconfig/js/content_index.js

@@ -4,86 +4,25 @@ $(document).ready( function() {
 	loadContentTo("#container_connection_lost","connection_lost");
 	loadContentTo("#container_restart","restart");
 	initWebSocket();
-	bindNavToContent("#load_dashboard","dashboard",true);
-	bindNavToContent("#load_remote","remote",false);
-	bindNavToContent("#load_huebridge","huebridge",false);
-	bindNavToContent("#load_support","support",false);
-	bindNavToContent("#load_update","update",false);
-	bindNavToContent("#load_confGeneral","general",false);
-	bindNavToContent("#load_confEffects","effects",false);
-	bindNavToContent("#load_confKodi","kodiconf",false);
-	bindNavToContent("#load_confLeds","leds",false);
-	bindNavToContent("#load_confGrabber","grabber",false);
-	bindNavToContent("#load_confColors","colors",false);
-	bindNavToContent("#load_confNetwork","network",false);
-	bindNavToContent("#load_effectsconfig","effects_configurator",false);
-	bindNavToContent("#load_logging","logging",false);
-	bindNavToContent("#load_webconfig","webconfig",false);
 
 	$(hyperion).on("cmd-serverinfo",function(event){
-		showOptHelp = parsedConfJSON.general.showOptHelp;
-		parsedServerInfoJSON = event.response;
-		currentVersion = parsedServerInfoJSON.info.hyperion[0].version;
-		cleanCurrentVersion = currentVersion.replace(/\./g, '');
+		serverInfo = event.response;
+		currentVersion = serverInfo.info.hyperion[0].version;
+		$(hyperion).trigger("ready");
 		
-		if (parsedServerInfoJSON.info.hyperion[0].config_modified)
+		if (serverInfo.info.hyperion[0].config_modified)
 			$("#hyperion_reload_notify").fadeIn("fast");
 		else
 			$("#hyperion_reload_notify").fadeOut("fast");
 
-		// get active led device
-		var leddevice = parsedServerInfoJSON.info.ledDevices.active;
-		if ($("#content_dashboard").length > 0)
-		{
-			$('#dash_leddevice').html(leddevice);
-		}
-
-		// get host
-		var hostname = parsedServerInfoJSON.info.hostname;
-		if ($("#content_dashboard").length > 0)
-		{
-			$('#dash_systeminfo').html(hostname+':'+hyperionport);
-		}
-
-
-		if ($("#content_dashboard").length > 0)
-		{
-			var components = parsedServerInfoJSON.info.components;
-			components_html = "";
-			for ( idx=0; idx<components.length;idx++)
-			{
-				components_html += '<tr><td>'+$.i18n('general_comp_'+components[idx].name)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
-			}
-			$("#tab_components").html(components_html);
-
-			$.get( "https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/version.json", function( data ) {
-				parsedUpdateJSON = JSON.parse(data);
-				latestVersion = parsedUpdateJSON[0].versionnr;
-				cleanLatestVersion = latestVersion.replace(/\./g, '');
-
-				$('#currentversion').html(' V'+currentVersion);
-				$('#latestversion').html(' V'+latestVersion);
-
-				if ( cleanCurrentVersion < cleanLatestVersion )
-				{
-					$('#versioninforesult').html('<div style="margin:0px;" class="alert alert-warning">'+$.i18n('dashboard_infobox_message_updatewarning', latestVersion)+'</div>');
-				}
-				else
-				{
-					$('#versioninforesult').html('<div style="margin:0px;" class="alert alert-success">'+$.i18n('dashboard_infobox_message_updatesuccess')+'</div>');
-				}
-			});
-		}
 		
 		if ($("#logmessages").length == 0 && loggingStreamActive)
 		{
 			requestLoggingStop();
+			loggingStreamActive = false;
 		}
 
-		
-		$("#loading_overlay").removeClass("overlay");
-
-		if (!parsedServerInfoJSON.info.hyperion[0].config_writeable)
+		if (!serverInfo.info.hyperion[0].config_writeable)
 		{
 			showInfoDialog('uilock',$.i18n('InfoDialog_nowrite_title'),$.i18n('InfoDialog_nowrite_text'));
 			$('#wrapper').toggle(false);
@@ -99,13 +38,17 @@ $(document).ready( function() {
 	}); // end cmd-serverinfo
 
 	$(hyperion).one("cmd-config-getschema", function(event) {
-		parsedConfSchemaJSON = event.response.result;
+		serverSchema = event.response.result;
 		requestServerConfig();
+		
+		schema = serverSchema.properties;
 	});
 
 	$(hyperion).one("cmd-config-getconfig", function(event) {
-		parsedConfJSON = event.response.result;
+		serverConfig = event.response.result;
 		requestServerInfo();
+		
+		showOptHelp = serverConfig.general.showOptHelp;
 	});
 
 	$(hyperion).on("error",function(event){
@@ -115,10 +58,19 @@ $(document).ready( function() {
 	$(hyperion).on("open",function(event){
 		requestServerConfigSchema();
 	});
-
+	
+	$(hyperion).one("ready", function(event) {
+		loadContent();
+	});
+	
 	$("#btn_hyperion_reload").on("click", function(){
 		initRestart();
 	});
+	
+	$(".mnava").on('click', function(e){
+		loadContent(e);
+	});
+
 });
 
 $(function(){

assets/webconfig/js/content_kodi.js

@@ -1,7 +1,6 @@
-
-var conf_editor = null;
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+$(document).ready( function() {
+	var conf_editor = null;
+	performTranslation();
 	
 	$('#conf_cont').append(createOptPanel('fa-play-circle-o', $.i18n("conf_kodi_label_title"), 'editor_container', 'btn_submit'));
 	if(showOptHelp)
@@ -21,11 +20,10 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		requestWriteConfig(conf_editor.getValue());
 	});
 	
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	//create introduction
+	if(showOptHelp)
+		createHint("intro", $.i18n('conf_kodi_intro'), "editor_container");
+	
+	removeOverlay();
 });
 

assets/webconfig/js/content_leds.js

@@ -5,21 +5,6 @@ var IntListIds;
 var StrListIds;
 var BoolListIds;
 
-function get_hue_lights(){
-	$.ajax({
-		type: "GET",
-		url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
-		processData: false,
-		contentType: 'application/json',
-		success: function(r) {
-			for(var lightid in r){
-				//console.log(r[lightid].name);
-				$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
-			}
-		}
-	});
-}
-
 function validateText(){
 	e = isJsonString($("#ledconfig").val());
 
@@ -34,6 +19,7 @@ function loadStoredValues()
 {
 	if (storageComp() && getStorage('ip_cl_ledstop') != null)
 	{	
+		
 		for(var i = 0; i < IntListIds.length; i++)
 		{
 			$('#'+IntListIds[i]).val(parseInt(getStorage(IntListIds[i])));
@@ -139,22 +125,21 @@ function createClassicLeds(){
 	var reverse = $("#ip_cl_reverse").is(":checked");
 	
 	//advanced values
-	var rawledsvdepth = parseInt($("#ip_cl_rawledsvdepth").val());
-	var rawledshdepth = parseInt($("#ip_cl_rawledshdepth").val());
-	var rawledsedgegap = parseInt($("#ip_cl_rawledsedgegap").val());
-	var rawledscornergap = parseInt($("#ip_cl_rawledscornergap").val());
+	var ledsVDepth = parseInt($("#ip_cl_ledsvdepth").val())/100;
+	var ledsHDepth = parseInt($("#ip_cl_ledshdepth").val())/100;
+	var edgeVGap = parseInt($("#ip_cl_ledsedgegap").val())/100/2;
+	//var cornerVGap = parseInt($("#ip_cl_ledscornergap").val())/100/2;
+	var overlap = $("#ip_cl_overlap").val()/4000;
 	
 	//helper
-	var ledsVDepth = rawledsvdepth /100;
-	var ledsHDepth = rawledshdepth /100;
-	var edgeVGap = rawledsedgegap /100/2;
 	var edgeHGap = edgeVGap/(16/9);
-	var cornerVGap = rawledscornergap /100/2;
-	var cornerHGap = cornerVGap/(16/9);
+	//var cornerHGap = cornerVGap/(16/9);
 	var Vmin = 0.0 + edgeVGap;
 	var Vmax = 1.0 - edgeVGap;
 	var Hmin = 0.0 + edgeHGap;
 	var Hmax = 1.0 - edgeHGap;
+	var Hdiff = Hmax-Hmin;
+	var Vdiff = Vmax-Vmin;
 	var ledArray = [];
 	
 	function createFinalArray(array){
@@ -168,15 +153,7 @@ function createClassicLeds(){
 		}
 		createLedPreview(finalLedArray, 'classic');
 	}
-	
-	function validateGap(){
-		if (ledsgpos+ledsglength > ledArray.length){
-			showInfoDialog('error', $.i18n('infoDialog_leds_gap_title'), $.i18n('infoDialog_leds_gap_text'));
-			return false
-		}
-		return true
-	}
-	
+
 	function rotateArray(array, times){
 		if (times > "0"){
 			while( times-- ){
@@ -193,6 +170,23 @@ function createClassicLeds(){
 		}
 	}
 	
+	function valScan(val)
+	{
+		if(val > 1)
+			return val = 1;
+		if(val < 0)
+			return val = 0;
+		return val;
+	}
+	
+	function ovl(scan,val)
+	{
+		if(scan == "+")
+			return valScan(val += overlap);
+		else
+			return valScan(val -= overlap);
+	}
+	
 	function createLedArray(hmin, hmax, vmin, vmax){
 		hmin = round(hmin);
 		hmax = round(hmax);
@@ -203,79 +197,82 @@ function createClassicLeds(){
 	
 	function createTopLeds(){
 		step=(Hmax-Hmin)/ledstop;
-		hmin=Hmin
-		if(cornerVGap != '0'){
-			step=(Hmax-Hmin-(cornerHGap*2))/ledstop;
-			hmin=Hmin+(cornerHGap);
-		}
-		vmin=Vmin
+		//if(cornerVGap != '0')
+		//	step=(Hmax-Hmin-(cornerHGap*2))/ledstop;
+
+		vmin=Vmin;
 		vmax=vmin+ledsHDepth;
-		hmax=hmin+step
 		for (var i = 0; i<ledstop; i++){
+			hmin = ovl("-",(Hdiff/ledstop*[i])+edgeHGap);
+			hmax = ovl("+",(Hdiff/ledstop*[i])+step+edgeHGap);
 			createLedArray(hmin, hmax, vmin, vmax);
-			hmin += step
-			hmax += step
 		}	
 	}
 	
 	function createLeftLeds(){
 		step=(Vmax-Vmin)/ledsleft;
-		vmax=Vmax
-		if(cornerVGap != '0'){
-			step=(Vmax-Vmin-(cornerVGap*2))/ledsleft;
-			vmax=Vmax-(cornerVGap);
-		}
+		//if(cornerVGap != '0')
+		//	step=(Vmax-Vmin-(cornerVGap*2))/ledsleft;
+
 		hmin=Hmin;
 		hmax=hmin+ledsVDepth;
-		vmin=vmax-step
-		for (var i = ledsleft; i>0; i--){
+		for (var i = ledsleft-1; i>-1; --i){
+			vmin = ovl("-",(Vdiff/ledsleft*[i])+edgeVGap);
+			vmax = ovl("+",(Vdiff/ledsleft*[i])+step+edgeVGap);
 			createLedArray(hmin, hmax, vmin, vmax);
-			vmin -= step
-			vmax -= step
 		}
 	}
 	
 	function createRightLeds(){
 		step=(Vmax-Vmin)/ledsright;
-		vmin=Vmin
-		if(cornerVGap != '0'){
-			step=(Vmax-Vmin-(cornerVGap*2))/ledsright;
-			vmin=Vmin+(cornerVGap);
-		}
+		//if(cornerVGap != '0')
+		//	step=(Vmax-Vmin-(cornerVGap*2))/ledsright;
+
 		hmax=Hmax;
 		hmin=hmax-ledsVDepth;
-		vmax=vmin+step
 		for (var i = 0; i<ledsright; i++){
-			createLedArray(hmin, hmax, vmin, vmax);	
-			vmin += step
-			vmax += step			
+			vmin = ovl("-",(Vdiff/ledsright*[i])+edgeVGap);
+			vmax = ovl("+",(Vdiff/ledsright*[i])+step+edgeVGap);
+			createLedArray(hmin, hmax, vmin, vmax);			
 		}
 	}
 	
 	function createBottomLeds(){
 		step=(Hmax-Hmin)/ledsbottom;
-		hmax=Hmax
-		if(cornerVGap != '0'){
-			step=(Hmax-Hmin-(cornerHGap*2))/ledsbottom;
-			hmax=Hmax-(cornerHGap);
-		}
+		//if(cornerVGap != '0')
+		//	step=(Hmax-Hmin-(cornerHGap*2))/ledsbottom;
+		
 		vmax=Vmax;
 		vmin=vmax-ledsHDepth;
-		hmin=hmax-step
-		for (var i = ledsbottom; i>0; i--){
+		for (var i = ledsbottom-1; i>-1; i--){
+			hmin = ovl("-",(Hdiff/ledsbottom*[i])+edgeHGap);
+			hmax = ovl("+",(Hdiff/ledsbottom*[i])+step+edgeHGap);
 			createLedArray(hmin, hmax, vmin, vmax);
-			hmin -= step;
-			hmax -= step;
 		}
 	}
 	
 	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
 
-	if(ledsglength != "0" && validateGap()){
+	//check led gap pos
+	if (ledsgpos+ledsglength > ledArray.length)
+	{
+		var mpos = Math.max(0,ledArray.length-ledsglength);
+		$('#ip_cl_ledsgpos').val(mpos);
+		ledsgpos = mpos;
+	}
+	
+	//check led gap length
+	if(ledsglength >= ledArray.length)
+	{
+		$('#ip_cl_ledsglength').val(ledArray.length-1);
+		ledsglength = ledArray.length-ledsglength-1;
+	}
+	
+	if(ledsglength != 0){
 		ledArray.splice(ledsgpos, ledsglength);
 	}
 	
-	if (position != "0"){
+	if (position != 0){
 		rotateArray(ledArray, position);
 	}
 
@@ -368,11 +365,19 @@ $(document).ready(function() {
 	// translate
 	performTranslation();
 	
+	//add intros
+	if(showOptHelp)
+	{
+		createHintH("intro", $.i18n('conf_leds_device_intro'), "leddevice_intro");
+		createHintH("intro", $.i18n('conf_leds_layout_intro'), "layout_intro");
+		$('#led_vis_help').html('<div><div class="led_ex" style="background-color:black;margin-right:5px;margin-top:3px"></div><div style="display:inline-block;vertical-align:top">'+$.i18n('conf_leds_layout_preview_l1')+'</div></div><div class="led_ex" style="background-color:grey;margin-top:3px;margin-right:2px"></div><div class="led_ex" style="background-color: rgb(169, 169, 169);margin-right:5px;margin-top:3px;"></div><div style="display:inline-block;vertical-align:top">'+$.i18n('conf_leds_layout_preview_l2')+'</div>');
+	}
+	
 	//gather ids
 	IntListIds = $('.led_val_int').map(function() { return this.id; }).get();
 	StrListIds = $('.led_val_string').map(function() { return this.id; }).get();
 	BoolListIds = $('.led_val_bool').map(function() { return this.id; }).get();
-
+	
 	// restore values from storage
 	loadStoredValues();
 	
@@ -420,54 +425,82 @@ $(document).ready(function() {
 	});
 
 	// fill textfield with current led conf and copy to finalLedArray
-	$(hyperion).one("cmd-config-getconfig",function(event){
-		$("#ledconfig").text(JSON.stringify(event.response.result.leds, null, "\t"));
-		finalLedArray = event.response.result.leds;
+	$("#ledconfig").text(JSON.stringify(serverConfig.leds, null, "\t"));
+	finalLedArray = serverConfig.leds;
+	
+	// create and update editor
+	var conf_editor = null;
+	$("#leddevices").off().on("change", function() {
+		generalOptions  = serverSchema.properties.device;
+		specificOptions = serverSchema.properties.alldevices[$(this).val()];
+		conf_editor = createJsonEditor('editor_container', {
+			generalOptions : generalOptions,
+			specificOptions : specificOptions,
+		});
+		
+		values_general = {};
+		values_specific = {};
+		isCurrentDevice = (serverInfo.info.ledDevices.active == $(this).val());
+
+		for(var key in serverConfig.device){
+			if (key != "type" && key in generalOptions.properties)
+				values_general[key] = serverConfig.device[key];
+		};
+		conf_editor.getEditor("root.generalOptions").setValue( values_general );
+
+		if (isCurrentDevice)
+		{
+			specificOptions_val = conf_editor.getEditor("root.specificOptions").getValue()
+			for(var key in specificOptions_val){
+					values_specific[key] = (key in serverConfig.device) ? serverConfig.device[key] : specificOptions_val[key];
+			};
+
+			conf_editor.getEditor("root.specificOptions").setValue( values_specific );
+		};
+		
+		// change save button state based on validation result
+		conf_editor.validate().length ? $('#btn_submit_controller').attr('disabled', true) : $('#btn_submit_controller').attr('disabled', false);
 	});
 	
 	// create led device selection
-	$(hyperion).one("cmd-serverinfo",function(event){
-		server = event.response;
-		ledDevices = server.info.ledDevices.available
-		devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
-		devRPiPWM = ['ws281x'];
-		devRPiGPIO = ['piblaster'];
-		devNET = ['atmoorb', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
-		devUSB = ['adalight', 'dmx', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
-		
-		var optArr = [[]];
-		optArr[1]=[];
-		optArr[2]=[];
-		optArr[3]=[];
-		optArr[4]=[];
-		optArr[5]=[];
-		
-		for (idx=0; idx<ledDevices.length; idx++)
-		{
-			if($.inArray(ledDevices[idx], devRPiSPI) != -1)
-				optArr[0].push(ledDevices[idx]);
-			else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
-				optArr[1].push(ledDevices[idx]);
-			else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
-				optArr[2].push(ledDevices[idx]);
-			else if($.inArray(ledDevices[idx], devNET) != -1)
-				optArr[3].push(ledDevices[idx]);
-			else if($.inArray(ledDevices[idx], devUSB) != -1)
-				optArr[4].push(ledDevices[idx]);
-			else
-				optArr[5].push(ledDevices[idx]);
-		}
-		
-		$("#leddevices").append(createSel(optArr[0], $.i18n('conf_leds_optgroup_RPiSPI')));
-		$("#leddevices").append(createSel(optArr[1], $.i18n('conf_leds_optgroup_RPiPWM')));
-		$("#leddevices").append(createSel(optArr[2], $.i18n('conf_leds_optgroup_RPiGPIO')));
-		$("#leddevices").append(createSel(optArr[3], $.i18n('conf_leds_optgroup_network')));
-		$("#leddevices").append(createSel(optArr[4], $.i18n('conf_leds_optgroup_usb')));
-		$("#leddevices").append(createSel(optArr[5], $.i18n('conf_leds_optgroup_debug')));
-
-		$("#leddevices").val(server.info.ledDevices.active);
-		$("#leddevices").trigger("change");
-	});
+	ledDevices = serverInfo.info.ledDevices.available
+	devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
+	devRPiPWM = ['ws281x'];
+	devRPiGPIO = ['piblaster'];
+	devNET = ['atmoorb', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
+	devUSB = ['adalight', 'dmx', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
+	
+	var optArr = [[]];
+	optArr[1]=[];
+	optArr[2]=[];
+	optArr[3]=[];
+	optArr[4]=[];
+	optArr[5]=[];
+	
+	for (idx=0; idx<ledDevices.length; idx++)
+	{
+		if($.inArray(ledDevices[idx], devRPiSPI) != -1)
+			optArr[0].push(ledDevices[idx]);
+		else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
+			optArr[1].push(ledDevices[idx]);
+		else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
+			optArr[2].push(ledDevices[idx]);
+		else if($.inArray(ledDevices[idx], devNET) != -1)
+			optArr[3].push(ledDevices[idx]);
+		else if($.inArray(ledDevices[idx], devUSB) != -1)
+			optArr[4].push(ledDevices[idx]);
+		else
+			optArr[5].push(ledDevices[idx]);
+	}
+	
+	$("#leddevices").append(createSel(optArr[0], $.i18n('conf_leds_optgroup_RPiSPI')));
+	$("#leddevices").append(createSel(optArr[1], $.i18n('conf_leds_optgroup_RPiPWM')));
+	$("#leddevices").append(createSel(optArr[2], $.i18n('conf_leds_optgroup_RPiGPIO')));
+	$("#leddevices").append(createSel(optArr[3], $.i18n('conf_leds_optgroup_network')));
+	$("#leddevices").append(createSel(optArr[4], $.i18n('conf_leds_optgroup_usb')));
+	$("#leddevices").append(createSel(optArr[5], $.i18n('conf_leds_optgroup_debug')));
+	$("#leddevices").val(serverInfo.info.ledDevices.active);
+	$("#leddevices").trigger("change");
 
 	// validate textfield and update preview
 	$("#leds_custom_updsim").off().on("click", function() {
@@ -494,6 +527,21 @@ $(document).ready(function() {
 		toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
 	});
 	
+	// open checklist
+	$('#leds_prev_checklist').off().on("click", function() {
+		var liList = [$.i18n('conf_leds_leyout_checkp1'),$.i18n('conf_leds_leyout_checkp3'),$.i18n('conf_leds_leyout_checkp2'),$.i18n('conf_leds_leyout_checkp4')];
+		var ul = document.createElement("ul");
+		ul.className = "checklist"
+		
+		for(var i = 0; i<liList.length; i++)
+		{
+			var li = document.createElement("li");
+			li.innerHTML = liList[i];
+			ul.appendChild(li);
+		}
+		showInfoDialog('checklist', "", ul);
+	});
+	
 	// nav
 	$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
 		var target = $(e.target).attr("href") // activated tab
@@ -503,57 +551,6 @@ $(document).ready(function() {
 			ledsCustomCfgInitialized = true;
 		}
 	});
-
-	// create and update editor
-	var conf_editor = null;
-	$("#leddevices").off().on("change", function(event) {
-		generalOptions  = parsedConfSchemaJSON.properties.device;
-		specificOptions = parsedConfSchemaJSON.properties.alldevices[$(this).val()];
-		conf_editor = createJsonEditor('editor_container', {
-			generalOptions : generalOptions,
-			specificOptions : specificOptions,
-		});
-		
-		values_general = {};
-		values_specific = {};
-		isCurrentDevice = (server.info.ledDevices.active == $(this).val());
-
-		for(var key in parsedConfJSON.device){
-			if (key != "type" && key in generalOptions.properties)
-				values_general[key] = parsedConfJSON.device[key];
-		};
-		conf_editor.getEditor("root.generalOptions").setValue( values_general );
-
-		if (isCurrentDevice)
-		{
-			specificOptions_val = conf_editor.getEditor("root.specificOptions").getValue()
-			for(var key in specificOptions_val){
-					values_specific[key] = (key in parsedConfJSON.device) ? parsedConfJSON.device[key] : specificOptions_val[key];
-			};
-
-			conf_editor.getEditor("root.specificOptions").setValue( values_specific );
-		};
-		
-		if ($(this).val() == "philipshue")
-		{
-			$("#huebridge").show();
-
-			$("#ip").attr('value', values_specific.output);
-			$("#user").attr('value', values_specific.username);
-
-			if($("#ip").val() != '' && $("#user").val() != '') {
-				get_hue_lights();
-			}
-
-		}
-		else
-		{
-			$("#huebridge").hide();
-		}
-		
-		// change save button state based on validation result
-		conf_editor.validate().length ? $('#btn_submit_controller').attr('disabled', true) : $('#btn_submit_controller').attr('disabled', false);
-	});
 	
 	// save led device config
 	$("#btn_submit_controller").off().on("click", function(event) {
@@ -574,7 +571,7 @@ $(document).ready(function() {
 		requestWriteConfig(result)
 	});
 
-	requestServerConfig();
+	removeOverlay();
 });
 
 

assets/webconfig/js/content_logging.js

@@ -1,17 +1,15 @@
-
-var conf_editor = null;
-
-
-$(document).ready(function() {
+	var conf_editor = null;
+	var createdCont = false;
 	performTranslation();
 	requestLoggingStart();
-	
-	schema = parsedConfSchemaJSON.properties;
+
+$(document).ready(function() {
 	
 	$('#conf_cont').append(createOptPanel('fa-reorder', $.i18n("edt_conf_log_heading_title"), 'editor_container', 'btn_submit'));
 	if(showOptHelp)
 	{
 		$('#conf_cont').append(createHelpTable(schema.logger.properties, $.i18n("edt_conf_log_heading_title")));
+		createHintH("intro", $.i18n('conf_logging_label_intro'), "log_head");
 	}
 	
 	conf_editor = createJsonEditor('editor_container', {
@@ -26,45 +24,45 @@ $(document).ready(function() {
 		requestWriteConfig(conf_editor.getValue());
 	});
 	
-	$('#btn_autoscroll').off().on('click',function() {
-		toggleClass('#btn_autoscroll', "btn-success", "btn-danger");
-	});
-	
 	if (!loggingHandlerInstalled)
 	{
 		loggingHandlerInstalled = true;
 		$(hyperion).on("cmd-logging-update",function(event){
-			if ($("#logmessages").length == 0 && loggingStreamActive)
+			messages = (event.response.result.messages);
+			if(messages.length != 0 && !createdCont)
 			{
-				requestLoggingStop();
+				$('#log_content').html('<pre><div id="logmessages" style="overflow:scroll;max-height:400px"></div></pre><button  class="btn btn-primary" id="btn_pbupload">'+$.i18n('conf_logging_btn_pbupload')+'</button><button class="btn btn-success" id="btn_autoscroll" style="margin-left:10px;">'+$.i18n('conf_logging_btn_autoscroll')+'</button>');
+				createdCont = true;
+				
+				$('#btn_autoscroll').off().on('click',function() {
+					toggleClass('#btn_autoscroll', "btn-success", "btn-danger");
+				});
 			}
-			else
+			for(var idx=0; idx<messages.length; idx++)
 			{
-				messages = (event.response.result.messages);
-				for(var idx=0; idx<messages.length; idx++)
-				{
-					app_name = messages[idx].appName;
-					logger_name = messages[idx].loggerName;
-					function_ = messages[idx].function;
-					line = messages[idx].line;
-					file_name = messages[idx].fileName;
-					msg = messages[idx].message;
-					level_string = messages[idx].levelString;
-					
-					var debug = "";
-					
-					if(level_string == "DEBUG") {
-						debug = "&lt;"+file_name+":"+line+":"+function_+"()&gt; ";
-					}
-					
-					$("#logmessages").html($("#logmessages").html()+"\n <code>"+"["+app_name+" "+logger_name+"] &lt;"+level_string+"&gt; "+debug+msg+"</code>");
-				}
-				if($("#btn_autoscroll").hasClass('btn-success')){
-					$('#logmessages').stop().animate({
-						scrollTop: $('#logmessages')[0].scrollHeight
-					}, 800);
+				app_name = messages[idx].appName;
+				logger_name = messages[idx].loggerName;
+				function_ = messages[idx].function;
+				line = messages[idx].line;
+				file_name = messages[idx].fileName;
+				msg = messages[idx].message;
+				level_string = messages[idx].levelString;
+				
+				var debug = "";
+				
+				if(level_string == "DEBUG") {
+					debug = "&lt;"+file_name+":"+line+":"+function_+"()&gt; ";
 				}
+				
+				$("#logmessages").html($("#logmessages").html()+"\n <code>"+"["+app_name+" "+logger_name+"] &lt;"+level_string+"&gt; "+debug+msg+"</code>");
+			}
+			if($("#btn_autoscroll").hasClass('btn-success')){
+				$('#logmessages').stop().animate({
+					scrollTop: $('#logmessages')[0].scrollHeight
+				}, 800);
 			}
 		});
 	}
+	
+	removeOverlay();
 });

assets/webconfig/js/content_network.js

@@ -1,13 +1,11 @@
-
-var conf_editor_json = null;
-var conf_editor_proto = null;
-var conf_editor_bobl = null;
-var conf_editor_udpl = null;
-var conf_editor_forw = null;
-
-$(hyperion).one("cmd-config-getschema", function(event) {
+$(document).ready( function() {
+	performTranslation();
 	
-	schema = parsedConfSchemaJSON.properties;
+	var conf_editor_json = null;
+	var conf_editor_proto = null;
+	var conf_editor_bobl = null;
+	var conf_editor_udpl = null;
+	var conf_editor_forw = null;
 	
 	if(showOptHelp)
 	{
@@ -118,11 +116,16 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		});
 	}
 	
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+	//create introduction
+	if(showOptHelp)
+	{
+		createHint("intro", $.i18n('conf_network_json_intro'), "editor_container_jsonserver");
+		createHint("intro", $.i18n('conf_network_proto_intro'), "editor_container_protoserver");
+		createHint("intro", $.i18n('conf_network_bobl_intro'), "editor_container_boblightserver");
+		createHint("intro", $.i18n('conf_network_udpl_intro'), "editor_container_udplistener");
+		createHint("intro", $.i18n('conf_network_forw_intro'), "editor_container_forwarder");
+	}
+	
+	removeOverlay();
 });
 

assets/webconfig/js/content_remote.js

@@ -1,9 +1,81 @@
+$(document).ready(function() {
+	performTranslation();
+	
+	var oldEffects = [];
+	var cpcolor = '#B500FF';
+	var mappingList = serverSchema.properties.color.properties.imageToLedMappingType.enum;
 
+	//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(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");
+	}
+	
+	//color adjustment
+	var sColor = sortProperties(serverSchema.properties.color.properties.channelAdjustment.items.properties)
+	var values = serverInfo.info.adjustment[0]
+	
+	for(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].key == "brightness" || sColor[key].key == "brightnessMin")
+					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.0" max="1.0" step="0.05" value="'+value+'"/>';
+				else
+					property = '<input id="cr_'+sColor[key].key+'" type="number" class="form-control" min="0.0" max="4.0" step="0.1" value="'+value+'"/>';
+				
+				$('.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.value);
+				});
+			}
+		}
+	}
+
+	function updateRemote()
+	{
+		if ($('#componentsbutton').length == 0)
+		{
+			$(hyperion).off("cmd-serverinfo",updateRemote);
+		}
+		else
+		{
+			updateInputSelect();
+			updateLedMapping();
+			updateComponents();
+			updateEffectlist();
+		}
+	}
+	
 	function updateInputSelect()
 	{	
-		$('#sstbody').html("");
+		$('.sstbody').html("");
 		var data = "";
-		var prios = parsedServerInfoJSON.info.priorities
+		var prios = serverInfo.info.priorities
 		var i;
 		for(i = 0; i < prios.length; i++)
 		{
@@ -30,7 +102,7 @@
 			if(compId == "10")
 				owner = $.i18n('remote_effects_label_effects')+'  '+owner;
 			if(compId == "9")
-				owner = $.i18n('remote_colors_label_color')+'  '+'<div style="width:18px; height:18px; border-radius:20px; margin-bottom:-4px; border:1px grey solid; background-color: rgb('+prios[i].value.RGB+'); display:inline-block" title="RGB: ('+prios[i].value.RGB+')"></div>';
+				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('+prios[i].value.RGB+'); display:inline-block" title="RGB: ('+prios[i].value.RGB+')"></div>';
 			if(compId == "7")
 				owner = $.i18n('general_comp_GRABBER')+': ('+owner+')';
 			if(compId == "8")
@@ -39,6 +111,8 @@
 				owner = $.i18n('general_comp_BOBLIGHTSERVER');
 			if(compId == "5")
 				owner = $.i18n('general_comp_UDPLISTENER');
+			if(owner == "Off")
+				owner = $.i18n('general_btn_off');
 			if(duration)
 				owner += '<br/><span style="font-size:80%; color:grey;">'+$.i18n('remote_input_duration')+' '+duration.toFixed(0)+$.i18n('edt_append_s')+'</span>';
 			
@@ -48,11 +122,11 @@
 				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));
+				$('.sstbody').append(createTableRow([origin, owner, priority, btn], false, true));
 		}
-		var btn_auto_color = (parsedServerInfoJSON.info.priorities_autoselect? "btn-success" : "btn-danger");
-		var btn_auto_state = (parsedServerInfoJSON.info.priorities_autoselect? "disabled" : "enabled");
-		var btn_auto_text = (parsedServerInfoJSON.info.priorities_autoselect? $.i18n('general_btn_on') : $.i18n('general_btn_off'));
+		var btn_auto_color = (serverInfo.info.priorities_autoselect? "btn-success" : "btn-danger");
+		var btn_auto_state = (serverInfo.info.priorities_autoselect? "disabled" : "enabled");
+		var btn_auto_text = (serverInfo.info.priorities_autoselect? $.i18n('general_btn_on') : $.i18n('general_btn_off'));
 		$('#auto_btn').html('<button id="srcBtn'+i+'" type="button" '+btn_auto_state+' class="btn '+btn_auto_color+'" style="margin:10px;display:inline-block;" onclick="requestSetSource(\'auto\');">'+$.i18n('remote_input_label_autoselect')+' ('+btn_auto_text+')</button>');
 		
 		var max_width=100;
@@ -65,8 +139,7 @@
 	
 	function updateLedMapping()
 	{
-		mappingList = ["multicolor_mean", "unicolor_mean"];
-		mapping = parsedServerInfoJSON.info.ledMAppingType;
+		mapping = serverInfo.info.ledMAppingType;
 
 		$('#mappingsbutton').html("");
 		for(var ix = 0; ix < mappingList.length; ix++)
@@ -76,52 +149,42 @@
 			else
 				btn_style = 'btn-warning';
 
-			$('#mappingsbutton').append('<button type="button" id="lmBtn_'+mappingList[ix]+'" class="btn btn-lg '+btn_style+'" style="margin:10px;min-width:200px" onclick="requestMappingType(\''+mappingList[ix]+'\');">'+$.i18n('remote_maptype_label_'+mappingList[ix])+'</button><br/>');
+			$('#mappingsbutton').append('<button type="button" id="lmBtn_'+mappingList[ix]+'" class="btn '+btn_style+'" style="margin:10px;min-width:200px" onclick="requestMappingType(\''+mappingList[ix]+'\');">'+$.i18n('remote_maptype_label_'+mappingList[ix])+'</button><br/>');
 		}
 	}
 
-	function updateComponents(event) {
-		if ($('#componentsbutton').length == 0)
+	function updateComponents()
+	{
+		components = serverInfo.info.components;
+		// create buttons
+		$('#componentsbutton').html("");
+		for ( idx=0; idx<components.length;idx++)
 		{
-			$(hyperion).off("cmd-serverinfo",updateComponents);
-		}
-		else
-		{
-			updateInputSelect();
-			updateLedMapping();
-			components = event.response.info.components;
-			// create buttons
-			$('#componentsbutton').html("");
-			for ( idx=0; idx<components.length;idx++)
+			enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
+			enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
+			comp_name    = components[idx].name;
+			comp_btn_id  = "comp_btn_"+comp_name;
+			
+			// create btn if not there
+			if ($("#"+comp_btn_id).length == 0)
 			{
-				enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
-				enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
-				comp_name    = components[idx].name;
-				comp_btn_id  = "comp_btn_"+comp_name;
-				
-				// create btn if not there
-				if ($("#"+comp_btn_id).length == 0)
-				{
-					d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
-						+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
-						+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</p>';
-					$('#componentsbutton').append(d);
-				}
-				else // already create, update state
-				{
-					setClassByBool( $('#'+comp_btn_id)        , components[idx].enabled, "btn-danger", "btn-success" );
-					setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop"    , "fa-play" );
-					$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')');
-				}
-				
+				d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
+					+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
+					+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</p>';
+				$('#componentsbutton').append(d);
+			}
+			else // already create, update state
+			{
+				setClassByBool( $('#'+comp_btn_id)        , components[idx].enabled, "btn-danger", "btn-success" );
+				setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop"    , "fa-play" );
+				$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')');
 			}
 		}
 	}
 	
-	var oldEffects = [];
-	
-	function updateEffectlist(event){
-		var newEffects = event.response.info.effects;
+	function updateEffectlist()
+	{
+		var newEffects = serverInfo.info.effects;
 		if (newEffects.length != oldEffects.length)
 		{
 			$('#effect_select').html('<option value="__none__"></option>');
@@ -142,54 +205,38 @@
 			oldEffects = newEffects;
 		}
 	}
-
-$(document).ready(function() {
-	performTranslation();
-	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));
 	
-	// color
-		$(function() {
-			$('#cp2').colorpicker({
-				format: 'rgb',
-				customClass: 'colorpicker-2x',
-				color: '#B500FF',
-				sliders: {
-					saturation: {
-						maxLeft: 200,
-						maxTop: 200
-					},
-					hue: {
-						maxTop: 200
-					},
-					alpha: {
-						maxTop: 200
-					},
-				}
-			});
-			$('#cp2').colorpicker().on('changeColor', function(e) {
-				color = e.color.toRGB();
-				$("#effect_select").val("__none__");
-				requestSetColor(color.r, color.g, color.b);
-			});
-		});
+	// colorpicker and effect
+	if (getStorage('rmcpcolor') != null)
+		cpcolor = getStorage('rmcpcolor');
+			
+	createCP('cp2', cpcolor, function(rgb,hex){
+		requestSetColor(rgb.r, rgb.g, rgb.b);
+		$("#effect_select").val("__none__");
+		setStorage('rmcpcolor', hex);
+	});
 
-		$("#reset_color").off().on("click", requestPriorityClear);
+	$("#reset_color").off().on("click", function(){
+		requestPriorityClear();
+		$("#effect_select").val("__none__");
+	});
 
-		$("#effect_select").off().on("change", function(event) {
-			efx = $(this).val();
-			if(efx != "__none__")
-			{
-				requestPriorityClear();
-				$(hyperion).one("cmd-clear", function(event) {
-					setTimeout(function() {requestPlayEffect(efx)}, 100);
-				});
-			}
-		});
-		
-	// components
-	$(hyperion).on("cmd-serverinfo",updateComponents);
-	// effects
-	$(hyperion).on("cmd-serverinfo",updateEffectlist);
-		
+	$("#effect_select").off().on("change", function(event) {
+		efx = $(this).val();
+		if(efx != "__none__")
+		{
+			requestPriorityClear();
+			$(hyperion).one("cmd-clear", function(event) {
+				setTimeout(function() {requestPlayEffect(efx)}, 100);
+			});
+		}
+	});
+	
+	//force first update
+	updateRemote();	
+	
+	// interval updates
+	$(hyperion).on("cmd-serverinfo",updateRemote);
+	
+	removeOverlay();	
 });

assets/webconfig/js/content_webconfig.js

@@ -1,7 +1,7 @@
- 
-var conf_editor = null;
-$(hyperion).one("cmd-config-getschema", function(event) {
-	schema = parsedConfSchemaJSON.properties;
+ $(document).ready( function() {
+	performTranslation();
+	
+	var conf_editor = null;
 	
 	$('#conf_cont').append(createOptPanel('fa-wrench', $.i18n("edt_conf_webc_heading_title"), 'editor_container', 'btn_submit'));
 	if(showOptHelp)
@@ -20,11 +20,10 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#btn_submit').off().on('click',function() {
 		requestWriteConfig(conf_editor.getValue());
 	});
-});
-
-
-$(document).ready( function() {
-	performTranslation();
-	requestServerConfigSchema();
+
+	if(showOptHelp)
+		createHint("intro", $.i18n('conf_webconfig_label_intro'), "editor_container");
+	
+	removeOverlay();
 });
 

assets/webconfig/js/hyperion.js

@@ -1,16 +1,15 @@
 
 // global vars
 var webPrio = 1;
-var showOptHelp = true;
+var showOptHelp;
 var currentVersion;
-var cleanCurrentVersion;
 var latestVersion;
-var cleanLatestVersion;
-var parsedServerInfoJSON = {};
+var serverInfo = {};
 var parsedUpdateJSON = {};
-var parsedConfSchemaJSON = {};
-var parsedConfJSON = {};
-var hyperionport = 19444;
+var serverSchema = {};
+var serverConfig = {};
+var schema;
+var jsonPort = 19444;
 var websocket = null;
 var hyperion = {};
 var wsTan = 1;
@@ -71,7 +70,7 @@ function initWebSocket()
 		if (websocket == null)
 		{
 			$.ajax({ url: "/cgi/cfg_jsonserver" }).done(function(data) {
-				hyperionport = data.substr(1);
+				jsonPort = data.substr(1);
 				websocket = new WebSocket('ws://'+document.location.hostname+data);
 
 				websocket.onopen = function (event) {
@@ -104,6 +103,8 @@ function initWebSocket()
 						default: reason = "Unknown reason";
 					}
 					$(hyperion).trigger({type:"close", reason:reason});
+					watchdog = 10;
+					connectionLostDetection();
 				};
 
 				websocket.onmessage = function (event) {
@@ -243,15 +244,15 @@ function requestSetSource(prio)
 function requestWriteConfig(config, full)
 {
 	if(full === true)
-		parsedConfJSON = config;
+		serverConfig = config;
 	else
 	{
 		jQuery.each(config, function(i, val) {
-			parsedConfJSON[i] = val;
+			serverConfig[i] = val;
 		});
 	}
 
-	var config_str = escape(encode_utf8(JSON.stringify(parsedConfJSON)));
+	var config_str = escape(encode_utf8(JSON.stringify(serverConfig)));
 
 	$.post( "/cgi/cfg_set", { cfg: config_str })
 	.done(function( data ) {
@@ -295,3 +296,10 @@ function requestMappingType(type)
 	sendToHyperion("processing", "", '"mappingType": "'+type+'"');
 }
 
+function requestAdjustment(type, value, complete)
+{
+	if(complete === true)
+		sendToHyperion("adjustment", "", '"adjustment": '+type+'');
+	else	
+		sendToHyperion("adjustment", "", '"adjustment": {"'+type+'": '+value+'}');
+}

assets/webconfig/js/ledsim.js

@@ -4,11 +4,19 @@ $(document).ready(function() {
 	var ledsim_height = 489;
 	var dialog;
 	var leds;
+	var lC = false;
 	
-	$(hyperion).one("cmd-config-getconfig",function(event){
-		leds = event.response.result.leds;
+	$(hyperion).one("ready",function(){
+		leds = serverConfig.leds;
 		
-		if(storageComp() && getStorage('ledsim_width') != null)
+		if(showOptHelp)
+		{
+			createHint('intro', $.i18n('main_ledsim_text'), 'ledsim_text');
+			$('#ledsim_text').css({'margin':'10px 15px 0px 15px'});
+			$('#ledsim_text .intro-hint').css("margin","0px")
+		}
+		
+		if(getStorage('ledsim_width') != null)
 		{
 			ledsim_width = getStorage('ledsim_width');
 			ledsim_height = getStorage('ledsim_height');
@@ -29,7 +37,11 @@ $(document).ready(function() {
 				updateLedLayout();
 			},
 			opened: function (e) {
-				updateLedLayout();
+				if(!lC)
+				{
+					updateLedLayout();
+					lC = true;
+				}
 				modalOpened = true;
 				requestLedColorsStart();
 			
@@ -40,13 +52,10 @@ $(document).ready(function() {
 				modalOpened = false;
 			},
 			resizeStop: function (e) {
-				if(storageComp())
-				{
-					setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
-					setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());	
-				}
+				setStorage("ledsim_width", $("#ledsim_dialog").outerWidth());
+				setStorage("ledsim_height", $("#ledsim_dialog").outerHeight());	
 			}
-		});	
+		});
 	});
 	
 	function updateLedLayout()

assets/webconfig/js/lib/jsoneditor.js

@@ -494,7 +494,7 @@ JSONEditor.prototype = {
     return this.editors[path];
   },
   watch: function(path,callback) {
-    this.watchlist = this.watchlist || {};
+	this.watchlist = this.watchlist || {};
     this.watchlist[path] = this.watchlist[path] || [];
     this.watchlist[path].push(callback);
 
@@ -517,7 +517,7 @@ JSONEditor.prototype = {
     return this;
   },
   notifyWatchers: function(path) {
-    if(!this.watchlist || !this.watchlist[path]) return this;
+	if(!this.watchlist || !this.watchlist[path]) return this;
     for(var i=0; i<this.watchlist[path].length; i++) {
       this.watchlist[path][i]();
     }
@@ -6284,7 +6284,7 @@ JSONEditor.AbstractTheme = Class.extend({
     return el;
   },
   getHeader: function(text) {
-    var el = document.createElement('h3');
+    var el = document.createElement('h4');
 	if(text.innerHTML == ''){
 		text.style.display = 'none';
 		return text;

assets/webconfig/js/lib/sb-admin-2.js

@@ -1,9 +1,11 @@
+
 $(function() {
 
     $('#side-menu').metisMenu();
 
 });
 
+var oldWidth;
 //Loads the correct sidebar on window load,
 //collapses the sidebar on window resize.
 // Sets the min-height of #page-wrapper to window size
@@ -11,19 +13,29 @@ $(function() {
     $(window).bind("load resize", function() {
         var topOffset = 50;
         var width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
-        if (width < 768) {
-            $('div.navbar-collapse').addClass('collapse');
-            topOffset = 100; // 2-row-menu
-        } else {
-            $('div.navbar-collapse').removeClass('collapse');
-        }
+        if(oldWidth != width)
+		{
+			if (width < 768)
+			{
+				$('#main-nav').css({"position":"fixed","right":"-235px","top":"45px","width":"230px","border":"1px solid rgba(0, 0, 0, .2)","box-shadow":"0 3px 9px rgba(0, 0, 0, .5)"});
+				topOffset = 100; // 2-row-menu
+				$('.mnava').on('click', function(){
+					$("html, body").animate({ scrollTop: 0 }, "fast");
+					$( "#main-nav" ).animate({right: "-235px",}, 300 );
+					$(".navbar-toggle").addClass("closed");
+				});
+			}
+			else
+				$( "#main-nav" ).removeAttr("style").css({"position":"absolute"});
 
-        var height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
-        height = height - topOffset;
-        if (height < 1) height = 1;
-        if (height > topOffset) {
-            $("#page-wrapper").css("min-height", (height-11) + "px");
-        }
+
+			var height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
+			height = height - topOffset;
+			if (height < 1) height = 1;
+			if (height > topOffset) {
+				$("#page-wrapper").css("min-height", (height-11) + "px");
+			}
+		}
     });
 
     var url = window.location;
@@ -42,3 +54,16 @@ $(function() {
         }
     }
 });
+
+$('.navbar-toggle').off().on('click', function(){
+	if($('#main-nav').css("right") != "-2px")
+	{
+		 $('#main-nav').animate({right: "-2px",}, 300 );
+		 $(".navbar-toggle").removeClass("closed");
+	}
+	else
+	{
+		$('#main-nav').animate({right: "-235px",}, 300 );
+		$(".navbar-toggle").addClass("closed");
+	}
+});

assets/webconfig/js/settings.js

@@ -45,8 +45,8 @@ $(document).ready( function() {
 		initTrans('auto');
 		storedLang = 'auto';
 		storedAccess = "default";
-		$('#btn_setlang').toggle();
-		$('#btn_setaccess').toggle();
+		$('#btn_setlang').attr("disabled", true);
+		$('#btn_setaccess').attr("disabled", true);
 	}
 	
 	$('#btn_setlang').off().on('click',function() {
@@ -78,14 +78,11 @@ $(document).ready( function() {
 	});
 
 	//access
-	if (storageComp())
+	storedAccess = getStorage("accesslevel");
+	if (storedAccess == null)
 	{
-		storedAccess = getStorage("accesslevel");
-		if (storedAccess == null)
-		{
-			setStorage("accesslevel", "default");
-			storedAccess = "default";
-		}
+		setStorage("accesslevel", "default");
+		storedAccess = "default";
 	}
 
 	$('#btn_setaccess').off().on('click',function() {

assets/webconfig/js/ui_utils.js

@@ -1,3 +1,10 @@
+var prevTag;
+
+function removeOverlay()
+{
+	$("#loading_overlay").removeClass("overlay");
+}
+
 function reload()
 {
 	location.reload();	
@@ -10,15 +17,27 @@ function storageComp()
 	return false;
 }
 
-function getStorage(item)
+function getStorage(item, session)
 {
-	return localStorage.getItem(item);
+	if(storageComp())
+	{
+		if(session === true)
+			return sessionStorage.getItem(item);
+		else
+			return localStorage.getItem(item);
+	}
+	return null;
 }
 
-function setStorage(item, value)
+function setStorage(item, value, session)
 {
-	localStorage.setItem(item, value);
-	return true;
+	if(storageComp())
+	{
+		if(session === true)
+			sessionStorage.setItem(item, value);
+		else
+			localStorage.setItem(item, value);
+	}
 }
 
 function debugMessage(msg)
@@ -29,15 +48,42 @@ function debugMessage(msg)
 	}
 }
 
-function bindNavToContent(containerId, fileName, loadNow)
+function getHashtag()
 {
-	$("#page-content").off();
-	$(containerId).on("click", function() {
-		$("#page-content").load("/content/"+fileName+".html");
-	});
-	if (loadNow)
+	if(getStorage('lasthashtag', true) != null)
+		return getStorage('lasthashtag', true);
+	else
 	{
-		$(containerId).trigger("click");
+		var tag = document.URL;
+		tag = tag.substr(tag.indexOf("#") + 1);
+		if(tag == "" || typeof tag === "undefined" || tag.startsWith("http"))
+			tag = "dashboard"
+		return tag;
+	}
+}
+
+function loadContent(event)
+{
+	var tag;
+	
+	if(typeof event != "undefined")
+	{	
+		tag = event.currentTarget.hash;
+		tag = tag.substr(tag.indexOf("#") + 1);
+		setStorage('lasthashtag', tag, true);
+	}
+	else
+		tag = getHashtag();
+
+	if(prevTag != tag)
+	{
+		prevTag = tag;
+		$("#page-content").off();
+		$("#page-content").load("/content/"+tag+".html", function(response,status,xhr){
+			if(status == "error")
+				$("#page-content").html('<h3>The page you requested is no longer available, click on another menu item!</h3>');
+				removeOverlay();
+		});
 	}
 }
 
@@ -97,7 +143,7 @@ function showInfoDialog(type,header,message)
 	}	
 	else if (type == "select"){
 		$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
-		$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-success" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saveandreload')+'</button>');
+		$('#id_footer').html('<button type="button" id="id_btn_saveset" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saveandreload')+'</button>');
 		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
 	}
 	else if (type == "uilock"){
@@ -109,6 +155,13 @@ function showInfoDialog(type,header,message)
 		$('#id_footer').html('<button type="button" id="id_btn_import" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button>');
 		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
 	}
+	else if (type == "checklist")
+	{
+		$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+		$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('infoDialog_checklist_title')+'</h4>');
+		$('#id_body').append(message);
+		$('#id_footer').html('<button type="button" class="btn btn-primary" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
+	}
 	
 	$('#id_body').append('<h4 style="font-weight:bold;text-transform:uppercase;">'+header+'</h4>');
 	$('#id_body').append(message);
@@ -123,6 +176,48 @@ function showInfoDialog(type,header,message)
 	});
 }
 
+function createHintH(type, text, container)
+{
+	if(type = "intro")
+		tclass = "introd";
+		
+	$('#'+container).prepend('<div class="'+tclass+'"><h4 style="font-size:16px">'+text+'</h4><hr/></div>');
+}
+
+function createHint(type, text, container)
+{
+	var fe, tclass;
+	
+	if(type == "intro")
+	{
+		fe = '';
+		tclass = "intro-hint";
+	}
+	else if(type == "info")
+	{
+		fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-info"></i></div><div style="text-align:center;font-size:13px">Information</div>';
+		tclass = "info-hint";
+	}
+	else if(type == "wizard")
+	{	
+		fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-magic"></i></div><div style="text-align:center;font-size:13px">Information</div>';
+		tclass = "wizard-hint";
+	}
+	else if(type == "warning")
+	{	
+		fe = '<div style="font-size:25px;text-align:center"><i class="fa fa-info"></i></div><div style="text-align:center;font-size:13px">Information</div>';
+		tclass = "warning-hint";
+	}
+	
+	if(fe == "")
+		$('#'+container).prepend('<div class="'+tclass+'">'+text+'</div>');
+	else
+	{
+		createTable('','htb',container, true, tclass);
+		$('#'+container+' .htb').append(createTableRow([fe ,text],false,true));
+	}
+}
+
 function isJsonString(str)
 {
 	try
@@ -163,7 +258,7 @@ function createJsonEditor(container,schema,setconfig,usePanel)
 	if(usePanel)
 	{
 		$('#'+container+' .well').first().removeClass('well well-sm');
-		$('#'+container+' h3').remove();
+		$('#'+container+' h4').remove();
 		$('#'+container+' .well').first().removeClass('well well-sm');
 	}
 
@@ -171,32 +266,84 @@ function createJsonEditor(container,schema,setconfig,usePanel)
 	{
 		for(var key in editor.root.editors)
 		{
-			editor.getEditor("root."+key).setValue( parsedConfJSON[key] );
+			editor.getEditor("root."+key).setValue( serverConfig[key] );
 		}
 	}
 
 	return editor;
 }
 
+function rgbToHex(rgb)
+{
+	if(rgb.length == 3)
+	{
+		return "#" +
+		("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
+		("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+		("0" + parseInt(rgb[2],10).toString(16)).slice(-2);    
+	}
+	else
+		debugMessage('rgbToHex: Given rgb is no array or has wrong length');
+}
+
+function createCP(id, color, cb)
+{
+	if(Array.isArray(color))
+		color = rgbToHex(color);
+	else if(color == "undefined")
+		color = "#AA3399";
+	
+	if(color.startsWith("#"))
+	{
+		$('#'+id).colorpicker({
+			format: 'rgb',
+			customClass: 'colorpicker-2x',
+			color: color,
+			sliders: {
+				saturation: {
+					maxLeft: 200,
+					maxTop: 200
+				},
+				hue: {
+					maxTop: 200
+				},
+			}
+		});
+		$('#'+id).colorpicker().on('changeColor', function(e) {
+			rgb = e.color.toRGB();
+			hex = e.color.toHex();
+			cb(rgb,hex,e);
+		});
+	}
+	else
+		debugMessage('createCP: Given color is not legit');
+}
+
 // Creates a table with thead and tbody ids
-// @param string hid  : a id for thead
-// @param string bid  : a id for tbody
+// @param string hid  : a class for thead
+// @param string bid  : a class for tbody
 // @param string cont : a container id to html() the table
-function createTable(hid, bid, cont)
+// @param string bless: if true the table is borderless
+function createTable(hid, bid, cont, bless, tclass)
 {
 	var table = document.createElement('table');
 	var thead = document.createElement('thead');
 	var tbody = document.createElement('tbody');
 	
 	table.className = "table";
+	if(bless === true)
+		table.className += " borderless";
+	if(typeof tclass !== "undefined")
+		table.className += " "+tclass;
 	table.style.marginBottom = "0px";
-	thead.setAttribute("id", hid);
-	tbody.setAttribute("id", bid);
-	
-	table.appendChild(thead);
+	if(hid != "")
+		thead.className = hid;
+	tbody.className = bid;
+	if(hid != "")
+		table.appendChild(thead);
 	table.appendChild(tbody);
 	
-	$('#'+cont).html(table);
+	$('#'+cont).append(table);
 }
 
 // Creates a table row <tr>
@@ -237,43 +384,58 @@ function createOptPanel(phicon, phead, bodyid, footerid)
 {
 	phead = '<i class="fa '+phicon+' fa-fw"></i>'+phead;
 	pfooter = document.createElement('button');
-	pfooter.className = "btn btn-success";
+	pfooter.className = "btn btn-primary";
 	pfooter.setAttribute("id", footerid);
 	pfooter.innerHTML = '<i class="fa fa-fw fa-save"></i>'+$.i18n('general_button_savesettings');
 	
 	return createPanel(phead, "", pfooter, "panel-default", bodyid);
 }
 
+function sortProperties(list)
+{
+	for(key in list)
+	{
+		list[key].key = key;
+	}
+	list = $.map(list, function(value, index) {
+				return [value];
+		});
+	return list.sort(function(a,b) {
+				return a.propertyOrder - b.propertyOrder;
+		});
+}
+
 function createHelpTable(list, phead){
 	var table = document.createElement('table');
 	var thead = document.createElement('thead');
 	var tbody = document.createElement('tbody');
-	//console.log(sortProperties(list));
+	list = sortProperties(list);
 	
 	phead = '<i class="fa fa-fw fa-info-circle"></i>'+phead+' '+$.i18n("conf_helptable_expl");
 	
 	table.className = 'table table-hover borderless';
 	
 	thead.appendChild(createTableRow([$.i18n('conf_helptable_option'), $.i18n('conf_helptable_expl')], true, false));
-		for (key in list)
+	
+	for (key in list)
+	{
+		if(list[key].access != 'system')
 		{
-			if(list[key].access != 'system')
+			var text = list[key].title.replace('title', 'expl');
+			tbody.appendChild(createTableRow([$.i18n(list[key].title), $.i18n(text)], false, false));
+			
+			if(list[key].items && list[key].items.properties)
 			{
-				var text = list[key].title.replace('title', 'expl');
-				tbody.appendChild(createTableRow([$.i18n(list[key].title), $.i18n(text)], false, false));
-				
-				if(list[key].items && list[key].items.properties)
+				var ilist = sortProperties(list[key].items.properties);
+				for (ikey in ilist)
 				{
-					var ilist = list[key].items.properties;
-					for (ikey in ilist)
-					{
-						
-						var itext = ilist[ikey].title.replace('title', 'expl');
-						tbody.appendChild(createTableRow([$.i18n(ilist[ikey].title), $.i18n(itext)], false, false));
-					}
-				}	
-			}
+					
+					var itext = ilist[ikey].title.replace('title', 'expl');
+					tbody.appendChild(createTableRow([$.i18n(ilist[ikey].title), $.i18n(itext)], false, false));
+				}
+			}	
 		}
+	}
 	table.appendChild(thead);
 	table.appendChild(tbody);
 

assets/webconfig/js/wizard.js

@@ -1,23 +1,35 @@
 $(document).ready( function() {
-	//clear priority if people reload the page or lost connection while a wizard was active
-	$(hyperion).one("cmd-config-getschema", function(event) {	
+	//clear priority and other tasks if people reload the page or lost connection while a wizard was active
+	$(hyperion).one("ready", function(event) {	
 		if(getStorage("wizardactive") === 'true')	
+		{
 			requestPriorityClear();
 			setStorage("wizardactive", false);
+			if(getStorage("kodiAddress" != null))
+			{
+				kodiAddress = getStorage("kodiAddress");
+				sendToKodi("stop");
+			}
+		}
 	});
 	
 	function resetWizard()
 	{
 		$("#wizard_modal").modal('hide');
-		clearInterval(colorIntveralId);
+		clearInterval(wIntveralId);
 		requestPriorityClear();
 		setStorage("wizardactive", false);
 		$('#wizp1').toggle(true);
 		$('#wizp2').toggle(false);
+		$('#wizp3').toggle(false);
+		//cc
+		if(withKodi)
+			sendToKodi("stop");
+		step = 0;
 	}
 	
 	//rgb byte order wizard
-	var colorIntveralId;
+	var wIntveralId;
 	var new_rgb_order;
 
 	function changeColor()
@@ -40,13 +52,13 @@ $(document).ready( function() {
 	{
 		//create html
 		$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_rgb_title'));
-		$('#wizp1_body').html('<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:20px"><h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_rgb_title')+'</h4><p>'+$.i18n('wiz_rgb_intro1')+'</p><p style="font-weight:bold;">'+$.i18n('wiz_rgb_intro2')+'</p>');
+		$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_rgb_title')+'</h4><p>'+$.i18n('wiz_rgb_intro1')+'</p><p style="font-weight:bold;">'+$.i18n('wiz_rgb_intro2')+'</p>');
 		$('#wizp1_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_cont"><i class="fa fa-fw fa-check"></i>'+$.i18n('general_btn_continue')+'</button><button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
-		$('#wizp2_body').html('<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!" style="margin-bottom:20px"><p style="font-weight:bold">'+$.i18n('wiz_rgb_expl')+'</p>');
+		$('#wizp2_body').html('<p style="font-weight:bold">'+$.i18n('wiz_rgb_expl')+'</p>');
 		$('#wizp2_body').append('<div class="form-group"><label>'+$.i18n('wiz_rgb_switchevery')+'</label><div class="input-group" style="width:100px"><select id="wiz_switchtime_select" class="form-control"></select><div class="input-group-addon">'+$.i18n('edt_append_s')+'</div></div></div>');
 		$('#wizp2_body').append('<canvas id="wiz_canv_color" width="100" height="100" style="border-radius:60px;background-color:red; display:block; margin: 10px 0;border:4px solid grey;"></canvas><label>'+$.i18n('wiz_rgb_q')+'</label>');
 		$('#wizp2_body').append('<table class="table borderless" style="width:200px"><tbody><tr><td class="ltd"><label>'+$.i18n('wiz_rgb_qrend')+'</label></td><td class="itd"><select id="wiz_r_select" class="form-control wselect"></select></td></tr><tr><td class="ltd"><label>'+$.i18n('wiz_rgb_qgend')+'</label></td><td class="itd"><select id="wiz_g_select" class="form-control wselect"></select></td></tr></tbody></table>');
-		$('#wizp2_footer').html('<button type="button" class="btn btn-success" id="btn_wiz_save"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button><button type="button" class="btn btn-primary" id="btn_wiz_checkok" style="display:none" data-dismiss="modal"><i class="fa fa-fw fa-check"></i>'+$.i18n('general_btn_ok')+'</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>')
+		$('#wizp2_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_save"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button><button type="button" class="btn btn-primary" id="btn_wiz_checkok" style="display:none" data-dismiss="modal"><i class="fa fa-fw fa-check"></i>'+$.i18n('general_btn_ok')+'</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>')
 		
 		//open modal
 		$("#wizard_modal").modal({
@@ -66,36 +78,43 @@ $(document).ready( function() {
 	function beginWizardRGB()
 	{	
 		$("#wiz_switchtime_select").off().on('change',function() {
-			clearInterval(colorIntveralId);
+			clearInterval(wIntveralId);
 			var time = $("#wiz_switchtime_select").val();
-			colorIntveralId = setInterval(function() { changeColor(); }, time*1000);
+			wIntveralId = setInterval(function() { changeColor(); }, time*1000);
 		});
 
 		$('.wselect').change(function () {
-			var rgb_order = order = parsedConfJSON.device.colorOrder.split("");
+			var rgb_order = serverConfig.device.colorOrder.split("");
 			var redS = $("#wiz_r_select").val();
 			var greenS = $("#wiz_g_select").val();
+			var blueS = rgb_order.toString().replace(/,/g,"").replace(redS, "").replace(greenS,"");
 		
-			for (var i = 0; i<order.length; i++)
+			for (var i = 0; i<rgb_order.length; i++)
 			{
-				if (redS == order[i])
-					$('#wiz_g_select option[value='+order[i]+']').attr('disabled',true);		
+				if (redS == rgb_order[i])
+					$('#wiz_g_select option[value='+rgb_order[i]+']').attr('disabled',true);		
 				else
-					$('#wiz_g_select option[value='+order[i]+']').attr('disabled',false);
-				if (greenS == order[i])
-					$('#wiz_r_select option[value='+order[i]+']').attr('disabled',true);
+					$('#wiz_g_select option[value='+rgb_order[i]+']').attr('disabled',false);
+				if (greenS == rgb_order[i])
+					$('#wiz_r_select option[value='+rgb_order[i]+']').attr('disabled',true);
 				else
-					$('#wiz_r_select option[value='+order[i]+']').attr('disabled',false);	
+					$('#wiz_r_select option[value='+rgb_order[i]+']').attr('disabled',false);	
 			}
 			
 			if(redS != 'null' && greenS != 'null')
 			{
 				$('#btn_wiz_save').attr('disabled',false);
-				var blueS = parsedConfJSON.device.colorOrder.replace(redS, "").replace(greenS, "");
-	
-				rgb_order[0] = redS;
-				rgb_order[1] = greenS;
-				rgb_order[2] = blueS;
+
+				for (var i = 0; i<rgb_order.length; i++)
+				{
+					if(rgb_order[i] == "r")
+						rgb_order[i] = redS;
+					else if(rgb_order[i] == "g")
+						rgb_order[i] = greenS;
+					else
+						rgb_order[i] = blueS;
+				}
+				
 				rgb_order = rgb_order.toString().replace(/,/g,"");
 				
 				if(redS == "r" && greenS == "g")
@@ -125,9 +144,7 @@ $(document).ready( function() {
 		setTimeout(requestSetSource, 100, 'auto');
 		setStorage("wizardactive", true);
 
-		$('#btn_wiz_abort').off().on('click',function() {
-			resetWizard()
-		});
+		$('#btn_wiz_abort').off().on('click', resetWizard);
 
 		$('#btn_wiz_checkok').off().on('click',function() {
 			showInfoDialog('success', "", $.i18n('infoDialog_wizrgb_text'));
@@ -136,14 +153,484 @@ $(document).ready( function() {
 
 		$('#btn_wiz_save').off().on('click',function() {
 			resetWizard();
-			parsedConfJSON.device.colorOrder = new_rgb_order;
-			requestWriteConfig({"device" : parsedConfJSON.device});
+			serverConfig.device.colorOrder = new_rgb_order;
+			requestWriteConfig({"device" : serverConfig.device});
 			setTimeout(initRestart, 100);
 		});
 	}
 	
-	$('#btn_wizard_byteorder').off().on('click',function() {
-			startWizardRGB();
-	});
+	$('#btn_wizard_byteorder').off().on('click',startWizardRGB);
+	
+	//color calibration wizard
+	var kodiAddress = document.location.hostname+':8080';
+	var wiz_editor;
+	var colorLength;
+	var cobj;
+	var step = 0;
+	var withKodi = false;
+	var profile = 0;
+	var websAddress;
+	var imgAddress;
+	var vidAddress = "https://sourceforge.net/projects/hyperion-project/files/resources/vid/";
+	var picnr = 0;
+	var availVideos = ["Sweet_Cocoon","Caminandes_2_GranDillama","Caminandes_3_Llamigos"];
+	
+	if(getStorage("kodiAddress" != null))
+		kodiAddress = getStorage("kodiAddress");
+	
+	function switchPicture(pictures)
+	{	
+		if(typeof pictures[picnr] === 'undefined')
+			picnr = 0;
+		
+		sendToKodi('playP',pictures[picnr]);
+		picnr++;
+	}
+	
+	function sendToKodi(type, content, cb)
+	{
+		var command;
+		
+		if(type == "playP")
+			content = imgAddress+content+'.png';
+		if(type == "playV")
+			content = vidAddress+content;
+		
+		if(type == "msg")
+			command = '{"jsonrpc":"2.0","method":"GUI.ShowNotification","params":{"title": "'+$.i18n('wiz_cc_title')+'", "message": "'+content+'", "image":"info", "displaytime":5000 },"id":"1"}';
+		else if (type == "stop")
+			command = '{"jsonrpc":"2.0","method":"Player.Stop","params":{"playerid": 2},"id":"1"}';
+		else if (type == "playP" || type == "playV")
+			command = '{"jsonrpc":"2.0","method":"Player.Open","params":{"item":{"file":"' + content + '"}},"id":"1"}';
+		else if (type == "rotate")
+			command = '{"jsonrpc":"2.0","method":"Player.Rotate","params":{"playerid": 2},"id":"1"}';
 
+		$.ajax({
+			url: 'http://' + kodiAddress + '/jsonrpc',
+			dataType: 'jsonp',
+			jsonpCallback: 'jsonCallback',
+			type: 'POST',
+			async: true,
+			timeout: 2000,
+			data: 'request=' + encodeURIComponent( command )
+		})
+		.done( function( data, textStatus, jqXHR ) {
+			if ( jqXHR.status == 200 && data['result'] == 'OK' && type == "msg")
+				cb("success");
+		})
+		// Older Versions Of Kodi/XBMC Tend To Fail Due To CORS But Typically If A '200' Is Returned Then It Has Worked!
+		.fail( function( jqXHR, textStatus ) {
+			if ( jqXHR.status != 200 && type == "msg")
+				cb("error")
+		});	
+	}
+	
+	function performAction()
+	{
+		var h;
+		
+		if(step == 1)
+		{
+			$('#wiz_cc_desc').html($.i18n('wiz_cc_chooseid'));
+			updateWEditor(["id"]);
+			$('#btn_wiz_back').attr("disabled", true)
+		}
+		else
+			$('#btn_wiz_back').attr("disabled", false)
+		
+		if(step == 2)
+		{
+			updateWEditor(["white"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_white_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_white_title'));
+				sendToKodi('playP',"white");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_white_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 3)
+		{
+			updateWEditor(["gammaRed","gammaGreen","gammaBlue"]);
+			h = '<p>'+$.i18n('wiz_cc_adjustgamma')+'</p>';
+			if(withKodi)
+			{
+				sendToKodi('playP',"HGradient");
+				h +='<button id="wiz_cc_btn_sp" class="btn btn-primary">'+$.i18n('wiz_cc_btn_switchpic')+'</button>';
+			}
+			else
+				h += '<p>'+$.i18n('wiz_cc_lettvshowm', "gey_1, grey_2, grey_3, HGradient, VGradient")+'</p>';
+			$('#wiz_cc_desc').html(h);
+			$('#wiz_cc_btn_sp').off().on('click', function(){
+					switchPicture(["VGradient","grey_1","grey_2","grey_3","HGradient"]);
+			});
+		}
+		if(step == 4)
+		{
+			updateWEditor(["red"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_red_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_red_title'));	
+				sendToKodi('playP',"red");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_red_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 5)
+		{
+			updateWEditor(["green"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_green_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_green_title'));	
+				sendToKodi('playP',"green");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_green_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 6)
+		{
+			updateWEditor(["blue"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_blue_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_blue_title'));
+				sendToKodi('playP',"blue");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_blue_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 7)
+		{
+			updateWEditor(["cyan"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_cyan_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_cyan_title'));
+				sendToKodi('playP',"cyan");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_cyan_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 8)
+		{
+			updateWEditor(["magenta"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_magenta_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_magenta_title'));
+				sendToKodi('playP',"magenta");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_magenta_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 9)
+		{
+			updateWEditor(["yellow"]);
+			h = $.i18n('wiz_cc_adjustit',$.i18n('edt_conf_color_yellow_title'));
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_yellow_title'));
+				sendToKodi('playP',"yellow");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_yellow_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 10)
+		{
+			updateWEditor(["brightnessMin"]);
+			h = $.i18n('wiz_cc_minBright');
+			if(withKodi)
+			{
+				h += '<br/>'+$.i18n('wiz_cc_kodishould',$.i18n('edt_conf_color_black_title'));
+				sendToKodi('playP',"black");
+			}
+			else
+				h += '<br/>'+$.i18n('wiz_cc_lettvshow',$.i18n('edt_conf_color_black_title'));
+			$('#wiz_cc_desc').html(h);
+		}
+		if(step == 11)
+		{
+			updateWEditor([""], true);
+			h = '<p>'+$.i18n('wiz_cc_testintro')+'</p>';
+			if(withKodi)
+			{
+				h += '<p>'+$.i18n('wiz_cc_testintrok')+'</p>';
+				sendToKodi('stop');
+				for(var i = 0; i<availVideos.length; i++)
+				{
+					var txt = availVideos[i].replace(/_/g," ");
+					h +='<div><button id="'+availVideos[i]+'" class="btn btn-sm btn-primary videobtn"><i class="fa fa-fw fa-play"></i> '+txt+'</button></div>';
+				}
+				h +='<div><button id="stop" class="btn btn-sm btn-danger videobtn" style="margin-bottom:15px"><i class="fa fa-fw fa-stop"></i> '+$.i18n('wiz_cc_btn_stop')+'</button></div>';
+			}
+			else
+				h += '<p>'+$.i18n('wiz_cc_testintrowok')+' <a href="https://sourceforge.net/projects/hyperion-project/files/resources/vid/" target="_blank">'+$.i18n('wiz_cc_link')+'</a></p>';
+			h += '<p>'+$.i18n('wiz_cc_summary')+'</p>';
+			$('#wiz_cc_desc').html(h);
+			
+			$('.videobtn').off().on('click', function(e){
+				if(e.target.id == "stop")
+					sendToKodi("stop");
+				else
+					sendToKodi("playV",e.target.id+'.mp4');
+				
+				$(this).attr("disabled", true);
+				setTimeout(function(){$('.videobtn').attr("disabled", false)},10000);
+			});
+			
+			$('#btn_wiz_next').attr("disabled", true);
+			$('#btn_wiz_save').toggle(true);
+		}
+		else
+		{
+			$('#btn_wiz_next').attr("disabled", false);
+			$('#btn_wiz_save').toggle(false);
+		}
+	}
+	
+	function updateWEditor(el, all)
+	{
+		for (var key in cobj)
+		{
+			if(all === true || el[0] == key || el[1] == key || el[2] == key)
+				$('#editor_container_wiz [data-schemapath*=".'+profile+'.'+key+'"]').toggle(true);
+			else
+				$('#editor_container_wiz [data-schemapath*=".'+profile+'.'+key+'"]').toggle(false);
+		}
+	}
+	
+	function startWizardCC()
+	{
+		//create html
+		$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_cc_title'));
+		$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_cc_title')+'</h4><p>'+$.i18n('wiz_cc_intro1')+'</p><label>'+$.i18n('wiz_cc_kwebs')+'</label><input class="form-control" style="width:170px;margin:auto" id="wiz_cc_kodiip" type="text" placeholder="'+kodiAddress+'" value="'+kodiAddress+'" /><span id="kodi_status"></span><span id="multi_cali"></span>');
+		$('#wizp1_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_cont" disabled="disabled"><i class="fa fa-fw fa-check"></i>'+$.i18n('general_btn_continue')+'</button><button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
+		$('#wizp2_body').html('<div id="wiz_cc_desc" style="font-weight:bold"></div><div id="editor_container_wiz"></div>');
+		$('#wizp2_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_back"><i class="fa fa-fw fa-chevron-left"></i>'+$.i18n('general_btn_back')+'</button><button type="button" class="btn btn-primary" id="btn_wiz_next">'+$.i18n('general_btn_next')+'<i style="margin-left:4px;"class="fa fa-fw fa-chevron-right"></i></button><button type="button" class="btn btn-warning" id="btn_wiz_save" style="display:none"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>')
+		
+		//open modal
+		$("#wizard_modal").modal({
+			backdrop : "static",
+			keyboard: false,
+			show: true
+		});
+		
+		$('#wiz_cc_kodiip').off().on('change',function() {
+			kodiAddress = $(this).val();
+			setStorage("kodiAddress", kodiAddress);
+			sendToKodi("msg", $.i18n('wiz_cc_kodimsg_start'), function(cb){
+				if(cb == "error")
+				{
+					$('#kodi_status').html('<p style="color:red;font-weight:bold;margin-top:5px">'+$.i18n('wiz_cc_kodidiscon')+'</p><p>'+$.i18n('wiz_cc_kodidisconlink')+' <a href="https://sourceforge.net/projects/hyperion-project/files/resources/Hyperion_calibration_pictures.zip/download" target="_blank">'+$.i18n('wiz_cc_link')+'</p>');
+					withKodi = false;
+				}
+				else
+				{
+					$('#kodi_status').html('<p style="color:green;font-weight:bold;margin-top:5px">'+$.i18n('wiz_cc_kodicon')+'</p>');
+					withKodi = true;
+				}
+				
+				$('#btn_wiz_cont').attr('disabled', false);
+			});
+		});
+		
+		//listen for continue
+		$('#btn_wiz_cont').off().on('click',function() {
+			beginWizardCC();
+			$('#wizp1').toggle(false);
+			$('#wizp2').toggle(true);
+		});
+		
+		$('#wiz_cc_kodiip').trigger("change")
+		colorLength = serverConfig.color.channelAdjustment;
+		cobj = schema.color.properties.channelAdjustment.items.properties;
+		websAddress = document.location.hostname+':'+serverConfig.webConfig.port;
+		imgAddress = 'http://'+websAddress+'/img/cc/';
+		setStorage("wizardactive", true);
+		
+		//check profile count
+		if(colorLength.length > 1)
+		{
+			$('#multi_cali').html('<p style="font-weight:bold;">'+$.i18n('wiz_cc_morethanone')+'</p><select id="wiz_select" class="form-control" style="width:200px;margin:auto"></select>');
+			for(var i = 0; i<colorLength.length; i++)
+				$('#wiz_select').append(createSelOpt(i,i+1+' ('+colorLength[i].id+')'));
+			
+			$('#wiz_select').off().on('change', function(){
+				profile = $(this).val();
+			});
+		}
+	
+		//prepare editor
+		wiz_editor = createJsonEditor('editor_container_wiz', {
+			color : schema.color
+		}, true, true);
+		
+		$('#editor_container_wiz h4').toggle(false);
+		$('#editor_container_wiz .btn-group').toggle(false);
+		$('#editor_container_wiz [data-schemapath="root.color.imageToLedMappingType"]').toggle(false);
+		for(var i = 0; i<colorLength.length; i++)
+			$('#editor_container_wiz [data-schemapath*="root.color.channelAdjustment.'+i+'."]').toggle(false);
+	}
+	
+	function beginWizardCC()
+	{
+		
+		$('#btn_wiz_next').off().on('click',function() {
+			step++;
+			performAction();
+		});
+		
+		$('#btn_wiz_back').off().on('click',function() {
+			step--;
+			performAction();
+		});
+		
+		$('#btn_wiz_abort').off().on('click', resetWizard);
+
+		$('#btn_wiz_save').off().on('click',function() {
+			requestWriteConfig(wiz_editor.getValue());
+			resetWizard();
+			setTimeout(initRestart, 200);
+		});
+
+		wiz_editor.on("change", function(e){
+			var val = wiz_editor.getEditor('root.color.channelAdjustment.'+profile+'').getValue();
+			var temp = JSON.parse(JSON.stringify(val));
+			delete temp.leds
+			requestAdjustment(JSON.stringify(temp),"",true);
+		});
+		
+		step++
+		performAction();
+	}
+	
+	$('#btn_wizard_colorcalibration').off().on('click', startWizardCC);
+	
+	//hue wizard
+	function startWizardPhilipsHue()
+	{
+		//create html
+		$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_hue_title'));
+		$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_hue_title')+'</h4><p>'+$.i18n('wiz_hue_intro1')+'</p><p style="font-weight:bold;">'+$.i18n('wiz_hue_intro2')+'</p>');
+		$('#wizp1_footer').html('<button type="button" class="btn btn-primary" id="btn_wiz_cont"><i class="fa fa-fw fa-check"></i>'+$.i18n('general_btn_continue')+'</button><button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
+		$('#wizp2_body').append('<span id="ip_alert" style="display:none; color:red; font-weight: bold;">'+$.i18n('wiz_hue_failure_ip')+'</span>');
+		$('#wizp2_body').append('<span id="abortConnection" style="display:none; color:red; font-weight: bold;">'+$.i18n('wiz_hue_failure_connection')+'</span><br />');
+		$('#wizp2_body').append('<div class="form-group"><label>'+$.i18n('wiz_hue_ip')+'</label><div class="input-group" style="width:150px"><input type="text" class="input-group" id="ip"></div></div>');
+		$('#wizp2_body').append('<div class="form-group"><label>'+$.i18n('wiz_hue_username')+'</label<div class="input-group" style="width:150px"><input type="text" class="input-group" id="user" readonly="readonly"></div></div>');
+		$('#wizp2_body').append('<div id="hue_lights" class="row"><table></table></div>');
+		$('#wizp2_footer').html('<button type="button" class="btn btn-success" id="wiz_hue_create_user"> <i class="fa fa-floppy-o"></i>'+$.i18n('wiz_hue_create_user')+'</button><button type="button" class="btn btn-danger" id="btn_wiz_abort"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
+		$('#wizp3_body').html('<span>'+$.i18n('wiz_hue_press_link')+'</span> <br /><br /><center><span id="connectionTime"></span><br /><img src="/img/hyperion/ring-alt.svg" /><center>');
+
+
+
+		//open modal
+		$("#wizard_modal").modal({
+			backdrop : "static",
+			keyboard: false,
+			show: true
+		});
+
+		//listen for continue
+		$('#btn_wiz_cont').off().on('click',function() {
+			beginWizardHue();
+			$('#wizp1').toggle(false);
+			$('#wizp2').toggle(true);
+		});
+	}
+
+	function beginWizardHue()
+	{
+		//listen for continue
+		$('#wiz_hue_create_user').off().on('click',function() {
+			doWizardHue();
+		});
+	}
+
+	function doWizardHue()
+	{
+	    var connectionRetries = 15;
+			var data = {"devicetype":"hyperion#"+Date.now()};
+			var UserInterval = setInterval(function(){
+			$.ajax({
+				type: "POST",
+				url: 'http://'+$("#ip").val()+'/api',
+				processData: false,
+				timeout: 1000,
+				contentType: 'application/json',
+				data: JSON.stringify(data),
+				success: function(r) {
+						$('#wizp1').toggle(false);
+						$('#wizp2').toggle(false);
+						$('#wizp3').toggle(true);
+
+						connectionRetries--;
+						$("#connectionTime").html(connectionRetries);
+						if(connectionRetries == 0) {
+							abortConnection(UserInterval);
+	          }
+						else
+						{
+							$("#abortConnection").hide();
+							$("#ip_alert").hide();
+							if (typeof r[0].error != 'undefined') {
+								console.log(connectionRetries+": link not pressed");
+							}
+						  if (typeof r[0].success != 'undefined') {
+								$('#wizp1').toggle(false);
+								$('#wizp2').toggle(true);
+								$('#wizp3').toggle(false);
+								$('#user').val(r[0].success.username);
+
+								$( "#hue_lights" ).empty();
+								get_hue_lights();
+								clearInterval(UserInterval);
+						  }
+						}
+				},
+				error: function(XMLHttpRequest, textStatus, errorThrown) {
+					$('#wizp1').toggle(false);
+					$('#wizp2').toggle(true);
+					$('#wizp3').toggle(false);
+					$("#ip_alert").show();
+					clearInterval(UserInterval);
+				 }
+			});
+	  },1000);
+	}
+
+	function get_hue_lights(){
+		$.ajax({
+			type: "GET",
+			url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
+			processData: false,
+			contentType: 'application/json',
+			success: function(r) {
+				for(var lightid in r){
+					$('#hue_lights').append('<tr><td>ID: '+lightid+'</td><td>Name: '+r[lightid].name+'</td></tr>');
+				}
+			}
+		});
+	}
+
+	function abortConnection(UserInterval){
+		clearInterval(UserInterval);
+		$('#wizp1').toggle(false);
+		$('#wizp2').toggle(true);
+		$('#wizp3').toggle(false);
+		$("#abortConnection").show();
+
+	}
+	
+	$('#btn_wizard_philipshue').off().on('click',startWizardPhilipsHue);
+	
 });