Skip to content

Commit

Permalink
added custom theme options
Browse files Browse the repository at this point in the history
  • Loading branch information
Villhellm committed Aug 17, 2020
1 parent f1179ca commit 49dc4e8
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 4 deletions.
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ A simple analog clock card for Home Assistant. Colors are based on your current
| show_city | boolean | **Optional** | Display the timezone city beneath the clock
| caption | string | **Optional** | Caption to display under the clock. This will override both show_city and show_continent
| display_date | string | **Optional** | Display the current Date object. See below for format options
| theme | object | **Optional** | Change the theme colors manually. Theme options below


## Display date string format options
Expand All @@ -39,6 +40,16 @@ A simple analog clock card for Home Assistant. Colors are based on your current
| DD | current day with leading zero eg: `06`
| D | current day eg: `6`

## Theme options
All theme options can be set with a CSS valid color option.

| Name | Type | Requirement | Description
| ---- | ---- | ------- | -----------
| background | string | **Optional** | Clock face background color
| hands | string | **Optional** | Color of the hands and clock border (if `border` is not defined)
| numbers | string | **Optional** | Color of the numbers
| border | string | **Optional** | Color of the clock face border

## Example Configuration

```yaml
Expand All @@ -48,6 +59,11 @@ A simple analog clock card for Home Assistant. Colors are based on your current
disable_seconds: true #OPTIONAL
caption: "Corporate"
display_date: "MM/DD/YY"
theme:
background: black
hands: orange
numbers: white
border: grey
```
[Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
9 changes: 5 additions & 4 deletions dist/clock-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ class ClockCard extends HTMLElement {
set hass(hass) {
if (!this.content) {
var config = this.config;
var theme = config.theme ? config.theme : {};
var clock_size = config.size ? config.size : 300;
const card = document.createElement('ha-card');
this.content = document.createElement('div');
Expand Down Expand Up @@ -93,9 +94,9 @@ class ClockCard extends HTMLElement {
function drawFace(ctx, radius) {
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-background-color');
ctx.fillStyle = theme.background ? theme.background : getComputedStyle(document.documentElement).getPropertyValue('--primary-background-color');
ctx.fill();
ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
ctx.strokeStyle = theme.border ? theme.border : theme.hands ? theme.hands : getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
ctx.lineWidth = radius * 0.03;
ctx.stroke();
ctx.beginPath();
Expand All @@ -112,7 +113,7 @@ class ClockCard extends HTMLElement {
ctx.textAlign = "center";
for (num = 1; num < 13; num++) {
ang = num * Math.PI / 6;
ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
ctx.fillStyle = theme.numbers ? theme.numbers : getComputedStyle(document.documentElement).getPropertyValue('--primary-text-color');
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
Expand Down Expand Up @@ -158,7 +159,7 @@ class ClockCard extends HTMLElement {
}

function drawHand(ctx, pos, length, width) {
ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
ctx.strokeStyle = theme.hands ? theme.hands : getComputedStyle(document.documentElement).getPropertyValue('--accent-color');
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
Expand Down

0 comments on commit 49dc4e8

Please sign in to comment.