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
@@ -62,7 +62,7 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12" id="layout_intro"></div>
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="col-lg-6 col-md-12" id="layout_type">
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading headcollapse" id="classic_panel" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
|
||||
@@ -149,9 +149,13 @@
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3" id="advanced_settings">
|
||||
<h4 class="panel-title">
|
||||
<a><span data-i18n="conf_leds_layout_advanced">Advanced settings</span></a>
|
||||
<a>
|
||||
<i class="fa fa-fw fa-cogs"></i>
|
||||
<span data-i18n="conf_leds_layout_advanced">Advanced settings</span>
|
||||
<i class="fa fa-angle-down pull-right" id="advanced_settings_right_icon"></i>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse3" class="panel-collapse collapse">
|
||||
@@ -373,10 +377,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- accordion -->
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="col-lg-6 col-md-12" id="layout_preview">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title"><i class="fa fa-search fa-fw"></i><span data-i18n="conf_leds_layout_peview">LED Layout preview</span></h4>
|
||||
<h4 class="panel-title">
|
||||
<i class="fa fa-search fa-fw"></i>
|
||||
<span data-i18n="conf_leds_layout_peview">LED Layout preview</span>
|
||||
<a href="#" class='fullscreen-btn' role="button" title="Toggle fullscreen">
|
||||
<i class="fa fa-expand fa-fw pull-right"></i>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p id="previewcreator" style="font-weight:bold"></p>
|
||||
@@ -385,13 +395,15 @@
|
||||
<div id="led_vis_help"></div>
|
||||
<div class="col-lg-12 st_helper" style="position:relative; padding-left:0px; padding-right:0px">
|
||||
<canvas id="image_preview" style="position:absolute; z-index:0"></canvas>
|
||||
<div id="keystone_correction_area" style="position: absolute; z-index: 20;"></div>
|
||||
<div id="leds_preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button type="button" class="btn btn-danger" id="leds_prev_toggle_num"><i class="fa fa-info fa-fw"></i><span data-i18n="main_ledsim_btn_togglelednumber">toggle led numbers</span></button>
|
||||
<button type="button" class="btn btn-danger" id="leds_prev_toggle_live_video"><i class="fa fa-fw fa-television"></i><span data-i18n="main_ledsim_btn_togglelivevideo">toggle live video</span></button>
|
||||
<button type="button" class="btn btn-primary" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">toggle led numbers</span></button>
|
||||
<button type="button" class="btn btn-danger" id="leds_prev_toggle_keystone_correction_area" style="display:none;"><i class="mdi mdi-vector-square" style="margin-right:5px;"></i><span data-i18n="conf_leds_layout_btn_keystone">toggle keystone correction</span></button>
|
||||
<button type="button" class="btn btn-primary pull-right" id="leds_prev_checklist"><i class="fa fa-info-circle fa-fw"></i><span data-i18n="conf_leds_layout_btn_checklist">show checklist</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,15 @@
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading"><i class="fa fa-book fa-fw"></i><span data-i18n="conf_logging_logoutput"></span></div>
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<i class="fa fa-book fa-fw"></i>
|
||||
<span data-i18n="conf_logging_logoutput"></span>
|
||||
<a href="#" class='fullscreen-btn' role="button" title="Toggle fullscreen">
|
||||
<i class="fa fa-expand fa-fw pull-right"></i>
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="log_content"><span style="font-weight:bold;font-size:17px" data-i18n="conf_logging_nomessage"></span></div>
|
||||
</div>
|
||||
|
||||
8
assets/webconfig/css/animate.min.css
vendored
Normal file
8
assets/webconfig/css/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -274,6 +274,10 @@ select.form-control {
|
||||
color: #DDDDDD;
|
||||
}
|
||||
|
||||
.keystone_correction_corners {
|
||||
border:1px solid white;
|
||||
}
|
||||
|
||||
.checkbox label::before {
|
||||
border-color: #616161;
|
||||
background-color: #212121;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -62,6 +62,7 @@
|
||||
"conf_leds_layout_blacklist_start_title": "Start-LED",
|
||||
"conf_leds_layout_blacklistleds_title": "Auszuschließende LEDs",
|
||||
"conf_leds_layout_btn_checklist": "Zeige Checkliste",
|
||||
"conf_leds_layout_btn_keystone": "Trapezkorrektur",
|
||||
"conf_leds_layout_button_savelay": "Speichere Layout",
|
||||
"conf_leds_layout_button_updsim": "Aktualisiere Vorschau",
|
||||
"conf_leds_layout_checkp1": "Die schwarze eingefärbte LED ist die erste LED. Das ist der Punkt, an dem die Daten eingespeist werden.",
|
||||
@@ -93,7 +94,7 @@
|
||||
"conf_leds_layout_cl_vleddepth": "Vertikale LED-Tiefe",
|
||||
"conf_leds_layout_frame": "Klassisches Layout (Rahmen)",
|
||||
"conf_leds_layout_generatedconf": "Generierte/Aktuelle LED-Konfiguration",
|
||||
"conf_leds_layout_intro": "Du benötigst ebenfalls ein LED-Layout, welches deine LED-Positionen wiederspiegelt. Das klassische Layout wird für gewöhnlichen für TVs verwendet, Hyperion unterstützt aber auch LED-Wände (Matrix). Die Ansicht des Layouts ist die Perspektive VOR dem Fernseher, nicht dahinter.",
|
||||
"conf_leds_layout_intro": "Du benötigst ebenfalls ein LED-Layout, welches deine LED-Positionen wiederspiegelt. Das klassische Layout wird üblicherweise für TVs verwendet, Hyperion unterstützt aber auch LED-Wände (Matrix). Die Ansicht des Layouts ist die Perspektive VOR dem Fernseher, nicht dahinter.",
|
||||
"conf_leds_layout_ma_cabling": "Verkabelung",
|
||||
"conf_leds_layout_ma_horiz": "Horizontal",
|
||||
"conf_leds_layout_ma_optbottomleft": "Unten links",
|
||||
@@ -1035,4 +1036,4 @@
|
||||
"wiz_yeelight_intro1": "Dieser Assistent hilft dir bei der Konfiguration von Hyperion für Yeelight. Zu den Funktionen zählen ein automatisches Finden der Yeelights, die einzelnen Lampen unterschiedlichen Bereichen im Bild zuzuordnen und weitere Einstellungen von Hyperion automatisch anzupassen. Kurz gesagt: Komplette Einrichtung mit ein paar Klicks.",
|
||||
"wiz_yeelight_title": "Yeelight Einrichtungsassistent",
|
||||
"wiz_yeelight_unsupported": "Nicht unterstützt"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -68,6 +68,7 @@
|
||||
"conf_leds_layout_blacklist_start_title": "Start LED",
|
||||
"conf_leds_layout_blacklistleds_title": "Blacklist LEDs",
|
||||
"conf_leds_layout_btn_checklist": "Show checklist",
|
||||
"conf_leds_layout_btn_keystone": "Keystone correction",
|
||||
"conf_leds_layout_button_savelay": "Save Layout",
|
||||
"conf_leds_layout_button_updsim": "Update Preview",
|
||||
"conf_leds_layout_checkp1": "The black LED is your first LED, the first LED is the point where you input your data signal.",
|
||||
@@ -827,12 +828,12 @@
|
||||
"general_disabled": "disabled",
|
||||
"general_enabled": "enabled",
|
||||
"general_speech_cs": "Czech",
|
||||
"general_speech_da": "Danish",
|
||||
"general_speech_da": "Danish",
|
||||
"general_speech_de": "German",
|
||||
"general_speech_en": "English",
|
||||
"general_speech_es": "Spanish",
|
||||
"general_speech_fr": "French",
|
||||
"general_speech_hu": "Hungarian",
|
||||
"general_speech_hu": "Hungarian",
|
||||
"general_speech_it": "Italian",
|
||||
"general_speech_nb": "Norwegian (Bokmål)",
|
||||
"general_speech_nl": "Dutch",
|
||||
|
||||
@@ -47,6 +47,12 @@
|
||||
<!-- JSONEditor -->
|
||||
<script src="js/lib/jsoneditor.js"></script>
|
||||
|
||||
<!-- PlainDraggable -->
|
||||
<script src="js/lib/plain-draggable.min.js"></script>
|
||||
|
||||
<!-- LeaderLine -->
|
||||
<script src="js/lib/leader-line.min.js"></script>
|
||||
|
||||
<!--Language Support -->
|
||||
<script src="js/lib/jquery.i18n/jquery.i18n.js"></script>
|
||||
<script src="js/lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
|
||||
@@ -71,10 +77,10 @@
|
||||
|
||||
<!-- MetisMenu CSS -->
|
||||
<link href="css/metisMenu.min.css" rel="stylesheet">
|
||||
|
||||
|
||||
<!-- Gijgo CSS -->
|
||||
<link href="css/gijgo/core.min.css" rel="stylesheet">
|
||||
<link href="css/gijgo/dialog.min.css" rel="stylesheet">
|
||||
<link href="css/gijgo/dialog.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link href="css/sb-admin-2.css" rel="stylesheet">
|
||||
@@ -86,6 +92,9 @@
|
||||
<!-- Material Design Icons - https://github.com/Templarian/MaterialDesign-Webfont -->
|
||||
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Animate.css -->
|
||||
<link href="css/animate.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
@@ -329,7 +338,11 @@
|
||||
<div id="ledsim_dialog" style="display:none; z-index:9998">
|
||||
<div data-role="body" style="padding:0px;">
|
||||
<div id="ledsim_text"></div>
|
||||
<div id="leds_canvas"></div>
|
||||
<div id="leds_canvas">
|
||||
<canvas id="image_preview_canv" style="position: absolute; left: 0; top: 0; z-index: 99998;"></canvas>
|
||||
<canvas id="leds_preview_canv" style="position: absolute; left: 0; top: 0; opacity: 0.75; z-index: 99999;"></canvas>
|
||||
<canvas id="grab_preview_canv" style="position: absolute; left: 0; top: 0; z-index: 99999;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div data-role="footer" style="text-align:center">
|
||||
<button type="button" class="btn btn-success" id="leds_toggle"><i class="fa fa-fw fa-lightbulb-o"></i><span data-i18n="main_ledsim_btn_toggleleds">leds</span></button>
|
||||
@@ -360,7 +373,7 @@
|
||||
<script src="js/wizard.js"></script>
|
||||
|
||||
<!--gijgo dialog-->
|
||||
<script src="js/lib/gijgo/core.min.js"></script>
|
||||
<script src="js/lib/gijgo/core.min.js"></script>
|
||||
<script src="js/lib/gijgo/draggable.min.js"></script>
|
||||
<script src="js/lib/gijgo/dialog.min.js"></script>
|
||||
<script src="js/ledsim.js"></script>
|
||||
|
||||
@@ -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