with the lack of a decent Barometer card, I decdied to use the hourshoe custom gauge card to make my own combined with picture-entities card. Unless someone knows of a more suitible card?
I love this! Care to share the yaml for it?
Looks really good! Maybe combine the several single cards in a stack-in-card?
Yes I am looking for barometer card. Some discussion here
My next job is to see whether this can be installed
Only thing you are missing is tides!
Edit: yaml for horseshoe gauge would be great
the barometer is still in progress, when I have time I will add more to it and change some colors
you need to add these to your www (local foleder) in a folder called weather 
then put the card into a grid card (even if its just for this one card to keep the respnsiveness of it)
the code referancing the pictures adjust them to position, i done this over a couple of weeks to get the right levels for the right weather. the only one not 100% for position is the storm one as we have not had one yet.
type: picture-elements
image: /local/blank1.png
elements:
- type: icon
icon: mdi:weather-sunny
show_name: false
style:
width: 100%
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.gw2000a_relative_pressure
decimals: 1
name: Barometer
attributes: pressure
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 85
styles:
- font-size: 2em;
- opacity: 0.9;
horseshoe_scale:
min: 980
max: 1060
color_stops:
'970': '#193471'
'1020': '#999ab8'
'1038': '#f7ff00'
'1060': '#ffc31f'
style:
top: 79%
left: 50%
width: 100%
style: |
ha-card {
box-shadow: none;
}
- type: image
image: /local/weather/sunny.png
style:
top: 105%
left: 75%
width: 15%
- type: image
image: /local/weather/overcast.png
style:
top: 45%
left: 73%
width: 15%
- type: image
image: /local/weather/cloudy.png
style:
top: 30%
left: 50%
width: 15%
- type: image
image: /local/weather/rain.png
style:
top: 60%
left: 25%
width: 15%
- type: image
image: /local/weather/storm.png
style:
top: 105%
left: 25%
width: 15%
- type: custom:mini-graph-card
entities:
- sensor.gw2000a_absolute_pressure
show:
icon: false
name: false
state: false
style:
top: 180%
left: 50%
width: 100%
background: transparent
card_mod:
class: hki
style: |
ha-card {
box-shadow: none;
background: transparent;
}
1 Like
Great, that works well! I love your entire weather page… would you mind sharing the yaml for the whole thing?
Thanks!
I’ll share all tomorrow as I am out until the morning.
First requirements
Custom Button card
card mod
Horshoe card
uv index card
Rain Gauge Card
Compass card
Second create a new page view type side bar
go to windy site https://www.windy.com/, find your location, I select rain here as it will show the rain clouds, click on the burger menu and click embed on web page, then select box include spot forcast, from the code it gives you say
<iframe width="650" height="450" src="https://embed.windy.com/embed2.html?lat=51.153&lon=0.929&detailLat=51.190&detailLon=0.929&width=650&height=450&zoom=11&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"></iframe>
Remove the iframe stuff and the begining so your left with only the address in this layout
https://embed.windy.com/embed2.html?lat=51.153&lon=0.929&detailLat=51.190&detailLon=0.929&width=650&height=450&zoom=11&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=true&metricWind=default&metricTemp=default&radarRange=-1" frameborder="0"
Then add card on the page and copy and paste this code and replace with your http from windy
type: vertical-stack
cards:
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=51.128&lon=0.615&detailLat=51.282&detailLon=0.615&width=650&height=450&zoom=9&level=surface&overlay=rain&product=ecmwf&menu=&message=&marker=&calendar=now&pressure=true&type=map&location=coordinates&detail=true&metricWind=mph&metricTemp=%C2%B0C&radarRange=-1%22%20frameborder=%220%22
aspect_ratio: 50%
then add another but grid with 6 columns
this is the code for those, but obviously replace with your entity
type: custom:button-card
entity: sensor.gw2000a_solar_lux #replace this with your entity
name: Solar Lux #replace this with your name
color: auto
size: 25%
show_name: true
show_icon: true
show_state: true
tap_action:
action: more-info
haptic: medium
styles:
card:
- aspect-ratio: 1/1
- border-radius: var(--ha-card-border-radius)
- box-shadow: var(--ha-card-box-shadow)
- border-style: var(--ha-card-border-style)
- border-width: var(--ha-card-border-width)
- border-color: var(--ha-card-border-color)
- opacity: 1
label:
- justify-self: start
- padding: 0px 10px
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- top: '-28%'
- left: '-29%'
name:
- justify-self: start
- padding: 0px 10px
- font-weight: var(--name-font-weight)
- font-family: var(--font-family)
- font-size: 15px
- color: var(--name-color)
state:
- font-size: 20px
- font-family: var(--font-family)
- padding: 10px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: var(--state-font-weight)
- color: var(--state-color)
card_mod:
Use this card as template for all 6 cards, I left options in you might not need incase you want to play
After you have done that it is time to add the side bar cards
first add a grid card, the replace code with this
square: false
type: grid
cards:
- type: custom:compass-card
header:
title:
value: null
indicator_sensors:
- sensor: sensor.gw2000a_wind_direction #replace this with your entity
value_sensors:
- sensor: sensor.gw2000a_wind_speed #replace this with your entity
compass:
north:
show: true
- type: picture-elements
image: /local/blank1.png
elements:
- type: icon
icon: mdi:weather-sunny
show_name: false
style:
width: 100%
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.gw2000a_relative_pressure #replace this with your entity
decimals: 1
name: Barometer
attributes: pressure
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 85
styles:
- font-size: 2em;
- opacity: 0.9;
horseshoe_scale:
min: 980
max: 1060
color_stops:
'970': '#193471'
'1020': '#999ab8'
'1030': '#f7ff00'
'1060': '#ff0000'
style:
top: 79%
left: 50%
width: 100%
style: |
ha-card {
box-shadow: none;
}
- type: image
image: /local/weather/sunny.png
style:
top: 105%
left: 75%
width: 15%
- type: image
image: /local/weather/overcast.png
style:
top: 45%
left: 73%
width: 15%
- type: image
image: /local/weather/cloudy.png
style:
top: 30%
left: 50%
width: 15%
- type: image
image: /local/weather/rain.png
style:
top: 60%
left: 25%
width: 15%
- type: image
image: /local/weather/storm.png
style:
top: 105%
left: 25%
width: 15%
- type: custom:mini-graph-card
entities:
- sensor.gw2000a_absolute_pressure #replace this with your entity
show:
icon: false
name: false
state: false
style:
top: 180%
left: 50%
width: 100%
color_thresholds:
- value: 970
color: '#193471'
- value: 1010
color: '#c0392b'
- value: 1020
color: '#f7ff00'
- value: 1030
color: '#ff0000'
card_mod:
class: hki
style: |
ha-card {
box-shadow: none;
background: transparent;
}
- type: custom:rain-gauge-card
entity: sensor.gw2000a_daily_rain_rate #replace this with your entity
is_imperial: false
hourly_rate_entity: sensor.gw2000a_hourly_rain_rate_piezo #replace this with your entity
show_warning: false
show_error: false
card_mod:
style:
height: 100%
- type: custom:uv-index-card
entity: sensor.gw2000a_uv_index #replace this with your entity
show_warning: false
columns: 2
view_layout:
position: sidebar
fianly add another card
type: custom:flex-horseshoe-card
entities:
- entity: sensor.gw2000a_outdoor_temperature #replace this with your entity
decimals: 1
unit: °C
name: Weather
- entity: sensor.gw2000a_humidity #replace this with your entity
decimals: 1
name: Outside humidity
- entity: sensor.gw2000a_indoor_humidity #replace this with your entity
decimals: 1
name: Indoor humidity
- entity: sensor.gw2000a_indoor_temperature #replace this with your entity
decimals: 1
unit: °C
name: Indoor
- entity: sensor.gw2000a_feels_like_temperature #replace this with your entity
name: Feels Like
decimals: 1
- entity: sensor.gw2000a_solar_radiation #replace this with your entity
decimals: 1
name: Radiation
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 43
length: 70
styles:
- opacity: 0.2;
vlines:
- id: 0
xpos: 50
ypos: 59
length: 30
styles:
- opacity: 0.2;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 3em;
- opacity: 0.9;
- id: 1
entity_index: 1
xpos: 47
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 52
ypos: 58
styles:
- font-size: 1.8em;
- text-anchor: start;
- id: 3
entity_index: 3
xpos: 2
ypos: 7
styles:
- font-size: 1.2em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 70
ypos: 19
styles:
- font-size: 1.0em;
- text-anchor: end;
- id: 5
entity_index: 5
xpos: 98
ypos: 7
styles:
- font-size: 1.0em;
- text-anchor: end;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
- id: 1
entity_index: 1
xpos: 46
ypos: 68
styles:
- font-size: 0.5em;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 54
ypos: 68
styles:
- font-size: 0.5em;
- text-anchor: start;
- id: 3
entity_index: 5
xpos: 80
ypos: 12
styles:
- font-size: 0.5em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 30
ypos: 40
styles:
- font-size: 0.48em;
- text-anchor: start;
- id: 5
entity_index: 3
xpos: 2
ypos: 12
styles:
- font-size: 0.48em;
- text-anchor: start;
horseshoe_scale:
min: 0
max: 36
color_stops:
'0': '#4567EF'
'12': '#D82039'
'18': '#DBD037'
'36': '#ffc31f'
view_layout:
position: sidebar
Works perfect, thank you VERY much!
1 Like
Hi, first things first, good job, and thank you.
I am trying to replicate this cards because its lovely. but i encountered problems in the first steps.
the weather station in my town is a sensor with many atributes, for example,
type: entity
entity: sensor.cis_ferrol_station_daily_data
attribute: IRD_SUM_1.5m_value
this outputs the following
this is one of the values available, the point is if I add the attribute line to your code, it doesn´t work
I have tried this
type: entity
entity: sensor.cis_ferrol_station_daily_data
attribute: IRD_SUM_1.5m_value
name: Luz solar
color: auto
size: 25%
show_name: true
show_icon: true
show_state: true
tap_action:
action: more-info
haptic: medium
styles:
card:
- aspect-ratio: 1/1
- border-radius: var(--ha-card-border-radius)
- box-shadow: var(--ha-card-box-shadow)
- border-style: var(--ha-card-border-style)
- border-width: var(--ha-card-border-width)
- border-color: var(--ha-card-border-color)
- opacity: 1
label:
- justify-self: start
- padding: 0px 10px
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- top: '-28%'
- left: '-29%'
name:
- justify-self: start
- padding: 0px 10px
- font-weight: var(--name-font-weight)
- font-family: var(--font-family)
- font-size: 15px
- color: var(--name-color)
state:
- font-size: 20px
- font-family: var(--font-family)
- padding: 10px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: var(--state-font-weight)
- color: var(--state-color)
card_mod: null
with no resuts, well there´s an output, the card says available
so, how can I add these data to my dash?
I cant help you with your solar lux pull as I dont have your sensor and details of how each attriubute is listed. sorry
I would love a tides, screen but my issue is only polling once a day causes tide service to block me saying out of credits.
Hi, I am talking about a public service provided in my country, you can take a look here meteogalicia.gal
In fact It is a n integration existent into HACKS.
Anyways if you can help ,e, i can provider any info you would like.
Thank you.