GPU doc sections

src/common/icons.ts

@@ -1,3 +1,5 @@
+type SvgIcon = string | { path: string; viewbox: string };
+
 const svgPaths = {
   mix: "M22,6.92L20.59,5.5L17.74,8.72C15.68,6.4 12.83,5 9.61,5C6.72,5 4.07,6.16 2,8L3.42,9.42C5.12,7.93 7.27,7 9.61,7C12.35,7 14.7,8.26 16.38,10.24L13.5,13.5L9.5,9.5L2,17L3.5,18.5L9.5,12.5L13.5,16.5L17.55,11.93C18.3,13.28 18.8,14.83 19,16.5H21C20.78,14.18 20.05,12.09 18.96,10.34L22,6.92Z",
   linear:
@@ -39,7 +41,9 @@ const svgPaths = {
   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"
+  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",
+  nvidia: { path:"M101.3 53.6V37.4c1.6-.1 3.2-.2 4.8-.2 44.4-1.4 73.5 38.2 73.5 38.2S148.2 119 114.5 119c-4.5 0-8.9-.7-13.1-2.1V67.7c17.3 2.1 20.8 9.7 31.1 27l23.1-19.4s-16.9-22.1-45.3-22.1c-3-.1-6 .1-9 .4m0-53.6v24.2l4.8-.3c61.7-2.1 102 50.6 102 50.6s-46.2 56.2-94.3 56.2c-4.2 0-8.3-.4-12.4-1.1v15c3.4.4 6.9.7 10.3.7 44.8 0 77.2-22.9 108.6-49.9 5.2 4.2 26.5 14.3 30.9 18.7-29.8 25-99.3 45.1-138.7 45.1-3.8 0-7.4-.2-11-.6v21.1h170.2V0H101.3zm0 116.9v12.8c-41.4-7.4-52.9-50.5-52.9-50.5s19.9-22 52.9-25.6v14h-.1c-17.3-2.1-30.9 14.1-30.9 14.1s7.7 27.3 31 35.2M27.8 77.4s24.5-36.2 73.6-40V24.2C47 28.6 0 74.6 0 74.6s26.6 77 101.3 84v-14c-54.8-6.8-73.5-67.2-73.5-67.2z", viewbox: "0 0 271.7 179.7"},
+  amd: { path: "M431.35 416.39L15.28 0L1530 0L1530 1515.66L1113.92 1099.32L1113.92 416.39L431.35 416.39ZM430.87 499.83L2.49 928.44L2.49 1528.41L602.04 1528.41L1030.39 1099.81L430.87 1099.81L430.87 499.83Z", viewbox: "0 0 1530 1530"}
 };
 
-export default { svgPaths };
+export { type SvgIcon, svgPaths as icons };

src/layouts/footer.tsx

@@ -1,5 +1,5 @@
 import consts from "../common/consts";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 import { ExternalLink } from "../reactComponents/links";
 import { SpinningLogo } from "../reactComponents/spinningLogo";
 import { FooterButton } from "../reactComponents/footerButton";
@@ -25,12 +25,12 @@ export const DevInformation = () => {
       </ExternalLink>
       <div className="flex items-center justify-center space-x-3 py-3">
         <FooterButton
-          iconSvgPath={icons.svgPaths.heart}
+          iconSvgPath={icons.heart}
           href={consts.urls.sponsor}
           text="Sponsor"
         />
         <FooterButton
-          iconSvgPath={icons.svgPaths.paypal}
+          iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="PayPal"

src/reactComponents/demo/linearFanCurveCard.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import Select from "../select";
 import FanCurveCard from "./fanCurveCard";
 import type { TemperatureSource } from "./temperatureSource";
@@ -30,7 +30,7 @@ export default function LinearFanCurveCard({
   }, [linearFanCurve.selectedTemperature]);
 
   return (
-    <FanCurveCard iconPath={icons.svgPaths.linear} fanCurve={fanCurve}>
+    <FanCurveCard iconPath={icons.linear} fanCurve={fanCurve}>
       <Select
         onChange={(e) =>
           setFanCurveConfig({
@@ -119,10 +119,10 @@ function CardNumberInput(
 
   return (
     <div className={twMerge("relative inline-block", className)}>
-      <div className="text-xs text-gray-300 ">{label}</div>
+      <div className="text-xs text-gray-300">{label}</div>
       <div>
         <input
-          className="inline-block w-full border-b-2 border-b-white bg-transparent "
+          className="inline-block w-full border-b-2 border-b-white bg-transparent"
           type="number"
           {...attr}
           onMouseEnter={() => setHoverAndFocus([true, focus])}

src/reactComponents/demo/mixFanCurveCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import Select from "../select";
 import {
   createMixFanCurve,
@@ -49,7 +49,7 @@ export default function MixFanCurveCard({
       : selectedFunction.name;
 
   return (
-    <FanCurveCard iconPath={icons.svgPaths.mix} fanCurve={fanCurve}>
+    <FanCurveCard iconPath={icons.mix} fanCurve={fanCurve}>
       <Select
         onChange={(e) =>
           setSelectedFunction(mixFunctions[e.target.selectedIndex])

src/reactComponents/docs/control.tsx

@@ -1,4 +1,4 @@
-import icons from "../../common/icons";
+import {icons} from "../../common/icons";
 import Border from "../border";
 import { NiceSmallerHeader } from "../niceHeader";
 import type { DocSection } from "./docSection";
@@ -47,15 +47,15 @@ const parameters = (
 
 export const speedPairing: DocSection = {
   key: "Speed sensor pairing",
-  icon: icons.svgPaths.pairing,
+  icon: icons.pairing,
   render: () => {
     return speedPairingText;
   }
 };
 
 export const calibration: DocSection = {
   key: "Calibration",
-  icon: icons.svgPaths.calibration,
+  icon: icons.calibration,
   render: () => {
     return (
       <div>

src/reactComponents/docs/customSensors.tsx

@@ -1,12 +1,12 @@
 import type consts from "../../common/consts";
-import icons from "../../common/icons";
+import {icons} from "../../common/icons";
 import Border from "../border";
 import { NiceSmallerHeader } from "../niceHeader";
 import { type DocSection, parameters } from "./docSection";
 
 const timeAverage: DocSection = {
   key: "Time Average",
-  icon: icons.svgPaths.time,
+  icon: icons.time,
   render: () => {
     return (
       <>
@@ -31,7 +31,7 @@ const timeAverage: DocSection = {
 
 const mixSensor: DocSection = {
   key: "Mix Sensor",
-  icon: icons.svgPaths.temperature,
+  icon: icons.temperature,
   render: () => {
     return (
       <>
@@ -58,7 +58,7 @@ const mixSensor: DocSection = {
 
 const fileSensor: DocSection = {
   key: "File",
-  icon: icons.svgPaths.file,
+  icon: icons.file,
   render: () => {
     return (
       <>
@@ -84,7 +84,7 @@ const fileSensor: DocSection = {
 
 const offsetSensor: DocSection = {
   key: "Offset",
-  icon: icons.svgPaths.delta,
+  icon: icons.delta,
   render: () => {
     return (
       <>

src/reactComponents/docs/docSection.tsx

@@ -1,6 +1,8 @@
+import type { SvgIcon } from "../../common/icons";
+
 export type DocSection = {
   key: string;
-  icon?: string;
+  icon?: SvgIcon;
   render: () => JSX.Element;
 };
 

src/reactComponents/docs/fanCurves.tsx

@@ -5,7 +5,7 @@ import {
   createTempSourceRandom,
   type TemperatureSource
 } from "../demo/temperatureSource";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import { useState } from "react";
 import { useInterval } from "../../common/hooks";
 import LinearFanCurveCard from "../demo/linearFanCurveCard";
@@ -50,16 +50,20 @@ 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.
+      All fan curves can used in RPM mode from their
+      <span className="inline-block align-middle">
+        {SmallIcon(icons.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,
+  icon: icons.linear,
   render: () => {
     return (
       <>
@@ -107,7 +111,7 @@ const linear: DocSection = {
 
 const graph: DocSection = {
   key: "Graph",
-  icon: icons.svgPaths.graph,
+  icon: icons.graph,
   render: () => {
     return (
       <>
@@ -178,7 +182,7 @@ const DocDemoMixFanCurveCard = () => {
 
 const flat: DocSection = {
   key: "Flat",
-  icon: icons.svgPaths.flat,
+  icon: icons.flat,
   render: () => {
     return (
       <>
@@ -202,7 +206,7 @@ const flat: DocSection = {
 
 const sync: DocSection = {
   key: "Sync",
-  icon: icons.svgPaths.sync,
+  icon: icons.sync,
   render: () => {
     return (
       <>
@@ -233,7 +237,7 @@ const sync: DocSection = {
 
 const trigger: DocSection = {
   key: "Trigger",
-  icon: icons.svgPaths.trigger,
+  icon: icons.trigger,
   render: () => {
     return (
       <>
@@ -260,7 +264,7 @@ const trigger: DocSection = {
 
 const mix: DocSection = {
   key: "Mix Fan Curve",
-  icon: icons.svgPaths.mix,
+  icon: icons.mix,
   render: () => {
     return (
       <>
@@ -289,7 +293,7 @@ const mix: DocSection = {
 
 const auto: DocSection = {
   key: "Auto",
-  icon: icons.svgPaths.auto,
+  icon: icons.auto,
   render: () => (
     <>
       <p>

src/reactComponents/docs/gpu.tsx

@@ -0,0 +1,86 @@
+import { icons } from "../../common/icons";
+import type { DocSection } from "./docSection";
+
+export const nvidia: DocSection = {
+  key: "NVIDIA",
+  icon: icons.nvidia,
+  render: () => {
+    return (
+      <>
+        <p>
+          Modern Nvidia GPUs (RTX) have a few limitation when it comes to
+          controlling their fans from a third party application. Most notably:
+        </p>
+        <ul>
+          <li>
+            Minimum %: Their is a 30% minimum value and 0 RPM can't be applied
+            manually.
+          </li>
+          <li>
+            0 RPM minimum temperature: usually around the 45 degree range.
+          </li>
+          <li>
+            0 RPM maximum power draw: Having multiple monitors active may exceed
+            that maximum power draw.
+          </li>
+        </ul>
+        <p>
+          To play arround these limitations, the software will release its
+          control over the GPU when the command hits 0%. If the card supports
+          natively 0 RPM, it will be able to enter 0 RPM mode. However, most
+          cards will have built-in conditions for 0 RPM to trigger.
+        </p>
+        <br />
+        <p>
+          With these caveats in mind, a simple graph for a GPU needs to have its
+          0% point at or below the zero RPM temperature point, then staircase up
+          to 30%. Rest of the graph is up to the user.
+        </p>
+      </>
+    );
+  }
+};
+
+export const amd: DocSection = {
+  key: "AMD",
+  icon: icons.amd,
+  render: () => {
+    return (
+      <>
+        <p>
+          Modern AMD GPUs have access to the Adrenaline software to monitor and
+          control various aspects like monitoring and overclocking. The software
+          uses the same interface (ALDX) to get the temperature data, fan RPM
+          and to control the fan. This comes with a few caveat for the fan to be
+          controlled. Only using the temperatures without controlling the fan do
+          not come with these caveats:
+        </p>
+
+        <ul>
+          <li>
+            Overclocking reset: any fan setting applied from the software will
+            reset the overcloking tuning settings in Adrenaline to their default
+            values.
+          </li>
+          <li>
+            Zero RPM: AMD gpus have a set minimum temperature for Zero RPM to
+            come into effect. The temperature is identified with a dotted line
+            in the Adrenaline Graph. This inherent temperature point must be
+            taken into consideration when creating a fan curve for the GPU.
+          </li>
+          <li>
+            Minimum %: There is a minimum % (0% excluded, see Zero RPM) a card
+            can take as an input command, usually arround to 30%. Below that,
+            the card will refuse the command and will keep the minimum %.
+          </li>
+        </ul>
+
+        <p>
+          With these caveats in mind, a simple graph for a GPU needs to have its
+          0% point at or below the zero RPM temperature point, then staircase up
+          to the minimum %. Rest of the graph is up to the user.
+        </p>
+      </>
+    );
+  }
+};

src/reactComponents/donationModal.tsx

@@ -1,6 +1,6 @@
 import type { JsxElement } from "typescript";
 import consts from "../common/consts";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 import { FooterButton } from "./footerButton";
 import { BigIcon, Icon } from "./icon";
 import { SpinningLogo } from "./spinningLogo";
@@ -19,12 +19,12 @@ function Donation(exitModal: Function) {
 
       <div className="m-2 flex flex-row space-x-4">
         <FooterButton
-          iconSvgPath={icons.svgPaths.heart}
+          iconSvgPath={icons.heart}
           href={consts.urls.sponsor}
           text="Sponsor"
         />
         <FooterButton
-          iconSvgPath={icons.svgPaths.paypal}
+          iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="PayPal"