Question about transit card display

[JamieP83]

Hey, this is all awesome, thanks for sharing!

I have managed to get all my local train info, however how do i display it like you have sorry? eg: https://github.com/renemarc/home-assistant-config/blob/master/www/screenshots/group-transit.png

i cant seem to work out what custom card you have to do this part?

[renemarc]

Hey @jamiepryer ,

That Custom UI card was built using:

Custom UI Elements, applied to all cards using this in customize_glob.yaml:

"*.*":
  custom_ui_state_card: state-card-custom-ui

Extra sensor templates to get the hours and dynamic countdowns:

- platform: template
  sensors:
    home_to_market_countdown:
      friendly_name: Bus to Market
      icon_template: mdi:bus
      value_template: >-
        {% set countdown = states('sensor.home_to_market') | int(-1) %}
        {% if countdown > 60 %}
          {% set hours = (countdown / 60) | int %}
          {% set minutes = countdown % 60 %}
          {% if minutes < 10 %}
            {% set minutes = '0' ~ minutes %}
          {% endif %}
          {{hours}}:{{minutes}}
        {% elif countdown >= 0 %}
          {{countdown}}
        {% else %}
          unknown
        {% endif %}

    home_to_market_hour:
      friendly_name: Bus to Market
      icon_template: mdi:bus
      value_template: >-
        {% set departure = state_attr('sensor.home_to_market', 'Origin Stop Departure Time') %}
        {% if departure != None %}
          {% set departure = departure.split(' ') %}
          {% set hms = departure[1].split(':') %}
          {{hms[0]}}:{{hms[1]}}
        {% else %}
          unknown
        {% endif %}

Card-level themes for 10-minutes and 5-minutes until departure highlights, applied through javascript processing inside the customize.yaml:

sensor.home_to_market_hour:
  icon: mdi:cart
  extra_badge:
    entity_id: sensor.home_to_market
  templates:
    theme: >-
      var e = 'sensor.home_to_market';
      if (entities[e] === undefined || entities[e].state === 'unknown') return null;
      var v = parseInt(entities[e].state);
      return v <= 5 ? 'card-critical'
      : v <= 10 ? 'card-warning'
      : null;