{"id":15088976,"url":"https://github.com/twrecked/lovelace-hass-aarlo","last_synced_at":"2025-04-06T05:17:18.089Z","repository":{"id":38388675,"uuid":"197245179","full_name":"twrecked/lovelace-hass-aarlo","owner":"twrecked","description":"Lovelace card for hass-aarlo integration.","archived":false,"fork":false,"pushed_at":"2025-02-20T15:30:23.000Z","size":706,"stargazers_count":75,"open_issues_count":52,"forks_count":24,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T04:09:12.012Z","etag":null,"topics":["arlo","camera","homeassistant","lovelace-card","streaming"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twrecked.png","metadata":{"files":{"readme":"README.md","changelog":"changelog","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-16T18:12:44.000Z","updated_at":"2025-02-20T15:29:39.000Z","dependencies_parsed_at":"2024-09-09T16:08:11.307Z","dependency_job_id":null,"html_url":"https://github.com/twrecked/lovelace-hass-aarlo","commit_stats":{"total_commits":231,"total_committers":11,"mean_commits":21.0,"dds":0.1515151515151515,"last_synced_commit":"fbc353f6afb67d23b2a99ed6dcecff905ade44c3"},"previous_names":[],"tags_count":55,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twrecked%2Flovelace-hass-aarlo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twrecked%2Flovelace-hass-aarlo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twrecked%2Flovelace-hass-aarlo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twrecked%2Flovelace-hass-aarlo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twrecked","download_url":"https://codeload.github.com/twrecked/lovelace-hass-aarlo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436289,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arlo","camera","homeassistant","lovelace-card","streaming"],"created_at":"2024-09-25T08:38:07.956Z","updated_at":"2025-04-06T05:17:18.070Z","avatar_url":"https://github.com/twrecked.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lovelace-hass-arlo\n\n## Version 0.3\n\n**Be warned, 0.3 is beta**\n\nIt's working for me, but be prepared to return to version 0.2 if things go\nwrong.\n\n### **Breaking Changes**\n\n**The \"Old Configuration\" format has been deprecated, this code throw an error\nif it detects the old style.** \n\n`smart` has been replaced with `smart-modal`\n\n`direct` is ignored, the default is a _smart stream_ mode where it chooses to\nstream directly from Arlo if it thinks it can. `arlo-stream` replaces `direct` and `ha-stream` is\nnew.\n\n### Localisation\nThe card now supports localisation with English, French, German and Spanish \nprovided at the moment. If anybody fancies translating into other languages,\nlook at `en.js`\n[here](https://github.com/twrecked/lovelace-hass-aarlo/tree/master/lang), you\njust need to translate the strings in quotes.\n\n\n## Table of Contents\n- [Introduction](#introduction)\n- [Installation](#installation)\n- [How it looks](#how-it-looks)\n- [Configuration](#configuration)\n- [Further Documentation](#further-documentation)\n\n\n\u003ca name=\"introduction\"\u003e\u003c/a\u003e\n## Introduction\nLovelace card designed specifically for the [AArlo\nIntegration](https://github.com/twrecked/hass-aarlo).\n\n\u003ca name=\"introduction-features\"\u003e\u003c/a\u003e\n#### Features\nIt provides:\n* Motion and sound notifications.\n* Access to the camera library recordings.\n* Live streaming.\n* Support for doorbell and door opening notifications.\n* Support for toggling lights during streaming.\n\n\u003ca name=\"introduction-notes\"\u003e\u003c/a\u003e\n#### Notes\nThis document assumes you are familiar with Home Assistant setup and configuration.\n\n\u003ca name=\"introduction-thanks\"\u003e\u003c/a\u003e\n#### Thanks\nMany thanks to:\n* [Button Card](https://github.com/kuuji/button-card/blob/master/button-card.js)\n  for a working lovelace card I could understand\n* Translations: Spanish by [alceasan](https://github.com/alceasan); German by [TheDK](https://github.com/TheDK)\n  Italian by [QuakeGio83](https://github.com/QuakeGio83); Swedish by [pierrebengtsson](https://github.com/pierrebengtsson)\n* [JetBrains](https://www.jetbrains.com/?from=hass-aarlo) for the excellent\n  **PyCharm IDE** and providing me with an open source license to speed up the\n  project development.\n\n  [![JetBrains](/images/jetbrains.svg)](https://www.jetbrains.com/?from=hass-aarlo)\n\n\n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation\n\nUse one of the following 2 ways to install the card, I recommend \n**HACS**.\n\nIf, after installation, you can't see the card, you might need to clear the\nbrowser cache and reload the page. On Chrome you can force this with\n`CTRL+SHIFT+I` to open the developer tools and then `CTRL+SHIFT+R` to reload\nthe page.\n\n\u003ca name=\"installation-hacs\"\u003e\u003c/a\u003e\n#### HACS\n[![hacs_badge](https://img.shields.io/badge/HACS-Default-orange.svg?style=for-the-badge)](https://github.com/hacs/integration)\n\nAarlo is part of the default HACS store. If you're not interested in\ndevelopment branches this is the easiest way to install.  See\n[hass-aarlo-hacs](hacsinstall.md) for some hints on installing and setup using\nHACS and the home assistant interface.\n\n\u003ca name=\"installation-from-script\"\u003e\u003c/a\u003e\n#### From Script\n\nYou don't need to run this if you used **HACS** to install.\n\n```sh\ninstall /config\n# check output looks good\ninstall go /config\n```\n\nAdd the following to the top of your UI configuration file.\n\n```yaml\nresources:\n  - type: module\n    url: /local/aarlo-glance.js\n```\n\nThe card type is `custom:aarlo-glance`.\n\n\n\u003ca name=\"how-it-looks\"\u003e\u003c/a\u003e\n## How it looks\n\n![The Image View](/images/arlo-glance-01.png?raw=true)\n\nReading from left to right you have the camera name, motion detection indicator,\ncaptured clip indicator, battery levels, signal level and current state. If you\nclick the image the last captured clip will play, if you click the last captured\nicon you will be show the video library thumbnails - see below. Clicking the\ncamera icon (not shown) will take a snapshot and replace the current thumbnail.\n(See supported features for list of camera statuses)\n\n![The Library View](/images/arlo-glance-02.png)\n\nClicking on the last captured clip will display thumbnail mode. Clicking on a\nthumbnail starts the appropiate video.  You can currently only see the last 99\nvideos. If you move your mouse over a thumbnail it will show you time of capture\nand, if you have a Smart subscription, a reason for the capture. **\u003e** takes you\nto the next page, **\u003c** to the previous and **X** closes the window.\n\n\n\n\u003ca name=\"configuration\"\u003e\u003c/a\u003e\n## Configuration\n\n#### Card Type\n\n| Name | Value                 | Description                            |\n|------|-----------------------|----------------------------------------|\n| type | `custom:aarlo-glance` | Tell lovelace this is an `aarlo` card. |\n\nYou have to tell `lovelace` the card type.\n\n#### Simple or Multi Camera Configuration\n\nChoose a single camera configuration or multiple camera configuration.\nOne of `entity` or `entities` must be used, if you supply both `entity` and\n`entities` at the top level `entities` will take priority.\n\n- Single Camera Configuration\n\n| Name   | Type      | Required | Description                                                                                       |\n|--------|-----------|----------|---------------------------------------------------------------------------------------------------|\n| entity | entity_id | No       | Full entity id of camera this card is controlling - for example, `camera.aarlo_front_door_camera` |\n| name   | String    | No       | Display name.                                                                                     |\n\n- Multi Camera Configuration\n\n| Name     | Type  | Required | Description                               |\n|----------|-------|----------|-------------------------------------------|\n| entities | array | No       | An array of single camera configurations. |\n\nA multi camera configuration is an array of single camera configurations.\nYou can specify a shared configuration for most options so a multi camera\nconfiguration can be as simple as:\n\n```yaml\nentities:\n  - entity: camera.aarlo_front_door_camera\n  - entity: camera.aarlo_front_camera\n# shared options\n```\n\n#### Global Options\n\n| Name       | Type | Required | Supported Values                            |\n|------------|------|----------|---------------------------------------------|\n| global     | list | No       | active, muted, square, blended, small, tiny |\n\nThese are the options that determine the overall behaviour of the card.\n  - `active`; for multi camera cards, the image will change to the most recently\n    updated camera\n  - `muted`; start in a muted state, mute state is remember across recordings\n    and streams\n  - `square`; use a square image; useful for Arlo Video Doorbells; this affects\n    the library view as well.\n  - `blended`; for multi camera cards; the library view will display all camera\n    recordings spliced together\n  - `small`; use smaller fonts and icons\n  - `tiny`; use even smaller fonts and icons\n\n\n#### Image Options\n\n| Name       | Type | Required | Supported Values                                                                   |\n|------------|------|----------|------------------------------------------------------------------------------------|\n| image_view | list | No       | start-stream, start-recording, arlo-stream, ha-stream, modal, smart-modal, numeric |\n\nThese are the options that determine the overall behaviour of the card when\nshowing the image view.\n  - `start-stream`; the card will start streaming when opened\n  - `start-recording`; _not implemented yet_, the card will play recording when\n    finished\n  - `arlo-stream`; when streaming the card will access Arlo directly rather\n    than go through Home Assistant\n  - `ha-stream`; when streaming the card will always go through Home Assistant\n  - `modal`; open the recording or stream in a modal window\n  - `smart-modal`; open the recording or stream in a modal window on a desktop\n    machine, show inline otherwise.\n  - `numeric`;  have the library display the number of entries. After nine it\n    will display 9+.\n\nYou only need to specify `arlo-stream` or `ha-stream` if you run into streaming\nissues, the card will try to do the correct thing if neither of these is\nspecified.\n\n\n| Name         | Type | Required | Supported Values                                                                        |\n|--------------|------|----------|-----------------------------------------------------------------------------------------|\n| image_top    | list | No       | name, date, status, motion, sound, battery, signal, library, stream, onoff, snapshot... |\n| image_bottom | list | No       | name, date, status, motion, sound, battery, signal, library, stream, onoff, snapshot... |\n\nThese options determine what information and functions are available on the\nimage view. `image_top` controls what appears at the top and `image_bottom`\nwhat appears at the bottom. If you leave one of the options blank nothing will\nappear at that place on the image.\n  - `name`; camera name\n  - `date`; date/time of last capture\n  - `status`; current camera status - for example, `Idle`, `Recording`\n  - `motion`; motion detection status, click for history\n  - `sound`; sound detection status, click for history\n  - `battery`; current battery level, click for history \n  - `signal`; current wifi strength, click for history \n  - `library`; library status - are there any recordings today, any recordings at\n    all, click to open the library view\n  - `stream`; click to start a live stream\n  - `onoff`; click to turn the camera on and off\n  - `snapshot`; click to take a snapshot\n\nIf you have multiple cameras showing on one card the following options are\navailable:\n  - `previous`; click to move to the previous camera\n  - `next`; click to move to the next camera\n\nThe following options can be used if you used any Device Options. You can\nalways `SHIFT+CLICK` to see a device history.\n  - `door`; door status\n  - `lock`; lock status; click to lock and unlock\n  - `bell`; door bell status, if you supply a mute switch then click to\n    mute/unmute\n  - `door2`; door2 status\n  - `lock2`; lock status; click to lock and unlock\n  - `bell2`; door bell status, if you supply a mute switch then click to\n    mute/unmute\n  - `light`; light status, click to turn off and on\n\n##### Notes\nTo get the `aarlo` Device sensors to work correctly you need to enable the\ncorresponding `binary_sensor` or `sensor`. For example, to get motion\nnotifications working you need the following binary sensor enabled:\n\n```yaml\nbinary_sensor:\n  - platform: aarlo\n    monitored_conditions:\n    - motion\n```\n\n\n| Name        | Type | Required | Supported Values                |\n|-------------|------|----------|---------------------------------|\n| image_click | list | No       | stream, recording               |\n\nThis option determines what happens when you click the image\n  - `stream`; start a live stream\n  - `recording`; play the last recording\n\n| Name           | Type    | Required | Default |\n|----------------|---------|----------|---------|\n| snapshot_retry | seconds | No       | 2,5     |\n\nThis option lets you change the image update retry times. If you find the\nsnapshot image doesn't update all the time try adding extra time outs.\n\n#### Library Options\n\n| Name         | Type | Required | Supported Values                                        |\n|--------------|------|----------|---------------------------------------------------------|\n| library_view | list | No       | start-recording, download, modal, smart-modal, duration |\n\nThis option determines the overall behaviour of the card when showing the\nlibrary view.\n  - `start-recording`; _not implemented yet_, automatically show the recording when\n    finished.\n  - `download`; show an icon to download the video when the mouse hovers over\n    the recording thumbnail\n  - `modal`; open the recording or stream in a modal window\n  - `smart-modal`; open the recording or stream in a modal window on a desktop\n    machine, show inline otherwise.\n  - `duration`; show how long the recording is\n\n| Name         | Type         | Required | Default |\n|--------------|--------------|----------|---------|\n| library_size | Integer list | No       | 3       |\n\nThis option sets the available library sizes. It is a comma separated list of\ninteger values; for example `3,6,1` and you can cycle through the sizes from the\nlibrary view. When you open the library view it will return the previous size\nused.\n\n| Name            | Type         | Required | Default |\n|-----------------|--------------|----------|---------|\n| library_regions | Integer list | No       | 3       |\n\nThis option sets the library sizes that will highlight the object that caused\nthe recording. The default value is `library_size`. This is useful for hiding\nthe highlight for larger library sizes.\n\n| Name            | Type      | Required | Default   |\n|-----------------|-----------|----------|-----------|\n| library_animal  | css color | no       | orangered |\n| library_vehicle | css color | no       | yellow    |\n| library_person  | css color | no       | lime      |\n| library_package | css color | no       | cyan      |\n\nThese options determine the color of the highligh box.\n  - `library_animal`; color to use when highlighting an animal\n  - `library_vehicle`; color to use when highlighting a vehicle\n  - `library_person`; color to use when highlighting a person\n  - `library_package`; color to use when highlighting a package\n\n| Name            | Type         | Required | Default |\n|-----------------|--------------|----------|---------|\n| max_recordings  | Integer      | No       | 100     |\n\nThis option specifies the maximum number of recordings to show in the library.\nIt is per camera.\n\n#### Device Options\n\n| Name            | Type      | Description                      |\n|-----------------|-----------|----------------------------------|\n| door            | entity_id | A door contact switch.           |\n| door_lock       | entity_id | A door lock switch.              |\n| door_bell       | entity_id | A door bell.                     |\n| door_bell_mute  | entity_id | A switch to mute `door_bell`.    |\n| door2           | entity_id | A door contact switch.           |\n| door2_lock      | entity_id | A door lock switch.              |\n| door2_bell      | entity_id | A door bell.                     |\n| door2_bell_mute | entity_id | A switch to mute `door2_bell`.   |\n| light           | entity_id | A light switch.                  |\n\nThese options are useful if the camera is pointing at a door.\n\nAs well as reporting camera status the card can report on and operate other\ndevices. The card can tell you if doors are open, show and operate door locks,\nshow and operate lights and show and operate door bells.\n\nThe door lock and light controls will appear on the live stream.\n\n#### Arlo Device Options\n\n| Name       | Type   | Description                                        | \n|------------|--------|----------------------------------------------------|\n| motion_id  | String | Override the calculated motion device name         |\n| sound_id   | String | Override the calculated sound device name          |\n| battery_id | String | Override the calculated battery device name        |\n| signal_id  | String | Override the calculated signal device name         |\n| capture_id | String | Override the calculated captured today device name |\n| last_id    | String | Override the calculated last captured device name  |\n\nIf you don't change the device names `aarlo` gives you won't need to change\nthese options, they are based on the entity you set. If you do change the name\nor want to use a device not provided by `aarlo` then use these.\n\n```yaml\nbinary_sensor:\n  - platform: aarlo\n    monitored_conditions:\n    - motion\n```\n\n#### Advanced Options\n\nYou won't generally need to change these.\n\n| Name             | Type    | Default | Description                                                          |\n|------------------|---------|---------|----------------------------------------------------------------------|\n| card_size        | integer | 3       | Tell `lovelace` how much space to allocate for the card.             |\n| id               | string  |         | Override the HTML element `id` the card uses.                        |\n| logging          | boolean | false   | Set to true to enable logging to the browser console.                |\n| modal_multiplier | float   | 0.8     | Set this to change how much space the modal window will try to take. |\n| swipe_threshold  | integer | 150     | Set this to change how long a swipe has to be to register.           |\n\n\n## Customizing the Layout\n\nYou can use `image_top` and `image_bottom` to customize the icons and text in\nthe image. The card will keep the order you entered the icons in and will\nallow you to groups items together. And unlink previous versions you can place\nthe icons at the top of the screen.\n\nFor example, the following entry will place some camera icons at the bottom of\nthe image. They are in the same group so the card will spread them across its\nentire width.\n\n```yaml\nimage_bottom: 'onoff,motion,library,stream,signal,sound,snapshot,battery'\n```\n\n![A Single Group](/images/single-group.png?raw=true)\n\nIn this example we create 2 groups using the `|` symbol. Now the first group\nis placed to the left of the card and the second group to the right.\n\n```yaml\nimage_bottom: 'onoff,motion,library,stream,signal,sound|snapshot,battery'\n```\n\n![Two Groups](/images/two-groups.png?raw=true)\n\nIn this example we create an empty group at the beginning which forces all the\nicons to appear on the right of the card.\n\n```yaml\nimage_bottom: '|onoff,motion,library,stream,signal,sound,snapshot,battery'\n```\n\nAnd this one places them at the top:\n\n```yaml\nimage_top: 'onoff,motion,library,stream,signal,sound,snapshot,battery'\n```\n\nIf you find the configuration is getting too wide you can also split the\ngroups up this way:\n\n```yaml\nimage_bottom:\n  - 'previous,sound,motion,battery,library,stream,snapshot'\n  - 'door,lock,light,next'\n```\n\nIf you find things too closely placed together a `,,` will insert a gap.\n\n## Example Configurations\n\n#### A Single Camera Card\n\nThis card is a single camera with custom library sizes that can monitor a door\nand control the door's lock.\n\n```yaml\ntype: 'custom:aarlo-glance'\nentity: camera.aarlo_front_door_camera\nname: front door\nimage_view: direct\nimage_top: 'name,status'\nimage_bottom: 'motion,library,stream,snapshot,battery'\nimage_click: 'recordings'\nlibrary_sizes: '3,4,2'\ndoor: binary_sensor.front_door\ndoor_lock: lock.front_door_lock\n```\n\n#### Multi Camera Card #1\n\nThis card is a multi camera card with custom library sizes where both cameras\nare monitoring the same door. The image will change to the most recently\nactive camera and the library view is blended.\n\n```yaml\ntype: 'custom:aarlo-glance'\nentities:\n  - entity: camera.aarlo_front_door_camera\n    name: front door\n  - entity: camera.aarlo_front_camera\n    name: front\nglobal: active,blended\nimage_view: direct\nimage_top: 'name,status'\nimage_bottom: 'motion,library,stream,snapshot,battery'\nimage_click: 'recordings'\nlibrary_sizes: '3,4,2'\ndoor: binary_sensor.front_door\ndoor_lock: lock.front_door_lock\n```\n\n#### Multi Camera Card #2\n\nThis card is a multi camera card with custom library sizes where both cameras\nare monitoring their own door. The image will change to the most recently\nactive camera and the library view is blended.\n\n```yaml\ntype: 'custom:aarlo-glance'\nentities:\n  - entity: camera.aarlo_front_door_camera\n    name: front door\n    door: binary_sensor.front_door\n    door_lock: lock.front_door_lock\n  - entity: camera.aarlo_back_door_camera\n    name: back door\n    door: binary_sensor.back_door\n    door_lock: lock.back_door_lock\nglobal: active,blended\nimage_view: direct\nimage_top: 'name,status'\nimage_bottom: 'motion,library,play,snapshot,battery'\nimage_click: 'recordings'\nlibrary_sizes: '3,4,2'\n```\n\n\n\u003ca name=\"further-documentation\"\u003e\u003c/a\u003e\n##  Further Documentation\nSee [hass-aarlo](https://github.com/twrecked/hass-aarlo/blob/master/README.md)\nfor general Aarlo documentation.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwrecked%2Flovelace-hass-aarlo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwrecked%2Flovelace-hass-aarlo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwrecked%2Flovelace-hass-aarlo/lists"}