Skip to content

Commit f0d8d1f

Browse files
authored
Merge pull request #35 from tomasrudh/Performance-and-colors
Performance and colors
2 parents c808b07 + 03c29c7 commit f0d8d1f

File tree

4 files changed

+190
-66
lines changed

4 files changed

+190
-66
lines changed

README.md

Lines changed: 59 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ You might have to add a character and remove it again, before the Save button be
1515

1616
In addition to the js file is moment.js needed, but only if you plan to use dateformat or timeformat. To install moment.js add these lines in the section 'resources' in ui-lovelace.yaml:
1717
```
18-
- url: https://unpkg.com/moment@2.29.1/min/moment-with-locales.js
18+
- url: https://unpkg.com/moment@2.30.1/min/moment-with-locales.js
1919
type: js
2020
```
2121

22-
If you use the dateformat or timeformat and the hands are not shown, that probably means moment.js is not properly loaded.
22+
If you use the dateformat or timeformat and date or digital time are not shown, that probably means moment.js is not properly loaded. Refresh the cache in your browser.
2323

2424
## Configuration
2525

@@ -31,19 +31,20 @@ https://momentjs.com/docs/#/displaying/format/
3131
| Name | Type | Default | Description
3232
| --- | --- | --- | --- |
3333
| locale | String | HA setting | Locale for date and week day |
34-
| timezone | String | Browser setting | Time zone, for example Europe/Stockholm |
34+
| timezone | String | Browser setting | Time zone, for example Europe/Stockholm [Time zones](https://timezonedb.com/time-zones)|
3535
| show_timezone | Boolean | false | If true, show time zone instead of week day |
3636
| timezonedisplayname | String | | Name of the time zone to be shown |
3737
| diameter | Integer | Automatic | Diameter of the clock |
3838
| hide_secondhand | Boolean | false | If true, the second hand is hidden |
39-
| hide_weeknumber | Boolean | true | If true, the week number is hidden NOTE: default has changed to true |
39+
| hide_weeknumber | Boolean | true | If true, the week number is hidden |
4040
| hide_weekday | Boolean | false | If true, the week day is hidden |
4141
| hide_date | Boolean | false | If true, the date is hidden |
4242
| hide_facedigits | Boolean | false | If true, the hour numbers are hidden |
4343
| hide_digitaltime | Boolean | false | If true, the digital time hidden |
4444
| color_background | String | primary background color | Background color of the clock |
4545
| color_ticks | String | Silver | Color of the border ticks |
4646
| hide_minorticks | Boolean | false | Hides the minor ticks |
47+
| hide_majorticks | Boolean | false | Hides the major ticks and the outer circle |
4748
| color_facedigits | String | Silver | Color of the borde digits |
4849
| color_digitaltime | String | #CCCCCC | Color of the digital time |
4950
| color_hourhand | String | #CCCCCC | Color of the hour hand |
@@ -64,6 +65,16 @@ Themes are settings that are applied during a time interval. Any setting except
6465
| - time | time interval | A time interval in the format HHMM-HHMM, there can be multiple 'time' sections
6566
| color_background | String | Background color of the clock |
6667

68+
### Colors
69+
70+
All colors can be entered in one of four different ways:
71+
- "green" The color in plain text. [Available colors](https://www.w3.org/TR/css-color-3/#svg-color)
72+
- "#3273a8" The first two digits are the level of Red in hex, 00 - FF. The second two Green, and the last two Blue. "#000000" is black, "#FF00FF" is bright pink and "#FFFFFF" is white.
73+
- rgba(0,0,0,0) The first two number is the level of Red in decimal, 0 - 255. The second Green, the third Blue and the last is alpha. Alpha is in decimal 0 - 1, where 0 is transparent. rgba(0,0,0,1) is black, rgba(255,0,255,1) is bright pink, rgba(0,0,0,1) is white and rgba(0,0,0,0.5) is semi transparent. Note that the value should not be quoted.
74+
- "--secondary-text-color" Refers to Home Assistant CSS variables.
75+
76+
### Examples
77+
6778
![Analog clock3](https://github.com/tomasrudh/analogclock/blob/main/Images/AnalogClock3.png?raw=true)
6879

6980
```
@@ -107,3 +118,47 @@ Style 5:
107118
![Style 5](https://github.com/tomasrudh/analogclock/blob/main/Images/Style-5.png?raw=true)
108119
Style 6:
109120
![Style 6](https://github.com/tomasrudh/analogclock/blob/main/Images/Style-6.png?raw=true)
121+
122+
## Custom watch face
123+
124+
It is possible to supply your own watch face, you can do that by using a [picture-elements card](https://www.home-assistant.io/dashboards/picture-elements/) and also [card_mod](https://github.com/thomasloven/lovelace-card-mod). The trick is to set the background to transparent, this is done in two places 'rgba(0,0,0,0)'.
125+
126+
![image](https://github.com/tomasrudh/analogclock/blob/main/Images/WatchFaceRoman.png?raw=true)
127+
128+
```
129+
type: picture-elements
130+
elements:
131+
- type: custom:analog-clock
132+
style:
133+
left: 50%
134+
top: 50%
135+
diameter: 200
136+
locale: en-US
137+
hide_majorticks: true
138+
hide_minorticks: true
139+
hide_weeknumber: true
140+
hide_facedigits: true
141+
dateformat: "YYYY-MM-DD"
142+
color_background: rgba(0,0,0,0)
143+
color_HourHand: "#326ba8"
144+
color_MinuteHand: "#3293a8"
145+
color_secondhand: red
146+
color_DigitalTime: "#CCCCCC"
147+
color_FaceDigits: "#a83832"
148+
card_mod:
149+
style: |
150+
ha-card {
151+
background: rgba(0,0,0,0);
152+
}
153+
image: /local/images/WatchFaceRoman.png
154+
```
155+
156+
## Troubleshooting
157+
158+
Should the card run into a problem will an exclamation mark show in the upper left corner.
159+
160+
![image](https://github.com/tomasrudh/analogclock/blob/main/Images/Error.png?raw=true)
161+
162+
Press F12 in your browser and see the error message in the Console tab.
163+
164+
While the exclamation mark show might the card not show properly.

0 commit comments

Comments
 (0)