frodovdr/hyperion.ng
1
0
Fork 0
mirror of https://github.com/hyperion-project/hyperion.ng.git synced 2023-10-10 13:36:59 +02:00
Code Issues 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
Show Stats 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>
<div class="row"> </div>
<div class="col-lg-12"> </div>
<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"> </div>
<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> <!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div> </div>
<hr> <!-- /.container-fluid -->
<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 -->

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; } 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; .led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
vertical-align:middle; padding:4px; border-radius:2px;} 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;} border-radius:2px; padding:1px; vertical-align:middle; text-align:center; font-size:0.8em;}
#leds_controls {white-space:nowrap; margin-top:500px;} #leds_controls {white-space:nowrap; margin-top:500px;}
</style> </style>
@ -95,7 +95,7 @@
<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px"> <div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-lg-6 col-md-12">
<div class="panel-group" id="accordion"> <div class="panel-group" id="accordion">
@ -108,59 +108,60 @@
<div id="collapse1" class="panel-collapse collapse in"> <div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body "> <div class="panel-body ">
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledstop" type="number" value="10" min="0" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsbottom" type="number" value="10" min="0" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsleft" type="number" value="6" min="0" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsright" type="number" value="6" min="0" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsglength" type="number" value="0" min="0" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <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> </div>
<div class="form-group"> <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"> <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> </div>
<div class="form-group"> <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> <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=" input-group"> <div class="checkbox">
<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input> <input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
<label></label>
</div> </div>
</div> </div>
<div class="panel-group"> <div class="">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3"> <div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
<h4 class="panel-title"> <h4 class="panel-title">
@ -170,23 +171,30 @@
<div id="collapse3" class="panel-collapse collapse"> <div id="collapse3" class="panel-collapse collapse">
<div class="panel-body "> <div class="panel-body ">
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledshdepth" type="number" value="8" min="1" max="100" step="1"></input> <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 class="input-group-addon">%</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsvdepth" type="number" value="5" min="1" max="100" step="1"></input> <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 class="input-group-addon">%</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <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 class="input-group-addon">%</div>
</div> </div>
</div> </div>
@ -210,21 +218,21 @@
<div id="collapse2" class="panel-collapse collapse"> <div id="collapse2" class="panel-collapse collapse">
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledMAconstr" id="ip_ma_ledshoriz" type="number" value="10" min="1" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<input class="form-control ledMAconstr" id="ip_ma_ledsvert" type="number" value="10" min="1" step="1"></input> <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 class="input-group-addon">LEDs</div>
</div> </div>
</div> </div>
<div class="form-group"> <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"> <div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_cabling"> <select class="form-control ledMAconstr" id="ip_ma_cabling">
<option value="snake" lang="en" data-lang-token="conf_leds_layout_ma_optsnake">Snake</option> <option value="snake" lang="en" data-lang-token="conf_leds_layout_ma_optsnake">Snake</option>
@ -233,7 +241,7 @@
</div> </div>
</div> </div>
<!--- <div class="form-group"> <!--- <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"> <div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_order"> <select class="form-control ledMAconstr" id="ip_ma_order">
<option value="horizontal" lang="en" data-lang-token="conf_leds_layout_ma_opthoriz">Horizontal</option> <option value="horizontal" lang="en" data-lang-token="conf_leds_layout_ma_opthoriz">Horizontal</option>
@ -243,7 +251,7 @@
</div> </div>
---> --->
<div class="form-group"> <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"> <div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_start"> <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> <option value="top-left" lang="en" data-lang-token="conf_leds_layout_ma_opttopleft">Top left</option>
@ -279,19 +287,22 @@
</div> </div>
</div> <!-- accordion --> </div> <!-- accordion -->
</div> </div>
<div class="col-sm-6"> <div class="col-lg-6 col-md-12">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading"> <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> <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>
<div class="panel-body"> <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="previewcreator"><span lang="en" data-lang-token="conf_leds_layout_preview_empty">No preview requested</span></div>
<div id="previewledcount"></div> <div id="previewledcount"></div>
<div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px"> <div class="col-lg-12 st_helper" style="padding-left:0px; padding-right:0px">
<div id="leds_preview"></div> <div id="leds_preview"></div>
</div>
</div>
</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>
</div> <!-- row layout --> </div> <!-- row layout -->
</div> </div>

22
assets/webconfig/css/bootstrap-switch.min.css vendored
View File

File diff suppressed because one or more lines are too long

487
assets/webconfig/css/hyperion.css
View File

