Skip to content

Commit

Permalink
Add compact mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@wilsto
wilsto committed May 17, 2023
1 parent f8e451e commit c129e85
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 21 deletions.
7 changes: 5 additions & 2 deletions README-fr.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ La "Pool Monitor Card" est un plugin d'Home Assistant qui fournit des informatio

Avec la "Pool Monitor Card", vous pouvez facilement contrôler ces aspects importants de votre piscine et faire les ajustements nécessaires pour que l'eau soit sûre et agréable à la baignade.


![all](example/light-dark-card.png)
![all](example/compact-card.png)

## Support

Expand Down Expand Up @@ -85,3 +84,7 @@ tds: sensor.tds_sensor
| `compact` | booléen | **Option** | Mode Compact |`false`|

*Vous devez définir au moins l'une de ces 4 entités.

## Autres captures d'écran

![all](example/light-dark-card.png)
6 changes: 5 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ The "Pool Monitor Card" is a home assistant plugin that provides information abo

With the "Pool Monitor Card", you can easily monitor these important aspects of your swimming pool and make any necessary adjustments to ensure that the water is safe and comfortable for swimming.

![all](example/light-dark-card.png)
![all](example/compact-card.png)

## Support

Expand Down Expand Up @@ -84,3 +84,7 @@ tds: sensor.tds_sensor
| `compact` | boolean | **Option** | Compact Mode |`false`|

*You need to define at least one of theses 4 entities

## Other screenshots

![all](example/light-dark-card.png)
Binary file added example/compact-card.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 86 additions & 18 deletions pool_monitor_card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ class PoolMonitorCard extends LitElement {
width: 90px;
text-align: right;
justify-self: right;
position: absolute;
z-index: 1;
}
Expand Down Expand Up @@ -110,6 +109,31 @@ class PoolMonitorCard extends LitElement {
.item-row {
grid-row: 1;
}
.cursor{
text-align: center;
justify-self: center;
font-size:20px;
font-weight: 900;
color: black;
position: absolute;
z-index: 1;
}
.cursor-text{
width: 150px;
height: 22px;
padding-left: 3px;
padding-right: 3px;
padding-top:2px;
font-size: 12px;
font-weight: 700;
text-align: right;
color: black;
justify-self: right;
position: absolute;
z-index: 1;
}
`
];

Expand All @@ -120,14 +144,26 @@ class PoolMonitorCard extends LitElement {
const config = this.getConfig()
const data = this.processData()

return html`
<div id="pool-monitor-card">
${cardContent.generateTitle(config)}
${data.temperature !== undefined ? cardContent.generateBody(data.temperature): ''}
${data.ph !== undefined ? cardContent.generateBody(data.ph): ''}
${data.orp !== undefined ? cardContent.generateBody(data.orp): ''}
${data.tds !== undefined ? cardContent.generateBody(data.tds): ''}
</div>`;
if (config.compact) {
return html`
<div id="pool-monitor-card">
${cardContent.generateTitle(config)}
${data.temperature !== undefined ? cardContent.generateCompactBody(data.temperature): ''}
${data.ph !== undefined ? cardContent.generateCompactBody(data.ph): ''}
${data.orp !== undefined ? cardContent.generateCompactBody(data.orp): ''}
${data.tds !== undefined ? cardContent.generateCompactBody(data.tds): ''}
</div>`;
} else {
return html`
<div id="pool-monitor-card">
${cardContent.generateTitle(config)}
${data.temperature !== undefined ? cardContent.generateBody(data.temperature): ''}
${data.ph !== undefined ? cardContent.generateBody(data.ph): ''}
${data.orp !== undefined ? cardContent.generateBody(data.orp): ''}
${data.tds !== undefined ? cardContent.generateBody(data.tds): ''}
</div>`;
}

}

getConfig () {
Expand All @@ -145,7 +181,9 @@ class PoolMonitorCard extends LitElement {
config.tds_setpoint = this.config.tds_setpoint ?? 4;

config.title = this.config.title;

config.compact = this.config.compact ?? false;

config.override = this.config.override ?? false;
return config;
}

Expand All @@ -156,29 +194,28 @@ class PoolMonitorCard extends LitElement {
// console.log("config:",config);

if (config.temperature) {
data.temperature = this.calculateData('temperature', config.temperature, config.temperature_setpoint, 1,"°C", 26.5)
data.temperature = this.calculateData('temperature', config.temperature, config.temperature_setpoint, 1,"°C", 26.5, config.override)
}
if (config.ph) {
data.ph = this.calculateData('ph', config.ph, config.ph_setpoint,0.2,"pH",6.9)
data.ph = this.calculateData('ph', config.ph, config.ph_setpoint,0.2,"pH",6.9, config.override)
}
if (config.orp) {
data.orp = this.calculateData('orp', config.orp, config.orp_setpoint,50,"mV", 558)
data.orp = this.calculateData('orp', config.orp, config.orp_setpoint,50,"mV", 551, config.override)
}
if (config.tds) {
data.tds = this.calculateData('tds', config.tds, config.tds_setpoint,1,"g/L", 4,1)
data.tds = this.calculateData('tds', config.tds, config.tds_setpoint,1,"g/L", 7, 1, config.override)
}

// console.log("data:",data);
return data
}

calculateData(name, entity, setpoint, setpoint_offset, unit, override_value) {
calculateData(name, entity, setpoint, setpoint_offset, unit, override_value, override) {
const newData = {};
newData.name = name;
newData.img_src ="https://raw.githubusercontent.com/wilsto/pool-monitor-card/master/"+ name +".png"
newData.img_src ="https://raw.githubusercontent.com/wilsto/pool-monitor-card/master/resources/"+ name +".png"
newData.value = this.hass.states[entity].state;
newData.unit = unit;
const override = false
if (override){
newData.value = override_value;
}
Expand Down Expand Up @@ -213,10 +250,12 @@ class PoolMonitorCard extends LitElement {
newData.state = "Too High";
newData.color = "#e17055";
}
newData.pct = Math.max(0, Math.min(95, (Math.max(0, newData.value - (setpoint - 3 *setpoint_offset)) / (6 * setpoint_offset)) * 0.79 * 100 + 21)).toFixed(0);
newData.pct = Math.max(0, Math.min(95, (Math.max(0, newData.value - (setpoint - 3 *setpoint_offset)) / (6 * setpoint_offset)) * 0.80 * 100 + 22)).toFixed(0);
var side_offset = newData.value > setpoint ? -26 : 5 ;
var side_offset_cursor = newData.value > setpoint ? -30 : 0 ;
newData.side_align = newData.value > setpoint ? "right" : "left" ;
newData.pct_state_offset = parseFloat(newData.pct) + parseFloat(side_offset) ;
newData.pct_state_offset_cursor = parseFloat(newData.pct) + parseFloat(side_offset_cursor) ;

return newData
}
Expand Down Expand Up @@ -292,6 +331,35 @@ class cardContent {
</div>
`
}

