frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2025-03-01 10:33:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Webui: extend led hardware config + connection lost page (#226)

Browse Source 
* 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
This commit is contained in:
redPanther
2016-09-07 20:10:37 +02:00
committed by GitHub
parent 4c6a4a1f93
commit 2beccb0912
35 changed files with 675 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
assets/webconfig/content/leds.html
View File

@@ -5,24 +5,36 @@
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:530px;}
#leds_controls {white-space:nowrap; margin-top:500px;}
</style>
<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">Led Configuration</h1>
<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_display">Display LEDs</a></li>
<li><a data-toggle="tab" href="#menu_gencfg">Generate Config</a></li>
<li><a data-toggle="tab" href="#menu_customcfg">Custom Config</a></li>
<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_display" class="tab-pane fade in active">
<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"/>
@@ -34,24 +46,80 @@
</div>
</div>
<div id="menu_gencfg" class="tab-pane fade">
<h3>coming soon</h3>
<p>led config generator ...</p>
</div>
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
<div id="menu_customcfg" class="tab-pane fade">
<p>
<div class="form-group">
<div style="margin-bottom:5px">
<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="20" id="ledconfig" style="width:90%"></textarea>
</div>
</p>
<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>