Implemented white channel for rgb.html

init.lua

@@ -4,26 +4,34 @@ if file.open("rgb", "r") then
   R = tonumber(file.readline())
   G = tonumber(file.readline())
   B = tonumber(file.readline())
+  W = tonumber(file.readline())
   file.close()
+  -- Initialize W in case it didn't exist. This would happen in case the state file is of old version
+  if W==nil then W=1023 end
+
   -- Do not go "back to black"; go to white instead
-  if R == 1023 and G == 1023 and B == 1023 then R=0 G=0 B=0 end
+  if R == 1023 and G == 1023 and B == 1023 and W == 1023 then R=0 G=0 B=0 W=0 end
   pwm.setup(5, 191, R)
   pwm.start(5)
   pwm.setup(6, 193, G)
   pwm.start(6)
   pwm.setup(7, 197, B)
   pwm.start(7)
+  pwm.setup(2, 197, W)
+  pwm.start(2)
 end
 
 function saveColor()
   local r = pwm.getduty(5)
   local g = pwm.getduty(6)
   local b = pwm.getduty(7)
-  if R ~= r or G ~= g or B ~= b then
+  local w = pwm.getduty(2)
+  if R ~= r or G ~= g or B ~= b or W ~= w then
     if file.open("rgb", "w") then
       file.writeline(r) R=r
       file.writeline(g) G=g
       file.writeline(b) B=b
+      file.writeline(w) W=w
       file.close()
     end
   end

rgb.html

@@ -58,6 +58,12 @@
 #blue::-moz-range-thumb {
   background: #0000FF;
 }
+#white::-webkit-slider-thumb {
+  background: #FFFFFF;
+}
+#white::-moz-range-thumb {
+  background: #FFFFFF;
+}
 .colorvalue {
   text-align: center;
 }
@@ -76,6 +82,10 @@
            <input type="range" min="0" max="1023" value="199" class="slider" id="blue"/>
       </p>
       <div class="colorvalue">B: <span id="blue_val">X</span></div>
+      <p class="slidercontainer">
+           <input type="range" min="0" max="1023" value="199" class="slider" id="white"/>
+      </p>
+      <div class="colorvalue">W: <span id="white_val">X</span></div>
   </body>
   <script type="text/javascript">
   (function (){
@@ -85,6 +95,8 @@
     var greenout = document.getElementById("green_val");
     var blueslider = document.getElementById("blue");
     var blueout = document.getElementById("blue_val");
+    var whiteslider = document.getElementById("white");
+    var whiteout = document.getElementById("white_val");
 
     var host = location.hostname;
     var canSend = false;
@@ -97,9 +109,11 @@
             redslider.value = 1023 - rgb[0];
             greenslider.value = 1023 - rgb[1];
             blueslider.value = 1023 - rgb[2];
+            whiteslider.value = 1023 - rgb[3];
             redout.innerHTML = redslider.value;
             greenout.innerHTML = greenslider.value;
             blueout.innerHTML = blueslider.value;
+            whiteout.innerHTML = whiteslider.value;
             canSend = true;
         }
     }
@@ -113,7 +127,8 @@
       var params = [
         'r=' + (1023-redslider.value),
         'g=' + (1023-greenslider.value),
-        'b=' + (1023-blueslider.value)
+        'b=' + (1023-blueslider.value),
+        'w=' + (1023-whiteslider.value)
       ].join('&');
       canSend = false;
       var req = new XMLHttpRequest();
@@ -147,6 +162,13 @@
         sendColour();
     }
 
+    whiteslider.oninput = function() {
+        whiteout.innerHTML = this.value;
+    }
+    whiteslider.onchange = function() {
+        sendColour();
+    }
+
   })();
   </script>
 </html>

rgb.lua

@@ -16,6 +16,11 @@ return function (connection, req)
     setduty(7, arg)
   end
 
+  arg = tonumber(req:match("w=([0-9]+)"))
+  if arg then
+    setduty(2, arg)
+  end
+
   -- Send back JSON response.
   connection:on("sent", function(c)
       c:close()