@ -5,8 +5,167 @@
url("../fonts/Roboto-Regular.ttf") format('ttf'); url("../fonts/Roboto-Regular.ttf") format('ttf');
} }
body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;} body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15px;}
/*remove padding on all col elements for mobile view*/
@media (max-width: 767px){div[class*="col-"] {padding:0;}} /**add a dditional width defintion for bootstrap**/
@media (min-width: 1500px) {
.col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12 {
float: left;
}
.col-xxl-12 {
width: 100%;
}
.col-xxl-11 {
width: 91.66666667%;
}
.col-xxl-10 {
width: 83.33333333%;
}
.col-xxl-9 {
width: 75%;
}
.col-xxl-8 {
width: 66.66666667%;
}
.col-xxl-7 {
width: 58.33333333%;
}
.col-xxl-6 {
width: 50%;
}
.col-xxl-5 {
width: 41.66666667%;
}
.col-xxl-4 {
width: 33.33333333%;
}
.col-xxl-3 {
width: 25%;
}
.col-xxl-2 {
width: 16.66666667%;
}
.col-xxl-1 {
width: 8.33333333%;
}
.col-xxl-pull-12 {
right: 100%;
}
.col-xxl-pull-11 {
right: 91.66666667%;
}
.col-xxl-pull-10 {
right: 83.33333333%;
}
.col-xxl-pull-9 {
right: 75%;
}
.col-xxl-pull-8 {
right: 66.66666667%;
}
.col-xxl-pull-7 {
right: 58.33333333%;
}
.col-xxl-pull-6 {
right: 50%;
}
.col-xxl-pull-5 {
right: 41.66666667%;
}
.col-xxl-pull-4 {
right: 33.33333333%;
}
.col-xxl-pull-3 {
right: 25%;
}
.col-xxl-pull-2 {
right: 16.66666667%;
}
.col-xxl-pull-1 {
right: 8.33333333%;
}
.col-xxl-pull-0 {
right: auto;
}
.col-xxl-push-12 {
left: 100%;
}
.col-xxl-push-11 {
left: 91.66666667%;
}
.col-xxl-push-10 {
left: 83.33333333%;
}
.col-xxl-push-9 {
left: 75%;
}
.col-xxl-push-8 {
left: 66.66666667%;
}
.col-xxl-push-7 {
left: 58.33333333%;
}
.col-xxl-push-6 {
left: 50%;
}
.col-xxl-push-5 {
left: 41.66666667%;
}
.col-xxl-push-4 {
left: 33.33333333%;
}
.col-xxl-push-3 {
left: 25%;
}
.col-xxl-push-2 {
left: 16.66666667%;
}
.col-xxl-push-1 {
left: 8.33333333%;
}
.col-xxl-push-0 {
left: auto;
}
.col-xxl-offset-12 {
margin-left: 100%;
}
.col-xxl-offset-11 {
margin-left: 91.66666667%;
}
.col-xxl-offset-10 {
margin-left: 83.33333333%;
}
.col-xxl-offset-9 {
margin-left: 75%;
}
.col-xxl-offset-8 {
margin-left: 66.66666667%;
}
.col-xxl-offset-7 {
margin-left: 58.33333333%;
}
.col-xxl-offset-6 {
margin-left: 50%;
}
.col-xxl-offset-5 {
margin-left: 41.66666667%;
}
.col-xxl-offset-4 {
margin-left: 33.33333333%;
}
.col-xxl-offset-3 {
margin-left: 25%;
}
.col-xxl-offset-2 {
margin-left: 16.66666667%;
}
.col-xxl-offset-1 {
margin-left: 8.33333333%;
}
.col-xxl-offset-0 {
margin-left: 0;
}
}
/*icon spacing*/ /*icon spacing*/
.fa-fw{margin-right:5px;} .fa-fw{margin-right:5px;}
/*borderless table*/ /*borderless table*/
@ -97,4 +256,328 @@ table.borderless td,table.borderless th{border: none !important;}
#page-content { #page-content {
padding-bottom:50px; padding-bottom:50px;
}
.checkbox {
padding-left: 20px;
padding-top:2px !important;
}
.checkbox label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
.checkbox label::after {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 18px;
color: #555555;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
opacity: 0;
z-index: 1;
width:25px !important;
height:25px;
margin-top:0px !important;
cursor:pointer;
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
font-family: "FontAwesome";
content: "\f00c";
}
.checkbox input[type="checkbox"]:indeterminate + label::after,
.checkbox input[type="radio"]:indeterminate + label::after {
display: block;
content: "";
width: 10px;
height: 3px;
background-color: #555555;
border-radius: 2px;
margin-left: -16.5px;
margin-top: 7px;
}
.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
opacity: 0.65;
}
.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed;
}
.checkbox.checkbox-circle label::before {
border-radius: 50%;
}
.checkbox.checkbox-inline {
margin-top: 0;
}
.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
color: #fff;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::before,
.checkbox-primary input[type="radio"]:indeterminate + label::before {
background-color: #337ab7;
border-color: #337ab7;
}
.checkbox-primary input[type="checkbox"]:indeterminate + label::after,
.checkbox-primary input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::before,
.checkbox-danger input[type="radio"]:indeterminate + label::before {
background-color: #d9534f;
border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:indeterminate + label::after,
.checkbox-danger input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::before,
.checkbox-info input[type="radio"]:indeterminate + label::before {
background-color: #5bc0de;
border-color: #5bc0de;
}
.checkbox-info input[type="checkbox"]:indeterminate + label::after,
.checkbox-info input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::before,
.checkbox-warning input[type="radio"]:indeterminate + label::before {
background-color: #f0ad4e;
border-color: #f0ad4e;
}
.checkbox-warning input[type="checkbox"]:indeterminate + label::after,
.checkbox-warning input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::before,
.checkbox-success input[type="radio"]:indeterminate + label::before {
background-color: #5cb85c;
border-color: #5cb85c;
}
.checkbox-success input[type="checkbox"]:indeterminate + label::after,
.checkbox-success input[type="radio"]:indeterminate + label::after {
background-color: #fff;
}
.radio {
padding-left: 20px;
}
.radio label {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
.radio label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out;
transition: border 0.15s ease-in-out;
}
.radio label::after {
display: inline-block;
position: absolute;
content: " ";
width: 11px;
height: 11px;
left: 3px;
top: 3px;
margin-left: -20px;
border-radius: 50%;
background-color: #555555;
-webkit-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
transform: scale(0, 0);
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.radio input[type="radio"] {
opacity: 0;
z-index: 1;
}
.radio input[type="radio"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.radio input[type="radio"]:checked + label::after {
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.radio input[type="radio"]:disabled + label {
opacity: 0.65;
}
.radio input[type="radio"]:disabled + label::before {
cursor: not-allowed;
}
.radio.radio-inline {
margin-top: 0;
}
.radio-primary input[type="radio"] + label::after {
background-color: #337ab7;
}
.radio-primary input[type="radio"]:checked + label::before {
border-color: #337ab7;
}
.radio-primary input[type="radio"]:checked + label::after {
background-color: #337ab7;
}
.radio-danger input[type="radio"] + label::after {
background-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::before {
border-color: #d9534f;
}
.radio-danger input[type="radio"]:checked + label::after {
background-color: #d9534f;
}
.radio-info input[type="radio"] + label::after {
background-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::before {
border-color: #5bc0de;
}
.radio-info input[type="radio"]:checked + label::after {
background-color: #5bc0de;
}
.radio-warning input[type="radio"] + label::after {
background-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::before {
border-color: #f0ad4e;
}
.radio-warning input[type="radio"]:checked + label::after {
background-color: #f0ad4e;
}
.radio-success input[type="radio"] + label::after {
background-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::before {
border-color: #5cb85c;
}
.radio-success input[type="radio"]:checked + label::after {
background-color: #5cb85c;
}
input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
font-family: 'FontAwesome';
content: "\f00c";
}
input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
color: #fff;
}
input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
color: #fff;
} }

4
assets/webconfig/css/sb-admin-2.css
View File

@ -13,7 +13,7 @@ body {
} }
#page-wrapper { #page-wrapper {
padding: 0 15px; padding: 0 0px;
min-height: 568px; min-height: 568px;
background-color: #fff; background-color: #fff;
} }
@ -22,7 +22,7 @@ body {
#page-wrapper { #page-wrapper {
position: inherit; position: inherit;
margin: 0 0 0 250px; margin: 0 0 0 250px;
padding: 0 30px; padding: 0 10px;
border-left: 1px solid #e7e7e7; border-left: 1px solid #e7e7e7;
} }
} }

