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

* upd

* ipadte schemas

* update html

* update

* fix matrix index increment

[skip ci]

* matrix 1 led as minimum

[skip ci]

* disable zoom

[skpi ci]

assets/webconfig/content/colors.html

@@ -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>

assets/webconfig/content/dashboard.html

@@ -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>

assets/webconfig/content/effects.html

@@ -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>

assets/webconfig/content/effects_configurator.html

@@ -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>

assets/webconfig/content/grabber.html

@@ -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>

assets/webconfig/content/kodiconf.html

@@ -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>

assets/webconfig/content/leds.html

@@ -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:
+									<div class="form-group">
-<pre>
+										<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>
-led count horizontal:
+										<div class=" input-group">
-led count vertical:
+											<input class="form-control ledCLconstr" id="ip_cl_ledstop" type="number" value="10" min="0" step="1"></input>
-cabling: zick zack/snake
+											<div class="input-group-addon">LEDs</div>
-order: horizontal/vertical
+										</div>
-led 0 position: top-left / top-right / bottom-left / bottom-right
+									</div>
-</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_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>
-						</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>
+										<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>
-						<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=" 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">
+						<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>
 		</div>
-		</div> <!-- left pane -->
-
 		</div> <!-- row layout -->
 	</div>
 

assets/webconfig/content/network.html

@@ -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>

assets/webconfig/content/remote.html

@@ -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>

assets/webconfig/content/support.html

@@ -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>

assets/webconfig/content/update.html

@@ -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>

assets/webconfig/css/hyperion.css

@@ -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;}

assets/webconfig/index.html

@@ -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>

assets/webconfig/js/content_effectsconfigurator.js

@@ -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 = "";
@@ -84,6 +133,24 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		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();
 });

assets/webconfig/js/content_leds.js

@@ -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,13 +386,11 @@ $(document).ready(function() {
 	});
 
 	// ------------------------------------------------------------------
-	$("#leds_custom_check").off().on("click", function() {
+	$("#leds_custom_updsim").off().on("click", function() {
-		e = isJsonString($("#ledconfig").val());
+		if (validateText()){
-
+			string = $("#ledconfig").val();
-		if (e.length == 0)
+			createLedPreview(JSON.parse(string), 'text');
-			showInfoDialog("success", "Validation success", "Your config is valid!");
+		}
-		else
-			showInfoDialog("error", "Validation failed!", e);
 	});
 	
 	// ------------------------------------------------------------------

assets/webconfig/js/hyperion.js

@@ -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+'"}');
+}

assets/webconfig/lang/de.json

@@ -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_generatedconf" : "Generierte/Aktuelle Konfiguration",
-		"conf_leds_layout_button_validateconf" : "Überprüfe Syntax",
+		"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!",

effects/schema/fade.schema.json

@@ -14,11 +14,13 @@
         "color-start": {
             "type": "array",
             "title":"Color Start",
+            "format":"colorpicker",
             "default": [255,174,11],
             "items" : {
                 "type": "integer",
                 "minimum": 0,
                 "maximum": 255
+
             },
             "minItems": 3,
             "maxItems": 3,
@@ -27,6 +29,7 @@
         "color-end": {
             "type": "array",
             "title":"Color End",
+            "format":"colorpicker",
             "default": [100,100,100],
             "items" : {
                 "type": "integer",

effects/schema/knight-rider.schema.json

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

effects/schema/mood-blobs.schema.json

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

effects/schema/police.schema.json

@@ -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",

effects/schema/shutdown.schema.json

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

effects/schema/snake.schema.json

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

effects/schema/sparks.schema.json

@@ -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",

effects/schema/strobe.schema.json

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