# Welcome!

Welcome to the community edition of example cards for Lovelace

## Contributing

If you want to contribute with examples:

* Click the `Edit on GitHub` to get to the repo on GitHub
* Fork that repo to your own user.
* Add your edits to your fork.
* If you add a new card, make sure to link it in [SUMMARY.md](https://github.com/sharetheloveio/sharethelove.io/blob/master/SUMMARY.md)
* Make a PR to [sharetheloveio/sharethelove.io](/)

The only rules for submitting a new card is that you have the package configuration included so that its easy for an beginner user to setup the card and that all resources are available either linked or added as files in the doc.

* No personal info should be included (that means scrub the example before posting).
* Make sure to outline what changes the user has to make in order for the card to work.
* Include a screenshot of your working card.
* You should **only** include graphics that you have the right to share.

*This site has no affiliation with* [*Home Assistant*](https://www.home-assistant.io/)*, this is a little project that was started by some of it's community members, if you have **any** issues with the content here do **not** seek help in **any** of Home Assistant's support channels, use our* [*issue tracker*](https://github.com/sharetheloveio/sharethelove.io/issues) *on GitHub.*


# 3D Floorplan Card

This simple card displays a 3D floorplan and overlays black boxes to create the effect of lights turning on and off in the selected rooms.

![](/files/-LJNZFZyknID2jCHDdBQ)

{% file src="/files/-LJO5Hx7O5tMAgxqLWQZ" %}
Floorplan
{% endfile %}

{% file src="/files/-LJO5Hx98rX82lP\_Ha3E" %}
Hallway overlay
{% endfile %}

{% file src="/files/-LJO5HxBGL\_IvOzpYpNn" %}
Kitchen overlay
{% endfile %}

{% file src="/files/-LJO5HxDqK-DK8GX6mR0" %}
Livingroom overlay
{% endfile %}

{% hint style="info" %}
Change the pictures and sensors to your own.
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
- type: picture-elements
  image: /local/Floorplan.png
  elements:

  - type: image
    tap_action: toggle
    entity: light.kitchen
    image: /local/Floorplan/kitchen.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 80%
      left: 27.25%
      width: 39.75%

  - type: image
    tap_action: toggle
    entity: light.hallway
    image: /local/Floorplan/hallway.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 73.7%
      left: 70.5%
      width: 43.75%

  - type: image
    tap_action: toggle
    entity: light.living_room
    image: /local/Floorplan/living_room.png
    state_filter:
      "off": opacity(50%)
      "on": opacity(1%)
    style:
      top: 36.25%
      left: 50%
      width: 85%
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
The 3D floorplan was made using the free website <http://www.sweethome3d.com>

The black boxes were cut out using the free software from <https://www.gimp.org>
{% endhint %}


# Fitbit Card

A great way to display your Fitbit stats.

![](/files/-LIqXImmOPqxARPAOwj3)

This card requires you to install and setup the following components:

{% hint style="info" %}
[Fitbit](https://www.home-assistant.io/components/sensor.fitbit/)
{% endhint %}

This card requires you to install and setup the following custom cards:

{% hint style="info" %}
[circle-sensor-card](https://github.com/custom-cards/circle-sensor-card)
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
  - type: picture-elements
    image: /local/lovelace/icons/fitbit.png
    elements:
    - type: custom:circle-sensor-card
      entity: sensor.weight_loss
      max: 65
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: loss
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      style:
        top: 5%
        left: 80%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_steps
      max: 10000
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: steps
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10000: '#0BDF0E'
      style:
        top: 70%
        left: 5%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.floors
      max: 10
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: floors
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10: '#0BDF0E'
      style:
        top: 70%
        left: 24%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.distance
      max: 10
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: miles
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        10: '#0BDF0E'
      style:
        top: 70%
        left: 43%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_calories
      max: 3000
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: cals
      shadow: true
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        3000: '#0BDF0E'
      style:
        top: 70%
        left: 62%
        width: 4em
        height: 4em
        transform: none
    - type: custom:circle-sensor-card
      entity: sensor.fitbit_minutes_active
      max: 30
      min: 0
      stroke_width: 15
      gradient: true
      fill: '#125054'
      name: active
      units: ' '
      font_style:
        font-size: 1.1em
        font-color: white
        text-shadow: '2px 2px black'
      color_stops:
        1: '#09C7E8'
        30: '#0BDF0E'
      style:
        top: 70%
        left: 80%
        width: 4em
        height: 4em
        transform: none
    - type: custom:hui-markdown-card
      content: >
        Ian
      style:
        top: 6%
        left: 1%
        font-size: 18px
        color: white
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
        "--paper-card-background-color": none
        "--paper-material-elevation-1_-_box-shadow": none
        "--shadow-elevation-2dp_-_box-shadow": none
        transform: translate(0%,-50%)
    - type: state-icon
      entity: sensor.weight
      title: Weight
      style:
        left: 3%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.weight
      title: Weight
      style:
        left: 12%
        top: 8%
        color: white
        transform: none
    - type: state-icon
      entity: sensor.bmi
      title: BMI
      style:
        left: 31%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.bmi
      title: BMI
      style:
        left: 40%
        top: 8%
        color: white
        transform: none
    - type: state-icon
      entity: sensor.body_fat
      title: Body Fat
      style:
        left: 59%
        top: 7%
        "--iron-icon-fill-color": '#09C7E8'
        transform: none
    - type: state-label
      entity: sensor.body_fat
      title: Body Fat
      style:
        left: 67%
        top: 8%
        color: white
        transform: none
    - type: image
      entity: sensor.ionic_battery
      title: Ionic Battery
      image: /local/lovelace/icons/battery_full.png
      state_image:
        "High": /local/lovelace/icons/battery_high.png
        "Medium": /local/lovelace/icons/battery_medium.png
        "Low": /local/lovelace/icons/battery_low.png
      style:
        left: 12%
        top: 1%
        transform: none
        width: 24px
        height: 24px
    - type: state-icon
      entity: sensor.resting_heart_rate
      title: Resting HR
      style:
        left: 3%
        top: 21%
        "--iron-icon-fill-color": red
        transform: none
    - type: state-label
      entity: sensor.resting_heart_rate
      title: Resting HR
      style:
        left: 12%
        top: 22%
        color: white
        transform: none
```

{% endtab %}
{% endtabs %}

I had to create template sensors for steps and calories as the Fitbit sensor produces comma separated string values instead of numeric values. I also created a template sensor to track my weight loss.

```yaml
sensor:
  - platform: template
    sensors:
      fitbit_steps:
        friendly_name: 'Steps'
        value_template: >
          {{ states.sensor.steps.state | replace(",","") }}
        unit_of_measurement: 'steps'
      fitbit_calories:
        friendly_name: 'Calories'
        value_template: >
          {{ states.sensor.calories.state | replace(",","") }}
        unit_of_measurement: 'calories'
      weight_loss:
        friendly_name: 'Weight Loss'
        value_template: "{{ '%.1f' | format(245.0 - (states.sensor.weight.state | float)) }}"
        unit_of_measurement: 'lbs'
```

{% hint style="info" %}
**Additional tips:**

* Be sure to change "Ian" in the markdown card to match the user's
* Change your starting weight in the template sensor
* Change your goal weight loss for the `max` value in the `circle-sensor-card` for `sensor.weight_loss` along with any other goal values for other things like steps/distance/calories
* `sensor.resting_heart_rate` and `sensor.ionic_battery` are dependent on the Fitbit device you use and may not be available to you.
  {% endhint %}


# Greeter Card

A simple greeter card that changes the welcome message based on time of day, it also uses weather from minutecast with animated icons.

![greeter-card](/files/-LJFV3webIL2stx7Q1_8)

This card requires you to install and setup the following components:

{% hint style="info" %}

* [Yahoo Weather](https://www.home-assistant.io/components/weather.yweather/)
* [Google Calendar](https://www.home-assistant.io/components/calendar.google/)
  {% endhint %}

```yaml
    - type: picture-elements
      image: /local/banners/vacation.jpg
      elements:
        - type: state-label
          entity: sensor.time
          style:
            top: 8%
            left: 10%
            color: rgb(249, 251, 255)
            text-shadow: 2px 2px DarkSlateGrey
            font-family: Trebuchet MS
            font-weight: bold
            pointer-events: none
            text-rendering: optimizeLegibility
            -moz-osx-font-smoothing: grayscale
            font-smoothing: antialiased
            -webkit-font-smoothing: antialiased

        - type: state-icon
          entity: sensor.outside_temp
          style:
            top: 7.5%
            left: 82%
            pointer-events: none
            max-width: 24px
            max-height: 24px
            color: rgb(249, 251, 255)
        - type: state-label
          entity: sensor.outside_temp
          style:
            top: 8%
            left: 90%
            font-weight: bold
            color: rgb(249, 251, 255)
            font-family: Trebuchet MS
            text-shadow: 2px 2px DarkSlateGrey
            text-rendering: optimizeLegibility
            -moz-osx-font-smoothing: grayscale
            font-smoothing: antialiased
            -webkit-font-smoothing: antialiased

        - type: state-label
          entity: sensor.time_of_day
          style:
            top: 40%
            left: 50%
            color: rgb(249, 251, 255)
            font-size: 250%
            pointer-events: none
            text-shadow: 2px 2px DarkSlateGrey
            font-family: Trebuchet MS
            font-style: oblique
            font-weight: 400
            text-rendering: optimizeLegibility
            -moz-osx-font-smoothing: grayscale
            font-smoothing: antialiased
            -webkit-font-smoothing: antialiased

        - type: state-label
          entity: sensor.outside_alerts
          style:
            top: 52%
            left: 50%
            color: rgb(249, 251, 255)
            font-family: Trebuchet MS
            font-style: oblique
            text-shadow: 2px 2px DarkSlateGrey
            font-size: 120%
            pointer-events: none
            font-weight: 400
            text-rendering: optimizeLegibility
            -moz-osx-font-smoothing: grayscale
            font-smoothing: antialiased
            -webkit-font-smoothing: antialiased

        - type: state-label
          entity: sensor.greeter_card_info
          style:
            top: 82%
            left: 0%
            color: rgb(255, 255, 255)
            transform: none
            font-family: Trebuchet MS
            text-shadow: 2px 2px black
            font-size: 90%
            pointer-events: none
            font-weight: bold
            border-left-style: solid
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
            border-color: rgb(34, 154, 210)
            background-color: rgb(54, 65, 78)
            opacity: 0.8
```

Here are the package with sensors

{% hint style="warning" %}
Please change the following states on the follwing sensors

* greeter\_card\_info &#x20;
* time\_of\_day &#x20;

```yaml
  states('yourawesome_device_tracker')
  as_timestamp(states.calendar.your_awesome_mail.attributes.start_time)
  states.calendar.your_awesome_mail.attributes.message
  change User to wanted name
```

{% endhint %}

```yaml
  - platform: time_date
    display_options:
      - 'time'

  - platform: template
    sensors:
      time_of_day:
        value_template: >
          {% set current_hour = strptime(states('sensor.time'), "%H:%M").hour %}
          {% if current_hour < 12 %}
            Good Morning, User
          {% elif 12 <= current_hour < 18 %}
            Good Afternoon, User
          {% elif 18 <= current_hour < 23 %}
            Good Evening, User
          {% else %}
            Good Night, User
          {% endif %}

  - platform: template
    sensors:
      greeter_card_info:
        value_template: >
          Current Location: {{ states('yourawesome_device_tracker') }}

          Next Event: {{ as_timestamp(states.calendar.your_awesome_mail.attributes.start_time) | timestamp_custom('%Y/%m/%d at %H:%M') }} - {{ states.calendar.your_awesome_mail.attributes.message }}

  - platform: command_line
    name: "Outside: Alerts"
    icon: alert-outline
    command: "/home/.homeassistant/homeassistant/includes/script/shell/check-weather.sh"
    scan_interval: 180 

  - platform: template
    sensors:
      outside_temp:
        friendly_name: "Outside Temperature"
        unit_of_measurement: '°C'
        value_template: "{{ states.weather.yweather.attributes.temperature }}"
        icon_template: >
          {% if is_state("weather.yweather", "sunny") -%}
             mdi:weather-sunny
          {% elif is_state('weather.yweather', 'clear-night') -%}
             mdi:weather-night
          {% elif is_state('weather.yweather', 'rain') -%}
             mdi:weather-rainy
          {% elif is_state('weather.yweather', 'snow') -%}
             mdi:weather-snowy
          {% elif is_state('weather.yweather', 'sleet') -%}
             mdi:weather-snowy-rainy
          {% elif is_state('weather.yweather', 'wind') -%}
             mdi:weather-windy-variant
          {% elif is_state('weather.yweather', 'fog') -%}
             mdi:weather-fog
          {% elif is_state('weather.yweather', 'cloudy') -%}
             mdi:weather-cloudy
          {% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
             mdi:weather-partlycloudy
          {% elif is_state('weather.yweather', 'hail') -%}
             mdi:weather-hail
          {% elif is_state('weather.yweather', 'thunderstorm') -%}
             mdi:weather-lightning
          {% else %}
             mdi:help-circle
          {% endif %}

        entity_picture_template: >
          {% if is_state("weather.yweather", "sunny") -%}
             /local/weather_icons/static/sunny.svg
          {% elif is_state('weather.yweather', 'clear-night') -%}
             /local/weather_icons/static/clear-night.svg
          {% elif is_state('weather.yweather', 'rain') -%}
             /local/weather_icons/static/rain.svg
          {% elif is_state('weather.yweather', 'snow') -%}
             /local/weather_icons/static/snow.svg
          {% elif is_state('weather.yweather', 'sleet') -%}
             /local/weather_icons/static/sleet.svg
          {% elif is_state('weather.yweather', 'wind') -%}
             /local/weather_icons/static/wind.svg
          {% elif is_state('weather.yweather', 'fog') -%}
             /local/weather_icons/static/fog.svg
          {% elif is_state('weather.yweather', 'cloudy') -%}
             /local/weather_icons/static/cloudy.svg
          {% elif is_state('weather.yweather', 'partly-cloudy-day') -%}
             /local/weather_icons/static/partly-cloudy-day.svg
          {% elif is_state('weather.yweather', 'hail') -%}
             /local/weather_icons/static/hail.svg
          {% elif is_state('weather.yweather', 'thunderstorm') -%}
             /local/weather_icons/static/thunderstorm.svg
          {% else %}
             /local/weather_icons/static/help.svg
          {% endif %}
```

Here is the bash script for Accuweather change the url to your city

```bash
#!/bin/bash
SET_AGENT="Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0"
SET_URL="https://www.accuweather.com/en/se/boras/315908/minute-weather-forecast/315908"

weather_alert () {

curl -A "$SET_AGENT" -s $SET_URL |\
         perl -wne 'print if /<div class="mc-summary/ .. /<\/div>/' |\
         perl -wne 'print if /<p>/ .. /<\/p>/' |\
         sed 's/<\/p>//' | sed 's/<p>//' | grep -oE "[A-Z].*"
}

weather_alert
```

{% hint style="info" %}
**Additional tips:**

This package can use more customize-able input like <https://philhawthorne.com/making-home-assistants-presence-detection-not-so-binary/> that will make the location status messages appear more dynamic. To animate the icons used for temperature use this icon pack <https://www.amcharts.com> and put it in your WWW directory in Homeassistant.
{% endhint %}


# Kodi Remote Card

A simple remote that will hold up under any resolution.

![kodi remote card](/files/-LJcnZU-giwmItoDQ5EJ)

```yaml
      - type: picture-elements
        image: /local/banners/empty_long_placeholder.png
        elements:
          - type: image
            image: /local/icons/animated/media-card/up-arrow.png
            tap_action: call-service
            service: shell_command.kodi_up
            style:
              top: 5em
              left: 10em
              width: 54px
              height: 54px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/home-button.png
            tap_action: call-service
            service: shell_command.kodi_home
            style:
              top: 5em
              left: 6em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/update-button.png
            tap_action: call-service
            service: shell_command.kodi_update
            style:
              top: 5em
              left: 14em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/poweroff-button.png
            tap_action: call-service
            service: shell_command.kodi_power
            style:
              top: 5em
              left: 19em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/left-arrow.png
            tap_action: call-service
            service: shell_command.kodi_left
            style:
              top: 9em
              left: 6em
              width: 54px
              height: 54px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/context-button.png
            tap_action: call-service
            service: shell_command.kodi_context
            style:
              top: 9em
              left: 10em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/right-arrow.png
            tap_action: call-service
            service: shell_command.kodi_right
            style:
              top: 9em
              left: 14em
              width: 54px
              height: 54px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/reboot-button.png
            tap_action: call-service
            service: shell_command.kodi_restart
            style:
              top: 9em
              left: 19em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/down-arrow.png
            tap_action: call-service
            service: shell_command.kodi_down
            style:
              top: 13em
              left: 10em
              width: 54px
              height: 54px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/clean-button.png
            tap_action: call-service
            service: shell_command.kodi_clean
            style:
              top: 13em
              left: 19em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/back-button.png
            tap_action: call-service
            service: shell_command.kodi_back
            style:
              top: 13em
              left: 6em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/enter-button.png
            tap_action: call-service
            service: shell_command.kodi_enter
            style:
              top: 13em
              left: 14em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/volumedown-button.png
            tap_action: call-service
            service: shell_command.kodi_volumedown
            style:
              top: 18em
              left: 6em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/mute-button.png
            tap_action: call-service
            service: shell_command.kodi_mute
            style:
              top: 18em
              left: 10em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(200, 200, 200, 0.5)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/volumeup-button.png
            tap_action: call-service
            service: shell_command.kodi_volumeup
            style:
              top: 18em
              left: 14em
              width: 24px
              height: 24px
              padding: 15px
              background-color: rgb(255, 255, 255, 0.8)
              filter: invert(0.20)
              border-radius: 4px
              z-index: 2
          - type: image
            image: /local/icons/animated/media-card/kodi-icon.png
            entity: media_player.kodi
            style:
              top: 18em
              left: 19em
              width: 56px
              height: 56px
              z-index: 2
```

And then some shell\_command to send commands to kodi

```yaml
kodi_bedroom_clean: "kodi_remote --clean"
kodi_bedroom_update: "kodi_remote --update"
kodi_bedroom_up: "kodi_remote --up"
kodi_bedroom_down: "kodi_remote --down"
kodi_bedroom_left: "kodi_remote --left"
kodi_bedroom_right: "kodi_remote --right"
kodi_bedroom_enter: "kodi_remote --select"
kodi_bedroom_home: "kodi_remote --home"
kodi_bedroom_power: "kodi_remote --poweroff"
kodi_bedroom_back: "kodi_remote --back"
kodi_bedroom_mute: "kodi_remote --mute"
kodi_bedroom_volumeup: "kodi_remote --volumeup"
kodi_bedroom_volumedown: "kodi_remote --volumedown"
kodi_bedroom_context: "kodi_remote --context"
```

and last but not least the little shell script that handles the calls obviously swap the ip address and port in the shell script for your ip and port

```bash
host=http://port:ip/jsonrpc
case $1 in
       --back ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.back", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
         --up ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Up", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
       --down ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Down", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
       --left ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Left", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
      --right ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Right", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
       --home ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Home", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
     --select ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.Select", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
     --update ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "VideoLibrary.Scan", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
      --clean ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "VideoLibrary.Clean", "id": "mybash"}' -H 'content-type: application/json;' $hostc ;;
   --poweroff ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "System.Shutdown", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
    --restart ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "System.OnRestart", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
    --context ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Input.ContextMenu", "id": "mybash"}' -H 'content-type: application/json;' $host ;;
       --mute ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Application.SetMute", "params": {"mute":"toggle"}, "id": "mybash"}' -H 'content-type: application/json;' $host ;;
   --volumeup ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Application.SetVolume", "params": { "volume": "increment" }, "id": 1 }' -H 'content-type: application/json;' $host ;;
 --volumedown ) curl -sS --data-binary '{ "jsonrpc": "2.0", "method": "Application.SetVolume", "params": { "volume": "decrement" }, "id": 1 }' -H 'content-type: application/json;' $host ;;
esac
```

here is the [iconpack](https://github.com/sharetheloveio/sharethelove.io/tree/9c55f4ee4781b8799d7f3d545ea8f3c779af1365/.gitbook/assets/media-card-iconpack.zip) for this card


# Mi Flora Plant Card

A nice card to display your plants moisture and combined temperature.

![](/files/-LIbBTMQ-vHTU08dBQPr)

{% hint style="info" %}
The color of the badges will depend on your [theme](https://www.home-assistant.io/lovelace/views/#themes).
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
        - type: picture-elements
          image: /local/plants.jpg
          elements:
            - type: state-badge
              entity: sensor.small_chili_moisture
              style:
                top: 27%
                left: 10%
                --ha-label-badge-font-size: 1em
            - type: state-badge
              entity: sensor.big_chili_moisture
              style:
                top: 27%
                left: 25%
                --ha-label-badge-font-size: 1em
            - type: state-badge
              entity: sensor.herbs_moisture
              style:
                top: 27%
                left: 40%
                --ha-label-badge-font-size: 1em
            - type: state-label
              entity: sensor.greenhouse_temperature
              style:
                top: 15%
                left: 92%
                --ha-label-badge-font-size: 1em
```

{% endtab %}
{% endtabs %}

Here is the config for a combined temperature sensor

{% hint style="info" %}
This requires you to have the following component setup

* [Mi Flora](https://www.home-assistant.io/components/sensor.miflora/)

or some other kind of plant sensors with moisture and temperature.

Change the entity ids to those of your temperature sensors.
{% endhint %}

```yaml
sensor:
  - platform: min_max
    name: Greenhouse temperature
    type: mean
    entity_ids:
      - sensor.small_chili_temperature
      - sensor.big_chili_temperature
      - sensor.herbs_temperature
```

{% file src="/files/-LIbBTMUUDqVEBur8m0I" %}
The plants background image
{% endfile %}


# Neato Vaccum Card

Here is a simple yet cool way to display your cleaning map as a card in homeassistant.

{% hint style="info" %}
This requires you to have the following component setup

* [Neato Botvac](https://www.home-assistant.io/components/neato/)
  {% endhint %}

![](/files/-LJDCe1ZmlO_-q_0JtFv)

```yaml
- type: picture-elements
  image: /local/banners/empty.png
  elements:
  - type: state-icon
    tap_action: toggle
    entity: vacuum.neato
    style:
      top: 5%
      left: 95%
      "--paper-item-icon-color": rgb(115, 122, 130)
      z-index: 1

  - type: state-icon
    tap_action: toggle
    entity: switch.neato_schedule
    style:
      top: 15%
      left: 95%
      "--paper-item-icon-color": rgb(115, 122, 130)
      z-index: 1

  - type: state-label
    entity: sensor.neato_battery
    style:
      top: 70%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: DeepSkyBlue
      background-color: rgb(54, 65, 78)
      z-index: 1

  - type: image
    entity: camera.neato_cleaning_map
    camera_image: camera.neato_cleaning_map
    tap_action: none
    style:
      transform: none
      top: 0%
      left: 0%
      width: 100%
      height: 100%
      z-index: 0

  - type: state-label
    entity: sensor.neato_status
    style:
      top: 80%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: Tomato
      background-color: rgb(54, 65, 78)
      z-index: 1

  - type: state-label
    entity: sensor.neato_area
    style:
      top: 90%
      left: 0%
      color: rgb(115, 122, 130)
      transform: none
      pointer-events: none
      text-shadow: 1px 1px black
      font-family: Trebuchet MS
      font-size: 90%
      font-weight: bold
      border-left-style: solid
      border-color: GreenYellow
      background-color: rgb(54, 65, 78)
      z-index: 1
```

Here is the package for the sensors

{% hint style="warning" %}
Change neato on the states for your robots name in the template sensors
{% endhint %}

```yaml
  - platform: template
    sensors:
      neato_area:
        friendly_name: "Neato: Area cleaned on last run"
        value_template: "Area Cleaned: {{ states.vacuum.neato.attributes.clean_area | round(1) }}"
        unit_of_measurement: 'm²'

  - platform: template
    sensors:
      neato_status:
        friendly_name: "Neato: Status"
        value_template: "Status: {{ states.vacuum.neato.attributes.status }}"

  - platform: template
    sensors:
      neato_battery:
        friendly_name: "Battery: neato"
        value_template: "{{ states.vacuum.neato.attributes.battery_level }}"
        unit_of_measurement: '%'
```

and here is the empty placeholder image

{% file src="/files/-LJ9x6etAcZ7j02b9BYf" %}
Placeholder image
{% endfile %}


# Temperature glance

A picture elements card that is faking the look of a picture glance, but with visible temperatures.

![](/files/-LI_wHg7_YTuDk1Xs0GQ)

{% hint style="info" %}
Remember to change the sensor entities for your own.

To get the grey transparent area known from the picture glance on my background, I first created it as a picture glance and took a screenshot that I can use for my "glance".
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
title: Home Assistant
views:
  - type: picture-elements
    image: /local/house-element.jpg
    elements:
    - type: state-icon
        entity: alarm_control_panel.home_alarm
        style:
        top: 87%
        left: 5%
        color: white
    - type: state-icon
        entity: sensor.front_door_combined
        style:
        top: 86%
        left: 14%
        color: white
    - type: state-icon
        entity: sensor.mailbox
        style:
        top: 86%
        left: 23%
        color: white
    - type: state-icon
        entity: sensor.trash_bin
        style:
        top: 86%
        left: 32%
        color: white

    ## temp
    - type: icon
        icon: mdi:hotel
        entity: sensor.temperature_bedroom
        tap_action: more-info
        style:
        top: 82%
        left: 50%              
        color: white
    - type: state-label
        entity: sensor.temperature_bedroom
        style:
        top: 95%
        left: 50%
        color: white

    - type: icon
        icon: mdi:human-male
        entity: sensor.temperature_stefan
        tap_action: more-info
        style:
        top: 82%
        left: 64% 
        color: white
    - type: state-label
        entity: sensor.temperature_stefan
        style:
        top: 95%
        left: 64%
        color: white

    - type: icon
        icon: mdi:stairs
        entity: sensor.temperature_passage
        tap_action: more-info
        style:
        top: 82%
        left: 78% 
        color: white
    - type: state-label
        entity: sensor.temperature_passage
        style:
        top: 95%
        left: 78%
        color: white

    - type: icon
        icon: mdi:washing-machine
        entity: sensor.temperature_downstairs_bathroom
        tap_action: more-info
        style:
        top: 82%
        left: 92% 
        color: white
    - type: state-label
        entity: sensor.temperature_downstairs_bathroom
        style:
        top: 95%
        left: 92%
        color: white
```

{% endtab %}
{% endtabs %}


# Untappd Card

An awesome card for untappd that brings your stats into homeassistant.

![untappd-card](/files/-LJYx4ImfvoDuctGu3kv)

This card requires you to install and setup the following components:

{% hint style="info" %}

* [Untapped](https://github.com/custom-components/sensor.untapped)
  {% endhint %}

```yaml
    - type: picture-elements
      image: /local/cards/untappd.png
      elements:
      - type: state-icon
        entity: sensor.untappd_last_checkin
        style:
          top: 18px
          left: 8px
          transform: none
      - type: state-label
        entity: sensor.untappd_beer
        style:
          top: 8%
          left: 52px
          transform: none
          color: rgb(255, 255, 255)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-left-style: solid
          border-color: Yellow
          background-color: rgb(4, 4, 4, 0.6)
          pointer-events: none
          width: 263px
          padding: 5px
          border-top-right-radius: 5px
      - type: state-icon
        entity: sensor.untappd_last_badge
        style:
          top: 64px
          left: 8px
          transform: none
      - type: state-label
        entity: sensor.untappd_badge
        style:
          top: 63px
          left: 52px
          transform: none
          color: rgb(255, 255, 255)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-left-style: solid
          border-color: Orange
          background-color: rgb(4, 4, 4, 0.6)
          pointer-events: none
          width: 263px
          padding: 5px
          border-bottom-right-radius: 5px

      - type: state-icon
        entity: sensor.untappd_checked
        style:
          bottom: 0px
          left: 8px
          transform: none
          z-index: 2
      - type: state-label
        entity: sensor.untappd_checked
        style:
          bottom: 0px
          left: 0px
          transform: none
          color: rgb(255, 255, 255)
          -webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
          text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-bottom-style: solid
          border-color: LightSalmon
          padding-left: 36px
          padding-bottom: 8px
          text-shadow: 2px 2px 2px black

      - type: state-icon
        entity: sensor.untappd_followings
        style:
          bottom: 0px
          left: 78px
          transform: none
          z-index: 2
      - type: state-label
        entity: sensor.untappd_followings
        style:
          bottom: 0px
          left: 74px
          transform: none
          color: rgb(255, 255, 255)
          -webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
          text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-bottom-style: solid
          border-color: OrangeRed
          padding-left: 36px
          padding-bottom: 8px
          text-shadow: 2px 2px 2px black

      - type: state-icon
        entity: sensor.untappd_total_badges
        style:
          bottom: 0px
          left: 148px
          transform: none
          z-index: 2
      - type: state-label
        entity: sensor.untappd_total_badges
        style:
          bottom: 0px
          left: 141px
          transform: none
          color: rgb(255, 255, 255)
          -webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
          text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-bottom-style: solid
          border-color: FireBrick
          padding-left: 36px
          padding-bottom: 8px
          text-shadow: 2px 2px 2px black

      - type: state-icon
        entity: sensor.untappd_total_beers
        style:
          bottom: 0px
          left: 228px
          transform: none
          z-index: 2
      - type: state-label
        entity: sensor.untappd_total_beers
        style:
          bottom: 0px
          left: 215px
          transform: none
          color: rgb(255, 255, 255)
          -webkit-text-stroke: 0.2px rgb(0, 0, 0, 0.6)
          text-shadow: 0.1px 0.1px rgb(0, 0, 0, 0.6)
          font-family: Trebuchet MS
          font-size: 90%
          font-weight: bold
          border-bottom-style: solid
          border-color: Maroon    
          padding-left: 36px
          padding-bottom: 8px
          text-shadow: 2px 2px 2px black
```

And then some templating to get it too look the way it is on the picture, so here are the sensors

```yaml
  - platform: template
    sensors:
      untappd_badge:
       value_template: "Recent Badge: {{ states.sensor.untappd_last_badge.attributes.badge }} (Level {{ states.sensor.untappd_last_badge.attributes.level }})"

  - platform: template
    sensors:
      untappd_beer:
       value_template: "Recent Beer: {{ states.sensor.untappd_last_checkin.attributes.beer }} ({{ states.sensor.untappd_last_checkin.attributes.abv }})"

  - platform: template
    sensors:
      untappd_followings:
       unit_of_measurement: followers
       value_template: "{{ states.sensor.untappd_last_checkin.attributes.followings }}"

  - platform: template
    sensors:
      untappd_checked:
       unit_of_measurement: checkins
       value_template: "{{ states.sensor.untappd_last_checkin.attributes.checkins }}"

  - platform: template
    sensors:
      untappd_total_beers:
       unit_of_measurement: beers
       value_template: "{{ states.sensor.untappd_last_checkin.attributes.total_beers }}"

  - platform: template
    sensors:
      untappd_total_badges:
       unit_of_measurement: badges
       value_template: "{{ states.sensor.untappd_last_checkin.attributes.total_badges }}"
```

The icons are from [loading.io](https://loading.io/) and the background image isn't available for reuse so make your own.


# Xiaomi Vacuum Card

A card that allows you to view your Xiaomi Vacuum in Card form.

![](/files/-LIbBumjCwvbhITkZd2F)

{% hint style="warning" %}
This card uses these components that you also need to install:

* [Xiaomi Mi Vacuum platform](https://www.home-assistant.io/components/vacuum.xiaomi_miio/)
  {% endhint %}

{% file src="/files/-LIbBumlKQ7IbAw0N7RX" %}
Background for this card
{% endfile %}

```yaml
  - type: picture-elements
    image: /local/vacuum_card.jpg
    elements:
    - type: icon
      icon: mdi:bell-ring
      tap_action:
        action: call-service
        service: vacuum.locate
        service_data:
          entity_id: vacuum.xiaomi_vacuum_cleaner
      style:
        top: 80%
        left: 80%
        "--paper-item-icon-color": rgb(115, 122, 130)

    - type: icon
      icon: mdi:home
      tap_action:
        action: call-service
        service: vacuum.return_to_base
        service_data:
          entity_id: vacuum.xiaomi_vacuum_cleaner
      style:
        top: 80%
        left: 65%
        "--paper-item-icon-color": rgb(115, 122, 130)

    - type: icon
      icon: mdi:play
      tap_action:
        action: call-service
        service: vacuum.start
        service_data:
          entity_id: vacuum.xiaomi_vacuum_cleaner
      style:
        top: 80%
        left: 50%
        "--paper-item-icon-color": rgb(115, 122, 130)

    - type: icon
      icon: mdi:pause
      tap_action:
        action: call-service
        service: vacuum.pause
        service_data:
          entity_id: vacuum.xiaomi_vacuum_cleaner
      style:
        top: 80%
        left: 35%
        "--paper-item-icon-color": rgb(115, 122, 130)

    - type: icon
      icon: mdi:stop
      tap_action:
        action: call-service
        service: vacuum.stop
        service_data:
          entity_id: vacuum.xiaomi_vacuum_cleaner
      style:
        top: 80%
        left: 20%
        "--paper-item-icon-color": rgb(155, 122, 130)

    - type: state-label
      entity: sensor.vacuum_status
      style:
        top: 10%
        left: 5%
        color: rgb(255, 255, 255)
        transform: translate(0%,-50%)
        pointer-events: none
        text-shadow: 1px 1px black
        font-family: Trebuchet MS
        font-size: 90%
        font-weight: bold
        border-left-style: solid
        border-color: rgb(34, 154, 210)
        background-color: rgb(54, 65, 78)
        opacity: 0.8

    - type: state-label
      entity: sensor.vacuum_battery
      style:
        top: 10%
        right: 5%
        color: rgb(255, 255, 255)
        transform: translate(0%,-50%)
        pointer-events: none
        text-shadow: 1px 1px black
        font-family: Trebuchet MS
        font-size: 90%
        font-weight: bold
        border-right-style: solid
        border-color: rgb(34, 154, 210)
        background-color: rgb(54, 65, 78)
        opacity: 0.8
```

Here is the package for the sensors

{% hint style="warning" %}
Change 'xiaomi\_vacuum\_cleaner' on the states for your robots name in the template sensors
{% endhint %}

```yaml
  - platform: template
    sensors:
      vacuum_status:
        friendly_name: "Vacuum - Status"
        value_template: "Status: {{ states.vacuum.xiaomi_vacuum_cleaner.attributes.status }}"


  - platform: template
    sensors:
      vacuum_battery:
        friendly_name: "Vacuum - Battery"
        value_template: "Battery: {{ states.vacuum.xiaomi_vacuum_cleaner.attributes.battery_level }}"
        device_class: battery
        unit_of_measurement: '%'
```


# AV Remote Card

This card utilizes the built-in glance lovelace card to create a remote that fires commands from your harmony hub.

![](/files/-LPKp9GLySs8Mzse5jiD)

This card requires you to install and setup the following components:

{% hint style="info" %}

* [Logitech Harmony](https://www.home-assistant.io/components/remote.harmony/)
  {% endhint %}

Once harmony is set up, open \[HUB\_NAME].conf (located at the root of your config folder). Here you will find a listing of all the devices and the commands they can issue. Each device starts with something like: `53209424 - LG TV`. The number on the left is the device code for that device. You will utilize `tap_action` to send the command. A service block looks like this:

```yaml
    service_data:
      "entity_id": "remote.joehubz"
      "device": "53209424"
      "command": "Mute"
```

Swap your device code and command name to customize for your AV setup.

Finally, switch out the entity for some dormant binary sensor in your system. In the example below, I used my front\_door sensor.

{% hint style="info" %}
Change the icons and device codes to your own.
{% endhint %}

{% hint style="info" %}
If you are still able to "Configure UI" you can drop the code into a new card. If you have taken full manual control, you can !include the remote file. (shown below)
{% endhint %}

{% tabs %}
{% tab title="ui-lovelace.yaml" %}

```yaml
# if you have taken manual control
      - type: glance
        cards: !include remotes/lg.yaml
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="remotes/lg.yaml" %}

```yaml
type: glance
title: LG Remote
show_state: false
entities:

  # power row
  - entity: binary_sensor.front_door
    icon: mdi:power
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.toggle
      service_data:
        entity_id: media_player.lg_tv
  - entity: binary_sensor.front_door
    icon: mdi:web
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.lg_tv
      source: "Web Browser"
  - entity: binary_sensor.front_door
    icon: mdi:netflix
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.lg_tv
        source: "Netflix"
  - entity: binary_sensor.front_door
    icon: mdi:television-box
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.lg_tv
        source: "Tivo"
  - entity: binary_sensor.front_door
    icon: mdi:playstation
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.select_source
      service_data:
        entity_id: media_player.lg_tv
        source: "Onkyo"


  # top row
  - entity: binary_sensor.front_door
    icon: mdi:volume-off
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "Mute"
  - entity: binary_sensor.front_door
    icon: mdi:home
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "59364597"
        "command": "Home"
  - entity: binary_sensor.front_door
    icon: mdi:chevron-up-box-outline
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "DirectionUp"
  - entity: binary_sensor.front_door
    icon: mdi:play-pause
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "Pause"
  - entity: binary_sensor.front_door
    icon: mdi:stop
    name: ' '
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "59364597"
        "command": "Stop"


    # middle row
  - entity: binary_sensor.front_door
    icon: mdi:volume-plus
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.volume_up
      service_data:
        entity_id: media_player.lg_tv
  - entity: binary_sensor.front_door
    icon: mdi:chevron-left-box-outline
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "DirectionLeft"
  - entity: binary_sensor.front_door
    icon: mdi:checkbox-blank-circle-outline
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "OK"
  - entity: binary_sensor.front_door
    icon: mdi:chevron-right-box-outline
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "DirectionRight"
  - entity: binary_sensor.front_door
    icon: mdi:rewind
    name: ' '
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        entity_id: remote.joehubz
        device: '59364597'
        command: Rewind


  # bottom row
  - entity: binary_sensor.front_door
    icon: mdi:volume-minus
    name: ' ' 
    tap_action:
      action: call-service
      service: media_player.volume_down
      service_data:
        entity_id: media_player.lg_tv
  - entity: binary_sensor.front_door
    icon: mdi:undo
    name: ' '
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        entity_id: "remote.joehubz"
        device: "59364597"
        command: "Back"
  - entity: binary_sensor.front_door
    icon: mdi:chevron-down-box-outline
    name: ' ' 
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "53209424"
        "command": "DirectionDown"
  - entity: binary_sensor.front_door
    icon: mdi:redo
    name: ' '
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "59364597"
        "command": "SkipForward"
  - entity: binary_sensor.front_door
    icon: mdi:fast-forward
    name: ' '
    tap_action:
      action: call-service
      service: remote.send_command
      service_data:
        "entity_id": "remote.joehubz"
        "device": "59364597"
        "command": "FastForward"
```

{% endtab %}
{% endtabs %}


# Cards

Lovelace cards

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [list-card](https://github.com/custom-cards/list-card) by [@iantrich](https://github.com/iantrich) 📰 Display sensor list data in a table
* [flex-table-card](https://github.com/custom-cards/flex-table-card) by [@daringer](https://github.com/custom-cards/flex-table-card) Highly Flexible Card - arbitrary contents/columns/rows, regex matched
* [upcoming-media-card](https://github.com/custom-cards/upcoming-media-card) by [@maykar](https://github.com/maykar) A card to display upcoming episodes and movies in Home Assistant
* [vertical-stack-in-card](https://github.com/custom-cards/vertical-stack-in-card) by [@ofekashery](https://github.com/ofekashery) 📐 Similar to vertical-stack but removes card borders
* [canvas-gauge-card](https://github.com/custom-cards/canvas-gauge-card) by [@helto4real](https://github.com/helto4real) The card makes it possible to use gauges from <https://canvas-gauges.com/>
* [rmv-card](https://github.com/custom-cards/rmv-card) by [@cgtobi](https://github.com/cgtobi) Custom card for the RMV component
* [surveillance-card](https://github.com/custom-cards/surveillance-card) by [@jeradM](https://github.com/jeradM) A custom card for displaying camera feeds in the style of a surveillance system
* [aftership-card](https://github.com/custom-cards/aftership-card) by [@ludeeus](https://github.com/ludeeus) Companion card for sensor.aftership
* [circle-sensor-card](https://github.com/custom-cards/circle-sensor-card) by [@jeradM](https://github.com/jeradM) A custom component for displaying sensor values as cards or elements
* [beer-card](https://github.com/custom-cards/beer-card) by [@ciotlosm](https://github.com/ciotlosm)
* [bignumber-card](https://github.com/custom-cards/bignumber-card) by [@ciotlosm](https://github.com/ciotlosm)
* [entity-attributes-card](https://github.com/custom-cards/entity-attributes-card) by [@ciotlosm](https://github.com/ciotlosm)
* [monster-card](https://github.com/custom-cards/monster-card) by [@ciotlosm](https://github.com/ciotlosm)
* [button-card](https://github.com/kuuji/button-card) by [@kuuji](https://github.com/kuuji) Button card
* [mini-graph-card](https://github.com/kalkih/mini-graph-card) by [@kalkih](https://github.com/kalkih) Minimalistic graph card
* [mini-media-card](https://github.com/kalkih/mini-media-player) by [@kalkih](https://github.com/kalkih) Minimalistic media player card
* [forked-daapd-card](https://github.com/kalkih/forked-daapd-card) by [@kalkih](https://github.com/kalkih) A card to control a forked daapd instance
* [swipe-card](https://github.com/bramkragten/custom-ui/tree/master/swipe-card) by [@bramkragten](https://github.com/bramkragten)
* [weather-card](https://github.com/bramkragten/custom-ui/tree/master/weather-card) by [@bramkragten](https://github.com/bramkragten)
* [day-countdown](https://github.com/bundito/day-countdown) by [@bundito](https://github.com/bundito) Custom entity row
* [secondaryinfo-entity-row](https://github.com/MizterB/lovelace-secondaryinfo-entity-row) by [@MizterB](https://github.com/MizterB)
* [calendar-card](https://github.com/ljmerza/calendar-card) by [@ljmerza](https://github.com/ljmerza) Google Calendar Card
* [bar-card](https://github.com/Gluwc/bar-card) by [@Gluwc](https://github.com/Gluwc) Customizable Animated Bar card
* [dual-gauge-card](https://github.com/Rocka84/dual-gauge-card) by [@Rocka84](https://github.com/Rocka84) Dual gauge custom card for Lovelace in Home Assistant
* [tiles-card](https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card) by [@rodrigofragadf](https://github.com/rodrigofragadf)
* [pc-card](https://github.com/custom-cards/pc-card) by [@iantrich](https://github.com/iantrich) 💵 Personal Capital Lovelace Card
* [power-wheel-card](https://github.com/gurbyz/power-wheel-card) by [@gurbyz](https://github.com/gurbyz)
* [roku-card](https://github.com/custom-cards/roku-card) by [@iantrich](https://github.com/iantrich) 📺 Roku Remote Card
* [dual-thermostat](https://github.com/enriqg9/dual-thermostat) by [@enriqg9](https://github.com/enriqg9) Dual Thermostat Lovelace Card
* [check-button-card](https://github.com/Gluwc/check-button-card) by [@Gluwc](https://github.com/Gluwc) A button that tracks when it is last pressed using MQTT auto discovery
* [simple-thermostat](https://github.com/nervetattoo/simple-thermostat) by [@nervetattoo](https://github.com/nervetattoo) A different take on the thermostat card
* [light-entity-card](https://github.com/ljmerza/light-entity-card) by [@ljmerza](https://github.com/ljmerza) Control any light entity
* [github-card](https://github.com/ljmerza/github-card) by [@ljmerza](https://github.com/ljmerza)
* [spotify-card](https://github.com/custom-cards/spotify-card) by [@fondberg](https://github.com/fondberg) Spotify Lovelace Card
* [podcast-card](https://github.com/custom-cards/podcast-card) by [@iantrich](https://github.com/iantrich) 🎧 Podcast Card
* [xiaomi-vacuum-map-card](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-Xiaomi-Vacuum-Map-card) by [@PiotrMachowski](https://github.com/PiotrMachowski) Xiaomi Vacuum Map Lovelace card
* [html-card](https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-card) by [@PiotrMachowski](https://github.com/PiotrMachowski) HTML Lovelace card
* [rgb-light-card](https://github.com/bokub/rgb-light-card) by [@bokub](https://github.com/bokub) 💡 A minimalist card for RGB lights


# Rows

Lovelace rows

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [button-entity-row](https://github.com/custom-cards/button-entity-row) by [@paulbdavis](https://github.com/paulbdavis)
* [light-entity-row](https://github.com/custom-cards/light-entity-row) by [@paulbdavis](https://github.com/paulbdavis)
* [fold-entity-row](https://github.com/thomasloven/lovelace-fold-entity-row) by [@thomasloven](https://github.com/thomasloven)
* [slider-entity-row](https://github.com/thomasloven/lovelace-slider-entity-row) by [@thomasloven](https://github.com/thomasloven)
* [toggle-lock-entity-row](https://github.com/thomasloven/lovelace-toggle-lock-entity-row) by [@thomasloven](https://github.com/thomasloven)
* [text-divider-row](https://github.com/custom-cards/text-divider-row) by [@iantrich](https://github.com/iantrich) 🗂 Lovelace text divider row


# Elements

Lovelace elements

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [state-attribute-elements](https://github.com/custom-cards/state-attribute-element) by [@ludeeus](https://github.com/ludeeus)
* [username-element](https://github.com/custom-cards/username-element) by [@ludeeus](https://github.com/ludeeus)
* [state-element](https://github.com/custom-cards/state-element) by [@ludeeus](https://github.com/ludeeus)
* [text-element](https://github.com/custom-cards/text-element) by [@ludeeus](https://github.com/ludeeus)
* [radial-menu](https://github.com/custom-cards/radial-menu) by [@iantrich](https://github.com/iantrich) Radial Menu Element for Lovelace


# Special

Lovelace special

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [browser\_mod](https://github.com/thomasloven/hass-browser_mod) by [@thomasloven](https://github.com/thomasloven)
* [layout-card](https://github.com/thomasloven/lovelace-layout-card) by [@thomasloven](https://github.com/thomasloven)
* [state-switch](https://github.com/thomasloven/lovelace-state-switch) by [@thomasloven](https://github.com/thomasloven)
* [kiosk](https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931) by [@ciotlosm](https://github.com/ciotlosm)
* [lovelace-auto-entities](https://github.com/thomasloven/lovelace-auto-entities) by [@thomasloven](https://github.com/thomasloven) automatically populate the entities: list of a card or entity-row with entities matching a filter
* [config-template-card](https://github.com/custom-cards/config-template-card) by [@iantrich](https://github.com/iantrich) 📝 Templatable Lovelace Configurations


# Styling

Lovelace styling

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [custom-header](https://github.com/maykar/custom-header) by [@maykar](https://github.com/maykar)
* [hass-fontawesome](https://github.com/thomasloven/hass-fontawesome) by [@thomasloven](https://github.com/thomasloven)
* [card-mod](https://github.com/thomasloven/lovelace-card-mod) by [@thomasloven](https://github.com/thomasloven)


# Jinja Magic Scripts

Jinja2 script to help you create/migrate the existing config/setup to lovelace automagically.

{% hint style="info" %}
The following is a jinja2 script that you need to run in the Developer Tools -> Templates (template editor), then copy and paste the output into your `ui-lovelace.yaml` file. Copying the following jinja code/script directly into the `ui-lovelace.yaml` file will give you severe headaches and possibly long-term Migraines.
{% endhint %}

## Code to auto-generate Lovelace Script

Use the following script to automagically generate the lovelace cards based on what you already have. Go to your Home Assistant, click on the hamburger icon on the top left, under `Developer Tools`, click on `Templates`, and then replace what's out there with the following code. You should see the output right next to it. Copy that output, and paste it in the `ui-lovelace.yaml` file in your config folder and go to https\://<>:8123/lovelace url and hit refresh.

```yaml
{# @Author: Mahasri Kalavala (a.k.a @skalavala #}

{%- macro plural(name) -%}
  {%- if name[(name|length|int -1):] == "y" -%}
  {{- name[:-1] -}}ies
{%- else -%}
  {{- name -}}s
{%- endif -%}
{%- endmacro -%}

title: My Lovely Home Automation
views:
  - title: Home
    cards:
{%- set domains = states | map(attribute='domain') |list | unique | list %}
{%- for item in states['camera'] %}
      - id: {{ item.entity_id.replace('.', '_') }}
        type: picture-entity      
        title: {{ item.name }}
        entity: {{ item.entity_id }}
        camera_image: {{ item.entity_id }}
        show_info: true
        tap_action: dialog
{% endfor %}
{%- for item in states['media_player'] %}
      - type: media-control
        entity: {{ item.entity_id }}
{% endfor %}
{%- for item in domains if item != "camera" and item != "media_player" %}
      - type: {% if item == "device_tracker" -%}
        entity-filter
        {%- elif item == "camera" -%}
        picture-entity
        {%- else -%}
          entities
        {%- endif %}
{%- if states[item]|list |length|default(0)|int > 1 %}
        title: {{ plural(item.replace('_', ' ') | title)  }}
{%- else %}
        title: {{ item.replace('_', ' ') | title }}
{%- endif %}
        show_header_toggle: true
        entities:
{%- for e in states[item] %}
          - {{ e.entity_id }}
{%- endfor %}
{%- if item == "device_tracker" %}
        state_filter:
          - 'home'
        card:
          type: glance
          title: My Device Trackers
{% endif %}
{% endfor -%}
```

If you need additional support for other custom cards, please feel free to do a PR or contact @skalavala.


# Externaly hosted tools

Lovelace tools

{% hint style="warning" %}
Use all at your own risk.
{% endhint %}

* [tracker-card](https://github.com/custom-cards/tracker-card) by [@ludeeus](https://github.com/ludeeus)
* [plan-coordinates](https://github.com/ciotlosm/custom-lovelace/tree/master/plan-coordinates) by [@ciotlosm](https://github.com/ciotlosm)
* [lovelace-gen](https://github.com/thomasloven/homeassistant-lovelace-gen) by [@thomasloven](https://github.com/thomasloven)
* [card-tools](https://github.com/thomasloven/lovelace-card-tools) by [@thomasloven](https://github.com/thomasloven)
* [home-setter](https://github.com/custom-cards/home-setter) by [@custom-cards](https://github.com/custom-cards)