mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2025-03-01 10:33:28 +00:00
88bed79c07
* update schemas * update * killed upstream change * min prio is now 100 * reset watchdog regularly * update * fix * update
369 lines
18 KiB
HTML
369 lines
18 KiB
HTML
<style>
|
|
#leds_canvas {width:800px; height:450px; background-color:#AAAAAA; position:absolute; margin:10px; box-shadow: 10px 10px 5px #BBBBBB;
|
|
background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
|
|
.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
|
|
vertical-align:middle; padding:4px; border-radius:2px;}
|
|
.led_num, .led_prev_num {display:none; position:relative; color:black; background-color: white;
|
|
border-radius:2px; padding:1px; vertical-align:middle; text-align:center; font-size:0.8em;}
|
|
#leds_controls {white-space:nowrap; margin-top:500px;}
|
|
</style>
|
|
|
|
<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Hue Bridge</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<span data-i18n="hue_press_link_modal">Please press link button on the Hue Bridge.</span> <br /><br />
|
|
<center>
|
|
<span id="connectionTime"></span><br />
|
|
<img src="/img/hyperion/ring-alt.svg" />
|
|
<center>
|
|
</div>
|
|
<div class="modal-footer" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="container-fluid">
|
|
<h2 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span data-i18n="main_menu_leds_conf_token">LED Hardware</span></h2>
|
|
<div class="introd">
|
|
<h4 data-i18n="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>
|
|
<hr />
|
|
</div>
|
|
|
|
<ul id="leds_cfg_nav" class="nav nav-tabs">
|
|
<li class="active"><a data-toggle="tab" href="#menu_controller" data-i18n="conf_leds_nav_label_ledcontroller">LED Controller</a></li>
|
|
<li><a data-toggle="tab" href="#menu_gencfg" data-i18n="conf_leds_nav_label_ledlayout">LED Layout</a></li>
|
|
<li><a data-toggle="tab" href="#menu_display" data-i18n="conf_leds_nav_label_ledtesting">LED Testing</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
|
|
<div id="menu_controller" class="tab-pane fade in active" style="padding-top:10px">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading form-group" style="font-size:90%;white-space:nowrap;">
|
|
<label for="leddevices" data-i18n="conf_leds_contr_label_contrtype">Controller type:</label>
|
|
<select id="leddevices" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
|
|
</div>
|
|
|
|
<div class="panel-body">
|
|
<div id="ledDeviceOptions"> <div id='editor_container'></div> </div>
|
|
|
|
<div id="huebridge" class="container-fluid" style="display:none">
|
|
<hr/>
|
|
<button data-toggle="collapse" class="btn btn-success" data-target="#huebridge_content" data-i18n="hue_btn_setup_helper">Hue Bridge Setup Helper</button>
|
|
<div id="huebridge_content" class="collapse">
|
|
<div class="introd" style="margin-top:20px;margin-bottom:20px" data-i18n="hue_help_text">
|
|
With this Setup Helper you can get a new User for your Hue Bridge and you can see your Lights with the IDs for Hyperion Configuration.
|
|
If you already have a working User you will see it below. But you can always create a new one as well.
|
|
<b>Remember:</b> This is only a helper. You have to copy and paste them in your config above.
|
|
</div>
|
|
<div class="col-lg-12">
|
|
<span id="ip_alert" style="display:none; color:red; font-weight: bold;" data-i18n="hue_failure_ip_token">Please check your IP Address.</span>
|
|
<span id="abortConnection" style="display:none; color:red; font-weight: bold;" data-i18n="hue_failure_connection_token">Connection Timeout. Please press the button in time.</span><br />
|
|
<div class="form-group">
|
|
<label for="ip" data-i18n="hue_label_ip">Hue Bridge IP:</label>
|
|
<input type="text" class="form-control" id="ip">
|
|
<label for="user" data-i18n="hue_label_username">Hue Bridge Username:</label>
|
|
<input type="text" class="form-control" id="user" readonly="readonly">
|
|
<div id="hue_lights" class="row"></div>
|
|
<button type="button" class="btn btn-success" id="create_user"> <i class="fa fa-floppy-o"></i><span data-i18n="hue_button_create_user_token"> Create User</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<button id='btn_submit_controller' class="btn btn-success" data-i18n="general_button_savesettings">Save Settings</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
|
|
<div class="container-fluid">
|
|
<div id="leds_canvas"/>
|
|
|
|
<div id="leds_controls">
|
|
<button type="button" class="btn btn-success" id="leds_toggle" data-i18n="conf_leds_test_button_toggleleds">toggle leds</button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_num" data-i18n="conf_leds_test_button_togglelednumber">toggle led numbers</button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_live" data-i18n="conf_leds_test_button_toggleliveleds">toggle live leds</button>
|
|
<button type="button" class="btn btn-danger" id="leds_toggle_live_video" data-i18n="conf_leds_test_button_togglelivevideo">toggle live video</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel-group" id="accordion">
|
|
<div class="panel panel-primary">
|
|
<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 data-i18n="conf_leds_layout_generatedconf">Generated/Actual LED Configuration</span></a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapse4" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<p data-i18n="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 data-i18n="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 type="button" class="btn btn-warning" id="leds_custom_updsim" data-i18n="conf_leds_layout_button_updsim">Update preview</button>
|
|
<button type="button" class="btn btn-success pull-right" id="leds_custom_save" data-i18n="conf_leds_layout_button_savelay">Save layout</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
|
|
<h4 class="panel-title">
|
|
<a><i class="fa fa-television fa-fw"></i><span data-i18n="conf_leds_layout_frame">Classic Layout (LED Frame)</span></a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapse1" class="panel-collapse collapse">
|
|
<div class="panel-body ">
|
|
<table class="table borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledstop" data-i18n="conf_leds_layout_cl_top">Top</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsbottom" data-i18n="conf_leds_layout_cl_bottom">Bottom</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsleft" data-i18n="conf_leds_layout_cl_left">Left</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsright" data-i18n="conf_leds_layout_cl_right">Right</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsglength" data-i18n="conf_leds_layout_cl_gaglength">Gap length</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsgpos" data-i18n="conf_leds_layout_cl_gappos">Gap position</label>
|
|
</td>
|
|
<td class="itd">
|
|
<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_position" data-i18n="conf_leds_layout_cl_inppos">Input position</label>
|
|
</td>
|
|
<td class="itd">
|
|
<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_reverse" data-i18n="conf_leds_layout_cl_reversdir">Reverse direction</label>
|
|
</td>
|
|
<td class="itd">
|
|
<div class="checkbox">
|
|
<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
|
|
<label></label>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
|
|
<h4 class="panel-title">
|
|
<a><span data-i18n="conf_leds_layout_advanced">Advanced settings</span></a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapse3" class="panel-collapse collapse">
|
|
<div class="panel-body ">
|
|
<table class="tableform borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledshdepth" data-i18n="conf_leds_layout_cl_hleddepth">Horizontal LED depth</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_percent">%</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsvdepth" data-i18n="conf_leds_layout_cl_vleddepth">Vertical LED depth</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_percent">%</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledsedgegap" data-i18n="conf_leds_layout_cl_edgegap">Edge Gap</label>
|
|
</td>
|
|
<td class="itd input-group">
|
|
<input class="form-control ledCLconstr" id="ip_cl_ledsedgegap" type="number" value="0" min="0" max="50" step="1"></input>
|
|
<div class="input-group-addon" data-i18n="edt_append_percent">%</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_cl_ledscornergap" data-i18n="conf_leds_layout_cl_cornergap">Corner Gap</label>
|
|
</td>
|
|
<td class="itd input-group">
|
|
<input class="form-control ledCLconstr" id="ip_cl_ledscornergap" type="number" value="0" min="0" max="50" step="1"></input>
|
|
<div class="input-group-addon" data-i18n="edt_append_percent">%</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<button id="btn_cl_generate" class="btn btn-warning" data-i18n="conf_leds_layout_cl_generate">Generate LED configuration</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
|
|
<h4 class="panel-title">
|
|
<a><i class="fa fa-th fa-fw"></i><span data-i18n="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span></a>
|
|
</h4>
|
|
</div>
|
|
<div id="collapse2" class="panel-collapse collapse">
|
|
<div class="panel-body">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_ma_ledshoriz" data-i18n="conf_leds_layout_ma_horiz">Horizontal</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_ma_ledsvert" data-i18n="conf_leds_layout_ma_vert">Vertical</label>
|
|
</td>
|
|
<td class="itd 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" data-i18n="edt_append_leds">LEDs</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_ma_cabling" data-i18n="conf_leds_layout_ma_cabling">Cabling</label>
|
|
</td>
|
|
<td class="itd">
|
|
<select class="form-control ledMAconstr" id="ip_ma_cabling">
|
|
<option value="snake" data-i18n="conf_leds_layout_ma_optsnake">Snake</option>
|
|
<option value="parallel" data-i18n="conf_leds_layout_ma_optparallel">Parallel</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
<!--- <tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_ma_order" data-i18n="conf_leds_layout_ma_order">Order</label>
|
|
</td>
|
|
<td class="itd">
|
|
<select class="form-control ledMAconstr" id="ip_ma_order">
|
|
<option value="horizontal" data-i18n="conf_leds_layout_ma_opthoriz">Horizontal</option>
|
|
<option value="vertical" data-i18n="conf_leds_layout_ma_optvert">Vertical</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
--->
|
|
<tr>
|
|
<td class="ltd">
|
|
<label class="ltdlabel" for="ip_ma_start" data-i18n="conf_leds_layout_ma_position">Input</label>
|
|
</td>
|
|
<td class="itd">
|
|
<select class="form-control ledMAconstr" id="ip_ma_start">
|
|
<option value="top-left" data-i18n="conf_leds_layout_ma_opttopleft">Top left</option>
|
|
<option value="top-right" data-i18n="conf_leds_layout_ma_opttopright">Top right</option>
|
|
<option value="bottom-left" data-i18n="conf_leds_layout_ma_optbottomleft">Bottom left</option>
|
|
<option value="bottom-right" data-i18n="conf_leds_layout_ma_optbottomright">Bottom right</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<button id="btn_ma_generate" class="btn btn-warning" data-i18n="conf_leds_layout_cl_generate">Generate LED configuration</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- accordion -->
|
|
<div class="col-lg-6 col-md-12">
|
|
<div class="panel panel-primary">
|
|
<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>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div id="previewcreator"></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 class="panel-footer">
|
|
<button type="button" class="btn btn-danger" id="leds_prev_toggle_num" data-i18n="conf_leds_test_button_togglelednumber">toggle led numbers</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- row layout -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div> <!-- tab content -->
|
|
</div>
|
|
|
|
<script src="/js/content_leds.js"></script>
|
|
<script src="/js/content_huebridge.js"></script>
|