6
assets/webconfig/index.html
View File

@ -25,11 +25,7 @@
<script src="js/lib/bootstrap-colorpicker.min.js"></script> <script src="js/lib/bootstrap-colorpicker.min.js"></script>
<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet"> <link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
<!-- Bootstrap Switch --> <!-- JSONEditor -->
<script src="js/lib/bootstrap-switch.min.js"></script>
<link href="css/bootstrap-switch.min.css" rel="stylesheet">
<!-- JSONForm -->
<script src="js/lib/jsoneditor.js"></script> <script src="js/lib/jsoneditor.js"></script>
<!--Language Support --> <!--Language Support -->

47
assets/webconfig/js/content_effectsconfigurator.js
View File

@ -1,25 +1,28 @@
JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({ JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
getValue: function() { getValue: function() {
color = $(this.input).data('colorpicker').color.toRGB(); var color = $(this.input).data('colorpicker').color.toRGB();
return [color.r, color.g, color.b]; return [color.r, color.g, color.b];
}, },
setValue: function(val) { setValue: function(val) {
function rgb2hex(rgb){ function rgb2hex(rgb)
return "#" + {
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) + return "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2); ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
} ("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
}
$(this.input).colorpicker('setValue', rgb2hex(val)); $(this.input).colorpicker('updateInput', 'rgb('+val+')');
}, $(this.input).colorpicker('updateData', val);
$(this.input).colorpicker('updatePicker', rgb2hex(val));
},
build: function() { build: function() {
this._super(); this._super();
var myinput = this var myinput = this;
$(this.input).colorpicker({ $(myinput.input).colorpicker({
format: 'rgb', format: 'rgb',
customClass: 'colorpicker-2x', customClass: 'colorpicker-2x',
sliders: { sliders: {
@ -31,12 +34,12 @@
maxTop: 200 maxTop: 200
}, },
}, },
}) })
//$(this.input).colorpicker().on('changeColor', function(e) {
//$(this.input).trigger("change"); $(this.input).colorpicker().on('changeColor', function(e) {
//}); $(myinput).val(e.color.toRGB()).change();
});
} }
}); });

4
assets/webconfig/js/content_index.js
View File

