Home

Awesome

Github Flexi Card

GitHub Release GitHub All Releases Community Forum hacs_badge

Home Assistant card displaying data from Github integration

Overview

The aim of this card is to show all the data provided by github integration. You can specify what kind of data is shown and where. Entity rows are matching the size of other standard entity rows from other native cards (e.g. height of the row, icon/text margins, font sizes, etc).

This code works as both: card and enrity-row

Note: If you plan to use it only as entity row you can consider using the other simpler/smaller code written by benct: github-entity-row

image

Configuration

Note: Please do not change the original entity IDs otherwise card won't be able to find related entities.

Default configuration

Please see the following file: default-config.ts

Card

NameTypeDefaultSinceDescription
titlestringv0.1.0Card header/title text
entitieslist(Entity) | stringv0.1.0Collection of entities to display. You can provide simple list of entity_id strings.
sortlist(SortOptions)v1.0.0Sort options collection (order matters). Every next sorting option is used fot the next level sorting (if the values of the previous one are same)
autostring | false"_latest_release"v2.0.0Whether to add entities automatically based on the entity ID suffix. You can specify here a different suffix which should be used to find entities

+ Entity Properties - applied to all entities

Entity

NameTypeDefaultSinceDescription
entitystring(required)v0.1.0Entity ID e.g. sensor.my_github_project

+ Entity Properties

Entity Properties

NameTypeDefaultSinceDescription
nameKStringfriendly_namev0.1.0Name override
secondary_infoKStringv0.1.0String to display underneath the entity name
attributeslist(Attribute)v0.1.0Attributes to display
urlKString | boolv0.2.0Url to open on click/tap. (when true is used the target url becomes repo homepage)
attribute_urlsboolv0.2.0When set to true turns on default urls for all the displayed attributes
attribute_colorstringvar(--primary-color)v2.0.0Color applied to all attributes (icons or labels)
iconstring"mdi:github"v0.2.0Override for entity icon
icon_colorstringv2.0.0Icon color override
compact_viewbooltruev1.0.0When set to false big icons (and values) are displayed

Attribute

NameTypeDefaultSinceDescription
namestring(required)v0.1.0Name of the attribute
iconstringv0.1.0Icon override (there are default icons for most of the available attributes)
urlKString | boolv0.2.0Url to open on click/tap. (there are default urls for most of the available attributes, so you can just use true)
labelKStringv0.5.0Label/text which will be shown instead of the icon
colorstringvar(--primary-color)v2.0.0Icon / label color

Attribute names

When you enable Github Integration it creates couple entities for every repo. Each entity for single repo has a common prefix e.g. "sensor.maxwroc_github_flexi_card_". The last part of the entity name is (what I call here) repo attribute e.g. for "sensor.maxwroc_github_flexi_card_pull_requests" entity the attribute name is "pull_requests".

image

I suggest to enable "Diagnostic" entities for your repo(s) on the devices page.

It is possible to access entity attributes by adding an underscore with the name of the attribute. E.g. if you want to get the tag attribute from *_latest_release entity you can use latest_release_tag as the attribute name in the configuration.

image

Special repo attributes:

NameDescription
pathRepository path e.g. maxwroc/github-flexi-card
ownerFirst part of repository path e.g. maxwroc for the maxwroc/github-flexi-card repo
repoSecond part of repository path e.g. github-flexi-card for the maxwroc/github-flexi-card repo

Sort options

NameTypeDefaultSinceDescription
bystring(required)v1.0.0Name of the attribute
ascendingboolfalsev1.0.0Whether to sort ascending or descending

KeywordString

KeywordString is a string which can contain special keywords. Keywords are the repo attribute names surrounded by curly brackets. Keywords in the string will be replaced by attribute values.

E.g. "Card version {latest_release_tag}" becomes "Card version v1.5.0"

Converting keyword value

Keywords support simple functions to convert the values

