Hi there. I would like to customise the UI for a usermod setting page. More specifically I would like to enhance the Analog_clock usermod aloowing the user to use a color picker for the hour/minute/second colors instead of setting these colors in Hex format (RRGGBB) which is quite a bad user experience.
Is there any way to mofigy the rendered html of inject js code modifying only the usermod header file (Analog_Clock.h in this case)?
Thanks
no.
however, you can add generic JS code for picker in html file and use that from your usermod.
thanks for the answer. By the way This is what I did (it may help someone else)
In settings_um.htm added in the function addField (around line 127). It’s not very elegant, it breaks many coding standards but it’s the less invasive
} else {
var c, t = typeof o;
var colorPicker = ""; //Added for colorPicker enhancements
switch (t) {
case "boolean":
t = "checkbox"; c = 'value="true"' + (o ? ' checked' : '');
break;
case "number":
c = `value="${o}"`;
if (f.substr(-3)==="pin") {
c += ` max="${d.max_gpio}" min="-1" class="s"`;
t = "int";
} else {
c += ' step="any" class="xxl"';
}
break;
default:
t = "text"; c = `value="${o}" style="width:250px;"`;
/** Added for colorPicker enhancements ************************
The colorpicker field will be adde if, in the name of the main field, there is the string "RRGGBB".
The colorPicker field will automatically sync the main field with the color value.
*******************************************/
colorIdentifier = "RRGGBB";
const regex = new RegExp(`\\b${colorIdentifier}\\b`);
if (regex.test(f)) colorPicker = `<input type="color" name="${k}:${f}" value="#${o}" onchange="setColorPicker('${k}:${f}', this.value);" style="border-radius: 5px;width:50px; padding:0; margin:0; border:0; box-sizing:border-box;">`;
//end block for colorPicker enhancements
break;
}
urows += ` ${initCap(f)} `; //only show field (key is shown in grouping)
// https://stackoverflow.com/questions/11657123/posting-both-checked-and-unchecked-checkboxes
if (t=="checkbox") urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="false">`;
else if (!a) urows += `<input type="hidden" name="${k}:${f}${a?"[]":""}" value="${t}">`;
//Added ${colorPicker} for colorPicker enhancements
urows += `<input type="${t==="int"?"number":t}" name="${k}:${f}${a?"[]":""}" ${c} oninput="check(this,'${k.substr(k.indexOf(":")+1)}')">${colorPicker}<br>`;
}
You might want to explore the possibility to include your changes upstream by submitting a PR.
See How to properly submit a PR · Aircoookie/WLED Wiki · GitHub