@ -17,10 +17,6 @@ $(document).ready( function() {
bindNavToContent("#load_effectsconfig","effects_configurator",false); bindNavToContent("#load_effectsconfig","effects_configurator",false);
bindNavToContent("#load_logging","logging",false); bindNavToContent("#load_logging","logging",false);
//Change all Checkboxes to Switches
$("[type='checkbox']").bootstrapSwitch();
$(hyperion).on("cmd-serverinfo",function(event){ $(hyperion).on("cmd-serverinfo",function(event){
parsedServerInfoJSON = event.response; parsedServerInfoJSON = event.response;
currentVersion = parsedServerInfoJSON.info.hyperion[0].version; currentVersion = parsedServerInfoJSON.info.hyperion[0].version;

143
assets/webconfig/js/content_leds.js
View File

@ -27,6 +27,13 @@ function validateText(){
return true return true
} }
function round(number) {
var factor = Math.pow(10, 4);
var tempNumber = number * factor;
var roundedTempNumber = Math.round(tempNumber);
return roundedTempNumber / factor;
};
function createLedPreview(leds, origin){ function createLedPreview(leds, origin){
if (origin == "classic"){ if (origin == "classic"){
@ -59,12 +66,15 @@ function createLedPreview(leds, origin){
"top:"+(led.vscan.minimum * canvas_height)+"px;"+ "top:"+(led.vscan.minimum * canvas_height)+"px;"+
"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+ "width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;"; "height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_num">'+idx+'</span></div>'; leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_prev_num">'+idx+'</span></div>';
} }
$('#leds_preview').html(leds_html); $('#leds_preview').html(leds_html);
$('#ledc_0').css({"background-color":"black","z-index":"10"}); $('#ledc_0').css({"background-color":"black","z-index":"12"});
$('#ledc_1').css({"background-color":"grey","z-index":"10"}); $('#ledc_1').css({"background-color":"grey","z-index":"11"});
$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"}); $('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
if($('#leds_prev_toggle_num').hasClass('btn-success'))
$('.led_prev_num').css("display", "inline");
} }
function createClassicLeds(){ function createClassicLeds(){
@ -82,13 +92,19 @@ function createClassicLeds(){
var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val()); var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val()); var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val()); var rawedgeGap = parseInt($("#ip_cl_ledsedgegap").val());
var rawcornerGap = parseInt($("#ip_cl_ledscornergap").val());
//helper //helper
var ledsVDepth = rawledsVDepth / 100; var ledsVDepth = rawledsVDepth /100;
var ledsHDepth = rawledsHDepth / 100; var ledsHDepth = rawledsHDepth /100;
var edgeGap = rawedgeGap / 100 /2; var edgeVGap = rawedgeGap /100/2;
var min = 0.0 + edgeGap; var edgeHGap = edgeVGap/(16/9);
var max = 1.0 - edgeGap; var cornerVGap = rawcornerGap /100/2;
var cornerHGap = cornerVGap/(16/9);
var Vmin = 0.0 + edgeVGap;
var Vmax = 1.0 - edgeVGap;
var Hmin = 0.0 + edgeHGap;
var Hmax = 1.0 - edgeHGap;
var ledArray = []; var ledArray = [];
createLeftLeds(createBottomLeds(createRightLeds(createTopLeds()))); createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
@ -143,15 +159,23 @@ function createClassicLeds(){
} }
function createLedArray(hmin, hmax, vmin, vmax){ function createLedArray(hmin, hmax, vmin, vmax){
hmin = round(hmin);
hmax = round(hmax);
vmin = round(vmin);
vmax = round(vmax);
ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} ); ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
} }
function createTopLeds(){ function createTopLeds(){
step=(max-min)/ledsTop; step=(Hmax-Hmin)/ledsTop;
vmin=min hmin=Hmin
if(cornerVGap != '0'){
step=(Hmax-Hmin-(cornerHGap*2))/ledsTop;
hmin=Hmin+(cornerHGap);
}
vmin=Vmin
vmax=vmin+ledsHDepth; vmax=vmin+ledsHDepth;
hmin=min hmax=hmin+step
hmax=min+step
for (var i = 0; i<ledsTop; i++){ for (var i = 0; i<ledsTop; i++){
createLedArray(hmin, hmax, vmin, vmax); createLedArray(hmin, hmax, vmin, vmax);
hmin += step hmin += step
@ -160,11 +184,15 @@ function createClassicLeds(){
} }
function createLeftLeds(){ function createLeftLeds(){
step=(max-min)/ledsLeft; step=(Vmax-Vmin)/ledsLeft;
hmin=min; vmax=Vmax
hmax=min+ledsVDepth; if(cornerVGap != '0'){
vmin=max-step step=(Vmax-Vmin-(cornerVGap*2))/ledsLeft;
vmax=max vmax=Vmax-(cornerVGap);
}
hmin=Hmin;
hmax=hmin+ledsVDepth;
vmin=vmax-step
for (var i = ledsLeft; i>0; i--){ for (var i = ledsLeft; i>0; i--){
createLedArray(hmin, hmax, vmin, vmax); createLedArray(hmin, hmax, vmin, vmax);
vmin -= step vmin -= step
@ -173,11 +201,15 @@ function createClassicLeds(){
} }
function createRightLeds(){ function createRightLeds(){
step=(max-min)/ledsRight; step=(Vmax-Vmin)/ledsRight;
hmax=max; vmin=Vmin
if(cornerVGap != '0'){
step=(Vmax-Vmin-(cornerVGap*2))/ledsRight;
vmin=Vmin+(cornerVGap);
}
hmax=Hmax;
hmin=hmax-ledsVDepth; hmin=hmax-ledsVDepth;
vmin=min vmax=vmin+step
vmax=min+step
for (var i = 0; i<ledsRight; i++){ for (var i = 0; i<ledsRight; i++){
createLedArray(hmin, hmax, vmin, vmax); createLedArray(hmin, hmax, vmin, vmax);
vmin += step vmin += step
@ -186,15 +218,19 @@ function createClassicLeds(){
} }
function createBottomLeds(){ function createBottomLeds(){
step=(max-min)/ledsBottom; step=(Hmax-Hmin)/ledsBottom;
vmax=max; hmax=Hmax
if(cornerVGap != '0'){
step=(Hmax-Hmin-(cornerHGap*2))/ledsBottom;
hmax=Hmax-(cornerHGap);
}
vmax=Vmax;
vmin=vmax-ledsHDepth; vmin=vmax-ledsHDepth;
hmin=max-step hmin=hmax-step
hmax=max
for (var i = ledsBottom; i>0; i--){ for (var i = ledsBottom; i>0; i--){
createLedArray(hmin, hmax, vmin, vmax); createLedArray(hmin, hmax, vmin, vmax);
hmin -= step hmin -= step;
hmax -= step hmax -= step;
} }
} }
} }
@ -232,6 +268,11 @@ function createMatrixLeds(){
var vscanMin = y * vblock var vscanMin = y * vblock
var vscanMax = (y + 1) * vblock var vscanMax = (y + 1) * vblock
hscanMin = round(hscanMin);
hscanMax = round(hscanMax);
vscanMin = round(vscanMin);
vscanMax = round(vscanMax);
leds.push({ leds.push({
index: index, index: index,
hscan: { hscan: {
@ -239,8 +280,8 @@ function createMatrixLeds(){
maximum: hscanMax maximum: hscanMax
}, },
vscan: { vscan: {
minimum: vscanMin, minimum: vscanMin,
maximum: vscanMax maximum: vscanMax
} }
}) })
} }
@ -329,13 +370,42 @@ $(document).ready(function() {
$(hyperion).one("cmd-serverinfo",function(event){ $(hyperion).one("cmd-serverinfo",function(event){
server = event.response; server = event.response;
ledDevices = server.info.ledDevices.available ledDevices = server.info.ledDevices.available
devRPiSPI = ['apa102', 'ws2801', 'lpd6803', 'lpd8806', 'p9813', 'sk6812spi', 'ws2812spi'];
ledDevicesHtml = ""; devRPiPWM = ['ws281x'];
devRPiGPIO = ['piblaster'];
devNET = ['atmoorb', 'dmx', 'fadecandy', 'philipshue', 'tinkerforge', 'tpm2net', 'udpe131', 'udph801', 'udpraw'];
devUSB = ['adalight', 'adalightapa102', 'atmo', 'hyperionusbasp', 'lightpack', 'multilightpack', 'paintpack', 'rawhid', 'sedu', 'tpm2'];
var optArr = [[]];
optArr[1]=[];
optArr[2]=[];
optArr[3]=[];
optArr[4]=[];
optArr[5]=[];
for (idx=0; idx<ledDevices.length; idx++) for (idx=0; idx<ledDevices.length; idx++)
{ {
ledDevicesHtml += '<option value="'+ledDevices[idx]+'">'+ledDevices[idx]+'</option>'; if($.inArray(ledDevices[idx], devRPiSPI) != -1)
optArr[0].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devRPiPWM) != -1)
optArr[1].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devRPiGPIO) != -1)
optArr[2].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devNET) != -1)
optArr[3].push(ledDevices[idx]);
else if($.inArray(ledDevices[idx], devUSB) != -1)
optArr[4].push(ledDevices[idx]);
else
optArr[5].push(ledDevices[idx]);
} }
$("#leddevices").html(ledDevicesHtml);
$("#leddevices").append(createSel(optArr[0], "RPi SPI"));
$("#leddevices").append(createSel(optArr[1], "RPi PWM"));
$("#leddevices").append(createSel(optArr[2], "RPi GPIO"));
$("#leddevices").append(createSel(optArr[3], "Network"));
$("#leddevices").append(createSel(optArr[4], "USB"));
$("#leddevices").append(createSel(optArr[5], "Debug"));
$("#leddevices").val(server.info.ledDevices.active); $("#leddevices").val(server.info.ledDevices.active);
$("#leddevices").trigger("change"); $("#leddevices").trigger("change");
}); });
@ -409,6 +479,11 @@ $(document).ready(function() {
requestWriteConfig(JSON.parse(createLedConfig())); requestWriteConfig(JSON.parse(createLedConfig()));
}); });
// ------------------------------------------------------------------
$('#leds_prev_toggle_num').off().on("click", function() {
$('.led_prev_num').toggle();
toggleClass('#leds_prev_toggle_num', "btn-danger", "btn-success");
});
// ------------------------------------------------------------- // -------------------------------------------------------------
$('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) { $('#leds_cfg_nav a[data-toggle="tab"]').off().on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab var target = $(e.target).attr("href") // activated tab
@ -492,8 +567,6 @@ $(document).ready(function() {
requestWriteConfig(result) requestWriteConfig(result)
}); });
// ------------------------------------------------------------------
requestServerConfig(); requestServerConfig();
}); });