static generateCompactBody (data) {
return html`
<!-- ##### ${data.name} section ##### -->
<div class="section-compact" >
<div style="padding-left:20px;float:left"><img src="${data.img_src}"></div>
<div class="pool-monitor-container" @click=${() =>
this._moreinfo(data.entity)}>
<div style="background-color: transparent; grid-column: 1 ; border: 0px; box-shadow:none" class="grid-item item-row"> <div style="font-size: 0.8em;text-align:left;margin:3px 2px 0 0 ">${data.unit}</div></div>
<div style="background-color: #e17055; grid-column: 2 ; border-radius: 5px 0px 0px 5px" class="grid-item item-row"> </div>
<div style="background-color: #fdcb6e; grid-column: 3 ;" class="grid-item item-row"></div>
<div style="background-color: #00b894; grid-column: 4 ;" class="grid-item item-row"></div>
<div style="background-color: #00b894; grid-column: 5 ;" class="grid-item item-row"></div>
<div style="background-color: #fdcb6e; grid-column: 6 ;" class="grid-item item-row"></div>
<div style="background-color: #e17055; grid-column: 7 ; border-radius: 0px 5px 5px 0px;" class="grid-item item-row"></div>
<div class="cursor-text" style="border-${data.side_align}: 5px solid black; text-align:${data.side_align};background-color:transparent ;left: ${data.pct_state_offset_cursor - 2}%;">${data.value} - ${data.state}</div>
</div>
<div class="pool-monitor-container-values" @click=${() =>
this._moreinfo(data.entity)}>
<div style="background-color: transparent; grid-column: 2 ; border-radius: 5px 0px 0px 5px" class="grid-item item-row"> <div style="font-size: 0.8em;text-align:right;margin:-5px 2px 0 0 ">${data.setpoint_class[0]}</div></div>
<div style="background-color: transparent; grid-column: 3 ;" class="grid-item item-row"><div style="font-size: 0.8em;text-align:right;margin:-5px 2px 0 0 ">${data.setpoint_class[1]}</div></div>
<div style="background-color: transparent; grid-column: 4 ;" class="grid-item item-row"><div style="font-size: 0.8em;color:#00b894;text-align:right;margin:-5px 2px 0 0 ">${data.setpoint_class[2]}</div></div>
<div style="background-color: transparent; grid-column: 5 ;" class="grid-item item-row"><div style="font-size: 0.8em;text-align:right;margin:-5px 2px 0 0 ">${data.setpoint_class[3]}</div></div>
<div style="background-color: transparent; grid-column: 6 ;" class="grid-item item-row"><div style="font-size: 0.8em;text-align:right;margin:-5px 2px 0 0 ">${data.setpoint_class[4]}</div></div>
<div style="background-color: transparent; grid-column: 7 ; border-radius: 0px 5px 5px 0px;" class="grid-item item-row"></div>
</div>
</div>
`
}
}

customElements.define("pool-monitor-card", PoolMonitorCard);

0 comments on commit c129e85

Please sign in to comment.