diff --git a/tabs/led_strip.css b/tabs/led_strip.css index c9f763e9..87312228 100644 --- a/tabs/led_strip.css +++ b/tabs/led_strip.css @@ -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; } \ No newline at end of file diff --git a/tabs/led_strip.html b/tabs/led_strip.html index 4c2b242c..cd04064e 100644 --- a/tabs/led_strip.html +++ b/tabs/led_strip.html @@ -1,46 +1,46 @@ -
Wiring order must be set before code will be generated
- -Wiring order must be set before code will be generated
+ +