17
assets/webconfig/js/content_remote.js
View File

@ -69,12 +69,21 @@
var newEffects = event.response.info.effects; var newEffects = event.response.info.effects;
if (newEffects.length != oldEffects.length) if (newEffects.length != oldEffects.length)
{ {
effects_html = '<option value="__none__"></option>'; $('#effect_select').html('<option value="__none__"></option>');
var usrEffArr = [];
var sysEffArr = [];
for(i = 0; i < newEffects.length; i++) { for(i = 0; i < newEffects.length; i++) {
effectName = newEffects[i].name; var effectName = newEffects[i].name;
effects_html += '<option value="'+effectName+'">'+effectName+'</option>'; if(!/^\:/.test(newEffects[i].file)){
usrEffArr.push(effectName);
}
else{
sysEffArr.push(effectName);
}
} }
$('#effect_select').html(effects_html); $('#effect_select').append(createSel(usrEffArr, "User Effects"));
$('#effect_select').append(createSel(sysEffArr, "Provided Effects"));
oldEffects = newEffects; oldEffects = newEffects;
} }
} }

22
assets/webconfig/js/lib/bootstrap-switch.min.js vendored
View File

File diff suppressed because one or more lines are too long

BIN
assets/webconfig/js/lib/jquery-ui-1.12.1.zip
View File

