|
@@ -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>";
|