Custom-card "Speedtest"

This is a custom-card to display the results from the Speedtest.net integration. The integration uses the Speedtest.net web service to measure network bandwidth performance.

Credits

Author: irmajavi - 2022 Version: 1.0.0

Breaking changes

1.1.0

Changed from speedtestdotnet.speedtest service to update entity service from Home Assistant due to announced deprecation of the speedtest service.

Changelog

1.1.0

The variable ulm_custom_card_irmajavi_speedtest_download_speed_entity is now used to trigger an update of all the speedtest sensors.

1.0.0

Initial release

Requirements

Home Assistant Speedtest.net integration

Usage

type: custom:button-card
template: custom_card_irmajavi_speedtest
variables:
  ulm_custom_card_irmajavi_speedtest_download_speed_entity: sensor.speedtest_download
  ulm_custom_card_irmajavi_speedtest_upload_speed_entity: sensor.speedtest_upload
  ulm_custom_card_irmajavi_speedtest_ping_entity: sensor.speedtest_ping
  ulm_custom_card_irmajavi_speedtest_color: blue
  ulm_custom_card_irmajavi_speedtest_router_name: router_name
  ulm_custom_card_irmajavi_speedtest_router_model: router_model

Variables

Variable	Example	Required	Explanation
ulm_custom_card_irmajavi_speedtest_router_name	Linksys	Yes	Your router name
ulm_custom_card_irmajavi_speedtest_router_model	EA8549	Yes	Your router model
ulm_custom_card_irmajavi_speedtest_color	blue	Yes	The color of the icon
ulm_custom_card_irmajavi_speedtest_upload_speed_entity	sensor.test2	Yes	The upload sensor created by the integration
ulm_custom_card_irmajavi_speedtest_download_speed_entity	sensor.test3	Yes	The download sensor created by the integration
ulm_custom_card_irmajavi_speedtest_ping_entity	sensor.test4	Yes	The ping sensor created by the integration

Template Code

Template Code

custom_card_irmajavi_speedtest.yaml

---
custom_card_irmajavi_speedtest:
  triggers_update: "all"
  show_name: false
  show_label: false
  template:
    - "ulm_custom_card_irmajavi_speedtest_language_variables"
  variables:
    ulm_custom_card_irmajavi_speedtest_color: "blue"
    ulm_custom_card_irmajavi_speedtest_router_name: "router_name"
    ulm_custom_card_irmajavi_speedtest_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"
        tap_action:
          action: "none"
        show_last_changed: false
        show_label: true
        show_name: true
        show_icon: true
        label: >-
          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_model ]]]
        name: >-
          [[[ return variables.ulm_custom_card_irmajavi_speedtest_router_name ]]]
        icon: "mdi:wifi"
        styles:
          icon:
            - color: >-
                [[[ return
                `rgba(var(--color-${variables.ulm_custom_card_irmajavi_speedtest_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.ulm_custom_card_irmajavi_speedtest_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"
        tap_action:
          action: "call-service"
          service: "homeassistant.update_entity"
          service_data:
            entity_id:
              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity]]]"
              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity]]]"
              - "[[[ return variables.ulm_custom_card_irmajavi_speedtest_ping_entity]]]"
        color: "var(--google-grey)"
        show_icon: true
        show_label: false
        show_name: true
        styles:
          custom_fields:
            item1:
              - justify-self: "end"
              - margin-top: "-23px"
              - margin-right: "3px"
          icon:
            - color: "rgba(var(--color-theme),0.9)"
            - width: "20px"
          img_cell:
            - background-color: "none"
            - place-self: "center"
            - justify-self: "start"
            - width: "40px"
            - height: "20px"
          name:
            - align-self: "end"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "16px"
            - margin-left: "40px"
            - margin-top: "3px"
          grid:
            - grid-template-areas: "i n item1"
            - grid-template-columns: "min-content"
            - grid-template-rows: "auto"
          card:
            - box-shadow: "none"
            - border-radius: "10px"
            - border: "2px solid var(--google-grey)"
            - padding_bottom: "-8px"
            - height: "40px"
            - padding-top: "5px"
            - padding-left: "5px"
        name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_speedtest ]]]"
        icon: "mdi:speedometer"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              show_icon: true
              show_name: false
              show_label: false
              styles:
                icon:
                  - color: "rgba(var(--color-theme),0.9)"
                  - width: "20px"
                  - justify-self: "end"
                grid:
                  - grid-template-areas: "i"
                  - grid-template-columns: "auto"
                  - grid-template-rows: "auto"
                card:
                  - box-shadow: "none"
              icon: "mdi:chevron-right"
    item3:
      card:
        type: "custom:button-card"
        template: "list_2_items"
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              color: "var(--google-blue)"
              show_label: true
              show_icon: false
              name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_download ]]]"
              entity: >-
                [[[ return
                variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity;
                ]]]
              label: |
                [[[
                    var state1 = "";
                    if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state){
                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].state;
                      if (states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement){
                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_download_speed_entity].attributes.unit_of_measurement;
                      }
                    }
                    return state1;
                ]]]
              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"
          item2:
            card:
              type: "custom:button-card"
              color: "var(--google-blue)"
              show_label: true
              show_icon: false
              name: "[[[ return variables.ulm_custom_card_irmajavi_speedtest_upload ]]]"
              entity: >-
                [[[ return
                variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity;
                ]]]
              label: |
                [[[
                    var state1 = "";
                    if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state){
                      var state1 = states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].state;
                      if (states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement){
                        state1 += states[variables.ulm_custom_card_irmajavi_speedtest_upload_speed_entity].attributes.unit_of_measurement;
                      }
                    }
                    return state1;
                ]]]
              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"