<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"> ... device specific options ... we need some cpp code extension to get schema for all leds <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>