feat(docs): add backlight to power profiler

3 files changed, 145 insertions, 2 deletions

diff --git a/docs/src/components/power-estimate.js b/docs/src/components/power-estimate.js
index 2619862..2c0a53c 100644
--- a/docs/src/components/power-estimate.js
+++ b/docs/src/components/power-estimate.js
@@ -6,7 +6,12 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import { displayPower, underglowPower, zmkBase } from "../data/power";
+import {
+  displayPower,
+  underglowPower,
+  backlightPower,
+  zmkBase,
+} from "../data/power";
 import "../css/power-estimate.css";
 
 // Average monthly discharge percent
@@ -82,6 +87,7 @@ function PowerEstimate({
   batteryMilliAh,
   usage,
   underglow,
+  backlight,
   display,
 }) {
   if (!board || !board.powerSupply.type || !batteryMilliAh) {
@@ -180,6 +186,31 @@ function PowerEstimate({
     });
   }
 
+  if (backlight.backlightEnabled) {
+    let backlightMicroA =
+      ((board.powerSupply.outputVoltage - backlight.backlightVoltage) /
+        backlight.backlightResistance) *
+      1000000 *
+      backlight.backlightBrightness *
+      backlight.backlightQuantity;
+
+    if (
+      backlight.backlightBrightness > 0 &&
+      backlight.backlightBrightness < 1
+    ) {
+      backlightMicroA += backlightPower.pwmPower;
+    }
+
+    const backlightMicroW = backlightMicroA * voltageEquivalent;
+    const backlightUsage = backlightMicroW * (1 - usage.percentAsleep);
+
+    totalUsage += backlightUsage;
+    powerUsage.push({
+      title: "Backlight",
+      usage: backlightUsage,
+    });
+  }
+
   if (display.displayEnabled && display.displayType) {
     const { activePercent, active, sleep } = displayPower[display.displayType];
 
@@ -260,6 +291,7 @@ PowerEstimate.propTypes = {
   batteryMilliAh: PropTypes.number,
   usage: PropTypes.Object,
   underglow: PropTypes.Object,
+  backlight: PropTypes.Object,
   display: PropTypes.Object,
 };
 
diff --git a/docs/src/data/power.js b/docs/src/data/power.js
index 5fe5912..28e4b0e 100644
--- a/docs/src/data/power.js
+++ b/docs/src/data/power.js
@@ -71,6 +71,18 @@ export const underglowPower = {
   ledOff: 460, // Quiescent current of a WS2812B
 };
 
+export const backlightLEDs = {
+  White: 3.2,
+  Blue: 3.0,
+  Green: 2.2,
+  Yellow: 2.1,
+  Red: 1.8,
+};
+
+export const backlightPower = {
+  pwmPower: 510, // Estimated power consumption of PWM module
+};
+
 export const displayPower = {
   // Based on GoodDisplay's 1.02in epaper
   EPAPER: {
diff --git a/docs/src/pages/power-profiler.js b/docs/src/pages/power-profiler.js
index e969992..c230257 100644
--- a/docs/src/pages/power-profiler.js
+++ b/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`}
@@ -209,6 +225,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>
                   <input
                     checked={displayEnabled}
@@ -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 }}
             />
           )}