CSS Tweaks
decompyler
10 years ago
parent
683e68b036
commit
257855b457
@ -1,291 +1,291 @@
|
||||
|
||||
.tab-led-strip .help {
|
||||
padding: 10px;
|
||||
background-color: #ffcb18;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .section {
|
||||
color: #565656;
|
||||
margin: 20px 0 0 0;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid {
|
||||
width: calc((30px + 8px) * 16);
|
||||
height: calc((30px + 8px) * 16);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid .gPoint {
|
||||
float: left;
|
||||
border: solid 2px #000;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 3px;
|
||||
border-radius: 7px;
|
||||
background: rgba(0,0,0,.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-w { /* warning */
|
||||
background: red;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-f { /* flight mode & orientation */
|
||||
background: rgb(50, 205, 50);
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: rgb(50, 205, 50);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-w.mode-f {
|
||||
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-i { /* indicator */
|
||||
background: yellow;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-a { /* Armed Mode */
|
||||
background: blue;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-t { /* Armed Mode */
|
||||
background: orange;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint select {
|
||||
background: #000;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.tab-led-strip .alertMsg {
|
||||
background: rgba(100,0,0,.5);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #FFF;
|
||||
padding: 30px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.tab-led-strip .wire {
|
||||
color: rgba(255,255,255,.5);
|
||||
text-align: center;
|
||||
font-size: 25px;
|
||||
text-shadow: 1px 1px rgba(0,0,0,.4);
|
||||
padding-top: 0px;
|
||||
display: block;
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
margin-top: -32px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gridWire .wire {
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.gridWire .gPoint {
|
||||
background: #333 !important;
|
||||
}
|
||||
|
||||
/*function buttons*/
|
||||
|
||||
.tab-led-strip button {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
|
||||
padding: 7px 7px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.tab-led-strip button:hover {
|
||||
background-color: #acacac;
|
||||
}
|
||||
|
||||
.tab-led-strip .funcWire.btnOn {
|
||||
background: rgb(15, 171, 22);
|
||||
}
|
||||
|
||||
|
||||
.tab-led-strip button.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-led-strip button.w50 {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.tab-led-strip button.w33 {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.tab-led-strip .modeW.btnOn {background: red;}
|
||||
.tab-led-strip .modeF.btnOn {background: rgb(50, 205, 50);}
|
||||
.tab-led-strip .modeI.btnOn {background: yellow; color: #333;}
|
||||
.tab-led-strip .modeA.btnOn {background: blue;}
|
||||
.tab-led-strip .modeT.btnOn {background: orange;}
|
||||
|
||||
.tab-led-strip .dirN.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirE.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirS.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirW.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirU.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirD.btnOn {background: #FFF; color: #000;}
|
||||
|
||||
.tab-led-strip .indicators {
|
||||
position: relative;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators span {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .north {
|
||||
top: -4px;
|
||||
left: 7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .south {
|
||||
bottom: -2px;
|
||||
left: 7px;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .east {
|
||||
bottom: 8px;
|
||||
right: -5px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-left: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .west {
|
||||
bottom: 8px;
|
||||
left: -5px;
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 7px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .up {
|
||||
top: 0px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .down {
|
||||
bottom: 17px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
|
||||
.tab-led-strip .dir-n .north {display: inline;}
|
||||
.tab-led-strip .dir-s .south {display: inline;}
|
||||
.tab-led-strip .dir-e .east {display: inline;}
|
||||
.tab-led-strip .dir-w .west {display: inline;}
|
||||
.tab-led-strip .dir-u .up {display: inline;}
|
||||
.tab-led-strip .dir-d .down {display: inline;}
|
||||
|
||||
.tab-led-strip .controls {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 290px;
|
||||
height: calc((30px + 8px) * 16);
|
||||
}
|
||||
|
||||
.tab-led-strip .output {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
.tab-led-strip .tempOutput {
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,.2);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation {
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation button {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation .dirN {top: 0; left: 32px;}
|
||||
.tab-led-strip .orientation .dirS {bottom: 0; left: 32px;}
|
||||
.tab-led-strip .orientation .dirE {left: 64px; top: 32px;}
|
||||
.tab-led-strip .orientation .dirW {left: 0; top: 32px;}
|
||||
.tab-led-strip .orientation .dirU {right: 0; top: 15px;}
|
||||
.tab-led-strip .orientation .dirD {right: 0; bottom: 15px;}
|
||||
|
||||
.tab-led-strip .wires-remaining {
|
||||
float: right;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining div {
|
||||
font-size: 40px;
|
||||
color: #7AAE2D;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining.error div {
|
||||
color: #FF5700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******JQUERYUI**********/
|
||||
|
||||
.tab-led-strip .ui-selected {
|
||||
box-shadow: inset 0 0 30px rgba(255, 255, 255, 1) !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selecting {
|
||||
box-shadow: inset 0 0 30px rgba(255, 255, 255, .7) !important;
|
||||
border: solid 2px #c0c0c0 !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selectable-helper {
|
||||
background: rgba(0,0,0,.4);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted white;
|
||||
|
||||
.tab-led-strip .help {
|
||||
padding: 10px;
|
||||
background-color: #ffcb18;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .section {
|
||||
color: #565656;
|
||||
margin: 20px 0 0 0;
|
||||
border-bottom: 1px solid silver;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid {
|
||||
width: calc((30px + 8px) * 16);
|
||||
height: calc((30px + 8px) * 16);
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tab-led-strip .mainGrid .gPoint {
|
||||
float: left;
|
||||
border: solid 1px #ADADAD;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 3px;
|
||||
border-radius: 3px;
|
||||
background: #ececec;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-w { /* warning */
|
||||
background: red;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-f { /* flight mode & orientation */
|
||||
background: rgb(50, 205, 50);
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: rgb(50, 205, 50);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-w.mode-f {
|
||||
background: linear-gradient(to bottom, #42c949 0%,#d2ff52 52%,#d2ff52 52%,#ff5454 52%,#ba3535 100%);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-i { /* indicator */
|
||||
background: yellow;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: yellow;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-a { /* Armed Mode */
|
||||
background: rgb(52, 155, 255);
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: rgb(52, 155, 255);
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint.mode-t { /* Armed Mode */
|
||||
background: orange;
|
||||
box-shadow: inset 0 0 30px rgba(0, 0, 0, .7);
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
.tab-led-strip .gPoint select {
|
||||
background: #000;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.tab-led-strip .alertMsg {
|
||||
background: rgba(100,0,0,.5);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: #FFF;
|
||||
padding: 30px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.tab-led-strip .wire {
|
||||
color: rgba(255,255,255,.5);
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
text-shadow: 1px 1px rgba(0,0,0,.4);
|
||||
padding-top: 0px;
|
||||
display: block;
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
margin-top: -29px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.gridWire .wire {
|
||||
color: rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.gridWire .gPoint {
|
||||
background: #CAFFCD !important;
|
||||
}
|
||||
|
||||
/*function buttons*/
|
||||
|
||||
.tab-led-strip button {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border: 1px solid silver;
|
||||
background-color: #ececec;
|
||||
|
||||
padding: 7px 7px;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.tab-led-strip button:hover {
|
||||
background-color: #acacac;
|
||||
}
|
||||
|
||||
.tab-led-strip .funcWire.btnOn {
|
||||
background: rgb(15, 171, 22);
|
||||
}
|
||||
|
||||
|
||||
.tab-led-strip button.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tab-led-strip button.w50 {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.tab-led-strip button.w33 {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.tab-led-strip .modeW.btnOn {background: red;}
|
||||
.tab-led-strip .modeF.btnOn {background: rgb(50, 205, 50);}
|
||||
.tab-led-strip .modeI.btnOn {background: yellow; color: #333;}
|
||||
.tab-led-strip .modeA.btnOn {background: blue;}
|
||||
.tab-led-strip .modeT.btnOn {background: orange;}
|
||||
|
||||
.tab-led-strip .dirN.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirE.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirS.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirW.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirU.btnOn {background: #FFF; color: #000;}
|
||||
.tab-led-strip .dirD.btnOn {background: #FFF; color: #000;}
|
||||
|
||||
.tab-led-strip .indicators {
|
||||
position: relative;
|
||||
height: 30px
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators span {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
display: none;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .north {
|
||||
top: -5px;
|
||||
left: 10px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .south {
|
||||
bottom: -5px;
|
||||
left: 10px;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
border-top: 5px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .east {
|
||||
bottom: 10px;
|
||||
right: -5px;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .west {
|
||||
bottom: 10px;
|
||||
left: -5px;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-right: 5px solid rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .up {
|
||||
top: -1px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
.tab-led-strip .indicators .down {
|
||||
bottom: 13px;
|
||||
right: 9px;
|
||||
}
|
||||
|
||||
.tab-led-strip .dir-n .north {display: inline;}
|
||||
.tab-led-strip .dir-s .south {display: inline;}
|
||||
.tab-led-strip .dir-e .east {display: inline;}
|
||||
.tab-led-strip .dir-w .west {display: inline;}
|
||||
.tab-led-strip .dir-u .up {display: inline;}
|
||||
.tab-led-strip .dir-d .down {display: inline;}
|
||||
|
||||
.tab-led-strip .controls {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 290px;
|
||||
height: calc((30px + 8px) * 16);
|
||||
}
|
||||
|
||||
.tab-led-strip .output {
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.tab-led-strip .tempOutput {
|
||||
color: #fff;
|
||||
background: rgba(0,0,0,.2);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation {
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation button {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.tab-led-strip .orientation .dirN {top: 0; left: 32px;}
|
||||
.tab-led-strip .orientation .dirS {bottom: 0; left: 32px;}
|
||||
.tab-led-strip .orientation .dirE {left: 64px; top: 32px;}
|
||||
.tab-led-strip .orientation .dirW {left: 0; top: 32px;}
|
||||
.tab-led-strip .orientation .dirU {right: 0; top: 15px;}
|
||||
.tab-led-strip .orientation .dirD {right: 0; bottom: 15px;}
|
||||
|
||||
.tab-led-strip .wires-remaining {
|
||||
float: right;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining div {
|
||||
font-size: 40px;
|
||||
color: #7AAE2D;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tab-led-strip .wires-remaining.error div {
|
||||
color: #FF5700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******JQUERYUI**********/
|
||||
|
||||
.tab-led-strip .ui-selected {
|
||||
box-shadow: inset 0 0 40px rgba(255, 255, 255, 1) !important;
|
||||
border: solid 1px #000 !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selecting {
|
||||
box-shadow: inset 0 0 40px rgba(255, 255, 255, 1) !important;
|
||||
border: solid 1px #000 !important;
|
||||
}
|
||||
|
||||
.tab-led-strip .ui-selectable-helper {
|
||||
background: rgba(0,0,0,.4);
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted white;
|
||||
}
|
||||
@ -1,46 +1,46 @@
|
||||
<div class="tab-led-strip">
|
||||
<div class="help">
|
||||
<p i18n="ledStripHelp"></p>
|
||||
</div>
|
||||
<div class="mainGrid"></div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="wires-remaining"><div></div>Remaining</div>
|
||||
<button class="funcClear">Clear selected</button>
|
||||
|
||||
<div class="section">LED Modes</div>
|
||||
<div class="modes">
|
||||
<button class="modeW w50">Warnings</button>
|
||||
<button class="modeF w50">Flight & Orientation</button><br>
|
||||
<button class="modeI w33">Indicator</button>
|
||||
<button class="modeA w33">Arm State</button>
|
||||
<button class="modeT w33">Thrust</button>
|
||||
</div>
|
||||
|
||||
<div class="section">LED Orientation</div>
|
||||
<div class="orientation">
|
||||
<button class="dirN">N</button>
|
||||
<button class="dirE">E</button>
|
||||
<button class="dirS">S</button>
|
||||
<button class="dirW">W</button>
|
||||
<button class="dirU">U</button>
|
||||
<button class="dirD">D</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">LED Strip Wiring</div>
|
||||
<div class="wiringMode">
|
||||
<button class="funcWire w100">Wire Ordering Mode</button>
|
||||
</div>
|
||||
<div class="wiringControls">
|
||||
<button class="funcWireClearSelect w50">Clear selected</button>
|
||||
<button class="funcWireClear w50">Clear ALL Wiring</button>
|
||||
</div>
|
||||
<p>Wiring order must be set before code will be generated</p>
|
||||
|
||||
<div class="output">
|
||||
<textarea class="tempOutput" readonly></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="tab-led-strip">
|
||||
<div class="help">
|
||||
<p i18n="ledStripHelp"></p>
|
||||
</div>
|
||||
<div class="mainGrid"></div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="wires-remaining"><div></div>Remaining</div>
|
||||
<button class="funcClear">Clear selected</button>
|
||||
|
||||
<div class="section">LED Modes</div>
|
||||
<div class="modes">
|
||||
<button class="modeW w50">Warnings</button>
|
||||
<button class="modeF w50">Flight & Orientation</button><br>
|
||||
<button class="modeI w33">Indicator</button>
|
||||
<button class="modeA w33">Arm State</button>
|
||||
<button class="modeT w33">Thrust</button>
|
||||
</div>
|
||||
|
||||
<div class="section">LED Orientation</div>
|
||||
<div class="orientation">
|
||||
<button class="dirN">N</button>
|
||||
<button class="dirE">E</button>
|
||||
<button class="dirS">S</button>
|
||||
<button class="dirW">W</button>
|
||||
<button class="dirU">U</button>
|
||||
<button class="dirD">D</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="section">LED Strip Wiring</div>
|
||||
<div class="wiringMode">
|
||||
<button class="funcWire w100">Wire Ordering Mode</button>
|
||||
</div>
|
||||
<div class="wiringControls">
|
||||
<button class="funcWireClearSelect w50">Clear selected</button>
|
||||
<button class="funcWireClear w50">Clear ALL Wiring</button>
|
||||
</div>
|
||||
<p>Wiring order must be set before code will be generated</p>
|
||||
|
||||
<div class="output">
|
||||
<textarea class="tempOutput" readonly></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -1,211 +1,211 @@
|
||||
'use strict';
|
||||
|
||||
TABS.led_strip = {
|
||||
totalLights: 0,
|
||||
currentWire: 0,
|
||||
wireMode: false,
|
||||
flightModes: ['w', 'f', 'i', 'a', 't'],
|
||||
ledOrientations: ['n', 'e', 's', 'w', 'u', 'd'],
|
||||
};
|
||||
|
||||
TABS.led_strip.initialize = function (callback, scrollPosition) {
|
||||
var self = this;
|
||||
|
||||
if (GUI.active_tab != 'led_strip') {
|
||||
GUI.active_tab = 'led_strip';
|
||||
googleAnalytics.sendAppView('LED Strip');
|
||||
}
|
||||
|
||||
function load_led_config() {
|
||||
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
|
||||
}
|
||||
|
||||
function load_html() {
|
||||
$('#content').load("./tabs/led_strip.html", process_html);
|
||||
}
|
||||
|
||||
load_led_config();
|
||||
|
||||
|
||||
function process_html() {
|
||||
|
||||
localize();
|
||||
|
||||
// Build Grid
|
||||
var theHTML = [];
|
||||
var theHTMLlength = 0;
|
||||
for (i=0; i<256; i++) {
|
||||
theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span></div>');
|
||||
}
|
||||
$('.mainGrid').html(theHTML.join(''));
|
||||
|
||||
$('.tempOutput').click(function() {
|
||||
$(this).select();
|
||||
});
|
||||
|
||||
// Clear Button
|
||||
$('.funcClear').click(function() {
|
||||
$('.gPoint').each(function() {
|
||||
if ($(this).is('.ui-selected')) {
|
||||
$(this).removeClass(function(index, theClass) {
|
||||
theClass = theClass.replace(/(^|\s)+gPoint\s+/, '');
|
||||
return theClass;
|
||||
});
|
||||
$(this).addClass('ui-selected');
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.controls button').removeClass('btnOn');
|
||||
});
|
||||
|
||||
|
||||
// Directional Buttons
|
||||
$('.orientation').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter) {
|
||||
if ($(that).is('.dir' + letter.toUpperCase())) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('dir-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mode Buttons
|
||||
$('.modes').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.flightModes.forEach(function(letter) {
|
||||
if ($(that).is('.mode' + letter.toUpperCase())) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('mode-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.funcWire').click(function() {
|
||||
(TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
|
||||
$(this).toggleClass('btnOn');
|
||||
$('.mainGrid').toggleClass('gridWire');
|
||||
});
|
||||
|
||||
$('.funcWireClearSelect').click(function() {
|
||||
$('.ui-selected').each(function() {
|
||||
var thisWire = $(this).find('.wire');
|
||||
if (thisWire.html() != '') {
|
||||
thisWire.html('');
|
||||
TABS.led_strip.currentWire--;
|
||||
}
|
||||
updateBulkCmd();
|
||||
});
|
||||
});
|
||||
|
||||
$('.funcWireClear').click(function() {
|
||||
TABS.led_strip.currentWire = 0;
|
||||
$('.gPoint .wire').html('');
|
||||
updateBulkCmd();
|
||||
});
|
||||
|
||||
|
||||
$('.mainGrid').selectable({
|
||||
filter: ' > div',
|
||||
stop: function() {
|
||||
$('.ui-selected').each(function() {
|
||||
if (TABS.led_strip.wireMode) {
|
||||
if ($(this).find('.wire').html() == '' && TABS.led_strip.currentWire < LED_STRIP.length) {
|
||||
$(this).find('.wire').html(TABS.led_strip.currentWire);
|
||||
TABS.led_strip.currentWire++;
|
||||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter) {
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
$('.dir' + letter.toUpperCase()).addClass('btnOn');
|
||||
} else {
|
||||
$('.dir' + letter.toUpperCase()).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.flightModes.forEach(function(letter) {
|
||||
if ($(that).is('.mode-' + letter)) {
|
||||
$('.mode' + letter.toUpperCase()).addClass('btnOn');
|
||||
} else {
|
||||
$('.mode' + letter.toUpperCase()).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.mainGrid').disableSelection();
|
||||
|
||||
updateBulkCmd();
|
||||
|
||||
if (callback) callback();
|
||||
}
|
||||
|
||||
function updateBulkCmd() {
|
||||
$('.tempOutput').empty();
|
||||
$('.tempOutput').html('# Copy and paste commands below into the CLI' + "\n\n");
|
||||
var counter = 0;
|
||||
|
||||
$('.gPoint').each(function(){
|
||||
if ($(this).is('[class*="mode"]')) {
|
||||
var gridNumber = ($(this).index() + 1);
|
||||
var row = Math.ceil(gridNumber / 16) - 1;
|
||||
var col = gridNumber/16 % 1 * 16 - 1;
|
||||
if (col < 0) {col = 15;}
|
||||
|
||||
var wireNumber = $(this).find('.wire').html();
|
||||
var ledModes = '';
|
||||
var directions = '';
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.flightModes.forEach(function(letter){
|
||||
if ($(that).is('.mode-' + letter)) {
|
||||
ledModes += letter.toUpperCase();
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter){
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
directions += letter.toUpperCase();
|
||||
}
|
||||
});
|
||||
|
||||
if (wireNumber != '') {
|
||||
$('.tempOutput').append('led ' + wireNumber + ' ' + col + ',' + row + ':' + directions + ':' + ledModes + "\n");
|
||||
}
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.totalLights = counter;
|
||||
|
||||
var remaining = LED_STRIP.length - TABS.led_strip.totalLights;
|
||||
if (remaining <= 0) {
|
||||
remaining = 0;
|
||||
$('.wires-remaining').addClass('error');
|
||||
} else {
|
||||
$('.wires-remaining').removeClass('error');
|
||||
}
|
||||
$('.wires-remaining div').html(remaining);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TABS.led_strip.cleanup = function (callback) {
|
||||
if (callback) callback();
|
||||
};
|
||||
'use strict';
|
||||
|
||||
TABS.led_strip = {
|
||||
totalLights: 0,
|
||||
currentWire: 0,
|
||||
wireMode: false,
|
||||
flightModes: ['w', 'f', 'i', 'a', 't'],
|
||||
ledOrientations: ['n', 'e', 's', 'w', 'u', 'd'],
|
||||
};
|
||||
|
||||
TABS.led_strip.initialize = function (callback, scrollPosition) {
|
||||
var self = this;
|
||||
|
||||
if (GUI.active_tab != 'led_strip') {
|
||||
GUI.active_tab = 'led_strip';
|
||||
googleAnalytics.sendAppView('LED Strip');
|
||||
}
|
||||
|
||||
function load_led_config() {
|
||||
MSP.send_message(MSP_codes.MSP_LED_STRIP_CONFIG, false, false, load_html);
|
||||
}
|
||||
|
||||
function load_html() {
|
||||
$('#content').load("./tabs/led_strip.html", process_html);
|
||||
}
|
||||
|
||||
load_led_config();
|
||||
|
||||
|
||||
function process_html() {
|
||||
|
||||
localize();
|
||||
|
||||
// Build Grid
|
||||
var theHTML = [];
|
||||
var theHTMLlength = 0;
|
||||
for (i=0; i<256; i++) {
|
||||
theHTML[theHTMLlength++] = ('<div class="gPoint"><div class="indicators"><span class="north"></span><span class="south"></span><span class="west"></span><span class="east"></span><span class="up">U</span><span class="down">D</span></div><span class="wire"></span></div>');
|
||||
}
|
||||
$('.mainGrid').html(theHTML.join(''));
|
||||
|
||||
$('.tempOutput').click(function() {
|
||||
$(this).select();
|
||||
});
|
||||
|
||||
// Clear Button
|
||||
$('.funcClear').click(function() {
|
||||
$('.gPoint').each(function() {
|
||||
if ($(this).is('.ui-selected')) {
|
||||
$(this).removeClass(function(index, theClass) {
|
||||
theClass = theClass.replace(/(^|\s)+gPoint\s+/, '');
|
||||
return theClass;
|
||||
});
|
||||
$(this).addClass('ui-selected');
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.controls button').removeClass('btnOn');
|
||||
});
|
||||
|
||||
|
||||
// Directional Buttons
|
||||
$('.orientation').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter) {
|
||||
if ($(that).is('.dir' + letter.toUpperCase())) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('dir-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Mode Buttons
|
||||
$('.modes').on('click', 'button', function() {
|
||||
var that = this;
|
||||
if ($('.ui-selected').length > 0) {
|
||||
TABS.led_strip.flightModes.forEach(function(letter) {
|
||||
if ($(that).is('.mode' + letter.toUpperCase())) {
|
||||
$(that).toggleClass('btnOn');
|
||||
$('.ui-selected').toggleClass('mode-' + letter);
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
}
|
||||
});
|
||||
|
||||
$('.funcWire').click(function() {
|
||||
(TABS.led_strip.wireMode) ? TABS.led_strip.wireMode=false : TABS.led_strip.wireMode=true;
|
||||
$(this).toggleClass('btnOn');
|
||||
$('.mainGrid').toggleClass('gridWire');
|
||||
});
|
||||
|
||||
$('.funcWireClearSelect').click(function() {
|
||||
$('.ui-selected').each(function() {
|
||||
var thisWire = $(this).find('.wire');
|
||||
if (thisWire.html() != '') {
|
||||
thisWire.html('');
|
||||
TABS.led_strip.currentWire--;
|
||||
}
|
||||
updateBulkCmd();
|
||||
});
|
||||
});
|
||||
|
||||
$('.funcWireClear').click(function() {
|
||||
TABS.led_strip.currentWire = 0;
|
||||
$('.gPoint .wire').html('');
|
||||
updateBulkCmd();
|
||||
});
|
||||
|
||||
|
||||
$('.mainGrid').selectable({
|
||||
filter: ' > div',
|
||||
stop: function() {
|
||||
$('.ui-selected').each(function() {
|
||||
if (TABS.led_strip.wireMode) {
|
||||
if ($(this).find('.wire').html() == '' && TABS.led_strip.currentWire < LED_STRIP.length) {
|
||||
$(this).find('.wire').html(TABS.led_strip.currentWire);
|
||||
TABS.led_strip.currentWire++;
|
||||
}
|
||||
}
|
||||
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter) {
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
$('.dir' + letter.toUpperCase()).addClass('btnOn');
|
||||
} else {
|
||||
$('.dir' + letter.toUpperCase()).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.flightModes.forEach(function(letter) {
|
||||
if ($(that).is('.mode-' + letter)) {
|
||||
$('.mode' + letter.toUpperCase()).addClass('btnOn');
|
||||
} else {
|
||||
$('.mode' + letter.toUpperCase()).removeClass('btnOn');
|
||||
}
|
||||
});
|
||||
|
||||
updateBulkCmd();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.mainGrid').disableSelection();
|
||||
|
||||
updateBulkCmd();
|
||||
|
||||
if (callback) callback();
|
||||
}
|
||||
|
||||
function updateBulkCmd() {
|
||||
$('.tempOutput').empty();
|
||||
$('.tempOutput').html('# Copy and paste commands below into the CLI' + "\n\n");
|
||||
var counter = 0;
|
||||
|
||||
$('.gPoint').each(function(){
|
||||
if ($(this).is('[class*="mode"]')) {
|
||||
var gridNumber = ($(this).index() + 1);
|
||||
var row = Math.ceil(gridNumber / 16) - 1;
|
||||
var col = gridNumber/16 % 1 * 16 - 1;
|
||||
if (col < 0) {col = 15;}
|
||||
|
||||
var wireNumber = $(this).find('.wire').html();
|
||||
var ledModes = '';
|
||||
var directions = '';
|
||||
var that = this;
|
||||
|
||||
TABS.led_strip.flightModes.forEach(function(letter){
|
||||
if ($(that).is('.mode-' + letter)) {
|
||||
ledModes += letter.toUpperCase();
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.ledOrientations.forEach(function(letter){
|
||||
if ($(that).is('.dir-' + letter)) {
|
||||
directions += letter.toUpperCase();
|
||||
}
|
||||
});
|
||||
|
||||
if (wireNumber != '') {
|
||||
$('.tempOutput').append('led ' + wireNumber + ' ' + col + ',' + row + ':' + directions + ':' + ledModes + "\n");
|
||||
}
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
|
||||
TABS.led_strip.totalLights = counter;
|
||||
|
||||
var remaining = LED_STRIP.length - TABS.led_strip.totalLights;
|
||||
if (remaining <= 0) {
|
||||
remaining = 0;
|
||||
$('.wires-remaining').addClass('error');
|
||||
} else {
|
||||
$('.wires-remaining').removeClass('error');
|
||||
}
|
||||
$('.wires-remaining div').html(remaining);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
TABS.led_strip.cleanup = function (callback) {
|
||||
if (callback) callback();
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue