• Stars
    star
    244
  • Rank 165,885 (Top 4 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created about 6 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A custom component for displaying camera feeds in the style of a surveillance system.

Surveillance Card

Surveillance Card is a custom component for lovelace to be used as a panel for viewing security cameras. It shows all of the cameras on the left, and shows a big one with motion on the right.

GitHub release (latest by date) Apache 2.0 hacs_badge

Screenshot


Configuration Parameters

Name Type Description Default
type string custom:surveillance-card Required
cameras list See camera section below Required
thumb_interval number Update interval for thumbnails in seconds (min 0.5) 10
update_interval number Update interval for main image in seconds (min 0.5) 1
show_capture_buttons boolean Show screenshot and record buttons true
recording_duration number Number of seconds to record after clicking record button (min 0.5) 10
focus_motion boolean Switch to camera when motion detected true
camera_view string โ€œliveโ€ will show the live view if the stream integration is enabled. ""
thumb_position string Position of the thumbnails (left, right, top, bottom, none) left

Camera Parameters

Each entry in the camera list takes the following options

Name Type Description Default
entity string or array Camera entity_id Required
motion_entity string entity_id of a binary sensor to use for motion detection (uses state=='on' as motion detected) none

Install Using HACS

Simple Install (Requires Core 2022.8 or newer)

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

Manually Install through HACS

  1. Make sure you have the latest version of HACS installed. HACS install guide
  2. Log in as an Admin and go to HACS > Frontend > Explore and Download Repositories > Search for "surveillance-card" and select it from the list
  3. Click download on the bottom right
  4. Reload your browser when prompted

Add Card To Dashboard

Note For the page you create, make sure to set the View Type to "Panel (1 card)"

  1. Create a new dashboard or select the dashboard you wish to use (must be a UI configured dashboard, use 3b for YAML)
  2. Click the menu button (top right 3 dots) and select edit
  3. Add a "Manual Card" to your screen
  4. Fill out options like the example below
type: custom:surveillance-card
thumb_interval: 15
update_interval: 2
recording_duration: 10
show_capture_buttons: true
camera_view: ""
cameras:
  - entity: camera.front_porch
    motion_entity: binary_sensor.front_porch_motion
  - entity: camera.back_yard
    motion_entity: binary_sensor.back_yard_motion

Saving Snapshots from Cameras

Clicking on the camera button will save a single snapshot from that camera.

Clicking the record button will grab as many images as it can (based on the update intervals) for the set recording_duration

Note: This functionality is not available in native app versions (iOS & Android) and depends on the browser/device's ability to download image files.

Motion entities

Cameras can automatically be set to foccussed when motion is detected from the associated motion entities.

motion_entity can either be a single entity ID or a list of multiple entity IDs.

Note: The entities don't necessarily need to be motion sensors, they just need to be a binary sensor that is triggered when in the "on" state. E.g. a door sensor could also be used.

views:
  - title: Surveillance
    icon: mdi:cctv
    cards:
      - type: custom:surveillance-card
        cameras:
          - entity: camera.front_porch
            motion_entity: binary_sensor.front_porch_motion
          - entity: camera.back_yard
            motion_entity:
            - binary_sensor.back_yard_motion
            - binary_sensor.back_yard_gate

Thanks

Thanks to all the people who have contributed!

contributors

More Repositories

1

button-card

โ‡๏ธ Lovelace button-card for home assistant
JavaScript
1,890
star
2

spotify-card

Spotify playlist card for Home Assistant card
TypeScript
379
star
3

decluttering-card

๐Ÿงน Declutter your lovelace configuration with the help of this card
TypeScript
360
star
4

bar-card

Customizable Animated Bar card for Home Assistant Lovelace
TypeScript
333
star
5

stack-in-card

๐Ÿ›  group multiple cards into one card without the borders
TypeScript
267
star
6

upcoming-media-card

๐Ÿ“บ A card to display upcoming episodes and movies from services like: Plex, Kodi, Radarr, Sonarr, and Trakt.
JavaScript
260
star
7

boilerplate-card

A community driven blueprint for best practices
TypeScript
225
star
8

dual-gauge-card

Dual gauge custom card for Lovelace in Home Assistant
JavaScript
187
star
9

flex-table-card

Highly Flexible Lovelace Card - arbitrary contents/columns/rows, regex matched, perfect to show appdaemon created content and anything breaking out of the entity_id + attributes concept
JavaScript
184
star
10

secondaryinfo-entity-row

Custom entity row for HomeAssistant, providing additional types of data to be displayed in the secondary info area of the Lovelace Entities card
JavaScript
169
star
11

circle-sensor-card

A custom component for displaying sensor values as cards or elements
JavaScript
166
star
12

canvas-gauge-card

The card makes it possible to use gauges from https://canvas-gauges.com/
TypeScript
158
star
13

tracker-card

A card to track custom cards and custom component updates.
JavaScript
110
star
14

bignumber-card

JavaScript
110
star
15

button-entity-row

Adds buttons to call services to entity cards
JavaScript
103
star
16

check-button-card

Check Button Card is a button that tracks when it is last pressed, for the Home Assistant Lovelace front-end using MQTT auto discovery.
TypeScript
103
star
17

information

88
star
18

entity-attributes-card

Entity Attributes
JavaScript
64
star
19

group-element

A group element for picture-elements with dynamic toggle capability
JavaScript
60
star
20

light-entity-row

Entity row for lights with sliders for adjusting different values based on features
JavaScript
55
star
21

custom-card-helpers

Custom Card Helper Functions/Types for Developers
TypeScript
48
star
22

gauge-card

JavaScript
44
star
23

monster-card

โš ๏ธ DEPRECATED - MOVE TO AUTO-ENTITIES
JavaScript
35
star
24

unused-card

All your unused entities in a list
TypeScript
32
star
25

plan-coordinates

JavaScript
28
star
26

rmv-card

Custom card for the RMV component.
JavaScript
27
star
27

group-card

JavaScript
23
star
28

state-attribute-element

Give you the specified attribute of an entity
JavaScript
22
star
29

favicon-counter

Show a notification count badge.
JavaScript
19
star
30

text-element

An element that can be used to show static text on the `picture-elements` card
JavaScript
19
star
31

cover-element

JavaScript
17
star
32

camera-card

๐Ÿ“บ Camera Card for Lovelace
JavaScript
17
star
33

ext-weblink

Adds ext weblink with icon to picture-elements or entity cards
JavaScript
16
star
34

state-element

Give you the option to prefix the state-label with a formated string.
JavaScript
16
star
35

nintendo-wishlist-card

Displays a card showing Nintendo Switch games that are on sale from your wish list.
JavaScript
15
star
36

timer-card

โฒ Lovelace Timer Card
TypeScript
11
star
37

home-setter

JavaScript
10
star
38

pc-card

๐Ÿ’ต Personal Capital Card
JavaScript
8
star
39

text-action-element

JavaScript
7
star
40

username-element

Show the current logged in user.
JavaScript
7
star
41

beer-card

This card give you a list of your wishlist items.
JavaScript
3
star