- Added mode/brightness/white temp on color-lamp

- Fixed z-index issue on buttons / menu / dialog




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

apps/dashboard/xaal/dashboard/static/css/btns.css

 .switch {
     position: relative;
     display: inline-block;
+    bottom: -1px;
     width: 55px;
     height: 20px;
+    z-index: 0;
 }
 
 .switch input {
@@ -30,7 +32,6 @@
     left: 0px;
     bottom: 0px;
     background-color: var(--color4);
-    -webkit-transition: .4s;
     transition: .4s;
 }
 

apps/dashboard/xaal/dashboard/static/css/site.css

@@ -2,6 +2,7 @@
     --color1: #00bbd7;
     --color2: #777;
     --color3: #ff005f;
+    --color4: #eef;
     --menu_bg: #333;
     --menu_bg_hover: #777;
 }
@@ -62,6 +63,7 @@ ul.menu {
     top: 0; /* Position the navbar at the top of the page */
     width: 100%; /* Full width */
     /* box-shadow: 0px 4px 4px #aaaaaa; */
+    z-index: 1;
 }
 
 ul.menu li {
@@ -147,7 +149,7 @@ ul.menu li a:hover {
 .grid {
     display: grid;
     grid-gap: 7px;
-	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr) ) ;
+	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr) ) ;
 	color: #444;
 }
 

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

@@ -5,56 +5,91 @@
   <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>
+  <button class="modal_btn" id="{ btn_id }" onclick={ open_model }>&nbsp;</button>
 </div>
 
 <dialog id="{dialog_id}" class="lamp_modal">
   <h3>Settings</h3>
+
+  <div>
+    <label class="label_modal">
+      <span>Mode</span>
+    </label>
+    <select id="{ mode_input_id }" onchange={ mode_input } >
+      <option value="white">White</option>
+      <option value="color">Color</option>
+    </select>
+  </div>
+
   <div>
-    <label>
+    <label class="label_modal">
       <span>Color</span>
-      <input type="color" id="{color_input_id}" onchange={ color_input }/>
     </label>
+    <input type="color" id="{color_input_id}" onchange={ color_input }/>
   </div>
+
+
   <div>
-    <label>
+    <label class="label_modal">
       <span>Brightness</span>
-      <input type="range" id="{brightness_input_id}" onchange={ brightness_input } min="0" max="100" value="{brightness}"/>
     </label>
+    <input type="range" id="{brightness_input_id}" onchange={ brightness_input } min="0" max="100" value="{brightness}"/>
   </div>
+
   <div>
-    <label>
-      <span>White Balance</span>
-      <input type="range" id="{white_balance_input_id}" onchange={ white_balance_input } min="0" max="100" value="{white_balance}"/>
+    <label class="label_modal">
+      <span>White Temperature</span>
     </label>
+    <input type="range" id="{white_balance_input_id}" onchange={ white_temperature_input } min="2000" max="6500" value="{white_temperature}"/>
+  </div>
+
+
+  <div class="modal_footer">
+    <input type="button" value="Close" onclick={ close_modal }/>
   </div>
 
 </dialog>
 
 <script>
   this.addr = opts.xaal_addr
-
-  this.dialog_id = objID('dialog')
-  this.btn_id    = objID('btn')
-  this.color_input_id = objID('color_input')
+  // display ids
+  this.dialog_id = objID()
+  this.btn_id    = objID()
+  this.mode_input_id = objID()
+  this.color_input_id = objID()
   
   receive(data) {
+    if (this.addr == '41998f5e-b1a6-11ec-b598-d6bd5fe18701') {
+      //_("#"+this.dialog_id).show()
+      dbg = _("#"+this.mode_input_id)
+    }
+
     state = data['attributes']['light']
     hsv = data['attributes']['hsv']
     mode = data['attributes']['mode']
+
+    this.white_temperature = data['attributes']['white_temperature']
+    this.brightness = data['attributes']['brightness']
+
+
+    if (mode == 'color') {
+      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.btn_id).style.background = color
+      _("#"+this.color_input_id).value = color
+      _('#'+this.mode_input_id).value = 'color'
+    } else {
+      _("#"+this.btn_id).style.background = 'var(--color2)'
+      _('#'+this.mode_input_id).value = 'white'
+    }
+
     if (state == true) {
       this.checked = true
 
-      if (mode == 'color') {
-        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.btn_id).style.background = color
-        _("#"+this.color_input_id).value = color
-      }
     }
     else {
       this.checked = false
@@ -107,8 +142,12 @@
       sio_send_request(this.addr,'turn_off',{})
   }
 
-  btn(e) {
-    _("#"+this.dialog_id).showModal()
+  open_model(e) {
+    _("#"+this.dialog_id).show()
+  }
+
+  close_modal(e) {
+    _("#"+this.dialog_id).close()
   }
 
   color_input(e) {
@@ -118,6 +157,22 @@
     rgb = hexToRgb(color)
     r = rgb2hsv(rgb[0]/255,rgb[1]/255,rgb[2]/255)
     sio_send_request(this.addr,'set_hsv',{'hsv':r})
+ }
+
+  mode_input(e) {
+    mode = e.target.value
+    console.log(mode)
+    sio_send_request(this.addr,'set_mode',{'mode':mode})
+  }
+
+  brightness_input(e) {
+    value = e.target.value
+    sio_send_request(this.addr,'set_brightness',{'brightness':value})
+  }
+
+  white_temperature_input(e) {
+    value = e.target.value
+    sio_send_request(this.addr,'set_white_temperature',{'white_temperature':value})
   }
 
 </script>
@@ -139,10 +194,21 @@
 .lamp_modal {
   /*color: var(--color2); */
   background-color: var(--color4);
-  width: 300px;
+  width: 400px;
   border: 1px solid var(--color3);
+  z-index: 100;
 }
 
-</style>
 
+.label_modal {
+  display: inline-block;
+  width: 150px;
+}​
+
+.modal_footer {
+  border: 1px solid red;
+  padding: 10px;
+}
+
+</style>
 </lamp_color>