Binary file not shown.

923
assets/webconfig/js/lib/jsoneditor.js
View File

File diff suppressed because it is too large Load Diff

3591
assets/webconfig/js/lib/jsonform.js
View File

File diff suppressed because it is too large Load Diff

2
assets/webconfig/js/lib/sb-admin-2.js
View File

@ -22,7 +22,7 @@ $(function() {
height = height - topOffset; height = height - topOffset;
if (height < 1) height = 1; if (height < 1) height = 1;
if (height > topOffset) { if (height > topOffset) {
$("#page-wrapper").css("min-height", (height) + "px"); $("#page-wrapper").css("min-height", (height-10) + "px");
} }
}); });

24
assets/webconfig/js/ui_utils.js
View File

@ -119,3 +119,27 @@ function createJsonEditor(container,schema,setconfig)
return editor; return editor;
} }
function createSelGroup(group){
var el = document.createElement('optgroup');
el.setAttribute('label', group);
return el
}
function createSelOpt(opt){
var el = document.createElement('option');
el.setAttribute('value', opt);
el.innerHTML = opt;
return el
}
function createSel(array, group){
if (array.length != "0"){
var el = createSelGroup(group);
for(var i=0; i<array.length; i++){
var opt = createSelOpt(array[i])
el.appendChild(opt);
}
return el;
}
}

3
assets/webconfig/lang/de.json
View File

@ -75,6 +75,7 @@
"conf_leds_layout_cl_vleddepth" : "Vertikale LED Tiefe", "conf_leds_layout_cl_vleddepth" : "Vertikale LED Tiefe",
"conf_leds_layout_cl_generate" : "Generiere Konfiguartion", "conf_leds_layout_cl_generate" : "Generiere Konfiguartion",
"conf_leds_layout_cl_edgegap" : "Rahmenabstand", "conf_leds_layout_cl_edgegap" : "Rahmenabstand",
"conf_leds_layout_cl_cornergap" : "Eckabstand",
"conf_leds_layout_ma_horiz" : "Horizontal", "conf_leds_layout_ma_horiz" : "Horizontal",
"conf_leds_layout_ma_vert" : "Vertical", "conf_leds_layout_ma_vert" : "Vertical",
"conf_leds_layout_ma_cabling" : "Verkabelung", "conf_leds_layout_ma_cabling" : "Verkabelung",
@ -91,7 +92,7 @@
"conf_leds_layout_textf1" : "Das Textfeld zeigt dir dein aktuell geladenes Layout, sofern du kein neues Layout mit den Optionen oben erstellt hast. Optional kann man die Werte hier weiter bearbeiten.", "conf_leds_layout_textf1" : "Das Textfeld zeigt dir dein aktuell geladenes Layout, sofern du kein neues Layout mit den Optionen oben erstellt hast. Optional kann man die Werte hier weiter bearbeiten.",
"conf_leds_layout_textf2" : "Vergiss nicht zu speichern!", "conf_leds_layout_textf2" : "Vergiss nicht zu speichern!",
"conf_leds_test_button_toggleleds" : "LEDs", "conf_leds_test_button_toggleleds" : "LEDs",
"conf_leds_test_button_togglelednumber" : "LED Nummern", "conf_leds_test_button_togglelednumber" : "LED Nummerierung",
"conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht", "conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht",
"conf_grabber_label_intro" : "Hyperion unterstützt 2 Hauptarten wie Bilder aufgenommen werden können. Zum Einen die Plattform Aufnahme, die sich direkt am System bedient auf dem Hyperion läuft (beste Qualität). Zum Anderen die USB Aufnahme, die sich an einem angeschlossenen Gerät bedient die benötigten Informationen für die Verarbeitung und Ausgabe zu erhalten (Mehr Konfigurationsaufwand und Kalibrierung)", "conf_grabber_label_intro" : "Hyperion unterstützt 2 Hauptarten wie Bilder aufgenommen werden können. Zum Einen die Plattform Aufnahme, die sich direkt am System bedient auf dem Hyperion läuft (beste Qualität). Zum Anderen die USB Aufnahme, die sich an einem angeschlossenen Gerät bedient die benötigten Informationen für die Verarbeitung und Ausgabe zu erhalten (Mehr Konfigurationsaufwand und Kalibrierung)",
"conf_colors_label_intro" : "Neben der Farbkalibrierung, gehört auch die Glättung (sanfte Farbübergänge) und die Erkennung von störenden (schwarzen) Balken zur Bildverarbeitung.", "conf_colors_label_intro" : "Neben der Farbkalibrierung, gehört auch die Glättung (sanfte Farbübergänge) und die Erkennung von störenden (schwarzen) Balken zur Bildverarbeitung.",

