Integrate sensor graph into card

Dielee · October 18, 2018, 12:46pm

Hello guys,

is it possible to integrate a sensor graph (lovelace) into a card with other entities ?
I tryed to manage this, but can’t get it work.

My config:

      - type: entities
        title: Heizung
        show_header_toggle: false
        entities:
         - climate.wohnzimmer
         - sensor.wohnzimmer_heating
         - entity: sensor.wohnzimmer_humidity
           name: Wohnzimmer Luftfeuchtigkeit
           type: sensor
         - sensor.wohnzimmer_power
         - sensor.wohnzimmer_temperature
         - sensor.yweather_temperature
         - input_boolean.heizung

Lovelace UI showing this:
heizung

Ideas are much appreciated!
Thanks!

lolouk44 · October 18, 2018, 1:06pm

you probably need a vertical stack with 2 cards, one for your entities and one for the graph

Dielee · October 18, 2018, 1:13pm

How to build this ?

lolouk44 · October 18, 2018, 1:14pm

check the doc here:

Dielee · October 18, 2018, 1:17pm

Yes thanks, i know this site. But this gave me a new tab on top of my ha…
I want to build a card on my home tab.

VDRainer · October 18, 2018, 1:33pm

Something like this:

      - type: vertical-stack
        cards:

          - type: entities
            title: Any title
            show_header_toggle: false
            entities:
              - entity: sensor.temperature
                name: Temperature

          - type: history-graph
            entities:
              - entity: sensor.temperature
                name: Temperature

Dielee · October 19, 2018, 6:31am

Sadly not working…
HA gave me this:
2018-10-19%2008_29_39-Window

Code:

      - type: vertical-stack
        cards:

      - type: entities
        title: Any
        show_header_toggle: false
        entities:
          - entity: climate.wohnzimmer
            name: Temperature

      - type: sensor
        title: Heizung_v2
        entity: sensor.wohnzimmer_humidity
        name: Wohnzimmer Luftfeuchtigkeit

lolouk44 · October 19, 2018, 8:04am

What’s not working? You have your entity and your graph in one big card. What exactly are you trying to achieve? Can you maybe provide a mock up picture?

Dielee · October 19, 2018, 8:12am

I want something looks like this:

lolouk44 · October 19, 2018, 8:24am

it won’t work unless you create your own custom card.
Other thing I can think of would be a picture element but that would require you to convert your data into picture ( liike using InfluxDB and Grafana) and create a camera that pulls that picutre, then you’d set the camera to cover the picture element image and add labels for the other bits. That’s a lot of work, but not impossible
I have done something similar for my vacuum (the latter bit with the picture element, not the chart bit yet):

      - type: picture-elements
        image: /local/blank.png
        elements:
          - type: image
            entity: camera.vacuum_map
            camera_image: camera.vacuum_map
            style:
              top: 50%
              left: 50%
              width: 100%
              height: 100%
          - type: icon
            icon: mdi:play
            tap_action: call-service
            entity: vacuum.mi_robot_vacuum
            service: vacuum.start
            style:
              top: 95%
              left: 20%
              "--paper-item-icon-color": rgb(115, 122, 130)
          - type: state-icon
            entity: sensor.xiaomi_battery_level
            service: vacuum.start_pause
            style:
              top: 95%
              left: 10%
              "--paper-item-icon-color": rgb(50, 50, 50)
          - type: state-label
            entity: sensor.xiaomi_cleaned_area
            style:
              top: 5%
              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.xiaomi_cleaning_time
            style:
              top: 5%
              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-left-style: solid
              border-color: rgb(34, 154, 210)
              background-color: rgb(54, 65, 78)
              opacity: 0.8

It’s still a work in progress (only created yesterday) but it should give you an idea

VDRainer · October 19, 2018, 8:25am

Maybe this will help:
https://github.com/thomasloven/vertical-stack-in-card

Dielee · October 19, 2018, 8:52am

Thanks, but this is to much work for such a simple result.

Dielee · October 19, 2018, 9:17am

Big THANKS ! This works like charm.

If someone looks for the same, my code:

      - type: custom:vertical-stack-in-card
        title: Heizung
        cards:
      - type: entities
        entities:
         - climate.wohnzimmer
         - sensor.wohnzimmer_heating
         - sensor.wohnzimmer_power
         - sensor.yweather_temperature
         - input_boolean.heizung
      - type: sensor
        entity: sensor.wohnzimmer_temperature
      - type: sensor
        entity: sensor.wohnzimmer_humidity

Thomas.dmm · July 22, 2019, 6:23pm

Hello It’s very good But Itry to do the same here may first card

entities:
  - entity: light.spot_1
  - entity: light.spot_2
  - entity: light.spot_3
  - entity: sensor.depuis_lu_abi
title: Chambre d'Abigaël
type: glance

here my second

type: history-graph
end: '{{ now().replace(hour=0).replace(minute=0).replace(second=0) }}'
duration:
  hours: 24
entities:
  - light.spot_1

and i try this

- type: custom:vertical-stack-in-card
        title: Chambre d'Abigaël
        cards:
       - type: glance
         entities:
          - entity: light.spot_1
          - entity: light.spot_2
          - entity: light.spot_3
          - entity: sensor.depuis_lu_abi
       - type: history-graph
	 entities:light.spot_1

but i have a mistake on line 11 ?
Can you help me ? Thanksd

lolouk44 · July 22, 2019, 8:43pm

which one is line 11?
What is the error message?
Also you’re using the custom:vertical-stack-in-card. Did you actually install this custom card?

Thomas.dmm · July 23, 2019, 8:08am

Hello, yes and no i forgot to install GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Group multiple cards into a single sleek card.
But now it’s installed I don’t have ui-lovelace.yaml and i add this line code

resources:
  - url: /www/vertical-stack-in-card.js?v=0.1.3
    type: js

in the top of the configurator of lovelace
But now when i try to call this card i have

No card type found

lolouk44 · July 23, 2019, 10:05am

if you don’t have ui-lovelace.yaml, you’ll need to create it and then you’ll have to manually created your views/cards.
Check this page and this post for more info