mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
LED Layouts, Delete Effect, Colorpicker for EC (#290)
* upd * ipadte schemas * update html * update * fix matrix index increment [skip ci] * matrix 1 led as minimum [skip ci] * disable zoom [skpi ci]
This commit is contained in:
brindosch
GitHub
@@ -29,7 +29,7 @@
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<h1 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></h1>
|
||||
<h2 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></h2>
|
||||
<div class="introd">
|
||||
<h4 lang="en" data-lang-token="conf_leds_label_intro">The LED controller of youre choice is your way to output the led data via Raspberry PI GPIO, USB or network! Choose one, define your led layout and enjoy the light!</h4>
|
||||
</div>
|
||||
@@ -100,64 +100,192 @@
|
||||
<div class="panel-group" id="accordion">
|
||||
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_frame">Frame Configuration (ambient light)</span></a>
|
||||
<a><i class="fa fa-television fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_frame">Classic Layout (LED Frame)</span></a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse1" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
just a reminder ... this are the needed form elements:
|
||||
<pre>
|
||||
led count horizontal:
|
||||
led count vertical:
|
||||
cabling: zick zack/snake
|
||||
order: horizontal/vertical
|
||||
led 0 position: top-left / top-right / bottom-left / bottom-right
|
||||
</pre>
|
||||
<div class="panel-body ">
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_top">Top</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledstop" type="number" value="10" min="0" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_bottom">Bottom</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsbottom" type="number" value="10" min="0" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_left">Left</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsleft" type="number" value="6" min="0" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_right">Right</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsright" type="number" value="6" min="0" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_gaglength">Gap length</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsglength" type="number" value="0" min="0" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_gappos">Gap position</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_inppos">Input position</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_reversdir">Reverse direction</label>
|
||||
<div class=" input-group">
|
||||
<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-group">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
|
||||
<h4 class="panel-title">
|
||||
<a><span lang="en" data-lang-token="conf_leds_layout_advanced">Advanced settings</span></a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse3" class="panel-collapse collapse">
|
||||
<div class="panel-body ">
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_hleddepth">Horizontal LED depth</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledshdepth" type="number" value="8" min="1" max="100" step="1"></input>
|
||||
<div class="input-group-addon">%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_vleddepth">Vertical LED depth</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledCLconstr" id="ip_cl_ledsvdepth" type="number" value="5" min="1" max="100" step="1"></input>
|
||||
<div class="input-group-addon">%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button id="btn_cl_generate" class="btn btn-warning" lang="en" data-lang-token="conf_leds_layout_cl_generate">Generate LED configuration</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span></a>
|
||||
<a><i class="fa fa-th fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span></a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse2" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
just a reminder ... this are the needed form elements:
|
||||
<pre>
|
||||
led count links
|
||||
led count rechts
|
||||
led count oben
|
||||
led count unten rechts
|
||||
led count unten links
|
||||
start
|
||||
</pre>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_horiz">Horizontal</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledMAconstr" id="ip_ma_ledshoriz" type="number" value="10" min="1" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_vert">Vertical</label>
|
||||
<div class=" input-group">
|
||||
<input class="form-control ledMAconstr" id="ip_ma_ledsvert" type="number" value="10" min="1" step="1"></input>
|
||||
<div class="input-group-addon">LEDs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_cabling">Cabling</label>
|
||||
<div class=" input-group">
|
||||
<select class="form-control ledMAconstr" id="ip_ma_cabling">
|
||||
<option value="snake" lang="en" data-lang-attribute="conf_leds_layout_ma_optsnake">Snake</option>
|
||||
<option value="parallel" lang="en" data-lang-attribute="conf_leds_layout_ma_optparallel">Parallel</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<!--- <div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_order">Order</label>
|
||||
<div class=" input-group">
|
||||
<select class="form-control ledMAconstr" id="ip_ma_order">
|
||||
<option value="horizontal" lang="en" data-lang-attribute="conf_leds_layout_ma_opthoriz">Horizontal</option>
|
||||
<option value="vertical" lang="en" data-lang-attribute="conf_leds_layout_ma_optvert">Vertical</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
--->
|
||||
<div class="form-group">
|
||||
<label class="col-form-label col-md-6" style="width:170px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_ma_position">Input</label>
|
||||
<div class=" input-group">
|
||||
<select class="form-control ledMAconstr" id="ip_ma_start">
|
||||
<option value="top-left" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopleft">Top left</option>
|
||||
<option value="top-right" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopright">Top right</option>
|
||||
<option value="bottom-left" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomleft">Bottom left</option>
|
||||
<option value="bottom-right" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomright">Bottom right</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button id="btn_ma_generate" class="btn btn-warning" lang="en" data-lang-token="conf_leds_layout_cl_generate">Generate LED configuration</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-primary" style="margin-bottom:5px">
|
||||
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse4">
|
||||
<h4 class="panel-title">
|
||||
<a><i class="fa fa-wrench fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_generatedconf">Generated/Actual LED Configuration</span></a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapse4" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
<p lang="en" data-lang-token="conf_leds_layout_textf1">This textfield shows by default your current loaded layout and will be overwritten if you generate a new one above. Optional you could perform further edits.</p>
|
||||
<b><p lang="en" data-lang-token="conf_leds_layout_textf2">Don't forget to save!</p></b>
|
||||
<textarea rows="25" id="ledconfig" class="form-control"></textarea>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button lang="en" type="button" class="btn btn-warning" id="leds_custom_updsim" lang="en" data-lang-token="conf_leds_layout_button_updsim">Update preview</button>
|
||||
<button lang="en" type="button" class="btn btn-success pull-right" id="leds_custom_save" lang="en" data-lang-token="conf_leds_layout_button_savelay">Save layout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- accordion -->
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel panel-primary" style="margin-bottom:5px">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title"><i class="fa fa-wrench fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_generatedconf">Generated Configuration</span></h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="form-group">
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check" lang="en" data-lang-token="conf_leds_layout_button_validateconf">Validate config</button>
|
||||
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save" lang="en" data-lang-token="general_button_savesettings">Save config</button>
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title"><i class="fa fa-search fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_peview">LED Layout preview</span></h4>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="previewcreator"><span lang="en" data-lang-token="conf_leds_layout_preview_empty">No preview requested</span></div>
|
||||
<div id="previewledcount"></div>
|
||||
<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
|
||||
<div id="leds_preview"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<textarea rows="25" id="ledconfig" class="form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- left pane -->
|
||||
|
||||
</div>
|
||||
</div> <!-- row layout -->
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user