Zaragoza Tram

¡Bienvenido a la integración Zaragoza Tram para Home Assistant!
Esta integración te permite crear sensores que muestran el tiempo restante para la llegada de los dos próximos tranvías a una parada específica de Zaragoza.
Los datos se obtienen gracias a la API proporcionada por el Ayuntamiento de Zaragoza:
API REST Zaragoza

Instalación

1. Manual

1. Descarga los archivos de este repositorio.
2. Copia la carpeta zaragoza_tram dentro del directorio custom_components de tu configuración de Home Assistant.
   • Si la carpeta custom_components no existe, créala en la raíz de tu configuración.
3. Reinicia Home Assistant.

2. Usando HACS

1. Añade este repositorio como repositorio personalizado en HACS.
2. Busca "Zaragoza Tram" en HACS e instálalo.
3. Reinicia Home Assistant.

Configuración

Desde la Interfaz de Usuario

1. Ve a Ajustes → Dispositivos e Integraciones.
2. Haz clic en el botón "+" y busca "Zaragoza Tram".
3. Selecciona la parada que deseas configurar desde la lista desplegable.
4. Guarda los cambios y ¡listo! Tendrás dos sensores configurados automáticamente (uno para el próximo tranvía y otro para el siguiente).

---

Ejemplos de tarjetas Lovelace (opcionales)

Puedes mostrar la información de los sensores en tu panel de Home Assistant usando tarjetas personalizadas.
Estos ejemplos son opcionales y requieren instalar los siguientes complementos desde HACS si quieres usarlos:

• Para el ejemplo sencillo: Mushroom Cards
• Para el ejemplo avanzado: button-card

Ejemplo sencillo con Mushroom Cards

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: 🚋 Próximos Tranvías - Plaza España
    subtitle: Zaragoza
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.tranvia_1_plaza_espana_dir_mago_de_oz
        name: Próximo tranvía
        icon: mdi:tram
        icon_color: green
        primary_info: state
        secondary_info: none
        layout: vertical
        tap_action:
          action: more-info
      - type: custom:mushroom-entity-card
        entity: sensor.tranvia_2_plaza_espana_dir_mago_de_oz
        name: Siguiente tranvía
        icon: mdi:tram
        icon_color: blue
        primary_info: state
        secondary_info: none
        layout: vertical
        tap_action:
          action: more-info

Ejemplo avanzado para Plaza España (Dirección: Mago de Oz)

type: vertical-stack
cards:
  - type: custom:button-card
    name: 🚋 Plaza España
    label: "Dir: Mago de Oz"
    color_type: card
    styles:
      card:
        - background: "linear-gradient(120deg, #1976d2 0%, #43a047 100%)"
        - color: white
        - font-size: 22px
        - font-weight: bold
        - padding: 20px
        - border-radius: 20px
        - box-shadow: 0 8px 18px rgba(25,118,210,0.13)
      name:
        - font-size: 26px
        - font-weight: bold
      label:
        - font-size: 17px
        - color: "#e3f2fd"
        - padding-top: 6px
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.tranvia_1_plaza_espana_dir_mago_de_oz
        name: Próximo
        icon: mdi:tram
        color_type: icon
        show_state: true
        show_name: true
        show_label: true
        state_display: |
          [[[
            return entity.state + " min";
          ]]]
        label: |
          [[[
            let mins = parseInt(entity.state);
            if (!isNaN(mins)) {
              let date = new Date();
              date.setMinutes(date.getMinutes() + mins);
              let h = date.getHours().toString().padStart(2,'0');
              let m = date.getMinutes().toString().padStart(2,'0');
              return "Llega a las " + h + ":" + m;
            } else {
              return "Sin datos";
            }
          ]]]
        styles:
          card:
            - background: "linear-gradient(120deg, #43a047 80%, #a5d6a7 100%)"
            - color: white
            - font-size: 18px
            - font-weight: bold
            - border-radius: 20px
            - box-shadow: 0 4px 14px rgba(67,160,71,0.18)
            - padding: 24px
            - transition: box-shadow 0.3s
          icon:
            - color: white
            - width: 56px
            - height: 56px
            - animation: >
                [[[ return (entity.state < 5) ? "bounce 1s infinite" : "none"; ]]]
          name:
            - font-size: 20px
            - padding-top: 8px
          state:
            - font-size: 30px
            - font-weight: bold
            - padding-top: 10px
          label:
            - font-size: 16px
            - color: "#e8f5e9"
            - padding-top: 8px
        extra_styles: |
          @keyframes bounce {
            0%, 100% { transform: translateY(0);}
            50% { transform: translateY(-10px);}
          }
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        triggers_update: all
      - type: custom:button-card
        entity: sensor.tranvia_2_plaza_espana_dir_mago_de_oz
        name: Siguiente
        icon: mdi:tram
        color_type: icon
        show_state: true
        show_name: true
        show_label: true
        state_display: |
          [[[
            return entity.state + " min";
          ]]]
        label: |
          [[[
            let mins = parseInt(entity.state);
            if (!isNaN(mins)) {
              let date = new Date();
              date.setMinutes(date.getMinutes() + mins);
              let h = date.getHours().toString().padStart(2,'0');
              let m = date.getMinutes().toString().padStart(2,'0');
              return "Llega a las " + h + ":" + m;
            } else {
              return "Sin datos";
            }
          ]]]
        styles:
          card:
            - background: "linear-gradient(120deg, #1565c0 80%, #90caf9 100%)"
            - color: white
            - font-size: 18px
            - font-weight: bold
            - border-radius: 20px
            - box-shadow: 0 4px 14px rgba(21,101,192,0.18)
            - padding: 24px
            - transition: box-shadow 0.3s
          icon:
            - color: white
            - width: 56px
            - height: 56px
          name:
            - font-size: 20px
            - padding-top: 8px
          state:
            - font-size: 30px
            - font-weight: bold
            - padding-top: 10px
          label:
            - font-size: 16px
            - color: "#e3f2fd"
            - padding-top: 8px
        tap_action:
          action: more-info
        hold_action:
          action: none
        double_tap_action:
          action: none
        triggers_update: all