Image min_width calculated based on device screen size, not window inner width

[knicholson32]

When utilizing the variable image: sizes entry, the image is selected based on the device screen width, not the window's current width. This matches what the documentation states:

For supporting multiple Floorplan images based on the current screen resolution, image can be set to an object that contains a list of image sizes.

This means that when opening a floorplan in a browser, the screen size of the device is the deciding factor, not the actual size of the browser window. I'm not sure if this is intended behavior or not, which is why I would like to discuss it here before creating an issue or pull-request.

Example:

type: custom:floorplan-card
full_height: false
config:
  console_log_level: debug
  defaults:
    hover_action: hover-info
    tap_action: more-info
  image:
    sizes:
      - min_width: 0 # Width referenced based on device screen size, not window size
        location: /local/floorplans/Billings/glow/desktop.450.conv.svg
      - min_width: 600 # Width referenced based on device screen size, not window size
        location: /local/floorplans/Billings/glow/desktop.600.conv.svg

Code Refrerence:

getBestImage(config: FloorplanConfig): { location: string; cache: boolean } {
    let imageUrl = '';
    let cache = true;

    if (typeof config.image === 'string') {
      // Device detection
      if (Utils.isMobile && typeof config.image_mobile === 'string') {
        imageUrl = config.image_mobile;
      } else {
        imageUrl = config.image;
      }
    } else {
      if (config.image?.sizes) {
        config.image.sizes.sort((a, b) => b.min_width - a.min_width); // sort descending
        for (const pageSize of config.image.sizes) {
          // window.innerWidth or screen.width?
          if (screen.width >= pageSize.min_width) {
            imageUrl = pageSize.location;
            cache = pageSize.cache === true;
            break;
          }
        }
      } else {
        // Device detection
        if (Utils.isMobile && config.image_mobile) {
          imageUrl = (config.image_mobile as FloorplanImageConfig).location;
          cache = (config.image_mobile as FloorplanImageConfig).cache === true;
        } else {
          imageUrl = config.image.location;
          cache = config.image.cache === true;
        }
      }
    }

    return { location: imageUrl, cache: cache };
  }

[OzGav]

I am not sure if @petarkozul meant for this behaviour but it seems reasonable to me that it would look that way. Most people seem to use panel view full screen?

[knicholson32]

True, I would assume most people would view it full screen. Though does it present a negative to utilize window size over screen size? If the window is full screen, no change. If they size the window down, a smaller image could then be used.

[exetico]

I'm sorry that I've not touched this. I fully understand your thoughts. I guess we should consider to use window.innerWidth instead. With that said, I'm not sure if Petar has any thoughts on this, or not. With that said, there's docs like this where people are not always recommned the 100vw. I use vw in many cases in CSS, so I guess it's safe to go with innerWidth.

[remmob]

Has this already been dealt with?
I want to display different images, based on the innerwith of the browser.

[exetico]

A primary image, or a image to be replaced on chance in entity states, or? Let me know what you're dealing with.

[remmob]

First of all, what a great card. Your imagination is indeed the limit of what you can make.
Thank you for the great work!

Not only planning to make my room's dashboard, with HA-Floorplan. But also many other appliances in the house.
Therefore for I want to change the image not based on screen width, but inner width of the browser window.
The idea is this:

Now it is based custom button cards nested in custom button cards etc.
Due to the recent changes in the HA UI, I keep changing (card_mod) styles.
Also aligning them correctly is a pain in the...

If I make fixed svg images in HA-Floorplan in a panel, you completely bypass the lovelace.
But when resizing the browser window, I want to change the number of rooms displayed next to each other
by using a different image.
This way I do not have to make different views for different size browser widths.
I can then use one stylesheet and apply same the rules for different images.

[remmob]

Perhaps both would be possible.
Instead of min_with the option to use min_screenwitdh or min_innerwidth

[remmob]

For now, I have a solution. Wrap the HA-Floorplan card in a HA conditional card with the corresponding mediaquery's
And warp that in a custom vertical stack incard (normal stack in card doesn't play well with the conditional card)
set the panel attribute to true on the view. The one card on a panel requirement is met by the custom vertical stack in card.

To avoid having the same rules in multiple cards, put them in a separate yaml file and include that in the rules.
It's a bit more work, maybe a crude way of doing it.
If it works it works.

path: 0
name: Holcus Home
panel: true
theme: holcus
cards:
  - type: custom:vertical-stack-in-card
    mdde: vertical
    card_mod:
      style: |
        ha-card {
        background: transparent;
        }
    cards:
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 0px)" 
          - condition: screen
            media_query: "(max-width: 828px)"
        card:
          type: custom:floorplan-card
          card_mod:
            style: |
              ha-card {
              background: transparent;
              }
          config:
            image: /local/images/home22_469x3582_v1.0.1.svg
            stylesheet: /local/images/home.css
            rules: !include holcus_home_rules.yaml
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 829px)" 
          - condition: screen
            media_query: "(max-width: 1024px)"
        card:
          type: custom:floorplan-card
          card_mod:
            style: |
              ha-card {
              background: transparent;
              }
          config:
            image: /local/images/home22_918x1800_v1.0.1.svg
            stylesheet: /local/images/home.css
            rules: !include holcus_home_rules.yaml  
      - type: conditional
        conditions:
          - condition: screen
            media_query: "(min-width: 1025px)" 
          - condition: screen
            media_query: "(max-width: 3840px)"
        card:
          type: custom:floorplan-card
          card_mod:
            style: |
              ha-card {
              background: transparent;
              }
          config:
            image: /local/images/home22_1386x1290_v1.0.1.svg
            stylesheet: /local/images/home.css
            log_level: info
            console_log_level: info
            rules: !include holcus_home_rules.yaml 

in a separate file the rules.

- entity: sensor.amber_heating_cooling_watertemperture_tc
  element: tspan1
  state_action:
    action: call-service
    service: floorplan.text_set
    service_data: ${Math.round(entity.state * 10) / 10}°C
  tap_action: false

This code is not complete, but you'll get the idea.

[knicholson32]

Is there any downside of converting this to using the bower width instead of screen width? As in, will this break any user's implementations that currently exist?

If so, perhaps this could be implemented as a non-default setting.

[OzGav]

@exetico ?

[exetico]

I think my original answer still stands;
#320 (comment)

With that said, I'm willing to simply change it, if you feel it's the right thing to do. I'm just worried about breaking existing implementations of ha-floorplan.

[OzGav]

I am not sure either as to the possible effects. Its not my area of expertise...

[remmob]

Perhaps it’s possible to add, Instead of change into.
In my opion making an option to use innerwith does not effect min-width function.