Pixel-perfect alignment for picture element card

[GeoffreyFrogeye]

I want to stack a pre-rendered picture of my floorplan, some HA icon entities, and dynamic shapes related to presence sensor (where it detects me, color the zones I'm in etc.). Using the picture-elements cards with plotly on top is the only way I found to do that.

Here's the code I have so far, this gets pretty close:

type: picture-elements
elements:
  - type: custom:plotly-graph
    style:
      top: 0
      left: 0
      width: 100%
      height: 100%
      transform: none
    refresh_interval: 1
    config:
      modeBarButtonsToRemove:
        - select2d
        - lasso2d
        - toImage
      displaylogo: false
    layout:
      paper_bgcolor: rgba(0, 100, 0, 0.2)
      plot_bgcolor: rgba(0, 0, 100, 0.4)
      margin:
        l: 0
        r: 0
        t: 0
        b: 0
      showlegend: false
      xaxis:
        showticklabels: false
        dtick: 1000
        gridcolor: rgba(0,0,0,1)
        zerolinecolor: rgba(0,0,0,1)
        fixedrange: true
        range:
          - 0
          - 8183
      yaxis:
        showticklabels: false
        dtick: 1000
        gridcolor: rgba(0,0,0,1)
        zerolinecolor: rgba(0,0,0,1)
        scaleanchor: x
        scaleratio: 1
        fixedrange: true
        range:
          - 4953
          - 0
    entities:
      - entity: ''
        name: Half-table for reference
        mode: lines
        fill: toself
        x:
          - 3554.569
          - 4654.57
          - 4654.57
        'y':
          - 1944.427
          - 1944.427
          - 2644.43
    raw_plotly_config: true
image: >-
  https://ha.clowncar.frogeye.fr/local/Bn7LcqOgB0J8lF7Vs7pl5BPXoNQdObwq_floorplan_dummied.png

(some stuff I took from https://github.com/EverythingSmartHome/everything-presence-lite/blob/7749451c9357863e8be1994657b9fb2c003e361a/epl-map.yml without having taken the time to understand what it does)

It's however not pixel perfect, and the smaller the graph, the more you see it. Here's an table from my floorplan and half of it drawn in plotly, as seen on my phone (for scale, each cell is 1m² / 3.2 ft by 3.2 ft):

Playing around with the dev tools, I managed to make it pixel perfect (as far as my eyesight is concerned) by changing those two CSS rules, which are set by the custom lovelace module:

• ha-card: change height: calc(100% - 5px) to height: 100% (

  lovelace-plotly-graph-card/src/plotly-graph-card.ts

  Line 74 in c43112d

  height: calc(100% - 5px);

  )
• ha-card > #title: disable padding-top: 10px (

  lovelace-plotly-graph-card/src/plotly-graph-card.ts

  Line 85 in c43112d

  padding-top: 10px;

  )

My questions:

• Is it maybe possible to do what I'm trying to achieve in another way?
• Would the maintainer accept code to allow for pixel perfection, assuming it doesn't break existing uses (I assume we can hide the title div if it's empty, no idea what the - 5 px is for though).

[GeoffreyFrogeye]

A good night of sleep made me realize I could do this:

    style:
      top: '-10px'
      left: 0
      width: 100%
      height: calc(100% + 15px)

And it does the same effect as changing the CSS rules with the dev tools. It's a bit of a hack I guess, but I'm fine with it!

[dbuezas]

The weird css is to ensure it works in the different layouts. A bit hacky on my side :)