Trying to create dashboard targeted for an Android tablet using multiple views where the elements of each view are enlarged and use a particular color (DeepSkyBlue in this case), the goal being to read them from across the room in the dark. First view uses Entity Cards and Card-Mod. The color is correct here. Second view uses Mini-Graph and Card-Mod. Even though the color specified is exactly the same, the color displayed is not right. The ultimate goal is to cycle between three or four views every few seconds, so they all need to use the same font sizes and colors. Code included below. This is weird and I can’t figure out where the discrepancy creeps in. Anyone know how these card things interact and can maybe point me in a direction to resolve?
views:
- type: custom:layout-card
layout_type: grid
path: Outside_View
title: Outside_View
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: .1fr .5fr .5fr .5fr
grid-template-areas: |
"r0c r0c"
"r1c1 r1c2"
"r2c1 r2c2"
"r3c1 r3c2"
cards:
- type: markdown
card_mod:
style: |
:host {
ha-card {
background: transparent;
border: 1px dashed green;
color: deepskyblue;
opacity: 1;
font-size: 9em;
font-weight: 600;
line-height: 70px;
padding-top: 15px;
text-align: center;
}
}
content: Outside Conditions
view_layout:
grid-area: r0c
- type: markdown
card_mod:
style: |
:host {
ha-card {
background: transparent;
border: 1px dashed green;
color: deepskyblue;
font-size: 5.5em;
font-weight: 600;
line-height: 60px;
padding-top: 25px;
text-align: right;
}
}
content: Temperature
view_layout:
grid-area: r1c1
- type: entity
entity: sensor.tr_temp_humidity_sensor_temperature
name: ' '
icon: mdi:none
card_mod:
style: |
:host {
ha-card {
background: Transparent;
border: 1px dashed blue;
}
.info {
text-align: left;
}
.info .value {
font-size: 5.1em;
font-weight: 500;
line-height: 60px;
color: deepskyblue;
}
.info .measurement {
font-size: 4em;
color: deepskyblue;
line-height: 50px;
vertical-align: top;
}
}
view_layout:
grid-area: r1c2
- type: markdown
card_mod:
style: |
:host {
ha-card {
background: transparent;
border: 1px dashed green;
color: deepskyblue;
font-size: 5.5em;
font-weight: 600;
line-height: 60px;
padding-top: 25px;
text-align: right;
}
}
content: Humidity
view_layout:
grid-area: r2c1
- type: entity
entity: sensor.tr_temp_humidity_sensor_humidity
name: ' '
icon: mdi:none
card_mod:
style: |
:host {
ha-card {
background: Transparent;
border: 1px dashed blue;
}
.info {
text-align: left;
}
.info .value {
font-size: 5.1em;
font-weight: 500;
line-height: 60px;
color: deepskyblue;
}
.info .measurement {
font-size: 4em;
color: deepskyblue;
line-height: 50px;
vertical-align: top;
}
}
view_layout:
grid-area: r2c2
- type: markdown
card_mod:
style: |
:host {
ha-card {
background: transparent;
border: 1px dashed green;
color: deepskyblue;
font-size: 5.5em;
font-weight: 600;
line-height: 60px;
padding-top: 25px;
text-align: right;
}
}
content: Wind
view_layout:
grid-area: r3c1
- type: entity
entity: sensor.wind
name: ' '
icon: mdi:none
card_mod:
style: |
:host {
ha-card {
background: Transparent;
border: 1px dashed blue;
}
.info {
text-align: left;
}
.info .value {
font-size: 5.1em;
font-weight: 500;
line-height: 60px;
color: deepskyblue;
}
}
view_layout:
grid-area: r3c2
- type: custom:grid-layout
path: BPressure_View
title: BPressure_View
cards:
- type: custom:mini-graph-card
entities:
- sensor.barometer
detail: 2
icon: mdi:none
name: Barometric Pressure (30 hr)
hours_to_show: 30
line_color: deepskyblue
line_width: 1
align_state: center
card_mod:
style: |
:host {
ha-card {
background: Transparent;
border: transparent;
}
.header .name {
color: deepskyblue;
font-weight: 500;
font-size: 5.5em;
opacity: 1;
}
.states.flex .state .state__value.ellipsis {
color: deepskyblue;
font-size: 6em;
font-weight: 500;
opacity: .65;
margin-top: 25px;
}
.states.flex .state .state__uom.ellipsis {
color: deepskyblue;
font-size: 6em;
font-weight: 500;
opacity: .65;
padding-left: 12px;
}
}
- type: custom:layout-card
layout_type: grid
title: Alarm_View
path: Alarm_View
layout:
grid-template-columns: 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
grid-template-areas: |
"r1c1 r1c2"
"r2c1 r2c2"
"r3c1 r3c2"
cards:
- type: entity
entity: sensor.sun_next_rising
view_layout:
grid-area: r2c1
- type: entity
entity: sensor.sun_next_setting
view_layout:
grid-area: r3c1
1 post - 1 participant