✨ mod_ramwatcher refactor: swap, more precise info

* Fixed precision of GiB indicated values * Fixed three-level dot grid display not working as intended, it now show correctly cache, active and free mem slots * Added swap monitoring for all OSs
GitSquared · Apr 29, 2019 · 8492174 · 8492174
1 parent 04613ff
commit 8492174
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 15 deletions.
diff --git a/src/assets/css/mod_ramwatcher.css b/src/assets/css/mod_ramwatcher.css
@@ -78,3 +78,50 @@ div.mod_ramwatcher_point.available {
 div.mod_ramwatcher_point.active {
     opacity: 1;
 }
+
+div#mod_ramwatcher_swapcontainer {
+    display: grid;
+    grid-template-columns: 15% 65% 20%;
+    padding-left: 0.5vh;
+    margin-bottom: 0.5vh;
+}
+
+div#mod_ramwatcher_swapcontainer h1 {
+    font-size: 1.3vh;
+    line-height: 1.5vh;
+    margin: 0vh;
+    align-self: center;
+}
+
+progress#mod_ramwatcher_swapbar {
+    width: 100%;
+    align-self: center;
+    -webkit-appearance: none;
+    border-right: .1vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.8);
+}
+
+progress#mod_ramwatcher_swapbar::-webkit-progress-bar {
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.4);
+    height: .3vh;
+    position: relative;
+    top: .35vh;
+}
+
+progress#mod_ramwatcher_swapbar::-webkit-progress-value {
+    background: rgb(var(--color_r), var(--color_g), var(--color_b));
+    height: .6vh;
+    transition: width .5s cubic-bezier(0.4, 0, 1, 1);
+    position: relative;
+    bottom: .15vh;
+}
+
+h3#mod_ramwatcher_swaptext {
+    font-style: normal;
+    font-size: 1.3vh;
+    line-height: 1.5vh;
+    opacity: 0.5;
+    margin: 0vh;
+    white-space: nowrap;
+    align-self: center;
+    text-align: right;
+}
diff --git a/src/classes/ramwatcher.class.js b/src/classes/ramwatcher.class.js
@@ -14,6 +14,11 @@ class RAMwatcher {
         }
 
         ramwatcherDOM += `</div>
+                <div id="mod_ramwatcher_swapcontainer">
+                    <h1>SWAP</h1>
+                    <progress id="mod_ramwatcher_swapbar" max="100" value="0"></progress>
+                    <h3 id="mod_ramwatcher_swaptext">(0.0 GiB)</h3>
+                </div>
         </div>`;
 
         modExtContainer.innerHTML = ramwatcherDOM;
@@ -31,41 +36,40 @@ class RAMwatcher {
     }
     updateInfo() {
         window.si.mem().then(data => {
-            let total = data.free+data.used;
-            let free = data.free;
-            let available = data.used-data.active;
-            let active = data.active;
-
-            if (process.platform === "win32") available = data.available;
-
-            if (free+available+active !== total && process.platform !== "win32") throw("RAM Watcher Error: Bad memory values");
-            if (free+data.used !== total && process.platform === "win32") console.warn("RAM Watcher Error: Bad memory values");
+            if (data.free+data.used !== data.total) throw("RAM Watcher Error: Bad memory values");
 
             // Convert the data for the 440-points grid
-            active = Math.round((440*active)/total);
-            available = Math.round((440*available)/total);
+            let active = Math.round((440*data.active)/data.total);
+            let available = Math.round((440*(data.available-data.free))/data.total);
 
             // Update grid
             this.points.slice(0, active).forEach(domPoint => {
                 if (domPoint.attributes.class.value !== "mod_ramwatcher_point active") {
                     domPoint.setAttribute("class", "mod_ramwatcher_point active");
                 }
             });
-            this.points.slice(active, available).forEach(domPoint => {
+            this.points.slice(active, active+available).forEach(domPoint => {
                 if (domPoint.attributes.class.value !== "mod_ramwatcher_point available") {
                     domPoint.setAttribute("class", "mod_ramwatcher_point available");
                 }
             });
-            this.points.slice(available, this.points.length).forEach(domPoint => {
+            this.points.slice(active+available, this.points.length).forEach(domPoint => {
                 if (domPoint.attributes.class.value !== "mod_ramwatcher_point free") {
                     domPoint.setAttribute("class", "mod_ramwatcher_point free");
                 }
             });
 
             // Update info text
-            let totalGiB = Math.round((total/1073742000)*2)/2; // 1073742000 bytes = 1 Gibibyte (GiB)
-            let usedGiB = Math.round((data.active/1073742000)*2)/2;
+            let totalGiB = Math.round((data.total/1073742000)*10)/10; // 1073742000 bytes = 1 Gibibyte (GiB), the *10 is to round to .1 decimal
+            let usedGiB = Math.round((data.active/1073742000)*10)/10;
             document.getElementById("mod_ramwatcher_info").innerText = `USING ${usedGiB} OUT OF ${totalGiB} GiB`;
+
+            // Update swap indicator
+            let usedSwap = Math.round((100*data.swapused)/data.swaptotal);
+            document.getElementById("mod_ramwatcher_swapbar").value = usedSwap;
+
+            let usedSwapGiB = Math.round((data.swapused/1073742000)*10)/10;
+            document.getElementById("mod_ramwatcher_swaptext").innerText = `(${usedSwapGiB} GiB)`;
         });
     }
     shuffleArray(array) {