Added color

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/branches/0.7@2942 b32b6428-25c9-4566-ad07-03861ab6144f

apps/dashboard/xaal/dashboard/static/tags/lamp_color.tag

+<lamp_color>
+
+<div>
+<label class="switch">
+  <input type="checkbox" onchange={ chk } checked={checked}>
+  <span class="slider round" id="{ switch_id }"></span>
+</label>
+<button class="modal_btn" id="{ btn_id }" onclick={ btn }>&nbsp;</button>
+</div>
+
+<dialog id="{dialog_id}" class="lamp_modal">
+  <input type="color" id="{color_input_id}" onchange={ color_input }/>
+</dialog>
+
+<script>
+  this.addr = opts.xaal_addr
+  this.switch_id = 'sw_'+ new Date().getTime()
+  this.dialog_id = 'dialog_'+ new Date().getTime()
+  this.btn_id    = 'btn_'+new Date().getTime()
+  this.color_input_id = 'color_'+new Date().getTime()
+
+  //console.log(new Date().getTime())
+
+  receive(data) {
+    state = data['attributes']['light']
+    hsv = data['attributes']['hsv']
+    if (state == true) {
+      this.checked = true
+
+      rgb=hsv2rgb(hsv[0], hsv[1], hsv[2])
+    
+      r = Math.round(rgb[0] * 255)
+      g = Math.round(rgb[1] * 255)
+      b = Math.round(rgb[2] * 255)
+
+      color=rgbToHex(r,g,b)
+
+      //_("#"+this.switch_id).style.background = color
+      _("#"+this.btn_id).style.background = color
+      _("#"+this.color_input_id).value = color
+
+    }
+    else {
+      this.checked = false
+    }
+    this.update()
+  }
+
+  /* ============================================================ */
+  /* Color functions                                              */
+  /* ============================================================ */
+  function hsv2rgb(h,s,v) {                              
+    let f= (n,k=(n+h/60)%6) => v - v*s*Math.max( Math.min(k,4-k,1), 0);     
+    return [f(5),f(3),f(1)];       
+  }   
+
+  function rgb2hsv(r,g,b) {
+    let v=Math.max(r,g,b), c=v-Math.min(r,g,b);
+    let h= c && ((v==r) ? (g-b)/c : ((v==g) ? 2+(b-r)/c : 4+(r-g)/c)); 
+    return [60*(h<0?h+6:h), v&&c/v, v];
+  }
+
+
+  function componentToHex(c) {
+    var hex = c.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+  }
+  
+  function rgbToHex(r, g, b) {
+    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+  }
+
+  function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
+  }
+
+  /* ============================================================ */
+  /* Buttons callbacks                                            */
+  /* ============================================================ */
+  chk(e) {
+    if (e.target.checked == true)
+      sio_send_request(this.addr,'turn_on',{})
+    else
+      sio_send_request(this.addr,'turn_off',{})
+      //_("#"+this.switch_id).style.background = 'var(--color2)'
+  }
+
+  btn(e) {
+    //_("#"+this.dialog_id).hidden = false
+    _("#"+this.dialog_id).showModal()
+  }
+
+  color_input(e) {
+    color = e.target.value
+    //_("#"+this.switch_id).style.background = color
+    _("#"+this.btn_id).style.background = color
+
+    rgb = hexToRgb(color)
+    r = rgb2hsv(rgb[0]/255,rgb[1]/255,rgb[2]/255)
+    sio_send_request(this.addr,'set_hsv',{'hsv':r})
+  }
+
+
+</script>
+
+<style>
+.modal_btn {
+  background-color: var(--color2);
+  border : none;
+  text-decoration: none;
+  border-radius: 2px;
+  display: inline-block;
+  height: 20px;
+}
+
+.modal_btn:hover {
+    background-color : var(--color3);
+}
+
+.lamp_modal {
+  background-color: var(--color4);
+  width: 300px;
+  border: 1px solid var(--color2);
+}
+
+</style>
+
+</lamp_color>