Elja
September 1, 2023, 6:31pm
1
I got a Google Nest Hub 2 to create a dashboard to used in my living room.
This is my current display:
I’m pretty happy with it, but I would like an extra column to show more information.
Some extra info:Flex Horsehoe Card .
The Horseshoe card is to big by default, so I’m using the Lovelace Layout Card to adjust the size. I’m also trying to use this to create the wanted layout, but I’m finding this to be pretty hard.
I’m currently using 3 custom:vertical-layout cards for the Horsecards (2 in each layout-card). Since they would stack in a single line, I’ve added 3 extra random cards and moved them around. This was the only way I could get the cards to be shown as they are now. There’s probably a better way.
Any thoughts on how I could add the third column to the Nest Hub 2?
You should show/post the code of the View/dashboard you want to “show” , pasting code here have to be within 2x3 backticks, cording to point 11 in below Doc
To copy the whole View, Click the 3 dots in top-right corner, then edit then Click the 3 dots again and choose “raw configuration editor” , then click then screen And Hit ctrl+a , then ctrl+c , here you paste it with ctrl+v ( BUT don’t forget in between the 3 backticks , as shoved above
PS: there are multiple options to accomplice what you want, depending upon i.e the resolution on each device, and which View-Layout you choose etc.
1 Like
Elja
September 1, 2023, 8:04pm
4
Sure, here it is.
views:
- title: Nest Hub
path: nest-hub
icon: mdi:television
subview: false
theme: amoled
badges: []
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.p1_meter_3c39e727dc16_active_power
attribute: acculading
decimals: 0
name: Stroomverbruik
unit: W
- entity: sensor.maxumum_voltage
attribute: Volt
decimals: 1
unit: V
icon: mdi:sine-wave
- entity: sensor.stroomverbruik_vandaag
attribute: Dagelijks
decimals: 1
unit: kWh
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: -17000
max: 17000
color_stops:
'0': '#05ba49'
'1': '#ba2705'
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.binnen_binnen_binnen_buiten_temperature
attribute: temperature
decimals: 1
unit: °C
area: Buiten
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'21': blue
'30': red
aspect_ratio: 100%
layout:
width: 200
max_width: 300
max_cols: 1
- type: light
entity: light.dimmable_light_1
- type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.deye_sun3p_battery_capacity
attribute: acculading
decimals: 0
name: Thuisaccu
unit: '%'
- entity: sensor.deye_accu_beschikbaar_kwh
attribute: kWh
decimals: 1
unit: kWh
icon: mdi:battery
- entity: sensor.deye_sun3p_battery_output_power
attribute: Watt
decimals: 0
unit: W
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: 0
max: 100
color_stops:
'0': '#0277BD'
'3000': '#FBC02D'
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.binnen_binnen_binnen_125_jaar_temperature
attribute: temperature
decimals: 1
unit: °C
area: SLAAPKAMER
- entity: sensor.binnen_binnen_binnen_125_jaar_co2
attribute: co2
decimals: 0
unit: ppm
area: SLAAPKAMER
icon: mdi:molecule-co2
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 45
ypos: 73
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 1
entity_index: 1
xpos: 42
ypos: 72
align: end
size: 1.3
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'10': '#0277BD'
'20': '#05ba49'
aspect_ratio: 100%
layout:
width: 200
max_width: 300
max_cols: 1
- type: gauge
entity: sensor.2e_overloop_battery
- type: custom:layout-card
layout_type: custom:vertical-layout
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.p1_meter_3c39e727dc16_active_power
attribute: acculading
decimals: 0
name: Stroomverbruik
unit: W
- entity: sensor.maxumum_voltage
attribute: Volt
decimals: 1
unit: V
icon: mdi:sine-wave
- entity: sensor.stroomlevering_dagelijks
attribute: Dagelijks
decimals: 1
unit: kWh
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: -17000
max: 17000
color_stops:
'0': '#05ba49'
'1': '#ba2705'
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.binnen_binnen_binnen_buiten_temperature
attribute: temperature
decimals: 1
unit: °C
area: Buiten
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'21': '#0277BD'
'30': '#ba2705'
aspect_ratio: 100%
layout:
width: 200
max_width: 300
max_cols: 1
- type: gauge
entity: sensor.binnen_co2
This is how it looks in the browser (but not on the Nest Hub 2):
Yes, i think this diff is caused by the fact that the vertical-stack-columns can’t fit in the resolution you have in the nest-hub, and therefore move the 3rd column down, below the first 2 ( try to reduce the width of your browser window, by dragging it from right to left, to verify whether this also will cause the 3rd to move down) PS: as now it also look odd on a bigger screen than your browser is on ( i guess it’s a ipad or small device)
as you have set the vertical-stack-card width/max width it will per automatic force this in all screen-sizes
If so as i said there are multiple options to avoid, either reduce the width of the columns ( might look to odd in the browser then thou ) then you could use grid or horizontal-stack(with 3 column) ( in Panel view )
What you can do is using Grid with 3 columns ( 1 for each vertical stack ) , and set
1 Like
Elja
September 1, 2023, 10:57pm
6
Thank you!
Still have some fine-tuning to do, but I am close now.
Here’s the code I’m using:
- title: Nest Hub
path: nest-hub
icon: mdi:television
type: custom:grid-layout
theme: amoled
layout:
width: 1024px
margin: 0
padding: 0
card_margin: 0
grid-template-columns: 341px 341px 341px
grid-template-rows: auto
grid-template-areas: |
"block1 block2 block3"
"block4 block5 block6"
cards:
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block1
entities:
- entity: sensor.p1_meter_3c39e727dc16_active_power
attribute: acculading
decimals: 0
name: Stroomverbruik
unit: W
- entity: sensor.maxumum_voltage
attribute: Volt
decimals: 1
unit: V
icon: mdi:sine-wave
- entity: sensor.stroomverbruik_vandaag
attribute: Dagelijks
decimals: 1
unit: kWh
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: -17000
max: 17000
color_stops:
'0': '#05ba49'
'1': '#ba2705'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block2
entities:
- entity: sensor.deye_sun3p_battery_capacity
attribute: acculading
decimals: 0
name: Thuisaccu
unit: '%'
- entity: sensor.deye_accu_beschikbaar_kwh
attribute: kWh
decimals: 1
unit: kWh
icon: mdi:battery
- entity: sensor.deye_sun3p_battery_output_power
attribute: Watt
decimals: 0
unit: W
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: 0
max: 100
color_stops:
'0': '#0277BD'
'3000': '#FBC02D'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block3
entities:
- entity: sensor.p1_meter_3c39e727dc16_active_power
attribute: acculading
decimals: 0
name: Stroomverbruik
unit: W
- entity: sensor.maxumum_voltage
attribute: Volt
decimals: 1
unit: V
icon: mdi:sine-wave
- entity: sensor.stroomverbruik_vandaag
attribute: Dagelijks
decimals: 1
unit: kWh
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: -17000
max: 17000
color_stops:
'0': '#05ba49'
'1': '#ba2705'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block4
entities:
- entity: sensor.binnen_binnen_binnen_buiten_temperature
attribute: temperature
decimals: 1
unit: °C
area: Buiten
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'21': blue
'30': red
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block5
entities:
- entity: sensor.binnen_binnen_binnen_125_jaar_temperature
attribute: temperature
decimals: 1
unit: °C
area: SLAAPKAMER
- entity: sensor.binnen_binnen_binnen_125_jaar_co2
attribute: co2
decimals: 0
unit: ppm
area: SLAAPKAMER
icon: mdi:molecule-co2
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 45
ypos: 73
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 1
entity_index: 1
xpos: 42
ypos: 72
align: end
size: 1.3
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'10': '#0277BD'
'20': '#05ba49'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block6
entities:
- entity: sensor.binnen_binnen_binnen_125_jaar_temperature
attribute: temperature
decimals: 1
unit: °C
area: SLAAPKAMER
- entity: sensor.binnen_binnen_binnen_125_jaar_co2
attribute: co2
decimals: 0
unit: ppm
area: SLAAPKAMER
icon: mdi:molecule-co2
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 60
styles:
- font-size: 3.5em;
- id: 1
entity_index: 1
xpos: 45
ypos: 73
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 1
entity_index: 1
xpos: 42
ypos: 72
align: end
size: 1.3
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 35
styles:
- font-size: 1.5em;
- opacity: 0.8;
horseshoe_scale:
min: -10
max: 35
color_stops:
'10': '#0277BD'
'20': '#05ba49'
1 Like
Nice , looks cool now
Elja
September 3, 2023, 8:48pm
8
So, six of these cards in this size don’t fit that good on a Nest Hub.Mini Graph Cards .
Here’s the code for this layout:
- title: Nest Hub
path: nest-hub
icon: mdi:television
type: custom:grid-layout
theme: amoled
layout:
width: 1024px
grid-template-columns: 341px 341px 341px
grid-template-rows: 300px 50px 250px
grid-template-areas: |
"block1 block2 block3"
"spacer spacer spacer"
"block4 block5 block6"
cards:
- type: custom:button-card
color_type: blank-card
view_layout:
grid-area: spacer
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block1
entities:
- entity: sensor.p1_meter_3c39e727dc16_active_power
attribute: acculading
decimals: 0
name: Stroomverbruik
unit: W
- entity: sensor.maxumum_voltage
attribute: Volt
decimals: 1
unit: V
icon: mdi:sine-wave
- entity: sensor.stroomverbruik_vandaag
attribute: Dagelijks
decimals: 1
unit: kWh
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: -17000
max: 17000
color_stops:
'0': '#05ba49'
'1': '#ba2705'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block2
entities:
- entity: sensor.deye_sun3p_battery_capacity
attribute: acculading
decimals: 0
name: Thuisaccu
unit: '%'
- entity: sensor.deye_accu_beschikbaar_kwh
attribute: kWh
decimals: 1
unit: kWh
icon: mdi:battery
- entity: sensor.deye_sun3p_battery_output_power
attribute: Watt
decimals: 0
unit: W
icon: mdi:lightning-bolt
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: 0
max: 100
color_stops:
'0': '#0277BD'
'3000': '#FBC02D'
- type: custom:flex-horseshoe-card
view_layout:
grid-area: block3
entities:
- entity: sensor.binnen_temperature
attribute: Temperatuur
decimals: 1
name: WOONKAMER
unit: °C
- entity: sensor.binnen_humidity
attribute: humidity
decimals: 0
unit: '%'
icon: mdi:water-percent
- entity: sensor.binnen_co2
attribute: PPM
decimals: 0
unit: PPM
icon: mdi:molecule-co2
show:
horseshoe_style: colorstopgradient
layout:
hlines:
- id: 0
xpos: 50
ypos: 42
length: 40
styles:
- stroke: var(--primary-text-color);
- stroke-width: 5;
- stroke-linecap: round;
- opacity: 0.7;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 34
styles:
- font-size: 3em;
- id: 1
entity_index: 1
xpos: 40
ypos: 57
styles:
- text-anchor: start;
- font-size: 1.5em;
- id: 2
entity_index: 2
xpos: 40
ypos: 72
styles:
- text-anchor: start;
- font-size: 1.5em;
icons:
- id: 0
entity_index: 1
xpos: 37
ypos: 57
align: end
size: 1.3
- id: 1
entity_index: 2
xpos: 37
ypos: 72
align: end
size: 1.3
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 95
horseshoe_scale:
min: 10
max: 35
color_stops:
'10': '#0277BD'
'20': '#ba9a05'
- type: custom:mini-graph-card
view_layout:
grid-area: block4
entities:
- sensor.binnen_binnen_binnen_buiten_temperature
name: BUITEN
hours_to_show: 48
points_per_hour: 2
font_size: 160
font_size_header: 20
color_thresholds:
- value: 0
color: 0277BD
- value: 16
color: '#f39c12'
- value: 20
color: '#d35400'
- value: 25
color: '#c0392b'
- type: custom:mini-graph-card
view_layout:
grid-area: block5
entities:
- sensor.binnen_co2
name: LUCHTKWALITEIT
icon: mdi:molecule-co2
font_size: 160
font_size_header: 20
hours_to_show: 24
points_per_hour: 2
- type: custom:mini-graph-card
view_layout:
grid-area: block6
entities:
- entity: sensor.binnen_noise
color: green
name: GELUIDSNIVEAU
icon: mdi:volume-high
font_size: 160
font_size_header: 20
hours_to_show: 24
points_per_hour: 2
keep playing around 