Skip to content

Commit c0f5499

Browse files
ciotlosmciotlosm
committed
Initial thermostat-card 0.0.1 (ciotlosm#147)
* initial commit Cleaning up some stuff. * Removing old comments * Removing shadow dom for the ha-card * Removing console logs * CSS variables Making sure we are actually an climate component Getting temperature unit from hass config updating documentation Fixing cooling color issue Renamed to match standards Included correct link in docs Added temporary image for card Fixed credits Updated MIT license Updated license again More updates to test still broken but making progress A more working version, but still height bugs The most incredible fix Added title Updated docs and stuff Improved title a bit Improved title Added todo list Added dual temperature 1st draft for inner text New update to dual temperature Middle of refactor (ciotlosm#126) * Unusable * Even more weird refactoring * Even more refactoring * More refactoring trying to hide values when overlapping Added more off exception Added tap for controls New refactor (ciotlosm#128) * Refactoring with new ranges * Corrected single target active ticks, added ring for editing * Number fixes Added thermo icon Updates to thermostat Updates to thermostat * Preparing for up/down control arrows * Fixes ciotlosm#129 * Added some away fixes * Updated TODO * Added basic temperature control * Make highlight tap configurable * Updated todo, fixed readme and added version to library * Fixed state changes * Skip service update if no change * Refactor thermo (ciotlosm#146) * Middle of refactoring * Added chevrons, still need pressed animation * Improved chevrons * Removed obsolete property * Fixed min for normal target * Added some padding for better visual * Bust cache * Added empty changelog and a few other fixes * Moved TODO in Readme * Added more FAQ * Switched lib version to 0.0.1
1 parent 4f287c2 commit c0f5499

8 files changed

+920
-1
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186
same "printed page" as the copyright notice for easier
187187
identification within third-party archives.
188188

189-
Copyright [yyyy] [name of copyright owner]
189+
Copyright 2018 Marius-Stefan Ciotlos
190190

191191
Licensed under the Apache License, Version 2.0 (the "License");
192192
you may not use this file except in compliance with the License.

‎README.md

+13
Original file line numberDiff line numberDiff line change
@@ -87,5 +87,18 @@ Please make sure you have `javascript_version: latest` in your `configuration.ya
8787

8888
This is most likely because you downloaded the [html](https://github.com/ciotlosm/custom-lovelace/blob/master/gauge-card/gauge-card.js) from gitbut instead of [raw](https://raw.githubusercontent.com/ciotlosm/custom-lovelace/master/gauge-card/gauge-card.js). That is not valid javascript. Always make sure you download using `raw` button.
8989

90+
3. For the following errors:
91+
- `Uncaught SyntaxError: Unexpected identifier`
92+
93+
You probably are using `thermostat-card` and didn't specify `module` for `type` in `resources`
94+
95+
```yaml
96+
- url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=0.1
97+
type: module
98+
```
99+
100+
## License
101+
Majority of cards use Apache License, however there are some that have their own LICENSE file.
102+
90103
## Credits
91104
- [@ciotlosm](https://github.com/ciotlosm)

‎thermostat-card/LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License
2+
3+
Original work Copyright (c) 2015 Dal Hundal
4+
Modified work Copyright (c) 2018 Marius-Stefan Ciotlos & Silas Baronda
5+
6+
Permission is hereby granted, free of charge, to any person obtaining a copy
7+
of this software and associated documentation files (the "Software"), to deal
8+
in the Software without restriction, including without limitation the rights
9+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the Software is
11+
furnished to do so, subject to the following conditions:
12+
13+
The above copyright notice and this permission notice shall be included in
14+
all copies or substantial portions of the Software.
15+
16+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
22+
THE SOFTWARE.

‎thermostat-card/README.md

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Thermostat Card
2+
3+
A simple thermostat implemented in CSS based on <a href="https://codepen.io/dalhundal/pen/KpabZB/">Nest Thermostat Control</a> by Dal Hundal
4+
(<a href="https://codepen.io/dalhundal">@dalhundal</a>) on <a href="https://codepen.io">CodePen</a>
5+
6+
![thermostat](https://user-images.githubusercontent.com/7738048/42817026-7972be8e-89d5-11e8-994f-e5f556fb46fc.png)
7+
8+
### TODO
9+
There are many things still missing, but I'll add below those that I know of
10+
- [ ] Allow canceling of schedules for thermostats like Ecobee
11+
- [ ] Allow settings Away mode
12+
- [ ] Allow changing of Opration mode
13+
- [ ] Add support for multiple entities for different functions (zwave thermostats hot/cold, tado away mode, etc)
14+
- [ ] Title scaling
15+
16+
**Options**
17+
18+
| Name | Type | Default | Description
19+
| ---- | ---- | ------- | -----------
20+
| type | string | **Required** | `custom:thermostat-card`
21+
| entity | string | **Required** | The entity id of climate entity. Example: `climate.hvac`
22+
| title | string | optional | Card title
23+
| no_card | boolean | false | Set to true to avoid the card background and use the custom element in picture-elements.
24+
| hvac | object | optional | Allows mapping of custom states or using a custom attribute for state
25+
| step | number | 0.5 | The step to use when increasing or decreasing temperature
26+
| highlight_tap | boolean | false | Show the tap area highlight when changing temperature settings
27+
| chevron_size | number | 50 | Size of chevrons for temperature adjutment
28+
| pending | number | 3 | Seconds to wait in control mode until state changes are sent back to the server
29+
| idle_zone | number | 2 | Degrees of minimum difference between set points when thermostat supports both heating and cooling
30+
31+
**hvac** object
32+
33+
| Name | Type | Default | Description
34+
| ---- | ---- | ------- | -----------
35+
| states | optional | optional | A list of states. See examples.
36+
| attribute | string | optional | An attribute of the entity to use as state
37+
38+
**Example**
39+
40+
```yaml
41+
resources:
42+
- url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
43+
type: module
44+
name: My Awesome Home
45+
views:
46+
- title: Home
47+
cards:
48+
- type: custom:thermostat-card
49+
title: Bedroom
50+
entity: climate.ecobee
51+
```
52+
53+
**Example with custom hvac_states**
54+
55+
```yaml
56+
resources:
57+
- url: /local/custom-lovelace/thermostat-card/thermostat-card.js?v=1
58+
type: module
59+
name: My Awesome Home
60+
views:
61+
- title: Home
62+
cards:
63+
- type: custom:thermostat-card
64+
title: Bedroom
65+
entity: climate.hvac
66+
chevron_size: 100
67+
hvac:
68+
states:
69+
'Off': 'off'
70+
'Cooling': 'cool'
71+
'Heaing': 'heat'
72+
attribute: operation_mode
73+
```
74+
75+
⚠️ Make sure you set type to `module` when including the resource file.
76+
77+
## License
78+
This card uses MIT License as it uses a CodePen gist.
79+
80+
## Credits
81+
[@silasb](https://github.com/silasb)

‎thermostat-card/VERSION

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
0.0.1

‎thermostat-card/changelog.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
## 0.0.1
2+
Initial release that supports versioning

‎thermostat-card/thermostat-card.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import ThermostatUI from './thermostat-card.lib.js?v=0.0.1'
2+
class ThermostatCard extends HTMLElement {
3+
constructor() {
4+
super();
5+
this.attachShadow({ mode: 'open' });
6+
}
7+
set hass(hass) {
8+
const config = this._config;
9+
const entity = hass.states[config.entity];
10+
let hvac_state;
11+
if (config.hvac.attribute)
12+
hvac_state = entity.attributes[config.hvac.attribute];
13+
else
14+
hvac_state = entity.state;
15+
const new_state = {
16+
min_value: entity.attributes.min_temp,
17+
max_value: entity.attributes.max_temp,
18+
ambient_temperature: entity.attributes.current_temperature,
19+
target_temperature: entity.attributes.temperature,
20+
target_temperature_low: entity.attributes.target_temp_low,
21+
target_temperature_high: entity.attributes.target_temp_high,
22+
hvac_state: config.hvac.states[hvac_state] || 'off',
23+
away: (entity.attributes.away_mode == 'on' ? true : false),
24+
}
25+
if (!this._saved_state ||
26+
(this._saved_state.min_value != new_state.min_value ||
27+
this._saved_state.max_value != new_state.max_value ||
28+
this._saved_state.ambient_temperature != new_state.ambient_temperature ||
29+
this._saved_state.target_temperature != new_state.target_temperature ||
30+
this._saved_state.target_temperature_low != new_state.target_temperature_low ||
31+
this._saved_state.target_temperature_high != new_state.target_temperature_high ||
32+
this._saved_state.hvac_state != new_state.hvac_state ||
33+
this._saved_state.away != new_state.away)) {
34+
this._saved_state = new_state;
35+
this.thermostat.updateState(new_state);
36+
}
37+
this._hass = hass;
38+
}
39+
40+
_controlSetPoints() {
41+
if (this.thermostat.dual) {
42+
if (this.thermostat.temperature.high != this._saved_state.target_temperature_high ||
43+
this.thermostat.temperature.low != this._saved_state.target_temperature_low)
44+
this._hass.callService('climate', 'set_temperature', {
45+
entity_id: this._config.entity,
46+
target_temp_high: this.thermostat.temperature.high,
47+
target_temp_low: this.thermostat.temperature.low,
48+
});
49+
} else {
50+
if (this.thermostat.temperature.target != this._saved_state.target_temperature)
51+
this._hass.callService('climate', 'set_temperature', {
52+
entity_id: this._config.entity,
53+
temperature: this.thermostat.temperature.target,
54+
});
55+
}
56+
}
57+
58+
setConfig(config) {
59+
// Check config
60+
if (!config.entity && config.entity.split(".")[0] === 'climate') {
61+
throw new Error('Please define an entity');
62+
}
63+
64+
// Cleanup DOM
65+
const root = this.shadowRoot;
66+
if (root.lastChild) root.removeChild(root.lastChild);
67+
68+
// Prepare config defaults
69+
const cardConfig = Object.assign({}, config);
70+
cardConfig.hvac = Object.assign({}, config.hvac);
71+
if (!cardConfig.diameter) cardConfig.diameter = 400;
72+
if (!cardConfig.pending) cardConfig.pending = 3;
73+
if (!cardConfig.idle_zone) cardConfig.idle_zone = 2;
74+
if (!cardConfig.step) cardConfig.step = 0.5;
75+
if (!cardConfig.highlight_tap) cardConfig.highlight_tap = false;
76+
if (!cardConfig.no_card) cardConfig.no_card = false;
77+
if (!cardConfig.chevron_size) cardConfig.chevron_size = 50;
78+
if (!cardConfig.num_ticks) cardConfig.num_ticks = 150;
79+
if (!cardConfig.tick_degrees) cardConfig.tick_degrees = 300;
80+
if (!cardConfig.hvac.states) cardConfig.hvac.states = { 'off': 'off', 'heat': 'heat', 'cool': 'cool', };
81+
82+
// Extra config values generated for simplicity of updates
83+
cardConfig.radius = cardConfig.diameter / 2;
84+
cardConfig.ticks_outer_radius = cardConfig.diameter / 30;
85+
cardConfig.ticks_inner_radius = cardConfig.diameter / 8;
86+
cardConfig.offset_degrees = 180 - (360 - cardConfig.tick_degrees) / 2;
87+
cardConfig.control = this._controlSetPoints.bind(this);
88+
this.thermostat = new ThermostatUI(cardConfig);
89+
90+
if (cardConfig.no_card === true) {
91+
root.appendChild(this.thermostat.container);
92+
}
93+
else {
94+
const card = document.createElement('ha-card');
95+
card.style.padding = '5%';
96+
card.appendChild(this.thermostat.container);
97+
root.appendChild(card);
98+
}
99+
this._config = cardConfig;
100+
}
101+
}
102+
customElements.define('thermostat-card', ThermostatCard);

0 commit comments

Comments
 (0)