├── hacs.json ├── README.md ├── bignumber-card.js └── LICENSE /hacs.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bignumber-card", 3 | "render_readme": true 4 | } 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Big number card 2 | 3 | A simple card to display big numbers for sensors. It also supports severity levels as background. 4 | 5 | ![bignumber](https://user-images.githubusercontent.com/7738048/42536247-262b74e0-849a-11e8-8ed1-967302b73e03.gif) 6 | 7 | **Options** 8 | 9 | | Name | Type | Default | Description 10 | | ---- | ---- | ------- | ----------- 11 | | type | string | **Required** | `custom:bignumber-card` 12 | | title | string | optional | Name to display on card 13 | | scale | string | 50px | Base scale for card: '50px' 14 | | entity | string | **Required** | `sensor.my_temperature` 15 | | attribute | string | optional | the entity attribute you want to display e.g. `current_temperature`. The entity state will be shown if not defined. 16 | | min | number | optional | Minimum value. If specified you get bar display 17 | | max | number | optional | Maximum value. Must be specified if you added min 18 | | color | string | `var(--primary-text-color)` | Default font color. Can be either hex or HA variable. Example: 'var(--secondary-text-color)' 19 | | bnStyle | string| `var(--label-badge-blue)` | Default bar color. Can be either hex or HA variable. Example: 'var(--label-badge-green)' 20 | | from | string | left | Direction from where the bar will start filling (must have min/max specified) 21 | | severity | list | optional | A list of severity objects. Items in list must be ascending based on 'value' 22 | | hideunit | boolean | optional | hide the unit of measurement if set to true. If absent, unit of measurement will be shown 23 | | noneString | string | optional | String to use for value if value == None 24 | | noneCardClass | string | optional | CSS class to add to card if value == None 25 | | noneValueClass | string | optional | CSS class to add to value if value == None 26 | | round | int | optional | Number of decimals to round to. (If not present, do not round.) 27 | 28 | 29 | #### Severity object 30 | 31 | | Name | Type | Default | Description 32 | | ---- | ---- | ------- | ----------- 33 | | value | number | **Required** | Value until which to use this severity 34 | | bnStyle | string | **Required** | Color of severity. Can be either hex or HA variable. Example: 'var(--label-badge-green)' 35 | | color | string | `var(--primary-text-color)` | Font color of the severity. Can be either hex or HA variable. Example: 'var(--secondary-text-color)' 36 | 37 | ### WARNINGS 38 | - Make sure you use ascending object values to have consistent behaviour 39 | - Values are the upper limit until which that severity is applied 40 | - Note there is a **breaking change** with this release. In order to add the flexibility of using [card-mod](https://github.com/thomasloven/lovelace-card-mod) styling, the `style` configuration options have been changed to `bnStyle`. 41 | 42 | **Example** 43 | 44 | ```yaml 45 | - type: custom:bignumber-card 46 | title: Humidity 47 | entity: sensor.outside_humidity 48 | scale: 30px 49 | from: bottom 50 | min: 0 51 | max: 100 52 | hideunit: true 53 | color: '#000000' 54 | bnStyle: 'var(--label-badge-blue)' 55 | severity: 56 | - value: 70 57 | bnStyle: 'var(--label-badge-green)' 58 | - value: 90 59 | bnStyle: 'var(--label-badge-yellow)' 60 | - value: 100 61 | bnStyle: 'var(--label-badge-red)' 62 | color: '#FFFFFF' 63 | ``` 64 | 65 | ### Handling None values 66 | 67 | If your sensor may result in `None` (for instance if it is offline), you may wish to handle that separately. Here is an example, which uses [card-mod](https://github.com/thomasloven/lovelace-card-mod) to add special styling for the `None` case. 68 | 69 | 70 | ```yaml 71 | - type: custom:bignumber-card 72 | title: Humidity 73 | entity: sensor.outside_humidity 74 | scale: 30px 75 | from: bottom 76 | min: 0 77 | max: 100 78 | color: '#000000' 79 | bnStyle: 'var(--label-badge-blue)' 80 | severity: 81 | - value: 70 82 | bnStyle: 'var(--label-badge-green)' 83 | - value: 90 84 | bnStyle: 'var(--label-badge-yellow)' 85 | - value: 100 86 | bnStyle: 'var(--label-badge-red)' 87 | color: '#FFFFFF' 88 | noneString: Offline 89 | noneCardClass: none-card-class 90 | noneValueClass: none-value-class 91 | style: | 92 | .none-card-class { 93 | background-color: yellow; 94 | } 95 | .none-value-class { 96 | font-size: 22px !important; 97 | } 98 | ``` -------------------------------------------------------------------------------- /bignumber-card.js: -------------------------------------------------------------------------------- 1 | class BigNumberCard extends HTMLElement { 2 | _DEFAULT_STYLE(){return 'var(--label-badge-blue)';} 3 | _DEFAULT_COLOR(){return 'var(--primary-text-color)';} 4 | 5 | constructor() { 6 | super(); 7 | this.attachShadow({ mode: 'open' }); 8 | } 9 | setConfig(config) { 10 | if (!config.entity) { 11 | throw new Error('Please define an entity'); 12 | } 13 | 14 | const root = this.shadowRoot; 15 | if (root.lastChild) root.removeChild(root.lastChild); 16 | const cardConfig = Object.assign({}, config); 17 | if (!cardConfig.scale) cardConfig.scale = "50px"; 18 | if (!cardConfig.from) cardConfig.from = "left"; 19 | if (!cardConfig.opacity) cardConfig.opacity = "0.5"; 20 | if (!cardConfig.noneString) cardConfig.nonestring = null; 21 | if (!cardConfig.noneCardClass) cardConfig.noneCardClass = null; 22 | if (!cardConfig.noneValueClass) cardConfig.noneValueClass = null; 23 | this.isNoneConfig = Boolean(cardConfig.noneString || cardConfig.noneCardClass || cardConfig.noneValueClass) 24 | 25 | const card = document.createElement('ha-card'); 26 | const content = document.createElement('div'); 27 | content.id = "value" 28 | const title = document.createElement('div'); 29 | title.id = "title" 30 | title.textContent = cardConfig.title; 31 | const style = document.createElement('style'); 32 | style.textContent = ` 33 | ha-card { 34 | text-align: center; 35 | --bignumber-color: ${this._getColor(null, cardConfig)}; 36 | --bignumber-fill-color: ${this._getStyle(null, cardConfig)}; 37 | --bignumber-percent: 100%; 38 | --bignumber-direction: ${cardConfig.from}; 39 | --base-unit: ${cardConfig.scale}; 40 | padding: calc(var(--base-unit)*0.6) calc(var(--base-unit)*0.3); 41 | background: linear-gradient(to var(--bignumber-direction), var(--card-background-color) var(--bignumber-percent), var(--bignumber-fill-color) var(--bignumber-percent)); 42 | } 43 | #value { 44 | font-size: calc(var(--base-unit) * 1.3); 45 | line-height: calc(var(--base-unit) * 1.3); 46 | color: var(--bignumber-color); 47 | } 48 | #value small{opacity: ${cardConfig.opacity}} 49 | #title { 50 | font-size: calc(var(--base-unit) * 0.5); 51 | line-height: calc(var(--base-unit) * 0.5); 52 | color: var(--bignumber-color); 53 | } 54 | `; 55 | card.appendChild(content); 56 | card.appendChild(title); 57 | card.appendChild(style); 58 | card.addEventListener('click', event => { 59 | this._fire('hass-more-info', { entityId: cardConfig.entity }); 60 | }); 61 | root.appendChild(card); 62 | this._config = cardConfig; 63 | } 64 | 65 | _fire(type, detail, options) { 66 | const node = this.shadowRoot; 67 | options = options || {}; 68 | detail = (detail === null || detail === undefined) ? {} : detail; 69 | const event = new Event(type, { 70 | bubbles: options.bubbles === undefined ? true : options.bubbles, 71 | cancelable: Boolean(options.cancelable), 72 | composed: options.composed === undefined ? true : options.composed 73 | }); 74 | event.detail = detail; 75 | node.dispatchEvent(event); 76 | return event; 77 | } 78 | 79 | _computeSeverity(stateValue, sections) { 80 | if (stateValue === undefined || stateValue === null) return; 81 | const numberValue = Number(stateValue); 82 | for (const section of sections) { 83 | if (numberValue <= section.value) return section; 84 | } 85 | } 86 | 87 | _getColor(entityState, config) { 88 | if (config.severity) { 89 | const severity = this._computeSeverity(entityState, config.severity); 90 | if (severity && severity.color) return severity.color; 91 | } 92 | if (config.color) return config.color; 93 | return this._DEFAULT_COLOR(); 94 | } 95 | 96 | _getStyle(entityState, config) { 97 | if (config.severity) { 98 | const severity = this._computeSeverity(entityState, config.severity); 99 | if (severity && severity.bnStyle) return severity.bnStyle; 100 | } 101 | if (config.bnStyle) return config.bnStyle; 102 | return this._DEFAULT_STYLE(); 103 | } 104 | 105 | _translatePercent(value, min, max) { 106 | return 100-100 * (value - min) / (max - min); 107 | } 108 | 109 | set hass(hass) { 110 | const config = this._config; 111 | const root = this.shadowRoot; 112 | const entityState = config.attribute 113 | ? hass.states[config.entity].attributes[config.attribute] 114 | : hass.states[config.entity].state; 115 | const measurement = hass.states[config.entity].attributes.unit_of_measurement || ""; 116 | 117 | if (entityState !== this._entityState) { 118 | if (config.min !== undefined && config.max !== undefined) { 119 | root.querySelector("ha-card").style.setProperty('--bignumber-percent', `${this._translatePercent(entityState, config.min, config.max)}%`); 120 | } 121 | root.querySelector("ha-card").style.setProperty('--bignumber-fill-color', `${this._getStyle(entityState, config)}`); 122 | root.querySelector("ha-card").style.setProperty('--bignumber-color', `${this._getColor(entityState, config)}`); 123 | this._entityState = entityState 124 | let value = (config.round == null ? entityState : parseFloat(entityState).toFixed(config.round)) 125 | if (config.hideunit==true) 126 | { root.getElementById("value").textContent = `${value}`; } 127 | else 128 | { root.getElementById("value").innerHTML = `${value}${measurement}`; } 129 | if (this.isNoneConfig){ 130 | if (isNaN(value)) { 131 | if (config.noneString) { 132 | root.getElementById("value").textContent = config.noneString; 133 | } 134 | if (config.noneCardClass) { 135 | root.querySelector("ha-card").classList.add(config.noneCardClass) 136 | } 137 | if (config.noneValueClass) { 138 | root.getElementById("value").classList.add(config.noneValueClass) 139 | } 140 | } else { 141 | root.querySelector("ha-card").classList.remove(config.noneCardClass) 142 | root.getElementById("value").classList.remove(config.noneValueClass) 143 | } 144 | } 145 | } 146 | root.lastChild.hass = hass; 147 | } 148 | 149 | getCardSize() { 150 | return 1; 151 | } 152 | } 153 | 154 | customElements.define('bignumber-card', BigNumberCard); 155 | 156 | // Configure the preview in the Lovelace card picker 157 | window.customCards = window.customCards || []; 158 | window.customCards.push({ 159 | type: 'bignumber-card', 160 | name: 'Big number card', 161 | preview: false, 162 | description: 'A simple card to display big numbers for sensors. It also supports severity levels as background.' 163 | }); 164 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | --------------------------------------------------------------------------------