administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-04-07 15:47:38 +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

54
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,7 +72,25 @@ const ShmCalculator = () => {
count count
</p> </p>
<div className={styles.row}> <Admonition type="note">
The resolution below is the <strong>detect</strong> stream resolution,
not the <strong>record</strong> stream resolution. SHM size is
determined by the detect resolution used for object detection.{" "}
<a href="/frigate/camera_setup#choosing-a-detect-resolution">
Learn more about choosing a detect resolution.
</a>
</Admonition>
{width * height > 1280 * 720 && (
<Admonition type="warning">
Using a detect resolution higher than 720p is not recommended.
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}> <div className={styles.formGroup}>
<label htmlFor="width" className={styles.label}> <label htmlFor="width" className={styles.label}>
Width: Width:
@ -86,7 +105,9 @@ const ShmCalculator = () => {
onChange={(e) => setWidth(Number(e.target.value))} onChange={(e) => setWidth(Number(e.target.value))}
/> />
</div> </div>
</div>
<div className="col col--6">
<div className={styles.formGroup}> <div className={styles.formGroup}>
<label htmlFor="height" className={styles.label}> <label htmlFor="height" className={styles.label}>
Height: Height:
@ -102,6 +123,7 @@ const ShmCalculator = () => {
/> />
</div> </div>
</div> </div>
</div>
<div className={styles.formGroup}> <div className={styles.formGroup}>
<label htmlFor="cameraCount" className={styles.label}> <label htmlFor="cameraCount" className={styles.label}>
@ -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);
}