Merge pull request #123 from crystian/horizontalUI

Horizontal UI
crystian · Sep 23, 2024 · 61fef45 · 61fef45
2 parents a4e3c1a + 7d4d7fc
commit 61fef45
Show file tree

Hide file tree

Showing 21 changed files with 1,212 additions and 712 deletions.
diff --git a/README.md b/README.md
@@ -512,6 +512,14 @@ You have predefined switches (string, latent, image, conditioning) but you can u
 
 ### Crystools
 
+### 1.18.0 (21/09/2024)
+- HORIZONTAL UI! 🎉
+
+### 1.17.0 (21/09/2024)
+- Settings menu reorganized
+- Preparing for horizontal UI
+- Update from ComfyUI (typescript and new features)
+
 ### 1.16.0 (31/07/2024)
 - Rollback of AMD support by manager does not support other repository parameter (https://test.pypi.org/simple by pyrsmi)
 

diff --git a/__init__.py b/__init__.py
@@ -2,7 +2,7 @@
 @author: Crystian
 @title: Crystools
 @nickname: Crystools
-@version: 1.17.0
+@version: 1.18.0
 @project: "https://github.com/crystian/ComfyUI-Crystools",
 @description: Plugins for multiples uses, mainly for debugging, you need them! IG: https://www.instagram.com/crystian.ia
 """

diff --git a/core/version.py b/core/version.py
@@ -1 +1 @@
-version = "1.17.0"
+version = "1.18.0"
diff --git a/general/gpu.py b/general/gpu.py
@@ -110,11 +110,11 @@ def getStatus(self):
         if self.cudaDevice == 'cpu':
             gpuType = 'cpu'
             gpus.append({
-                'gpu_utilization': 0,
-                'gpu_temperature': 0,
-                'vram_total': 0,
-                'vram_used': 0,
-                'vram_used_percent': 0,
+                'gpu_utilization': -1,
+                'gpu_temperature': -1,
+                'vram_total': -1,
+                'vram_used': -1,
+                'vram_used_percent': -1,
             })
         else:
             gpuType = self.cudaDevice
@@ -126,11 +126,11 @@ def getStatus(self):
                 for deviceIndex in range(self.cudaDevicesFound):
                     deviceHandle = self.deviceGetHandleByIndex(deviceIndex)
 
-                    gpuUtilization = 0
-                    vramPercent = 0
-                    vramUsed = 0
-                    vramTotal = 0
-                    gpuTemperature = 0
+                    gpuUtilization = -1
+                    vramPercent = -1
+                    vramUsed = -1
+                    vramTotal = -1
+                    gpuTemperature = -1
 
                     # GPU Utilization
                     if self.switchGPU and self.gpusUtilization[deviceIndex]:

diff --git a/pyproject.toml b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-crystools"
 description = "With this suit, you can see the resources monitor, progress bar & time elapsed, metadata and compare between two images, compare between two JSONs, show any value to console/display, pipes, and more!\nThis provides better nodes to load/save images, previews, etc, and see \"hidden\" data without loading a new workflow."
-version = "1.17.0"
+version = "1.18.0"
 license = { file = "LICENSE" }
 dependencies = ["deepdiff", "torch", "numpy", "Pillow", "pynvml", "py-cpuinfo"]
 

diff --git a/version b/version
@@ -1 +1 @@
-1.17.0
+1.18.0
diff --git a/web/monitor.css b/web/monitor.css
@@ -1,72 +1,183 @@
-#crystools-root {
+.comfy-menu #crystools-root {
   /*background-color: red;*/
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
+  background-color: var(--comfy-menu-bg);
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
   display: flex;
   width: 100%;
   flex-direction: column;
+  margin: 7px;
+  padding: 5px 0;
+  gap: 5px;
 
   .crystools-monitor-container {
     width: 100%;
     cursor: crosshair;
-    order: 3;
-    margin: 4px 0;
+    /*margin: 4px 0;*/
+    display: flex; /* by progress bar base */
+    flex-wrap: wrap;
+    flex-direction: column;
 
     .crystools-monitor {
-      margin: 2px 10px;
+      margin: 1px 10px;
       height: 12px;
       position: relative;
       display: flex;
       align-items: center;
       flex-direction: row;
-    }
 
-    .crystools-text {
-      width: 35px;
-      font-size: 10px;
+      .crystools-text {
+        width: 40px;
+        font-size: 10px;
+        text-align: right;
+        margin-right: 3px;
+
+        &:hover {
+          font-weight: 600;
+          color: var(--input-text);
+        }
+      }
+
+      .crystools-label {
+        &:hover {
+          font-weight: 800;
+          color: var(--input-text);
+        }
+      }
     }
 
     .crystools-content {
       height: 100%;
       flex-grow: 1;
       position: relative;
-      background-color: var(--bg-color);
+      background-color: var(--content-hover-bg)
     }
 
     .crystools-slider {
       position: absolute;
       height: 100%;
       width: 0;
+      box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
     }
 
     .crystools-label {
       position: relative;
       width: 100%;
-      color: var(--drag-text);
+      color: var(--input-text);
       font-size: 10px;
     }
 
     .crystools-progress-bar {
       cursor: pointer;
-      margin: 0 2px;
+      margin: 0 9px 0;
       height: 18px;
       position: relative;
-      background-color: var(--bg-color);
+      border-radius: 3px;
+      background-color: var(--comfy-input-bg);
 
       .crystools-slider {
         position: absolute;
         height: 100%;
-        width: 0;
+        width: 50%;
         transition: width 0.2s;
         background-color: green;
+        box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.3);
       }
 
       .crystools-label {
         position: absolute;
         margin: auto 0;
         width: 100%;
-        color: var(--drag-text);
+        color: var(--input-text);
         font-size: 14px;
       }
     }
   }
 
 }
+
+
+.comfyui-menu #crystools-root {
+  /*background-color: red;*/
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 1;
+  /*flex-grow: 1;*/
+  justify-content: center;
+  /*width: 100%;*/
+  gap: 5px;
+  height: 100%;
+  /*margin: 0 auto;*/
+  /*align-items: center;*/
+  /*align-self: center;*/
+
+  .crystools-monitor-container {
+    /*background-color: var(--comfy-menu-bg);*/
+    /*width: 100%;*/
+    cursor: crosshair;
+    /*margin: 4px 0;*/
+    display: flex; /* by progress bar base */
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    height: 100%;
+    max-width: 600px;
+    min-width: 300px;
+    gap: 5px;
+
+    .crystools-monitor {
+      background-color: var(--comfy-input-bg);
+      position: relative;
+      align-items: center;
+      flex-direction: row;
+      /*width: 60px;*/
+      /*height: 100%;*/
+
+      .crystools-text {
+        font-size: 10px;
+        text-align: right;
+        margin-left: 3px;
+        position: absolute;
+        bottom: 2px;
+        z-index: 10;
+
+        /*&:hover {*/
+        /*  font-weight: 600;*/
+        /*  color: var(--input-text);*/
+        /*}*/
+      }
+
+      /*.crystools-label {*/
+      /*  &:hover {*/
+      /*    font-weight: 800;*/
+      /*    color: var(--input-text);*/
+      /*  }*/
+      /*}*/
+    }
+
+    .crystools-content {
+      height: 30px;
+      width: 56px;
+      position: relative;
+    }
+
+    .crystools-slider {
+      position: absolute;
+      height: 100%;
+      width: 0;
+      box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
+    }
+
+    .crystools-label {
+      position: relative;
+      width: 100%;
+      color: var(--input-text);
+      font-size: 12px;
+      right: 2px;
+      top: 2px;
+      text-align: right;
+    }
+  }
+}