Home

Awesome

lovelace-hass-arlo

Version 0.3

Be warned, 0.3 is in beta

It's working for me, but it's beta so be prepared to return to version 0.2 if things go wrong.

I've put it out there so people can try it if they want. The underlying architecture is very different and (I hope) a lot more efficient.

Breaking Changes

The "Old Configuration" format has been deprecated, this code throw an error if it detects the old style.

smart has been replaced with smart-modal

direct is ignored, the default is a smart stream mode where it chooses to stream directly from Arlo if it thinks it can. arlo-stream replaces direct and ha-stream is new.

Localisation

The card now supports localisation with English, French, German and Spanish provided at the moment. If anybody fancies translating into other languages, look at en.js here, you just need to translate the strings in quotes.

Table of Contents

<a name="introduction"></a>

Introduction

Lovelace card designed specifically for the AArlo Integration.

<a name="introduction-features"></a>

Features

It provides:

<a name="introduction-notes"></a>

Notes

This document assumes you are familiar with Home Assistant setup and configuration.

<a name="introduction-thanks"></a>

Thanks

Many thanks to:

<a name="installation"></a>

Installation

Use one of the following 2 ways to install the card, I recommend HACS.

If, after installation, you can't see the card, you might need to clear the browser cache and reload the page. On Chrome you can force this with CTRL+SHIFT+I to open the developer tools and then CTRL+SHIFT+R to reload the page.

<a name="installation-hacs"></a>

HACS

hacs_badge

Aarlo is part of the default HACS store. If you're not interested in development branches this is the easiest way to install. See hass-aarlo-hacs for some hints on installing and setup using HACS and the home assistant interface.

<a name="installation-from-script"></a>

From Script

You don't need to run this if you used HACS to install.

install /config
# check output looks good
install go /config

Add the following to the top of your UI configuration file.

resources:
  - type: module
    url: /local/aarlo-glance.js

The card type is custom:aarlo-glance.

<a name="how-it-looks"></a>

How it looks

The Image View

Reading from left to right you have the camera name, motion detection indicator, captured clip indicator, battery levels, signal level and current state. If you click the image the last captured clip will play, if you click the last captured icon you will be show the video library thumbnails - see below. Clicking the camera icon (not shown) will take a snapshot and replace the current thumbnail. (See supported features for list of camera statuses)

The Library View

Clicking on the last captured clip will display thumbnail mode. Clicking on a thumbnail starts the appropiate video. You can currently only see the last 99 videos. If you move your mouse over a thumbnail it will show you time of capture and, if you have a Smart subscription, a reason for the capture. > takes you to the next page, < to the previous and X closes the window.

<a name="configuration"></a>

Configuration

Card Type

NameValueDescription
typecustom:aarlo-glanceTell lovelace this is an aarlo card.

You have to tell lovelace the card type.

Simple or Multi Camera Configuration

Choose a single camera configuration or multiple camera configuration. One of entity or entities must be used, if you supply both entity and entities at the top level entities will take priority.

NameTypeRequiredDescription
entityentity_idNoFull entity id of camera this card is controlling - for example, camera.aarlo_front_door_camera
nameStringNoDisplay name.
NameTypeRequiredDescription
entitiesarrayNoAn array of single camera configurations.

A multi camera configuration is an array of single camera configurations. You can specify a shared configuration for most options so a multi camera configuration can be as simple as:

entities:
  - entity: camera.aarlo_front_door_camera
  - entity: camera.aarlo_front_camera
# shared options

Global Options

NameTypeRequiredSupported Values
globallistNoactive, muted, square, blended, small, tiny

These are the options that determine the overall behaviour of the card.

Image Options

NameTypeRequiredSupported Values
image_viewlistNostart-stream, start-recording, arlo-stream, ha-stream, modal, smart-modal, numeric

These are the options that determine the overall behaviour of the card when showing the image view.

You only need to specify arlo-stream or ha-stream if you run into streaming issues, the card will try to do the correct thing if neither of these is specified.

NameTypeRequiredSupported Values
image_toplistNoname, date, status, motion, sound, battery, signal, library, stream, onoff, snapshot...
image_bottomlistNoname, date, status, motion, sound, battery, signal, library, stream, onoff, snapshot...

These options determine what information and functions are available on the image view. image_top controls what appears at the top and image_bottom what appears at the bottom. If you leave one of the options blank nothing will appear at that place on the image.

If you have multiple cameras showing on one card the following options are available:

The following options can be used if you used any Device Options. You can always SHIFT+CLICK to see a device history.

Notes

To get the aarlo Device sensors to work correctly you need to enable the corresponding binary_sensor or sensor. For example, to get motion notifications working you need the following binary sensor enabled:

binary_sensor:
  - platform: aarlo
    monitored_conditions:
    - motion
NameTypeRequiredSupported Values
image_clicklistNostream, recording

This option determines what happens when you click the image

NameTypeRequiredDefault
snapshot_retrysecondsNo2,5

This option lets you change the image update retry times. If you find the snapshot image doesn't update all the time try adding extra time outs.

Library Options

NameTypeRequiredSupported Values
library_viewlistNostart-recording, download, modal, smart-modal, duration

This option determines the overall behaviour of the card when showing the library view.

NameTypeRequiredDefault
library_sizeInteger listNo3

