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

LED Layouts, Delete Effect, Colorpicker for EC (#290)

Browse Source 
* upd

* ipadte schemas

* update html

* update

* fix matrix index increment

[skip ci]

* matrix 1 led as minimum

[skip ci]

* disable zoom

[skpi ci]
This commit is contained in:
brindosch 2016-11-18 18:39:27 +01:00 committed by GitHub
parent c2faf07574
commit c05181666c
25 changed files with 632 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/webconfig/content/colors.html
View File

@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-photo fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_conf_token">Image Processing</span></h1>
<h2 class="page-header"><i class="fa fa-photo fa-fw"></i><span lang="en" data-lang-token="main_menu_colors_conf_token">Image Processing</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_colors_label_intro">Color calibration, smoothing (color transistions) and detection of blackbars.</h4>
</div>

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

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></h1>
<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>

2
assets/webconfig/content/effects.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-spinner fa-fw"></i><span lang="en" data-lang-token="main_menu_effect_conf_token">Effects</span></h1>
<h2 class="page-header"><i class="fa fa-spinner fa-fw"></i><span lang="en" data-lang-token="main_menu_effect_conf_token">Effects</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_effects_label_intro">Setting up a booteffect/color that is visible after Hyperion startup. Configure a background effect/color which is active, when all capture sources are disabled (also temporarily via Kodi Watch)</h4>
</div>

9
assets/webconfig/content/effects_configurator.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-cogs fa-fw"></i><span lang="en" data-lang-token="main_menu_effectsconfigurator_token">Effects Configurator</span></h1>
<h2 class="page-header"><i class="fa fa-cogs fa-fw"></i><span lang="en" data-lang-token="main_menu_effectsconfigurator_token">Effects Configurator</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="effectsconfigurator_label_intro">Create out of the base effects new effects that are tuned to your liking. Depending on Effect there are options like color, speed, direction and more available.</h4>
</div>
@ -28,6 +28,13 @@
<button class="btn btn-primary pull-right" id='btn_write' lang="en" data-lang-token="effectsconfigurator_button_saveeffect">Save Effect</button>
</div>
</div>
<div class="panel panel-default" >
<div class="panel-heading">
<label for="effectsdellist" lang="en" data-lang-token="effectsconfigurator_label_deleffect">Effekt Delete:</label>
<select id="effectsdellist" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
<button class="btn btn-primary pull-right" id='btn_delete' lang="en" data-lang-token="effectsconfigurator_button_deleffect">Delete Effect</button>
</div>
</div>
</div>
</div>
</div>

2
assets/webconfig/content/grabber.html
View File

@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></h1>
<h2 class="page-header"><i class="fa fa-camera fa-fw"></i><span lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_grabber_label_intro">Hyperion supports two ways on how to get captured pictures for processing and output. The platform grabber which captures internal at the device you are running Hyperion on (best qualitiy) and the USB Grabber which gathers from a connected device the necessary pictures (more calibration work and configuration).</h4>
</div>

2
assets/webconfig/content/kodiconf.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h1>
<h2 class="page-header"><i class="fa fa-play-circle-o fa-fw"></i><span lang="en" data-lang-token="conf_kodi_label_title">Kodi Watch</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_kodi_label_intro">The Kodi Watcher enables you to enable and disable the screencapture depending on Kodi state. This is not limited to the same machine, you could observe also a Kodi on any other device at your network.</h4>
</div>

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

@ -29,7 +29,7 @@
<div class="container-fluid">
<h1 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></h1>
<h2 class="page-header"><i class="fa fa-lightbulb-o fa-fw"></i><span lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="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>
</div>
@ -100,64 +100,192 @@
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_frame">Frame Configuration (ambient light)</span></a>
<a><i class="fa fa-television fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_frame">Classic Layout (LED Frame)</span></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 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>
<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>
<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>
<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>
<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>
<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>
<div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_ledsgpos" type="number" value="0" min="0" step="1"></input>
</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>
<div class=" input-group">
<input class="form-control ledCLconstr" id="ip_cl_position" type="number" value="0" step="1"></input>
</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">
<input class="ledCLconstr" id="ip_cl_reverse" type="checkbox" value="false"></input>
</div>
</div>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading headcollapse" data-toggle="collapse" data-target="#collapse3">
<h4 class="panel-title">
<a><span lang="en" data-lang-token="conf_leds_layout_advanced">Advanced settings</span></a>
</h4>
</div>
<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>
<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>
<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>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button id="btn_cl_generate" class="btn btn-warning" lang="en" data-lang-token="conf_leds_layout_cl_generate">Generate LED configuration</button>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-heading headcollapse" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span></a>
<a><i class="fa fa-th fa-fw"></i><span lang="en" data-lang-token="conf_leds_layout_matrix">Matrix Configuration (LED wall)</span></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 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>
<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>
<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>
<div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_cabling">
<option value="snake" lang="en" data-lang-attribute="conf_leds_layout_ma_optsnake">Snake</option>
<option value="parallel" lang="en" data-lang-attribute="conf_leds_layout_ma_optparallel">Parallel</option>
</select>
</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>
<div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_order">
<option value="horizontal" lang="en" data-lang-attribute="conf_leds_layout_ma_opthoriz">Horizontal</option>
<option value="vertical" lang="en" data-lang-attribute="conf_leds_layout_ma_optvert">Vertical</option>
</select>
</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_position">Input</label>
<div class=" input-group">
<select class="form-control ledMAconstr" id="ip_ma_start">
<option value="top-left" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopleft">Top left</option>
<option value="top-right" lang="en" data-lang-attribute="conf_leds_layout_ma_opttopright">Top right</option>
<option value="bottom-left" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomleft">Bottom left</option>
<option value="bottom-right" lang="en" data-lang-attribute="conf_leds_layout_ma_optbottomright">Bottom right</option>
</select>
</div>
</div>
</div>
<div class="panel-footer">
<button id="btn_ma_generate" class="btn btn-warning" lang="en" data-lang-token="conf_leds_layout_cl_generate">Generate LED configuration</button>
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-bottom:5px">
<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 lang="en" data-lang-token="conf_leds_layout_generatedconf">Generated/Actual LED Configuration</span></a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<p lang="en" data-lang-token="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 lang="en" data-lang-token="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 lang="en" type="button" class="btn btn-warning" id="leds_custom_updsim" lang="en" data-lang-token="conf_leds_layout_button_updsim">Update preview</button>
<button lang="en" type="button" class="btn btn-success pull-right" id="leds_custom_save" lang="en" data-lang-token="conf_leds_layout_button_savelay">Save layout</button>
</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><span lang="en" data-lang-token="conf_leds_layout_generatedconf">Generated Configuration</span></h4>
</div>
<div class="panel-body">
<div class="form-group">
<button lang="en" type="button" class="btn btn-success" id="leds_custom_check" lang="en" data-lang-token="conf_leds_layout_button_validateconf">Validate config</button>
<button lang="en" type="button" class="btn btn-success" id="leds_custom_save" lang="en" data-lang-token="general_button_savesettings">Save config</button>
<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>
<textarea rows="25" id="ledconfig" class="form-control"></textarea>
</div>
</div>
</div> <!-- left pane -->
</div>
</div> <!-- row layout -->
</div>

2
assets/webconfig/content/network.html
View File

@ -2,7 +2,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span lang="en" data-lang-token="main_menu_network_conf_token">Network Services</span></h1>
<h2 class="page-header"><i class="fa fa-sitemap fa-fw"></i><span lang="en" data-lang-token="main_menu_network_conf_token">Network Services</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="conf_network_label_intro">All network based settings could you find here.</h4>
</div>

2
assets/webconfig/content/remote.html
View File

@ -1,5 +1,5 @@
<div class="container-fluid">
<h1 class="page-header"><i class="fa fa-wifi fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span></h1>
<h2 class="page-header"><i class="fa fa-wifi fa-fw"></i><span lang="en" data-lang-token="main_menu_remotecontrol_token">Remote Control</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="remote_label_intro">Set an effect/color. You could also select a source manually. The Components control give the opportunity to enable/disable components of Hyprion during runtime. All changes you made here are lost after a restart.</h4>
</div>

2
assets/webconfig/content/support.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header"><i class="fa fa-info fa-fw"></i><span lang="en" data-lang-token="support_label_title">Support Hyperion</span></h1>
<h2 class="page-header"><i class="fa fa-info fa-fw"></i><span lang="en" data-lang-token="support_label_title">Support Hyperion</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="support_label_intro">Hyperion is a free non-profit software. A small team is working on it and this is why we need your steady support.</h4>
</div>

2
assets/webconfig/content/update.html
View File

@ -1,7 +1,7 @@
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="main_menu_update_token">Update</span></h1>
<h2 class="page-header"><i class="fa fa-download fa-fw"></i><span lang="en" data-lang-token="main_menu_update_token">Update</span></h2>
<div class="introd">
<h4 lang="en" data-lang-token="update_label_intro">This page gives you an overview of all Hyperion versions available. On top you could update or downgrade your version of Hyperion whenever you want. Sorted from newest to oldest</h4>
</div>

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

@ -17,9 +17,12 @@ table.borderless td,table.borderless th{border: none !important;}
.sidebar{margin-top:61px;padding-top:20px;}
.dropdown{font-size:18px;}
@media (max-width: 767px) {.sidebar{margin-top:0px;}}
.page-header{margin-top:15px;}
/*Panels*/
.panel-heading{font-size:18px;}
.headcollapse{cursor:pointer;}
.headcollapse a:hover{text-decoration:none;}
/*Dashboard*/
.component-on{color:green;}

2
assets/webconfig/index.html
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="description" content="">
<title>Hyperion - WebUI</title>

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

@ -1,3 +1,52 @@
JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
getValue: function() {
color = $(this.input).data('colorpicker').color.toRGB();
return [color.r, color.g, color.b];
},
setValue: function(val) {
function rgb2hex(rgb){
return "#" +
("0" + parseInt(rgb[0],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));
},
build: function() {
this._super();
var myinput = this
$(this.input).colorpicker({
format: 'rgb',
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
},
})
//$(this.input).colorpicker().on('changeColor', function(e) {
//$(this.input).trigger("change");
//});
}
});
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === "array" && schema.format === "colorpicker") {
return "colorPicker";
}
});
$(hyperion).one("cmd-config-getschema", function(event) {
effects = parsedConfSchemaJSON.properties.effectSchemas.internal
EffectsHtml = "";
@ -83,7 +132,25 @@ $(hyperion).one("cmd-config-getschema", function(event) {
$('#btn_cont_test').off().on('click',function() {
toggleClass('#btn_cont_test', "btn-success", "btn-danger");
});
// Delete effect
delList=parsedServerInfoJSON.info.effects
var EffectHtml
for(var idx=0; idx<delList.length; idx++)
{
if(!/:/.test(delList[idx].file))
{
EffectHtml += '<option value="'+delList[idx].name+'">'+delList[idx].name+'</option>';
}
}
$("#effectsdellist").html(EffectHtml);
$('#btn_delete').off().on('click',function() {
var name = $("#effectsdellist").val();
requestDeleteEffect(name);
});
$(document).ready( function() {
requestServerConfigSchema();
});

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

@ -1,5 +1,6 @@
var ledsCustomCfgInitialized = false;
var finalLedArray = [];
function get_hue_lights(){
$.ajax({
@ -16,8 +17,284 @@ function get_hue_lights(){
});
}
function validateText(){
e = isJsonString($("#ledconfig").val());
if (e.length != 0){
showInfoDialog("error", "Validation failed!", e);
return false
}
return true
}
function createLedPreview(leds, origin){
if (origin == "classic"){
$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originCL">Created from: Classic Layout (LED Frame)</h5>');
$('#leds_preview').css("padding-top", "56.25%");
}
else if(origin == "text"){
$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originTEXT">Created from: Textfield</h5>');
$('#leds_preview').css("padding-top", "56.25%");
}
else if(origin == "matrix"){
$('#previewcreator').html('<h5 lang="en" data-lang-token="conf_leds_layout_preview_originMA">Created from: Matrix Layout(LED wall)</h5>');
$('#leds_preview').css("padding-top", "100%");
}
$('#previewledcount').html('<h5>Total LED count: '+leds.length+'</h5>');
$('.st_helper').css("border", "8px solid grey");
canvas_height = $('#leds_preview').innerHeight();
canvas_width = $('#leds_preview').innerWidth();
leds_html = "";
for(var idx=0; idx<leds.length; idx++)
{
led = leds[idx];
led_id='ledc_'+[idx];
bgcolor = "background-color:hsl("+(idx*360/leds.length)+",100%,50%);";
pos = "left:"+(led.hscan.minimum * canvas_width)+"px;"+
"top:"+(led.vscan.minimum * canvas_height)+"px;"+
"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-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_preview').html(leds_html);
$('#ledc_0').css({"background-color":"black","z-index":"10"});
$('#ledc_1').css({"background-color":"grey","z-index":"10"});
$('#ledc_2').css({"background-color":"#A9A9A9","z-index":"10"});
}
function createClassicLeds(){
//get values
var ledsTop = parseInt($("#ip_cl_ledstop").val());
var ledsBottom = parseInt($("#ip_cl_ledsbottom").val());
var ledsLeft = parseInt($("#ip_cl_ledsleft").val());
var ledsRight = parseInt($("#ip_cl_ledsright").val());
var ledsGlength = parseInt($("#ip_cl_ledsglength").val());
var ledsGPos = parseInt($("#ip_cl_ledsgpos").val());
var position = parseInt($("#ip_cl_position").val());
var reverse = $("#ip_cl_reverse").is(":checked");
var edgeGap = 0.1
//advanced values
var rawledsVDepth = parseInt($("#ip_cl_ledsvdepth").val());
var rawledsHDepth = parseInt($("#ip_cl_ledshdepth").val());
//helper
var ledsVDepth = rawledsVDepth / 100;
var ledsHDepth = rawledsHDepth / 100;
var min = 0.0 + edgeGap;
var max = 1.0 - edgeGap;
var ledArray = [];
createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
if(ledsGlength != "0" && validateGap()){
ledArray.splice(ledsGPos, ledsGlength);
}
if (position != "0"){
rotateArray(ledArray, position);
}
if (reverse)
ledArray.reverse();
createLedPreview(ledArray, 'classic');
createFinalArray(ledArray);
function createFinalArray(array){
for(var i = 0; i<array.length; i++){
hmin = array[i].hscan.minimum;
hmax = array[i].hscan.maximum;
vmin = array[i].vscan.minimum;
vmax = array[i].vscan.maximum;
finalLedArray[i] = { "index" : i, "hscan": { "maximum" : hmax, "minimum" : hmin }, "vscan": { "maximum": vmax, "minimum": vmin}}
}
}
function validateGap(){
if (ledsGPos+ledsGlength > ledArray.length){
showInfoDialog('error','GAP LOST IN SPACE!','You moved the gap out of your TV frame, lower the gap length or position and try again!');
return false
}
return true
}
function rotateArray(array, times){
if (times > "0"){
while( times-- ){
array.push(array.shift())
}
return array;
}
else
{
while( times++ ){
array.unshift(array.pop())
}
return array;
}
}
function createLedArray(hmin, hmax, vmin, vmax){
ledArray.push( { "hscan" : { "minimum" : hmin, "maximum" : hmax }, "vscan": { "minimum": vmin, "maximum": vmax }} );
}
function createTopLeds(){
vmin=0.0;
vmax=vmin+ledsHDepth;
for (var i = 0; i<ledsTop; i++){
//step=(max-min)/ledsTop
//i/ledsTop*(max-min)
step = 1/ledsTop;
factor = i/ledsTop;
hmin=factor;
hmax=factor+step;
createLedArray(hmin, hmax, vmin, vmax);
}
}
function createLeftLeds(){
hmin=0.0;
hmax=ledsVDepth;
for (var i = ledsLeft; i>0; i--){
step = 1/ledsLeft;
factor = i/ledsLeft;
vmin=factor-step;
vmax=factor;
createLedArray(hmin, hmax, vmin, vmax);
}
}
function createRightLeds(){
hmax=1.0;
hmin=hmax-ledsVDepth;
for (var i = 0; i<ledsRight; i++){
step = 1/ledsRight;
factor = i/ledsRight;
vmin=factor;
vmax=factor+step;
createLedArray(hmin, hmax, vmin, vmax);
}
}
function createBottomLeds(){
vmax=1.0;
vmin=vmax-ledsHDepth;
for (var i = ledsBottom; i>0; i--){
step = 1/ledsBottom;
factor = i/ledsBottom;
hmin=factor-step;
hmax=factor;
createLedArray(hmin, hmax, vmin, vmax);
}
}
}
function createMatrixLeds(){
// Big thank you to RanzQ (Juha Rantanen) from Github for this script
// https://raw.githubusercontent.com/RanzQ/hyperion-audio-effects/master/matrix-config.js
//get values
var width = parseInt($("#ip_ma_ledshoriz").val());
var height = parseInt($("#ip_ma_ledsvert").val());
var cabling = $("#ip_ma_cabling").val();
//var order = $("#ip_ma_order").val();
var start = $("#ip_ma_start").val();
var parallel = false
var index = 0
var leds = []
var hblock = 1.0 / width
var vblock = 1.0 / height
if (cabling == "parallel"){
parallel = true
}
/**
* Adds led to the hyperion config led array
* @param {Number} index Index of the led
* @param {Number} x Horizontal position in matrix
* @param {Number} y Vertical position in matrix
*/
function addLed (index, x, y) {
var hscanMin = x * hblock
var hscanMax = (x + 1) * hblock
var vscanMin = y * vblock
var vscanMax = (y + 1) * vblock
leds.push({
index: index,
hscan: {
minimum: hscanMin,
maximum: hscanMax
},
vscan: {
minimum: vscanMin,
maximum: vscanMax
}
})
}
var startYX = start.split('-')
var startX = startYX[1] === 'right' ? width - 1 : 0
var startY = startYX[0] === 'bottom' ? height - 1 : 0
var endX = startX === 0 ? width - 1 : 0
var endY = startY === 0 ? height - 1 : 0
var forward = startX < endX
var downward = startY < endY
var x, y
for (y = startY; downward && y <= endY || !downward && y >= endY; y += downward ? 1 : -1) {
for (x = startX; forward && x <= endX || !forward && x >= endX; x += forward ? 1 : -1) {
addLed(index, x, y)
index++
}
if (!parallel) {
forward = !forward
var tmp = startX
startX = endX
endX = tmp
}
}
finalLedArray = leds
createLedPreview(leds, 'matrix');
}
$(document).ready(function() {
//-------------------------------------------------------------------
$('.ledCLconstr').bind("change", function() {
createClassicLeds();
});
$('.ledMAconstr').bind("change", function() {
createMatrixLeds();
});
$('#btn_cl_generate').off().on("click", function() {
if (finalLedArray != ""){
$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
$('#collapse1').collapse('hide')
$('#collapse4').collapse('show');
}
});
$('#btn_ma_generate').off().on("click", function() {
if (finalLedArray != ""){
$("#ledconfig").text(JSON.stringify(finalLedArray, null, "\t"));
$('#collapse2').collapse('hide')
$('#collapse4').collapse('show');
}
});
// ------------------------------------------------------------------
$(hyperion).on("cmd-ledcolors-ledstream-update",function(event){
if ($("#leddevices").length == 0)
@ -80,7 +357,7 @@ $(document).ready(function() {
leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_num">'+led.index+'</span></div>';
}
$('#leds_canvas').html(leds_html);
$('#led_0').css("border","2px dotted red");
$('#led_0').css({"z-index":"10"});
});
// ------------------------------------------------------------------
@ -109,15 +386,13 @@ $(document).ready(function() {
});
// ------------------------------------------------------------------
$("#leds_custom_check").off().on("click", function() {
e = isJsonString($("#ledconfig").val());
if (e.length == 0)
showInfoDialog("success", "Validation success", "Your config is valid!");
else
showInfoDialog("error", "Validation failed!", e);
$("#leds_custom_updsim").off().on("click", function() {
if (validateText()){
string = $("#ledconfig").val();
createLedPreview(JSON.parse(string), 'text');
}
});
// ------------------------------------------------------------------
$("#leds_custom_save").off().on("click", function() {

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

@ -213,3 +213,7 @@ function requestWriteEffect(effectName,effectPy,effectArgs)
function requestTestEffect(effectName,effectPy,effectArgs) {
websocket.send('{"command":"effect", "tan":'+wsTan+',"effect":{"name":"'+effectName+'", "args":'+effectArgs+'},"priority":1, "pythonScript":"'+effectPy+'"}');
}
function requestDeleteEffect(effectName) {
websocket.send('{"command":"delete-effect","name":"'+effectName+'"}');
}

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

@ -54,8 +54,41 @@
"conf_leds_contr_label_contrtype" : "Steuerungstyp:",
"conf_leds_layout_frame" : "Klassisches Layout (Rahmen)",
"conf_leds_layout_matrix" : "Matrix Layout (LED Wand)",
"conf_leds_layout_generatedconf" : "Generierte Konfiguration",
"conf_leds_layout_button_validateconf" : "Überprüfe Syntax",
"conf_leds_layout_generatedconf" : "Generierte/Aktuelle Konfiguration",
"conf_leds_layout_button_savelay" : "Speichere Layout",
"conf_leds_layout_button_updsim" : "Aktualisiere Vorschau",
"conf_leds_layout_peview" : "LED Layout Vorschau",
"conf_leds_layout_advanced" : "Erweiterte Optionen",
"conf_leds_layout_preview_originCL" : "Erstellt von: Klassisches Layout (Rahmen)",
"conf_leds_layout_preview_originTEXT" : "Erstellt von: Textfeld",
"conf_leds_layout_preview_originMA" : "Erstellt von: Matrix Layout (LED Wand)",
"conf_leds_layout_preview_empty" : "Es wurde keine Vorschau angefordert",
"conf_leds_layout_cl_top" : "Oben",
"conf_leds_layout_cl_bottom" : "Unten",
"conf_leds_layout_cl_left" : "Links",
"conf_leds_layout_cl_right" : "Rechts",
"conf_leds_layout_cl_gaglength" : "Lückenlänge",
"conf_leds_layout_cl_gappos" : "Lückenposition",
"conf_leds_layout_cl_inppos" : "Einspeisepunkt",
"conf_leds_layout_cl_reversdir" : "Richtung umkehren",
"conf_leds_layout_cl_hleddepth" : "Horizontale LED Tiefe",
"conf_leds_layout_cl_vleddepth" : "Vertikale LED Tiefe",
"conf_leds_layout_cl_generate" : "Generiere Konfiguartion",
"conf_leds_layout_ma_horiz" : "Horizontal",
"conf_leds_layout_ma_vert" : "Vertical",
"conf_leds_layout_ma_cabling" : "Verkabelung",
"conf_leds_layout_ma_optsnake" : "Schlange",
"conf_leds_layout_ma_optparallel" : "Parallel",
"conf_leds_layout_ma_order" : "Reihenfolge",
"conf_leds_layout_ma_opthoriz" : "Horizontal",
"conf_leds_layout_ma_optvert" : "Vertikal",
"conf_leds_layout_ma_position" : "Einpeisung",
"conf_leds_layout_ma_opttopleft" : "Oben links",
"conf_leds_layout_ma_opttopright" : "Oben rechts",
"conf_leds_layout_ma_optbottomleft" : "Unten links",
"conf_leds_layout_ma_optbottomright" : "Unten rechts",
"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_test_button_toggleleds" : "LEDs",
"conf_leds_test_button_togglelednumber" : "LED Nummern",
"conf_leds_test_button_toggleliveleds" : "LED Echtzeitansicht",
@ -89,6 +122,8 @@
"effectsconfigurator_button_starttest" : "Starte Effekttest",
"effectsconfigurator_button_stoptest" : "Stoppe Effekttest",
"effectsconfigurator_button_conttest" : "Fortlaufender Test",
"effectsconfigurator_label_deleffect" : "Effekt entfernen:",
"effectsconfigurator_button_deleffect" : "Effekt entfernen",
"support_label_title" : "Unterstütze Hyperion",
"support_label_intro" : "Hyperion ist ein kostenloses Open Source Projekt und ein kleines Team arbeitet an seiner Weiterentwicklung. Darum benötigen wir DEINE Unterstützung um den Ball weiter rollen zu lassen und um weiter in bessere Infrastruktur und Weiterentwicklung investieren zu können.",
"support_label_spreadtheword" : "Weitersagen!",

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

@ -1,42 +1,45 @@
{
"type":"object",
"script" : "fade.py",
"title":"Fade",
"required":true,
"properties":{
"fade-time": {
"type": "number",
"title":"Fade Time",
"default": 5.0,
"minimum" : 0.1,
"propertyOrder" : 1
},
"color-start": {
"type": "array",
"title":"Color Start",
"default": [255,174,11],
"items" : {
"type": "integer",
"minimum": 0,
"maximum": 255
},
"minItems": 3,
"maxItems": 3,
"propertyOrder" : 2
},
"color-end": {
"type": "array",
"title":"Color End",
"default": [100,100,100],
"items" : {
"type": "integer",
"minimum": 0,
"maximum": 255
},
"minItems": 3,
"maxItems": 3,
"propertyOrder" : 3
}
},
"additionalProperties": false
"type":"object",
"script" : "fade.py",
"title":"Fade",
"required":true,
"properties":{
"fade-time": {
"type": "number",
"title":"Fade Time",
"default": 5.0,
"minimum" : 0.1,
"propertyOrder" : 1
},
"color-start": {
"type": "array",
"title":"Color Start",
"format":"colorpicker",
"default": [255,174,11],
"items" : {
"type": "integer",
"minimum": 0,
"maximum": 255
},
"minItems": 3,
"maxItems": 3,
"propertyOrder" : 2
},
"color-end": {
"type": "array",
"title":"Color End",
"format":"colorpicker",
"default": [100,100,100],
"items" : {
"type": "integer",
"minimum": 0,
"maximum": 255
},
"minItems": 3,
"maxItems": 3,
"propertyOrder" : 3
}
},
"additionalProperties": false
}

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

@ -21,6 +21,7 @@
"color": {
"type": "array",
"title":"Color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",

1
effects/schema/mood-blobs.schema.json
View File

@ -7,6 +7,7 @@
"color": {
"type": "array",
"title":"Color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",

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

@ -7,6 +7,7 @@
"color_one": {
"type": "array",
"title":"Color one",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",
@ -20,6 +21,7 @@
"color_two": {
"type": "array",
"title":"Color two",
"format":"colorpicker",
"default": [0,0,255],
"items" : {
"type": "integer",

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

@ -14,6 +14,7 @@
"alarm-color": {
"type": "array",
"title":"Alarm color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",

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

@ -7,6 +7,7 @@
"color": {
"type": "array",
"title":"Color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",

3
effects/schema/sparks.schema.json
View File

@ -4,9 +4,10 @@
"title":"Sparks",
"required":true,
"properties":{
"color_one": {
"color": {
"type": "array",
"title":"Color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",

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

@ -7,6 +7,7 @@
"color": {
"type": "array",
"title":"Color",
"format":"colorpicker",
"default": [255,0,0],
"items" : {
"type": "integer",