ui: Add color picker using input object

This could be improved later on each color change,
but its safe not not flood with MQTT events for now

Change-Id: I5950a0455f897088c520f3164c916a83314670a0
Origin: https://github.com/tizenteam/anavi-light-demo
Signed-off-by: Philippe Coval <rzr@users.sf.net>

index.html

@@ -76,7 +76,7 @@ <h2>ANAVI Light Demo</h2>
   <p>Connected to <span id="txtHost" class="txt"></span> on port <span id="txtPort" class="txt"></span></p>
   <p>Machine ID: <span id="txtMachineId" class="txt"></span></p>
   </div>
-  <p>Select color: </p>
+  <p>Select color: <input type="color" id="buttonColorCustom" /></p>
   <div class="row">
     <button id="buttonColorMax" class="buttonColor"><i class="fa fa-sun"></i></button>
     <button id="buttonColorRed" class="buttonColor"><i class="far fa-lightbulb"></i></button>

js/demo.js

@@ -109,6 +109,17 @@ $(document).ready(function() {
          $("#pageConnect").removeClass('d-none');
     });
 
+    $('#buttonColorCustom').on('change', function (e) {
+        e.preventDefault();
+        console.log(e.target.value);
+        if(e.target.value.length == 7){
+            var r = parseInt(e.target.value.substr(1,2),16);
+            var g = parseInt(e.target.value.substr(3,2),16);
+            var b = parseInt(e.target.value.substr(5,2),16);
+            changeColor(r,g,b);
+        }
+    });
+
     $('#buttonColorMax').on('click', function (e) {
          e.preventDefault();
          changeColor(255, 255, 255);