From 7664724a60cd729006b7027035e33785ca4232fd Mon Sep 17 00:00:00 2001
From: Alexander Winkler <alexanderwink@gmail.com>
Date: Fri, 4 Sep 2020 11:23:15 +0200
Subject: [PATCH 1/4] Add background stroke

---
 circle-sensor-card.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/circle-sensor-card.js b/circle-sensor-card.js
index b4319af..e95b51e 100644
--- a/circle-sensor-card.js
+++ b/circle-sensor-card.js
@@ -62,6 +62,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 || '#03a9f4'}"
+            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'}"

From 5f070846b565fd0284c78ee58a94bed25de8dc04 Mon Sep 17 00:00:00 2001
From: Alexander Winkler <alexanderwink@gmail.com>
Date: Fri, 4 Sep 2020 11:27:06 +0200
Subject: [PATCH 2/4] Set default background stroke color to something useful

---
 circle-sensor-card.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/circle-sensor-card.js b/circle-sensor-card.js
index e95b51e..4a31cbb 100644
--- a/circle-sensor-card.js
+++ b/circle-sensor-card.js
@@ -64,7 +64,7 @@ class CircleSensorCard extends LitElement {
         <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 || '#03a9f4'}"
+            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%"

From a452df927521e207bc07388d12db7b324d794ef3 Mon Sep 17 00:00:00 2001
From: Alexander Winkler <alexanderwink@gmail.com>
Date: Tue, 29 Sep 2020 13:53:13 +0200
Subject: [PATCH 3/4] Fix sizing

---
 circle-sensor-card.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/circle-sensor-card.js b/circle-sensor-card.js
index 4a31cbb..bccc891 100644
--- a/circle-sensor-card.js
+++ b/circle-sensor-card.js
@@ -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;
           }

From ff923e77384228a02ac15239e42fe9d1f69f35e5 Mon Sep 17 00:00:00 2001
From: Alexander Winkler <alexanderwink@gmail.com>
Date: Tue, 29 Sep 2020 13:57:38 +0200
Subject: [PATCH 4/4] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 7a075c5..586e7df 100644
--- a/README.md
+++ b/README.md
@@ -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