Add support for showing pH tank level

This is on by default.

MMM-ScreenLogic.js

@@ -17,7 +17,9 @@ Module.register('MMM-ScreenLogic',{
         hotTemp: 90,
         columns: 3,
         contentClass: 'light',
-        updateInterval: 30 * 60 * 1000
+        updateInterval: 30 * 60 * 1000,
+        showPHTankLevel: true,
+        pHTankLevelMax: 6
     },
 
     start: function() {
@@ -81,9 +83,20 @@ Module.register('MMM-ScreenLogic',{
                 });
             }
             if (this.config.showPH) {
+                let dataStr = poolData.status.pH
+                if (this.config.showPHTankLevel) {
+                    let percent = Math.round((poolData.status.pHTank / this.config.pHTankLevelMax) * 100)
+                    let progBarDiv = `<div class="progress vertical">
+                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="${percent}" aria-valuemin="0" aria-valuemax="100" style="width: ${percent}%;">
+                        </div>
+                    </div>`
+
+                    dataStr = `${dataStr} ${progBarDiv}`
+                }
+
                 contents.push({
                     header: 'pH',
-                    data: poolData.status.pH,
+                    data: dataStr,
                     class: this.config.contentClass
                 });
             }

README.md

@@ -25,6 +25,8 @@
 |`showFreezeMode`|Boolean|Whether you'd like to show a banner when the pool is in freeze mode or not. [added in v1.0.1]|`true`|
 |`showOrp`|Boolean|Whether you'd like to show ORP level or not.|`true`|
 |`showPH`|Boolean|Whether you'd like to show pH level or not.|`true`|
+|`showPHTankLevel`|Boolean|Whether you'd like to show how much pH balancer is in the tank or not. Only functions if `showPH` is also on.|`true`|
+|`pHTankLevelMax`|Boolean|If `showPHTankLevel` is enabled, this is the maximum value that the system returns for a full tank. My systems has this always set to 6, but maybe it differs based on what type of pH balancer you're using.|`6`|
 |`showPoolTemp`|Boolean|Whether you'd like to show pool temperature or not.|`true`|
 |`showSaltLevel`|Boolean|Whether you'd like to show salt level (in PPM) or not.|`true`|
 |`showSaturation`|Boolean|Whether you'd like to show saturation/balance or not.|`true`|

screenlogic.css

@@ -93,3 +93,39 @@
     cursor: none;
     outline: none;
 }
+
+.MMM-ScreenLogic .vertical {
+    display: inline-block;
+    width: 20%;
+    height: 0.7em;
+    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
+    transform: rotate(-90deg);
+}
+
+.MMM-ScreenLogic .vertical {
+    box-shadow: inset 0px 0px 3px #ccc;
+}
+
+.MMM-ScreenLogic .progress-bar {
+    box-shadow: inset 0px 0px 3px rgba(100, 100, 100, 0.6);
+}
+
+.MMM-ScreenLogic .progress-bar {
+    float: left;
+    width: 0;
+    height: 100%;
+    font-size: 12px;
+    line-height: 20px;
+    color: #fff;
+    text-align: center;
+    background-color: #337ab7;
+    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
+    -webkit-transition: width .6s ease;
+    -o-transition: width .6s ease;
+    transition: width .6s ease;
+}
+
+.MMM-ScreenLogic .progress-bar-success {
+    background-color: #5cb85c;
+}