Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/custom-cards/canvas-gauge-card
The card makes it possible to use gauges from https://canvas-gauges.com/
https://github.com/custom-cards/canvas-gauge-card
Last synced: about 2 months ago
JSON representation
The card makes it possible to use gauges from https://canvas-gauges.com/
- Host: GitHub
- URL: https://github.com/custom-cards/canvas-gauge-card
- Owner: custom-cards
- Created: 2018-07-27T07:48:38.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-07T05:46:59.000Z (9 months ago)
- Last Synced: 2024-01-29T22:58:39.872Z (5 months ago)
- Language: TypeScript
- Size: 371 KB
- Stars: 153
- Watchers: 8
- Forks: 23
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
Lists
- awesome-home-assistant - Canvas Gauge Card - Use awesome gauges from canvas-gauges.com. (Dashboards / Custom Cards)
- Self-Hosting-Guide - Canvas Gauge Card - Use awesome gauges from canvas-gauges.com. (Install from Source / Smart Home Automation)
- my-awesome-stars - custom-cards/canvas-gauge-card - The card makes it possible to use gauges from https://canvas-gauges.com/ (TypeScript)
- awesome-home-assistant - Canvas Gauge Card - Use awesome gauges from canvas-gauges.com. (User Interface / Custom Lovelace UI Cards)
- awesome-home-assistant - Canvas Gauge Card - Use awesome gauges from canvas-gauges.com. (Lovelace User Interface / Custom Lovelace UI Cards)
README
# canvas-gauge-card
This card is basically deprecated and do not expect maintainence.
## Development
I recommend use vscode devcontainers. do
```shell
npm install
npm run build
```
Inside container you can build, start HA using vscode tasks.
This card allows you to use the awesome gauges at https://canvas-gauges.com/ in your lovelace GUI. This is still a very early and untested alpha version. Tested only on chrome and safari browsers.
If you want to support the developer, please support the lib devs of the canvas-gauges.
## Screens
Here is a some different screens from my own setup. But the possibilites to make your own look and feel are great.
## Usage
Download through HACS (recommended) or ...
Download the file `canvas-gauge-card.js` from the [**latest release**](https://github.com/custom-cards/canvas-gauge-card/releases/latest) to your home assistant config. Add a module link to the `canvas-gauge-card.js` file. The link needs to be the same as where you put it.
Example:
```yaml
resources:
- url: /local/custom_cards/canvas-gauge-card.js
type: module
```
Configure the card properties.
Skip `name`property if you dont want the name with the shadow area to show.
Use the javascript names of properties from the examples at https://canvas-gauges.com/documentation/examples/. Click on an example that you like, check the JS version and copy the properties to the lovelace yaml file. Just remove the ',' after copy from site.
### Example 1, simple half gauge
**ui-lovelace.yaml:**
_Notice the differences in `card_height` and `gauge/height` to get correct half size for full circle, set both to same._
```yaml
- type: custom:canvas-gauge-card
entity: sensor.processor_use
card_height: 125
gauge:
type: "radial-gauge"
title: Processor (%)
width: 220
height: 220
borderShadowWidth: 0
borderOuterWidth: 0
borderMiddleWidth: 0
borderInnerWidth: 0
minValue: 0
maxValue: 100
startAngle: 30
ticksAngle: 180
valueBox: false
majorTicks:
["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
highlights: [{ "from": 80, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
borders: false
```
### Example 2, simple half gauge with shadow text
**ui-lovelace.yaml:**
```yaml
- type: custom:canvas-gauge-card
entity: sensor.processor_use
name: Processor (%)
card_height: 145
shadow_height: 15%
font_size: 1em
gauge:
type: "radial-gauge"
width: 220
height: 220
borderShadowWidth: 0
borderOuterWidth: 0
borderMiddleWidth: 0
borderInnerWidth: 0
minValue: 0
maxValue: 100
startAngle: 90
ticksAngle: 180
valueBox: false
majorTicks:
["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
highlights: [{ "from": 80, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
borders: false
```
### Example 3, simple full gauge with shadow text
**ui-lovelace.yaml:**
```yaml
- type: custom:canvas-gauge-card
entity: sensor.processor_use
name: Processor (%)
card_height: 210
shadow_height: 12%
font_size: 1em
gauge:
type: "radial-gauge"
width: 220
height: 220
borderShadowWidth: 0
borderOuterWidth: 0
borderMiddleWidth: 0
borderInnerWidth: 0
minValue: 0
maxValue: 100
startAngle: 40
ticksAngle: 280
valueBox: false
units: "%"
majorTicks:
["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
highlights: [{ "from": 80, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
borders: false
```
### Example 4, 4 gauges in a row in a horizontal-stack
This example shows gauges with or without text. This text are placed below the actual gauge this time.
**No text version**
```yaml
---
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
entity: sensor.load_1m
card_height: 62
background_color: "#FFF"
gauge:
type: "radial-gauge"
borderShadowWidth: 0
borderOuterWidth: 0
borderMiddleWidth: 0
borderInnerWidth: 0
width: 110
height: 110
minValue: 0
maxValue: 100
startAngle: 90
ticksAngle: 180
valueBox: false
majorTicks:
["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
highlights:
[{ "from": 80, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
colorPlate: "#ddd"
borders: false
needleType: "arrow"
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: "linear"
```
**With text version**
```yaml
---
- type: horizontal-stack
cards:
- type: custom:canvas-gauge-card
entity: sensor.processor_use
card_height: 62
name: "Processor use"
shadow_height: "25%"
font_size: 0.9em
shadow_bottom: "20"
gauge:
type: "radial-gauge"
width: 110
height: 110
borderShadowWidth: 0
borderOuterWidth: 0
borderMiddleWidth: 0
borderInnerWidth: 0
minValue: 0
maxValue: 100
startAngle: 90
ticksAngle: 180
valueBox: false
majorTicks:
["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"]
minorTicks: 2
strokeTicks: true
highlights:
[{ "from": 80, "to": 100, "color": "rgba(200, 50, 50, .75)" }]
colorPlate: "#ddd"
borders: false
needleType: "arrow"
needleWidth: 2
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: "linear"
```
### Properties
Some of the properties that could be set. _italic_ is not mandatory.
| Property | Description |
| :----------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| entity | your sensor |
| name | shows the name in shadow remove to hide it |
| type | `"radial-gauge"` or `"linear-gauge"` |
| dropshadow | true to show dropshadow, false to hide |
| width | width of the gauge |
| height | height of the gauge |
| _background_color_ | sets gauge background color, transparent default if not set |
| _card_height_ | the actual height of the card, set to smaller value than gauge height if using a half guage. Not use if using a full circle gauge. |
| _font_size_ | size of name, leave out it will be dynamic |
| _shadow_height_ | xx% of total height is shadow height |
| _shadow_bottom_ | how far below the gauge in pixels the shadow should apear |
For a complete documentation of available properties, please see https://canvas-gauges.com/documentation/user-guide/configuration
## Repos
- [helto4real, Original cards](https://github.com/helto4real/lovelace-custom-cards)
- [helto4real, Tomas Hellströms, Hass config using the card](https://github.com/helto4real/hassio)
## Credits
- [Mikhus, canvas guages](https://github.com/Mikhus/canvas-gauges)