Browse Source

buttons and breath slider tweaks

Jean-Baptiste (Rorist) Aubort 5 years ago
parent
commit
4539b535b2
3 changed files with 25 additions and 35 deletions
  1. 3 2
      main.js
  2. 13 24
      style.css
  3. 9 9
      trigger.html

+ 3 - 2
main.js

@@ -211,12 +211,13 @@ function switchTheLight(red, green, blue) {
 }
 
 function changeBreathSpeed(){
-    document.getElementById("breathValue").innerText = slider.value;
+    document.getElementById("breathValue").innerText = slider.value + ' ms';
 }
 
 function setTheBreathSpeed() {
     "set strict";
-    var breathValue = slider.value;
+    var breathValue = slider.value.substring(0, -3);
+    console.log(breathValue);
     var requestUrl = "http://led.fixme.ch/rgb/";
     var requestObject = new XMLHttpRequest();
     requestObject.open("POST", requestUrl, true);

+ 13 - 24
style.css

@@ -86,27 +86,15 @@ all the button
     vertical-align: middle;
 }
 
+.btn {
+    margin: 5px 5px 0 0;
+}
+
 .btn-open {
     display: block;
     margin-top: 20px;
 }
 
-.btn-red {
-    background-color: #aa0000;
-}
-
-.btn-green {
-    background-color: #00aa00;
-}
-
-.btn-police {
-    background-color: #0000aa;
-}
-
-.btn-blue {
-    background-color: #0000aa;
-}
-
 .text-input {
     font-size: 1.5em;
     padding: 2px;
@@ -122,13 +110,6 @@ all the button
 .separator:before {
   content: ":";
 }
-.numbers {
-    width: 200px;
-    text-align: center;
-    border: 2px solid #eeeeee;
-    padding: 10px 10px;
-    margin: 5px;
-}
 
 .breathSlider{
     padding: 0;
@@ -136,7 +117,6 @@ all the button
 }
 
 #breathBox span {
-    width: 48px;
     display: inline-block;
 }
 
@@ -144,6 +124,15 @@ all the button
     margin: 5px 0;
 }
 
+.numbers {
+    width: 200px;
+    text-align: center;
+    border: 2px solid #eeeeee;
+    padding: 10px 10px;
+    margin: 5px;
+}
+
+
 /* Make it a marquee */
 .marquee {
     overflow: hidden;

+ 9 - 9
trigger.html

@@ -23,7 +23,7 @@
                     onkeyup="checkHours(this)" value="1">
                 <span class="glyphicon glyphicon-plus-sign" onclick="changeHour(1)"></span>
                 <input type="button" onclick="openSpace()" value="Open"
-                    class="btn btn-default btn-open" id="openbutton" disabled>
+                    class="btn btn-lg btn-default btn-open" id="openbutton" disabled>
             </form>
         </div>
         <div id="close-block">
@@ -49,19 +49,19 @@
 
     <div class="col-md-6">
         <h2>LED Lights</h2>
-        <input class="btn btn-default btn-red" type="button" onclick="switchTheLightColor('red')" value="RED">
-        <input class="btn btn-default btn-green" type="button" onclick="switchTheLightColor('green')" value="GREEN">
-        <input class="btn btn-default btn-blue" type="button" onclick="switchTheLightColor('blue')" value="BLUE">
-        <input class="btn btn-default" type="button" onclick="switchTheLightOn()" value="WHITE">
-        <input class="btn btn-default" type="button" onclick="switchTheLightOff()" value="OFF">
-        <input class="btn btn-default btn-police" type="button" onclick="switchTheLightToPolice()" value="Police!">
+        <input class="btn btn-lg btn-danger btn-red" type="button" onclick="switchTheLightColor('red')" value="RED">
+        <input class="btn btn-lg btn-success" type="button" onclick="switchTheLightColor('green')" value="GREEN">
+        <input class="btn btn-lg btn-primary" type="button" onclick="switchTheLightColor('blue')" value="BLUE">
+        <input class="btn btn-lg btn-default" type="button" onclick="switchTheLightOn()" value="WHITE">
+        <input class="btn btn-lg btn-default" type="button" onclick="switchTheLightOff()" value="OFF">
+        <input class="btn btn-lg btn-warning" type="button" onclick="switchTheLightToPolice()" value="Police!">
         <br/>
         <div id="breathBox">
-            <label for="breathSlider">Breath:</label>
+            <h3 for="breathSlider">Breathing leds:</h3>
             <input type="range" value=0 min=0 max=5000 step=10
                 onchange="changeBreathSpeed()" onmouseup="setTheBreathSpeed()"
                 id="breathSlider" class="breathSlider">
-            <span id="breathValue">0</span>
+            <span id="breathValue">0 ms</span>
         </div>
     </div>
 </div>