diff --git a/MMM-ScreenLogic.js b/MMM-ScreenLogic.js
index 3c3be18..62e20db 100644
--- a/MMM-ScreenLogic.js
+++ b/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 = `
`
+
+ dataStr = `${dataStr} ${progBarDiv}`
+ }
+
contents.push({
header: 'pH',
- data: poolData.status.pH,
+ data: dataStr,
class: this.config.contentClass
});
}
diff --git a/README.md b/README.md
index 4f6b304..d14a721 100644
--- a/README.md
+++ b/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`|
diff --git a/screenlogic.css b/screenlogic.css
index 3eccd08..780da3f 100644
--- a/screenlogic.css
+++ b/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;
+}
\ No newline at end of file