7wells
April 26, 2024, 2:43pm
1
Hello!
I would like to display up/downlink traffic of a Wifi router or mobile data - per day, week, month, and total. There are nice icons for these periods, e.g.:
And there are nice icons with up/down arrows (I save you the examples
Is there a way to place 2 icons beside each other? E.g. like this:
Thanks for your hints!
PS - meanwhile I managed this:
However, I am still not happy. I put name: ' ' to avoid names appearing there, but now there is lots of empty space between the icons and the data. Furthermore, I would like to have icons instead of the text “Download” and “Upload”. How can I accomplish this?
EDIT - On a mobile phone it looks even more ugly:
This is my current lovelace card code:
type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.teltonika_mobile_bytes_received_today
icon: mdi:calendar-today-outline
name: ' '
- entity: sensor.teltonika_mobile_bytes_received_this_week
icon: mdi:calendar-week-outline
name: ' '
- entity: sensor.teltonika_mobile_bytes_received_this_month
icon: mdi:calendar-month-outline
name: ' '
- entity: sensor.teltonika_mobile_total_bytes_received
icon: mdi:calendar-start-outline
name: ' '
state_color: true
show_header_toggle: true
title: Download
- type: entities
entities:
- entity: sensor.teltonika_mobile_bytes_sent_today
icon: mdi:calendar-today
name: ' '
- entity: sensor.teltonika_mobile_bytes_sent_this_week
icon: mdi:calendar-week
name: ' '
- entity: sensor.teltonika_mobile_bytes_sent_this_month
icon: mdi:calendar-month
name: ' '
- entity: sensor.teltonika_mobile_total_bytes_sent
icon: mdi:calendar-start
name: ' '
state_color: true
title: Upload
Doesn’t necessarily address your icon question, but I use this custom card for similar sensors to get more info in less space:
1 Like
Test this out. I just duplicated the first column so you’ll need to adjust the entities.
type: horizontal-stack
cards:
- type: entities
icon: 'mdi:download'
entities:
- entity: sensor.teltonika_mobile_bytes_received_today
icon: mdi:calendar-today-outline
- entity: sensor.teltonika_mobile_bytes_received_this_week
icon: mdi:calendar-week-outline
- entity: sensor.teltonika_mobile_bytes_received_this_month
icon: mdi:calendar-month-outline
- entity: sensor.teltonika_mobile_total_bytes_received
icon: mdi:calendar-start-outline
card_mod:
style:
.card-header: |
.name .icon {
--mdc-icon-size: 40px;
}
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
display: none;
}
- type: entities
icon: 'mdi:upload'
entities:
- entity: sensor.teltonika_mobile_bytes_received_today
icon: mdi:calendar-today-outline
- entity: sensor.teltonika_mobile_bytes_received_this_week
icon: mdi:calendar-week-outline
- entity: sensor.teltonika_mobile_bytes_received_this_month
icon: mdi:calendar-month-outline
- entity: sensor.teltonika_mobile_total_bytes_received
icon: mdi:calendar-start-outline
card_mod:
style:
.card-header: |
.name .icon {
--mdc-icon-size: 40px;
}
hui-sensor-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
display: none;
}
1 Like
7wells:
mdi:calendar-today
Great suggestion!! It can fix the icon situation as well.
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:download
name: false
show_state: false
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- type: vertical-stack
cards:
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:upload
name: false
show_state: false
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:upload
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
@7wells Another option
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:download
icon_color: green
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background:none !important;
--icon-symbol-size: 50px;
}
.: |
ha-card {
border: none;
background:none !important;
}
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:upload
icon_color: red
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background:none !important;
--icon-symbol-size: 50px;
}
.: |
ha-card {
border: none;
background:none !important;
}
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:upload
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
- entity: light.pc_lights
type: custom:multiple-entity-row
icon: mdi:calendar-today
name: false
show_state: false
entities:
- entity: sensor.basement_sensor
name: false
icon: mdi:download
styles:
text-align: left
- entity: sensor.basement_sensor
name: false
styles:
width: 130px
text-align: left
color: lime
1 Like
).
15 GB
