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

Update webui (#301)

Browse Source 
* update

* update

* fix

* implement opt groups

* spaces

[skip ci]

* page wrapper adjust

[skip ci]

* implement optgroups for remote, adjust effect schemas

* lost id

[skip ci]
This commit is contained in:
brindosch
2016-11-30 17:32:12 +01:00
committed by redPanther
parent 81dea1583d
commit 3e5ca4601d
25 changed files with 892 additions and 4736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
assets/webconfig/content/dashboard.html
View File

@@ -1,80 +1,79 @@
<div class="container-fluid" id="content_dashboard">
<div class="row">
<div class="col-lg-12">
<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>
<hr>
<div class="col-md-6 col-xxl-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-info-circle fa-fw"></i>
<span lang="en" data-lang-token="dashboard_infobox_label_title">Information</span>
</div>
<div class="panel-body">
<table class="table borderless">
<tbody>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_currenthyp">Your Hyperion version:</td>
<td id="currentversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_latesthyp">Latest version:</td>
<td id="latestversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_leddevice">LED type:</td>
<td id="dash_leddevice">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_device">Device:</td>
<td id="dash_systeminfo"></td>
</tr>
</tbody>
</table>
<hr>
<span id="versioninforesult"></span>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-3">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-eye fa-fw"></i>
<span lang="en" data-lang-token="dashboard_componentbox_label_title">Components status</span>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th lang="en" data-lang-token="dashboard_componentbox_label_comp">Component</th>
<th lang="en" data-lang-token="dashboard_componentbox_label_status">Status</th>
</tr>
</thead>
<tbody id="tab_components">
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12 col-xxl-5">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-newspaper-o fa-fw"></i>
<span lang="en" data-lang-token="dashboard_newsbox_label_title">Latest blog posts</span>
</div>
<div class="panel-body">
<div class="container-fluid" id="content_dashboard">
<div class="row">
<div class="col-lg-12">
<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>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<hr>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-info-circle fa-fw"></i>
<span lang="en" data-lang-token="dashboard_infobox_label_title">Information</span>
</div>
<div class="panel-body">
<table class="table borderless">
<tbody>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_currenthyp">Your Hyperion version:</td>
<td id="currentversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_latesthyp">Latest version:</td>
<td id="latestversion">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_leddevice">LED type:</td>
<td id="dash_leddevice">unknown</td>
</tr>
<tr>
<td lang="en" data-lang-token="dashboard_infobox_label_device">Device:</td>
<td id="dash_systeminfo"></td>
</tr>
</tbody>
</table>
<hr>
<span id="versioninforesult"></span>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-eye fa-fw"></i>
<span lang="en" data-lang-token="dashboard_componentbox_label_title">Components status</span>
</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th lang="en" data-lang-token="dashboard_componentbox_label_comp">Component</th>
<th lang="en" data-lang-token="dashboard_componentbox_label_status">Status</th>
</tr>
</thead>
<tbody id="tab_components">
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-newspaper-o fa-fw"></i>
<span lang="en" data-lang-token="dashboard_newsbox_label_title">Latest blog posts</span>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
<!-- /.container-fluid -->

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

@@ -3,7 +3,7 @@
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;
.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>
@@ -95,7 +95,7 @@
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
<div class="row">
<div class="col-sm-6">
<div class="col-lg-6 col-md-12">
<div class="panel-group" id="accordion">
@@ -108,59 +108,60 @@
<div id="collapse1" class="panel-collapse collapse in">
<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>
<label class="col-form-label col-md-6" for="ip_cl_ledstop" style="width:170px" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsbottom" style="width:170px" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsleft" style="width:170px" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsright" style="width:170px" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsglength" style="width:170px" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsgpos" style="width:170px" 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>
<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1">
</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>
<label class="col-form-label col-md-6" for="ip_cl_position" style="width:170px" 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>
<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1">
</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">
<label class="col-form-label col-md-6" for="ip_cl_reverse" style="width:190px" lang="en" data-lang-token="conf_leds_layout_cl_reversdir">Reverse direction</label>
<div class="checkbox">
<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
<label></label>
</div>
</div>
<div class="panel-group">
<div class="">
<div class="panel panel-default">
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
<h4 class="panel-title">
@@ -170,23 +171,30 @@
<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>
<label class="col-form-label col-md-6" for="ip_cl_ledshdepth" 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>
<label class="col-form-label col-md-6" for="ip_cl_ledsvdepth" 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 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_edgegap">Edge Gap</label>
<label class="col-form-label col-md-6" for="ip_cl_ledsedgegap" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_edgegap">Edge Gap</label>
<div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsedgegap" type="number" value="0" min="0" max="30" step="1"></input>
<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">%</div>
</div>
</div>
<div class="form-group">
<label class="col-form-label col-md-6" for="ip_cl_ledscornergap" style="width:190px;max-width:200px" lang="en" data-lang-token="conf_leds_layout_cl_cornergap">Corner Gap</label>
<div class=" 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">%</div>
</div>
</div>
@@ -210,21 +218,21 @@
<div id="collapse2" class="panel-collapse collapse">
<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_ma_horiz">Horizontal</label>
<label class="col-form-label col-md-6" for="ip_ma_ledshoriz" 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>
<label class="col-form-label col-md-6" for="ip_ma_ledsvert" 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>
<label class="col-form-label col-md-6" for="ip_ma_cabling" 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-token="conf_leds_layout_ma_optsnake">Snake</option>
@@ -233,7 +241,7 @@
</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>
<label class="col-form-label col-md-6" for="ip_ma_order" 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-token="conf_leds_layout_ma_opthoriz">Horizontal</option>
@@ -243,7 +251,7 @@
</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>
<label class="col-form-label col-md-6" for="ip_ma_start" 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-token="conf_leds_layout_ma_opttopleft">Top left</option>
@@ -279,19 +287,22 @@
</div>
</div> <!-- accordion -->
</div>
<div class="col-sm-6">
<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 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 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 class="panel-footer">
<button lang="en" type="button" class="btn btn-danger" id="leds_prev_toggle_num" lang="en" data-lang-token="conf_leds_test_button_togglelednumber">toggle led numbers</button>
</div>
</div>
</div>
</div> <!-- row layout -->
</div>