HA Lovelace Card

The TappRFID Lovelace card renders your task list directly inside any Home Assistant dashboard. It uses the same visual language as the app — coloured status dots, streak counters, and overdue highlighting — so your task status is immediately readable alongside your other home data.

The card reads from the sensor entities created by the backend integration. You need the backend integration installed and connected before the card will show data.

Note

The Lovelace card is in a separate repository from the backend integration. Both are installed via HACS (or manually), but they are two distinct components. You can install the card without installing the integration first, but the card will have nothing to display until the integration is connected.

---

Requirements

• TappRFID backend integration installed and authenticated (see Backend Integration)
• Home Assistant 2023.4 or later
• HACS installed (for the recommended install path)

---

Install via HACS (recommended)

The card is a frontend resource, so it’s installed through HACS Frontend, not HACS Integrations.

1. Open Home Assistant and go to HACS in the sidebar.
2. Click Frontend.
3. Click the three-dot menu (⋮) in the top right → Custom repositories.
4. In the Repository field, enter:

   https://github.com/mrcpuddington/tap-home-assistant-card

5. Set Category to Lovelace and click Add.
6. Close the dialog. Search for TappRFID Card in HACS Frontend.
7. Click TappRFID Card → Download → confirm and click Download.
8. Clear your browser cache and reload the HA UI — Lovelace resources are loaded client-side and won’t update without a cache clear.

Tip

In Chrome/Safari: hold Shift and click Reload, or open DevTools → Network → check “Disable cache” → reload.

---

Install manually (ZIP)

1. Go to the TappRFID card repository on GitHub and download the latest release ZIP from the Releases section.
2. Extract the ZIP. You’ll find a single JS file, e.g. tapprfid-card.js.
3. Copy the JS file to your HA www directory:

   /config/www/tapprfid-card.js

   Create the www folder if it doesn’t exist.
4. In Home Assistant, go to Settings → Dashboards.
5. Click ⋮ → Resources in the top right.
6. Click + Add Resource.
7. Enter the URL: /local/tapprfid-card.js
8. Set Resource type to JavaScript module.
9. Click Create.
10. Clear your browser cache and reload.

Note

/local/ in HA maps to /config/www/ on the filesystem. The two paths refer to the same directory.

---

Add the card to a dashboard

Once installed:

1. Open the dashboard where you want to add the card.
2. Click ⋮ → Edit dashboard.
3. Click + Add card.
4. Scroll to the bottom of the card list or search for TappRFID.
5. Select TappRFID Task List.
6. Configure the card (see options below) and click Save.

Manual YAML configuration

If you prefer to configure the card in YAML directly:

type: custom:tapprfid-card
title: My Routines
show_streak: true
show_next_due: true
filter: all
sort: status

---

Card configuration options

Option	Type	Default	Description
title	string	"Tasks"	Card heading text
filter	all | overdue | due_soon | list of task IDs	all	Which tasks to display
sort	status | name | streak | next_due	status	Sort order
show_streak	boolean	true	Show streak counter next to each task
show_next_due	boolean	true	Show next due date/time
show_interval	boolean	false	Show recurrence interval label
compact	boolean	false	Reduce row height for dense dashboards
max_items	integer	unlimited	Cap the number of rows shown

Show only specific tasks

type: custom:tapprfid-card
title: Morning Routine
filter:
  - "TASK_UUID_1"
  - "TASK_UUID_2"
  - "TASK_UUID_3"

Find task UUIDs in the entity attributes in HA, or in the app under Settings → Debug.

Show only overdue and due-soon tasks

type: custom:tapprfid-card
title: Needs Attention
filter: overdue
sort: next_due

Or combine overdue and due_soon with a custom filter:

type: custom:tapprfid-card
title: Action Required
filter: due_soon
sort: status

---

Status dot colours

The card uses the same status dot colours as the app:

Dot colour	State
Red	overdue
Yellow / amber	due_soon
Green	on_track
Dim / grey	complete (done today)

The colours follow your TappRFID accent colour setting if you’ve customised it in the app.

---

Using with Mushroom or custom themes

The card uses CSS custom properties that align with HA’s standard theming system. If you use Mushroom or another custom theme, the card’s background and text colours will inherit from your theme automatically. The status dot colours are hardcoded to match TappRFID’s palette.

---

Updating the card

Via HACS

HACS shows pending updates in the Frontend section. Go to HACS → Frontend → TappRFID Card → Update. Clear browser cache after updating.

Manually

Download the new JS file, replace /config/www/tapprfid-card.js, and clear your browser cache. No HA restart needed for frontend resources.

---

Troubleshooting

Card shows “Custom element doesn’t exist: tapprfid-card”:

• The JS file hasn’t loaded. Clear browser cache and hard-reload.
• Confirm the resource is registered: Settings → Dashboards → ⋮ → Resources.
• If installed via HACS, confirm the download completed successfully.

Card shows but no tasks appear:

• Confirm the backend integration is installed, connected, and has created sensor entities.
• Check that at least one sensor.tapprfid_* entity exists in Settings → Devices & Services → Entities.
• If using a filter list of task IDs, confirm the UUIDs are correct.

Card shows tasks but states are unavailable:

• The backend integration has lost connection. Check the backend integration troubleshooting.

Streak or next-due not showing:

• Confirm show_streak: true and show_next_due: true are set in your card config.
• Confirm the backend integration version supports these attributes (update if needed).

---

For service calls and automation examples, see the Automations page.