1
effects/schema/fade.schema.json
View File

@ -9,6 +9,7 @@
"title":"Fade Time", "title":"Fade Time",
"default": 5.0, "default": 5.0,
"minimum" : 0.1, "minimum" : 0.1,
"append" : "s",
"propertyOrder" : 1 "propertyOrder" : 1
}, },
"color-start": { "color-start": {

31
effects/schema/knight-rider.schema.json
View File

@ -4,20 +4,6 @@
"title":"Knight Rider", "title":"Knight Rider",
"required":true, "required":true,
"properties":{ "properties":{
"speed": {
"type": "number",
"title":"Speed",
"default": 1.0,
"minimum": 0.1,
"propertyOrder" : 1
},
"fadeFactor": {
"type": "number",
"title":"Fade Factor",
"default": 0.7,
"minimum" : 0.0,
"propertyOrder" : 1
},
"color": { "color": {
"type": "array", "type": "array",
"title":"Color", "title":"Color",
@ -30,6 +16,23 @@
}, },
"minItems": 3, "minItems": 3,
"maxItems": 3, "maxItems": 3,
"propertyOrder" : 1
},
"speed": {
"type": "number",
"title":"Speed",
"default": 1.0,
"minimum": 0.1,
"step" : 0.1,
"propertyOrder" : 2
},
"fadeFactor": {
"type": "number",
"title":"Fade Factor",
"default": 0.7,
"minimum" : 0.0,
"maximum" : 0.9,
"step" : 0.1,
"propertyOrder" : 3 "propertyOrder" : 3
} }
}, },

6
effects/schema/police.schema.json
View File

@ -34,8 +34,9 @@
}, },
"colors_count": { "colors_count": {
"type": "integer", "type": "integer",
"title":"Colors count", "title":"Color length",
"default": "10", "default": 10,
"minimum" : 0,
"propertyOrder" : 3 "propertyOrder" : 3
}, },
"rotation-time": { "rotation-time": {
@ -43,6 +44,7 @@
"title":"Rotation time", "title":"Rotation time",
"default": 2.0, "default": 2.0,
"minimum" : 0.1, "minimum" : 0.1,
"append" : "s",
"propertyOrder" : 4 "propertyOrder" : 4
}, },
"reverse": { "reverse": {

9
effects/schema/rainbow-mood.schema.json
View File

@ -8,19 +8,22 @@
"type": "number", "type": "number",
"title":"Rotation time", "title":"Rotation time",
"default": 60.0, "default": 60.0,
"minimum" : 0.1, "minimum" : 1.0,
"append" : "s",
"propertyOrder" : 1 "propertyOrder" : 1
}, },
"brightness": { "brightness": {
"type": "number", "type": "number",
"title":"Brightness", "title":"Brightness",
"default": 1.0, "default": 1.0,
"minimum" : 0.0, "minimum" : 0.1,
"maximum" : 1.0,
"step" : 0.1,
"propertyOrder" : 2 "propertyOrder" : 2
}, },
"reverse": { "reverse": {
"type": "boolean", "type": "boolean",
"title":"Reverse", "title":"Reverse direction",
"default": false, "default": false,
"propertyOrder" : 3 "propertyOrder" : 3
} }

9
effects/schema/rainbow-swirl.schema.json
View File

@ -7,8 +7,9 @@
"rotation-time": { "rotation-time": {
"type": "number", "type": "number",
"title":"Rotation Time", "title":"Rotation Time",
"default": 20.0, "default": 10.0,
"minimum" : 0.1, "minimum" : 0.1,
"append" : "s",
"propertyOrder" : 1 "propertyOrder" : 1
}, },
"center_x": { "center_x": {
@ -16,6 +17,8 @@
"title":"Center X", "title":"Center X",
"default": 0.5, "default": 0.5,
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 2.0,
"step" : 0.1,
"propertyOrder" : 2 "propertyOrder" : 2
}, },
"center_y": { "center_y": {
@ -23,11 +26,13 @@
"title":"Center Y", "title":"Center Y",
"default": 0.5, "default": 0.5,
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 2.0,
"step" : 0.1,
"propertyOrder" : 3 "propertyOrder" : 3
}, },
"reverse": { "reverse": {
"type": "boolean", "type": "boolean",
"title":"Reverse", "title":"Reverse direction",
"default": false, "default": false,
"propertyOrder" : 4 "propertyOrder" : 4
} }

6
effects/schema/shutdown.schema.json
View File

@ -8,7 +8,8 @@
"type": "number", "type": "number",
"title":"Speed", "title":"Speed",
"default": 1.0, "default": 1.0,
"minimum" : 0.1, "minimum" : 0.3,
"step" : 0.1,
"propertyOrder" : 1 "propertyOrder" : 1
}, },
"alarm-color": { "alarm-color": {
@ -28,6 +29,7 @@
"post-color": { "post-color": {
"type": "array", "type": "array",
"title":"Post color", "title":"Post color",
"format" : "colorpicker",
"default": [255,174,11], "default": [255,174,11],
"items" : { "items" : {
"type": "integer", "type": "integer",
@ -40,7 +42,7 @@
}, },
"shutdown-enabled": { "shutdown-enabled": {
"type": "boolean", "type": "boolean",
"title":"Shutdown enabled", "title":"Real shutdown",
"default": false, "default": false,
"propertyOrder" : 4 "propertyOrder" : 4
} }

4
effects/schema/snake.schema.json
View File

@ -23,12 +23,14 @@
"title":"Rotation time", "title":"Rotation time",
"default": 12.0, "default": 12.0,
"minimum" : 0.1, "minimum" : 0.1,
"append" : "s",
"propertyOrder" : 2 "propertyOrder" : 2
}, },
"percentage": { "percentage": {
"type": "integer", "type": "integer",
"title":"Percentage", "title":"Length",
"default": 10, "default": 10,
"append" : "%",
"propertyOrder" : 3 "propertyOrder" : 3
} }
}, },

