Add imperial and metric toggle button

src/App.tsx

@@ -94,6 +94,8 @@ const SUBJECTS: Record<string, () => ReturnType<typeof SmallDog>> = {
   "Human At Desk": HumanAtDesk,
 };
 
+const SYSTEMS = ["Metric", "Imperial"] as const;
+
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }
@@ -106,6 +108,7 @@ function App() {
   const [circleOfConfusionInMillimeters, setCircleOfConfusionInMillimeters] =
     useState(0.029);
   const [subject, setSubject] = useState("Human");
+  const [system, setSystem] = useState<(typeof SYSTEMS)[number]>("Imperial");
 
   const distanceToSubjectInMM = distanceToSubjectInInches * 25.4;
 
@@ -154,6 +157,7 @@ function App() {
           SubjectGraphic={SUBJECTS[subject]}
           focalLength={focalLengthInMillimeters}
           aperture={aperture}
+          system={system}
         />
       </Box>
 
@@ -320,6 +324,21 @@ function App() {
           </Flex>
         </Box>
 
+        <Box p={4} pt={6}>
+          <Flex gap={5} justify="center">
+            {SYSTEMS.map((system) => (
+              <Button
+                key={system}
+                onClick={() => {
+                  setSystem(system);
+                }}
+              >
+                {system}
+              </Button>
+            ))}
+          </Flex>
+        </Box>
+
         <Box p={4} pt={6}>
           <Flex gap={5} justify="center">
             <a href="https://github.com/jherr/depth-of-field" target="_blank">

src/PhotographyGraphic.tsx

@@ -1,8 +1,4 @@
-function imperial(inches: number, precision = 1) {
-  const feet = Math.floor(inches / 12);
-  const remainingInches = inches % 12;
-  return `${feet}' ${remainingInches.toFixed(precision)}"`;
-}
+import { toImperial, toMetric } from "./utils/units";
 
 export const SmallDog = () => (
   <path
@@ -52,15 +48,19 @@ export default function PhotographyGraphic({
   SubjectGraphic = Human,
   focalLength,
   aperture,
+  system,
 }: {
   distanceToSubjectInInches: number;
   nearFocalPointInInches: number;
   farFocalPointInInches: number;
   farDistanceInInches: number;
   focalLength: number;
   aperture: number;
+  system: string;
   SubjectGraphic?: () => JSX.Element;
 }) {
+  const covertUnits = system === "Imperial" ? toImperial : toMetric;
+
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -125,7 +125,7 @@ export default function PhotographyGraphic({
         fontSize={3}
         textAnchor="middle"
       >
-        {imperial(farFocalPointInInches - nearFocalPointInInches)}
+        {covertUnits(farFocalPointInInches - nearFocalPointInInches)}
       </text>
 
       <text x={1} y={12} fontSize={4} fontWeight="bold">
@@ -141,14 +141,14 @@ export default function PhotographyGraphic({
               nearFocalPointInInches - 0.5
             } 71) rotate(-90)`}
           >
-            {imperial(nearFocalPointInInches, 0)}
+            {covertUnits(nearFocalPointInInches, 0)}
           </text>
           <text
             fontSize={3}
             textAnchor="start"
             transform={`translate(${farFocalPointInInches + 0.5} 1) rotate(90)`}
           >
-            {imperial(farFocalPointInInches, 0)}
+            {covertUnits(farFocalPointInInches, 0)}
           </text>
         </>
       )}
@@ -158,7 +158,7 @@ export default function PhotographyGraphic({
         fontSize={3}
         textAnchor="middle"
       >
-        {imperial(distanceToSubjectInInches, 0)}
+        {covertUnits(distanceToSubjectInInches, 0)}
       </text>
 
       <g transform={`translate(${distanceToSubjectInInches})`}>

src/utils/units.ts

@@ -0,0 +1,10 @@
+export const toImperial = (inches: number, precision = 1) => {
+  const feet = Math.floor(inches / 12);
+  const remainingInches = inches % 12;
+  return `${feet}' ${remainingInches.toFixed(precision)}"`;
+};
+
+export const toMetric = (inches: number, precision = 1) => {
+  const cm = inches * 2.54;
+  return `${cm.toFixed(precision)} cm`;
+};