From 5564a16d4b34780d061c12b0d730903065e92ea3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sun, 16 Jun 2024 20:23:42 +1000
Subject: [PATCH] refactor(ui): better hud

---
 .../controlLayers/components/HeadsUpDisplay.tsx      | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
index d99bffcc61..1172ec2ede 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/HeadsUpDisplay.tsx
@@ -12,19 +12,19 @@ export const HeadsUpDisplay = memo(() => {
 
   return (
     <Flex flexDir="column" bg="blackAlpha.400" borderBottomEndRadius="base" p={2} minW={64} gap={2}>
-      <HUDItem label="Scale" value={round(stageAttrs.scale, 3)} />
+      <HUDItem label="Zoom" value={`${round(stageAttrs.scale * 100, 2)}%`} />
       <HUDItem label="Document Size" value={`${document.width}×${document.height}`} />
       <HUDItem label="Stage Pos" value={`${round(stageAttrs.x, 3)}, ${round(stageAttrs.y, 3)}`} />
       <HUDItem
         label="Stage Size"
-        value={`${round(stageAttrs.width / stageAttrs.scale, 3)}, ${round(stageAttrs.height / stageAttrs.scale, 3)}`}
+        value={`${round(stageAttrs.width / stageAttrs.scale, 2)}, ${round(stageAttrs.height / stageAttrs.scale, 2)}`}
       />
       <HUDItem label="BBox Size" value={`${bbox.width}×${bbox.height}`} />
       <HUDItem label="BBox Position" value={`${bbox.x}, ${bbox.y}`} />
-      <HUDItem label="BBox Width % 8" value={round(bbox.width % 8, 3)} />
-      <HUDItem label="BBox Height % 8" value={round(bbox.height % 8, 3)} />
-      <HUDItem label="BBox X % 8" value={round(bbox.x % 8, 3)} />
-      <HUDItem label="BBox Y % 8" value={round(bbox.y % 8, 3)} />
+      <HUDItem label="BBox Width % 8" value={round(bbox.width % 8, 2)} />
+      <HUDItem label="BBox Height % 8" value={round(bbox.height % 8, 2)} />
+      <HUDItem label="BBox X % 8" value={round(bbox.x % 8, 2)} />
+      <HUDItem label="BBox Y % 8" value={round(bbox.y % 8, 2)} />
     </Flex>
   );
 });