Feature/Idea: app graphic in dashboard

[WoutervanderLoopNL]

Checklist

• I have filled out the template to the best of my ability.
• This only contains 1 feature request (if you have multiple feature requests, open one feature request for each feature request).
• This issue is not a duplicate feature request of previous feature requests.

Is your feature request related to a problem? Please describe.

Still a work in progess on my side. but i already wanted to share this idea with others.

Im trying to show the graphic of the app into home assitant (currently by using https://github.com/ExperienceLovelace/ha-floorplan, but im open for better solutions)

to show the correct image at the dashboard (all electric/hybrid, and mono/duo) it would be nice if the current vars in the code can be exposed as an entity or state.

(there is also a difference in image for the v1 and v2 unit, but i don't know if the json specify it if it is a v2, (otherwise a manual switch on the intergration setting mght be good)

Describe the solution you'd like

code currently using

#floorplan  {
    padding: 10px;
}

svg, svg * {
    vector-effect: non-scaling-stroke !important;
    pointer-events: all !important;
}


image[id*="quatt."].quatt-show{
    display: inline;
}

image[id*="quatt."]{
    display: none;
}

title: Quatt
path: quatt
icon: mdi:floor-plan
type: panel
cards:
  - type: custom:floorplan-card
    full_height: true
    config:
      image: /local/floorplan/examples/quatt/quatt.svg
      stylesheet: /local/floorplan/examples/quatt/quatt.css
      defaults:
        hover_action: hover-info
        tap_action: more-info
      rules:
        - name: Images
          entities:
            - entity: sensor.heatpump_hp2_workingmode
              element: quatt.houseallev2duo
          state_action:
            service: floorplan.class_set
            service_data: "${(entity.state === \"0\") ? \"quatt-show\" : \"quatt-hide\"}"

Describe alternatives you've considered

.

Additional context

This is still work in progress, if you see no good in it, you can close the issue

[patrickvorgers]

If I understand it correctly you would need sensors describing the type of installation, correct?

That should be possible to expose as sensor information.

[WoutervanderLoopNL]

@patrickvorgers yeah, for now it will be enough to know on a sensor if it's mono/duo and hybrid/all electric. And as said, I don't know if it's possible if customer has a v1 of V2 quatt (if it's not possible to get that from the json, I let you decide if you want a manual setting on the quatt integration, or just ignore that)

Meaby I've more questions during development. But I ll let you know.

Eventually I thinks it's nice to document the results somewhere in this project so other users can build the dashboard by them self

[patrickvorgers]

Would be great to have the dashboard available! I would be interested in using it myself.

The json doesn't contain the information regarding the v1 and v2 models so that would be a config setting on your end.

[WoutervanderLoopNL]

@patrickvorgers seems like the only images i can obtain from the android app are only images in the "off" state.
if someone can help me with overlays in png or so, of every possible state and setup. i can work on the dashboard combining those images with the states from home assistant.

im not that good with photoshop apps ;-)

[patrickvorgers]

Probably Quatt generates the overlay dynamically in code.

[WoutervanderLoopNL]

@patrickvorgers i think they do indeed, but so far you cant decode an apk. so you cant actually view the code (as far as i know)

so if we want to continue, we need to make the images ourself

[WoutervanderLoopNL]

@patrickvorgers some first work on the overlay for heating

[patrickvorgers]

Looking good, almost the same as the Quatt app.
We can add this to the repository and maybe even add some elements on it like temperature, cop etc.

[WoutervanderLoopNL]

I'll try, I'm still in the phase of just managing/making the images (in svg) and in all setups and states. After that I've to find a way to make that images work in home assistant. But I've already thought about that, for now i just some work and time

[WoutervanderLoopNL]

Screencast.From.2025-10-20.19-21-09.webm

@patrickvorgers update

[patrickvorgers]

Very nice 👍🏻

[deku-m]

Nice work @WoutervanderLoopNL.
I think you make HA integration so much better and in the meantime give quatt ideas to update the app xD.
Can we also add the thermostat / temp in house and water temp? Or like a hover over on the pipes to get it.

Will this be a card integration?

[WoutervanderLoopNL]

@deku-m im still figuring out what is the best way.

but for now i'm using HA-Floorplan which will do the job.
and for now the only setup that is required is to add a custom dashboard into your home assistant:

but since im new to home assistant (as a developer, not as a user) i dont know all the possibilities (yet) to implement this at the best case. for example how assets work (now ive placed them manually in the www folder.

meaby @patrickvorgers has some thoughts about this already.

when #38 is done, ill work on a commit that is workable for others

[WoutervanderLoopNL]

@deku-m we're almost ready for a beta release. full progress is available here #212

might wanne test with us? would like to hear your response.

it isnt a seperate dashboard anymore. its a totaly new home assistant custom card. and we've also implemented the capability to add solarpanels. boiler, solarcollector and AC unit