hyperion.ng/assets/webconfig/content/leds.html

<style>
	#leds_canvas {width:800px; height:450px; background-color:#AAAAAA; position:absolute; margin:10px; box-shadow: 10px 10px 5px #BBBBBB;
	background-image:url(/img/hyperion/hyperionlogo.png); background-repeat:no-repeat; background-position: center; border-radius:2px; }
	.led { display:inline-block; border: 1px solid black; position:absolute; opacity:0.8; text-align:center;
	vertical-align:middle; padding:4px;  border-radius:2px;}
	.led_num {display:none; position:relative; color:black; background-color: white; 
		border-radius:2px; padding:1px; vertical-align:middle; text-align:center;  font-size:0.8em;}
	#leds_controls {white-space:nowrap; margin-top:500px;}
</style>

<div class="modal fade bs-pair-modal-lg" id="pairmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
		<div class="modal-header">
			<h4 class="modal-title">Hue Bridge</h4>
		</div>
		<div class="modal-body">
			<span lang="en" data-lang-token="hue_press_link_modal">Please press link button on the Hue Bridge.</span> <br /><br />
			<center>
				<span id="connectionTime"></span><br />
				<img src="/img/hyperion/ring-alt.svg" />
			<center>
		</div>
		<div class="modal-footer" />
		</div>
	</div>
</div>



<div class="container-fluid">
	<h1 class="page-header" lang="en" data-lang-token="main_menu_leds_conf_token">LED Hardware</h1>
<!--	<div class="introd">
		<h4 lang="en" data-lang-token="remote_effects_intro"></h4>
	</div>-->

	<ul id="leds_cfg_nav" class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#menu_controller">LED Controller</a></li>
		<li><a data-toggle="tab" href="#menu_gencfg">Generate LED Config</a></li>
		<li><a data-toggle="tab" href="#menu_display">LED Testing</a></li>
	</ul>

	<div class="tab-content">

		<div id="menu_controller" class="tab-pane fade in active" style="padding-top:10px">
			<div class="panel panel-primary">
					<div class="panel-heading form-group" style="font-size:90%;white-space:nowrap;">
						<label for="leddevices">Controller Type</label>
						<select id="leddevices" class="form-control" style="color:black;width:auto;margin-left:10px;display:inline-block" />
					</div>
					<div class="panel-body">
					<div id="ledDeviceOptions">
						<div id='editor_container'></div>
						<button id='btn_submit'>Submit (console.log)</button>
					</div>
					
					
		<div id="huebridge" class="container-fluid" style="display:none">
		<hr/>
		<div class="row">
<!-- 			<div class="col-lg-12"> -->
<!-- 				<h1 class="page-header" lang="en" data-lang-token="main_menu_huebridge_token">Hue Bridge</h1> -->
			<div class="col-lg-12" >
				<div class="col-lg-6" >
					<span id="ip_alert" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_ip_token">Please check your IP Address.</span>
					<span id="abortConnection" style="display:none; color:red; font-weight: bold;" lang="en" data-lang-token="hue_failure_connection_token">Connection Timeout. Please press the button in time.</span>
					<div class="form-group">
						<label for="ip">Hue Bridge IP:</label>
						<input type="text" class="form-control" id="ip">
						<label for="user" lang="en" data-lang-token="hue_label_username">Hue Bridge  Username:</label>
						<input type="text" class="form-control" id="user" disabled>
						<br />
						<button type="button" class="btn btn-success" id="create_user"> <i class="fa fa-floppy-o"></i><span lang="en" data-lang-token="hue_button_create_user_token"> Create User</span></button>
					</div>
				</div>
<!-- 			</div> -->
		</div>
	</div>
	<hr />
	<div id="hue_lights" class="row" />
</div>

					
					</div>
			</div>
		</div>
	
		<div id="menu_display" class="tab-pane fade" style="padding-top:10px">
			<div  class="container-fluid">
				<div id="leds_canvas"/>
	
				<div id="leds_controls">
					<button lang="en" type="button" class="btn btn-success" id="leds_toggle">toggle leds</button>
					<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_num">toggle led numbers</button>
					<button lang="en" type="button" class="btn btn-danger" id="leds_toggle_live">toggle live leds</button>
				</div>
			</div>
		</div>

		<div id="menu_gencfg" class="tab-pane fade" style="padding-top:10px">

			<div class="row">
				<div class="col-sm-6">
			
					<div class="panel-group" id="accordion">
					
						<div class="panel panel-primary">
							<div class="panel-heading">
								<h4 class="panel-title">
									<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="fa fa-television fa-fw"></i>Frame Configuration (ambient light)</a>
								</h4>
							</div>
							<div id="collapse1" class="panel-collapse collapse in">
								<div class="panel-body">
								just a reminder ... this are the needed form elements:
<pre>
led count horizontal:
led count vertical:
cabling: zick zack/snake
order: horizontal/vertical
led 0 position: top-left / top-right / bottom-left / bottom-right
</pre>
								</div>
							</div>
						</div> 
	
					<div class="panel panel-primary">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><i class="fa fa-th fa-fw"></i>Matrix Configuration (LED wall)</a>
							</h4>
						</div>
						<div id="collapse2" class="panel-collapse collapse">
							<div class="panel-body">
							just a reminder ... this are the needed form elements:
<pre>
led count links
led count rechts
led count oben
led count unten rechts
led count unten links
start
</pre>
							</div>
						</div>
					</div>
		
			</div> <!-- accordion -->
		</div>
		
		<div class="col-sm-6">
			<div class="panel panel-primary" style="margin-bottom:5px">
				<div class="panel-heading">
					<h4 class="panel-title"><i class="fa fa-wrench fa-fw"></i>Generated Configuration</h4>
				</div>
				<div class="panel-body">
					<div class="form-group">
						<button lang="en" type="button" class="btn btn-success" id="leds_custom_check">check config</button>
						<button lang="en" type="button" class="btn btn-success" id="leds_custom_save">save config</button>
					</div>
					<textarea rows="25" id="ledconfig" class="form-control"></textarea>
				</div>
			</div>
		</div> <!-- left pane -->

		</div> <!-- row layout -->
	</div>

	</div>


	</div> <!-- tab content -->
</div>

<script src="/js/content_leds.js"></script>
<script src="/js/content_huebridge.js"></script>