Home

Awesome

Logbook card

hacs release downloads

<a href="https://www.buymeacoffee.com/royto" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/white_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>

2 customs Lovelace cards for displaying history of an entity or multiple entities for Home Assistant.

logbook card example

WARNING: Since 1.0.0, the resource type of the card is JavaScript Module and not JavaScript File anymore. In case of loading error, check if the resource type is JavaScript module.

Installation

HACS

This card is available in HACS (Home Assistant Community Store).

Manual

Download the logbook-card.js from the latest release and store it in your configuration/www folder. Configure Lovelace to load the card:

resources:
  - url: /local/logbook-card.js?v=1
    type: module

Using the card

Options

Logbook Card options

NameTypeRequiredSinceDeprecatedDefaultDescription
typestringrequiredv0.1custom:logbook-card
entitystringrequiredv0.1An entity_id.
titlestringoptionalv0.1friendly_name HistoryCard title
historyintegeroptionalv0.1v2.4.05Numbers of days of history of the logbook
hours_to_showintegeroptionalv2.4.0120Numbers of hours of history of the logbook
hidden_statestring[] or hidden config objectoptionalv1.6.0[]Hide logbook entry based on state and/or attribute. string value represent the state (wildcards are supported)
descbooloptionalv0.1Trueis logbook ordered descending
no_eventstringoptionalv0.1No event on the periodmessage displayed if no event to display
max_itemsintegeroptionalv0.2-1Number of items to display. Ignored if < 0
state_mapstate map objectoptionalv0.2[]List of entity states to convert
custom_log_mapcustom log map objectoptionalv2.1[]List of custom log to convert
showlistoptionalv0.2List of UI elements to display/hide, for available items see available show options.
attributesattributes objectoptionalv0.4[]List of attributes to display.
duration_labelsduration_labels objectoptionalv0.5v1.5.0labels for duration.
date_formatstring or relativeoptionalv1.0default date time formatsee fecha formatting token. Use relative to have relative time like 2 days ago
separator_styleseparator_style objectoptionalv1.0see style for separator (if activated)
collapsenumberoptionalv1.2Number of entities to show. Rest will be available in expandable section
custom_logsbooleanoptionalv1.13.0falsedisplay custom logs sent by logbook.log service
show_historybooleanoptionalv2.0trueDisplay entity logbook event
durationduration objectoptionalv1.5.0duration configuration
scrollbooleanoptionalv1.9.0trueset a max height for card and use scrollbar
tap_actionaction objectoptionalv1.7.0action: more-infoAction to take on tap
hold_actionaction objectoptionalv1.7.0noneAction to take on hold
double_tap_actionaction objectoptionalv1.7.0noneAction to take on double tap
minimal_durationnumber (in seconds)optionalv1.11.0Filter entry if duration is less than minimal_duration (entry will be squash if previous and next entry has same state)
group_by_daybooleanoptionalv2.0.0falseGroup entries by day using a day separator

Multiple entities Logbook Card options

the custom:multiple-logbook-card card has been introduce in v2.0.0.

NameTypeRequiredSinceDeprecatedDefaultDescription
typestringrequiredv2.0.0custom:multiple-logbook-card
entitiesentity config objectrequiredv2.0.0List of entities with its configuration.
titlestringoptionalv2.0.0Card title. Hidden if empty
historyintegeroptionalv2.0.0v2.4.05Numbers of days of history of the logbook
hours_to_showintegeroptionalv2.4.0120Numbers of hours of history of the logbook
descbooloptionalv2.0.0Trueis logbook ordered descending
no_eventstringoptionalv2.0.0No event on the periodmessage displayed if no event to display
max_itemsintegeroptionalv2.0.0-1Number of items to display. Ignored if < 0
showlistoptionalv2.0.0List of UI elements to display/hide, for available items see available show options.
duration_labelsduration_labels objectoptionalv2.0.0labels for duration.
date_formatstring or relativeoptionalv2.0.0default date time formatsee fecha formatting token. Use relative to have relative time like 2 days ago
separator_styleseparator_style objectoptionalv2.0.0see style for separator (if activated)
collapsenumberoptionalv2.0.0Number of entities to show. Rest will be available in expandable section
durationduration objectoptionalv2.0.0duration configuration
scrollbooleanoptionalv2.0.0trueset a max height for card and use scrollbar
tap_actionaction objectoptionalv2.0.0action: more-infoAction to take on tap
hold_actionaction objectoptionalv2.0.0noneAction to take on hold
double_tap_actionaction objectoptionalv2.0.0noneAction to take on double tap
minimal_durationnumber (in seconds)optionalv2.0.0Filter entry if duration is less than minimal_duration (entry will be squash if previous and next entry has same state)
group_by_daybooleanoptionalv2.0.0falseGroup entries by day using a day separator

