feat(docs): add backlight to power profiler

This commit is contained in:
Alessandro Bortolin 2021-10-09 18:25:09 +02:00 committed by Pete Johanson
parent da41391b1f
commit f8bf8bffd5
4 changed files with 146 additions and 2 deletions

View File

@ -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,
};

View File

@ -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: {

View File

@ -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 }}
/>
)}

View File

@ -55,6 +55,7 @@
"display",
"encoder",
"underglow",
"backlight",
"pointer"
]
}