config and brightness are checked on page load

web/index.php

@@ -33,7 +33,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $passthru = array(
         // POST_VARIABLE => [buffer-length, api-endpoint]
         "color" => array(6, "rgb"),
-        "brightness" => array(2, "brightness")
+        "brightness" => array(2, "brightness"),
+        "quickGamma" => array(1, "cfg"),
+        "sCurveGamma" => array(1, "cfg"),
+        "colorCorrection" => array(1, "cfg")
     ); 
     // execute the first matching command
     foreach($passthru as $k => $v) {
@@ -114,7 +117,8 @@ async function post(url = '', kw = 'key', data = 'data') {
  *  [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
  *  parameters.
  */
-function get(arg) { return fetch('?' + new URLSearchParams({req:arg})).then((v) => v.text()); }
+async function get(arg) { return await fetch('?' + new URLSearchParams({req:arg})).then((v) => v.text()); }
+
 function getColor(selectedObj = null) {
     // get the color from the esp8266, returns as decimal [0..255] R,G,B
     let dec = get('color');
@@ -126,7 +130,7 @@ function getColor(selectedObj = null) {
     // otherwise set backround and text of the selected color object
     rgb.then((v) => {
         let a = [v.red, v.green, v.blue];
-        color = 'rgb(' + a.join(',') + ')';
+        color = 'rgb(' + a.join(', ') + ')';
         let off = a.every((x) => 0 === x);
         // use gray as a placeholder for 'lights off'
         selectedObj.style.background = off ?'rgb(211, 211, 211)' :color;
@@ -142,7 +146,7 @@ function getBrightness(sliderObj = null) {
     // otherwise set slider object's value property to brightness when the promise resolves
     brightness.then((i) => { sliderObj.value = i; });
 }
-function getCorrection() {
+function getCorrection(inputs = null) {
     /*  get the correction config from the esp8266, returns as cfg [ setting:[0..1], ... setting_n:[0..1]]
      *  settings currently include:
      *      quickGamma - corrects for human perception using quadratic function
@@ -154,8 +158,26 @@ function getCorrection() {
      *  + colorCorrection may be turned on or off, and can be applied to either
      *    gamma correction schemes
      */
-    var cfg = get('correction');
-    return cfg;
+    let cfg = get('correction');
+    // split into config options
+    let options = cfg.then((v) => {
+        let temp = {};
+        // convert to lower-case and keep only alpha-numeric
+        v = v.toLowerCase().replace(/[^a-z0-9]/gi, '');
+        temp.quickGamma =       '0' !== v.split('quickgamma')[1][0];
+        temp.sCurveGamma =      '0' !== v.split('scurvegamma')[1][0];
+        temp.colorCorrection =  '0' !== v.split('colorcorrection')[1][0];
+        // quick and sCurve are mutually exclusive, though they can both be off
+        temp.noneGamma = temp.quickGamma === temp.sCurveGamma;
+        return temp;
+    });
+    options.then((o) => console.log('esp8266 settings: ', o));
+    // by default, return as Promise that will resolve to config options object
+    if(null === inputs) return options;
+    // otherwise set options
+    for(let i = 0; i < inputs.length; i++) options.then((o) => {
+        inputs[i].checked = Object.hasOwn(o, inputs[i].id) ?o[inputs[i].id] :false;
+    });
 }
 </script>
 ";
@@ -298,6 +320,9 @@ slider.min = 1;
 slider.max = 15;
 slider.value = 7;
 slider.step = 1;
+var brightnessText = document.createElement('div');
+brightnessText.innerHTML = 'brightness';
+document.body.appendChild(brightnessText);
 document.body.appendChild(slider);
 
 // set the inital value of the slider to whatever the current brightness value
@@ -325,5 +350,57 @@ slider.addEventListener('change', (event) => slid(event, slidercb));
 </script>
 ";
 
+// add a checkbox and radio set to select config options for color correction
+echo "
+<script>
+function addChoice(inputs, parent, name, value, alternate = null, type = null) {
+    var inp = document.createElement('input');
+    inp.type = null === type ?'radio' :type;
+    let f = value.replace(/[^a-zA-Z]/gi, '') + name.charAt(0).toUpperCase() + name.slice(1);
+    inp.id = f;
+    inp.name = name;
+    inp.value = f;
+    var lab = document.createElement('label');
+    lab.for = f;
+    lab.innerHTML = null === alternate ?value :alternate;
+    parent.appendChild(inp);
+    parent.appendChild(lab);
+    inputs.push(inp);
+}
+function configChange(e) {
+    /*  check for noneGamma special radio button, unfortunately server does not
+     *  have an option to turn off both sCurveGamma and quickGamma, but we
+     *  want to provide this to end users...
+     */
+    if('noneGamma' === e.target.id) {
+        post('', 'quickGamma', '0').then((d) => console.log(d.text()));
+        post('', 'sCurveGamma', '0').then((d) => console.log(d.text()));
+    } else {
+        post('', e.target.id, e.target.checked ?'1' :'0').then((d) => console.log(d.text()));
+    }
+    //console.log(e);
+}
+var gamma = document.createElement('fieldest');
+var legend = document.createElement('legend');
+gamma.appendChild(legend);
+let inputs = [];
+addChoice(inputs, gamma, 'gamma', 'none');
+addChoice(inputs, gamma, 'gamma', 'sCurve');
+addChoice(inputs, gamma, 'gamma', 'quick');
+addChoice(inputs, gamma, 'correction', 'color', 'led-bias', 'checkbox');
+legend.innerHTML = 'color correction options';
+
+document.body.appendChild(gamma);
+
+// set config options from the esp8266
+getCorrection(inputs);
+
+// add listeners to each color correction config option
+for(let i = 0; i < inputs.length; i++) {
+    inputs[i].addEventListener('change', (event) => configChange(event));
+}
+</script>
+";
+
 echo "</body>";
 echo "</html>";