feat(docs): add backlight to power profiler

docs/src/pages/power-profiler.js

@@ -11,7 +11,7 @@ import styles from "./styles.module.css";
 import PowerEstimate from "../components/power-estimate";
 import CustomBoardForm from "../components/custom-board-form";
 import { useInput } from "../utils/hooks";
-import { zmkBoards } from "../data/power";
+import { zmkBoards, backlightLEDs } from "../data/power";
 import "../css/power-profiler.css";
 
 const Disclaimer = `This profiler makes many assumptions about typing
@@ -41,6 +41,17 @@ function PowerProfiler() {
   const { value: glowQuantity, bind: bindGlowQuantity } = useInput(10);
   const { value: glowBrightness, bind: bindGlowBrightness } = useInput(1);
 
+  const { value: backlightEnabled, bind: bindBacklightEnabled } =
+    useInput(false);
+  const { value: backlightQuantity, bind: bindBacklightQuantity } =
+    useInput(60);
+  const { value: backlightColor, bind: bindBacklightColor } = useInput("");
+  const { value: backlightVoltage, bind: bindBacklightVoltage } = useInput(2.2);
+  const { value: backlightResistance, bind: bindBacklightResistance } =
+    useInput(100);
+  const { value: backlightBrightness, bind: bindBacklightBrightness } =
+    useInput(1);
+
   const { value: displayEnabled, bind: bindDisplayEnabled } = useInput(false);
   const { value: displayType, bind: bindDisplayType } = useInput("");
 
@@ -63,6 +74,11 @@ function PowerProfiler() {
         }
       : zmkBoards[board];
 
+  const currentBacklightVoltage =
+    backlightColor === "custom"
+      ? backlightVoltage
+      : backlightLEDs[backlightColor || "White"];
+
   return (
     <Layout
       title={`ZMK Power Profiler`}
@@ -207,6 +223,68 @@ function PowerProfiler() {
                   </>
                 )}
               </div>
+              <div className="col col--4">
+                <div className="profilerInput">
+                  <label>Backlight</label>
+                  <input
+                    checked={backlightEnabled}
+                    id="backlight"
+                    {...bindBacklightEnabled}
+                    className="toggleInput"
+                    type="checkbox"
+                  />
+                  <label htmlFor="backlight" className="toggle">
+                    <div className="toggleThumb" />
+                  </label>
+                </div>
+                {backlightEnabled && (
+                  <>
+                    <div className="profilerInput">
+                      <label>LED Quantity</label>
+                      <div className="inputBox">
+                        <input {...bindBacklightQuantity} type="number" />
+                      </div>
+                    </div>
+                    <div className="profilerInput">
+                      <label>LED Forward Voltage</label>
+                      <select {...bindBacklightColor}>
+                        {Object.entries(backlightLEDs).map(([c, v]) => (
+                          <option key={c} value={c}>
+                            {c} ({v.toFixed(1)} V)
+                          </option>
+                        ))}
+                        <option value="custom">Custom</option>
+                      </select>
+                      {backlightColor === "custom" && (
+                        <div className="profilerInput">
+                          <div className="inputBox">
+                            <input {...bindBacklightVoltage} type="number" />
+                            <span>V</span>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                    <div className="profilerInput">
+                      <label>LED Resistance</label>
+                      <div className="inputBox">
+                        <input {...bindBacklightResistance} type="number" />
+                        <span>ohm</span>
+                      </div>
+                    </div>
+                    <div className="profilerInput">
+                      <label>Brightness</label>
+                      <input
+                        {...bindBacklightBrightness}
+                        type="range"
+                        min="0"
+                        step=".01"
+                        max="1"
+                      />
+                      <span>{Math.round(backlightBrightness * 100)}%</span>
+                    </div>
+                  </>
+                )}
+              </div>
               <div className="col col--4">
                 <div className="profilerInput">
                   <label>Display</label>
@@ -244,6 +322,13 @@ function PowerProfiler() {
                 batteryMilliAh={batteryMilliAh}
                 usage={{ bondedQty, percentAsleep }}
                 underglow={{ glowEnabled, glowBrightness, glowQuantity }}
+                backlight={{
+                  backlightEnabled,
+                  backlightVoltage: currentBacklightVoltage,
+                  backlightResistance,
+                  backlightBrightness,
+                  backlightQuantity,
+                }}
                 display={{ displayEnabled, displayType }}
               />
               <PowerEstimate
@@ -252,6 +337,13 @@ function PowerProfiler() {
                 batteryMilliAh={batteryMilliAh}
                 usage={{ bondedQty, percentAsleep }}
                 underglow={{ glowEnabled, glowBrightness, glowQuantity }}
+                backlight={{
+                  backlightEnabled,
+                  backlightVoltage: currentBacklightVoltage,
+                  backlightResistance,
+                  backlightBrightness,
+                  backlightQuantity,
+                }}
                 display={{ displayEnabled, displayType }}
               />
             </>
@@ -262,6 +354,13 @@ function PowerProfiler() {
               batteryMilliAh={batteryMilliAh}
               usage={{ bondedQty, percentAsleep }}
               underglow={{ glowEnabled, glowBrightness, glowQuantity }}
+              backlight={{
+                backlightEnabled,
+                backlightVoltage: currentBacklightVoltage,
+                backlightResistance,
+                backlightBrightness,
+                backlightQuantity,
+              }}
               display={{ displayEnabled, displayType }}
             />
           )}