mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02: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
parent
f721240e58
commit
f27010088d
@ -458,6 +458,44 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
===========
|
||||
Animate.css
|
||||
===========
|
||||
|
||||
Animate.css Copyright 2021 Daniel Eden (“Licensor”)
|
||||
|
||||
Hippocratic License Version Number: 2.1.
|
||||
|
||||
Purpose. The purpose of this License is for the Licensor named above to permit the Licensee (as defined below) broad permission, if consistent with Human Rights Laws and Human Rights Principles (as each is defined below), to use and work with the Software (as defined below) within the full scope of Licensor’s copyright and patent rights, if any, in the Software, while ensuring attribution and protecting the Licensor from liability.
|
||||
|
||||
Permission and Conditions. The Licensor grants permission by this license (“License”), free of charge, to the extent of Licensor’s rights under applicable copyright and patent law, to any person or entity (the “Licensee”) obtaining a copy of this software and associated documentation files (the “Software”), to do everything with the Software that would otherwise infringe (i) the Licensor’s copyright in the Software or (ii) any patent claims to the Software that the Licensor can license or becomes able to license, subject to all of the following terms and conditions:
|
||||
|
||||
* Acceptance. This License is automatically offered to every person and entity subject to its terms and conditions. Licensee accepts this License and agrees to its terms and conditions by taking any action with the Software that, absent this License, would infringe any intellectual property right held by Licensor.
|
||||
|
||||
* Notice. Licensee must ensure that everyone who gets a copy of any part of this Software from Licensee, with or without changes, also receives the License and the above copyright notice (and if included by the Licensor, patent, trademark and attribution notice). Licensee must cause any modified versions of the Software to carry prominent notices stating that Licensee changed the Software. For clarity, although Licensee is free to create modifications of the Software and distribute only the modified portion created by Licensee with additional or different terms, the portion of the Software not modified must be distributed pursuant to this License. If anyone notifies Licensee in writing that Licensee has not complied with this Notice section, Licensee can keep this License by taking all practical steps to comply within 30 days after the notice. If Licensee does not do so, Licensee’s License (and all rights licensed hereunder) shall end immediately.
|
||||
|
||||
* Compliance with Human Rights Principles and Human Rights Laws.
|
||||
|
||||
1. Human Rights Principles.
|
||||
|
||||
(a) Licensee is advised to consult the articles of the United Nations Universal Declaration of Human Rights and the United Nations Global Compact that define recognized principles of international human rights (the “Human Rights Principles”). Licensee shall use the Software in a manner consistent with Human Rights Principles.
|
||||
|
||||
(b) Unless the Licensor and Licensee agree otherwise, any dispute, controversy, or claim arising out of or relating to (i) Section 1(a) regarding Human Rights Principles, including the breach of Section 1(a), termination of this License for breach of the Human Rights Principles, or invalidity of Section 1(a) or (ii) a determination of whether any Law is consistent or in conflict with Human Rights Principles pursuant to Section 2, below, shall be settled by arbitration in accordance with the Hague Rules on Business and Human Rights Arbitration (the “Rules”); provided, however, that Licensee may elect not to participate in such arbitration, in which event this License (and all rights licensed hereunder) shall end immediately. The number of arbitrators shall be one unless the Rules require otherwise.
|
||||
|
||||
Unless both the Licensor and Licensee agree to the contrary: (1) All documents and information concerning the arbitration shall be public and may be disclosed by any party; (2) The repository referred to under Article 43 of the Rules shall make available to the public in a timely manner all documents concerning the arbitration which are communicated to it, including all submissions of the parties, all evidence admitted into the record of the proceedings, all transcripts or other recordings of hearings and all orders, decisions and awards of the arbitral tribunal, subject only to the arbitral tribunal's powers to take such measures as may be necessary to safeguard the integrity of the arbitral process pursuant to Articles 18, 33, 41 and 42 of the Rules; and (3) Article 26(6) of the Rules shall not apply.
|
||||
|
||||
2. Human Rights Laws. The Software shall not be used by any person or entity for any systems, activities, or other uses that violate any Human Rights Laws. “Human Rights Laws” means any applicable laws, regulations, or rules (collectively, “Laws”) that protect human, civil, labor, privacy, political, environmental, security, economic, due process, or similar rights; provided, however, that such Laws are consistent and not in conflict with Human Rights Principles (a dispute over the consistency or a conflict between Laws and Human Rights Principles shall be determined by arbitration as stated above). Where the Human Rights Laws of more than one jurisdiction are applicable or in conflict with respect to the use of the Software, the Human Rights Laws that are most protective of the individuals or groups harmed shall apply.
|
||||
|
||||
3. Indemnity. Licensee shall hold harmless and indemnify Licensor (and any other contributor) against all losses, damages, liabilities, deficiencies, claims, actions, judgments, settlements, interest, awards, penalties, fines, costs, or expenses of whatever kind, including Licensor’s reasonable attorneys’ fees, arising out of or relating to Licensee’s use of the Software in violation of Human Rights Laws or Human Rights Principles.
|
||||
|
||||
* Failure to Comply. Any failure of Licensee to act according to the terms and conditions of this License is both a breach of the License and an infringement of the intellectual property rights of the Licensor (subject to exceptions under Laws, e.g., fair use). In the event of a breach or infringement, the terms and conditions of this License may be enforced by Licensor under the Laws of any jurisdiction to which Licensee is subject. Licensee also agrees that the Licensor may enforce the terms and conditions of this License against Licensee through specific performance (or similar remedy under Laws) to the extent permitted by Laws. For clarity, except in the event of a breach of this License, infringement, or as otherwise stated in this License, Licensor may not terminate this License with Licensee.
|
||||
|
||||
* Enforceability and Interpretation. If any term or provision of this License is determined to be invalid, illegal, or unenforceable by a court of competent jurisdiction, then such invalidity, illegality, or unenforceability shall not affect any other term or provision of this License or invalidate or render unenforceable such term or provision in any other jurisdiction; provided, however, subject to a court modification pursuant to the immediately following sentence, if any term or provision of this License pertaining to Human Rights Laws or Human Rights Principles is deemed invalid, illegal, or unenforceable against Licensee by a court of competent jurisdiction, all rights in the Software granted to Licensee shall be deemed null and void as between Licensor and Licensee. Upon a determination that any term or provision is invalid, illegal, or unenforceable, to the extent permitted by Laws, the court may modify this License to affect the original purpose that the Software be used in compliance with Human Rights Principles and Human Rights Laws as closely as possible. The language in this License shall be interpreted as to its fair meaning and not strictly for or against any party.
|
||||
|
||||
* Disclaimer. TO THE FULL EXTENT ALLOWED BY LAW, THIS SOFTWARE COMES “AS IS,” WITHOUT ANY WARRANTY, EXPRESS OR IMPLIED, AND LICENSOR AND ANY OTHER CONTRIBUTOR SHALL NOT BE LIABLE TO ANYONE FOR ANY DAMAGES OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THIS LICENSE, UNDER ANY KIND OF LEGAL CLAIM.
|
||||
|
||||
This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) and is offered for use by licensors and licensees at their own risk, on an “AS IS” basis, and with no warranties express or implied, to the maximum extent permitted by Laws.
|
||||
|
||||
===========
|
||||
Flatbuffers
|
||||
===========
|
||||
@ -704,9 +742,9 @@ trademarks does not indicate endorsement of the trademark holder by Font
|
||||
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
|
||||
to represent the company, product, or service to which they refer.**
|
||||
|
||||
============
|
||||
=====================
|
||||
Material Design Icons
|
||||
============
|
||||
=====================
|
||||
|
||||
Copyright (c) 2014, Austin Andrews (http://materialdesignicons.com/), with Reserved Font Name Material Design Icons.
|
||||
|
||||
@ -788,6 +826,58 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
==============
|
||||
PlainDraggable
|
||||
==============
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 anseki
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
==========
|
||||
LeaderLine
|
||||
==========
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2021 anseki
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
======
|
||||
HIDAPI
|
||||
======
|
||||
@ -802,9 +892,9 @@ HIDAPI
|
||||
long as the copyright notice in the source files
|
||||
remains intact.
|
||||
|
||||
==============================
|
||||
HyperHDR
|
||||
==============================
|
||||
========
|
||||
HyperHDR
|
||||
========
|
||||
|
||||
MIT License
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
[](https://github.com/hyperion-project/hyperion.ng/releases)
|
||||
[](https://github.com/hyperion-project/hyperion.ng/actions)
|
||||
[](https://lgtm.com/projects/g/hyperion-project/hyperion.ng/alerts/)
|
||||
[](https://lgtm.com/projects/g/hyperion-project/hyperion.ng/context:cpp)
|
||||
[](https://www.hyperion-project.org)
|
||||
[](https://docs.hyperion-project.org)
|
||||
[](https://discord.gg/khkR8Vx3ff)
|
||||
|
||||
@ -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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user