Lovelace cards for the Adaptive Cover Pro Home Assistant integration. Drop a tile on your dashboard to see where every shade sits and why, and put up a compass that shows the sun crossing each window in real time.

📖 Full documentation: Lovelace Card · Sky Compass Card on the integration wiki.

The compass above is the standalone card running through a simulated day. The sun rises, arcs across the window's field of view, and sets; the shaded wedge is the cover closing as the sun enters the FOV, and the dimmed disc is the sun below the horizon at night. The "Sun Today" strip underneath plots elevation against the same FOV window so you can read the whole day at a glance.

It is hand-drawn SVG (no charting library), reads sun and window geometry straight from the integration, and takes one or more entry_ids so several windows can share a single compass with one sun dot.

One tile per shade: icon, name, live position, and ↑ ■ ▼ controls. The badge on the right tells you which automation is driving the cover right now, and tapping the tile opens a full Adaptive Cover Pro dialog (target, per-cover bars, forecast strip, and the compass + pipeline trace under an advanced section).

Same custom:adaptive-cover-pro-tile-card in four states. The badge changes with the live decision:

Force, weather, glare, climate, cloud, and custom-position slots get their own badges too. Every badge can be toggled off individually, and a small motion-sensor mark can sit on the icon when motion is active. Stack as many tiles as you have shades for a dense, glanceable dashboard.

When you want everything in one place, the full card stacks the compass, the elevation chart, the pipeline decision strip (all handlers, with the winner and its position highlighted), per-cover position bars, the overrides panel, and the climate strip.

HACS (recommended):

1. Add https://github.com/jrhubott/adaptive-cover-pro-card as a custom repository (category: Lovelace).
2. Install Adaptive Cover Pro Card and refresh.
3. The cards appear in the card picker under "Adaptive Cover Pro".

Manual:

1. Download adaptive-cover-pro-card.js from the latest release.
2. Copy it to config/www/community/adaptive-cover-pro-card/adaptive-cover-pro-card.js.
3. Add a dashboard resource:

   url: /local/community/adaptive-cover-pro-card/adaptive-cover-pro-card.js
   type: module

Every option is exposed in the visual editor; the YAML below is the equivalent.

Tile card (stack one per shade):

type: custom:adaptive-cover-pro-tile-card
entry_id: YOUR_CONFIG_ENTRY_ID
# optional:
# name: Patio Right
# icon: mdi:blinds-horizontal
# cover: cover.patio_right_shade
# layout: detailed          # 'detailed' | 'one-line'
# show_position: true
# show_controls: true
# show_badge: true
# show_resume: auto         # 'auto' | 'always' | 'never'
# tap_action: { action: more-info }

Sky compass (one or more entries):

type: custom:adaptive-cover-pro-sky-compass-card
entry_ids:
  - KITCHEN_ENTRY_ID
  - LIVING_ROOM_ENTRY_ID
# optional:
# title: West-facing windows
# show_elevation_chart: true
# show_moon: false
# show_blind_spot: true
# show_sun_path: true
# show_legend: true
# show_stats: true

Full card:

type: custom:adaptive-cover-pro-card
entry_id: YOUR_CONFIG_ENTRY_ID
# optional:
# show_sections: [sky, decision, covers, overrides]
# compact: false

Find your entry_id at /config/integrations/integration/adaptive_cover_pro: click the entry and read it out of the URL bar (entry_id=...).

See the For Developers wiki for the full setup and build/release flow. Quick start:

npm install
npm run dev       # rollup -c -w, rebuilds dist/ on save
npm run harness   # interactive dev harness with a control panel
npm run test      # vitest
npm run lint

The README and wiki imagery is generated from the dev harness, so it stays in sync with the cards. One command regenerates everything:

npm run capture:readme-wiki   # all stills, the tile gallery, and the GIF

Or run the pieces directly:

npm run capture:screenshots   # still PNGs of each card/control into images/
npm run capture:timelapse     # the animated sky-compass GIF

All need Playwright (npx playwright install chromium once); the timelapse also needs ffmpeg on PATH, as does capture:screenshots --compose. Run any of them with --help for options, or capture:screenshots --list-shots to see what each shot captures.

Pairs with Adaptive Cover Pro, itself forked from basbruss/adaptive-cover.