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