FuncExampleDescription
replace([old_string],[new_string]){latest_release|replace(Git,Proj)}Simple replace. E.g. if name contains "Git" string then it will be replaced by "Proj"
conditional(){latest_release_tag|conditional()}If the value doesn't exist nothing is rendered (the default behaviour is to render the keyword)
round([number]){state|round(2)}Rounds the value to number of fractional digits. Not very useful for this card I think (the KString processing code was copied from the other card so I just left this func)

Configuration examples

Card

type: 'custom:github-flexi-card'
title: Github projects
entities:
  - entity: sensor.maxwroc_battery_state_card_latest_release
    secondary_info: 'Released {latest_release_tag}'
    url: "{latest_release_url}" # url taken from attribute
    attributes:
      - name: stars
        url: true # default url to /stargazers
      - name: issues
        url: "https://my.custom.url/path"
      - name: forks
      - name: pull_requests
        url: "{latest_pull_request_url}" # url taken from attribute
  - entity: sensor.hideseek_mod
    url: true # default url - repo homepage
    attributes:
      - views
      - stars
      - forks
  - entity: sensor.urleditorpro
    name: 'Url Editor Pro (v{latest_release_tag})'
    secondary_info: '{latest_pull_request}'
    attributes:
      - views
      - stars
      - issues

Entity

Note: different type has to be used custom:github-entity

image

type: entities
title: Displayed as entity
show_header_toggle: false
entities:
  - sensor.home_assistant_v2_db
  - type: 'custom:github-entity'
    entity: sensor.battery_state_card
    secondary_info: 'Released {latest_release_tag}'
    url: true
    attribute_urls: true
    attributes:
      - stars
      - issues
      - forks
      - pull_requests
      - watchers
  - sensor.hassio_online
  - sensor.last_boot
  - sensor.processor_use

Card-level entity properties

Card-level entity properties are useful when you want to have same settings for all of the entities.

image

type: 'custom:github-flexi-card'
title: Card-level entity properties
secondary_info: 'Released {latest_release_tag}'
url: true
attribute_urls: true
attributes:
  - views
  - stars
  - issues
  - watchers
  - forks
  - pull_requests
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.urleditorpro

Labels instead of icons

image

type: 'custom:github-flexi-card'
title: Labels instead of icons
url: true
attribute_urls: true
attributes:
  - name: views
    label: Views
  - name: stars
    label: Stars
  - name: issues
    label: Issues
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.urleditorpro

Compact view (disabling)

image

type: 'custom:github-flexi-card'
title: Big icons
url: true
attribute_urls: true
attributes:
  - watchers
  - stars
entities:
  - sensor.battery_state_card
  - entity: sensor.hideseek_mod
    compact_view: false
  - sensor.urleditorpro

Sorting

image

type: 'custom:github-flexi-card'
title: Sort by starts and forks (asc)
secondary_info: '{latest_release_tag}'
url: true
attribute_urls: true
attributes:
  - watchers
  - stars
  - issues
  - forks
sort:
  - by: stars
  - by: forks
    ascending: true
entities:
  - sensor.battery_state_card
  - sensor.hideseek_mod
  - sensor.github_flexi_card
  - sensor.urleditorpro
  - entity: sensor.home_assistant_config
    secondary_info: null

How to install?

Install via HACS. Look for the card in Frontend plugins collection.

If you have a YAML mode remember to add resource entry for the js bundle in ui-lovelace.yaml:

resources:
  - url: /hacsfiles/github-flexi-card/github-flexi-card.js
    type: module

Automation

If you want to receive notifications whenever something changes with the repo you can use my automation as an example: https://github.com/maxwroc/homeassistant/blob/master/configuration/packages/github.yaml

Development

Card created based on lovelace-card-boilerplate

npm install
npm run build

For new features create your branch based on vNext and for fixes based on master.

Do you like the card?

Don't "buy me a coffee", just star it on github! It will be enough to let me know that you like it and definitely will give me motivation boost to continue working on it and other cards.

My other HA related repos

battery-state-card | homeassistant-config | lovelace-card-boilerplate