mirror of
https://github.com/hyperion-project/hyperion.ng.git
synced 2023-10-10 13:36:59 +02:00
2beccb0912
* split content and js tune leds config * implement connection lost page * split js/html in huebridge * add js action for connection lost * extend led config make connection loss nicer * tune led code add menu entry for grabber * more tuning of webui * switch back to botstrap textarea add v4l to components * add icon * extend schema for jsoneditor * implement ledcolors streaming with 4fps * implement component state
126 lines
4.4 KiB
HTML
126 lines
4.4 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 {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="container-fluid">
|
|
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
|
|
<!-- <div class="introd">
|
|
<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
|
|
</div>-->
|
|
|
|
<ul id="leds_cfg_nav" class="nav nav-tabs">
|
|
<li class="active"><a data-toggle="tab" href="#menu_controller">LED Controller</a></li>
|
|
<li><a data-toggle="tab" href="#menu_gencfg">Generate LED Config</a></li>
|
|
<li><a data-toggle="tab" href="#menu_display">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="panel panel-primary">
|
|
<div class="panel-heading form-group" style="font-size:90%;white-space:nowrap;">
|
|
<label for="leddevices">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">
|
|
... device specific options ... we need some cpp code extension to get schema for all leds
|
|
</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 lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button>
|
|
<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button>
|
|
<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_live">toggle live leds</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
|
|
<div class="panel-group" id="accordion">
|
|
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i>Frame Configuration (ambient light)</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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-primary">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i>Matrix Configuration (LED wall)</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>
|
|
</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>Generated Configuration</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<div class="form-group">
|
|
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
|
|
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
|
|
</div>
|
|
<textarea rows="25" id="ledconfig" class="form-control"></textarea>
|
|
</div>
|
|
</div>
|
|
</div> <!-- left pane -->
|
|
|
|
</div> <!-- row layout -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div> <!-- tab content -->
|
|
</div>
|
|
|
|
<script src="/js/content_leds.js"></script>
|
|
|