feat(docs): Add power profiler

docs/docusaurus.config.js

@@ -29,6 +29,11 @@ module.exports = {
           position: "left",
         },
         { to: "blog", label: "Blog", position: "left" },
+        {
+          to: "power-profiler",
+          label: "Power Profiler",
+          position: "left",
+        },
         {
           href: "https://github.com/zmkfirmware/zmk",
           label: "GitHub",

docs/src/components/custom-board-form.js

@@ -0,0 +1,94 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function CustomBoardForm({
+  bindPsuType,
+  bindOutputV,
+  bindEfficiency,
+  bindQuiescent,
+  bindOtherQuiescent,
+}) {
+  return (
+    <div className="profilerSection">
+      <h3>Custom Board</h3>
+      <div className="row">
+        <div className="col col--4">
+          <div className="profilerInput">
+            <label>Power Supply Type</label>
+            <select {...bindPsuType}>
+              <option hidden value="">
+                Select a PSU type
+              </option>
+              <option value="LDO">LDO</option>
+              <option value="SWITCHING">Switching</option>
+            </select>
+          </div>
+        </div>
+        <div className="col col--4">
+          <div className="profilerInput">
+            <label>
+              Output Voltage{" "}
+              <span tooltip="Output Voltage of the PSU used by the system">
+                ⓘ
+              </span>
+            </label>
+            <input {...bindOutputV} type="range" min="1.8" step=".1" max="5" />
+            <span>{parseFloat(bindOutputV.value).toFixed(1)}V</span>
+          </div>
+          {bindPsuType.value === "SWITCHING" && (
+            <div className="profilerInput">
+              <label>
+                PSU Efficiency{" "}
+                <span tooltip="The estimated efficiency with a VIN of 3.8 and the output voltage entered above">
+                  ⓘ
+                </span>
+              </label>
+              <input
+                {...bindEfficiency}
+                type="range"
+                min=".50"
+                step=".01"
+                max="1"
+              />
+              <span>{Math.round(bindEfficiency.value * 100)}%</span>
+            </div>
+          )}
+        </div>
+        <div className="col col--4">
+          <div className="profilerInput">
+            <label>
+              PSU Quiescent{" "}
+              <span tooltip="The standby usage of the PSU">ⓘ</span>
+            </label>
+            <div className="inputBox">
+              <input {...bindQuiescent} type="number" />
+              <span>µA</span>
+            </div>
+          </div>
+          <div className="profilerInput">
+            <label>
+              Other Quiescent{" "}
+              <span tooltip="Any other standby usage of the board (voltage dividers, extra ICs, etc)">
+                ⓘ
+              </span>
+            </label>
+            <div className="inputBox">
+              <input {...bindOtherQuiescent} type="number" />
+              <span>µA</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+CustomBoardForm.propTypes = {
+  bindPsuType: PropTypes.Object,
+  bindOutputV: PropTypes.Object,
+  bindEfficiency: PropTypes.Object,
+  bindQuiescent: PropTypes.Object,
+  bindOtherQuiescent: PropTypes.Object,
+};
+
+export default CustomBoardForm;

docs/src/components/power-estimate.js

@@ -0,0 +1,252 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { displayPower, underglowPower, zmkBase } from "../data/power";
+import "../css/power-estimate.css";
+
+// Average monthly discharge percent
+const lithiumIonMonthlyDischargePercent = 5;
+// Average voltage of a lithium ion battery based of discharge graphs
+const lithiumIonAverageVoltage = 3.8;
+// Average discharge efficiency of li-ion https://en.wikipedia.org/wiki/Lithium-ion_battery
+const lithiumIonDischargeEfficiency = 0.85;
+// Range of the discharge efficiency
+const lithiumIonDischargeEffiecincyRange = 0.05;
+
+// Proportion of time spent typing (keys being pressed down and scanning). Estimated to 2%.
+const timeSpentTyping = 0.02;
+
+// Nordic power profiler kit accuracy
+const measurementAccuracy = 0.2;
+
+const batVolt = lithiumIonAverageVoltage;
+
+const palette = [
+  "#bbdefb",
+  "#90caf9",
+  "#64b5f6",
+  "#42a5f5",
+  "#2196f3",
+  "#1e88e5",
+  "#1976d2",
+];
+
+function formatUsage(microWatts) {
+  if (microWatts > 1000) {
+    return (microWatts / 1000).toFixed(1) + "mW";
+  }
+
+  return Math.round(microWatts) + "µW";
+}
+
+function voltageEquivalentCalc(powerSupply) {
+  if (powerSupply.type === "LDO") {
+    return batVolt;
+  } else if (powerSupply.type === "SWITCHING") {
+    return powerSupply.outputVoltage / powerSupply.efficiency;
+  }
+}
+
+function formatMinutes(minutes, precision, floor) {
+  let message = "";
+  let count = 0;
+
+  let units = ["year", "month", "week", "day", "hour", "minute"];
+  let multiples = [60 * 24 * 365, 60 * 24 * 30, 60 * 24 * 7, 60 * 24, 60, 1];
+
+  for (let i = 0; i < units.length; i++) {
+    if (minutes >= multiples[i]) {
+      const timeCount = floor
+        ? Math.floor(minutes / multiples[i])
+        : Math.ceil(minutes / multiples[i]);
+      minutes -= timeCount * multiples[i];
+      count++;
+      message +=
+        timeCount + (timeCount > 1 ? ` ${units[i]}s ` : ` ${units[i]} `);
+    }
+
+    if (count == precision) return message;
+  }
+
+  return message || "0 minutes";
+}
+
+function PowerEstimate({
+  board,
+  splitType,
+  batterymAh,
+  usage,
+  underglow,
+  display,
+}) {
+  if (!board || !board.powerSupply.type || !batterymAh) {
+    return (
+      <div className="powerEstimate">
+        <h3>
+          <span>{splitType !== "standalone" ? splitType + ": " : " "}...</span>
+        </h3>
+        <div className="powerEstimateBar">
+          <div
+            className="powerEstimateBarSection"
+            style={{
+              width: "100%",
+              background: "#e0e0e0",
+              mixBlendMode: "overlay",
+            }}
+          ></div>
+        </div>
+      </div>
+    );
+  }
+
+  const powerUsage = [];
+  let totalUsage = 0;
+
+  const voltageEquivalent = voltageEquivalentCalc(board.powerSupply);
+
+  // Lithium ion self discharge
+  const lithiumDischarge =
+    ((parseInt(batterymAh) * 1000 * lithiumIonMonthlyDischargePercent) /
+      100 /
+      30 /
+      24) *
+    batVolt;
+  totalUsage += lithiumDischarge;
+
+  powerUsage.push({
+    title: "Battery Self Discharge",
+    usage: lithiumDischarge,
+  });
+
+  // Quiescent current
+  const quiescentTotal =
+    (parseInt(board.powerSupply.quiescent) + parseInt(board.otherQuiescent)) *
+    voltageEquivalent;
+  totalUsage += quiescentTotal;
+
+  powerUsage.push({
+    title: "Board Quiescent Usage",
+    usage: quiescentTotal,
+  });
+
+  // ZMK overall usage
+  const zmkUsage =
+    (zmkBase[splitType].idle +
+      (splitType !== "peripheral"
+        ? zmkBase.hostConnection * usage.bondedQty
+        : 0)) *
+    voltageEquivalent *
+    (1 - usage.percentAsleep);
+  totalUsage += zmkUsage;
+
+  powerUsage.push({
+    title: "ZMK Base Usage",
+    usage: zmkUsage,
+  });
+
+  // ZMK typing usage
+  const zmkTyping =
+    zmkBase[splitType].typing *
+    timeSpentTyping *
+    voltageEquivalent *
+    (1 - usage.percentAsleep);
+  totalUsage += zmkTyping;
+
+  powerUsage.push({
+    title: "ZMK Typing Usage",
+    usage: zmkTyping,
+  });
+
+  if (underglow.glowEnabled) {
+    const underglowUsage =
+      (underglowPower.firmware +
+        underglow.glowQuantity *
+          (underglow.glowBrightness *
+            (underglowPower.ledOn - underglowPower.ledOff) +
+            underglowPower.ledOff)) *
+      voltageEquivalent *
+      (1 - usage.percentAsleep);
+    totalUsage += underglowUsage;
+
+    powerUsage.push({
+      title: "RGB Underglow",
+      usage: underglowUsage,
+    });
+  }
+
+  if (display.displayEnabled && display.displayType) {
+    const { activePercent, active, sleep } = displayPower[display.displayType];
+    const displayUsage =
+      (active * activePercent + sleep * (1 - activePercent)) *
+      voltageEquivalent *
+      (1 - usage.percentAsleep);
+    totalUsage += displayUsage;
+
+    powerUsage.push({
+      title: "Display",
+      usage: displayUsage,
+    });
+  }
+
+  const estimatedMinutes = Math.round(
+    ((batterymAh * batVolt * lithiumIonDischargeEfficiency * 1000) /
+      totalUsage) *
+      60
+  );
+
+  const estimatedRange =
+    estimatedMinutes -
+    Math.round(
+      ((batterymAh *
+        batVolt *
+        (lithiumIonDischargeEfficiency - lithiumIonDischargeEffiecincyRange) *
+        1000) /
+        (totalUsage * (1 + measurementAccuracy))) *
+        60
+    );
+
+  return (
+    <div className="powerEstimate">
+      <h3>
+        <span>{splitType !== "standalone" ? splitType + ": " : " "}</span>
+        {formatMinutes(estimatedMinutes, 2, true)} (±
+        {formatMinutes(estimatedRange, 1, false).trim()})
+      </h3>
+      <div className="powerEstimateBar">
+        {powerUsage.map((p, i) => (
+          <div
+            key={p.title}
+            className={
+              "powerEstimateBarSection" + (i > 1 ? " rightSection" : "")
+            }
+            style={{
+              width: (p.usage / totalUsage) * 100 + "%",
+              background: palette[i],
+            }}
+          >
+            <div className="powerEstimateTooltipWrap">
+              <div className="powerEstimateTooltip">
+                <div>
+                  {p.title} - {Math.round((p.usage / totalUsage) * 100)}%
+                </div>
+                <div style={{ fontSize: ".875rem" }}>
+                  ~{formatUsage(p.usage)} estimated avg. consumption
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+PowerEstimate.propTypes = {
+  board: PropTypes.Object,
+  splitType: PropTypes.string,
+  batterymAh: PropTypes.number,
+  usage: PropTypes.Object,
+  underglow: PropTypes.Object,
+  display: PropTypes.Object,
+};
+
+export default PowerEstimate;