Version bump to v0.3.0

Gruntfile.js

@@ -37,9 +37,7 @@ module.exports = function(grunt) {
     twigRender: {
       compile: {
         files : [{
-          data: {
+          data: {},
-            file_root: __dirname + '/public'
-          },
           expand: true,
           cwd: 'assets/twig',
           src: ['**/*.twig', '!**/_*.twig'],

assets/coffee/cpu.coffee

@@ -7,7 +7,8 @@ window.onload = () ->
       document.getElementById('cpuInfo').innerText = data.brand
       document.getElementById('cpuCores').innerText = data.physicalCores
       document.getElementById('cpuThreads').innerText = data.cores
-      document.getElementById('cpuClock').innerText = data.speed
+      document.getElementById('cpuClockBase').innerText = data.speed
+      document.getElementById('cpuClockBoost').innerText = data.speedMax
       console.log(data)
     ).catch((error) ->
       console.error(error)
@@ -20,7 +21,7 @@ setCpuTemp = () ->
   si.cpuTemperature()
     .then((data) ->
       document.getElementById('cpuTemp').innerText = data.main
-      console.log(data)
+      document.getElementById('cpuTempDisplay').children.item(0).style.height = ((100 - parseFloat(data.main)) + '%')
     ).catch((error) ->
       console.error(error)
     )

assets/coffee/gpu.coffee

@@ -1,10 +1,39 @@
 si = require('systeminformation')
 
 window.onload = () ->
+  # Set the option selector to trigger an info grab on element change
+  document.getElementById('gpuSelector').addEventListener('change', () ->
+    updateGpuInfo(@value)
+  )
+
+  # Load GPUs into the selector
+  loadGpus()
+
+  # Run the updateGpuInfo function with the default value of 0
+  updateGpuInfo()
+
+loadGpus = () ->
   si.graphics()
     .then((data) ->
-      document.getElementById('gpuInfo').innerText = data.controllers[0].model
+      i = 0
-      console.log(data)
+      while i < data.controllers.length
+        optionElem = document.createElement('option')
+        optionElem.innerText = data.controllers[i].model
+        optionElem.setAttribute('value', i)
+        document.getElementById('gpuSelector').appendChild(optionElem)
+        i++
+        console.log(data)
+    ).catch((error) ->
+      console.error(error)
+    )
+
+updateGpuInfo = (gpuId = 0) ->
+  si.graphics()
+    .then((data) ->
+      document.getElementById('gpuInfo').innerText = data.controllers[gpuId].model
+      document.getElementById('gpuVendor').innerText = data.controllers[gpuId].vendor
+      document.getElementById('gpuVram').innerText = data.controllers[gpuId].vram + 'MB'
+      document.getElementById('gpuBus').innerText = data.controllers[gpuId].bus
     ).catch((error) ->
       console.error(error)
     )

assets/coffee/memory.coffee

@@ -0,0 +1,24 @@
+si = require('systeminformation')
+
+window.onload = () ->
+  # Grab the static CPU information
+  si.mem()
+    .then((data) ->
+      document.getElementById('memoryTotal').innerText = @formatBytes(data.total)
+    ).catch((error) ->
+      console.error(error)
+    )
+
+  # Start the CPU temperature loop
+  getMemoryUsage()
+
+getMemoryUsage = () ->
+  si.mem()
+    .then((data) ->
+      document.getElementById('memoryFree').innerText = @formatBytes(data.free)
+      document.getElementById('memoryActive').innerText = @formatBytes(data.active)
+      document.getElementById('memoryBuffCache').innerText = @formatBytes(data.buffcache)
+    ).catch((error) ->
+      console.error(error)
+    )
+  setTimeout(getMemoryUsage, 2000)

assets/coffee/sentry.coffee

@@ -1,2 +1,21 @@
 @loadPage = (pagePath) ->
   window.location.href = pagePath + '.html'
+
+@formatBytes = (bytes, decimals = 2) ->
+  if bytes == 0
+    return '0 Bytes'
+  k = 1024
+  dm = if decimals < 0 then 0 else decimals
+  sizes = [
+    'Bytes'
+    'KB'
+    'MB'
+    'GB'
+    'TB'
+    'PB'
+    'EB'
+    'ZB'
+    'YB'
+  ]
+  i = Math.floor(Math.log(bytes) / Math.log(k))
+  parseFloat((bytes / k ** i).toFixed(dm)) + ' ' + sizes[i]

assets/coffee/storage.coffee

@@ -0,0 +1,60 @@
+si = require('systeminformation')
+
+window.onload = () ->
+  # Set the option selector to trigger an info grab on element change
+  document.getElementById('diskSelector').addEventListener('change', () ->
+    updateDiskInfo(@value)
+  )
+
+  # Load GPUs into the selector
+  loadDisks()
+
+  # Run the updateGpuInfo function with the default value of 0
+  updateDiskInfo()
+
+  # Start running our function to update the drive's temperature
+  setDiskTemp()
+
+loadDisks = () ->
+  si.diskLayout()
+    .then((data) ->
+      i = 0
+      while i < data.length
+        optionElem = document.createElement('option')
+        diskName = data[i].name + ' (' + data[i].device + ')'
+        optionElem.innerText = diskName
+        optionElem.setAttribute('value', i)
+        document.getElementById('diskSelector').appendChild(optionElem)
+        i++
+    ).catch((error) ->
+      console.error(error)
+    )
+
+updateDiskInfo = (diskId = 0) ->
+  si.diskLayout()
+    .then((data) ->
+      document.getElementById('diskInfo').innerText = data[diskId].name
+      document.getElementById('diskPath').innerText = data[diskId].device
+      document.getElementById('diskType').innerText = data[diskId].type
+      document.getElementById('diskSize').innerText = formatBytes(data[diskId].size)
+      document.getElementById('diskVendor').innerText = data[diskId].vendor
+    ).catch((error) ->
+      console.error(error)
+    )
+
+setDiskTemp = (diskId = -1) ->
+  selector = document.getElementById('diskSelector')
+  if selector.length < 1
+    return
+
+  if (diskId = -1)
+    diskId = selector.value
+
+  si.diskLayout()
+    .then((data) ->
+      if (data[diskId].temperature)
+        document.getElementById('diskTemp').innerText = data[diskId].temperature
+    ).catch((error) ->
+      console.error(error)
+    )
+  setTimeout(setDiskTemp, 2000)

assets/sass/sentry.sass

@@ -1,5 +1,6 @@
 body
   background: white
+  font-size: 18px
 
 a
   color: cornflowerblue
@@ -21,6 +22,9 @@ button
     background-color: darken(cornflowerblue, 10%)
     color: white
 
+.faded-text
+  color: #999
+
 .u-text-center
   text-align: center
 
@@ -40,6 +44,39 @@ button
     font-size: 2.5rem
     text-decoration: none
 
+table.hardware-info
+  border-spacing: 0
+  padding: 8px
+  border: 1px solid #999
+  td
+    border: none
+  td:not(:nth-child(2))
+    border-right: 1px solid #bbb
+  tr:not(:last-child) td
+    border-bottom: 1px solid #bbb
+
+.tempGauge
+  position: relative
+  box-sizing: border-box
+  width: 100%
+  max-width: 175px
+  height: 300px
+  margin-left: auto
+  margin-right: auto
+  border: 4px solid #212121
+  background: rgb(61,191,37)
+  background: linear-gradient(0deg, rgba(61,191,37,1) 45%, rgba(253,255,2,1) 65%, rgba(253,255,2,1) 75%, rgba(253,45,45,1) 100%)
+
+  .tempGaugeFill
+    display: block
+    position: absolute
+    left: 0
+    top: 0
+    box-sizing: border-box
+    width: 100%
+    height: 0
+    background: white
+
 #header h1
   text-align: center
 
@@ -51,9 +88,14 @@ button
   padding-top: 25px
   padding-bottom: 25px
   border-top: 1px solid #999
+  font-size: 16px
 
   .row
     position: relative
 
   p.no-margin
     margin-bottom: 0
+
+#systemPages
+  > div:nth-child(2n + 3)
+    margin-left: 0

assets/twig/cpu.twig

@@ -8,14 +8,41 @@
 
 <header class="row">
   <div class="columns twelve u-text-center">
-    <h1>Sentry System Info</h1>
+    <h1>Sentry CPU Info</h1>
   </div>
 </header>
 
 <section class="row">
-  <h5>CPU Model: <span id="cpuInfo">Random CPU</span></h5>
+  <article class="columns eight">
-  <p><span id="cpuCores">2</span>c/<span id="cpuThreads">4</span>t @ <span id="cpuClock">2.0</span>Ghz</p>
+    <h5>CPU Model: <span id="cpuInfo">Random CPU</span></h5>
-  <p>CPU temperature: <span id="cpuTemp">12</span>&deg;C</p>
+    <table class="hardware-info u-full-width">
+      <tbody>
+        <tr>
+          <td>Physical cores</td>
+          <td><span id="cpuCores">2</span> cores</td>
+        </tr>
+        <tr>
+          <td>Logical threads</td>
+          <td><span id="cpuThreads">4</span> threads</td>
+        </tr>
+        <tr>
+          <td>Base clock</td>
+          <td><span id="cpuClockBase">2.0</span>Ghz</td>
+        </tr>
+        <tr>
+          <td>Boost clock</td>
+          <td><span id="cpuClockBoost">2.0</span>Ghz</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>CPU temperature: <span id="cpuTemp">12</span>&deg;C</p>
+  </article>
+
+  <article class="columns four">
+    <div id="cpuTempDisplay" class="tempGauge">
+      <div class="tempGaugeFill"></div>
+    </div>
+  </article>
 </section>
 
 <section class="row">

assets/twig/gpu.twig

@@ -0,0 +1,44 @@
+{% extends 'layout.twig' %}
+
+{% block scripts %}
+<script src="./js/gpu.js" charset="utf-8"></script>
+{% endblock %}
+
+{% block content %}
+
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>GPU Info</h1>
+    <select id="gpuSelector"></select>
+  </div>
+</header>
+
+<section class="row">
+  <article class="columns twelve">
+    <h5>GPU Model: <span id="gpuInfo">Random GPU</span></h5>
+    <table class="hardware-info u-full-width">
+      <tbody>
+        <tr>
+          <td>GPU vendor</td>
+          <td><span id="gpuVendor">N/a</span></td>
+        </tr>
+        <tr>
+          <td>GPU memory</td>
+          <td><span id="gpuVram">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Bus</td>
+          <td><span id="gpuBus">N/a</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <a href="index.html">Back</a>
+  </div>
+</section>
+
+{% endblock %}

assets/twig/index.twig

@@ -8,7 +8,7 @@
   </div>
 </header>
 
-<section class="row">
+<section id="systemPages" class="row">
   <!-- CPU info page link -->
   <div class="columns six u-text-center">
     <a class="pageLink" href="cpu.html">
@@ -24,6 +24,22 @@
       <p class="u-text-center">Graphics Card</p>
     </a>
   </div>
+
+  <!-- Memory info page link -->
+  <div class="columns six u-text-center">
+    <a href="memory.html" class="pageLink">
+      <i class="fa-solid fa-memory"></i>
+      <p class="u-text-center">Memory</p>
+    </a>
+  </div>
+
+  <!-- Storage devices page link -->
+  <div class="columns six u-text-center">
+    <a href="storage.html" class="pageLink">
+      <i class="fa-solid fa-hard-drive"></i>
+      <p class="u-text-center">Storage devices</p>
+    </a>
+  </div>
 </section>
 
 {% endblock %}

assets/twig/layout.twig

@@ -3,11 +3,11 @@
   <head>
     <meta charset="UTF-8">
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <link rel="stylesheet" href="{{ file_root }}/styles/skeleton-2.0.4.min.css">
+    <link rel="stylesheet" href="./styles/skeleton-2.0.4.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
-    <link rel="stylesheet" href="{{ file_root }}//styles/sentry.css">
+    <link rel="stylesheet" href="./styles/sentry.css">
     <title>Sentry System Monitor</title>
-    <script src="{{ file_root }}/js/sentry.js" charset="utf-8"></script>
+    <script src="./js/sentry.js" charset="utf-8"></script>
     {% block scripts %}{% endblock %}
   </head>
   <body>
@@ -18,14 +18,14 @@
     <footer id="footer">
       <div class="container fluid">
         <div class="row">
-          <div class="columns three"><p></p></div>
+          <div class="columns three">
+            <p class="faded-text no-margin u-text-center">Sentry v<span id="app-version"></span></p>
+          </div>
           <div class="columns six">
-            <p class="no-margin">This app was built using:</p>
+            <p class="no-margin u-text-center">Developed by Bit Goblin free of charge.</p>
-            <p class="no-margin">
+          </div>
-              Node.js <span id="node-version"></span>,
+          <div class="columns three">
-              Chromium <span id="chrome-version"></span>,
+            <p class="no-margin u-text-center"><a href="https://git.metaunix.net/BitGoblin/Sentry">Source code</a></p>
-              and Electron <span id="electron-version"></span>.
-            </p>
           </div>
         </div>
       </div>

assets/twig/memory.twig

@@ -0,0 +1,26 @@
+{% extends 'layout.twig' %}
+
+{% block scripts %}
+<script src="./js/memory.js" charset="utf-8"></script>
+{% endblock %}
+
+{% block content %}
+
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Memory Info</h1>
+  </div>
+</header>
+
+<section class="row">
+  <p><span id="memoryFree">N/a</span> free out of <span id="memoryTotal">N/a</span>.</p>
+  <p><span id="memoryActive">N/a</span> is actively used | <span id="memoryBuffCache">N/a</span> is used in buffers/cache.</p>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <a href="index.html">Back</a>
+  </div>
+</section>
+
+{% endblock %}

assets/twig/storage.twig

@@ -0,0 +1,52 @@
+{% extends 'layout.twig' %}
+
+{% block scripts %}
+<script src="./js/storage.js" charset="utf-8"></script>
+{% endblock %}
+
+{% block content %}
+
+<header class="row">
+  <div class="columns twelve u-text-center">
+    <h1>Storage Device Info</h1>
+    <select id="diskSelector"></select>
+  </div>
+</header>
+
+<section class="row">
+  <article class="columns twelve">
+    <h5>Device Model: <span id="diskInfo">Loading...</span></h5>
+    <table class="hardware-info u-full-width">
+      <tbody>
+        <tr>
+          <td>Disk Path</td>
+          <td><span id="diskPath">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Device Type</td>
+          <td><span id="diskType">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Capacity</td>
+          <td><span id="diskSize">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Vendor</td>
+          <td><span id="diskVendor">N/a</span></td>
+        </tr>
+        <tr>
+          <td>Current Temperature</td>
+          <td><span id="diskTemp">N/a</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </article>
+</section>
+
+<section class="row">
+  <div class="columns twelve">
+    <a href="index.html">Back</a>
+  </div>
+</section>
+
+{% endblock %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Desktop app to view system information and sensors",
   "main": "main.js",
   "scripts": {
@@ -9,15 +9,15 @@
     "build-windows": "electron-builder build --win",
     "grunt": "grunt"
   },
-  "repository": "https://git.metaunix.net/metaunix/sentry",
+  "repository": "https://git.metaunix.net/BitGoblin/sentry",
-  "homepage": "https://git.metaunix.net/metaunix/sentry#readme",
+  "homepage": "https://git.metaunix.net/BitGoblin/sentry#readme",
   "keywords": [
     "sensors",
     "cpu",
     "gpu",
     "memory"
   ],
-  "author": "Gregory Ballantine <gballantine@metaunix.net>",
+  "author": "Gregory Ballantine <gballantine@bitgoblin.tech>",
   "license": "BSD-2-Clause",
   "devDependencies": {
     "electron": "^18.2.4",
@@ -33,7 +33,7 @@
     "systeminformation": "^5.11.15"
   },
   "build": {
-    "appId": "net.metaunix.sentry",
+    "appId": "tech.bitgoblin.sentry",
     "copyright": "Copyright © 2022 ${author}",
     "win": {
       "target": "nsis",

preload.js

@@ -1,3 +1,5 @@
+const appInfo = require('./package.json');
+
 // All of the Node.js APIs are available in the preload process.
 // It has the same sandbox as a Chrome extension.
 window.addEventListener('DOMContentLoaded', () => {
@@ -6,7 +8,5 @@ window.addEventListener('DOMContentLoaded', () => {
     if (element) element.innerText = text
   }
 
-  for (const type of ['chrome', 'node', 'electron']) {
+  replaceText('app-version', appInfo.version);
-    replaceText(`${type}-version`, process.versions[type])
+});
-  }
-})