priorities rework, webc update (#366)

* update * update * tabs test * update * test * ... * fix editor * update ui * fix visual glitch if help is off * fix fadecandy error and th [skip ci]
2025-03-01 10:33:28 +00:00 · 2017-01-17 21:53:35 +01:00
parent 5b809743f7
commit 8d7137136b
75 changed files with 1713 additions and 1144 deletions
--- a/assets/webconfig/js/content_leds.js
+++ b/assets/webconfig/js/content_leds.js
@@ -1,6 +1,9 @@

 var ledsCustomCfgInitialized = false;
 var finalLedArray = [];
+var IntListIds;
+var StrListIds;
+var BoolListIds;

 function get_hue_lights(){
 	$.ajax({
@@ -27,6 +30,56 @@ function validateText(){
 	return true
 }

+function loadStoredValues()
+{
+	if (storageComp() && getStorage('ip_cl_ledstop') != null)
+	{	
+		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();
+		
+		for(var i = 0; i < IntListIds.length; i++)
+		{
+			$('#'+IntListIds[i]).val(parseInt(getStorage(IntListIds[i])));
+		}
+		
+		for(var i = 0; i < BoolListIds.length; i++)
+		{
+			var vb = getStorage(BoolListIds[i]);
+			$('#'+BoolListIds[i]).prop('checked', vb == "true" ? true : false);
+		}
+		
+		for(var i = 0; i < StrListIds.length; i++)
+		{
+			$('#'+StrListIds[i]).val(getStorage(StrListIds[i]));
+		}
+		return;
+	}
+	return;
+}
+
+function saveValues()
+{
+	if(storageComp())
+	{		
+		for(var i = 0; i < IntListIds.length; i++)
+		{
+			setStorage(IntListIds[i], $('#'+IntListIds[i]).val());
+		}
+		
+		for(var i = 0; i < BoolListIds.length; i++)
+		{
+			setStorage(BoolListIds[i], $('#'+BoolListIds[i]).is(":checked"));
+		}
+		
+		for(var i = 0; i < StrListIds.length; i++)
+		{
+			setStorage(StrListIds[i], $('#'+StrListIds[i]).val());
+		}
+		return;
+	}
+}
+
 function round(number) {
 	var factor = Math.pow(10, 4);
 	var tempNumber = number * factor;
@@ -37,19 +90,19 @@ function round(number) {
 function createLedPreview(leds, origin){

 	if (origin == "classic"){
-		$('#previewcreator').html('<h5>'+$.i18n('conf_leds_layout_preview_originCL')+'</h5>');
+		$('#previewcreator').html($.i18n('conf_leds_layout_preview_originCL'));
 		$('#leds_preview').css("padding-top", "56.25%");
 	}
 	else if(origin == "text"){
-		$('#previewcreator').html('<h5>'+$.i18n('conf_leds_layout_preview_originTEXT')+'</h5>');
+		$('#previewcreator').html($.i18n('conf_leds_layout_preview_originTEXT'));
 		$('#leds_preview').css("padding-top", "56.25%");
 	}
 	else if(origin == "matrix"){
-		$('#previewcreator').html('<h5>'+$.i18n('conf_leds_layout_preview_originMA')+'</h5>');
+		$('#previewcreator').html($.i18n('conf_leds_layout_preview_originMA'));
 		$('#leds_preview').css("padding-top", "100%");
 	}
 	
-	$('#previewledcount').html('<h5>'+$.i18n('conf_leds_layout_preview_totalleds', leds.length)+'</h5>');
+	$('#previewledcount').html($.i18n('conf_leds_layout_preview_totalleds', leds.length));
 	
 	$('.st_helper').css("border", "8px solid grey");
 	
@@ -80,27 +133,27 @@ function createLedPreview(leds, origin){

 function createClassicLeds(){
 	//get values
-	var ledsTop = parseInt($("#ip_cl_ledstop").val());
-	var ledsBottom = parseInt($("#ip_cl_ledsbottom").val());
-	var ledsLeft = parseInt($("#ip_cl_ledsleft").val());
-	var ledsRight = parseInt($("#ip_cl_ledsright").val());
-	var ledsGlength = parseInt($("#ip_cl_ledsglength").val());
-	var ledsGPos = parseInt($("#ip_cl_ledsgpos").val());
+	var ledstop = parseInt($("#ip_cl_ledstop").val());
+	var ledsbottom = parseInt($("#ip_cl_ledsbottom").val());
+	var ledsleft = parseInt($("#ip_cl_ledsleft").val());
+	var ledsright = parseInt($("#ip_cl_ledsright").val());
+	var ledsglength = parseInt($("#ip_cl_ledsglength").val());
+	var ledsgpos = parseInt($("#ip_cl_ledsgpos").val());
 	var position = parseInt($("#ip_cl_position").val());
 	var reverse = $("#ip_cl_reverse").is(":checked");
 	
 	//advanced values
-	var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
-	var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
-	var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
-	var rawcornerGap = parseInt($("#ip_cl_ledscornergap").val());
+	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());
 	
 	//helper
-	var ledsVDepth = rawledsVDepth /100;
-	var ledsHDepth = rawledsHDepth /100;
-	var edgeVGap = rawedgeGap /100/2;
+	var ledsVDepth = rawledsvdepth /100;
+	var ledsHDepth = rawledshdepth /100;
+	var edgeVGap = rawledsedgegap /100/2;
 	var edgeHGap = edgeVGap/(16/9);
-	var cornerVGap = rawcornerGap /100/2;
+	var cornerVGap = rawledscornergap /100/2;
 	var cornerHGap = cornerVGap/(16/9);
 	var Vmin = 0.0 + edgeVGap;
 	var Vmax = 1.0 - edgeVGap;
@@ -121,7 +174,7 @@ function createClassicLeds(){
 	}
 	
 	function validateGap(){
-		if (ledsGPos+ledsGlength > ledArray.length){
+		if (ledsgpos+ledsglength > ledArray.length){
 			showInfoDialog('error', $.i18n('infoDialog_leds_gap_title'), $.i18n('infoDialog_leds_gap_text'));
 			return false
 		}
@@ -153,16 +206,16 @@ function createClassicLeds(){
 	}
 	
 	function createTopLeds(){
-		step=(Hmax-Hmin)/ledsTop;
+		step=(Hmax-Hmin)/ledstop;
 		hmin=Hmin
 		if(cornerVGap != '0'){
-			step=(Hmax-Hmin-(cornerHGap*2))/ledsTop;
+			step=(Hmax-Hmin-(cornerHGap*2))/ledstop;
 			hmin=Hmin+(cornerHGap);
 		}
 		vmin=Vmin
 		vmax=vmin+ledsHDepth;
 		hmax=hmin+step
-		for (var i = 0; i<ledsTop; i++){
+		for (var i = 0; i<ledstop; i++){
 			createLedArray(hmin, hmax, vmin, vmax);
 			hmin += step
 			hmax += step
@@ -170,16 +223,16 @@ function createClassicLeds(){
 	}
 	
 	function createLeftLeds(){
-		step=(Vmax-Vmin)/ledsLeft;
+		step=(Vmax-Vmin)/ledsleft;
 		vmax=Vmax
 		if(cornerVGap != '0'){
-			step=(Vmax-Vmin-(cornerVGap*2))/ledsLeft;
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsleft;
 			vmax=Vmax-(cornerVGap);
 		}
 		hmin=Hmin;
 		hmax=hmin+ledsVDepth;
 		vmin=vmax-step
-		for (var i = ledsLeft; i>0; i--){
+		for (var i = ledsleft; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
 			vmin -= step
 			vmax -= step
@@ -187,16 +240,16 @@ function createClassicLeds(){
 	}
 	
 	function createRightLeds(){
-		step=(Vmax-Vmin)/ledsRight;
+		step=(Vmax-Vmin)/ledsright;
 		vmin=Vmin
 		if(cornerVGap != '0'){
-			step=(Vmax-Vmin-(cornerVGap*2))/ledsRight;
+			step=(Vmax-Vmin-(cornerVGap*2))/ledsright;
 			vmin=Vmin+(cornerVGap);
 		}
 		hmax=Hmax;
 		hmin=hmax-ledsVDepth;
 		vmax=vmin+step
-		for (var i = 0; i<ledsRight; i++){
+		for (var i = 0; i<ledsright; i++){
 			createLedArray(hmin, hmax, vmin, vmax);	
 			vmin += step
 			vmax += step			
@@ -204,16 +257,16 @@ function createClassicLeds(){
 	}
 	
 	function createBottomLeds(){
-		step=(Hmax-Hmin)/ledsBottom;
+		step=(Hmax-Hmin)/ledsbottom;
 		hmax=Hmax
 		if(cornerVGap != '0'){
-			step=(Hmax-Hmin-(cornerHGap*2))/ledsBottom;
+			step=(Hmax-Hmin-(cornerHGap*2))/ledsbottom;
 			hmax=Hmax-(cornerHGap);
 		}
 		vmax=Vmax;
 		vmin=vmax-ledsHDepth;
 		hmin=hmax-step
-		for (var i = ledsBottom; i>0; i--){
+		for (var i = ledsbottom; i>0; i--){
 			createLedArray(hmin, hmax, vmin, vmax);
 			hmin -= step;
 			hmax -= step;
@@ -222,8 +275,8 @@ function createClassicLeds(){
 	
 	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));

-	if(ledsGlength != "0" && validateGap()){
-		ledArray.splice(ledsGPos, ledsGlength);
+	if(ledsglength != "0" && validateGap()){
+		ledArray.splice(ledsgpos, ledsglength);
 	}
 	
 	if (position != "0"){
@@ -241,8 +294,8 @@ function createMatrixLeds(){
 // https://raw.githubusercontent.com/RanzQ/hyperion-audio-effects/master/matrix-config.js

 	//get values
-	var width = parseInt($("#ip_ma_ledshoriz").val());
-	var height = parseInt($("#ip_ma_ledsvert").val());
+	var ledshoriz = parseInt($("#ip_ma_ledshoriz").val());
+	var ledsvert = parseInt($("#ip_ma_ledsvert").val());
 	var cabling = $("#ip_ma_cabling").val();
 	//var order = $("#ip_ma_order").val();
 	var start = $("#ip_ma_start").val();
@@ -250,8 +303,8 @@ function createMatrixLeds(){
 	var parallel = false
 	var index = 0
 	var leds = []
-	var hblock = 1.0 / width
-	var vblock = 1.0 / height
+	var hblock = 1.0 / ledshoriz
+	var vblock = 1.0 / ledsvert

 	if (cabling == "parallel"){
 		parallel = true
@@ -288,10 +341,10 @@ function createMatrixLeds(){
 	}

 	var startYX = start.split('-')
-	var startX = startYX[1] === 'right' ? width - 1 : 0
-	var startY = startYX[0] === 'bottom' ? height - 1 : 0
-	var endX = startX === 0 ? width - 1 : 0
-	var endY = startY === 0 ? height - 1 : 0
+	var startX = startYX[1] === 'right' ? ledshoriz - 1 : 0
+	var startY = startYX[0] === 'bottom' ? ledsvert - 1 : 0
+	var endX = startX === 0 ? ledshoriz - 1 : 0
+	var endY = startY === 0 ? ledsvert - 1 : 0
 	var forward = startX < endX

 	var downward = startY < endY
@@ -316,75 +369,62 @@ function createMatrixLeds(){
 }

 $(document).ready(function() {
+	// translate
 	performTranslation();
-	//-------------------------------------------------------------------
+	
+	// restore values from storage
+	loadStoredValues();
+	
+	// check access level and adjust ui
+	if(storedAccess == "default")
+	{
+		$('#btn_ma_generate').toggle(false);
+		$('#btn_cl_generate').toggle(false);
+		$('#texfield_panel').toggle(false);
+		$('#previewcreator').toggle(false);
+	}
+	else
+	{
+		$('#btn_ma_save').toggle(false);
+		$('#btn_cl_save').toggle(false);
+	}
+	
+	// bind change event to all inputs
 	$('.ledCLconstr').bind("change", function() {
 		createClassicLeds();
 	});
-	
-	// ------------------------------------------------------------------
+
 	$('.ledMAconstr').bind("change", function() {
 		createMatrixLeds();
 	});
 	
-	// ------------------------------------------------------------------
+	// cl leds push to textfield and save values 
 	$('#btn_cl_generate').off().on("click", function() {
 		if (finalLedArray != ""){
 			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
-			$('#collapse1').collapse('hide')
+			$('#collapse1').collapse('hide');
 			$('#collapse4').collapse('show');
+			saveValues();
 		}
 	});
 	
-	// ------------------------------------------------------------------
+	// ma leds push to textfield and save values 
 	$('#btn_ma_generate').off().on("click", function() {
 		if (finalLedArray != ""){
 			$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
-			$('#collapse2').collapse('hide')
+			$('#collapse2').collapse('hide');
 			$('#collapse4').collapse('show');
+			saveValues();
 		}
 	});

-	// ------------------------------------------------------------------
-	$(hyperion).on("cmd-ledcolors-imagestream-update",function(event){
-		if ($("#leddevices").length == 0)
-		{
-			requestLedImageStop();
-		}
-		else
-		{
-			imageData = (event.response.result.image);
-			$("#image_preview").attr("src", imageData);
-		}
+	// 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;
 	});
-
-	// ------------------------------------------------------------------
-	$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
-		if ($("#leddevices").length == 0)
-		{
-			requestLedColorsStop();
-		}
-		else
-		{
-			ledColors = (event.response.result.leds);
-			for(var idx=0; idx<ledColors.length; idx++)
-			{
-				led = ledColors[idx]
-				$("#led_"+led.index).css("background","rgb("+led.red+","+led.green+","+led.blue+")");
-			}
-		}
-	});
-
-	// ------------------------------------------------------------------
-	$(hyperion).on("cmd-ledcolors-ledstream-stop",function(event){
-		led_count = $(".led").length;
-		for(var idx=0; idx<led_count; idx++)
-		{
-			$('#led_'+idx).css("background-color","hsl("+(idx*360/led_count)+",100%,50%)");
-		}
-	});
-
-	// ------------------------------------------------------------------
+	
+	// create led device selection
 	$(hyperion).one("cmd-serverinfo",function(event){
 		server = event.response;
 		ledDevices = server.info.ledDevices.available
@@ -428,93 +468,32 @@ $(document).ready(function() {
 		$("#leddevices").trigger("change");
 	});

-	// ------------------------------------------------------------------
-	$(hyperion).on("cmd-config-getconfig",function(event){
-		parsedConfJSON = event.response.result;
-		leds = parsedConfJSON.leds;
-		$("#ledconfig").text(JSON.stringify(leds, null, "\t"));
-		canvas_height = $('#leds_canvas').innerHeight();
-		canvas_width = $('#leds_canvas').innerWidth();
-
-		leds_html = '<img src="" id="image_preview" style="position:relative" />"';
-		for(var idx=0; idx<leds.length; idx++)
-		{
-			led = leds[idx];
-			led_id='led_'+led.index;
-			bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
-			pos = "left:"+(led.hscan.minimum * canvas_width)+"px;"+
-				"top:"+(led.vscan.minimum * canvas_height)+"px;"+
-				"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
-				"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
-			leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
-		}
-		$('#leds_canvas').html(leds_html);
-		$('#led_0').css({"z-index":"10"});
-		
-		$('#image_preview').hide();		
-		$('#image_preview').attr("width" , $('#leds_canvas').innerWidth()-2);		
-		$('#image_preview').attr("height", $('#leds_canvas').innerHeight()-2);
-	});
-
-	// ------------------------------------------------------------------
-	$('#leds_toggle_num').off().on("click", function() {
-		$('.led_num').toggle();
-		toggleClass('#leds_toggle_num', "btn-danger", "btn-success");
-	});
-
-	// ------------------------------------------------------------------
-	$('#leds_toggle').off().on("click", function() {
-		$('.led').toggle();
-		toggleClass('#leds_toggle', "btn-success", "btn-danger");
-	});
-
-	// ------------------------------------------------------------------
-	$('#leds_toggle_live').off().on("click", function() {
-		setClassByBool('#leds_toggle_live',ledStreamActive,"btn-success","btn-danger");
-		if ( ledStreamActive )
-		{
-			requestLedColorsStop();
-		}
-		else
-		{
-			requestLedColorsStart();
-		}
-	});
-
-	// ------------------------------------------------------------------
-	$('#leds_toggle_live_video').off().on("click", function() {
-		setClassByBool('#leds_toggle_live_video',imageStreamActive,"btn-success","btn-danger");
-		if ( imageStreamActive )
-		{
-			requestLedImageStop();
-			$('#image_preview').hide();
-		}
-		else
-		{
-			$('#image_preview').show();
-			requestLedImageStart();
-		}
-	});
-
-	// ------------------------------------------------------------------
+	// validate textfield and update preview
 	$("#leds_custom_updsim").off().on("click", function() {
 		if (validateText()){
 			createLedPreview(JSON.parse($("#ledconfig").val()), 'text');
 		}
 	});
 	
-	// ------------------------------------------------------------------
+	// save led config and saveValues - passing textfield
+	$("#btn_ma_save, #btn_cl_save").off().on("click", function() {
+		requestWriteConfig(JSON.parse('{"leds" :'+finalLedArray+'}'));
+		saveValues();
+	});
+	
+	// validate and save led config from textfield
 	$("#leds_custom_save").off().on("click", function() {
 		if (validateText())
 			requestWriteConfig(JSON.parse('{"leds" :'+$("#ledconfig").val()+'}'));
 	});

-	// ------------------------------------------------------------------
+	// toggle led numbers
 	$('#leds_prev_toggle_num').off().on("click", function() {
 		$('.led_prev_num').toggle();
 		toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
 	});
-	// -------------------------------------------------------------
+	
+	// nav
 	$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
 		var target = $(e.target).attr("href") // activated tab
 		if (target == "#menu_gencfg" && !ledsCustomCfgInitialized)
@@ -524,12 +503,11 @@ $(document).ready(function() {
 		}
 	});

-	// ------------------------------------------------------------------
+	// create and update editor
 	var conf_editor = null;
 	$("#leddevices").off().on("change", function(event) {
 		generalOptions  = parsedConfSchemaJSON.properties.device;
 		specificOptions = parsedConfSchemaJSON.properties.alldevices[$(this).val()];
-		//$('#ledDeviceOptions').html(JSON.stringify(generalOptions)+"<br>"+JSON.stringify(specificOptions));
 		conf_editor = createJsonEditor('editor_container', {
 			generalOptions : generalOptions,
 			specificOptions : specificOptions,
@@ -554,10 +532,6 @@ $(document).ready(function() {

 			conf_editor.getEditor("root.specificOptions").setValue( values_specific );
 		};
-
-		$('#editor_container .well').css("background-color","white");
-		$('#editor_container .well').css("border","none");
-		$('#editor_container .well').css("box-shadow","none");
 		
 		if ($(this).val() == "philipshue")
 		{
@@ -575,12 +549,13 @@ $(document).ready(function() {
 		{
 			$("#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) {
-		if (conf_editor==null)
-			return;

 		ledDevice = $("#leddevices").val();
 		result = {device:{}};
@@ -602,3 +577,4 @@ $(document).ready(function() {
 });


+