Skip to content

Commit

Permalink
Merge pull request #22 from alexanderwink/master
Browse files Browse the repository at this point in the history 
Add background stroke
  • Loading branch information
@iantrich
iantrich authored Jun 5, 2021
2 parents 27c331d + ff923e7 commit 7bf5818
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 1 deletion.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ Custom component for lovelace which can be used as a card or an element on a pic
| fill | string | Background color of circle | `rgba(255, 255, 255, .75)`
| stroke_width | number | Width of circle value indication ring | `6`
| stroke_color | hex code | Default stroke color | `#03a9f4`
| stroke_bg_width | number | Width of background stroke | none
| stroke_bg_color | hex code | Default stroke bg color | `#999999`
| color_stops | object | Sensor value to color mapping (see below) | none
| gradient | boolean | Whether to smoothly transition between color stops | `false`
| units | string | Custom units of measurement | none
Expand Down
10 changes: 9 additions & 1 deletion circle-sensor-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,10 @@ class CircleSensorCard extends LitElement {
.container {
position: relative;
height: 100%;
height: ${config.style.height || '100%'};
width: ${config.style.width};
top: ${config.style.top};
left: ${config.style.left};
display: flex;
flex-direction: column;
}
Expand Down Expand Up @@ -62,6 +65,11 @@ class CircleSensorCard extends LitElement {
</style>
<div class="container" id="container" on-click="${() => this._click()}">
<svg viewbox="0 0 200 200" id="svg">
<circle id="circlestrokebg" cx="50%" cy="50%" r="45%"
fill$="${config.fill || 'rgba(255, 255, 255, .75)'}"
stroke$="${config.stroke_bg_color || '#999999'}"
stroke-width$="${config.stroke_bg_width}"
transform="rotate(-90 100 100)"/>
<circle id="circle" cx="50%" cy="50%" r="45%"
fill$="${config.fill || 'rgba(255, 255, 255, .75)'}"
stroke$="${config.stroke_color || '#03a9f4'}"
Expand Down

2 comments on commit 7bf5818

@kbrohkahn
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: is required in the config based on this addition, please add to the readme.

            height: ${config.style.height || '100%'};
            width: ${config.style.width};
            top: ${config.style.top};
            left: ${config.style.left};

``

@kbrohkahn
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This also doesn't work for picture elements and probably other cards which already use style: in the config for positioning of the card. This effectively makes all the positioning happen twice, once on the card and again on the container. Was working fine with just height: 100%;

Please sign in to comment.