Is it possible to add any kind of other card into ha-floorplan the way we do in picture elements?

[Tamooj]

I have a lot of sensors I'd love to display in ha-floorplan; power values, minigraph of temps, etc. and there's no easy way to do these by just turning on/off static bitmaps or tweaking SVG elements without a lot of inline js code. Am I just missing something obvious?

Here's an example of what I'm doing currently in picture-elements, that I'm trying to replicate in ha-floorplan:

[OzGav]

Love the Star Trek theme!

Have a look at the moisture example here https://experiencelovelace.github.io/ha-floorplan/docs/example-home/

[Tamooj]

Yes, I looked at this example. Sure, I could hand craft gradient fills for some of these, but there's a HUGE collections of HA cards that implement all manner of UI element as card types. Dial graphs and apexcharts etc etc. I don't want to recreate all of those.

[Tamooj]

Note that all those connecting paths are SVG elements that change color / opacity based on how much energy is flowing through them, and some of the arrows animate showing power direction. This is what is very hard to achieve in picture element, and far easier in ha-floorplan

[exetico]

You're right. You cannot add another card directly into ha-floorplan. Just as a technical input; If that should be supported, we'd need to calculate there the card should be rendered, also on every resize, as it's not possible to have all native html-elements "as part of" the SVG element.

I guess you need to look at a popup-solution (browser-mod, or maybe mushroom), or something like #453 (comment) this, suggested by Trzinka.

Also; There's no "bars" logics at the moment. The original creator of ha-floorplan did make the most work, implementing guage and graph-support, but it never ended up as part of the solution.

I can see why a guage solution would improve the usability of ha-floorplan for this kind of solution. With that said; It's hard to make a proper solution, where everyone managed to use it as intended. Just for reference, try and see #355 (comment), where it's clear that "adding a text" are just way more, than "just adding a text".

I do most of the things at one of my friends house (which are a bit funny, as my current "new floorplan" are not made, yet 😆 ).

(image not related to your question..)

Here's the code to make a "guage" like battery pct. Note that I've used a method to make a clip path, and adjusting that "on the fly". Comments are translated to english without any validation/corrections added. Also, it's very complex, due to the use of a battery-icon, instead of just fulling a normal rect.

element:
  - sensor.battery_deye_inner_box # NOTE! This is a hack to create a cut-out of the battery icon, which is combined with "Battery_Icon_Wrapper"
  - Battery_Icon_Wrapper # But since the icon's color comes from the "wrapper", we also need to include the Icon_Wrapper
  - sensor.battery_deye_inner_box-clip-path
entities:
  - sensor_sun12k_battery_capacity
state_action:
  action: call-service
  service: floorplan.style_set
  service_data: |
      >   let fill = "fill:red";
          let transform = "";
          try{
            // Here we check if the desired element ID is being used - so we can avoid changing transform or fill
            // This is an opportunity to gather multiple logics into one, and simply code out the "difference" :)
            let is_inner_block = element.id === 'sensor.battery_deye_inner_box-clip-path' ? true : false;

            // Now calculate the percentage.
            let pct = entity.state ? Math.round(entity.state * 10) / 10 : false;

            // To move the icon, we need to know the height of the icon
            // We use the "wrapper", since we cannot get the height of the "hidden" battery icon with ID "path2369"
            var height = Math.ceil(elements['sensor.battery_deye_inner_box'].getBBox().height);

            // Let's calculate "transform" IF we are dealing with our "inner icon" with ID "path2369"
            // By the way, the ID "path2369" is defined by InkScape, as a "Cut" based on two icons is calculated
            // So it's a bit of an awkward name we're dealing with here ;) ...
            transform = is_inner_block ? `transform: translate(0, ${height - Math.floor(pct / (100 / height))}px)` : '';

            // There are many ways to calculate color, and many become quite complex.
            // But in fact, you can use HLS (Hue, Lightness, Saturation), and keep it pretty simple
            // HLS input1 must be a value from 1 to 128, so we need to convert pct (1-100) to 1-128
            let hsl_perc = pct*1.28;

            // Let's set our fill, but ONLY if it's not the "inner icon"
            // The inner icon CANNOT use a fill, as it is the "outer" (wrapper) that can set a fill in a "cut"
            fill = `fill:hsl(${hsl_perc},100%,50%)`;
          }catch(e){
            // Write an error to the console if there are any issues...
            console.log("e", e);
          }
          const all_styles = fill + ";" + transform;
          return all_styles;

The clipPath looks like this (generated in InkScape):

And it's used in the rect (also generated in InkScape):

[Trzinka]

Hi.
If you're using a picture-elements card, I think you're looking for the answer in the wrong place.
The discussion is intended for floor plan card users.

If I may have misunderstood you and you are using a floorplan card and you want to display other cards in lovelace in addition to the floorplan card, it is best to use the Grid card (https://www.home-assistant.io/dashboards/grid/) and thus separate the display on the screen.

I have it separated into two parts. In the left I use a calendar card and a pop-up webrtc camera card, and in the right a floor-plan card:

[Tamooj]

Yes, the goal was to use ha-floorplan, because it lets me more easily use entity state triggers to change SVG elements directly. PE is awful at that, because it wraps the SVG up as a whole image without access to sub elements. But, picture-elements DOES let us integrate other card types over the main SVG image, so I can place them closest to the part of the floorplan that makes the most sense. I will consider using a grid layout to see if I can make this work. However, it would be less work for me to write SVG manipulators for picture-element than waiting for ha-floorplan to use other lovelace cards, i suspect. :-(

[OzGav]

Yes there is no plan to try and have HA cards appear in ha-floorplan. What you are trying to do in your first post however looks fairly easily achievable.

[Trzinka]

I forgot to mention that the 5 icons like light bulb, € icon, € temperature icon... provide a link to other HA Lovelace cards
An example of the € icon:

An example of a light icon:

You have to decide what is the priority display and what is the secondary display because in my opinion the floor plan card can quickly become Las Vegas at night!!

It is also important on which devices you want to display the floor plan, because I myself had a lot of problems with the display on mobile phones and tablets. That's why the end result is what it is!

[Trzinka]

Also worth mentioning is that the weather card is SVG and is included in the floor plan itself and is not a Lovelace card.
#324

Maybe this will help you.