Entity object

NameTypeRequiredSinceDeprecatedDefaultDescription
entitystringrequiredv2.0Name of the entity
labelstringoptionalv2.1Entity label
attributesattributes objectoptionalv2.0[]List of attributes to display.
hidden_statestring[] or hidden config objectoptionalv2.0[]Hide logbook entry based on state and/or attribute. string value represent the state (wildcards are supported)
custom_logsbooleanoptionalv2.0falseDisplay custom logs sent by logbook.log service. Set show_history to false if you only want custom logs displayed
show_historybooleanoptionalv2.0trueDisplay entity logbook event
state_mapstate map objectoptionalv2.0[]List of entity states to convert
custom_log_mapcustom log map objectoptionalv2.1[]List of custom log to convert

State map object

NameTypeDefaultDescriptionSince
value (required)stringValue to convert. wildcard is supported
labelstringsame as valueString to show as label.
iconstringdefault state iconIcon to show.
icon_colorstringicon color for this state.v1.6.0
attributesattribute state map object[]Attributes to match to be convertedv2.5.0

If you use wildcard, make sure to put the more specific states first.

Attribute state map object

NameTypeDefaultDescriptionSince
name (required)stringattribute name.v2.5.0
value (required)stringattribute value. wildcard is supportedv2.5.0

Custom log map object

NameTypeDefaultDescriptionSince
namestringname of the custom log. wildcard is supportedv2.1.0
messagestringmessage of the custom log. wildcard is supportedv2.1.0
iconstringdefault state iconicon to usev2.1.0
icon_colorstringicon color for this custom logv2.1.0
hiddenbooleanfalsehide custom logv2.3.0

If you use wildcard, make sure to put the more specific custom log first.

Available show options

All properties are optional.

NameDefaultOptionsDescription
statetruetrue / falseDisplay state
durationtruetrue / falseDisplay duration
start_datetruetrue / falseDisplay start date
end_datetruetrue / falseDisplay end date
icontruetrue / falseDisplay icon
separatorfalsetrue / falseDisplay separator
entity_nametruetrue / falseDisplay entity name (for multiple entities)

Attribute object

NameTypeDefaultDescription
value (required)stringname of the attributes.
labelstringsame as valueString to show as label.
typestringType of the value used for formatting. date or url are supported
link_labelstringLink label to use when type is url.

Duration object

NameTypeDefaultDescription
largestnumber1Number representing the maximum number of units to display for the duration. Use full for no limitation
labelsduration labels objectStyle of the separator.
unitsstring arrayArray of strings to define which units are used to display the duration (if needed). Allowed values: ['y', 'mo', 'w', 'd', 'h', 'm', 's', 'ms']
delimiterstringString to display between the previous unit and the next value.

Duration labels object

Until v1.4.1

This configuration is Deprecated since v.1.5.0.

Allows to have custom labels for duration. Must contains ${value} which will be replaced by the duration.

NameTypeDefaultDescription
secondstring${value}slabel for second.
secondsstring${value}slabel for seconds.
minutestring${value}mlabel for minute.
minutesstring${value}mlabel for minutes.
hourstring${value}hlabel for hour.
hoursstring${value}hlabel for hours.
daystring${value}dlabel for day.
daysstring${value}dlabel for days.
FROM v1.5.0

Allows to have custom labels for duration.

NameTypeDefaultDescription
secondstringslabel for second.
minutestringmlabel for minute.
hourstringhlabel for hour.
daystringdlabel for day.
weekstringwlabel for week.
monthstringmlabel for month.

Hidden config object

Introduce in 1.10.0

NameTypeDefaultDescription
statestringstate to hide.
attributeAttribute hidden config objectattribute to match

Attribute hidden config object

Introduce in 1.10.0

NameTypeDefaultDescription
name (required)stringthe name of the attribute
value (required)stringthe value of the attribute. wildcard is supported
hideIfMissingbooleanfalsehidden if attribute is not set.

Separator style object

NameTypeDefaultDescription
widthnumber1Width of the separator.
stylestringsolidStyle of the separator.
colorstringvar(--divider-color)Color of the separator.

Action Options

