mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
WebUI fixes & Draggable LEDs (#1444)
* WebUI fixes & Draggable LEDs * Correct some keystone issues * Fix lgtm warnings (thx @Lord-Grey) * Change of LGTM badge (code quality) * Log output and LED preview window can be maximized * Rework * z-index of the corners corrected * migrated to animate.css v4.1.1 * Fix collapsing & add gap constraints * Address LGTM findings * design refactor * Typo fix (thx @Lord-Grey) * Avoid overlap during keystone correction Co-authored-by: LordGrey <lordgrey.emmel@gmail.com> Co-authored-by: LordGrey <48840279+Lord-Grey@users.noreply.github.com>
This commit is contained in:
Paulchen-Panther
GitHub
@@ -8,6 +8,15 @@ var aceEdt = null;
|
||||
var imageCanvasNodeCtx;
|
||||
var canvas_height;
|
||||
var canvas_width;
|
||||
var topLeftPoint = null;
|
||||
var topRightPoint = null;
|
||||
var bottomRightPoint = null;
|
||||
var bottomLeftPoint = null;
|
||||
var topLeft2topRight = null;
|
||||
var topRight2bottomRight = null;
|
||||
var bottomRight2bottomLeft = null;
|
||||
var bottomLeft2topLeft = null;
|
||||
var toggleKeystoneCorrectionArea = false;
|
||||
|
||||
var devRPiSPI = ['apa102', 'apa104', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'sk6822spi', 'sk9822', 'ws2812spi'];
|
||||
var devRPiPWM = ['ws281x'];
|
||||
@@ -18,6 +27,8 @@ var devHID = ['hyperionusbasp', 'lightpack', 'paintpack', 'rawhid'];
|
||||
|
||||
var infoTextDefault = '<span>' + $.i18n("conf_leds_device_info_log") + ' </span><a href="" onclick="SwitchToMenuItem(\'MenuItemLogging\')" style="cursor:pointer">' + $.i18n("main_menu_logging_token") + '</a>';
|
||||
|
||||
var configPanel = "text";
|
||||
|
||||
function round(number) {
|
||||
var factor = Math.pow(10, 4);
|
||||
var tempNumber = number * factor;
|
||||
@@ -25,16 +36,16 @@ function round(number) {
|
||||
return roundedTempNumber / factor;
|
||||
};
|
||||
|
||||
function createLedPreview(leds, origin) {
|
||||
if (origin == "classic") {
|
||||
function createLedPreview(leds) {
|
||||
if (configPanel == "classic") {
|
||||
$('#previewcreator').html($.i18n('conf_leds_layout_preview_originCL'));
|
||||
$('#leds_preview').css("padding-top", "56.25%");
|
||||
}
|
||||
else if (origin == "text") {
|
||||
else if (configPanel == "text") {
|
||||
$('#previewcreator').html($.i18n('conf_leds_layout_preview_originTEXT'));
|
||||
$('#leds_preview').css("padding-top", "56.25%");
|
||||
}
|
||||
else if (origin == "matrix") {
|
||||
else if (configPanel == "matrix") {
|
||||
$('#previewcreator').html($.i18n('conf_leds_layout_preview_originMA'));
|
||||
$('#leds_preview').css("padding-top", "100%");
|
||||
}
|
||||
@@ -51,7 +62,7 @@ function createLedPreview(leds, origin) {
|
||||
$('#image_preview').css({ "width": canvas_width, "height": canvas_height });
|
||||
|
||||
var leds_html = "";
|
||||
for (var idx = 0; idx < leds.length; idx++) {
|
||||
for (var idx = leds.length-1; idx >= 0; idx--) {
|
||||
var led = leds[idx];
|
||||
var led_id = 'ledc_' + [idx];
|
||||
var bgcolor = "background-color:hsla(" + (idx * 360 / leds.length) + ",100%,50%,0.75);";
|
||||
@@ -68,6 +79,186 @@ function createLedPreview(leds, origin) {
|
||||
|
||||
if ($('#leds_prev_toggle_num').hasClass('btn-success'))
|
||||
$('.led_prev_num').css("display", "inline");
|
||||
|
||||
if (onLedLayoutTab && configPanel == "classic" && toggleKeystoneCorrectionArea) {
|
||||
// Calculate corner size (min/max:10px/18px)
|
||||
var size = Math.min(Math.max(canvas_width / 100 * 2, 10), 18);
|
||||
var corner_size = "width:" + size + "px; height:" + size + "px;";
|
||||
|
||||
var corners =
|
||||
'<div id="top_left_point" class="keystone_correction_corners cursor_nwse" style="' + corner_size + '"></div>' +
|
||||
'<div id="top_right_point" class="keystone_correction_corners cursor_nesw" style="' + corner_size + '"></div>' +
|
||||
'<div id="bottom_right_point" class="keystone_correction_corners cursor_nwse" style="' + corner_size + '"></div>' +
|
||||
'<div id="bottom_left_point" class="keystone_correction_corners cursor_nesw" style="' + corner_size + '"></div>';
|
||||
$('#keystone_correction_area').html(corners).css({ "width": canvas_width, "height": canvas_height });
|
||||
|
||||
var top_left_point = document.getElementById('top_left_point'),
|
||||
top_right_point = document.getElementById('top_right_point'),
|
||||
bottom_right_point = document.getElementById('bottom_right_point'),
|
||||
bottom_left_point = document.getElementById('bottom_left_point');
|
||||
|
||||
var maxWidth = $('#keystone_correction_area').innerWidth(),
|
||||
maxHeight = $('#keystone_correction_area').innerHeight();
|
||||
|
||||
// Deactivate build-in cursor
|
||||
PlainDraggable.draggableCursor = false;
|
||||
PlainDraggable.draggingCursor = false;
|
||||
|
||||
// Top Left Point
|
||||
topLeftPoint = new PlainDraggable(top_left_point, {
|
||||
containment: {
|
||||
left: parseInt($('#keystone_correction_area').offset().left - size / 2),
|
||||
top: parseInt($('#keystone_correction_area').offset().top - size / 2),
|
||||
width: parseInt(maxWidth + $('#top_left_point').outerWidth()),
|
||||
height: parseInt(maxHeight + $('#top_left_point').outerHeight()),
|
||||
},
|
||||
onMove: function(newPosition) {
|
||||
var keystone_correction_area_offsets = $('#keystone_correction_area').offset();
|
||||
var left = newPosition.left - keystone_correction_area_offsets.left + size / 2;
|
||||
var top = newPosition.top - keystone_correction_area_offsets.top + size / 2;
|
||||
var ptlh = Math.min(Math.max((((left * 1) / maxWidth).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
var ptlv = Math.min(Math.max((((top * 1) / maxHeight).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
|
||||
$('#ip_cl_ptlh').val(ptlh);
|
||||
$('#ip_cl_ptlv').val(ptlv);
|
||||
$("#ip_cl_ptlh, #ip_cl_ptlv").trigger("change");
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize position
|
||||
topLeftPoint.left = $('#keystone_correction_area').offset().left + maxWidth / 100 * $('#ip_cl_ptlh').val() - size / 2;
|
||||
topLeftPoint.top = $('#keystone_correction_area').offset().top + maxHeight / 100 * $('#ip_cl_ptlv').val() - size / 2;
|
||||
|
||||
// Top right point
|
||||
topRightPoint = new PlainDraggable(top_right_point, {
|
||||
containment: {
|
||||
left: parseInt($('#keystone_correction_area').offset().left - $('#top_right_point').outerWidth() + size / 2),
|
||||
top: parseInt($('#keystone_correction_area').offset().top - size / 2),
|
||||
width: parseInt(maxWidth + $('#top_right_point').outerWidth()),
|
||||
height: parseInt(maxHeight + $('#top_right_point').outerHeight())
|
||||
},
|
||||
onMove: function(newPosition) {
|
||||
var keystone_correction_area_offsets = $('#keystone_correction_area').offset();
|
||||
var left = newPosition.left - keystone_correction_area_offsets.left + $('#top_right_point').outerWidth() - size / 2;
|
||||
var top = newPosition.top - keystone_correction_area_offsets.top + size / 2;
|
||||
var ptrh = Math.min(Math.max((((left * 1) / maxWidth).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
var ptrv = Math.min(Math.max((((top * 1) / maxHeight).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
|
||||
$('#ip_cl_ptrh').val(ptrh);
|
||||
$('#ip_cl_ptrv').val(ptrv);
|
||||
$("#ip_cl_ptrh, #ip_cl_ptrv").trigger("change");
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize position
|
||||
topRightPoint.left = $('#keystone_correction_area').offset().left + maxWidth / 100 * $('#ip_cl_ptrh').val() - size / 2;
|
||||
topRightPoint.top = $('#keystone_correction_area').offset().top + maxHeight / 100 * $('#ip_cl_ptrv').val() - size / 2;
|
||||
|
||||
// Bottom right point
|
||||
bottomRightPoint = new PlainDraggable(bottom_right_point, {
|
||||
containment: {
|
||||
left: parseInt($('#keystone_correction_area').offset().left - $('#bottom_right_point').outerWidth() + size / 2),
|
||||
top: parseInt($('#keystone_correction_area').offset().top - $('#bottom_right_point').outerHeight() + size / 2),
|
||||
width: parseInt(maxWidth + $('#bottom_right_point').outerWidth()),
|
||||
height: parseInt(maxHeight + $('#bottom_right_point').outerHeight())
|
||||
},
|
||||
onMove: function(newPosition) {
|
||||
var keystone_correction_area_offsets = $('#keystone_correction_area').offset();
|
||||
var left = newPosition.left - keystone_correction_area_offsets.left + $('#bottom_right_point').outerWidth() - size / 2;
|
||||
var top = newPosition.top - keystone_correction_area_offsets.top + $('#bottom_right_point').outerHeight() - size / 2;
|
||||
var pbrh = Math.min(Math.max((((left * 1) / maxWidth).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
var pbrv = Math.min(Math.max((((top * 1) / maxHeight).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
|
||||
$('#ip_cl_pbrh').val(pbrh);
|
||||
$('#ip_cl_pbrv').val(pbrv);
|
||||
$("#ip_cl_pbrh, #ip_cl_pbrv").trigger("change");
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize position
|
||||
bottomRightPoint.left = $('#keystone_correction_area').offset().left + maxWidth / 100 * $('#ip_cl_pbrh').val() - size / 2;
|
||||
bottomRightPoint.top = $('#keystone_correction_area').offset().top + maxHeight / 100 * $('#ip_cl_pbrv').val() - size / 2;
|
||||
|
||||
// Bottom left point
|
||||
bottomLeftPoint = new PlainDraggable(bottom_left_point, {
|
||||
containment: {
|
||||
left: parseInt($('#keystone_correction_area').offset().left - size / 2),
|
||||
top: parseInt($('#keystone_correction_area').offset().top - $('#bottom_left_point').outerHeight() + size / 2),
|
||||
width: parseInt(maxWidth + $('#bottom_left_point').outerWidth()),
|
||||
height: parseInt(maxHeight + $('#bottom_left_point').outerHeight())
|
||||
},
|
||||
onMove: function(newPosition) {
|
||||
var keystone_correction_area_offsets = $('#keystone_correction_area').offset();
|
||||
var left = newPosition.left - keystone_correction_area_offsets.left + size / 2;
|
||||
var top = newPosition.top - keystone_correction_area_offsets.top + $('#bottom_left_point').outerHeight() - size / 2;
|
||||
var pblh = Math.min(Math.max((((left * 1) / maxWidth).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
var pblv = Math.min(Math.max((((top * 1) / maxHeight).toFixed(2) * 100).toFixed(0), 0), 100);
|
||||
|
||||
$('#ip_cl_pblh').val(pblh);
|
||||
$('#ip_cl_pblv').val(pblv);
|
||||
$("#ip_cl_pblh, #ip_cl_pblv").trigger("change");
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize position
|
||||
bottomLeftPoint.left = $('#keystone_correction_area').offset().left + maxWidth / 100 * $('#ip_cl_pblh').val() - size / 2;
|
||||
bottomLeftPoint.top = $('#keystone_correction_area').offset().top + maxHeight / 100 * $('#ip_cl_pblv').val() - size / 2;
|
||||
|
||||
// Remove existing lines
|
||||
if (topLeft2topRight != null) {
|
||||
topLeft2topRight.remove();
|
||||
}
|
||||
|
||||
if (topRight2bottomRight != null) {
|
||||
topRight2bottomRight.remove();
|
||||
}
|
||||
|
||||
if (bottomRight2bottomLeft != null) {
|
||||
bottomRight2bottomLeft.remove();
|
||||
}
|
||||
|
||||
if (bottomLeft2topLeft != null) {
|
||||
bottomLeft2topLeft.remove();
|
||||
}
|
||||
|
||||
// Get border color from keystone correction corners
|
||||
var lineColor = $(".keystone_correction_corners").css("border-color");
|
||||
|
||||
// Add lines
|
||||
topLeft2topRight = new LeaderLine(LeaderLine.pointAnchor(top_left_point, {x: '50%', y: '50%'}), LeaderLine.pointAnchor(top_right_point, {x: '50%', y: '50%'}), {path: 'straight', size: 1, color: lineColor, endPlug: 'behind'});
|
||||
topRight2bottomRight = new LeaderLine(LeaderLine.pointAnchor(top_right_point, {x: '50%', y: '50%'}), LeaderLine.pointAnchor(bottom_right_point, {x: '50%', y: '50%'}), {path: 'straight', size: 1, color: lineColor, endPlug: 'behind'});
|
||||
bottomRight2bottomLeft = new LeaderLine(LeaderLine.pointAnchor(bottom_right_point, {x: '50%', y: '50%'}), LeaderLine.pointAnchor(bottom_left_point, {x: '50%', y: '50%'}), {path: 'straight', size: 1, color: lineColor, endPlug: 'behind'});
|
||||
bottomLeft2topLeft = new LeaderLine(LeaderLine.pointAnchor(bottom_left_point, {x: '50%', y: '50%'}), LeaderLine.pointAnchor(top_left_point, {x: '50%', y: '50%'}), {path: 'straight', size: 1, color: lineColor, endPlug: 'behind'});
|
||||
} else {
|
||||
$('#keystone_correction_area').html("").css({ "width" : 0, "height" : 0 });
|
||||
|
||||
// Remove existing lines
|
||||
if (topLeft2topRight != null) {
|
||||
topLeft2topRight.remove();
|
||||
topLeft2topRight = null;
|
||||
}
|
||||
|
||||
if (topRight2bottomRight != null) {
|
||||
topRight2bottomRight.remove();
|
||||
topRight2bottomRight = null;
|
||||
}
|
||||
|
||||
if (bottomRight2bottomLeft != null) {
|
||||
bottomRight2bottomLeft.remove();
|
||||
bottomRight2bottomLeft = null;
|
||||
}
|
||||
|
||||
if (bottomLeft2topLeft != null) {
|
||||
bottomLeft2topLeft.remove();
|
||||
bottomLeft2topLeft = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Change on window resize. Is this correct?
|
||||
$(window).off("resize.createLedPreview");
|
||||
$(window).on("resize.createLedPreview",(function() {
|
||||
createLedPreview(leds);
|
||||
}));
|
||||
}
|
||||
|
||||
function createClassicLedLayoutSimple(ledstop, ledsleft, ledsright, ledsbottom, position, reverse) {
|
||||
@@ -273,7 +464,7 @@ function createClassicLeds() {
|
||||
$('#ip_cl_ledsglength').val(finalLedArray.length - 1);
|
||||
}
|
||||
|
||||
createLedPreview(finalLedArray, 'classic');
|
||||
createLedPreview(finalLedArray);
|
||||
aceEdt.set(finalLedArray);
|
||||
}
|
||||
|
||||
@@ -369,7 +560,7 @@ function createMatrixLeds() {
|
||||
nonBlacklistLedArray = createMatrixLayout(ledshoriz, ledsvert, cabling, start, direction);
|
||||
finalLedArray = blackListLeds(nonBlacklistLedArray, ledBlacklist);
|
||||
|
||||
createLedPreview(finalLedArray, 'matrix');
|
||||
createLedPreview(finalLedArray);
|
||||
aceEdt.set(finalLedArray);
|
||||
}
|
||||
|
||||
@@ -495,32 +686,57 @@ $(document).ready(function () {
|
||||
if (this.value > ptrh) {
|
||||
$(this).val(ptrh);
|
||||
}
|
||||
var pbrh = parseInt($("#ip_cl_pbrh").val());
|
||||
if (this.value > pbrh) {
|
||||
$(this).val(pbrh);
|
||||
}
|
||||
break;
|
||||
case "ip_cl_ptrh":
|
||||
var ptlh = parseInt($("#ip_cl_ptlh").val());
|
||||
if (this.value < ptlh) {
|
||||
$(this).val(ptlh);
|
||||
}
|
||||
var pblh = parseInt($("#ip_cl_pblh").val());
|
||||
if (this.value < pblh) {
|
||||
$(this).val(pblh);
|
||||
}
|
||||
break;
|
||||
case "ip_cl_pblh":
|
||||
var pbrh = parseInt($("#ip_cl_pbrh").val());
|
||||
if (this.value > pbrh) {
|
||||
$(this).val(pbrh);
|
||||
}
|
||||
var ptrh = parseInt($("#ip_cl_ptrh").val());
|
||||
if (this.value > ptrh) {
|
||||
$(this).val(ptrh);
|
||||
}
|
||||
|
||||
break;
|
||||
case "ip_cl_pbrh":
|
||||
var pblh = parseInt($("#ip_cl_pblh").val());
|
||||
if (this.value < pblh) {
|
||||
$(this).val(pblh);
|
||||
}
|
||||
var ptlh = parseInt($("#ip_cl_ptlh").val());
|
||||
if (this.value < ptlh) {
|
||||
$(this).val(ptlh);
|
||||
}
|
||||
break;
|
||||
case "ip_cl_ptlv":
|
||||
var pblv = parseInt($("#ip_cl_pblv").val());
|
||||
if (this.value > pblv) {
|
||||
$(this).val(pblv);
|
||||
}
|
||||
var pbrv = parseInt($("#ip_cl_pbrv").val());
|
||||
if (this.value > pbrv) {
|
||||
$(this).val(pbrv);
|
||||
}
|
||||
break;
|
||||
case "ip_cl_pblv":
|
||||
var ptrv = parseInt($("#ip_cl_ptrv").val());
|
||||
if (this.value < ptrv) {
|
||||
$(this).val(ptrv);
|
||||
}
|
||||
var ptlv = parseInt($("#ip_cl_ptlv").val());
|
||||
if (this.value < ptlv) {
|
||||
$(this).val(ptlv);
|
||||
@@ -531,12 +747,48 @@ $(document).ready(function () {
|
||||
if (this.value > pbrv) {
|
||||
$(this).val(pbrv);
|
||||
}
|
||||
var pblv = parseInt($("#ip_cl_pblv").val());
|
||||
if (this.value > pblv) {
|
||||
$(this).val(pblv);
|
||||
}
|
||||
break;
|
||||
case "ip_cl_pbrv":
|
||||
var ptrv = parseInt($("#ip_cl_ptrv").val());
|
||||
if (this.value < ptrv) {
|
||||
$(this).val(ptrv);
|
||||
}
|
||||
var ptlv = parseInt($("#ip_cl_ptlv").val());
|
||||
if (this.value < ptlv) {
|
||||
$(this).val(ptlv);
|
||||
}
|
||||
break;
|
||||
|
||||
case "ip_cl_top":
|
||||
case "ip_cl_bottom":
|
||||
case "ip_cl_left":
|
||||
case "ip_cl_right":
|
||||
case "ip_cl_glength":
|
||||
case "ip_cl_gpos":
|
||||
var ledstop = parseInt($("#ip_cl_top").val());
|
||||
var ledsbottom = parseInt($("#ip_cl_bottom").val());
|
||||
var ledsleft = parseInt($("#ip_cl_left").val());
|
||||
var ledsright = parseInt($("#ip_cl_right").val());
|
||||
var maxLEDs = ledstop + ledsbottom + ledsleft + ledsright;
|
||||
|
||||
var gpos = parseInt($("#ip_cl_gpos").val());
|
||||
$("#ip_cl_gpos").attr({'max':maxLEDs-1});
|
||||
|
||||
var max = maxLEDs-gpos;
|
||||
if (gpos == 0) {
|
||||
--max;
|
||||
}
|
||||
$("#ip_cl_glength").attr({'max':max});
|
||||
|
||||
var glength = parseInt($("#ip_cl_glength").val());
|
||||
if (glength+gpos >= maxLEDs) {
|
||||
$("#ip_cl_glength").val($("#ip_cl_glength").attr('max'));
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
}
|
||||
@@ -548,17 +800,24 @@ $(document).ready(function () {
|
||||
createMatrixLeds();
|
||||
});
|
||||
|
||||
$(document).on('click', "#classic_panel", function (e) {
|
||||
$('#collapse1').on('shown.bs.collapse', function () {
|
||||
configPanel = "classic";
|
||||
$("#leds_prev_toggle_keystone_correction_area").show();
|
||||
createClassicLeds();
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', "#matrix_panel", function (e) {
|
||||
$('#collapse2').on('shown.bs.collapse', function () {
|
||||
configPanel = "matrix";
|
||||
$("#leds_prev_toggle_keystone_correction_area").hide();
|
||||
createMatrixLeds();
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', "#current_config_panel", function (e) {
|
||||
$('#collapse5').on('shown.bs.collapse', function () {
|
||||
configPanel = "text";
|
||||
$("#leds_prev_toggle_keystone_correction_area").hide();
|
||||
createLedPreview(finalLedArray);
|
||||
aceEdt.set(finalLedArray);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialise from config and apply blacklist rules
|
||||
nonBlacklistLedArray = window.serverConfig.leds;
|
||||
@@ -615,7 +874,7 @@ $(document).ready(function () {
|
||||
$("#leds_custom_updsim").off().on("click", function () {
|
||||
nonBlacklistLedArray = aceEdt.get();
|
||||
finalLedArray = blackListLeds(nonBlacklistLedArray, ledBlacklist);
|
||||
createLedPreview(finalLedArray, 'text');
|
||||
createLedPreview(finalLedArray);
|
||||
});
|
||||
|
||||
// save led layout, the generated textfield configuration always represents the latest layout
|
||||
@@ -631,6 +890,26 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
// toggle right icon on "Advanced Settings" click
|
||||
$('#advanced_settings').on('click', function(e) {
|
||||
$('#advanced_settings_right_icon').toggleClass('fa-angle-down fa-angle-up');
|
||||
});
|
||||
|
||||
// toggle fullscreen button in led preview
|
||||
$(".fullscreen-btn").mousedown(function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(".fullscreen-btn").click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).children('i')
|
||||
.toggleClass('fa-expand')
|
||||
.toggleClass('fa-compress');
|
||||
$('#layout_type').toggle();
|
||||
$('#layout_preview').toggleClass('col-lg-6 col-lg-12');
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
|
||||
// toggle led numbers
|
||||
$('#leds_prev_toggle_num').off().on("click", function () {
|
||||
$('.led_prev_num').toggle();
|
||||
@@ -652,8 +931,15 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
|
||||
// toggle keystone correction area
|
||||
$('#leds_prev_toggle_keystone_correction_area').off().on("click", function () {
|
||||
toggleKeystoneCorrectionArea = !toggleKeystoneCorrectionArea
|
||||
toggleClass('#leds_prev_toggle_keystone_correction_area', "btn-success", "btn-danger");
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
|
||||
$(window.hyperion).on("cmd-ledcolors-imagestream-update", function (event) {
|
||||
//Only update Image, if LED Layout Tab is visible
|
||||
//Only update Image, if LED Layout Tab is visible
|
||||
if (onLedLayoutTab && window.imageStreamActive) {
|
||||
setClassByBool('#leds_prev_toggle_live_video', window.imageStreamActive, "btn-danger", "btn-success");
|
||||
var imageData = (event.response.result.image);
|
||||
@@ -688,6 +974,7 @@ $(document).ready(function () {
|
||||
$('#leds_custom_updsim').trigger('click');
|
||||
} else {
|
||||
onLedLayoutTab = false;
|
||||
window.dispatchEvent(new Event('resize')); // remove keystone correction lines
|
||||
}
|
||||
|
||||
blacklist_editor.on('change', function () {
|
||||
@@ -1663,7 +1950,7 @@ async function getProperties_device(ledType, key, params) {
|
||||
}
|
||||
}
|
||||
else {
|
||||
showNotification('warning', $.i18n('conf_leds_error_get_properties_text'), $.i18n('conf_leds_error_get_properties_title'))
|
||||
showNotification('warning', $.i18n('conf_leds_error_get_properties_text'), $.i18n('conf_leds_error_get_properties_title'));
|
||||
$('#btn_submit_controller').prop('disabled', true);
|
||||
$('#btn_test_controller').prop('disabled', true);
|
||||
}
|
||||
|
||||
@@ -192,5 +192,19 @@ $(document).ready(function () {
|
||||
|
||||
});
|
||||
|
||||
// toggle fullscreen button in log output
|
||||
$(".fullscreen-btn").mousedown(function(e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(".fullscreen-btn").click(function(e) {
|
||||
e.preventDefault();
|
||||
$(this).children('i')
|
||||
.toggleClass('fa-expand')
|
||||
.toggleClass('fa-compress');
|
||||
$('#conf_cont').toggle();
|
||||
$('#logmessages').css('max-height', $('#logmessages').css('max-height') !== 'none' ? 'none' : '400px' );
|
||||
});
|
||||
|
||||
removeOverlay();
|
||||
});
|
||||
|
||||
@@ -6,8 +6,9 @@ $(document).ready(function () {
|
||||
var leds;
|
||||
var grabberConfig;
|
||||
var lC = false;
|
||||
var imageCanvasNodeCtx;
|
||||
var ledsCanvasNodeCtx;
|
||||
var imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d");
|
||||
var ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d");
|
||||
var sigDetectAreaCanvasNodeCtx = document.getElementById("grab_preview_canv").getContext("2d");
|
||||
var canvas_height;
|
||||
var canvas_width;
|
||||
var twoDPaths = [];
|
||||
@@ -93,9 +94,9 @@ $(document).ready(function () {
|
||||
uiLibrary: 'bootstrap',
|
||||
resizable: true,
|
||||
modal: false,
|
||||
minWidth: 250,
|
||||
minWidth: 350,
|
||||
width: ledsim_width,
|
||||
minHeight: 350,
|
||||
minHeight: 400,
|
||||
height: ledsim_height,
|
||||
closeOnEscape: true,
|
||||
autoOpen: false,
|
||||
@@ -167,7 +168,7 @@ $(document).ready(function () {
|
||||
//roundRect(ledsCanvasNodeCtx, led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height, 4, true, colors[idx])
|
||||
//ledsCanvasNodeCtx.fillRect(led.hmin * canvas_width, led.vmin * canvas_height, (led.hmax-led.hmin) * canvas_width, (led.vmax-led.vmin) * canvas_height);
|
||||
|
||||
ledsCanvasNodeCtx.fillStyle = (useColor) ? "rgba(" + colors[cPos] + "," + colors[cPos + 1] + "," + colors[cPos + 2] + ",0.75)" : "hsla(" + (idx * 360 / leds.length) + ",100%,50%,0.75)";
|
||||
ledsCanvasNodeCtx.fillStyle = (useColor) ? "rgba(" + colors[cPos] + "," + colors[cPos + 1] + "," + colors[cPos + 2] + ",1.0)" : "hsla(" + (idx * 360 / leds.length) + ",100%,50%,1.0)";
|
||||
ledsCanvasNodeCtx.fill(twoDPaths[idx]);
|
||||
ledsCanvasNodeCtx.strokeStyle = '#323232';
|
||||
ledsCanvasNodeCtx.stroke(twoDPaths[idx]);
|
||||
@@ -198,20 +199,14 @@ $(document).ready(function () {
|
||||
canvas_height = $('#ledsim_dialog').outerHeight() - $('#ledsim_text').outerHeight() - $('[data-role=footer]').outerHeight() - $('[data-role=header]').outerHeight() - 40;
|
||||
canvas_width = $('#ledsim_dialog').outerWidth() - 30;
|
||||
|
||||
$('#leds_canvas').html("");
|
||||
var leds_html = '<canvas id="image_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99998;"></canvas>';
|
||||
leds_html += '<canvas id="leds_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
|
||||
leds_html += '<canvas id="grab_preview_canv" width="' + canvas_width + '" height="' + canvas_height + '" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>';
|
||||
$("[id$=_preview_canv]").prop({"width": canvas_width, "height": canvas_height});
|
||||
$("body").get(0).style.setProperty("--width-var", canvas_width + "px");
|
||||
$("body").get(0).style.setProperty("--height-var", canvas_height + "px");
|
||||
|
||||
$('#leds_canvas').html(leds_html);
|
||||
|
||||
imageCanvasNodeCtx = document.getElementById("image_preview_canv").getContext("2d");
|
||||
ledsCanvasNodeCtx = document.getElementById("leds_preview_canv").getContext("2d");
|
||||
sigDetectAreaCanvasNodeCtx = document.getElementById("grab_preview_canv").getContext("2d");
|
||||
create2dPaths();
|
||||
printLedsToCanvas();
|
||||
$("body").get(0).style.setProperty("--background-var", "none");
|
||||
resetImage();
|
||||
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
@@ -227,6 +222,7 @@ $(document).ready(function () {
|
||||
if (window.ledStreamActive) {
|
||||
requestLedColorsStop();
|
||||
ledsCanvasNodeCtx.clear();
|
||||
$("body").get(0).style.setProperty("--background-var", "none");
|
||||
} else {
|
||||
requestLedColorsStart();
|
||||
}
|
||||
@@ -262,9 +258,11 @@ $(document).ready(function () {
|
||||
$(window.hyperion).on("cmd-ledcolors-ledstream-update", function (event) {
|
||||
if (!modalOpened) {
|
||||
requestLedColorsStop();
|
||||
$("body").get(0).style.setProperty("--background-var", "none");
|
||||
}
|
||||
else {
|
||||
printLedsToCanvas(event.response.result.leds)
|
||||
$("body").get(0).style.setProperty("--background-var", "url(" + ($('#leds_preview_canv')[0]).toDataURL("image/jpg") + ") no-repeat top left");
|
||||
}
|
||||
});
|
||||
|
||||
@@ -332,7 +330,13 @@ $(document).ready(function () {
|
||||
|
||||
imageCanvasNodeCtx.fillStyle = "#1c1c1c"; //90% gray
|
||||
imageCanvasNodeCtx.fillRect(0, 0, canvas_width, canvas_height);
|
||||
imageCanvasNodeCtx.drawImage(image, canvas_width / 2 - image.width / 2, canvas_height / 2 - image.height / 2, image.width, image.height);
|
||||
var destImageWidth = image.width;
|
||||
var destImageHeight = image.height;
|
||||
if (destImageWidth + 40 >= canvas_width) {
|
||||
destImageWidth = image.width * (canvas_width - 40) / image.width;
|
||||
destImageHeight = image.height * (canvas_width - 40) / image.width;
|
||||
}
|
||||
imageCanvasNodeCtx.drawImage(image, 0, 0, image.width - 31, image.height, canvas_width / 2 - destImageWidth / 2, canvas_height / 2 - destImageHeight / 2, destImageWidth, destImageHeight);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
2
assets/webconfig/js/lib/leader-line.min.js
vendored
Normal file
2
assets/webconfig/js/lib/leader-line.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
assets/webconfig/js/lib/plain-draggable.min.js
vendored
Normal file
2
assets/webconfig/js/lib/plain-draggable.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -820,8 +820,8 @@ function showNotification(type, message, title = "", addhtml = "") {
|
||||
// settings
|
||||
type: type,
|
||||
animate: {
|
||||
enter: 'animated fadeInDown',
|
||||
exit: 'animated fadeOutUp'
|
||||
enter: 'animate__animated animate__fadeInDown',
|
||||
exit: 'animate__animated animate__fadeOutUp'
|
||||
},
|
||||
placement: {
|
||||
align: 'center'
|
||||
|
||||
@@ -692,7 +692,7 @@ function startWizardPhilipsHue(e) {
|
||||
if (storedAccess === 'expert') {
|
||||
hidePort = "";
|
||||
}
|
||||
|
||||
|
||||
$('#wh_topcontainer').append('<p class="text-left" style="font-weight:bold">' + $.i18n(hue_desc1) + '</p>' +
|
||||
'<div class="row">' +
|
||||
'<div class="col-md-2">' +
|
||||
@@ -798,7 +798,7 @@ function checkHueBridge(cb, hueUser) {
|
||||
})
|
||||
.fail(function () {
|
||||
cb(false);
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -886,7 +886,7 @@ async function discover_hue_bridges() {
|
||||
// res can be: false (timeout) or res.error (not found)
|
||||
if (res && !res.error) {
|
||||
const r = res.info;
|
||||
|
||||
|
||||
// Process devices returned by discovery
|
||||
if (r.devices.length == 0) {
|
||||
$('#wiz_hue_ipstate').html($.i18n('wiz_hue_failure_ip'));
|
||||
@@ -1536,7 +1536,7 @@ async function discover_yeelight_lights() {
|
||||
function assign_yeelight_lights() {
|
||||
// Model mappings, see https://www.home-assistant.io/integrations/yeelight/
|
||||
var models = ['color', 'color1', 'YLDP02YL', 'YLDP02YL', 'color2', 'YLDP06YL', 'color4', 'YLDP13YL', 'color6', 'YLDP13AYL', 'colorb', "YLDP005", 'colorc', "YLDP004-A", 'stripe', 'YLDD04YL', 'strip1', 'YLDD01YL', 'YLDD02YL', 'strip4', 'YLDD05YL', 'strip6', 'YLDD05YL'];
|
||||
|
||||
|
||||
// If records are left for configuration
|
||||
if (Object.keys(lights).length > 0) {
|
||||
$('#wh_topcontainer').toggle(false);
|
||||
|
||||
Reference in New Issue
Block a user