🚪 HomeAssistant Gate Control Card

A custom Lovelace card for Home Assistant that provides a visually immersive and intuitive interface for controlling smart gates. Designed with realism, responsiveness, and customization in mind—no branding, just pure user experience.

Keywords: ESP32 gate controller · WebSocket real-time sensor · Webhook LINE notify · UART serial protocol · Home Assistant MQTT · smart gate IoT · ประตูอัตโนมัติ

🚀If you need ready-to-use Hardware

Buy now -> Coming soon

✨ Features

• 🖼️ Realistic gate status visuals — Wide-perspective images with grass, road, and gate elements.
• 🎞️ Live stream support — Refreshes every 15 seconds with fallback image logic.
• 🧼 Minimalist design — No logos or branding; clean and user-focused.
• 🎮 Interactive controls — OPEN, STOP, and CLOSE buttons with ripple animation and status feedback.
• ⚙️ Flexible configuration — Customize icons, labels, and image paths via YAML.
• 🧠 Smart entity handling — Buttons auto-disable if entities are unavailable.

📸 Sample Screenshots

Located in the screen sample folder:

🛠️ Installation

Manual

1. Download gate-control-card.js from the dist folder.
2. Place it in your Home Assistant www directory.
3. Add the following to your configuration.yaml or Lovelace resources:
4. Download and Copy the images in the image folder to www/image/gate

resources:
  - url: /local/gate-control-card.js
    type: module

HACS Installation instructions for users:

1. Open HACS in Home Assistant.
2. Go to "Frontend" → Three-dot menu → "Custom repositories."
3. Enter the repo URL: https://github.com/vanchaiy/gate-control-card
4. Select the type: Dashboard.
5. Press "Add" → a card will appear in the list → Press "Install."
6. Add the resource to Lovelace:
7. Download and Copy the images in the image folder to www/image/gate

resources:
  - url: /hacsfiles/gate-control-card/gate-control-card.js
    type: module

🧾 Configuration Example

type: custom:gate-control-card
status_entity: sensor.ha_sgm_2026_status
open_entity: button.ha_sgm_2026_open
close_entity: button.ha_sgm_2026_close
stop_entity: button.ha_sgm_2026_stop

#<--- Options --->

# Hide the animation to show only the buttons for use with the camera.
image_hide: ( true or false ) 

# If you want to change the animation image, you can add and edit it in the section.
image_state:
  open: ( url or local )
  closed: ( url or local )
  stop: ( url or local )
  opening: ( url or local )
  closing: ( url or local )
  offline: ( url or local )

# Edit the button text and icon
buttons:
  open:
    name: เปิด
    icon: mdi:arrow-expand-horizontal
  stop:
    name: หยุด
    icon: mdi:stop
  close:
    name: ปิด
    icon: mdi:arrow-collapse-horizontal

📷 Example of using with Picture entity card to pull images from your camera.

type: grid
cards:
  - show_state: true
    show_name: true
    camera_view: live
    fit_mode: cover
    type: picture-entity
    name: Gate Status
    entity: sensor.smartgate_cfa4_status
    camera_image: camera.wip30299u_media_profile1
    card_mod:
      style:
        hui-image $: |
          img,
          .container {
            filter: none !important;
          }
  - type: custom:gate-control-card
    status_entity: sensor.smartgate_cfa4_status
    open_entity: button.smartgate_cfa4_open
    close_entity: button.smartgate_cfa4_close
    stop_entity: button.smartgate_cfa4_stop
    image_hide: true
    buttons:
      open:
        name: เปิด
        icon: mdi:arrow-expand-horizontal
      stop:
        name: หยุด
        icon: mdi:stop
      close:
        name: ปิด
        icon: mdi:arrow-collapse-horizontal

🔧 Options | | | | | status_entity | | sensor.gate_status | | open_entity | | switch.gate_open | | close_entity | | switch.gate_close | | stop_entity | | switch.gate_stop | | image_hide | | false | | image_state | | | | buttons | | |

📦 Version Current version: v1.0.1 Last updated: October 2025

🧑‍💻 Developer Notes

• Written in TypeScript using LitElement.
• Uses custom-card-helpers for Home Assistant integration.
• Refreshes stream key every 15 seconds to prevent frozen images.
• Ripple animation and button styling inspired by Material Design.

---

Related

• HA-SGM-2026 API Examples — HA-SGM-2026 API Examples [ REST API · WebSocket · Webhook · UART ]
• Home Assistant — open source home automation
• LINE Messaging API — LINE bot integration

---

License

MIT

---

HA-SGM-2026 · ESP32 Smart Gate · WebSocket · Webhook · UART · Home Assistant · MQTT · LINE Notify · IoT · ประตูอัตโนมัติ