NameTypeRequirementDescriptionDefault
actionstringRequiredAction to perform (more-info, toggle, call-service, navigate url, none)more-info
navigation_pathstringOptionalPath to navigate to (e.g. /lovelace/0/) when action defined as navigatenone
urlstringOptionalURL to open on click when action is url. The URL will open in a new tabnone
servicestringOptionalService to call (e.g. media_player.media_play_pause) when action defined as call-servicenone
service_dataobjectOptionalService data to include (e.g. entity_id: media_player.bedroom) when action defined as call-servicenone
hapticstringOptionalHaptic feedback success, warning, failure, light, medium, heavy, selectionnone
repeatnumberOptionalHow often to repeat the hold_action in milliseconds.none

Custom Styling

The card style can be customize using lovelace card mod

After installation, you just have to add a card_mod properties with your custom styles

Here an example to make state in bold.

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    .state {
      font-weight: bold;
    }

card with custom style to put state in bold

Here an example to put custom log name above message and style them.

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    .custom-log .item-content {
      display: flex;
      flex-direction: column;
    }
    .custom-log .custom-log__separator {
        display: none;
    }
    .custom-log .item-content .custom-log__name {
        font-weight: bold;
    }
    .custom-log .item-content .custom-log__message {
       font-style: italic;
       text-indent: 0px;
    }

custom log style

Here is the list of style you can override:

ClassTarget
.itemcontainer for an entry
.historyif entry is entity history
.custom-logif entry is custom log
.item-contentcontainer for
.item-iconitem icon
.entityname of the entity when multiple
.custom-log__namecustom log name
.custom-log__separatorcustom log separator
.custom-log__messagecustom log message
.stateentity state
.durationduration
.datedate
.attributeattribute
.expandexpander when collapsed item
.separatorentry separator (needs !important)
.date-separatordate separator

Usage in panel mode

The card can be used in panel mode. Use this custom style to have the card in full page

type: custom:logbook-card
entity: light.living_room
card_mod:
  style: |
    ha-card .card-content-scroll {
      height: 100%;
      max-height: 100%;
    }

Example usage

Hidden states

type: 'custom:logbook-card'
desc: true
entity: sun.sun
hidden_state:
  - above_horizon
title: Day history

Multiple entities

type: 'custom:multiple-logbook-card'
desc: true
entities: 
  - entity: sun.sun
    hidden_state:
      - above_horizon
  - entity: sensor.moon_phase
title: Sun And Moon

logbook card with multiple entities

State label

entity: binary_sensor.garage_opening_sensor
max_items: 10
state_map:
  - label: Open
    value: on
  - label: Closed
    value: off
title: 'Garage door history'
type: 'custom:logbook-card'
show:
  end_date: false
  start_date: true

Custom labels

Attributes and custom date format

type: 'custom:logbook-card'
desc: true
entity: sun.sun
title: Day history
attributes:
  - value: elevation
  - value: next_rising
    label: Next Rising
    type: date
date_format: DD/MM/YYYY HH:mm

Attributes and custom date format

Duration labels

type: 'custom:logbook-card'
desc: true
entity: binary_sensor.garage_opening_sensor
title: 'Garage'
duration:
  labels:
    second: 's'
    minute: 'm'
    hour: 'h'
    day: 'j'
    week: 'w'
    month: 'm'

Custom separator style

type: 'custom:logbook-card'
desc: true
entity: binary_sensor.garage_opening_sensor
title: 'Garage Door History'
show:
  separator: true
separator_style:
  color: black
  style: dashed

Custom Separator

Custom icons

entity: sensor.vacuum
hidden_state:
  - ''
state_map:
  - icon: 'mdi:stove'
    value: Kitchen
  - icon: 'mdi:hotel'
    value: Girls bedroom
  - icon: 'mdi:bed-double'
    value: Bedroom
  - icon: 'mdi:water-pump'
    value: Bathroom
  - icon: 'mdi:television'
    value: Living room
title: Vacuum History
type: 'custom:logbook-card'

custom icon

Example with collapsed view

entity: sensor.vacuum
hidden_state:
  - ''
collapse: 5
title: Vacuum History
type: 'custom:logbook-card'

custom icon

Custom log

entity: sensor.logger
type: custom:logbook-card
group_by_day: true
scroll: true
show_history: false
date_format: relative
custom_logs: true
custom_log_map:
  - name: Name test
    icon: 'mdi:lightbulb-cfl'
    icon_color: '#a772e9'
  - name: from automation
    icon: 'mdi:lightbulb-cfl-spiral'
    icon_color: '#e9a772'

Custom log with custom icon

<!-- Badges -->