feat(docs): add backlight to power profiler
This commit is contained in:
Alessandro Bortolin
Pete Johanson
parent
da41391b1f
commit
f8bf8bffd5
4 changed files with 146 additions and 2 deletions
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
/>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
"display",
|
||||
"encoder",
|
||||
"underglow",
|
||||
"backlight",
|
||||
"pointer"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue