Add control documentation

src/common/icons.ts

@@ -36,7 +36,10 @@ const svgPaths = {
   time: "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.24,7.76C15.07,6.58 13.53,6 12,6V12L7.76,16.24C10.1,18.58 13.9,18.58 16.24,16.24C18.59,13.9 18.59,10.1 16.24,7.76Z",
   file: "M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z",
   delta: "M12,7.77L18.39,18H5.61L12,7.77M12,4L2,20H22",
-  auto: "M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74"
+  auto: "M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74",
+  calibration: "M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M15.5,8.5L10.62,13.38L8.5,11.26L7.44,12.32L10.62,15.5L16.56,9.56L15.5,8.5M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37Z",
+  pairing: "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z",
+  threeDot: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
 };
 
 export default { svgPaths };

src/reactComponents/docs/control.tsx

@@ -0,0 +1,67 @@
+import icons from "../../common/icons";
+import Border from "../border";
+import { NiceSmallerHeader } from "../niceHeader";
+import type { DocSection } from "./docSection";
+
+const speedPairingText = (
+  <p>
+    Speed sensor pairing is the first step to configure a control. It will give
+    the control context as to how it is operating at any given time. Pairing is
+    required for calibration. You can either pair manually by selecting the
+    speed sensor yourself, or automatically through the pairing utility.
+  </p>
+);
+
+const calibrationText = (
+  <p>
+    Fan calibration is used to tell the software how a specific fan behaves. It
+    will find its starting point, stopping point, maximum and minimum speed. It
+    will also create a full RPM/% graph to know what % power is required to run
+    the fan at a specific RPM. This graph is required if you want to assign a
+    fan curve in RPM mode.
+  </p>
+);
+
+const parameters = (
+  <Border className="mt-10">
+    <NiceSmallerHeader text="Control parameters" />
+    <ul>
+      <li>
+        Step up %: Maximum rate at which the control can change its value going
+        up.
+      </li>
+      <li>
+        Step down %: Maximum rate at which the control can change its value
+        going down.
+      </li>
+      <li>
+        Start %: Control value which will be used to kickstart the control from
+        a stop.
+      </li>
+      <li>Stop %: Control value below which the control will snap to 0%.</li>
+      <li>Offset %: Offset applied to the assigned fan curve.</li>
+      <li>Minimum %: Hard limit set where the control won't ever go below.</li>
+    </ul>
+  </Border>
+);
+
+export const speedPairing: DocSection = {
+  key: "Speed sensor pairing",
+  icon: icons.svgPaths.pairing,
+  render: () => {
+    return speedPairingText;
+  }
+};
+
+export const calibration: DocSection = {
+  key: "Calibration",
+  icon: icons.svgPaths.calibration,
+  render: () => {
+    return (
+      <div>
+        {calibrationText}
+        {parameters}
+      </div>
+    );
+  }
+};

src/reactComponents/docs/fanCurves.tsx

@@ -12,6 +12,7 @@ import LinearFanCurveCard from "../demo/linearFanCurveCard";
 import type { FanCurve, LinearFanCurveConfig } from "../demo/fanCurve";
 import Border from "../border";
 import { NiceSmallerHeader } from "../niceHeader";
+import { SmallIcon } from "../icon";
 
 const DocDemoLinearFanCurveCard = () => {
   const updateSources = (): [TemperatureSource, TemperatureSource] => [
@@ -45,6 +46,17 @@ const DocDemoLinearFanCurveCard = () => {
   );
 };
 
+const rpmMode: DocSection = {
+  key: "RPM mode",
+  render: () => (
+    <p>
+      All fan curves can used in RPM mode from their<span className="inline-block align-middle">{SmallIcon(icons.svgPaths.threeDot)}</span> menu. Instead of outputing a specific %, it
+      will output a target RPM value. Only controls with a valid calibration can
+      use fan curves in RPM mode.
+    </p>
+  )
+};
+
 const linear: DocSection = {
   key: "Linear",
   icon: icons.svgPaths.linear,
@@ -323,4 +335,4 @@ const auto: DocSection = {
   )
 };
 
-export { linear, graph, mix, trigger, flat, sync, auto };
+export { rpmMode, linear, graph, mix, trigger, flat, sync, auto };

src/reactPages/docs.tsx

@@ -14,12 +14,14 @@ import {
   trigger,
   flat,
   sync,
-  auto
+  auto,
+  rpmMode
 } from "../reactComponents/docs/fanCurves";
 import { SmallIcon } from "../reactComponents/icon";
 import { NiceHeader } from "../reactComponents/niceHeader";
 import "./../styles/docs.css";
 import { PageHeader } from "../reactComponents/pageHeader";
+import { calibration, speedPairing } from "../reactComponents/docs/control";
 
 const c: DocSection = {
   key: "-c --config",
@@ -54,7 +56,13 @@ const m: DocSection = {
   }
 };
 
+const controlSections: DocSection[] = [
+  speedPairing,
+  calibration
+];
+
 const fanCurveSections: DocSection[] = [
+  rpmMode,
   linear,
   graph,
   mix,
@@ -166,7 +174,18 @@ export const DocsPage = () => {
           v ? "" : "hidden"
         )}
       >
-        <div className="sticky top-20 flex flex-col ">
+        <div className="sticky top-20 flex flex-col">
+          <DocSidebarHeader
+            text="Control"
+            onClick={() => ScrollToSection(refs, "Control")}
+          />
+
+          <ul className="mb-5 mr-5">
+            {controlSections.map((s) =>
+              SideBarDocSection(s, () => ScrollToSection(refs, s.key))
+            )}
+          </ul>
+
           <DocSidebarHeader
             text="Fan Curves"
             onClick={() => ScrollToSection(refs, "Fan Curves")}
@@ -203,6 +222,10 @@ export const DocsPage = () => {
       <div className="docs ml-5">
         <div className="max-w-3xl space-y-16">
           <PageHeader children="Documentation" />
+
+          <DocHeader text="Control" refs={refs} />
+          {controlSections.map((s) => DocSectionComponent(s, refs))}
+
           <DocHeader text="Fan Curves" refs={refs} />
           {fanCurveSections.map((s) => DocSectionComponent(s, refs))}