31
libsrc/hyperion/hyperion.schema.json
View File

@ -362,9 +362,9 @@
{ {
"type" : "number", "type" : "number",
"title" : "Update frequency", "title" : "Update frequency",
"minimum" : 1.000, "minimum" : 1.0,
"maximum" : 100.000, "maximum" : 100.0,
"default" : 25.000, "default" : 25.0,
"append" : "Hz", "append" : "Hz",
"propertyOrder" : 4 "propertyOrder" : 4
}, },
@ -392,6 +392,8 @@
{ {
"type":"array", "type":"array",
"title" : "USB Grabber", "title" : "USB Grabber",
"minItems": 1,
"maxItems": 2,
"items": "items":
{ {
"type" : "object", "type" : "object",
@ -416,6 +418,7 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Input", "title" : "Input",
"minimum" : 0,
"default" : 0, "default" : 0,
"propertyOrder" : 3 "propertyOrder" : 3
}, },
@ -431,6 +434,7 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Width", "title" : "Width",
"minimum" : -1,
"default" : -1, "default" : -1,
"append" : "Pixel", "append" : "Pixel",
"propertyOrder" : 5 "propertyOrder" : 5
@ -439,6 +443,7 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Height", "title" : "Height",
"minimum" : -1,
"default" : -1, "default" : -1,
"append" : "Pixel", "append" : "Pixel",
"propertyOrder" : 6 "propertyOrder" : 6
@ -447,6 +452,7 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Frame decimation", "title" : "Frame decimation",
"minimum" : 0,
"default" : 2, "default" : 2,
"propertyOrder" : 7 "propertyOrder" : 7
}, },
@ -454,12 +460,14 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Size decimation", "title" : "Size decimation",
"minimum" : 0,
"default" : 6, "default" : 6,
"propertyOrder" : 8 "propertyOrder" : 8
}, },
"priority" : "priority" :
{ {
"type" : "integer", "type" : "integer",
"minimum" : 0,
"title" : "Priority channel", "title" : "Priority channel",
"default" : 900, "default" : 900,
"propertyOrder" : 9 "propertyOrder" : 9
@ -522,6 +530,7 @@
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 1.0, "maximum" : 1.0,
"default" : 0.1, "default" : 0.1,
"step" : 0.01,
"append" : "%", "append" : "%",
"propertyOrder" : 16 "propertyOrder" : 16
}, },
@ -532,6 +541,7 @@
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 1.0, "maximum" : 1.0,
"default" : 0.1, "default" : 0.1,
"step" : 0.01,
"append" : "%", "append" : "%",
"propertyOrder" : 17 "propertyOrder" : 17
}, },
@ -542,6 +552,7 @@
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 1.0, "maximum" : 1.0,
"default" : 0.1, "default" : 0.1,
"step" : 0.01,
"append" : "%", "append" : "%",
"propertyOrder" : 18 "propertyOrder" : 18
} }
@ -573,21 +584,23 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Width", "title" : "Width",
"default" : 96, "minimum" : 10,
"default" : 80,
"append" : "Pixel" "append" : "Pixel"
}, },
"height" : "height" :
{ {
"type" : "integer", "type" : "integer",
"title" : "Height", "title" : "Height",
"default" : 96, "minimum" : 10,
"default" : 45,
"append" : "Pixel" "append" : "Pixel"
}, },
"frequency_Hz" : "frequency_Hz" :
{ {
"type" : "integer", "type" : "integer",
"title" : "Frequency", "title" : "Frequency",
"minimum" : 0, "minimum" : 1,
"default" : 10, "default" : 10,
"append" : "Hz" "append" : "Hz"
}, },
@ -686,6 +699,7 @@
"minimum" : 0.0, "minimum" : 0.0,
"maximum" : 1.0, "maximum" : 1.0,
"default" : 0.05, "default" : 0.05,
"step" : 0.01,
"append" : "%", "append" : "%",
"propertyOrder" : 2 "propertyOrder" : 2
}, },
@ -983,6 +997,7 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Priority", "title" : "Priority",
"minimum" : 0,
"default" : 800, "default" : 800,
"propertyOrder" : 4 "propertyOrder" : 4
}, },
@ -990,7 +1005,9 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Timeout", "title" : "Timeout",
"minimum" : 1000,
"default" : 10000, "default" : 10000,
"append" : "ms",
"propertyOrder" : 5 "propertyOrder" : 5
}, },
"shared" : "shared" :
@ -1026,6 +1043,8 @@
{ {
"type" : "integer", "type" : "integer",
"title" : "Port", "title" : "Port",
"minimum" : 0,
"maximum" : 65535,
"default" : 8099, "default" : 8099,
"propertyOrder" : 3 "propertyOrder" : 3
} }