frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2025-03-01 10:33:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

WebUI fixes & Draggable LEDs (#1444)

Browse Source 
* 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
2022-04-30 22:20:58 +02:00
committed by GitHub
parent f721240e58
commit f27010088d
17 changed files with 557 additions and 7309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
assets/webconfig/js/content_leds.js
View File

@@ -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);
}