{"id":13588808,"url":"https://github.com/nervetattoo/simple-thermostat","last_synced_at":"2025-05-15T17:02:14.755Z","repository":{"id":37818192,"uuid":"158654878","full_name":"nervetattoo/simple-thermostat","owner":"nervetattoo","description":"A different take on the thermostat card for Home Assistant ♨️","archived":false,"fork":false,"pushed_at":"2024-08-19T15:33:03.000Z","size":1413,"stargazers_count":763,"open_issues_count":160,"forks_count":113,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-01T10:12:29.002Z","etag":null,"topics":["hassio","home-assistant","home-assistant-custom","lovelace","lovelace-ui","polymer-3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nervetattoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["nervetattoo"],"custom":["https://www.buymeacoffee.com/nervetattoo/"]}},"created_at":"2018-11-22T06:51:16.000Z","updated_at":"2025-03-18T03:37:50.000Z","dependencies_parsed_at":"2024-10-21T15:41:04.612Z","dependency_job_id":null,"html_url":"https://github.com/nervetattoo/simple-thermostat","commit_stats":{"total_commits":309,"total_committers":26,"mean_commits":"11.884615384615385","dds":"0.16504854368932043","last_synced_commit":"eb0c0d5902a4a1e51d4ae3849417ea3eef7b8886"},"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fsimple-thermostat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fsimple-thermostat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fsimple-thermostat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nervetattoo%2Fsimple-thermostat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nervetattoo","download_url":"https://codeload.github.com/nervetattoo/simple-thermostat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247623008,"owners_count":20968574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hassio","home-assistant","home-assistant-custom","lovelace","lovelace-ui","polymer-3"],"created_at":"2024-08-01T15:06:57.019Z","updated_at":"2025-04-08T11:07:16.789Z","avatar_url":"https://github.com/nervetattoo.png","language":"TypeScript","funding_links":["https://github.com/sponsors/nervetattoo","https://www.buymeacoffee.com/nervetattoo/","https://www.buymeacoffee.com/nervetattoo","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":["Lovelace User Interface","Install from Source","TypeScript","User Interface","Dashboards"],"sub_categories":["Custom Lovelace UI Cards","Smart Home Automation","Custom Cards"],"readme":"# Lovelace simple thermostat card\n\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/hacs/integration)\n\nA different take on the thermostat card for Home Assistant Lovelace UI.\nThe aim is to provide a card with simpler interactions that are easier to use and take up less space, as well as provide more modularity to tweak the card. For example the abiltity to embed sensor values that are relevant to your thermostat (like humidity, energy usage, hours on +++).\n\n\u003ca href=\"https://www.buymeacoffee.com/nervetattoo\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=nervetattoo\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Cookie\u0026outline_colour=000000\u0026coffee_colour=ffffff\"\u003e\u003c/a\u003e\n\n![Example thermostat](https://github.com/nervetattoo/simple-thermostat/raw/master/thermostat-card.png)\n\n## Compact mode\n\n![Compact configuration](https://github.com/nervetattoo/simple-thermostat/raw/master/simple-thermostat-compact.png)\n\nHide everything but sensors and temperature control:\n\n```yaml\ntype: custom:simple-thermostat\nentity: climate.hvac\nlayout:\n  step: row\nheader: false\ncontrol: false\n```\n\n## Note about 2.0 release\n\nThe 2.0 release is most likely a breaking change for the majority of users.\nMake sure you read the release notes and inspect the new configuration format.\nIt offers more flexibility and features as well as a number of bug fixes.\n\n## Requirements\n\nHome Assistant 0.84 or higher\n\n## Installation\n\n1. Install via [HACS](https://hacs.xyz/).\n2. Add to resources:\n   ```yaml\n   url: /hacsfiles/simple-thermostat/simple-thermostat.js\n   type: module\n   ```\n\n\u003cdetails\u003e\n   \u003csummary\u003eManual install\u003c/summary\u003e\n1. Download the `simple-thermostat.js` from the [latest release](https://github.com/nervetattoo/simple-thermostat/releases/latest) and store it in your `configuration/www` folder.\n   _Previously you could download the source file from Github but starting from the 0.14 release that is no longer possible. If you try to do so it will crash_\n2. Configure Lovelace to load the card:\n\n```yaml\nresources:\n  - url: /local/simple-thermostat.js?v=1\n    type: module\n```\n\n\u003c/details\u003e\n\n## Available configuration options:\n\n- `entity` _string_: The thermostat entity id **required**\n- `header` _false|Header object_: See [section](#header-config) about header config\n- `setpoints` _false|Setpoints object_: See [section](#setpoints-config) about setpoints config\n- `layout` _Layout object_:\n  - `step` _row|column_: Where to render the setpoint up/down buttons\n  - `mode` _object_: Disable elements for all modes\n    - `names` _boolean_\n    - `icons` _boolean_\n    - `headings` _boolean_\n  - `sensors`: _object_\n    - `type`: _list|table_: How to render the sensors\n    - `labels`: _boolean_: Whether to show labels/headings or not. Hiding here overrides hiding under root level `sensors` config\n- `service` _object_: Must specify both domain+service if overriding\n  - `domain` _string_: Override the service call domain\n  - `service` _string_: Override the service call name\n  - `data` _object_: Send extra data with the service call\n- `unit` _string|bool_: Override the unit to display. Set to false to hide unit\n- `decimals` _number_: Specify number of decimals to use: 1 or 0\n- `fallback` _string_: Specify a text to display if a valid set point can't be determined. Defaults to `N/A`\n- `step_size` _number_: Override the default 0.5 step size for increasing/decreasing the temperature\n- `label` _object_: Override untranslated labels\n  - `temperature`: _string_ Override Temperature label\n  - `state`: _string_ Override State label\n- `hide` _object_: Control specifically information fields to show. Defaults to showing everything\n  - `temperature`: _bool_ (Default to `false`)\n  - `state`: _bool_ (Default to `false`)\n- `control` _object|array_ (From 0.27)\n  - `hvac|fan|preset|swing` _object|bool_: The key of the mode type (hvac, preset, fan, swing)\n    - `_name` _string_: Override the name of the mode type\n    - `_hide_when_off` _bool_: Hides the mode type selection row when the entity is off. Defaults to false shown\n    - `{mode}` _string_: Name of mode type to control\n      - `name` _string|bool_: Specify a custom name or set to `false` to show only the icon\n      - `icon` _string|bool_: Specify a custom icon or set to `false` to not show icon\n- `sensors` _array|false_\n  - `entity` _string_: A sensor value entity id\n  - `name` _string_: Specify a sensor name to use instead of the default friendly_name\n  - `icon` _string_: Specify an icon to use instead of a name\n  - `attribute` _string_: The key for an attribute to use instead of state. If this sensor has no entity it will use the main entity's attributes\n  - `unit` _string_: When specifying an attribute you can manually set the unit to display\n  - `decimals` _number_: If you know your sensors has a numeric value you can round it to a number of decimals.\n  - `type` _relativetime_: Special data types that result in special handling.\n\n## Header config\n\n\u003e New in 2.0. Old ways of defining toggle_entity, faults, name and icon are no longer supported\n\nHiding the entire header is done with `header: false`\nIf you pass an object you can pass any of the following keys.\nExample:\n\n```yaml\nheader:\n  name: Overriden name\n  icon: mdi:sofa\n  toggle:\n    entity: switch.light\n    name: Light\n  faults:\n    - entity: switch.light\n```\n\nFull header config spec:\n\n- `name` _string_: Override the card name. Default is to use the friendly_name of the thermostat provided\n- `toggle` _object_: An entity id to create a toggle in the header for. This gives the option to control a separate entity which can be related to the thermostat entity (like a switch, or input_boolean)\n  - `entity` _string_: The entity id to create the header for\n  - `name` _string|bool_: Set the label to be shown to the left of the toggle. Set to true to show the friendly name of the toggle_entity\n- `faults` _array|false_: Show fault conditions as active/inactive icons in the header\n  - `entity` _string_: A binary sensor entity id\n  - `icon` _string_: Override the entity icon\n  - `hide_inactive` _bool_: Hide the fault icon when inactive (Default to `false`)\n- `icon` _string|object_: Show an icon next to the card name. You can also pass an object to specify specific icons. Current value is taken from attributes.hvac_action when available, or state as fallback.\n  - `auto`: _string_ Use this icon for hvac_action auto. Default mdi:radiator\n  - `cooling`: _string_ Use this icon for hvac_action cooling. Default mdi:snowflake\n  - `fan`: _string_ Use this icon for hvac_action fan. Default mdi:fan\n  - `heating`: _string_ Use this icon for hvac_action heating. Default mdi:radiator\n  - `idle`: _string_: Use this icon for hvac_action idle. Default mdi:radiator-disabled\n  - `\"off\"`: _string_ Use this icon for hvac_action off. Default mdi:radiator-off\n  - `auto`: _string_ Use this icon for state auto. Default hass:autorenew\n  - `cool`: _string_ Use this icon for state cooling. Default hass:snowflake\n  - `dry`: _string_: Use this icon for state dry. Default hass:water-percent\n  - `fan_only`: _string_ Use this icon for state fan. Default hass:fan\n  - `heat`: _string_ Use this icon for state heat. Default hass:autorenew\n  - `heat_cool`: _string_: Use this icon for state heat_cool. Default hass:fire\n  - `\"off\"`: _string_ Use this icon for state off. Default hass:power\n\n## Setpoints config\n\n\u003e New in 2.0. Old ways of hiding setpoints is deprecated\n\nIf you specify setpoints manually you must include all setpoints you want included.\nNormally there are only two possibilities here; `temperature` or `target_temp_high` + `target_temp_low`. Single or dual thermostats. But, theoretically there could be multiple setpoints and this aims to support any permutation.\nThe new feature in 2.0 is the ability to hide one of the two setpoints for dual thermostats.\n\nTo manually specify to use the `temperature` attribute as a setpoint you do:\n\n```yaml\nsetpoints:\n  temperature:\n```\n\nFor dual thermostats:\n\n```yaml\nsetpoints:\n  target_temp_low:\n  target_temp_high:\n```\n\nTo hide one of the dual setpoints:\n\n```yaml\nsetpoints:\n  target_temp_low:\n    hide: true\n  target_temp_high:\n```\n\nFor climate devices supporting more setpoints you can include as many as you like.\nAutomatic detection of set points only work for the single/dual cases.\n\n## Usage of the control config\n\nIn 0.27, in order to both support changes in the climate domain and to support controlling all modes like hvac, preset, fan and swing modes the old `modes` configuration have been removed and replaced with a `control` config.\n\nThe `control` config is most easily explained using a few examples as it supports both a simplified definition using just an array to list the types of modes to control. By default, with no config, it will show `hvac` and `preset` (if the entity supports it). You can replicate the default manually like this:\n\n```yaml\ncontrol:\n  - hvac\n  - preset\n```\n\nThis will list all modes for both types. You can get more fine grained control by switching to an object format and taking control of specific modes:\n\n```yaml\ncontrol:\n  preset:\n    away: true\n    none:\n      name: Not set\n```\n\nWhat is worth noticing is that there is no merging of the default any more, so with this config you will not get `hvac_mode` displayed. If you still want it to display like default you need to set:\n\n```yaml\ncontrol:\n  preset:\n    away: true\n    none:\n      name: Not set\n  hvac: true\n```\n\nPlease note that you need to quote off/on mode keys to not have them interprented as true/false.\n\n```yaml\ncontrol:\n  hvac:\n    off: will not work\n    \"off\": works\n```\n\n## Example usage:\n\n```yaml\ncards:\n  - type: 'custom:simple-thermostat'\n    entity: climate.my_room\n    step_size: 1\n    sensors:\n      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy\n      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_power\n        name: Energy today\n      - attribute: min_temp\n        name: Min temp\n    header:\n      faults:\n        - entity: binary_sensor.my_room_communications_fault\n        - entity: binary_sensor.my_room_low_battery_fault\n          icon: mdi:battery-low\n      toggle:\n        entity: switch.pump_relay\n    control:\n      hvac:\n        some_mode: false\n        another_mode: false\n        'off':\n          name: Make it cold\n          icon: false\n        'on':\n          name: false\n          icon: mdi:whitewalker\n```\n\n```yaml\ncards:\n  - type: 'custom:simple-thermostat'\n    entity: climate.my_room\n    step_size: 1\n    sensors:\n      - entity: sensor.fibaro_system_fgwpef_wall_plug_gen5_energy\n    header:\n      toggle:\n        entity: switch.pump_relay\n        name: Control the pump\n```\n\n## CSS vars for theming\n\nThe card uses the following CSS variables:\n\n| Var name                    | Default value                           | Usage                                                |\n| --------------------------- | --------------------------------------- | ---------------------------------------------------- |\n| --st-font-size-xl           | var(--paper-font-display3\\_-_font-size) | Used for target temperature                          |\n| --st-font-size-l            | var(--paper-font-display2\\_-_font-size) | Unused at the moment                                 |\n| --st-font-size-m            | var(--paper-font-title\\_-_font-size)    | Used for target temperature unit                     |\n| --st-font-size-title        | var(--ha-card-header-font-size, 24      | Font size for card heading                           |\n| --st-font-size-sensors      | var(--paper-font-subhead\\_-_font-size)  | Font size for sensors                                |\n| --st-spacing                | 4px                                     | Base unit for spacing. Used in multiples many places |\n| --st-mode-active-background | var(--primary-color)                    | Background color for active mode button              |\n| --st-mode-active-color      | var(--text-primary-color, #fff)         | Text color for active mode button                    |\n| --st-mode-background        | #dff4fd                                 | Background color for inactive mode button            |\n| --st-toggle-label-color     | var(--text-primary-color)               | Text color for toggle label                          |\n| --st-font-size-toggle-label | var(--paper-font-subhead\\_-_font-size)  | Font size for toggle label                           |\n| --st-fault-inactive-color   | var(--secondary-background-color)       | Icon color for inactive faults                       |\n| --st-fault-active-color     | var(--accent-color)                     | Icon color for active faults                         |\n\nThese variables can be changed globally in the current theme or on each card via card-mod.\n\n### Example using custom theme\n\nExample that makes everything smaller and more compact except sensors that gets blown up completely.\n\n```yaml\nexample-theme:\n  st-font-size-xl: 24px\n  st-font-size-m: 20px\n  st-font-size-title: 20px\n  st-font-size-sensors: 30px\n  st-spacing: 2px\n```\n\n### Example using card-mod\n\nSame example as above, but will only apply to a single card.\n\n```yaml\ntype: 'custom:simple-thermostat'\nstyle: |\n  ha-card {\n    --st-font-size-xl: 24px;\n    --st-font-size-m: 20px;\n    --st-font-size-title: 20px;\n    --st-font-size-sensors: 30px;\n    --st-spacing: 2px;\n  }\n  ...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervetattoo%2Fsimple-thermostat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnervetattoo%2Fsimple-thermostat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnervetattoo%2Fsimple-thermostat/lists"}