var ledsCustomCfgInitialized = false; var finalLedArray = []; 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+'
'); } } }); } function validateText(){ e = isJsonString($("#ledconfig").val()); if (e.length != 0){ showInfoDialog("error", $.i18n('InfoDialog_leds_validfail_title'), e); return false } return true } function round(number) { var factor = Math.pow(10, 4); var tempNumber = number * factor; var roundedTempNumber = Math.round(tempNumber); return roundedTempNumber / factor; }; function createLedPreview(leds, origin){ if (origin == "classic"){ $('#previewcreator').html('
'+$.i18n('conf_leds_layout_preview_originCL')+'
'); $('#leds_preview').css("padding-top", "56.25%"); } else if(origin == "text"){ $('#previewcreator').html('
'+$.i18n('conf_leds_layout_preview_originTEXT')+'
'); $('#leds_preview').css("padding-top", "56.25%"); } else if(origin == "matrix"){ $('#previewcreator').html('
'+$.i18n('conf_leds_layout_preview_originMA')+'
'); $('#leds_preview').css("padding-top", "100%"); } $('#previewledcount').html('
'+$.i18n('conf_leds_layout_preview_totalleds', leds.length)+'
'); $('.st_helper').css("border", "8px solid grey"); canvas_height = $('#leds_preview').innerHeight(); canvas_width = $('#leds_preview').innerWidth(); leds_html = ""; for(var idx=0; idx'+led.index+''; } $('#leds_preview').html(leds_html); $('#ledc_0').css({"background-color":"black","z-index":"12"}); $('#ledc_1').css({"background-color":"grey","z-index":"11"}); $('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"}); if($('#leds_prev_toggle_num').hasClass('btn-success')) $('.led_prev_num').css("display", "inline"); } 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 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()); //helper var ledsVDepth = rawledsVDepth /100; var ledsHDepth = rawledsHDepth /100; var edgeVGap = rawedgeGap /100/2; var edgeHGap = edgeVGap/(16/9); var cornerVGap = rawcornerGap /100/2; 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 ledArray = []; function createFinalArray(array){ finalLedArray = []; for(var i = 0; i 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-- ){ array.push(array.shift()) } return array; } else { while( times++ ){ array.unshift(array.pop()) } return array; } } function createLedArray(hmin, hmax, vmin, vmax){ hmin = round(hmin); hmax = round(hmax); vmin = round(vmin); vmax = round(vmax); ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} ); } function createTopLeds(){ step=(Hmax-Hmin)/ledsTop; hmin=Hmin if(cornerVGap != '0'){ step=(Hmax-Hmin-(cornerHGap*2))/ledsTop; hmin=Hmin+(cornerHGap); } vmin=Vmin vmax=vmin+ledsHDepth; hmax=hmin+step for (var i = 0; i0; i--){ 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); } hmax=Hmax; hmin=hmax-ledsVDepth; vmax=vmin+step for (var i = 0; i0; i--){ createLedArray(hmin, hmax, vmin, vmax); hmin -= step; hmax -= step; } } createLeftLeds(createBottomLeds(createRightLeds(createTopLeds()))); if(ledsGlength != "0" && validateGap()){ ledArray.splice(ledsGPos, ledsGlength); } if (position != "0"){ rotateArray(ledArray, position); } if (reverse) ledArray.reverse(); createFinalArray(ledArray); } function createMatrixLeds(){ // Big thank you to RanzQ (Juha Rantanen) from Github for this script // 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 cabling = $("#ip_ma_cabling").val(); //var order = $("#ip_ma_order").val(); var start = $("#ip_ma_start").val(); var parallel = false var index = 0 var leds = [] var hblock = 1.0 / width var vblock = 1.0 / height if (cabling == "parallel"){ parallel = true } /** * Adds led to the hyperion config led array * @param {Number} index Index of the led * @param {Number} x Horizontal position in matrix * @param {Number} y Vertical position in matrix */ function addLed (index, x, y) { var hscanMin = x * hblock var hscanMax = (x + 1) * hblock var vscanMin = y * vblock var vscanMax = (y + 1) * vblock hscanMin = round(hscanMin); hscanMax = round(hscanMax); vscanMin = round(vscanMin); vscanMax = round(vscanMax); leds.push({ index: index, hscan: { minimum: hscanMin, maximum: hscanMax }, vscan: { minimum: vscanMin, maximum: vscanMax } }) } 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 forward = startX < endX var downward = startY < endY var x, y for (y = startY; downward && y <= endY || !downward && y >= endY; y += downward ? 1 : -1) { for (x = startX; forward && x <= endX || !forward && x >= endX; x += forward ? 1 : -1) { addLed(index, x, y) index++ } if (!parallel) { forward = !forward var tmp = startX startX = endX endX = tmp } } finalLedArray =[]; finalLedArray = leds createLedPreview(leds, 'matrix'); } $(document).ready(function() { performTranslation(); //------------------------------------------------------------------- $('.ledCLconstr').bind("change", function() { createClassicLeds(); }); // ------------------------------------------------------------------ $('.ledMAconstr').bind("change", function() { createMatrixLeds(); }); // ------------------------------------------------------------------ $('#btn_cl_generate').off().on("click", function() { if (finalLedArray != ""){ $("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t")); $('#collapse1').collapse('hide') $('#collapse4').collapse('show'); } }); // ------------------------------------------------------------------ $('#btn_ma_generate').off().on("click", function() { if (finalLedArray != ""){ $("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t")); $('#collapse2').collapse('hide') $('#collapse4').collapse('show'); } }); // ------------------------------------------------------------------ $(hyperion).on("cmd-ledcolors-imagestream-update",function(event){ if ($("#leddevices").length == 0) { requestLedImageStop(); } else { imageData = (event.response.result.image); $("#image_preview").attr("src", imageData); } }); // ------------------------------------------------------------------ $(hyperion).on("cmd-ledcolors-ledstream-update",function(event){ if ($("#leddevices").length == 0) { requestLedColorsStop(); } else { ledColors = (event.response.result.leds); for(var idx=0; idx'+led.index+''; } $('#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(); } }); // ------------------------------------------------------------------ $("#leds_custom_updsim").off().on("click", function() { if (validateText()){ createLedPreview(JSON.parse($("#ledconfig").val()), 'text'); } }); // ------------------------------------------------------------------ $("#leds_custom_save").off().on("click", function() { if (validateText()) requestWriteConfig(JSON.parse('{"leds" :'+$("#ledconfig").val()+'}')); }); // ------------------------------------------------------------------ $('#leds_prev_toggle_num').off().on("click", function() { $('.led_prev_num').toggle(); toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success"); }); // ------------------------------------------------------------- $('#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) { $('#leds_custom_updsim').trigger('click'); ledsCustomCfgInitialized = true; } }); // ------------------------------------------------------------------ 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)+"
"+JSON.stringify(specificOptions)); 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 ); }; $('#editor_container .well').css("background-color","white"); $('#editor_container .well').css("border","none"); $('#editor_container .well').css("box-shadow","none"); 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(); } }); // ------------------------------------------------------------------ $("#btn_submit_controller").off().on("click", function(event) { if (conf_editor==null) return; ledDevice = $("#leddevices").val(); result = {device:{}}; general = conf_editor.getEditor("root.generalOptions").getValue(); specific = conf_editor.getEditor("root.specificOptions").getValue(); for(var key in general){ result.device[key] = general[key]; } for(var key in specific){ result.device[key] = specific[key]; } result.device.type=ledDevice; requestWriteConfig(result) }); requestServerConfig(); });