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
                 });
             }