Переглянути джерело

software brightness control for DIU UI

clementinecomputing 5 роки тому
батько
коміт
e13dac6bd1

+ 14 - 0
busunit/DIUv2/html/css/diustyles.css

@@ -31,8 +31,22 @@
   font-family: monospace;
 }
 
+#dim_overlay {
+  opacity:0.0;
+  background: #000000;
+  position:absolute;
+  height: 120vh;
+  width: 120vw;
+
+  margin-left: -5vw;
+  margin-top: -5vh;
+
+  pointer-events:none;
+}
+
 html, body {
   height: 100%;
+
 }
 
 body {

+ 21 - 1
busunit/DIUv2/html/index-ORG.html

@@ -31,6 +31,7 @@
   </head>
 
   <body id='body'>
+    <div id='dim_overlay'></div>
 
     <div id='ui_test'>
       X
@@ -124,7 +125,6 @@
 
       </div>
 
-      <br>
       <br>
       <br>
 
@@ -151,6 +151,26 @@
       <br>
       <br>
 
+      <div class='pure-g row4'>
+
+        <div class='pure-u-1-6 col'> <button class='bdisp' style='font-size:5vh;'>Brightness</button> </div>
+        <div class='pure-u-2-3 col'>
+          <input
+            id='ui_configuration_brightness'
+            type='range'
+            value='1.0'
+            min="0.2"
+            max="1.0"
+            step=".025"
+            onchange='_slider_change("configuration.brightness");'
+            oninput='_slider_change("configuration.brightness");' >
+        </div>
+        <div class='pure-u-1-6 col'> <button class='bdisp' style='font-size:5vh;' id='ui_configuration_displaybrightness'>100%</button> </div>
+
+
+
+      </div>
+
 
       <div class='pure-g row4'>
 

+ 32 - 0
busunit/DIUv2/html/js/diu_ui-ORG.js

@@ -331,6 +331,29 @@ function _update_login_time() {
 
 //------------
 
+// value is from [0,1]
+//
+function _process_brightness(brightness) {
+
+  // 0 opacity is completely clear, so (1.0) brightness (100% brightness).
+  //
+  var f_brightness = parseFloat(brightness);
+  var opacity = 1.0 - f_brightness;
+
+  // fail
+  //
+  if ((opacity < 0.0) || (opacity > 1.0)) { return {"type":"error", "msg":"opacity out of range"}; }
+
+  var ele = document.getElementById("dim_overlay");
+  ele.style.opacity = opacity;
+
+  ele = document.getElementById("ui_configuration_displaybrightness");
+  ival = Math.floor(f_brightness*100.0);
+  ele.innerHTML = "" + ival + "%";
+}
+
+//------------
+
 // volume is from [0,1]
 //
 function _process_volume(vol) {
@@ -347,6 +370,10 @@ function _slider_change(name) {
     ivol = Math.floor(val*100.0);
     _api_request("custom", {"function":"volume", "parameter":ivol});
   }
+  else if (name == "configuration.brightness") {
+    var val = document.getElementById("ui_configuration_brightness").value;
+    _process_brightness(val);
+  }
 }
 
 function _volume_test() {
@@ -1256,9 +1283,14 @@ function _calculate_ui_main_status_width_height() {
   return {"n_width": n_w, "n_height":n_h};
 }
 
+function _init_dim_overlay() {
+  var ele = document.getElementById("ui_dim_overlay");
+}
+
 function init() {
 
   _init_websocket();
+  _init_dim_overlay();
 
   window.setInterval(_update_display_time, 200);
   window.setInterval(_update_login_time, 200);