administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-06 23:27:36 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: update shm calculator tips && style

Browse Source
This commit is contained in:
ZhaiSoul 2026-03-21 17:53:20 +08:00
parent 73fe8f97d4
commit e040500410
2 changed files with 59 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
docs/src/components/ShmCalculator/index.jsx
View File

@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Admonition from "@theme/Admonition";
import styles from "./styles.module.css"; import styles from "./styles.module.css";
const ShmCalculator = () => { const ShmCalculator = () => {
@ -71,35 +72,56 @@ const ShmCalculator = () => {
count count
</p> </p>
<div className={styles.row}> <Admonition type="note">
<div className={styles.formGroup}> The resolution below is the <strong>detect</strong> stream resolution,
<label htmlFor="width" className={styles.label}> not the <strong>record</strong> stream resolution. SHM size is
Width: determined by the detect resolution used for object detection.{" "}
</label> <a href="/frigate/camera_setup#choosing-a-detect-resolution">
<input Learn more about choosing a detect resolution.
id="width" </a>
type="number" </Admonition>
min="1"
placeholder="e.g.: 1280" {width * height > 1280 * 720 && (
className={styles.input} <Admonition type="warning">
value={width} Using a detect resolution higher than 720p is not recommended.
onChange={(e) => setWidth(Number(e.target.value))} Higher resolutions do not improve object detection accuracy and will
/> consume significantly more resources.
</Admonition>
)}
<div className="row">
<div className="col col--6">
<div className={styles.formGroup}>
<label htmlFor="width" className={styles.label}>
Width:
</label>
<input
id="width"
type="number"
min="1"
placeholder="e.g.: 1280"
className={styles.input}
value={width}
onChange={(e) => setWidth(Number(e.target.value))}
/>
</div>
</div> </div>
<div className={styles.formGroup}> <div className="col col--6">
<label htmlFor="height" className={styles.label}> <div className={styles.formGroup}>
Height: <label htmlFor="height" className={styles.label}>
</label> Height:
<input </label>
id="height" <input
type="number" id="height"
min="1" type="number"
placeholder="e.g.: 720" min="1"
className={styles.input} placeholder="e.g.: 720"
value={height} className={styles.input}
onChange={(e) => setHeight(Number(e.target.value))} value={height}
/> onChange={(e) => setHeight(Number(e.target.value))}
/>
</div>
</div> </div>
</div> </div>
@ -146,41 +168,29 @@ const ShmCalculator = () => {
<h4>Common Presets</h4> <h4>Common Presets</h4>
<div className={styles.presetButtons}> <div className={styles.presetButtons}>
<button <button
className={styles.presetButton} className="button button--outline button--primary button--sm"
onClick={() => applyPreset(640, 360, 1)}
>
640x360 × 1
</button>
<button
className="button button--outline button--primary button--sm"
onClick={() => applyPreset(1280, 720, 1)} onClick={() => applyPreset(1280, 720, 1)}
> >
1280x720 × 1 1280x720 × 1
</button> </button>
<button <button
className={styles.presetButton} className="button button--outline button--primary button--sm"
onClick={() => applyPreset(1280, 720, 4)} onClick={() => applyPreset(1280, 720, 4)}
> >
1280x720 × 4 1280x720 × 4
</button> </button>
<button <button
className={styles.presetButton} className="button button--outline button--primary button--sm"
onClick={() => applyPreset(1280, 720, 8)} onClick={() => applyPreset(1280, 720, 8)}
> >
1280x720 × 8 1280x720 × 8
</button> </button>
<button
className={styles.presetButton}
onClick={() => applyPreset(1920, 1080, 1)}
>
1920x1080 × 1
</button>
<button
className={styles.presetButton}
onClick={() => applyPreset(1920, 1080, 4)}
>
1920x1080 × 4
</button>
<button
className={styles.presetButton}
onClick={() => applyPreset(3840, 2160, 1)}
>
4K × 1
</button>
</div> </div>
</div> </div>
</div> </div>

44
docs/src/components/ShmCalculator/styles.module.css
View File

@ -30,17 +30,7 @@
} }
.formGroup { .formGroup {
margin-bottom: 0.5rem; margin-bottom: 1rem;
}
.row {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
.row .formGroup {
flex: 1;
} }
.label { .label {
@ -139,35 +129,3 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
} }
.presetButton {
padding: 0.5rem 1rem;
background: var(--ifm-background-surface-color);
border: 1px solid var(--ifm-border-color);
border-radius: 6px;
color: var(--ifm-font-color-base);
cursor: pointer;
font-size: 0.85rem;
font-weight: var(--ifm-font-weight-normal);
transition: all 0.2s;
}
[data-theme='light'] .presetButton {
background: #fff;
border: 1px solid #d0d7de;
}
[data-theme='dark'] .presetButton {
background: #24292f;
border: 1px solid #3b434b;
}
.presetButton:hover {
background: var(--ifm-color-primary);
color: #fff;
border-color: var(--ifm-color-primary);
}
.presetButton:active {
transform: translateY(1px);
}