This option sets the available library sizes. It is a comma separated list of integer values; for example 3,6,1 and you can cycle through the sizes from the library view. When you open the library view it will return the previous size used.

NameTypeRequiredDefault
library_regionsInteger listNo3

This option sets the library sizes that will highlight the object that caused the recording. The default value is library_size. This is useful for hiding the highlight for larger library sizes.

NameTypeRequiredDefault
library_animalcss colornoorangered
library_vehiclecss colornoyellow
library_personcss colornolime
library_packagecss colornocyan

These options determine the color of the highligh box.

NameTypeRequiredDefault
max_recordingsIntegerNo100

This option specifies the maximum number of recordings to show in the library. It is per camera.

Device Options

NameTypeDescription
doorentity_idA door contact switch.
door_lockentity_idA door lock switch.
door_bellentity_idA door bell.
door_bell_muteentity_idA switch to mute door_bell.
door2entity_idA door contact switch.
door2_lockentity_idA door lock switch.
door2_bellentity_idA door bell.
door2_bell_muteentity_idA switch to mute door2_bell.
lightentity_idA light switch.

These options are useful if the camera is pointing at a door.

As well as reporting camera status the card can report on and operate other devices. The card can tell you if doors are open, show and operate door locks, show and operate lights and show and operate door bells.

The door lock and light controls will appear on the live stream.

Arlo Device Options

NameTypeDescription
motion_idStringOverride the calculated motion device name
sound_idStringOverride the calculated sound device name
battery_idStringOverride the calculated battery device name
signal_idStringOverride the calculated signal device name
capture_idStringOverride the calculated captured today device name
last_idStringOverride the calculated last captured device name

If you don't change the device names aarlo gives you won't need to change these options, they are based on the entity you set. If you do change the name or want to use a device not provided by aarlo then use these.

binary_sensor:
  - platform: aarlo
    monitored_conditions:
    - motion

Advanced Options

You won't generally need to change these.

NameTypeDefaultDescription
card_sizeinteger3Tell lovelace how much space to allocate for the card.
idstringOverride the HTML element id the card uses.
loggingbooleanfalseSet to true to enable logging to the browser console.
modal_multiplierfloat0.8Set this to change how much space the modal window will try to take.
swipe_thresholdinteger150Set this to change how long a swipe has to be to register.

Customizing the Layout

You can use image_top and image_bottom to customize the icons and text in the image. The card will keep the order you entered the icons in and will allow you to groups items together. And unlink previous versions you can place the icons at the top of the screen.

For example, the following entry will place some camera icons at the bottom of the image. They are in the same group so the card will spread them across its entire width.

image_bottom: 'onoff,motion,library,stream,signal,sound,snapshot,battery'

A Single Group

In this example we create 2 groups using the | symbol. Now the first group is placed to the left of the card and the second group to the right.

image_bottom: 'onoff,motion,library,stream,signal,sound|snapshot,battery'

Two Groups

In this example we create an empty group at the beginning which forces all the icons to appear on the right of the card.

image_bottom: '|onoff,motion,library,stream,signal,sound,snapshot,battery'

And this one places them at the top:

image_top: 'onoff,motion,library,stream,signal,sound,snapshot,battery'

If you find the configuration is getting too wide you can also split the groups up this way:

image_bottom:
  - 'previous,sound,motion,battery,library,stream,snapshot'
  - 'door,lock,light,next'

If you find things too closely placed together a ,, will insert a gap.

Example Configurations

A Single Camera Card

This card is a single camera with custom library sizes that can monitor a door and control the door's lock.

type: 'custom:aarlo-glance'
entity: camera.aarlo_front_door_camera
name: front door
image_view: direct
image_top: 'name,status'
image_bottom: 'motion,library,stream,snapshot,battery'
image_click: 'recordings'
library_sizes: '3,4,2'
door: binary_sensor.front_door
door_lock: lock.front_door_lock

Multi Camera Card #1

This card is a multi camera card with custom library sizes where both cameras are monitoring the same door. The image will change to the most recently active camera and the library view is blended.

type: 'custom:aarlo-glance'
entities:
  - entity: camera.aarlo_front_door_camera
    name: front door
  - entity: camera.aarlo_front_camera
    name: front
global: active,blended
image_view: direct
image_top: 'name,status'
image_bottom: 'motion,library,stream,snapshot,battery'
image_click: 'recordings'
library_sizes: '3,4,2'
door: binary_sensor.front_door
door_lock: lock.front_door_lock

Multi Camera Card #2

This card is a multi camera card with custom library sizes where both cameras are monitoring their own door. The image will change to the most recently active camera and the library view is blended.

type: 'custom:aarlo-glance'
entities:
  - entity: camera.aarlo_front_door_camera
    name: front door
    door: binary_sensor.front_door
    door_lock: lock.front_door_lock
  - entity: camera.aarlo_back_door_camera
    name: back door
    door: binary_sensor.back_door
    door_lock: lock.back_door_lock
global: active,blended
image_view: direct
image_top: 'name,status'
image_bottom: 'motion,library,play,snapshot,battery'
image_click: 'recordings'
library_sizes: '3,4,2'

<a name="further-documentation"></a>

Further Documentation

See hass-aarlo for general Aarlo documentation.