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
2016-11-18 18:39:27 +01:00
committed by GitHub
parent c2faf07574
commit c05181666c
25 changed files with 632 additions and 102 deletions

View File

@@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-photo fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_conf_token">Image Processing</span></h1>
<h2 class="page-header"><i class="fa fa-photo fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_conf_token">Image Processing</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_colors_label_intro">Color calibration, smoothing (color transistions) and detection of blackbars.</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></h1>
<h2 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="dashboard_label_intro">The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-spinner fa-fw"></i><span lang="en" data-lang-token="main_menu_effect_conf_token">Effects</span></h1>
<h2 class="page-header"><i class="fa fa-spinner fa-fw"></i><span lang="en" data-lang-token="main_menu_effect_conf_token">Effects</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_effects_label_intro">Setting up a booteffect/color that is visible after Hyperion startup. Configure a background effect/color which is active, when all capture sources are disabled (also temporarily via Kodi Watch)</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-cogs fa-fw"></i><span lang="en" data-lang-token="main_menu_effectsconfigurator_token">Effects Configurator</span></h1>
<h2 class="page-header"><i class="fa fa-cogs fa-fw"></i><span lang="en" data-lang-token="main_menu_effectsconfigurator_token">Effects Configurator</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="effectsconfigurator_label_intro">Create out of the base effects new effects that are tuned to your liking. Depending on Effect there are options like color, speed, direction and more available.</h4>
</div>
@@ -28,6 +28,13 @@
<button class="btn btn-primary pull-right" id='btn_write' lang="en" data-lang-token="effectsconfigurator_button_saveeffect">Save Effect</button>
</div>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<label for="effectsdellist" lang="en" data-lang-token="effectsconfigurator_label_deleffect">Effekt Delete:</label>
<select id="effectsdellist" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
<button class="btn btn-primary pull-right" id='btn_delete' lang="en" data-lang-token="effectsconfigurator_button_deleffect">Delete Effect</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></h1>
<h2 class="page-header"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_grabber_label_intro">Hyperion supports two ways on how to get captured pictures for processing and output. The platform grabber which captures internal at the device you are running Hyperion on (best qualitiy) and the USB Grabber which gathers from a connected device the necessary pictures (more calibration work and configuration).</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h1>
<h2 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_kodi_label_intro">The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div>

View File

@@ -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>

View File

@@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span lang="en" data-lang-token="main_menu_network_conf_token">Network Services</span></h1>
<h2 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span lang="en" data-lang-token="main_menu_network_conf_token">Network Services</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_network_label_intro">All network based settings could you find here.</h4>
</div>

View File

@@ -1,5 +1,5 @@
<div class="container-fluid">
<h1 class="page-header"><i class="fa fa-wifi fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span></h1>
<h2 class="page-header"><i class="fa fa-wifi fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="remote_label_intro">Set an effect/color. You could also select a source manually. The Components control give the opportunity to enable/disable components of Hyprion during runtime. All changes you made here are lost after a restart.</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header"><i class="fa fa-info fa-fw"></i><span lang="en" data-lang-token="support_label_title">Support Hyperion</span></h1>
<h2 class="page-header"><i class="fa fa-info fa-fw"></i><span lang="en" data-lang-token="support_label_title">Support Hyperion</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="support_label_intro">Hyperion is a free non-profit software. A small team is working on it and this is why we need your steady support.</h4>
</div>

View File

@@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="main_menu_update_token">Update</span></h1>
<h2 class="page-header"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="main_menu_update_token">Update</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="update_label_intro">This page gives you an overview of all Hyperion versions available. On top you could update or downgrade your version of Hyperion whenever you want. Sorted from newest to oldest</h4>
</div>