The internet/wireless card, can you share that?
Network traffic card
custom_card_wifi:
show_name: false
show_label: false
variables:
color: blue
router_name: router_name
router_model: router_model
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: custom:button-card
show_last_changed: false
show_label: true
show_name: true
show_icon: true
label: '[[[ return variables.router_model ]]]'
name: '[[[ return variables.router_name ]]]'
icon: mdi:wifi
styles:
icon:
- color: '[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]'
- width: 32px
label:
- justify-self: center
- align-self: start
- font-weight: bolder
- font-size: 12px
- filter: opacity(40%)
name:
- margin-top: 10px
- justify-self: center
- font-weight: bold
- font-size: 14px
img_cell:
- background-color: '[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]'
- border-radius: 50%
- place-self: center
- width: 62px
- height: 62px
grid:
- grid-template-areas: '"i" "n" "l"'
card:
- box-shadow: none
size: 20px
item2:
card:
type: custom:button-card
color: var(--google-grey)
show_icon: false
show_label: false
show_name: true
styles:
name:
- align-self: start
- justify-self: center
- font-weight: bold
- font-size: 14px
grid:
- grid-template-areas: '"n n" "item1 item2"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content min-content
card:
- box-shadow: none
- border-radius: 20px
- border: 2px solid var(--google-grey)
- height: 90px
name: Daily Network Traffic
custom_fields:
item1:
card:
type: custom:button-card
template: custom_card_generic_no_icon_bg
entity: '[[[ return variables.incoming_traffic_entity; ]]]'
name: Incoming
icon: mdi:arrow-down
item2:
card:
type: custom:button-card
template: custom_card_generic_no_icon_bg
entity: '[[[ return variables.outgoing_traffic_entity; ]]]'
name: Outgoing
icon: mdi:arrow-up
item3:
card:
type: custom:button-card
template: list_2_items
custom_fields:
item1:
card:
type: custom:button-card
template: custom_card_big_number
entity: '[[[ return variables.download_speed_entity; ]]]'
item2:
card:
type: custom:button-card
template: custom_card_big_number
entity: '[[[ return variables.upload_speed_entity; ]]]'
custom_card_big_number:
color: var(--google-blue)
show_label: true
show_icon: false
label: |
[[[
var unit = entity.attributes.unit_of_measurement != null ? ' ' + entity.attributes.unit_of_measurement : ''
return entity.state + unit;
]]]
styles:
icon:
- width: 30px
- height: 30px
label:
- align-self: center
- justify-self: center
- font-weight: bold
- font-size: 23px
name:
- align-self: center
- justify-self: center
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
grid:
- grid-template-areas: '"l" "n"'
- grid-template-columns: auto
- grid-template-rows: min-content
card:
- box-shadow: none
- padding-top: 15px
- padding-botton: 10px
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 14px
- place-self: center
- height: 80px
custom_card_generic_no_icon_bg:
show_icon: true
show_name: true
show_label: true
template:
- ulm_language_variables
label: |
[[[
var unit = entity.attributes.unit_of_measurement != null ? " " + entity.attributes.unit_of_measurement : ""
if (entity.state == "on") {
return variables.ulm_on;
} else if (entity.state == "off") {
return variables.ulm_off;
} else if (entity.state == "unavailable") {
return variables.ulm_unavailable;
} else if (entity.state == "idle") {
return variables.ulm_idle;
} else if (entity.state == "open") {
return variables.ulm_open;
} else if (entity.state == "closed") {
return variables.ulm_closed;
} else {
return entity.state + unit;
}
]]]
styles:
icon:
- color: rgba(var(--color-theme),0.9)
- width: 30px
label:
- font-weight: bold
- justify-self: start
- font-size: 14px
- filter: opacity(100%)
name:
- font-weight: bold
- justify-self: start
- font-size: 12px
- filter: opacity(40%)
grid:
- grid-template-areas: '"i l" "i n"'
- grid-template-columns: auto
- grid-template-rows: auto
card:
- box-shadow: none
- margin-bottom: 10px
UI code
type: custom:button-card
template: custom_card_wifi
variables:
download_speed_entity: sensor.ddwrt_wan_in_mbps
upload_speed_entity: sensor.ddwrt_wan_out_mbps
incoming_traffic_entity: sensor.wan_in_daily_gib
outgoing_traffic_entity: sensor.wan_out_daily_gib
router_name: Linksys
router_model: EA8500
I think you need a router with a custom firmware to get the data for this card. I do not know if a router with an original firmware can get the data. I am using DD WRT firmware on my router and using Home Assistant snmp platform to get the data for the sensors.
Add this to configuration.yaml
- platform: snmp
name: 'DDWRT WAN In'
host: 192.168.2.1
baseoid: 1.3.6.1.2.1.31.1.1.1.6.2
community: 'public'
version: '2c'
scan_interval: 10
- platform: snmp
name: 'DDWRT WAN Out'
host: 192.168.2.1
baseoid: 1.3.6.1.2.1.31.1.1.1.10.2
community: 'public'
version: '2c'
scan_interval: 10
- platform: derivative
source: sensor.ddwrt_wan_in
unit_time: s
unit: B
name: ddwrt_wan_in_derivative
- platform: derivative
source: sensor.ddwrt_wan_out
unit_time: s
unit: B
name: ddwrt_wan_out_derivative
- platform: template
sensors:
ddwrt_wan_in_mbps:
value_template: "{{ (states('sensor.ddwrt_wan_in_derivative')|float*8/1000000)|round(2) }}"
unit_of_measurement: 'Mbps'
friendly_name: Download Speed
ddwrt_wan_out_mbps:
value_template: "{{ (states('sensor.ddwrt_wan_out_derivative')|float*8/1000000)|round(2) }}"
unit_of_measurement: 'Mbps'
friendly_name: Upload Speed
ddwrt_wan_download_mib:
value_template: "{{ (states('sensor.ddwrt_wan_in')|float/1000000)|round(2) }}"
unit_of_measurement: 'MB'
friendly_name: WAN Download
ddwrt_wan_upload_mib:
value_template: "{{ (states('sensor.ddwrt_wan_out')|float/1000000)|round(2) }}"
unit_of_measurement: 'MB'
friendly_name: WAN Upload
ddwrt_wan_download_gib:
value_template: "{{ (states('sensor.ddwrt_wan_in')|float/1000000000)|round(2) }}"
unit_of_measurement: 'GB'
friendly_name: WAN Download GiB
ddwrt_wan_upload_gib:
value_template: "{{ (states('sensor.ddwrt_wan_out')|float/1000000000)|round(2) }}"
unit_of_measurement: 'GB'
friendly_name: WAN Upload GiB
utility_meter:
wan_in_monthly_gib:
source: sensor.ddwrt_wan_download_gib
cycle: monthly
wan_in_daily_gib:
source: sensor.ddwrt_wan_download_gib
cycle: daily
wan_out_monthly_gib:
source: sensor.ddwrt_wan_upload_gib
cycle: monthly
wan_out_daily_gib:
source: sensor.ddwrt_wan_upload_gib
cycle: daily
wan_in_monthly:
source: sensor.ddwrt_wan_download_mib
cycle: monthly
wan_in_daily:
source: sensor.ddwrt_wan_download_mib
cycle: daily
wan_out_monthly:
source: sensor.ddwrt_wan_upload_mib
cycle: monthly
wan_out_daily:
source: sensor.ddwrt_wan_upload_mib
cycle: daily
The baseoid could be different, so if is not getting data do your research and find the ones that work with your router model. And remember to change the host IP Address if is different and to enable SNMP in your router ( Use google if you do not know how to do it).
Other thing, you can change the variables name for whatever you want if you think they are too long.
9 Likes
UI code for the electricity card:
type: custom:button-card
template: custom_card_generic_dual_entity
variables:
ulm_custom_card_generic_dual_entity_1: sensor.ac_load_power_meter
ulm_custom_card_generic_dual_entity_2: sensor.power_usage_monthly
I’m getting this data from my Solar power inverter. You can use it with others power meter you may have. I have this sensor in configuration.yaml
platform: mqtt
name: 'AC Load Power Meter'
state_topic: 'homeassistant/sensor/inverter_load_power_consumption_by_day/state'
unit_of_measurement: kWh
last_reset_topic: 'homeassistant/sensor/inverter_load_power_consumption_by_day/state'
last_reset_value_template: 1970-01-01T00:00:00+00:00
state_class: total_increasing
device_class: energy
utility_meter:
power_usage_monthly:
source: sensor.ac_load_power_meter
cycle: monthly
6 Likes
I have shely 3m, I need to see how to do it. Thanks for the code.
Would you mind sharing the code for your vacuum card as well?
1 Like
Hey guys! Having trouble with custom_card_paddy_welcome here. I have followed the steps found on this setup guide. I have it set like this:
- type: custom:button-card
template: custom_card_paddy_welcome
variables:
- ulm_custom_card_paddy_welcome_weather: weather.openweathermap
No errors. The card just doesn’t appear. All other cards I have from the button-card library are appearing and working. Such as card_light_slider and card_person
Unchecked, but it could be a stale version. This is mine:
type: custom:button-card
template: custom_card_paddy_welcome_with_weather
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
ulm_custom_card_paddy_welcome_weather_provider: weather.openweathermap
Thanks! And your ui code?
Hi Guys,
I’m coming with early release of my dashboard but got a question.
I want to create row with chips for entire dashborard not only for first column.
I have tried with horizontal-stack at top but it’s ending like this:
Any possible solutions here?
Put all your rooms in one big container (e.g. grid card with 1 column or stack card) and on top your chip row.
Heey @irmajavi, great looking cards you have created. it would be really awesome if you can add these to the repository so others can make use of it and maybe it can even be included as an official template/cards.
If you go for the custom cards route and include a readme it will be automatically added to the new doc site.
https://ui-lovelace-minimalist.github.io/UI/
Usage->custom cards.
Thanks for sharing!
Thanks. I have more cards but need to cleanup the code a bit. Can you show me where can I upload the code. And if there is a format to follow to create the doc.
I just love getting in here and watch all great cards and ideas! It’s starting to become a mini community in the bigger HA community. I don’t know what you think but I would love to se this on a Discord/reddit or whatever to easier follow the different conversations/ideas/cards. Or for that matter have it’s own “main” topic here on this forum.
1 Like
There is a discord button on the github page 
But I guess it is not so clear when you don’t know these buttons.
So here is the link => discord
2 Likes
Awesome! Ty
Hello, please share the code of the card for the vacuum cleaner, humidifier. Thanks
If you want to add is as a custom cards you can add it in this folder: UI/custom_cards at dev · UI-Lovelace-Minimalist/UI · GitHub
In case you want it to be added to the (Hacs) integration: UI/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates at dev · UI-Lovelace-Minimalist/UI · GitHub
And the documentation can be added here: UI/docs/usage/cards at dev · UI-Lovelace-Minimalist/UI · GitHub
A bit more info about the docs page can be found here: Docs Style Guide - UI Lovelace Minimalist
Also if you have more questions and need some quicker answers, you can always join the discord server.
1 Like
I saw examples of cards for a vacuum cleaner (🌻 Lovelace UI • Minimalist - #69 by clemalex), but I couldn’t find the code. I’ve been reading the topic from the very beginning and apparently some examples are no longer relevant, like AirCondition Card.
Thanks to everyone who developed and put efforts into this project, its super good
is hacs intergration ready ?